/* ==========================================================================
   Dive Wellness Global — stylesheet
   Brand tokens live in :root — swap --accent (and the navy/teal pair) here
   when the final brand kit lands.
   ========================================================================== */

:root {
  /* Brand palette sampled directly from the Terravia logo (Terravia.pdf) */
  --navy: #191c39;
  --navy-dark: #101024;
  --teal: #405b99; /* brand blue, from the mark's ribbon */
  --teal-dark: #32477a;
  --accent: #e2604a; /* brand coral/orange, matches the "FOOD" wordmark */
  --accent-dark: #c1492f;
  --gold: #f1af2c; /* brand gold, from the mark's ribbon — decorative use */

  --ink: #1c2b3a;
  --body-text: #445164;
  --muted: #6b7686;
  --line: #e2e6ec;
  --surface: #f5f7fa;
  --surface-alt: #eef1f5;
  --white: #ffffff;

  --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-card: 0 12px 30px -18px rgba(28, 53, 87, 0.35);
  --shadow-soft: 0 4px 14px -8px rgba(28, 53, 87, 0.25);

  --container: 1240px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body-text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1em;
}

button {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 64px 0;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  z-index: 999;
}

.skip-link:focus {
  left: 20px;
  top: 20px;
}

/* ---------- Section heading kit ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 10px;
}

.eyebrow-badge {
  background: var(--accent);
  color: var(--white);
  padding: 9px 20px;
  border-radius: 8px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 40px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.rule {
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  margin: 14px 0 18px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn-solid {
  background: var(--navy);
  color: var(--white);
}

.btn-solid:hover {
  background: var(--navy-dark);
}

.btn-accent {
  background: var(--accent);
  color: var(--white);
}

.btn-accent:hover {
  background: var(--accent-dark);
}

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn-outline-light:hover {
  background: var(--white);
  color: var(--navy);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 0.85rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-link img {
  height: 44px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  gap: 30px;
}

.main-nav a {
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  padding: 8px 2px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
  color: var(--accent);
}

.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.partner-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.partner-login:hover {
  background: var(--navy-dark);
}

.partner-login svg {
  width: 16px;
  height: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero shapes ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 70px;
}

.hero-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-shapes img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.page-hero {
  padding: 54px 0 60px;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.page-hero .lede {
  max-width: 620px;
  font-size: 1.05rem;
  color: var(--body-text);
}

/* ---------- Home hero ---------- */
.home-hero {
  padding: 96px 0 88px;
}

.home-hero-grid {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.home-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.home-hero h1 .accent-text {
  color: var(--accent);
}

.home-hero .lede {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ---------- Placeholder art blocks ---------- */
.placeholder-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-alt),
    var(--surface-alt) 10px,
    var(--surface) 10px,
    var(--surface) 20px
  );
  border: 2px dashed #b9c3d1;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 16px;
  min-height: 160px;
}

.placeholder-block span {
  max-width: 220px;
}

.hero-collage {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Icon badges ---------- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--white);
  flex-shrink: 0;
}

.icon-badge svg {
  width: 24px;
  height: 24px;
}

.icon-badge.navy {
  background: var(--navy);
}

.icon-badge.teal {
  background: var(--teal);
}

.icon-badge.accent {
  background: var(--accent);
}

/* ---------- Category / product cards ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.category-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.category-card .placeholder-block {
  min-height: 110px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
}

.category-card .category-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  opacity: 0.94;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.category-card .icon-badge {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
}

.category-card .icon-badge svg {
  width: 18px;
  height: 18px;
}

.category-card p.card-label {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.92rem;
  margin: 0;
}

/* ---------- Stats bar ---------- */
.stats-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-item .icon-badge {
  width: 46px;
  height: 46px;
}

.stat-item .icon-badge svg {
  width: 20px;
  height: 20px;
}

.stat-item strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1.2;
}

.stat-item span {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- Product grid (Products page) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

.product-card .placeholder-block {
  min-height: 150px;
  margin-bottom: 16px;
}

.product-card .category-photo-link {
  display: block;
}

.product-card .category-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  opacity: 0.94;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.product-card .icon-badge {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
}

.product-card h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.product-card p {
  font-size: 0.92rem;
  color: var(--body-text);
  margin-bottom: 14px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--teal-dark);
}

.link-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.coming-soon-badge {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-alt);
  padding: 6px 14px;
  border-radius: 999px;
}

.distribution-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 10px 0 0;
}

.distribution-badge svg {
  flex-shrink: 0;
}

.distribution-badge.regional {
  color: var(--teal-dark);
  background: rgba(64, 91, 153, 0.12);
}

.distribution-badge.worldwide {
  color: #9a6a10;
  background: rgba(241, 175, 44, 0.18);
}

.product-card .distribution-badge {
  display: inline-flex;
  margin: 4px 0 12px;
}

/* ---------- Breadcrumb back link ---------- */
.breadcrumb-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--teal-dark);
  margin-bottom: 18px;
}

.breadcrumb-back svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

/* ---------- Brand group section (category detail pages) ---------- */
.brand-group {
  padding-top: 40px;
}

.brand-group:first-of-type {
  padding-top: 0;
}

.brand-group-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--line);
  flex-wrap: wrap;
}

.brand-group-header img {
  height: 92px;
  width: auto;
}

.brand-group-header .brand-group-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy);
}

.brand-group-header p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Brand picker (jump straight to a brand's carousel) ---------- */
.brand-picker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .brand-picker-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.brand-picker-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.brand-picker-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--teal);
}

.brand-picker-card img {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.brand-picker-body {
  flex: 1;
  min-width: 0;
}

.brand-picker-name {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 2px;
}

.brand-picker-body p:not(.brand-picker-name) {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.brand-picker-card svg {
  flex-shrink: 0;
  color: var(--teal-dark);
}

/* So a same-page jump to a brand's carousel doesn't land underneath the
   sticky header. */
#dive,
#north {
  scroll-margin-top: 76px;
}

.sku-subheading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 32px 0 16px;
}

.sku-subheading:first-of-type {
  margin-top: 0;
}

/* ---------- SKU grid (individual product cards) ---------- */
.sku-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.sku-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}

.sku-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.sku-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--surface);
  display: block;
}

.sku-card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sku-card h4 {
  font-family: var(--font-head);
  font-size: 0.92rem;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.3;
}

.sku-card p {
  font-size: 0.82rem;
  color: var(--body-text);
  margin: 0;
}

.sku-card .size-line {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: auto;
  padding-top: 8px;
}

/* ---------- Internal/admin note callout ---------- */
.internal-note {
  background: rgba(242, 153, 74, 0.1);
  border-left: 4px solid var(--accent);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 36px;
}

.internal-note strong {
  font-family: var(--font-head);
}

/* ---------- Trust / feature bars ---------- */
.feature-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 20px;
}

.feature-item {
  text-align: center;
}

.feature-item .icon-badge {
  margin: 0 auto 12px;
}

.feature-item h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.feature-item p {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}

.icon-badge.numbered {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---------- Market Entry page ---------- */
.market-entry-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 0 20px;
}

@media (min-width: 1024px) {
  .market-entry-hero-grid {
    grid-template-columns: minmax(0, 560px) 1fr;
    gap: 48px;
    align-items: stretch;
    padding-left: max(20px, calc((100vw - 1240px) / 2 + 20px));
    padding-right: 0;
  }
}

.market-entry-hero-grid .lede {
  font-size: 1.14rem;
}

.market-entry-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 28px;
  min-height: 340px;
}

@media (min-width: 1024px) {
  .market-entry-photo {
    margin-top: 0;
    height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

.market-entry-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.market-entry-pillars-label {
  margin-top: 32px;
  margin-bottom: 14px;
}

.market-entry-pillars-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 560px) {
  .market-entry-pillars-compact {
    grid-template-columns: 1fr 1fr;
  }
}

.pillar-compact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.pillar-compact .icon-badge {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.pillar-compact h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.pillar-compact p {
  font-size: 0.87rem;
  color: var(--body-text);
  margin: 0;
  line-height: 1.45;
}

.market-entry-photo .photo-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
}

.market-entry-stat {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  margin-top: 24px;
}

.market-entry-stat .stat-number {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--accent);
  line-height: 1;
}

.market-entry-stat .stat-copy strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 2px;
}

.market-entry-stat .stat-copy span {
  font-size: 0.88rem;
  color: var(--body-text);
}

.subject-fixed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
}

.subject-fixed span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.message-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.message-card-head h3 {
  margin-bottom: 2px;
}

.message-card-head p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.whatsapp-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #25d366;
  color: var(--white);
  padding: 10px 18px 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 18px -8px rgba(20, 30, 20, 0.45);
  transition: box-shadow 0.18s ease;
  flex-shrink: 0;
}

.whatsapp-cta:hover {
  box-shadow: 0 12px 22px -8px rgba(20, 30, 20, 0.5);
}

.whatsapp-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.whatsapp-cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.whatsapp-cta-text strong {
  font-family: var(--font-head);
  font-size: 0.92rem;
}

.whatsapp-cta-text span {
  font-size: 0.72rem;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .market-entry-stat {
    display: flex;
  }
}

/* ---------- Brand grid (Our Brands page) ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.brand-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.brand-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.brand-card .placeholder-block {
  min-height: 180px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.brand-card .brand-logo-real {
  min-height: 180px;
  max-height: 180px;
  width: 100%;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}

.brand-card .brand-category {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.cta-bar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
}

.cta-bar .icon-badge {
  background: var(--accent);
}

.cta-bar h3 {
  color: var(--white);
  font-size: 1.2rem;
  margin: 12px 0 4px;
}

.cta-bar p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
}

.cta-bar-actions {
  width: 100%;
}

/* ---------- About page ---------- */
.about-hero-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 26px 0 30px;
}

.about-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
}

.about-badge .icon-badge {
  width: 40px;
  height: 40px;
}

.about-badge .icon-badge svg {
  width: 18px;
  height: 18px;
}

.about-photo-wrap {
  position: relative;
}

.mission-quote {
  position: relative;
  margin-top: -50px;
  margin-left: 16px;
  margin-right: 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  font-family: var(--font-head);
  font-size: 1.02rem;
  line-height: 1.5;
  box-shadow: var(--shadow-card);
}

.mission-quote::before {
  content: "\201C";
  font-size: 2.4rem;
  color: var(--accent);
  line-height: 0;
  display: block;
  margin-bottom: 6px;
}

.about-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.about-col h3 {
  font-size: 1.15rem;
}

.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.checklist svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 3px;
}

.who-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.who-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  font-family: var(--font-head);
  min-width: 0;
}

.who-item .icon-badge {
  margin: 0 0 8px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.who-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3em;
}

.story-icon {
  width: 64px;
  height: 64px;
  margin: 18px 0;
}

/* ---------- News page ---------- */
.news-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.article-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.article-card .placeholder-block {
  min-height: 140px;
  border-radius: 0;
  border-width: 0 0 2px;
}

.article-card-body {
  padding: 18px 20px 20px;
}

.tag-pill {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.article-date {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.article-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.article-card p {
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.news-sidebar > * + * {
  margin-top: 28px;
}

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
}

.sidebar-card h3 {
  font-size: 1rem;
}

.latest-news-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.latest-news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.latest-news-item .placeholder-block {
  width: 64px;
  height: 64px;
  min-height: 0;
  flex-shrink: 0;
  font-size: 0.55rem;
  padding: 4px;
  border-radius: var(--radius-sm);
}

.latest-news-item .article-date {
  margin-bottom: 2px;
}

.latest-news-item h4 {
  font-size: 0.86rem;
  margin: 0;
  color: var(--navy);
}

.newsletter-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 24px;
}

.newsletter-card h3 {
  color: var(--white);
}

.newsletter-card p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.newsletter-form input {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
}

.form-msg {
  font-size: 0.8rem;
  min-height: 1.2em;
}

.form-msg.success {
  color: #7fe0c9;
}

.form-msg.error {
  color: #ffb4a8;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pill[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.pill:hover {
  border-color: var(--navy);
}

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

.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-soft);
}

.contact-card h3 {
  font-size: 1.05rem;
}

.contact-detail {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}

.contact-detail:last-child {
  margin-bottom: 0;
}

.contact-detail .icon-badge {
  width: 44px;
  height: 44px;
}

.contact-detail .icon-badge svg {
  width: 20px;
  height: 20px;
}

.contact-detail strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 2px;
}

.contact-detail p {
  margin: 0;
  font-size: 0.9rem;
}

.contact-detail p a {
  color: inherit;
  text-decoration: none;
}

.contact-detail p a:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.contact-form label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--white);
  color: var(--ink);
}

.contact-form input:invalid[data-touched="true"],
.contact-form select:invalid[data-touched="true"],
.contact-form textarea:invalid[data-touched="true"] {
  border-color: #d94b3d;
}

.field-error {
  font-size: 0.78rem;
  color: #d94b3d;
  min-height: 1em;
  display: block;
  margin-top: 4px;
}

.map-embed {
  display: block;
  width: 100%;
  height: 220px;
  min-height: 220px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.office-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 14px;
}

.office-card:last-child {
  margin-bottom: 0;
}

.office-card strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  margin-bottom: 4px;
}

.office-card p {
  margin: 0;
  font-size: 0.88rem;
}

.regional-offices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.regional-office-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.regional-office-card .icon-badge {
  margin: 0 auto 14px;
}

.regional-office-card h3 {
  font-size: 1.05rem;
}

.regional-office-card p {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.regional-office-card p a {
  color: inherit;
  text-decoration: none;
}

.regional-office-card p a:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(20, 30, 20, 0.5);
  z-index: 500;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 28px -8px rgba(20, 30, 20, 0.55);
}

/* Hidden while a product carousel (.product-showcase) is on screen —
   product-showcase.js toggles this. The carousel already has its own
   nav controls, and its description text can run long enough to reach
   this corner of the screen, so the two compete for the same space. */
.whatsapp-float.is-hidden {
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
}

@media (max-width: 767px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  margin-top: 40px;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 72px 0 40px;
}

.footer-brand p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 320px;
}

.footer-logo-chip {
  display: inline-block;
  background: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.footer-logo-chip img {
  display: block;
  height: 48px;
  width: auto;
}

.footer-col h4 {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-col p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.footer-col p:last-child {
  margin-bottom: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal-links {
  display: flex;
  gap: 20px;
}

.footer-legal-links a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal-links a:hover {
  color: var(--white);
}

@media (min-width: 640px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Home hero curve backdrop reused across page heroes */
.curve-band {
  position: absolute;
  top: 0;
  right: -10%;
  width: 55%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ==========================================================================
   Breakpoints — mobile-first: base styles above are for 375px+
   ========================================================================== */

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }

  .main-nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .footer-columns {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 24px;
  }

  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sku-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-columns {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-hero-badges {
    grid-template-columns: repeat(4, 1fr);
  }

  .form-row-2 {
    grid-template-columns: 1fr 1fr;
  }

  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .regional-offices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .stats-bar {
    grid-template-columns: repeat(5, 1fr);
  }

  .feature-bar {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sku-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cta-bar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .cta-bar-actions {
    width: auto;
  }

  .about-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }

  .who-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-columns {
    grid-template-columns: 1fr 1.15fr 1fr;
  }

  .news-layout {
    grid-template-columns: 2fr 1fr;
  }

  .mission-quote {
    max-width: 380px;
    margin-left: 30px;
    margin-right: 0;
  }
}

/* Large desktop: 1440px+ */
@media (min-width: 1440px) {
  .container {
    padding: 0 40px;
  }

  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  section {
    padding: 84px 0;
  }
}

/* Mobile nav drawer (below tablet) */
@media (max-width: 767px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 66px 0 0 0;
    background: var(--white);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    padding: 20px;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 4px;
  }

  .main-nav a {
    display: block;
    padding: 14px 6px;
    border-bottom: 1px solid var(--line);
  }

  .header-actions .partner-login span {
    display: none;
  }

  .header-actions .partner-login {
    padding: 10px 12px;
  }
}

/* ---------- Legal pages (Terms, Privacy) ---------- */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0 80px;
}

.legal-content h2 {
  font-size: 1.3rem;
  margin-top: 44px;
  margin-bottom: 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--body-text);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 14px;
}

.legal-content ul {
  padding-left: 22px;
}

.legal-content .legal-updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 40px;
}

/* ---------- 404 page ---------- */
.not-found {
  padding: 100px 0 120px;
  text-align: center;
}

.not-found .not-found-code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 14px;
}

.not-found h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 14px;
}

.not-found p {
  max-width: 480px;
  margin: 0 auto 32px;
  color: var(--body-text);
  font-size: 1.05rem;
}

.not-found .hero-ctas {
  justify-content: center;
}

/* ---------- Product showcase (swipe/drag-driven, single page per category) ---------- */
/* Browsing is driven entirely by dragging/swiping the photo or using the
   controls (see product-showcase.js) — scroll position doesn't map to
   which product is showing, so the section doesn't need a scroll track
   sized to the item count. This short, fixed height just gives the
   pinned stage a little dwell room before it releases and the page
   continues past it. */
.product-showcase {
  position: relative;
  height: calc(100vh - 66px + 30vh);
  min-height: 480px;
}

/* Pinned brand switcher, for pages with more than one brand's carousel
   (Beverages: dive / North) — stays in view for as long as its carousel
   is pinned, so you can jump to the other brand at any scroll depth. */
.showcase-brand-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.switcher-tab {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--navy);
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switcher-tab:not(.active):hover {
  border-color: var(--teal);
  background: var(--surface);
}

.switcher-tab.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  cursor: default;
}

/* Jump tabs for a single carousel grouped into sublines (Crazy Choco,
   Crazy Cream) — same look as the brand switcher, but wraps onto
   multiple rows since there can be several of them. */
.showcase-subline-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  max-width: 640px;
}

.showcase-subline-switcher .switcher-tab {
  font-size: 0.75rem;
  padding: 6px 13px;
}

.showcase-stage {
  position: sticky;
  top: 66px;
  height: calc(100vh - 66px);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  cursor: grab;
  /* Let vertical touch scrolling through untouched (that's how you leave
     the section); horizontal drags are captured by product-showcase.js
     as a swipe instead of the browser's own pan/zoom gestures. */
  touch-action: pan-y;
}

.showcase-stage:active {
  cursor: grabbing;
}


.showcase-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1100px;
  padding: 0 16px;
}

.showcase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.showcase-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.showcase-nav:hover {
  background: var(--surface);
  border-color: var(--navy);
}

.showcase-peek-group {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.showcase-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.showcase-visual {
  position: relative;
  width: 260px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.showcase-slide {
  position: absolute;
  inset: 0;
  /* opacity, transform, and z-index are set inline by product-showcase.js
     on every scroll frame, so position tracks scroll 1:1 instead of
     playing a fixed-duration animation independent of scroll speed. */
  will-change: transform, opacity;
}

.showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-peek {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.4;
  transform: translateY(22px) scale(0.8);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.showcase-peek:hover {
  opacity: 0.65;
}

.showcase-peek .peek-img {
  width: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.showcase-peek .peek-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  max-width: 110px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Below 640px there isn't room for a full-size peek beside a readable
   main photo, so the neighbor thumbnails shrink to a small greyed-out
   sliver (no label — there's no room to show it legibly) rather than
   disappearing outright, so it's still clear something comes before
   and after the current product. */
@media (max-width: 639px) {
  .showcase-row {
    gap: 6px;
  }

  .showcase-peek-group {
    gap: 6px;
  }

  .showcase-nav {
    width: 34px;
    height: 34px;
  }

  /* The resting desktop peek sits scaled down and dropped 22px, which
     reads fine at a 96px+ size but makes a sliver this small look
     oddly offset — plain opacity alone reads as "greyed out" clearly
     enough at this size. */
  .showcase-peek {
    transform: none;
  }

  .showcase-peek .peek-label {
    display: none;
  }

  .showcase-peek .peek-img {
    width: 34px;
  }
}

.showcase-index {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

/* How far through the range you are: dark fill for what you've passed,
   the light track for what's left. product-showcase.js sets the fill
   width on every frame it moves the photo, so this tracks a drag or an
   animated jump exactly in step — no CSS transition needed here. */
.showcase-progress {
  width: 100%;
  max-width: 140px;
  height: 4px;
  margin: 0 auto 16px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.showcase-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--navy);
  border-radius: inherit;
}

/* product-showcase.js sets an explicit height here to match the active
   description. When the description is taller than the space actually
   left in the pinned stage, JS caps the height instead and this scrolls
   internally — the stage itself stays fixed-height and fully on-screen,
   rather than trying to grow past the viewport (which, being `position:
   sticky`, can't reveal extra height by scrolling — the overflow would
   just be stranded below the screen, unreachable). */
.showcase-info {
  position: relative;
  width: 100%;
  min-height: 24px; /* avoids a zero-height flash before JS sets the real
    height on load — kept small so it can never itself force the box
    taller than the space JS determines is actually available */
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.showcase-info.is-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}

.showcase-info-item {
  position: absolute;
  /* Clears the index label + progress bar sitting above it in normal
     flow (both a fixed height regardless of breakpoint, so this is a
     constant rather than something set per breakpoint). */
  top: 48px;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.showcase-info-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.showcase-info-item .showcase-subline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 6px;
}

.showcase-info-item h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.showcase-info-item p {
  max-width: 480px;
  margin: 0 auto 12px;
  color: var(--body-text);
}

.showcase-info-item .size-line {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

@media (min-width: 640px) {
  .showcase-visual {
    width: 280px;
  }

  .showcase-inner {
    gap: 36px;
  }
}

@media (min-width: 1024px) {
  .showcase-visual {
    width: 340px;
  }

  .showcase-peek .peek-img {
    width: 130px;
  }

  .showcase-peek-group {
    gap: 36px;
  }

  .showcase-nav {
    width: 56px;
    height: 56px;
  }
}