/* ============================================================
   Es Gelat — Styles
   Corporate: #1E5D2D
   Font: PP Pangram Sans
   ============================================================ */

/* ── Font faces ──
   Managed dynamically by js/theme.js based on data.THEME.font in the
   CMS. The default config registers PP Pangram Sans (Light/Medium/
   Semibold/Bold) from assets/fonts/. Switch to "Default" in the CMS
   to use the browser's system font, or to "Google Fonts" to load
   a remote family. */

/* ── Global focus reset ──
   Remove ALL outline on links and buttons (default browser styling
   was showing a green/blue box around the logo and other clickables
   even after navigation). Form fields keep a focus ring because users
   actively need to know which field is being typed into.
   ─────────────────────────────────────────────────────────────── */
a, button, summary, [role="button"], [tabindex] {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
a:focus, a:focus-visible, a:active,
button:focus, button:focus-visible, button:active,
summary:focus, summary:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible,
[tabindex]:focus, [tabindex]:focus-visible {
  outline: none !important;
}

/* Form fields KEEP a focus ring — users typing need to see where they
   are. Verde corporativo, sólo cuando se enfoca de verdad. */
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--principalcolor, #1E5D2D);
  outline-offset: 1px;
}

/* ── Custom properties ── */
:root {
  --principalcolor:       #1E5D2D;
  --principalcolor-dark:  #164421;
  --principalcolor-light: #2A7A3D;
  --white:       #FFFFFF;
  --bgcolor:   #F5F0EB;
  --accentcolor:       #EDE6DA;
  --textcolor:   #1A1A1A;
  --text-light:  #FFFFFF;
  --font:        'PP Pangram Sans', 'Helvetica Neue', Arial, sans-serif;
  --sidebar-w:   clamp(25vW, 26vw, 460px);
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --duration:    0.6s;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); color:var(--textcolor); background:var(--bgcolor);overflow-x:hidden;  overflow-y:auto; line-height:1.5; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul { list-style:none; }
:focus-visible { outline:2px solid var(--principalcolor-light); outline-offset:2px; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  /* Pinned to the viewport — must never move with page scroll. The
     `!important` is defensive: if any future rule (theme, plugin, etc.)
     overrides `position` the sidebar would suddenly scroll with the
     content and the whole layout breaks. */
  position:fixed !important; top:0 !important; left:0 !important;
  width:var(--sidebar-w); height:100vh; height:100dvh;
  z-index:100;
  display:flex; flex-direction:column;
  padding:2.4rem 2rem 1.6rem;
  color:var(--text-light);
  transition:background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  overflow-y:auto; overflow-x:hidden;
  /* Smooth momentum scroll on iOS for the (rare) case the inner content
     overflows the viewport height. */
  -webkit-overflow-scrolling:touch;
}

/* Slider view: color comes from the active hero slide (set inline by JS) */
body.view-home .sidebar {
  /* Fallback until JS sets the inline color from HERO_IMAGES */
  background-color: rgba(30, 93, 45, 0.50);
}
/* Inner views: solid */
body:not(.view-home) .sidebar {
  background:var(--principalcolor);
}

/* ── Brand ── */
.sidebar__brand { margin-bottom:1.2rem; }
.sidebar__logo-link { display:inline-block; }
.sidebar__logo {
  /* Width is driven by --logo-width (set by js/theme.js from the CMS).
     Fallback to a sensible default if the variable hasn't been set yet. */
  width: var(--logo-width, 220px);
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.sidebar__address { font-size:0.72rem; font-weight:300; letter-spacing:0.03em; margin-top:0.3rem; opacity:0.85; }

/* ── Claim (top of sidebar, where Angelo award used to live) ── */
.sidebar__claim {
  margin: 0 0 1.4rem;
  font-size: 0.85rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  opacity: 0.85;
  letter-spacing: 0.01em;
}

/* ── Award (now at the bottom of the sidebar, below legal links) ── */
.sidebar__award { margin-bottom:1.4rem; }
.sidebar__award--bottom {
  /* When the award sits at the bottom (after legal), give it a bit of
     top space so it doesn't crowd the legal block, and a large bottom
     margin so the floating cookie reopen chip at the bottom-left
     doesn't overlap it. */
  margin-top: 1rem;
  margin-bottom: 120px;
  opacity: 0.85;
}
.sidebar__award-name { display:block; font-size:0.65rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; opacity:0.7; margin-bottom:0.2rem; }
.sidebar__award-text { font-size:0.7rem; font-weight:300; line-height:1.45; opacity:0.8; }

/* ── Menu trigger (cone) ── */
.sidebar__trigger {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.5rem 0; margin-bottom:0.5rem;
  transition:opacity 0.3s, transform 0.3s var(--ease);
}
.sidebar__trigger:hover { opacity:0.8; }
.sidebar__trigger:hover .sidebar__cone-svg { transform:rotate(-8deg) scale(1.1); }
.sidebar__cone-svg {
  width:32px; height:36px; color:var(--text-light);
  transition:transform 0.4s var(--ease);
}
.sidebar__trigger-label { font-size:0.75rem; font-weight:300; font-style:italic; opacity:0.8; }

/* hidden when menu open */
body.menu-open .sidebar__trigger { opacity:0; pointer-events:none; position:absolute; }

/* ── Menu close (X) ── */
.sidebar__close {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.5rem 0; margin-bottom:1rem;
  opacity:0; pointer-events:none; position:absolute;
  transition:opacity 0.35s var(--ease), transform 0.35s var(--ease);
  background:none; border:none; cursor:pointer;
  color:inherit; font:inherit;
}
.sidebar__close:hover { opacity:0.8; }
.sidebar__close:hover .sidebar__x-svg { transform:rotate(90deg) scale(1.1); }
.sidebar__x-svg {
  width:32px; height:22px; color:var(--text-light);
  transition:transform 0.4s var(--ease);
}
.sidebar__close-label { font-size:0.75rem; font-weight:300; font-style:italic; opacity:0.8; }

body.menu-open .sidebar__close { opacity:1; pointer-events:auto; position:relative; }

/* ── Navigation ── */
.sidebar__nav {
  flex:1;
  opacity:0; transform:translateX(-20px);
  pointer-events:none;
  transition:opacity 0.4s var(--ease) 0.05s, transform 0.4s var(--ease) 0.05s;
}
body.menu-open .sidebar__nav { opacity:1; transform:translateX(0); pointer-events:auto; }

.sidebar__nav-list { display:flex; flex-direction:column; gap:0.15rem; }
.sidebar__nav-list a {
  display:block; padding:0.45rem 0;
  font-size:0.95rem; font-weight:600; letter-spacing:0.01em;
  position:relative;
  transition:opacity 0.3s, transform 0.3s var(--ease);
}
.sidebar__nav-list a::after {
  content:''; position:absolute; left:0; bottom:0.2rem;
  width:0; height:1.5px; background:var(--text-light);
  transition:width 0.35s var(--ease);
}
.sidebar__nav-list a:hover { opacity:0.85; transform:translateX(4px); }
.sidebar__nav-list a:hover::after { width:100%; }

/* staggered entrance */
body.menu-open .sidebar__nav-list li:nth-child(1) a { transition-delay:0.08s; }
body.menu-open .sidebar__nav-list li:nth-child(2) a { transition-delay:0.12s; }
body.menu-open .sidebar__nav-list li:nth-child(3) a { transition-delay:0.16s; }
body.menu-open .sidebar__nav-list li:nth-child(4) a { transition-delay:0.20s; }
body.menu-open .sidebar__nav-list li:nth-child(5) a { transition-delay:0.24s; }
body.menu-open .sidebar__nav-list li:nth-child(6) a { transition-delay:0.28s; }
body.menu-open .sidebar__nav-list li:nth-child(7) a { transition-delay:0.32s; }
body.menu-open .sidebar__nav-list li:nth-child(8) a { transition-delay:0.36s; }
body.menu-open .sidebar__nav-list li:nth-child(9) a { transition-delay:0.40s; }

/* ── Language switcher ── */
.sidebar__lang {
  display:flex; gap:0.5rem; margin-top:auto; padding:0.6rem 0;
  opacity:0; pointer-events:none;
  transition:opacity 0.4s var(--ease) 0.2s;
}
body.menu-open .sidebar__lang { opacity:1; pointer-events:auto; }
.sidebar__lang button {
  font-size:0.65rem; font-weight:600; letter-spacing:0.08em;
  padding:0.2rem 0.45rem; border-radius:3px;
  opacity:0.55; transition:opacity 0.25s, background 0.25s;
}
.sidebar__lang button.active { opacity:1; background:rgba(255,255,255,0.15); }
.sidebar__lang button:hover { opacity:0.9; }

/* ── Social ── */
.sidebar__social {
  display:flex; gap:0.75rem; padding:0.5rem 0;
  opacity:0; pointer-events:none;
  transition:opacity 0.4s var(--ease) 0.25s;
}
body.menu-open .sidebar__social { opacity:1; pointer-events:auto; }
.sidebar__social a { display:block; width:26px; height:26px; color:var(--text-light); transition:opacity 0.25s, transform 0.3s var(--ease); }
.sidebar__social a:hover { opacity:0.75; transform:scale(1.12); }
.sidebar__social svg { width:100%; height:100%; }

/* ── Legal ── */
.sidebar__legal {
  display:flex; flex-direction:column; gap:0;
  padding-top:0.5rem;
  /* No bottom margin: the Angelo award block follows immediately after.
     The floating cookie chip stays clear because the Angelo block sits
     above it and has its own bottom margin where needed. */
  margin-bottom:0;
}
/* Padding here brings the touch target up to 24 px tall (Lighthouse min)
   without growing the visible text — the link looks the same, the hitbox
   is just bigger. */
.sidebar__legal a {
  font-size:0.6rem; font-weight:300; opacity:0.5; transition:opacity 0.25s;
  display:block; padding:5px 0;
}
.sidebar__legal a:hover { opacity:0.8; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main {
  position:relative;
  /* No min-height — the body already has `background: var(--bgcolor)`
     covering the full viewport, so we don't need .main to forcibly
     stretch to 100vh. Removing it stops the detail / static / blog
     views from creating a tall empty area below the real content. */
  transition:margin-left var(--duration) var(--ease);
}
body.view-home .main { margin-left:0; }
body:not(.view-home) .main { margin-left:var(--sidebar-w); }

/* Home view: lock to viewport, no scroll (hero slider is fullscreen) */
body.view-home,
html:has(body.view-home) {
  height:100vh; height:100dvh;
  overflow:hidden;
}
body.view-home .main {
  height:100vh; height:100dvh;
  overflow:hidden;
}

/* ── Views ── */
.view {
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  /* Clip overflowing content of inactive views. Without this, long
     pages (legal text especially: aviso legal, privacidad, cookies)
     have content taller than their constrained absolute container,
     and that overflow leaks into document.scrollHeight — even though
     the view is invisible — making the body scroll past the real
     active content into empty space. */
  overflow:hidden;
  transition:opacity var(--duration) var(--ease), visibility 0s var(--duration);
}
.view.active {
  opacity:1; visibility:visible;
  transition:opacity var(--duration) var(--ease), visibility 0s 0s;
  position:relative;
  /* Active view sizes to its content (it's position:relative) so the
     clip is no longer needed and could even hurt if a child uses
     position:absolute with negative offsets. */
  overflow:visible;
}

/* ============================================================
   VIEW: HOME — HERO SLIDER
   ============================================================ */
.hero-slider { position:relative; width:100vw; height:100vh; height:100dvh; overflow:hidden; }

.hero-slider__slide {
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero-slider__slide.active { opacity:1; z-index:1; }
.hero-slider__slide img,
.hero-slider__slide video,
.hero-slider__media {
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform 8s linear;
}
.hero-slider__slide.active img,
.hero-slider__slide.active video { transform:scale(1.04); }

/* Dots — 24×24 transparent hitbox (Lighthouse min) with the visible
   10 px circle centred via ::before. Looks identical to the user but
   passes the touch-target audit. */
.hero-slider__dots {
  position:absolute; bottom:2.5rem; right:3rem;
  z-index:10; display:flex; gap:0.4rem;
}
.hero-slider__dot {
  width:24px; height:24px;
  background:transparent; border:0; padding:0;
  position:relative; cursor:pointer;
}
.hero-slider__dot::before {
  content:'';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,0.4); border:1.5px solid rgba(255,255,255,0.7);
  transition:background 0.35s, transform 0.35s var(--ease);
}
.hero-slider__dot.active::before { background:var(--white); transform:translate(-50%, -50%) scale(1.25); }
.hero-slider__dot:hover::before { background:rgba(255,255,255,0.7); }

/* Slide text caption overlay */
.hero-slider__caption {
  position:absolute;
  bottom:0; left:0;
  /* Start right after the sidebar and fill ~50% of the visible area */
  padding-left:calc(var(--sidebar-w, 340px) + 3rem);
  padding-bottom:4rem;
  padding-right:2rem;
  /*width:calc(var(--sidebar-w, 340px) + 50vw);*/
  width: 100%;
  box-sizing:border-box;
  /* Vertical alignment: flex to push content to the bottom */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  z-index:5;
  pointer-events:none;
  /* Text styling */
  color:var(--white);
  text-shadow:0 2px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
}
.hero-slider__caption * { pointer-events:auto; }
.hero-slider__caption h1,
.hero-slider__caption h2,
.hero-slider__caption h3 {
  margin:0 0 0.3em; font-weight:700; line-height:1.1;
}
.hero-slider__caption h1 { font-size:clamp(2rem, 4.5vw, 4rem); }
.hero-slider__caption h2 { font-size:clamp(1.5rem, 3vw, 2.8rem); }
.hero-slider__caption h3 { font-size:clamp(1.1rem, 2vw, 1.8rem); }
.hero-slider__caption p {
  margin:0 0 0.5em; font-size:clamp(0.85rem, 1.3vw, 1.15rem);
  font-weight:300; line-height:1.5; /*max-width:40ch*/;
}
.hero-slider__caption a {
  color:var(--white); text-decoration:underline;
  text-underline-offset:0.15em;
}
/* CTA button overlaid on the slide. The colours come inline from the CMS,
   so this rule only handles layout, typography and hover behaviour. */
.hero-slider__cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-top:1.2rem;
  padding:0.85rem 1.6rem;
  font-size:clamp(0.95rem, 1.2vw, 1.05rem);
  font-weight:600;
  line-height:1;
  border-radius:999px;
  border:none;
  text-decoration:none !important;
  letter-spacing:0.02em;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  cursor:pointer;
  pointer-events:auto;
  text-shadow:none;
}
.hero-slider__cta:hover,
.hero-slider__cta:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.26);
  filter:brightness(1.05);
}
.hero-slider__cta:active { transform:translateY(0); filter:brightness(0.95); }
@media (max-width: 768px) {
  .hero-slider__cta { padding:0.7rem 1.3rem; font-size:0.92rem; margin-top:0.9rem; }
}

/* ============================================================
   VIEW: SABORS — GRID
   ============================================================ */
.view--sabors {
  background:var(--bgcolor);
  /* The parent `.main` already enforces min-height: 100dvh on its own
     and the body fills the viewport with --bgcolor, so adding it here
     just creates extra scrollable whitespace when the grid is short
     (e.g. a category with 2-3 products). */
  padding:2rem 2.5rem 3rem;
}

/* Per-category description — rendered under the .sabors__header and
   above the .sabors__grid. Set by JS from CATEGORIES[].description in
   the active language. Empty / missing description = no element. */
.sabors__cat-desc {
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--textcolor);
  opacity: 0.85;
  max-width: 80ch;
}
.sabors__cat-desc p:first-child { margin-top: 0; }
.sabors__cat-desc p:last-child  { margin-bottom: 0; }

/* Blog category description — same role for the blog page when filtered
   by a specific category. Sits between the chips and the grid. */
.blog__cat-desc {
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--textcolor);
  opacity: 0.85;
  max-width: 80ch;
}
.blog__cat-desc p:first-child { margin-top: 0; }
.blog__cat-desc p:last-child  { margin-bottom: 0; }

.sabors__header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.8rem; flex-wrap:wrap; gap:1rem;
}
.sabors__title {
  font-size:clamp(1.5rem, 3vw, 2.2rem); font-weight:700; color:var(--textcolor);
  letter-spacing:-0.01em;
}
.sabors__controls { display:flex; align-items:center; gap:0.5rem; }
.sabors__cols-label { font-size:0.7rem; font-weight:500; opacity:0.5; margin-right:0.3rem; }
.sabors__col-btn {
  width:32px; height:32px; border-radius:6px;
  font-size:0.8rem; font-weight:600;
  background:transparent; border:1.5px solid rgba(0,0,0,0.15);
  color:var(--textcolor); transition:all 0.25s var(--ease);
}
.sabors__col-btn.active { background:var(--principalcolor); color:var(--white); border-color:var(--principalcolor); }
.sabors__col-btn:hover:not(.active) { border-color:var(--principalcolor); color:var(--principalcolor); }

/* Grid */
.sabors__grid {
  display:grid; gap:1rem;
  transition:all 0.4s var(--ease);
}
.sabors__grid.cols-2 { grid-template-columns:repeat(2, 1fr); }
.sabors__grid.cols-3 { grid-template-columns:repeat(3, 1fr); }
.sabors__grid.cols-4 { grid-template-columns:repeat(4, 1fr); }

/* Grid card */
.sabor-card {
  position:relative; border-radius:10px; overflow:hidden;
  aspect-ratio:1/1 !important; cursor:pointer;
  transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sabor-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.15); }

.sabor-card__img {
  position:absolute; inset:0;
  overflow:hidden;
  background-size:cover; background-position:center;
  background-color:#ECEAE3;
  transition:transform 0.6s var(--ease);
}
.sabor-card__img .sabor-card__media,
.sabor-card__img img,
.sabor-card__img video {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#000;  /* avoid white flash while a video buffers */
}
.sabor-card:hover .sabor-card__img { transform:scale(1.08); }

/* overlay */
.sabor-card__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%);
  transition:background 0.4s var(--ease);
}
.sabor-card:hover .sabor-card__overlay {
  background:linear-gradient(to top, rgba(30,93,45,0.55) 0%, rgba(30,93,45,0.05) 55%);
}

/* pill */
.sabor-card__pill {
  position:absolute; bottom:0.8rem; left:0.8rem;
  padding:0.35rem 0.8rem; border-radius:20px;
  font-size:0.75rem; font-weight:600; letter-spacing:0.01em;
  background:rgba(255,255,255,0.88); color:var(--textcolor);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.sabor-card:hover .sabor-card__pill {
  background:var(--principalcolor); color:var(--white); transform:translateY(-2px);
}

/* Icons column inside card — stacked vertically along the right edge so
   they grow upward without colliding with `.sabor-card__pill` (which
   sits at bottom-left). Previously row+flex-wrap which could overlap
   the pill when a product had several allergen badges. */
.sabor-card__icons {
  position:absolute; bottom:0.8rem; right:0.8rem;
  display:flex; flex-direction:column;
  gap:0.35rem; align-items:flex-end;
}
/* Each icon is rendered exactly as the source SVG — no filter, no
   background, no border. The SVGs themselves carry their own colors
   and shape (most have a built-in green circular badge). */
.sabor-card__icon {
  width:36px; height:36px;
  display:block;
  transition:transform 0.3s var(--ease);
}
.sabor-card:hover .sabor-card__icon { transform:scale(1.08); }

/* ============================================================
   VIEW: SABOR DETAIL
   ============================================================ */
.view--sabor {
  background:var(--bgcolor);
  /* Parent .main already enforces min-height: 100dvh — leaving it here
     too would force extra blank scroll on flavor detail pages whose
     content is shorter than the viewport. */
}

/* Back header / breadcrumb */
.sabor__back-header {
  display:flex; align-items:center; gap:0.5rem;
  padding:1.5rem 2.5rem 1rem;
}
/* Variant: placed UNDER the slider — separator on top, tighter padding */
.sabor__back-header--below {
  padding:0.9rem 2.5rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
  background:rgba(0,0,0,0.015);
}
.sabor__back {
  display:inline-flex; align-items:center; gap:0.3rem;
  font-size:0.8rem; font-weight:500; color:var(--principalcolor);
  transition:opacity 0.25s, transform 0.25s var(--ease);
}
.sabor__back:hover { opacity:0.7; transform:translateX(-3px); }
.sabor__back svg { color:var(--principalcolor); }
.sabor__back-subtitle {
  font-size:0.8rem; font-weight:300; opacity:0.5;
  margin-left:0.3rem;
}

/* Detail slider */
.sabor__slider {
  position:relative; width:100%; height:clamp(280px, 55vh, 600px);
  overflow:hidden;
}
.sabor__slider-track {
  position:relative; width:100%; height:100%;
}
/* Each slide is positioned absolutely and stacked. Opacity/transform
   transitions are controlled by .slider-fx--* classes below. */
.sabor__slider-slide {
  position:absolute; inset:0;
}
.sabor__slider-slide .sabor__slider-media,
.sabor__slider-track img,
.sabor__slider-track video,
.sabor__slider-media {
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.sabor__slider-track video,
.sabor__slider-slide video {
  background:#000;  /* avoid white flash while the video buffers */
}

/* ══════════════════════════════════════════════════════════════════
   SLIDER TRANSITION EFFECTS (slider-fx)
   Shared between hero slider, sabor detail slider and blog slider.
   The incoming slide is the one gaining .active — it animates from
   its defined "entry" state (opacity 0 + transform) to neutral state.
   Outgoing slides fade out via opacity (they lose .active).
   --tdur is set inline per-slide via the CMS.
   ══════════════════════════════════════════════════════════════════ */
.slider-fx {
  opacity:0;
  transition:opacity var(--tdur, 1.2s) cubic-bezier(.4, 0, .2, 1),
             transform var(--tdur, 1.2s) cubic-bezier(.4, 0, .2, 1);
}
.slider-fx.active { opacity:1; }

/* fade — default: just opacity */
.slider-fx--fade { /* transform defaults suffice */ }

/* zoom-in: scales from 1.15 to 1 while fading in */
.slider-fx--zoom-in:not(.active) { transform:scale(1.15); }
.slider-fx--zoom-in.active       { transform:scale(1); }

/* zoom-out: scales from 0.9 to 1 while fading in */
.slider-fx--zoom-out:not(.active) { transform:scale(0.9); }
.slider-fx--zoom-out.active       { transform:scale(1); }

/* slide-left: enters from the right side */
.slider-fx--slide-left:not(.active) { transform:translateX(100%); }
.slider-fx--slide-left.active       { transform:translateX(0); }

/* slide-right: enters from the left side */
.slider-fx--slide-right:not(.active) { transform:translateX(-100%); }
.slider-fx--slide-right.active       { transform:translateX(0); }

/* slide-up: enters from the bottom */
.slider-fx--slide-up:not(.active) { transform:translateY(100%); }
.slider-fx--slide-up.active       { transform:translateY(0); }

/* slide-down: enters from the top */
.slider-fx--slide-down:not(.active) { transform:translateY(-100%); }
.slider-fx--slide-down.active       { transform:translateY(0); }
.sabor__slider-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.75); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.25s, transform 0.25s var(--ease);
  z-index:5;
}
.sabor__slider-arrow:hover { background:var(--white); transform:translateY(-50%) scale(1.08); }
.sabor__slider-arrow--prev { left:1rem; }
.sabor__slider-arrow--next { right:1rem; }
.sabor__slider-arrow svg { color:var(--principalcolor); }

/* Detail content */
.sabor__content { padding:2rem 2.5rem 3rem; }

.sabor__title-row {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.5rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.sabor__title {
  font-size:clamp(1.4rem, 3vw, 2rem); font-weight:700; color:var(--textcolor);
  flex:1 1 auto;
}

/* ─── Like button + view counter (Instagram-style: bare icon, no chrome) ─── */
.sabor__stats {
  display:inline-flex; align-items:center; gap:1.2rem;
  margin-left:auto;                           /* pushes to the right */
  flex-shrink:0;
}
/* The "button" is just the heart + count — no border, no background. */
.sabor__like-btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0;
  border:none;
  background:none;
  color:var(--textcolor, #222);
  font-size:0.95rem; font-weight:600;
  cursor:pointer;
  line-height:1;
}
.sabor__like-btn:hover .sabor__like-icon {
  transform:scale(1.08);
}
.sabor__like-btn.is-liked {
  cursor:default;
}
/* The SVG path carries fill="none" as a presentation attribute (the
   default outline state). Direct presentation attributes on the path
   beat inherited values from the parent <svg>, so we override fill on
   the path itself, not on the SVG element. */
.sabor__like-icon path {
  fill:none;
  stroke:currentColor;
  transition:fill 0.2s ease, stroke 0.2s ease;
}
.sabor__like-btn.is-liked .sabor__like-icon path {
  fill:#ed4956;     /* Instagram red */
  stroke:#ed4956;
}
.sabor__like-icon {
  flex-shrink:0;
  color:var(--textcolor, #222);
  transition:transform 0.2s var(--ease);
}
.sabor__like-btn.is-popping .sabor__like-icon {
  animation:sabor-heart-pop 0.45s var(--ease);
}
@keyframes sabor-heart-pop {
  0%   { transform:scale(1); }
  30%  { transform:scale(0.85); }
  55%  { transform:scale(1.30); }
  80%  { transform:scale(0.95); }
  100% { transform:scale(1); }
}
.sabor__view-count {
  display:inline-flex; align-items:center; gap:0.35rem;
  color:rgba(0,0,0,0.45);
  font-size:0.85rem; font-weight:500;
}
.sabor__view-count svg {
  flex-shrink:0; color:rgba(0,0,0,0.45);
}

/* On narrow screens push stats to a new row, centred */
@media (max-width:600px) {
  .sabor__stats { margin-left:0; flex-basis:100%; justify-content:flex-start; }
}
.sabor__badges { display:flex; gap:0.6rem; align-items:center; }
.sabor__badge-gf {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.3rem 0.7rem; border-radius:20px;
  background:var(--principalcolor); color:var(--white);
  font-size:0.7rem; font-weight:600;
}
.sabor__badge-gf svg { width:22px; height:22px; }

/* Allergen / dietary flag badges shown on detail page next to the title.
   Each badge = the SVG icon (rendered as-is) + the translated label.
   No coloured pill behind it — the SVGs already carry their own
   visual identity. */
.sabor__badges { flex-wrap:wrap; gap:0.6rem 0.9rem; }
.sabor__badge-flag {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.78rem; font-weight:500; line-height:1.2;
  color:var(--textcolor);
}
.sabor__badge-flag img {
  width:28px; height:28px; flex-shrink:0;
  display:block;
}

/* Two columns — each takes its natural height (align-items:start).
   `stretch` (the grid default) caused the left column to balloon to
   match the square gallery image on the right, creating a huge blank
   gap below short descriptions/ingredient lists. With `start`, the
   columns end where their content ends. */
.sabor__columns {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  align-items:start;
}
.sabor__col-left {
  display:flex; flex-direction:column; gap:1.5rem;
  min-height:0;            /* allow children to shrink */
}
.sabor__col-right {
  display:flex; flex-direction:column; gap:1.2rem;
}
.sabor__section { min-height:0; }
.sabor__section[hidden] { display:none; }
/* Description block: capped at the same height as the right-column gallery
   (badges + main image + thumbnails). Max-height is set by JS in
   renderDetail() because there's no pure-CSS way to mirror another
   element's height across grid columns. Scrollbar appears when content
   exceeds that height. */
.sabor__section--desc {
  min-height:0;
  overflow-y:auto;
  padding-right:0.6rem;    /* breathing room next to scrollbar */
  scrollbar-width:thin;
}
.sabor__section--desc::-webkit-scrollbar { width:6px; }
.sabor__section--desc::-webkit-scrollbar-thumb {
  background:rgba(30,93,45,0.35); border-radius:3px;
}
.sabor__section--desc::-webkit-scrollbar-thumb:hover { background:rgba(30,93,45,0.55); }

.sabor__section-title {
  font-size:1rem; font-weight:700; color:var(--principalcolor);
  margin-bottom:0.8rem;
}
.sabor__section-title--nutri { margin-top:2rem; }

.sabor__ingredients-list {
  display:flex; flex-direction:column; gap:0.6rem;
  font-size:0.82rem; font-weight:300; line-height:1.55;
}
.sabor__ingredients-list li { padding-left:0.8rem; position:relative; }
.sabor__ingredients-list li::before {
  content:''; position:absolute; left:0; top:0.55em;
  width:5px; height:5px; border-radius:50%; background:var(--principalcolor);
}
.sabor__ingredients-list strong { font-weight:600; }

/* Nutrition table */
.sabor__nutrition-table {
  width:100%; border-collapse:collapse; font-size:0.78rem;
}
.sabor__nutrition-table td {
  padding:0.4rem 0.6rem; border-bottom:1px solid rgba(0,0,0,0.06);
}
.sabor__nutrition-table td:first-child { font-weight:500; }
.sabor__nutrition-table td:last-child { text-align:right; font-weight:300; }
.sabor__nutrition-table tr.sub td:first-child { padding-left:1.2rem; font-weight:300; font-size:0.74rem; opacity:0.7; }

/* Right column */
.sabor__quality-badges { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.5rem; }
.sabor__badge {
  display:inline-block; padding:0.5rem 1rem; border-radius:6px;
  font-size:0.8rem; font-weight:600; text-align:center;
}
.sabor__badge--proximitat { background:var(--principalcolor); color:var(--white); }
.sabor__badge--naturals { background:var(--accentcolor); color:var(--principalcolor); border:1px solid rgba(30,93,45,0.15); }

.sabor__desc {
  font-size:0.85rem; font-weight:300; line-height:1.65;
  color:var(--textcolor); margin-bottom:1.5rem;
}

/* Gallery (right column) */
.sabor__gallery {
  display:flex; flex-direction:column; gap:0.6rem;
}
.sabor__gallery-main {
  border-radius:10px; overflow:hidden; position:relative;
}
.sabor__gallery-main img,
.sabor__gallery-main video {
  width:100%; height:auto; aspect-ratio:1/1 !important; object-fit:cover;
  display:block;
  /* Cap the gallery image height so a wide product column doesn't
     produce a 700-px square that drags the whole detail page down
     with empty space below the description. */
  /*max-height:clamp(360px, 55vh, 520px);*/
  transition:transform 0.5s var(--ease), opacity 0.3s ease;
  background:#000;
}
.sabor__gallery-main:hover img { transform:scale(1.03); }
.sabor__gallery-main video { border-radius:inherit; }
.sabor__gallery-thumbs {
  display:flex; gap:0.45rem; flex-wrap:wrap;
}
.sabor__gallery-thumb {
  flex:0 0 auto; width:72px; height:72px;
  border-radius:6px; overflow:hidden;
  border:2px solid transparent;
  padding:0; background:none; cursor:pointer;
  transition:border-color 0.2s ease, opacity 0.2s ease;
  opacity:0.65;
}
.sabor__gallery-thumb:hover { opacity:1; }
.sabor__gallery-thumb.active {
  border-color:var(--principalcolor); opacity:1;
}
.sabor__gallery-thumb { position:relative; }
.sabor__gallery-thumb img,
.sabor__gallery-thumb video {
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none;
  background:#000;
}
/* Play-icon badge to mark thumbnails that contain a video */
.sabor__gallery-thumb-vbadge {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
  pointer-events:none;
  background:rgba(0,0,0,0.25);
  transition:background 0.2s ease;
}
.sabor__gallery-thumb:hover .sabor__gallery-thumb-vbadge,
.sabor__gallery-thumb.active .sabor__gallery-thumb-vbadge {
  background:rgba(0,0,0,0.1);
}

/* ============================================================
   VIEW: STATIC / CONTENT PAGES
   ============================================================ */
.view--page {
  background:var(--bgcolor);
  /* Same as .view--sabors: rely on the parent .main for the viewport-
     wide background, otherwise short pages (Qui Som, Contacte, legal
     pages) get a forced 100vh that scrolls into blank space. */
}
.page__back-header {
  display:flex; align-items:center; gap:0.5rem;
  padding:1.5rem 2.5rem 1rem;
}
.page__back {
  display:inline-flex; align-items:center; gap:0.3rem;
  font-size:0.8rem; font-weight:500; color:var(--principalcolor);
  transition:opacity 0.25s, transform 0.25s var(--ease);
}
.page__back:hover { opacity:0.7; transform:translateX(-3px); }
.page__back svg { color:var(--principalcolor); }
.page__back-subtitle {
  font-size:0.8rem; font-weight:300; opacity:0.5;
  margin-left:0.3rem;
}
.page__content {
  padding:1.5rem 2.5rem 3rem;
}
.page__title {
  font-size:clamp(1.5rem, 3vw, 2.2rem); font-weight:700; color:var(--textcolor);
  letter-spacing:-0.01em; margin-bottom:1.5rem;
}
.page__placeholder {
  font-size:0.9rem; font-weight:300; opacity:0.5; font-style:italic;
}

/* Legal content (Aviso legal, Política de privacidad, Cookies…) */
.legal-content {
  max-width:820px;
  font-size:0.95rem;
  line-height:1.65;
  color:var(--text, #222);
}
.legal-content h2 {
  font-size:1.2rem;
  font-weight:700;
  margin:2rem 0 0.7rem;
  color:var(--principalcolor, #1E5D2D);
  letter-spacing:-0.01em;
}
.legal-content h2:first-child { margin-top:0.5rem; }
.legal-content p { margin:0 0 0.9rem; }
.legal-content ul { margin:0 0 1rem 1.2rem; padding:0; }
.legal-content li { margin-bottom:0.4rem; }
.legal-content a {
  color:var(--principalcolor, #1E5D2D);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-content a:hover { opacity:0.8; }
.legal-content strong { font-weight:700; }
.legal-content em { font-style:italic; color:var(--text-mute, #666); }
.legal-content h3 {
  font-size:1.05rem;
  font-weight:600;
  margin:1.4rem 0 0.5rem;
  color:var(--textcolor);
  letter-spacing:-0.005em;
}
.legal-content .lead {
  font-size:1.1rem;
  line-height:1.55;
  font-weight:400;
  color:var(--textcolor);
  margin-bottom:1.6rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
  max-width:680px;
}

/* "Qui Som" page — extends legal-content with a slightly wider feel */
.qui-som-content {
  max-width:860px;
}

/* ============================================================
   VIEW: CONTACTE (On Som i Contactar)
   ============================================================ */
.contacte__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}
/* When the operator picks the "no form" version in the CMS, the info
   column takes the full width and the form column is hidden. */
.contacte__grid--no-form {
  grid-template-columns: minmax(0, 1fr);
}
.contacte__grid--no-form .contacte__col--form {
  display: none;
}
.contacte__col { min-width: 0; }

/* Map */
.contacte__map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
  background: #eee;
}
/* Placeholder when cookies were rejected — fills the map slot */
.contacte__map-blocked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  gap: 0.8rem;
  background: #f4f2ec;
  color: var(--text-mute, #555);
}
.contacte__map-blocked svg { color: var(--principalcolor, #1E5D2D); opacity: 0.55; }
.contacte__map-blocked p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 360px;
}
.contacte__map-blocked[hidden] { display: none; }
.contacte__map-blocked-btn {
  padding: 0.6rem 1.3rem;
  background: var(--principalcolor, #1E5D2D);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.contacte__map-blocked-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(30, 93, 45, 0.3);
}
.contacte__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Desaturate the Google Maps embed and tint it toward the site's
     corporate green (#1E5D2D) using CSS filters. This always stays
     in the muted palette — no color revert on hover. */
  filter:
    grayscale(1)
    sepia(0.55)
    hue-rotate(75deg)
    saturate(0.55)
    contrast(0.95)
    brightness(0.98);
}

/* Info card */
.contacte__card {
  margin-top: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}
.contacte__card h2 {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--principalcolor, #1E5D2D);
  letter-spacing: 0.01em;
}
.contacte__info-list { list-style: none; padding: 0; margin: 0; }
.contacte__info-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
  font-size: 0.95rem;
}
.contacte__info-list li:last-child { border-bottom: 0; }
.contacte__info-list svg { flex: 0 0 auto; color: var(--principalcolor, #1E5D2D); }
.contacte__info-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.contacte__info-list a:hover { border-color: currentColor; }

/* Form */
.contacte__col--form h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--principalcolor, #1E5D2D);
  letter-spacing: -0.01em;
}
.contacte__form-intro {
  margin: 0 0 1.3rem;
  color: var(--text-mute, #555);
  font-size: 0.92rem;
}
.contacte__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.contacte__form .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contacte__form .field label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute, #555);
}
.contacte__form input[type="text"],
.contacte__form input[type="email"],
.contacte__form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contacte__form input:focus,
.contacte__form textarea:focus {
  outline: none;
  border-color: var(--principalcolor, #1E5D2D);
  box-shadow: 0 0 0 3px rgba(30, 93, 45, 0.15);
}
.contacte__form textarea { resize: vertical; min-height: 120px; }

.contacte__form .field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0;
  font-size: 0.88rem;
  cursor: pointer;
}
.contacte__form .field-check input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.15rem;
  width: 18px;
  height: 18px;
  accent-color: var(--principalcolor, #1E5D2D);
  cursor: pointer;
}
.contacte__form .field-check__text { color: var(--text, #222); }
.contacte__form .field-check__text a { color: var(--principalcolor, #1E5D2D); }

.contacte__form-submit {
  margin-top: 0.4rem;
  align-self: flex-start;
  padding: 0.85rem 1.8rem;
  background: var(--principalcolor, #1E5D2D);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.contacte__form-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(30, 93, 45, 0.25);
}
.contacte__form-submit:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.contacte__form-status {
  margin-top: 0.5rem;
  padding: 0 0.2rem;
  font-size: 0.88rem;
  min-height: 1.4em;
}
.contacte__form-status--sending { color: var(--text-mute, #666); font-style: italic; }
.contacte__form-status--success { color: #1E5D2D; font-weight: 600; }
.contacte__form-status--error   { color: #b3261e; font-weight: 600; }

/* Honeypot — hide from humans but let bots see it */
.contacte__form-hp {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  background: #fff;
  color: var(--text, #222);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 1.3rem 1.5rem;
  max-width: 780px;
  margin: 0 auto;
  animation: cookieBannerIn 0.5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes cookieBannerIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.45rem;
  color: var(--principalcolor, #1E5D2D);
  letter-spacing: -0.005em;
}
.cookie-banner__text {
  margin: 0 0 1rem;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text, #333);
}
.cookie-banner__text a {
  color: var(--principalcolor, #1E5D2D);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__text strong,
.cookie-banner__text em {
  display: block;
  margin-top: 0.5rem;
  font-weight: 500;
  font-size: 0.82rem;
  color: #b3261e;   /* soft red to highlight the consequence warning */
  font-style: italic;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-banner__btn {
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
/* AEPD compliance: reject must have the same visual weight as accept.
   Both are solid buttons, same size. Reject is neutral gray, accept is
   brand green — same shape, padding, font-weight and border-radius. */
.cookie-banner__btn--reject {
  background: #3a3a3a;
  color: #fff;
  border-color: #3a3a3a;
}
.cookie-banner__btn--reject:hover {
  background: #555;
  border-color: #555;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.cookie-banner__btn--accept {
  background: var(--principalcolor, #1E5D2D);
  color: #fff;
  border-color: var(--principalcolor, #1E5D2D);
}
.cookie-banner__btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(30, 93, 45, 0.3);
}

/* Floating chip to re-open preferences after a choice was made */
.cookie-reopen {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 9998;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--principalcolor, #1E5D2D);
  color: #fff;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.55;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s, transform 0.2s;
}
.cookie-reopen:hover {
  opacity: 1;
  transform: scale(1.08);
}
.cookie-reopen[hidden] { display: none; }

/* Responsive */
@media (max-width: 640px) {
  .cookie-banner {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 1rem 1.1rem;
  }
  .cookie-banner__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .cookie-banner__btn { text-align: center; }
  .cookie-reopen { left: 0.7rem; bottom: 0.7rem; width: 38px; height: 38px; }
}

/* Responsive — stack columns */
@media (max-width: 900px) {
  .contacte__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .contacte__map { aspect-ratio: 16 / 10; }
}

/* ── Cookies policy: full-width content + per-table scroll ── */
/* On the cookies view, let the legal content span the entire width so
   the tables have enough room for the Value column. */
#view-cookies .legal-content {
  max-width: none;
}

/* Heading above each table (own / third-party) */
.legal-content .cookies-table__heading {
  font-size:1rem;
  font-weight:700;
  color:var(--principalcolor, #1E5D2D);
  margin:1.8rem 0 0.6rem;
  padding-bottom:0.3rem;
  border-bottom:2px solid var(--principalcolor, #1E5D2D);
  letter-spacing:-0.01em;
}
.legal-content .cookies-table__heading:first-child { margin-top:0.5rem; }

/* Scroll wrapper — each table has its own horizontal scroll on narrow
   viewports so one table doesn't push the whole page out. */
.legal-content .cookies-table__scroll {
  overflow-x:auto;
  margin-bottom:1.5rem;
  border-radius:6px;
  border:1px solid rgba(0, 0, 0, 0.08);
  -webkit-overflow-scrolling:touch;
}

/* Cookies table */
.legal-content .cookies-table {
  width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:0.82rem;
  min-width:800px;  /* force horizontal scroll on small screens */
}
.legal-content .cookies-table thead {
  background:var(--principalcolor, #1E5D2D);
  color:#fff;
}
.legal-content .cookies-table th,
.legal-content .cookies-table td {
  padding:0.55rem 0.7rem;
  text-align:left;
  border:1px solid var(--border, #ddd);
  vertical-align:top;
  line-height:1.45;
}
.legal-content .cookies-table th {
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:0.7rem;
  border-color:var(--principalcolor, #1E5D2D);
}
.legal-content .cookies-table tbody tr:nth-child(even) {
  background:rgba(30, 93, 45, 0.04);
}
.legal-content .cookies-table code {
  background:rgba(30, 93, 45, 0.08);
  padding:0.1rem 0.35rem;
  border-radius:3px;
  font-family:var(--mono, 'Courier New', Courier, monospace);
  font-size:0.78rem;
  color:var(--principalcolor, #1E5D2D);
  white-space:nowrap;
}
@media (max-width: 768px) {
  .legal-content .cookies-table { font-size:0.75rem; }
  .legal-content .cookies-table th,
  .legal-content .cookies-table td { padding:0.4rem 0.5rem; }
}
.legal-content .cookies-footnote {
  margin:0.4rem 0 1.5rem;
  color:var(--text-mute, #666);
  font-size:0.78rem;
}
/* Third-party rows: slightly tinted so they're visually distinct */
.legal-content .cookies-table__row--third {
  background:rgba(0, 0, 0, 0.015);
}
.legal-content .cookies-table__row--third td code {
  background:rgba(0, 0, 0, 0.08);
  color:#444;
}
/* Status pill */
.legal-content .cookies-table__status {
  display:inline-block;
  padding:0.15rem 0.55rem;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  white-space:nowrap;
}
.legal-content .cookies-table__status--active {
  background:rgba(30, 93, 45, 0.15);
  color:#1E5D2D;
  border:1px solid rgba(30, 93, 45, 0.3);
}
.legal-content .cookies-table__status--inactive {
  background:rgba(0, 0, 0, 0.05);
  color:#888;
  border:1px solid rgba(0, 0, 0, 0.1);
}
/* Value cell — monospace, wrapped, slightly muted for "empty" or "n/a" */
.legal-content .cookies-table__value {
  display:inline-block;
  max-width:100%;
  font-family:var(--mono, 'Courier New', Courier, monospace);
  font-size:0.72rem;
  word-break:break-all;
  overflow-wrap:anywhere;
  background:rgba(0, 0, 0, 0.04);
  padding:0.2rem 0.4rem;
  border-radius:3px;
  color:#333;
  cursor:help;
}
.legal-content .cookies-table__value--empty,
.legal-content .cookies-table__value--na {
  background:transparent;
  font-style:italic;
  color:#999;
  font-family:inherit;
  cursor:default;
}

/* ============================================================
   VIEW: BLOG GRID
   ============================================================ */
.blog__filter {
  display:flex; flex-wrap:wrap; gap:0.5rem;
  margin:0 0 1.25rem;
}
.blog-chip {
  background:transparent;
  border:1px solid var(--principalcolor, #1E5D2D);
  color:var(--principalcolor, #1E5D2D);
  padding:0.4rem 0.95rem;
  border-radius:999px;
  font:inherit;
  font-size:0.85rem;
  font-weight:500;
  cursor:pointer;
  transition:background 0.2s var(--ease), color 0.2s var(--ease);
  line-height:1;
}
.blog-chip:hover {
  background:rgba(30, 93, 45, 0.08);
}
.blog-chip.active {
  background:var(--principalcolor, #1E5D2D);
  color:#fff;
}
.blog__grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.2rem;
}
.blog-card {
  position:relative; border-radius:10px; overflow:hidden;
  aspect-ratio:16/9; cursor:pointer;
  transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.15); }
.blog-card__img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 0.6s var(--ease);
}
.blog-card:hover .blog-card__img { transform:scale(1.06); }
.blog-card__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 60%);
}
.blog-card__title {
  position:absolute; bottom:0.8rem; left:0.8rem; right:0.8rem;
  font-size:0.9rem; font-weight:600; color:var(--white);
  text-shadow:0 1px 4px rgba(0,0,0,0.4);
}

/* Blog detail — sources */
.blog__sources { margin-top:1.5rem; }
.blog__sources-list {
  display:flex; flex-direction:column; gap:0.4rem;
  font-size:0.82rem; font-weight:300;
}
.blog__sources-list li { padding-left:0.8rem; position:relative; }
.blog__sources-list li::before {
  content:''; position:absolute; left:0; top:0.55em;
  width:5px; height:5px; border-radius:50%; background:var(--principalcolor);
}
.blog__sources-list a {
  color:var(--principalcolor); text-decoration:underline; text-underline-offset:0.15em;
  transition:opacity 0.2s;
}
.blog__sources-list a:hover { opacity:0.7; }

/* Blog detail — wider left column for description */
.sabor__col-left--blog { min-height:auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width:1024px) {
  :root { --sidebar-w:280px; }
  .sabors__grid.cols-4 { grid-template-columns:repeat(3, 1fr); }
  .sabor__columns { gap:2rem; }
}

/* ── Mobile trigger (outside sidebar) ── */
.mobile-trigger {
  display:none; /* hidden on desktop */
  position:fixed; top:1.2rem; left:1.2rem;
  z-index:150;
  align-items:center; gap:0.5rem;
  padding:0.5rem 0.8rem; border-radius:8px;
  background:rgba(30,93,45,0.85); color:var(--text-light);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-trigger svg { width:28px; height:32px; color:var(--text-light); }
.mobile-trigger span { font-size:0.7rem; font-weight:300; font-style:italic; opacity:0.85; }
body.menu-open .mobile-trigger { opacity:0; pointer-events:none; transform:translateX(-20px); }

/* Mobile */
@media (max-width:768px) {
  :root { --sidebar-w:0px; }

  .mobile-trigger { display:flex; }

  .sidebar {
    width:80vw; max-width:340px;
    background:var(--principalcolor) !important;
    transform:translateX(-100%);
    transition:transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    z-index:200;
  }
  body.menu-open .sidebar { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.25); }

  /* hide original trigger inside sidebar on mobile */
  .sidebar__trigger { display:none !important; }

  /* nav always visible inside sidebar on mobile when open */
  .sidebar__nav, .sidebar__social, .sidebar__lang {
    opacity:1; transform:none; pointer-events:auto;
  }
  body:not(.menu-open) .sidebar .sidebar__nav,
  body:not(.menu-open) .sidebar .sidebar__social,
  body:not(.menu-open) .sidebar .sidebar__lang { opacity:0; pointer-events:none; }

  .main { margin-left:0 !important; }

  /* mobile overlay */
  body.menu-open::after {
    content:''; position:fixed; inset:0;
    background:rgba(0,0,0,0.4); z-index:150;
    animation:fadeIn 0.3s var(--ease);
  }

  /* Slider fullscreen */
  .hero-slider__dots { right:1.5rem; bottom:1.5rem; }
  .hero-slider__caption {
    padding-left:1.5rem; padding-bottom:4rem;
    padding-right:1.5rem;
    width:100%;
  }
  .hero-slider__caption h1 { font-size:clamp(1.4rem, 7vw, 2.2rem); }
  .hero-slider__caption h2 { font-size:clamp(1.2rem, 5vw, 1.6rem); }
  .hero-slider__caption p  { font-size:0.85rem; }

  /* Grid always 1 col */
  .sabors__grid,
  .sabors__grid.cols-2,
  .sabors__grid.cols-3,
  .sabors__grid.cols-4 { grid-template-columns:1fr; }
  .sabors__controls { display:none; }

  .view--sabors { padding:4.5rem 1rem 2rem; }

  /* Detail single column */
  .sabor__columns { grid-template-columns:1fr; gap:2rem; }
  .sabor__content { padding:1.5rem 1.2rem 2rem; }
  .sabor__back-header { padding:1rem 1.2rem 0.5rem; padding-left:1.2rem; padding-top:4.5rem; }
  /* Below variant on mobile: it's under the slider so no top clearance needed */
  .sabor__back-header--below { padding:0.75rem 1.2rem; }

  /* Static pages mobile */
  .page__back-header { padding:1rem 1.2rem 0.5rem; padding-top:4.5rem; }
  .page__content { padding:1rem 1.2rem 2rem; }
  .blog__grid { grid-template-columns:1fr; }
}

/* Small mobile */
@media (max-width:480px) {
 /* .sabor-card { aspect-ratio:1/1; }*/
  .sabor__slider { height:clamp(220px, 50vh, 380px); }
}

/* Large desktop */
@media (min-width:1440px) {
  .sabors__grid.cols-4 { gap:1.2rem; }
  .view--sabors { padding:2.5rem 3.5rem 4rem; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Grid card entrance */
.sabor-card {
  opacity:0; transform:translateY(16px);
  animation:cardIn 0.5s var(--ease-out) forwards;
}
.sabor-card:nth-child(1)  { animation-delay:0.04s; }
.sabor-card:nth-child(2)  { animation-delay:0.08s; }
.sabor-card:nth-child(3)  { animation-delay:0.12s; }
.sabor-card:nth-child(4)  { animation-delay:0.16s; }
.sabor-card:nth-child(5)  { animation-delay:0.20s; }
.sabor-card:nth-child(6)  { animation-delay:0.24s; }
.sabor-card:nth-child(7)  { animation-delay:0.28s; }
.sabor-card:nth-child(8)  { animation-delay:0.32s; }
.sabor-card:nth-child(9)  { animation-delay:0.36s; }
.sabor-card:nth-child(10) { animation-delay:0.40s; }
.sabor-card:nth-child(11) { animation-delay:0.44s; }
.sabor-card:nth-child(12) { animation-delay:0.48s; }
@keyframes cardIn { to { opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════════════════════════════════
   SEARCH — sidebar nav item + full-screen overlay
   ══════════════════════════════════════════════════════════════════ */
/* Lupa entry inside the sidebar nav. Inherits the regular nav-list
   styles, only adjusts vertical alignment of the icon + label. */
.sidebar__nav-search a {
  display:inline-flex;
  align-items:center;
}

.search-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:5vh 1rem 1rem;
}
.search-overlay[hidden] { display:none; }
.search-overlay__backdrop {
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.55);
  backdrop-filter:blur(4px);
  animation:searchFadeIn 0.18s ease;
}
.search-overlay__panel {
  position:relative;
  width:100%;
  max-width:640px;
  max-height:85vh;
  background:var(--bgcolor, #fff);
  color:var(--textcolor, #1A1A1A);
  border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:searchSlideIn 0.22s cubic-bezier(.22,.61,.36,1);
}
@keyframes searchFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes searchSlideIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
.search-overlay__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.2rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.search-overlay__header h2 {
  margin:0;
  font-size:1rem;
  font-weight:600;
  letter-spacing:0.02em;
}
.search-overlay__close {
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--textcolor);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.search-overlay__close:hover { background:rgba(0,0,0,0.06); }
.search-overlay__input-row {
  position:relative;
  padding:0.8rem 1.2rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.search-overlay__icon {
  position:absolute;
  left:1.5rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--principalcolor, #1E5D2D);
  pointer-events:none;
}
.search-overlay__input {
  width:100%;
  padding:0.7rem 2.5rem 0.7rem 2.5rem;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:8px;
  font-size:1rem;
  font-family:inherit;
  background:var(--bgcolor);
  color:var(--textcolor);
}
.search-overlay__input:focus {
  outline:none;
  border-color:var(--principalcolor, #1E5D2D);
  box-shadow:0 0 0 3px rgba(30, 93, 45, 0.15);
}
.search-overlay__clear {
  position:absolute;
  right:1.7rem;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.06);
  color:var(--textcolor);
  cursor:pointer;
  font-size:0.8rem;
  line-height:1;
}
.search-overlay__clear:hover { background:rgba(0,0,0,0.12); }
.search-overlay__results {
  flex:1;
  overflow-y:auto;
  padding:0.5rem 0;
}
.search-overlay__hint,
.search-overlay__empty {
  padding:1.5rem 1.2rem;
  color:rgba(0,0,0,0.55);
  font-size:0.9rem;
  text-align:center;
  font-style:italic;
}
.search-result-group__title {
  margin:0;
  padding:0.6rem 1.2rem 0.3rem;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(0,0,0,0.55);
}
.search-result-item {
  display:flex;
  align-items:center;
  gap:0.8rem;
  width:100%;
  padding:0.65rem 1.2rem;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  border-left:3px solid transparent;
}
.search-result-item:hover,
.search-result-item.is-active {
  background:rgba(30, 93, 45, 0.07);
  border-left-color:var(--principalcolor, #1E5D2D);
}
.search-result-item__swatch {
  width:30px;
  height:30px;
  border-radius:6px;
  flex-shrink:0;
  background:#ccc;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.95rem;
  color:#fff;
}
.search-result-item__body {
  flex:1;
  min-width:0;
}
.search-result-item__name {
  font-size:0.95rem;
  font-weight:500;
  margin:0 0 0.15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search-result-item__name mark {
  background:rgba(255, 235, 80, 0.55);
  color:inherit;
  padding:0 1px;
  border-radius:2px;
}
.search-result-item__meta {
  font-size:0.78rem;
  color:rgba(0,0,0,0.55);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search-overlay__footer {
  padding:0.6rem 1.2rem;
  border-top:1px solid rgba(0,0,0,0.08);
  font-size:0.75rem;
  color:rgba(0,0,0,0.55);
}
.search-overlay__footer kbd {
  display:inline-block;
  padding:0.05rem 0.35rem;
  font-size:0.7rem;
  background:rgba(0,0,0,0.08);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:3px;
  margin:0 0.1rem;
  font-family:ui-monospace, Menlo, Consolas, monospace;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* Stock disclaimer — info chip shown only on ice cream product pages
   (the shop's selection rotates by demand). Brand-green tint, more
   visible than the image disclaimer because it directly affects a
   visitor's decision to come to the shop. */
.sabor__desc-stock {
  margin-top: 1.1rem;
  padding: 0.7rem 0.9rem;
  background: rgba(30, 93, 45, 0.06);
  border: 1px solid rgba(30, 93, 45, 0.18);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.sabor__desc-stock-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* Image disclaimer appended to every product description. Discreet
   so it doesn't distract from the real description but still readable. */
.sabor__desc-disclaimer {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.45;
  opacity: 0.65;
}

/* ============================================================
   LIGHTBOX — fullscreen viewer for the product gallery main image
   ============================================================ */
/* Hint that the gallery main image is clickable (zoom-in cursor on hover). */
.sabor__gallery-main img { cursor: zoom-in; }
/* Lock background scroll while the lightbox is open. */
body.lightbox-open { overflow: hidden; }

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  cursor: zoom-out;
  /* Avoid the image being draggable into a new tab */
  user-select: none;
  -webkit-user-select: none;
}
.lightbox-overlay.open { opacity: 1; }

.lightbox-img {
  max-width: min(100%, 1600px);
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
  /* Keep the close button on top of the image visually. */
  pointer-events: none;
}

.lightbox-close {
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem; font-weight: 300; line-height: 1;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
.lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}