/* ==========================================================================
   Pura Vida Distribution LLC — style.css
   Design tokens, layout, components, responsive.
   ========================================================================== */

:root {
  /* Brand palette — Costa Rica tropical premium */
  --green-950: #082921;
  --green-900: #0e3e2e;
  --green-700: #1f6f54;
  --green-500: #2e9e74;
  --gold-500: #e8a33d;
  --gold-300: #f3c977;
  --chili-500: #e4572e;
  --cream-50: #faf6ef;
  --cream-100: #f3ecdf;
  --ink-900: #1b2521;
  --ink-600: #4b5a53;
  --white: #ffffff;
  --whatsapp: #25d366;
  --whatsapp-dark: #1eae54;

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 8px rgba(8, 41, 33, 0.08);
  --shadow-md: 0 8px 30px rgba(8, 41, 33, 0.12);
  --shadow-lg: 0 20px 60px rgba(8, 41, 33, 0.22);
  --header-h: 72px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

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

img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 1000;
  background: var(--green-900);
  color: var(--cream-50);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green-900);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }

p { margin: 0 0 1em; }
a { color: var(--green-700); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

.section { padding: 88px 0; }
.section-alt { background: var(--cream-100); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--chili-500);
  margin-bottom: 0.6em;
}

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-sub { color: var(--ink-600); font-size: 1.05rem; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--gold-500); color: var(--green-950); }
.btn-primary:hover { background: var(--gold-300); }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.section .btn-ghost, .empty-state .btn-ghost, .coupon-form .btn-ghost { color: var(--green-900); border-color: var(--green-700); }

.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-dark); }

.btn-lg { padding: 16px 36px; font-size: 1.05rem; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(250, 246, 239, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(14, 62, 46, 0.08);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { font-size: 1.6rem; } /* still used as-is by admin.html's dashboard topbar (🌴 emoji) */
img.brand-mark { height: 40px; width: auto; display: block; } /* the real logo mark, header nav */
.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--green-900);
}
.brand-text em { font-style: normal; color: var(--chili-500); }

/* Footer brand: logo mark + wordmark side by side, above the tagline */
.footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.footer-brand-row .footer-brand { margin-bottom: 0; }
.footer-brand-mark { height: 32px; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-900);
  transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: rgba(31, 111, 84, 0.1); }
.nav-link.is-active { color: var(--green-700); font-weight: 700; }
.nav-cta { background: var(--green-900); color: var(--cream-50); }
.nav-cta:hover { background: var(--green-700); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px; height: 2.5px;
  background: var(--green-900);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ===== Hero carousel ===== */
.hero { position: relative; }

.carousel { position: relative; overflow: hidden; }
.carousel-track { position: relative; min-height: min(78vh, 640px); }

.carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 1.8s ease, transform 1.8s ease, visibility 1.8s;
}
.carousel-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); z-index: 1; }

.slide-a, .slide-b, .slide-c, .slide-d {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide-a { background-image: linear-gradient(180deg, rgba(10, 30, 22, 0.55) 0%, rgba(8, 22, 16, 0.78) 100%), url('../img/hero/Hero_with_Tico_flag_2K_202607221704.jpeg'); }
.slide-b { background-image: linear-gradient(180deg, rgba(40, 16, 8, 0.5) 0%, rgba(20, 8, 4, 0.78) 100%), url('../img/hero/a_more_dramatic_jungle_2K_202607221712.jpeg'); }
.slide-c { background-image: linear-gradient(180deg, rgba(40, 26, 4, 0.5) 0%, rgba(20, 12, 2, 0.78) 100%), url('../img/hero/a_more_dramatic_jungle_2K_202607221715.jpeg'); }
.slide-d { background-image: linear-gradient(180deg, rgba(8, 26, 20, 0.5) 0%, rgba(6, 18, 14, 0.78) 100%), url('../img/hero/Animals_in_Costa_Rican_ecosystem_202607221700.jpeg'); }

/* Decorative leaf pattern */
.carousel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
}

.slide-content { position: relative; z-index: 2; max-width: var(--container); width: 100%; padding: 90px 24px; }
.slide-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-300);
  margin-bottom: 14px;
}
.slide-title { color: #fff; max-width: 640px; font-size: clamp(2.3rem, 5.5vw, 4rem); }
.slide-title .accent { color: var(--gold-500); font-style: italic; }
.slide-sub { color: rgba(255, 255, 255, 0.85); max-width: 540px; font-size: 1.1rem; margin-bottom: 30px; }
.slide-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--transition);
}
.carousel-arrow:hover { background: rgba(255, 255, 255, 0.3); }
.carousel-arrow.prev { left: 18px; }
.carousel-arrow.next { right: 18px; }

.carousel-dots {
  position: absolute;
  bottom: 22px; left: 0; right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.carousel-dots button {
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: width var(--transition), background var(--transition);
}
.carousel-dots button.is-active { width: 30px; background: var(--gold-500); }

/* ===== Language toggle bar ===== */
.lang-bar {
  position: relative;
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
  border-bottom: 1px solid rgba(27, 37, 33, 0.08);
  overflow: hidden;
}
.lang-bar::before {
  content: "";
  position: absolute;
  top: -60px; left: 50%;
  width: 320px; height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232, 163, 61, 0.16), transparent);
  pointer-events: none;
}
.lang-bar-inner { position: relative; display: flex; justify-content: center; padding: 14px 24px; }

.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(27, 37, 33, 0.12);
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink-600);
  box-shadow: 0 1px 2px rgba(27, 37, 33, 0.06);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.lang-toggle:hover {
  border-color: var(--green-700);
  box-shadow: 0 6px 18px rgba(14, 62, 46, 0.14);
  transform: translateY(-1px);
}
.lang-toggle:active { transform: translateY(0) scale(0.97); }
.lang-toggle:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

.lang-toggle .lang-globe {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  transform: rotate(0deg);
  transition: transform 0.5s ease, opacity var(--transition);
}
.lang-toggle:hover .lang-globe { opacity: 0.95; transform: rotate(-14deg); }

.lang-track {
  position: relative;
  display: inline-flex;
  background: var(--cream-100);
  border-radius: 999px;
  padding: 3px;
}
.lang-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  box-shadow: 0 2px 6px rgba(14, 62, 46, 0.35);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.lang-toggle.is-es .lang-thumb { transform: translateX(100%); }

.lang-toggle .lang-opt {
  position: relative;
  z-index: 1;
  min-width: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-600);
  transition: color var(--transition);
}
.lang-toggle .lang-opt-en { color: var(--cream-50); }
.lang-toggle.is-es .lang-opt-en { color: var(--ink-600); }
.lang-toggle.is-es .lang-opt-es { color: var(--cream-50); }

/* ===== Value strip ===== */
.value-strip { background: var(--green-950); padding: 34px 0; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.value-item { display: flex; gap: 14px; align-items: flex-start; }
.value-ico { font-size: 1.7rem; line-height: 1.2; }
.value-item h3 { color: var(--gold-300); font-size: 1.02rem; margin-bottom: 2px; font-family: var(--font-body); font-weight: 700; }
.value-item p { color: rgba(255, 255, 255, 0.7); font-size: 0.88rem; margin: 0; }

/* ===== Product cards ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 44px;
}
/* Same reasoning as .btn-spinner[hidden] further down: an author rule
   that sets `display` unconditionally beats the browser's own
   `[hidden] { display: none }` at equal specificity — #catalogGrid in
   shop.html gets toggled via `.hidden = true/false` in js/script.js, so
   without this override the hidden attribute would be silently ignored. */
.product-grid[hidden] { display: none; }
.catalog-grid { grid-template-columns: repeat(3, 1fr); }

/* ===== Product ring carousel (home) =====
   A horizontal loop of product cards — same size/markup classes as the
   shop.html grid cards (.product-card, .product-media, .product-info…)
   — scrolling sideways forever. JS (renderRingCarousel in js/script.js)
   renders the product list twice back to back; animating the track
   exactly -50% of its own width loops it seamlessly since the second
   half is an identical copy of the first. */
.ring-carousel {
  overflow: hidden;
  width: 100%;
  margin: 12px 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ring-track {
  display: flex;
  align-items: stretch;
  gap: 28px;
  width: max-content;
  animation: pv-ring-scroll 42s linear infinite;
}
.ring-carousel:hover .ring-track,
.ring-carousel:focus-within .ring-track {
  animation-play-state: paused;
}
.ring-card {
  /* Matches the width a card renders at inside shop.html's 3-column,
     1180px-max, 28px-gap grid ( (1180 - 56) / 3 ≈ 375px ), scaling down
     gracefully on narrower screens instead of staying fixed. */
  flex: 0 0 auto;
  width: clamp(260px, 30vw, 375px);
  text-decoration: none;
  color: inherit;
}
@keyframes pv-ring-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ring-track { animation: none; }
}

.product-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* Shown on shop.html while Square's catalog fetch is still in flight —
   see catalogReady / #catalogLoading in js/script.js. Same card shape as
   .product-card so nothing jumps around once the real grid replaces it. */
.product-card-skeleton {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3.4;
  background-image: linear-gradient(100deg, var(--cream-100) 30%, var(--white) 50%, var(--cream-100) 70%);
  background-size: 250% 100%;
  animation: pv-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes pv-skeleton-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card-skeleton { animation: none; }
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-media svg { width: 100%; height: 100%; }

.product-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge-stock { background: #d8f3e3; color: #15734a; }
.badge-low { background: #fdeccc; color: #92600a; }
.badge-out { background: #fbdcd2; color: #a33418; }
.badge-heat { background: rgba(0, 0, 0, 0.55); color: #ffd9a8; }

.product-info { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--chili-500); font-weight: 700; margin-bottom: 4px; }
.product-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; color: var(--green-900); margin: 0 0 6px; }
.product-desc { font-size: 0.9rem; color: var(--ink-600); margin-bottom: 14px; flex: 1; }
.product-stock { font-size: 0.78rem; color: #92600a; font-weight: 600; margin: -8px 0 12px; }

.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-price { font-weight: 700; font-size: 1.25rem; color: var(--green-900); }
.product-price .unit { display: block; font-weight: 400; font-size: 0.75rem; color: var(--ink-600); }
.product-note { font-size: 0.78rem; color: var(--green-700); font-weight: 600; margin: 8px 0 0; }

.btn-view {
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--green-900);
  background: transparent;
  color: var(--green-900);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-view:hover { background: var(--green-900); color: var(--cream-50); }

.product-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-add {
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--green-900);
  background: var(--green-900);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.btn-add:hover { background: var(--green-700); border-color: var(--green-700); }
.btn-add:active { transform: scale(0.96); }
.btn-add.is-added { background: var(--whatsapp); border-color: var(--whatsapp); }
.btn-add[disabled] { background: #ccc; border-color: #ccc; color: #777; cursor: not-allowed; }

.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.modal-actions .btn { flex: 1; justify-content: center; white-space: nowrap; }

/* ===== Shopping cart ===== */
.header-actions { display: flex; align-items: center; gap: 2px; }

.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--green-900);
  cursor: pointer;
  transition: background var(--transition);
}
.cart-toggle:hover { background: rgba(14, 62, 46, 0.08); }
.cart-toggle svg { width: 22px; height: 22px; }

.cart-badge {
  position: absolute;
  top: 0; right: 0;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--chili-500);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--cream-50);
}
.cart-badge[hidden] { display: none; }

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 16, 0.55);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--transition);
}
.cart-overlay.is-visible { opacity: 1; }
.cart-overlay[hidden] { display: none; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(430px, 100vw);
  background: var(--white);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer[hidden] { display: none; }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(14, 62, 46, 0.1);
}
.cart-drawer-head h2 { margin: 0; font-size: 1.3rem; }
.cart-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--cream-100);
  color: var(--green-900);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition);
}
.cart-close:hover { background: var(--gold-300); }

.cart-body { flex: 1; overflow-y: auto; padding: 6px 24px; }

.cart-empty {
  text-align: center;
  padding: 70px 12px;
  color: var(--ink-600);
}
.cart-empty svg { opacity: 0.35; margin-bottom: 16px; }
.cart-empty .btn { margin-top: 20px; }

.cart-item {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(14, 62, 46, 0.08);
}
.cart-item-media {
  width: 68px; height: 68px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--green-950);
}
.cart-item-media img, .cart-item-media svg { width: 100%; height: 100%; object-fit: cover; }

.cart-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: 0.92rem; line-height: 1.3; margin: 0; }
.cart-item-unit { font-size: 0.78rem; color: var(--ink-600); margin: 0; }
.cart-item-price { font-weight: 700; color: var(--green-900); font-size: 0.88rem; margin: 2px 0 0; }
.cart-item-price .unit { font-weight: 400; color: var(--ink-600); font-size: 0.76rem; }

.cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.cart-item-remove {
  border: 0;
  background: none;
  color: var(--ink-600);
  cursor: pointer;
  font-size: 0.75rem;
  text-decoration: underline;
  padding: 0;
}
.cart-item-remove:hover { color: var(--chili-500); }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(14, 62, 46, 0.18);
  border-radius: 999px;
  overflow: hidden;
}
.qty-stepper button {
  width: 26px; height: 26px;
  border: 0;
  background: var(--white);
  color: var(--green-900);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.qty-stepper button:hover { background: var(--cream-100); }
.qty-stepper span { min-width: 24px; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--green-900); }

.cart-drawer-foot {
  border-top: 1px solid rgba(14, 62, 46, 0.1);
  padding: 18px 24px 24px;
  background: var(--cream-50);
}
.cart-discount-note {
  font-size: 0.82rem;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(232, 163, 61, 0.18);
  color: #7a5a1e;
}
.cart-discount-note.is-unlocked { background: rgba(31, 111, 84, 0.15); color: var(--green-700); font-weight: 600; }

.coupon-form { display: flex; gap: 8px; margin: 0 0 14px; }
.coupon-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(14, 62, 46, 0.2);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-900);
  background: #fff;
  text-transform: uppercase;
}
.coupon-input:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.15); }
.cart-drawer-foot .coupon-form .btn { flex: 0 0 auto; width: auto; padding: 10px 18px; font-size: 0.85rem; }
.coupon-error { color: #b3261e; font-size: 0.8rem; margin: -8px 0 14px; }

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.cart-subtotal-row span { color: var(--ink-600); font-size: 0.92rem; }
.cart-subtotal-row strong { font-size: 1.4rem; color: var(--green-900); }
.cart-subtotal-row.is-muted { margin-bottom: 6px; }
.cart-subtotal-row.is-muted strong { font-size: 0.95rem; color: var(--ink-600); font-weight: 600; }
.cart-discount-row { margin-bottom: 6px; }
.cart-discount-row span { display: inline-flex; align-items: center; gap: 8px; }
.cart-discount-row strong { font-size: 0.95rem; color: var(--green-700); }
.coupon-remove {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-600);
  text-decoration: underline;
  font-size: 0.78rem;
  cursor: pointer;
}
.coupon-remove:hover { color: var(--green-700); }
.cart-total-row { padding-top: 10px; border-top: 1px dashed rgba(14, 62, 46, 0.15); }

.cart-drawer-foot .btn { width: 100%; justify-content: center; }
.cart-continue {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--green-700);
  font-weight: 600;
}

.cart-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--green-950);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 250;
}
.cart-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
}

/* ===== Shop page ===== */
.shop-hero {
  position: relative;
  overflow: hidden;
  background: var(--green-950);
  padding: 84px 0 56px;
}
.shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 22, 16, 0.72) 0%, rgba(8, 22, 16, 0.86) 100%);
}
.shop-hero .container { position: relative; z-index: 2; }
.shop-hero h1 { color: #fff; }
.shop-hero .section-sub { color: rgba(255, 255, 255, 0.8); }
.shop-hero .eyebrow { color: var(--gold-300); }

.shop-hero-bg { position: absolute; inset: 0; z-index: 0; }
.shop-hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: shopHeroFade 20s infinite;
}
.shop-hero-bg-slide.slide-a { background-image: url('../img/hero/Hero_with_Tico_flag_2K_202607221704.jpeg'); animation-delay: 0s; }
.shop-hero-bg-slide.slide-b { background-image: url('../img/hero/a_more_dramatic_jungle_2K_202607221712.jpeg'); animation-delay: -5s; }
.shop-hero-bg-slide.slide-c { background-image: url('../img/hero/a_more_dramatic_jungle_2K_202607221715.jpeg'); animation-delay: -10s; }
.shop-hero-bg-slide.slide-d { background-image: url('../img/hero/Animals_in_Costa_Rican_ecosystem_202607221700.jpeg'); animation-delay: -15s; }

@keyframes shopHeroFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

.promo-banner {
  background: var(--gold-500);
  color: var(--green-950);
  padding: 12px 0;
  font-size: 0.95rem;
  text-align: center;
}
.promo-banner a { color: var(--green-950); font-weight: 700; }

.catalog-section { padding-top: 48px; }

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  background: var(--white);
  padding: 18px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-50);
  border: 1.5px solid rgba(14, 62, 46, 0.15);
  border-radius: 999px;
  padding: 8px 16px;
  flex: 1 1 220px;
  color: var(--ink-600);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-box:focus-within { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.15); }
.search-box input {
  border: 0; background: none; outline: none;
  font-family: var(--font-body); font-size: 0.95rem;
  width: 100%; color: var(--ink-900);
}

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(14, 62, 46, 0.2);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover { border-color: var(--green-700); }
.chip.is-active { background: var(--green-900); border-color: var(--green-900); color: var(--cream-50); }

.sort-box { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.9rem; color: var(--ink-600); }
.sort-box select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(14, 62, 46, 0.2);
  background: var(--white);
  color: var(--ink-900);
  cursor: pointer;
}

.product-count { font-size: 0.9rem; color: var(--ink-600); margin: 0 0 22px 4px; }

.empty-state { text-align: center; padding: 60px 0; }
.empty-state p { font-size: 1.15rem; color: var(--ink-600); }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 41, 33, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-overlay.is-visible { opacity: 1; }
.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px);
  transition: transform 0.25s ease;
}
.modal-overlay.is-visible .modal { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--cream-100);
  color: var(--ink-900);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition);
}
.modal-close:hover { background: var(--gold-300); }

.modal-body { display: grid; grid-template-columns: 1fr 1fr; }
.modal-media { min-height: 320px; display: flex; align-items: center; justify-content: center; }
.modal-media svg { width: 100%; height: 100%; }
.modal-detail { padding: 36px 32px; }
.modal-detail .product-cat { margin-bottom: 6px; }
.modal-detail h3 { font-size: 1.6rem; }
.modal-detail .modal-price { font-size: 1.7rem; font-weight: 700; color: var(--green-900); margin: 10px 0 2px; }
.modal-detail .unit { font-size: 0.85rem; color: var(--ink-600); }
.modal-detail .modal-desc { color: var(--ink-600); margin: 14px 0 18px; }
.modal-meta { list-style: none; margin: 0 0 22px; padding: 0; font-size: 0.9rem; }
.modal-meta li { padding: 7px 0; border-bottom: 1px dashed rgba(14, 62, 46, 0.15); display: flex; justify-content: space-between; gap: 14px; }
.modal-meta li span:first-child { color: var(--ink-600); }
.modal-meta li span:last-child { font-weight: 600; }

/* ===== Combo builder (3 Pack Combo quick view) ===== */
.combo-detail .modal-price { margin-bottom: 22px; }
.combo-group { margin-bottom: 22px; }
.combo-group label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-900); margin-bottom: 10px; }
.combo-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.combo-chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(14, 62, 46, 0.2);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.combo-chip:hover { border-color: var(--green-700); }
.combo-chip.is-selected { background: var(--green-900); border-color: var(--green-900); color: var(--cream-50); }
.combo-chip[disabled] { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }
.combo-chip[disabled]:hover { border-color: rgba(14, 62, 46, 0.2); }

.combo-qty-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.combo-qty-row label { font-size: 0.85rem; font-weight: 700; color: var(--ink-900); }

.combo-actions { flex-direction: column; }
.combo-actions .btn { width: 100%; }
.btn-dark { background: #111; color: #fff; }
.btn-dark:hover { background: #000; }

.combo-note { font-size: 0.82rem; color: var(--ink-600); margin: 0; }

.cart-item-flavors { font-size: 0.78rem; color: var(--green-700); font-weight: 600; margin: 0 0 2px; }

/* ===== Checkout page ===== */
.checkout-section { padding: 56px 0 96px; }
.checkout-section .section-head { margin-bottom: 36px; }

.checkout-empty { text-align: center; padding: 60px 0; }
.checkout-empty p { color: var(--ink-600); margin-bottom: 20px; font-size: 1.05rem; }

/* Shown while the cart's real contents are still resolving against the
   live Square catalog (catalogReady in js/script.js) — without this,
   checkout.html briefly renders "Your cart is empty" on every load, even
   with items in the cart, until that fetch settles a couple seconds in. */
.checkout-loading { text-align: center; padding: 80px 0; color: var(--ink-600); }
.checkout-loading p { margin-top: 16px; font-size: 1rem; }
.spinner {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 3px solid var(--cream-100);
  border-top-color: var(--chili-500);
  border-radius: 50%;
  animation: pv-spin 0.8s linear infinite;
}
@keyframes pv-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* Small inline version, shown inside #checkoutSubmit while a payment is
   processing (between clicking "Place Order" and the confirmation
   screen) — same idea as .spinner above, sized for a button and colored
   for .btn-primary's gold background instead of the page background. */
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid rgba(8, 41, 33, 0.25);
  border-top-color: var(--green-950);
  border-radius: 50%;
  animation: pv-spin 0.8s linear infinite;
}
/* An author-stylesheet rule like the one above beats the browser's own
   default `[hidden] { display: none }` even at equal specificity — so
   without this, the spinner ignored its `hidden` attribute entirely and
   showed on every page load, not just while a payment is processing. */
.btn-spinner[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2s; }
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.checkout-grid[hidden] { display: none; }
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

.checkout-summary {
  background: var(--cream-100);
  border-radius: 18px;
  padding: 28px;
  position: sticky;
  top: 24px;
}
.checkout-summary h2 { font-size: 1.3rem; margin-bottom: 20px; }

/* Below 860px the grid above collapses to one column, so the summary
   card is no longer a side-by-side panel — it's stacked right above the
   shipping/payment form. Sticky positioning only makes sense in the
   two-column layout; left on here, the pinned summary would float in
   place while the (taller) form scrolls up underneath and paints over
   it, since it comes later in the DOM. This has to come AFTER the base
   .checkout-summary rule above — same specificity, so source order
   decides, and a rule inside @media doesn't automatically win. */
@media (max-width: 860px) {
  .checkout-summary { position: static; }
}

.checkout-items { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.checkout-item { display: flex; align-items: center; gap: 14px; }
.checkout-item-media { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--green-950); }
.checkout-item-media img, .checkout-item-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkout-item-info { flex: 1; min-width: 0; }
.checkout-item-name { font-size: 0.92rem; font-weight: 600; color: var(--green-900); margin: 0; }
.checkout-item-flavors { font-size: 0.78rem; color: var(--green-700); font-weight: 600; margin: 2px 0 0; }
.checkout-item-qty { font-size: 0.8rem; color: var(--ink-600); margin: 2px 0 0; }
.checkout-item-price { font-weight: 700; color: var(--green-900); white-space: nowrap; }

.checkout-totals { border-top: 1px solid rgba(14, 62, 46, 0.15); padding-top: 16px; }
.checkout-totals-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.95rem; color: var(--ink-600); }
.checkout-totals-row.is-discount { color: var(--green-700); font-weight: 600; }
.checkout-totals-row.is-total { border-top: 1px dashed rgba(14, 62, 46, 0.2); margin-top: 8px; padding-top: 12px; font-size: 1.2rem; font-weight: 700; color: var(--green-900); }

.checkout-form-panel h2 { font-size: 1.3rem; margin: 0 0 20px; }
.checkout-form-panel form > h2:not(:first-child) { margin-top: 32px; }

.card-container {
  background: var(--cream-100);
  border: 1px solid rgba(14, 62, 46, 0.15);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 20px;
  min-height: 90px;
}
.payment-status {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}
.payment-status.is-error { background: rgba(228, 87, 46, 0.08); color: var(--chili-500); border: 1px solid rgba(228, 87, 46, 0.25); }
.payment-status.is-info { background: var(--cream-100); color: var(--ink-600); border: 1px dashed rgba(14, 62, 46, 0.25); }
#checkoutSubmit[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.checkout-confirmation { text-align: center; padding: 40px 20px; }
.checkout-confirm-icon { font-size: 2.8rem; display: block; margin-bottom: 14px; }
.checkout-confirmation h2 { margin-bottom: 10px; }
.checkout-confirmation p { color: var(--ink-600); margin-bottom: 26px; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ===== Product spotlights ===== */
.spotlight { padding: 88px 0; overflow: hidden; }
.spotlight-dark { background: radial-gradient(1200px 500px at 50% 0%, #123c2c 0%, var(--green-950) 55%, #061a14 100%); }
.spotlight-dark .eyebrow { color: var(--gold-300); }
.spotlight-dark h2 { color: #fff; }
.spotlight-dark .spotlight-text .spotlight-sub { color: var(--gold-300); }
.spotlight-dark .spotlight-text p:not(.spotlight-sub) { color: rgba(255, 255, 255, 0.72); }

.spotlight-light { background: var(--cream-50); }
.spotlight-warm { background: var(--cream-100); }

.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.spotlight-text .eyebrow { display: block; margin-bottom: 14px; }
.spotlight-text h2 { margin-bottom: 10px; }
.spotlight-text .spotlight-sub { display: block; font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; color: var(--green-700); }
.spotlight-text p:not(.spotlight-sub) { font-size: 1.02rem; color: var(--ink-600); margin-bottom: 30px; max-width: 460px; }

.spotlight-media-coffee { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.spotlight-media-coffee img {
  width: 30%;
  max-width: 200px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
  object-fit: cover;
}
.spotlight-media-coffee img:nth-child(2) { transform: translateY(-26px); z-index: 1; }

.spotlight-center { max-width: 640px; margin: 0 auto; text-align: center; }
.spotlight-center h2 { color: var(--green-900); margin-bottom: 14px; }
.spotlight-center p { font-size: 1.08rem; color: var(--ink-600); margin-bottom: 30px; }

.spotlight-bottle-row { display: flex; justify-content: center; align-items: flex-end; gap: 18px; margin-top: 48px; flex-wrap: wrap; }
.spotlight-bottle-row img {
  width: 150px;
  max-width: 18%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(14, 62, 46, 0.18);
}

.spotlight-media-placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}
.spotlight-media-placeholder img,
.spotlight-media-placeholder svg { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .spotlight-grid { grid-template-columns: 1fr; }
  .spotlight-bottle-row img { max-width: 30%; }
}

/* ===== Locations ===== */
.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: start;
}
.location-cards { display: grid; gap: 18px; }
.location-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--gold-500);
  transition: transform var(--transition), box-shadow var(--transition);
}
.location-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.location-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.location-card p { margin: 0; color: var(--ink-600); font-size: 0.92rem; }
.location-card .loc-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
  background: #d8f3e3;
  border-radius: 999px;
  padding: 4px 12px;
}

.location-map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 420px;
}
.location-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }

/* Real points of sale (home), loaded live and grouped by state — see
   loadPuntosVentaPublic in js/script.js. Reuses .location-card's look,
   just laid out in a wider multi-column grid per state group instead of
   the single column used for the two curated cards above. */
.pos-groups-head { margin: 48px 0 20px; }
.pos-groups-head h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--green-900); }
.pos-groups { display: flex; flex-direction: column; gap: 32px; }
.pos-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chili-500);
  margin-bottom: 14px;
}
.pos-group-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .pos-group-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pos-group-cards { grid-template-columns: 1fr; }
}

/* ===== About ===== */
.about-intro-wrap { display: flex; align-items: center; gap: 48px; max-width: 1080px; }
.about-intro-logo { flex: 0 0 240px; width: 240px; height: auto; display: block; }
.about-intro { max-width: 820px; font-size: 1.08rem; flex: 1; min-width: 0; }
.about-highlight {
  background: var(--cream-100);
  border-left: 5px solid var(--gold-500);
  padding: 18px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.1rem;
}

.team { margin-top: 56px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 340px));
  gap: 32px;
  margin-top: 26px;
}
.team-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 26px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-avatar {
  width: 180px; height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--cream-50);
  padding: 4px;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, var(--gold-500), var(--chili-500), var(--green-700)) border-box;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-avatar:hover, .team-avatar:focus-visible {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}
.team-avatar:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 4px;
}
.team-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}
.team-card h4 { margin-bottom: 4px; font-size: 1.3rem; }
.team-role { color: var(--chili-500); font-weight: 600; font-size: 0.9rem; margin: 0; }

@media (max-width: 480px) {
  .team-avatar { width: 140px; height: 140px; }
}

/* ===== Team member modal ===== */
.person-modal { max-width: 560px; }
.person-modal-photo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-100);
}
.person-modal-photo img { display: block; width: 100%; height: auto; max-height: 75vh; }
.person-modal-detail { padding: 28px 32px 32px; text-align: center; }
.person-modal-detail h3 { font-size: 1.6rem; margin-bottom: 4px; }
.person-modal-detail .team-role { display: block; margin-bottom: 0; font-size: 1rem; }

@media (max-width: 600px) {
  .person-modal-photo img { max-height: 60vh; }
  .person-modal-detail { padding: 22px 22px 26px; }
}

.founder-story { margin-top: 56px; max-width: 860px; }
.founder-story blockquote {
  margin: 0;
  padding: 34px 38px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--gold-500);
  font-size: 1.02rem;
  color: var(--ink-600);
}
.founder-story blockquote p:first-child {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--green-900);
  font-style: italic;
}
.founder-story blockquote p:last-child { margin-bottom: 0; }

.read-more-btn {
  display: none;
  margin: 16px auto 0;
  padding: 8px 4px;
  background: none;
  border: 0;
  color: var(--green-700);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.read-more-btn:hover, .read-more-btn:focus-visible { text-decoration: underline; }

.founder-story.can-collapse blockquote p:nth-child(n + 4) { display: none; }
.founder-story.can-collapse blockquote p:nth-child(3) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.founder-story.can-collapse.is-expanded blockquote p:nth-child(n + 4) { display: block; }
.founder-story.can-collapse.is-expanded blockquote p:nth-child(3) {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.founder-story.can-collapse .read-more-btn { display: block; width: max-content; }

/* ===== Gallery wall (videos + product photos) ===== */
.gallery-wall-section {
  position: relative;
  background: radial-gradient(1200px 500px at 50% 0%, #123c2c 0%, var(--green-950) 55%, #061a14 100%);
  overflow: hidden;
}
.gallery-wall-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(232, 163, 61, 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.08;
  pointer-events: none;
}
.gallery-wall-section .section-head { position: relative; margin-left: auto; margin-right: auto; text-align: center; }
.gallery-wall-section .eyebrow { color: var(--gold-300); }
.gallery-wall-section h2 { color: #fff; }
.gallery-wall-section .section-sub { color: rgba(255, 255, 255, 0.72); margin-left: auto; margin-right: auto; }
.gallery-cta { margin-top: 40px; }

/* Three-zone layout: product photos flank the videos, which run down the
   center column so they read as the visual anchor of the wall. */
.gallery-wall {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 860px) {
  .gallery-wall { grid-template-columns: 1fr 1.15fr 1fr; align-items: start; gap: 22px; }
}

.gallery-col { display: flex; flex-direction: column; gap: 16px; }
.gallery-col-center { gap: 22px; }

.gallery-item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.gallery-item.is-photo { aspect-ratio: 4 / 5; }
.gallery-item.is-video { aspect-ratio: 9 / 16; cursor: pointer; }

.gallery-item img,
.gallery-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-item.is-photo img { transition: transform 0.5s ease; }
.gallery-item.is-photo:hover img { transform: scale(1.06); }

.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.gallery-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  background: rgba(0, 0, 0, 0.2);
  transition: opacity var(--transition), background var(--transition);
}
.gallery-play::before {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.65);
}
.gallery-item.is-video:hover .gallery-play { background: rgba(0, 0, 0, 0.35); }
.gallery-item.is-video.is-playing .gallery-play { opacity: 0; pointer-events: none; }
.gallery-item.is-video.is-playing video { pointer-events: auto; }

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--shadow-sm);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.form-field label { font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--green-900); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.97rem;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(14, 62, 46, 0.18);
  background: var(--cream-50);
  color: var(--ink-900);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230e3e2e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
  cursor: pointer;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.15); }
.form-field input.has-error,
.form-field select.has-error { border-color: var(--chili-500); }
.field-error { color: var(--chili-500); font-size: 0.78rem; min-height: 1.1em; margin-top: 4px; }

.form-note { font-size: 0.82rem; color: var(--ink-600); margin: 14px 0 0; }

.contact-aside { display: grid; gap: 20px; }
.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-size: 1.12rem; }
.contact-card p { margin-bottom: 8px; font-size: 0.94rem; color: var(--ink-600); }
.contact-card-accent { background: var(--green-900); }
.contact-card-accent h3 { color: var(--gold-300); }
.contact-card-accent p { color: rgba(255, 255, 255, 0.82); }

/* ===== Footer ===== */
.site-footer { background: var(--green-950); color: rgba(255, 255, 255, 0.75); margin-top: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  padding: 60px 24px 40px;
}
.footer-brand { color: var(--cream-50); font-size: 1.3rem; margin-bottom: 8px; }
.footer-brand em { color: var(--gold-500); }
.footer-tag { font-size: 0.9rem; max-width: 320px; }
.site-footer h4 {
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.site-footer nav a { display: block; color: rgba(255, 255, 255, 0.75); text-decoration: none; padding: 4px 0; font-size: 0.92rem; }
.site-footer nav a:hover { color: var(--gold-300); }
.site-footer p { font-size: 0.92rem; }
.site-footer a { color: rgba(255, 255, 255, 0.85); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  padding: 20px 24px;
  font-size: 0.82rem;
}
.footer-bottom p { margin: 0; }

/* ===== Site credit (very bottom of every page, below the footer) ===== */
.site-credit {
  background: var(--cream-50);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
}
.site-credit-logo { height: 22px; width: auto; display: block; }
.site-credit span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
}

/* ===== WhatsApp FAB ===== */
.whatsapp-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6); }

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .carousel-slide { transition: opacity 0.3s ease; transform: none; }
  .shop-hero-bg-slide { animation: none; opacity: 0; }
  .shop-hero-bg-slide.slide-a { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .product-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .locations-grid { grid-template-columns: 1fr; }
  .location-map { min-height: 340px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-intro-wrap { flex-direction: column; align-items: stretch; gap: 24px; }
  .about-intro-logo { flex: 0 0 auto; width: 180px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .section { padding: 64px 0; }

  /* Mobile nav */
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--cream-50);
    padding: 18px 24px 26px;
    border-bottom: 1px solid rgba(14, 62, 46, 0.1);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-link { padding: 13px 16px; font-size: 1.02rem; }

  .carousel-track { min-height: 560px; }
  .slide-content { padding: 70px 24px 90px; }
  .carousel-arrow { display: none; }

  .product-grid, .catalog-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  .modal-body { grid-template-columns: 1fr; }
  .modal-media { min-height: 220px; }

  .sort-box { margin-left: 0; width: 100%; justify-content: space-between; }

  .founder-story blockquote { padding: 26px 22px; }
  .whatsapp-fab { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

@media (max-width: 420px) {
  .value-grid { grid-template-columns: 1fr; }
  .slide-title { font-size: 2rem; }
  .btn { width: 100%; justify-content: center; }
  .slide-actions .btn { width: auto; flex: 1; }
}