:root,
:host {
  --color-teal-main: #1f7780;
  --color-teal-pale: #b7d6d4;
  --color-green-light: var(--color-teal-pale);
  --color-green-dark: #7fa7a8;
}

@supports (color: color-mix(in oklch, red, red)) {
  :root,
  :host {
    --color-green-dark: color-mix(in oklch, var(--color-green-light) 68%, var(--color-black));
  }
}

.accent {
  --color-text: var(--color-black);
  --color-background: var(--color-green-light);
  --color-accent: var(--color-teal-main);
}

.c-narrow-header .nav-wrapper,
.c-menu-header {
  background-color: var(--color-teal-main);
}

.c-narrow-header .nav-wrapper,
.c-narrow-header .nav-list li,
.c-narrow-header .nav-list .text-theme,
.c-narrow-header .c-menu-button,
.c-narrow-header .c-logo_part {
  --secondary-color: var(--color-white);
  --color-text: var(--color-white);
  color: var(--color-white);
  fill: var(--color-white);
}

.c-menu-header .accent {
  --color-text: var(--color-white);
  --color-background: var(--color-teal-main);
  --color-accent: #a9d8dc;
}

:focus-visible {
  outline-color: var(--color-teal-main);
}

c-inline-video video {
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, cover);
  object-position: center;
}

/* Desi Dairy: philosophy statement headings — a little smaller (was 17cqi) */
#our-story h3.heading-xl {
  font-size: min(15cqi, 15cqh);
}

/* Desi Dairy: bottle intro — looser line-height so descenders don't merge */
#process h2.heading-xl { line-height: 1; }

/* Desi Dairy: bottle chapter titles + product-catalog headers — a little smaller */
#process p.heading-md,
[data-field="block_product_catalog_title"],
[data-field="block_product_catalog_text"] {
  font-size: calc(var(--text-heading-md) * 0.8);
}

/* Desi Dairy: let the logo slots size to the swapped-in logo */
c-logo {
  width: auto !important; height: auto !important;
  max-width: none !important; max-height: none !important;
  overflow: visible !important;
}
c-logo img { flex-shrink: 0; }

/* Desi Dairy: subtle dark gradient over the hero video for text contrast */
.dd-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 42%, rgba(0,0,0,0.55) 100%);
}