/* Make sure containers never lose their center alignment */
.container,
.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}

/* Pointer event control */
.pointer-events-off {
  pointer-events: none;
}

.pointer-events-on {
  pointer-events: auto;
}

/* Removes native scrollbar */
.no-scrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Visibility and responsive display utilities */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {

  .hide,
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide only on desktop (≥992px) */
@media screen and (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Core Swiper styles */
.swiper,
swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

[swiper="testimonial-gallery"] .swiper-pagination-bullet {
  border: none;
  background-color: #ffffff40;
  opacity: 1;
}

[swiper="testimonial-gallery"] .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}

[swiper="testimonial-gallery"] .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0px !important;
  top: 0px !important;
  position: relative !important;
}

/* Simple fade/pulse skeleton with beige tones */
[swiper="hero-gallery"] .swiper-slide.is-thumb .swiper-slide_image-wrap.is-square:empty,
[swiper="hero-gallery"] .swiper-slide.is-thumb .swiper-slide_image-wrap.is-square:not(:has(img)) {
  background: var(--brand--color--primary-light);
  animation: pulse 1.5s ease-in-out infinite;
  min-height: 100px;
  aspect-ratio: 1;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    background: var(--brand--color--primary-light);
  }

  50% {
    opacity: 0.7;
    background: var(--brand--color--primary-light);
  }
}

/* Fade in images when they load */
[swiper="hero-gallery"] .swiper-slide.is-thumb .swiper-slide_image-wrap img {
  opacity: 0;
  animation: fadeIn 300ms ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

[data-action="submit"] {
  position: relative;
}

[data-button="spinner"] {
  width: 1.2em;
  display: block;
  height: 1.2em;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

[data-button="spinner"] .path {
  stroke: currentColor;
  stroke-linecap: round;
  animation: spinner-dash 1.5s ease-in-out infinite;
}

[data-action="submit"].is-submitting [data-button="content"] {
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-action="submit"].is-submitting [data-button="spinner"] {
  opacity: 1;
  transition: opacity 0.2s ease;
  animation: spinner-rotate 2s linear infinite;
}

[data-action="checkout"].is-submitting [data-button="content"] {
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-action="checkout"].is-submitting [data-button="spinner"] {
  opacity: 1;
  transition: opacity 0.2s ease;
  animation: spinner-rotate 2s linear infinite;
}

[data-action="upgrade"].is-submitting [data-button="content"] {
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-action="upgrade"].is-submitting [data-button="spinner"] {
  opacity: 1;
  transition: opacity 0.2s ease;
  animation: spinner-rotate 2s linear infinite;
}

@keyframes spinner-rotate {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

[data-corner="squircle"] {
  corner-shape: squircle;
  border-radius: 30px
}

/* Utility CSS for rotating animation */
[os-animate="rotate"] {
  animation: infiniteRotate 10s linear infinite;
}

@keyframes infiniteRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Additional animation variations you might want */
[os-animate="rotate-slow"] {
  animation: infiniteRotate 20s linear infinite;
}

[os-animate="rotate-fast"] {
  animation: infiniteRotate 5s linear infinite;
}

[os-animate="rotate-reverse"] {
  animation: infiniteRotate 10s linear infinite reverse;
}

/* ── Base (unchanged) ────────────────────────────── */
.radio-style-1,
.radio-style-2,
.radio-default {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  transition: all .2s ease;
}

.radio-style-none {
  display: none;
}

.radio-inner {
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── "Selected" state driven by .os--active ─────── */

/* Style 1 – filled dot with border */
.os--selected .radio-style-1 {
  border: .1875rem solid #fff;
  background: var(--brand--color--primary, #000);
  box-shadow: 0 0 0 .125rem var(--brand--color--primary, #000);
}

.os--selected .radio-style-1 .radio-inner {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--brand--color--primary, #000);
}

/* Style 2 – hollow circle */
.os--selected .radio-style-2 {
  border-width: .3125rem;
  border-color: var(--brand--color--primary, #000);
  background: #fff;
  box-shadow: 0 0 0 .0625rem var(--brand--color--primary, #000);
}

.os--selected .radio-style-2 .radio-inner {
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: #fff;
}

/* Fallback / default style */
.os--selected .radio-default {
  border: .1875rem solid #fff;
  background: var(--brand--color--primary, #000);
  box-shadow: 0 0 0 .125rem var(--brand--color--primary, #000);
}

.os--selected .radio-default .radio-inner {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--os--card--radio-color, #000);
}

[os-slot]:empty {
  display: none;
}

.ingredients__last-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 2rem !important;
}

.ingredients__last-row .ingredient__item {
  flex: 0 0 calc((100% - 4rem) / 3) !important;
}

div[data-hide-empty]:empty {
  display: none;
}

[data-gradient="01"] {
  background: linear-gradient(272deg,
      var(--brand--color--primary) 50%,
      var(--brand--color--secondary) 100%);
  background-size: 200% 200%;
  background-position: center;
  transition: background-position 0.5s ease;
}

[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.1) 2%,
      rgba(0, 0, 0, 0.3) 4%,
      rgba(0, 0, 0, 0.6) 6%,
      rgba(0, 0, 0, 0.9) 8%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0.9) 92%,
      rgba(0, 0, 0, 0.6) 94%,
      rgba(0, 0, 0, 0.3) 96%,
      rgba(0, 0, 0, 0.1) 98%,
      rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.1) 2%,
      rgba(0, 0, 0, 0.3) 4%,
      rgba(0, 0, 0, 0.6) 6%,
      rgba(0, 0, 0, 0.9) 8%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0.9) 92%,
      rgba(0, 0, 0, 0.6) 94%,
      rgba(0, 0, 0, 0.3) 96%,
      rgba(0, 0, 0, 0.1) 98%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Larger mask for large screens */
@media screen and (min-width: 1801px) {
  [data-fade="both"] {
    -webkit-mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 3%,
        rgba(0, 0, 0, 0.3) 6%,
        rgba(0, 0, 0, 0.6) 9%,
        rgba(0, 0, 0, 0.9) 12%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.9) 88%,
        rgba(0, 0, 0, 0.6) 91%,
        rgba(0, 0, 0, 0.3) 94%,
        rgba(0, 0, 0, 0.1) 97%,
        rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 3%,
        rgba(0, 0, 0, 0.3) 6%,
        rgba(0, 0, 0, 0.6) 9%,
        rgba(0, 0, 0, 0.9) 12%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.9) 88%,
        rgba(0, 0, 0, 0.6) 91%,
        rgba(0, 0, 0, 0.3) 94%,
        rgba(0, 0, 0, 0.1) 97%,
        rgba(0, 0, 0, 0) 100%);
  }
}

/* Remove mask on ALL devices below 991px */
@media screen and (max-width: 990px) {
  [data-fade="both"][data-fade-override="mobile"] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Okendo Loading States */

/* When loading, hide all content except spinner */
[data-component="okendo-reviews"].okendo-loading>*:not([data-spinner="okendo"]) {
  display: none !important;
}

/* Show spinner only when loading */
[data-component="okendo-reviews"]:not(.okendo-loading) [data-spinner="okendo"] {
  display: none !important;
}

/* Ensure spinner is visible during loading */
[data-component="okendo-reviews"].okendo-loading [data-spinner="okendo"] {
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding: 40px 20px;
}

/* Hide template element always */
[data-component="okendo-reviews"] template {
  display: none !important;
}

/* Smooth transition when content appears */
[data-component="okendo-reviews"].okendo-loaded>*:not([data-spinner="okendo"]):not(template) {
  animation: okendoFadeIn 0.3s ease-in;
}

@keyframes okendoFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   CSS THEME SYSTEM - SIMPLE OVERRIDES
   ======================================== */

/* COFFEE THEME - Dark Style */
[data-theme="coffee"] [data-style="dark"],
[data-theme="coffee"][data-style="dark"] {
  --brand--color--background: var(--_theme---coffee--600);
  --brand--color--foreground: var(--_theme---coffee--50);
  --brand--color--accent-foreground: var(--_theme---coffee--800);
  --brand--color--text-primary: var(--_theme---coffee--50);
  --brand--color--text-secondary: var(--_theme---coffee--200);
  --brand--color--text-muted: var(--_theme---coffee--400);
  --brand--color--text-inverse: var(--_theme---coffee--950);
  --brand--color--primary: white;
  --brand--color--primary-hover: var(--_theme---coffee--300);
  --brand--color--secondary: white;
  --brand--color--tertiary: var(--_theme---coffee--300);
  --brand--color--icons: var(--_theme---coffee--400);
  --brand--color--surface: var(--_theme---coffee--50);
  --brand--color--rating-star: white;
  --component--color--swiper-buttons-background: var(--_theme---coffee--400);
  --component--color--outline: var(--_theme---coffee--400);
  --component--color--radio: var(--_theme---coffee--400);
}

/* COFFEE THEME - Light Style */
[data-theme="coffee"] [data-style="light"],
[data-theme="coffee"][data-style="light"] {
  --brand--color--background: var(--_theme---coffee--25);
  --brand--color--foreground: var(--_theme---coffee--950);
  --brand--color--surface: var(--_theme---coffee--50);
  --brand--color--accent: var(--_theme---coffee--50);
  --brand--color--accent-foreground: var(--_theme---coffee--800);
  --brand--color--text-primary: var(--_theme---coffee--950);
  --brand--color--text-secondary: var(--_theme---coffee--800);
  --brand--color--text-muted: var(--_theme---coffee--600);
  --brand--color--text-inverse: white;
  --brand--color--primary: var(--_theme---coffee--600);
  --brand--color--secondary: var(--_theme---coffee--700);
  --brand--color--tertiary: var(--_theme---coffee--400);
  --brand--color--rating-star: var(--_theme---coffee--600);
  --brand--color--icons: var(--_theme---coffee--600);
}

/* MATCHA THEME */
[data-theme="matcha"] {
  --brand--color--primary: var(--_theme---matcha--600);
  --brand--color--primary-light: var(--_theme---matcha--100);
  --brand--color--primary-lighter: var(--_theme---matcha--100);
  --brand--color--primary-dark: var(--_theme---matcha--700);
  --brand--color--primary-foreground: white;
  --brand--color--primary-hover: var(--_theme---matcha--700);
  --brand--color--secondary: var(--_theme---matcha--700);
  --brand--color--secondary-light: var(--_theme---matcha--600);
  --brand--color--secondary-lighter: var(--_theme---matcha--500);
  --brand--color--secondary-dark: var(--_theme---matcha--800);
  --brand--color--secondary-foreground: white;
  --brand--color--secondary-hover: var(--_theme---matcha--800);
  --brand--color--tertiary: var(--_theme---matcha--700);
  --brand--color--tertiary-light: var(--_theme---matcha--300);
  --brand--color--tertiary-lighter: var(--_theme---matcha--200);
  --brand--color--tertiary-dark: var(--_theme---matcha--500);
  --brand--color--tertiary-foreground: white;
  --brand--color--tertiary-hover: var(--_theme---matcha--500);
  --brand--color--accent: var(--_theme---matcha--100);
  --brand--color--accent-foreground: var(--_theme---matcha--800);
  --brand--color--surface: var(--_theme---matcha--50);
  --brand--color--background: var(--_theme---matcha--50);
  --brand--color--foreground: var(--_theme---matcha--950);
  --brand--color--text-primary: var(--_theme---matcha--900);
  --brand--color--text-secondary: var(--_theme---matcha--800);
  --brand--color--text-muted: var(--_theme---matcha--600);
  --brand--color--text-inverse: white;
  --brand--color--cta-primary: var(--_theme---matcha--600);
  --brand--color--cta-primary-hover: var(--_theme---matcha--700);
  --brand--color--link: var(--_theme---matcha--600);
  --brand--color--link-hover: var(--_theme---matcha--700);
  --brand--color--border: var(--_theme---matcha--200);
  --brand--color--icons: var(--_theme---matcha--600);
  --brand--color--rating-star: var(--_theme---matcha--600);
  --component--color--swiper-buttons-background: var(--_theme---matcha--600);
  --component--color--outline: var(--_theme---matcha--600);
  --component--color--radio: var(--_theme---matcha--600);
}

/* MATCHA THEME - Dark Style */
[data-theme="matcha"] [data-style="dark"],
[data-theme="matcha"][data-style="dark"] {
  --brand--color--background: var(--_theme---matcha--600);
  --brand--color--foreground: var(--_theme---matcha--50);
  --brand--color--accent-foreground: var(--_theme---matcha--800);
  --brand--color--text-primary: var(--_theme---matcha--50);
  --brand--color--text-secondary: var(--_theme---matcha--200);
  --brand--color--text-muted: var(--_theme---matcha--400);
  --brand--color--text-inverse: var(--_theme---matcha--600);
  --brand--color--primary: white;
  --brand--color--primary-hover: var(--_theme---matcha--300);
  --brand--color--secondary: white;
  --brand--color--tertiary: var(--_theme---matcha--300);
  --brand--color--icons: var(--_theme---matcha--400);
  --brand--color--surface: var(--_theme---matcha--50);
  --brand--color--rating-star: white;
  --component--color--swiper-buttons-background: var(--_theme---matcha--400);
  --component--color--outline: var(--_theme---matcha--400);
  --component--color--radio: var(--_theme---matcha--400);
}

/* MATCHA THEME - Light Style */
[data-theme="matcha"] [data-style="light"],
[data-theme="matcha"][data-style="light"] {
  --brand--color--background: var(--_theme---matcha--25);
  --brand--color--foreground: var(--_theme---matcha--950);
  --brand--color--surface: var(--_theme---matcha--50);
  --brand--color--accent: var(--_theme---matcha--50);
  --brand--color--accent-foreground: var(--_theme---matcha--800);
  --brand--color--text-primary: var(--_theme---matcha--950);
  --brand--color--text-secondary: var(--_theme---matcha--800);
  --brand--color--text-muted: var(--_theme---matcha--600);
  --brand--color--text-inverse: white;
  --brand--color--primary: var(--_theme---matcha--600);
  --brand--color--secondary: var(--_theme---matcha--700);
  --brand--color--tertiary: var(--_theme---matcha--400);
  --brand--color--rating-star: var(--_theme---matcha--600);
  --brand--color--icons: var(--_theme---matcha--600);
}

/* COCOA THEME */
[data-theme="cocoa"] {
  --brand--color--primary: var(--_theme---cocoa--700);
  --brand--color--primary-light: var(--_theme---cocoa--100);
  --brand--color--primary-lighter: var(--_theme---cocoa--100);
  --brand--color--primary-dark: var(--_theme---cocoa--800);
  --brand--color--primary-foreground: white;
  --brand--color--primary-hover: var(--_theme---cocoa--800);
  --brand--color--secondary: var(--_theme---cocoa--800);
  --brand--color--secondary-light: var(--_theme---cocoa--700);
  --brand--color--secondary-lighter: var(--_theme---cocoa--600);
  --brand--color--secondary-dark: var(--_theme---cocoa--900);
  --brand--color--secondary-foreground: white;
  --brand--color--secondary-hover: var(--_theme---cocoa--900);
  --brand--color--tertiary: var(--_theme---cocoa--400);
  --brand--color--tertiary-light: var(--_theme---cocoa--300);
  --brand--color--tertiary-lighter: var(--_theme---cocoa--200);
  --brand--color--tertiary-dark: var(--_theme---cocoa--500);
  --brand--color--tertiary-foreground: white;
  --brand--color--tertiary-hover: var(--_theme---cocoa--500);
  --brand--color--accent: var(--_theme---cocoa--100);
  --brand--color--accent-foreground: var(--_theme---cocoa--800);
  --brand--color--surface: var(--_theme---cocoa--50);
  --brand--color--background: var(--_theme---cocoa--50);
  --brand--color--foreground: var(--_theme---cocoa--950);
  --brand--color--text-primary: var(--_theme---cocoa--950);
  --brand--color--text-secondary: var(--_theme---cocoa--800);
  --brand--color--text-muted: var(--_theme---cocoa--600);
  --brand--color--text-inverse: white;
  --brand--color--cta-primary: var(--_theme---cocoa--700);
  --brand--color--cta-primary-hover: var(--_theme---cocoa--800);
  --brand--color--link: var(--_theme---cocoa--700);
  --brand--color--link-hover: var(--_theme---cocoa--800);
  --brand--color--border: var(--_theme---cocoa--200);
  --brand--color--icons: var(--_theme---cocoa--700);
  --brand--color--rating-star: var(--_theme---cocoa--700);
  --component--color--swiper-buttons-background: var(--_theme---cocoa--700);
  --component--color--outline: var(--_theme---cocoa--700);
  --component--color--radio: var(--_theme---cocoa--700);
}

/* COCOA THEME - Dark Style */
[data-theme="cocoa"] [data-style="dark"],
[data-theme="cocoa"][data-style="dark"] {
  --brand--color--background: var(--_theme---cocoa--700);
  --brand--color--foreground: var(--_theme---cocoa--50);
  --brand--color--accent-foreground: var(--_theme---cocoa--800);
  --brand--color--text-primary: var(--_theme---cocoa--50);
  --brand--color--text-secondary: var(--_theme---cocoa--200);
  --brand--color--text-muted: var(--_theme---cocoa--400);
  --brand--color--text-inverse: var(--_theme---cocoa--600);
  --brand--color--primary: white;
  --brand--color--primary-hover: var(--_theme---cocoa--300);
  --brand--color--secondary: white;
  --brand--color--tertiary: var(--_theme---cocoa--300);
  --brand--color--icons: var(--_theme---cocoa--400);
  --brand--color--surface: var(--_theme---cocoa--50);
  --brand--color--rating-star: white;
  --component--color--swiper-buttons-background: var(--_theme---cocoa--400);
  --component--color--outline: var(--_theme---cocoa--400);
  --component--color--radio: var(--_theme---cocoa--400);
}

/* COCOA THEME - Light Style */
[data-theme="cocoa"] [data-style="light"],
[data-theme="cocoa"][data-style="light"] {
  --brand--color--background: var(--_theme---cocoa--25);
  --brand--color--foreground: var(--_theme---cocoa--950);
  --brand--color--surface: var(--_theme---cocoa--50);
  --brand--color--accent: var(--_theme---cocoa--50);
  --brand--color--accent-foreground: var(--_theme---cocoa--800);
  --brand--color--text-primary: var(--_theme---cocoa--950);
  --brand--color--text-secondary: var(--_theme---cocoa--800);
  --brand--color--text-muted: var(--_theme---cocoa--600);
  --brand--color--text-inverse: white;
  --brand--color--primary: var(--_theme---cocoa--700);
  --brand--color--secondary: var(--_theme---cocoa--800);
  --brand--color--tertiary: var(--_theme---cocoa--400);
  --brand--color--rating-star: var(--_theme---cocoa--700);
  --brand--color--icons: var(--_theme---cocoa--700);
}

/* CHAI THEME */
[data-theme="chai"] {
  --brand--color--primary: var(--_theme---chai--600);
  --brand--color--primary-light: var(--_theme---chai--200);
  --brand--color--primary-lighter: var(--_theme---chai--200);
  --brand--color--primary-dark: var(--_theme---chai--700);
  --brand--color--primary-foreground: white;
  --brand--color--primary-hover: var(--_theme---chai--700);
  --brand--color--secondary: var(--_theme---chai--700);
  --brand--color--secondary-light: var(--_theme---chai--600);
  --brand--color--secondary-lighter: var(--_theme---chai--500);
  --brand--color--secondary-dark: var(--_theme---chai--800);
  --brand--color--secondary-foreground: white;
  --brand--color--secondary-hover: var(--_theme---chai--800);
  --brand--color--tertiary: var(--_theme---chai--700);
  --brand--color--tertiary-light: var(--_theme---chai--300);
  --brand--color--tertiary-lighter: var(--_theme---chai--200);
  --brand--color--tertiary-dark: var(--_theme---chai--500);
  --brand--color--tertiary-foreground: white;
  --brand--color--tertiary-hover: var(--_theme---chai--500);
  --brand--color--accent: var(--_theme---chai--200);
  --brand--color--accent-foreground: var(--_theme---chai--800);
  --brand--color--surface: var(--_theme---chai--50);
  --brand--color--background: var(--_theme---chai--50);
  --brand--color--foreground: var(--_theme---chai--950);
  --brand--color--text-primary: var(--_theme---chai--950);
  --brand--color--text-secondary: var(--_theme---chai--800);
  --brand--color--text-muted: var(--_theme---chai--600);
  --brand--color--text-inverse: white;
  --brand--color--cta-primary: var(--_theme---chai--600);
  --brand--color--cta-primary-hover: var(--_theme---chai--700);
  --brand--color--link: var(--_theme---chai--600);
  --brand--color--link-hover: var(--_theme---chai--700);
  --brand--color--border: var(--_theme---chai--200);
  --brand--color--icons: var(--_theme---chai--600);
  --brand--color--rating-star: var(--_theme---chai--600);
  --component--color--swiper-buttons-background: var(--_theme---chai--600);
  --component--color--outline: var(--_theme---chai--600);
  --component--color--radio: var(--_theme---chai--600);
}

/* CHAI THEME - Dark Style */
[data-theme="chai"] [data-style="dark"],
[data-theme="chai"][data-style="dark"] {
  --brand--color--background: var(--_theme---chai--600);
  --brand--color--foreground: var(--_theme---chai--50);
  --brand--color--accent-foreground: var(--_theme---chai--800);
  --brand--color--text-primary: var(--_theme---chai--50);
  --brand--color--text-secondary: var(--_theme---chai--200);
  --brand--color--text-muted: var(--_theme---chai--400);
  --brand--color--text-inverse: var(--_theme---chai--600);
  --brand--color--primary: white;
  --brand--color--primary-hover: var(--_theme---chai--300);
  --brand--color--secondary: white;
  --brand--color--tertiary: var(--_theme---chai--300);
  --brand--color--icons: var(--_theme---chai--400);
  --brand--color--surface: var(--_theme---chai--50);
  --brand--color--rating-star: white;
  --component--color--swiper-buttons-background: var(--_theme---chai--400);
  --component--color--outline: var(--_theme---chai--400);
  --component--color--radio: var(--_theme---chai--400);
}

/* CHAI THEME - Light Style */
[data-theme="chai"] [data-style="light"],
[data-theme="chai"][data-style="light"] {
  --brand--color--background: var(--_theme---chai--25);
  --brand--color--foreground: var(--_theme---chai--950);
  --brand--color--surface: var(--_theme---chai--50);
  --brand--color--accent: var(--_theme---chai--50);
  --brand--color--accent-foreground: var(--_theme---chai--800);
  --brand--color--text-primary: var(--_theme---chai--950);
  --brand--color--text-secondary: var(--_theme---chai--800);
  --brand--color--text-muted: var(--_theme---chai--600);
  --brand--color--text-inverse: white;
  --brand--color--primary: var(--_theme---chai--600);
  --brand--color--secondary: var(--_theme---chai--700);
  --brand--color--tertiary: var(--_theme---chai--400);
  --brand--color--rating-star: var(--_theme---chai--600);
  --brand--color--icons: var(--_theme---chai--600);
}


/* CHICORY THEME */
[data-theme="chicory"] {
  --brand--color--primary: var(--_theme---chicory--600);
  --brand--color--primary-light: var(--_theme---chicory--200);
  --brand--color--primary-lighter: var(--_theme---chicory--200);
  --brand--color--primary-dark: var(--_theme---chicory--700);
  --brand--color--primary-foreground: white;
  --brand--color--primary-hover: var(--_theme---chicory--700);
  --brand--color--secondary: var(--_theme---chicory--700);
  --brand--color--secondary-light: var(--_theme---chicory--600);
  --brand--color--secondary-lighter: var(--_theme---chicory--500);
  --brand--color--secondary-dark: var(--_theme---chicory--800);
  --brand--color--secondary-foreground: white;
  --brand--color--secondary-hover: var(--_theme---chicory--800);
  --brand--color--tertiary: var(--_theme---chicory--700);
  --brand--color--tertiary-light: var(--_theme---chicory--300);
  --brand--color--tertiary-lighter: var(--_theme---chicory--200);
  --brand--color--tertiary-dark: var(--_theme---chicory--500);
  --brand--color--tertiary-foreground: white;
  --brand--color--tertiary-hover: var(--_theme---chicory--500);
  --brand--color--accent: var(--_theme---chicory--200);
  --brand--color--accent-foreground: var(--_theme---chicory--800);
  --brand--color--surface: var(--_theme---chicory--50);
  --brand--color--background: var(--_theme---chicory--50);
  --brand--color--foreground: var(--_theme---chicory--950);
  --brand--color--text-primary: var(--_theme---chicory--950);
  --brand--color--text-secondary: var(--_theme---chicory--800);
  --brand--color--text-muted: var(--_theme---chicory--600);
  --brand--color--text-inverse: white;
  --brand--color--cta-primary: var(--_theme---chicory--600);
  --brand--color--cta-primary-hover: var(--_theme---chicory--700);
  --brand--color--link: var(--_theme---chicory--600);
  --brand--color--link-hover: var(--_theme---chicory--700);
  --brand--color--border: var(--_theme---chicory--200);
  --brand--color--icons: var(--_theme---chicory--600);
  --brand--color--rating-star: var(--_theme---chicory--600);
  --component--color--swiper-buttons-background: var(--_theme---chicory--600);
  --component--color--outline: var(--_theme---chicory--600);
  --component--color--radio: var(--_theme---chicory--600);
}

/* CHICORY THEME - Dark Style */
[data-theme="chicory"] [data-style="dark"],
[data-theme="chicory"][data-style="dark"] {
  --brand--color--background: var(--_theme---chicory--600);
  --brand--color--foreground: var(--_theme---chicory--50);
  --brand--color--accent-foreground: var(--_theme---chicory--800);
  --brand--color--text-primary: var(--_theme---chicory--50);
  --brand--color--text-secondary: var(--_theme---chicory--200);
  --brand--color--text-muted: var(--_theme---chicory--400);
  --brand--color--text-inverse: var(--_theme---chicory--600);
  --brand--color--primary: white;
  --brand--color--primary-hover: var(--_theme---chicory--300);
  --brand--color--secondary: white;
  --brand--color--tertiary: var(--_theme---chicory--300);
  --brand--color--icons: var(--_theme---chicory--400);
  --brand--color--surface: var(--_theme---chicory--50);
  --brand--color--rating-star: white;
  --component--color--swiper-buttons-background: var(--_theme---chicory--400);
  --component--color--outline: var(--_theme---chicory--400);
  --component--color--radio: var(--_theme---chicory--400);
}

/* CHICORY THEME - Light Style */
[data-theme="chicory"] [data-style="light"],
[data-theme="chicory"][data-style="light"] {
  --brand--color--background: var(--_theme---chicory--25);
  --brand--color--foreground: var(--_theme---chicory--950);
  --brand--color--surface: var(--_theme---chicory--50);
  --brand--color--accent: var(--_theme---chicory--50);
  --brand--color--accent-foreground: var(--_theme---chicory--800);
  --brand--color--text-primary: var(--_theme---chicory--950);
  --brand--color--text-secondary: var(--_theme---chicory--800);
  --brand--color--text-muted: var(--_theme---chicory--600);
  --brand--color--text-inverse: white;
  --brand--color--primary: var(--_theme---chicory--600);
  --brand--color--secondary: var(--_theme---chicory--700);
  --brand--color--tertiary: var(--_theme---chicory--400);
  --brand--color--rating-star: var(--_theme---chicory--600);
  --brand--color--icons: var(--_theme---chicory--600);
}







/* COFFEE DARK THEME */
[data-theme="coffee-dark"] {
  --brand--color--primary: var(--_theme---coffee-dark--800);
  --brand--color--primary-light: var(--_theme---coffee-dark--100);
  --brand--color--primary-lighter: var(--_theme---coffee-dark--100);
  --brand--color--primary-dark: var(--_theme---coffee-dark--950);
  --brand--color--primary-foreground: white;
  --brand--color--primary-hover: var(--_theme---coffee-dark--950);
  --brand--color--secondary: var(--_theme---coffee-dark--800);
  --brand--color--secondary-light: var(--_theme---coffee-dark--700);
  --brand--color--secondary-lighter: var(--_theme---coffee-dark--600);
  --brand--color--secondary-dark: var(--_theme---coffee-dark--900);
  --brand--color--secondary-foreground: white;
  --brand--color--secondary-hover: var(--_theme---coffee-dark--900);
  --brand--color--tertiary: var(--_theme---coffee-dark--600);
  --brand--color--tertiary-light: var(--_theme---coffee-dark--300);
  --brand--color--tertiary-lighter: var(--_theme---coffee-dark--200);
  --brand--color--tertiary-dark: var(--_theme---coffee-dark--500);
  --brand--color--tertiary-foreground: white;
  --brand--color--tertiary-hover: var(--_theme---coffee-dark--500);
  --brand--color--accent: var(--_theme---coffee-dark--100);
  --brand--color--accent-foreground: var(--_theme---coffee-dark--800);
  --brand--color--surface: var(--_theme---coffee-dark--50);
  --brand--color--background: var(--_theme---coffee-dark--50);
  --brand--color--foreground: var(--_theme---coffee-dark--950);
  --brand--color--text-primary: var(--_theme---coffee-dark--950);
  --brand--color--text-secondary: var(--_theme---coffee-dark--800);
  --brand--color--text-muted: var(--_theme---coffee-dark--600);
  --brand--color--text-inverse: white;
  --brand--color--cta-primary: var(--_theme---coffee-dark--900);
  --brand--color--cta-primary-hover: var(--_theme---coffee-dark--950);
  --brand--color--link: var(--_theme---coffee-dark--900);
  --brand--color--link-hover: var(--_theme---coffee-dark--950);
  --brand--color--border: var(--_theme---coffee-dark--200);
  --brand--color--icons: var(--_theme---coffee-dark--900);
  --brand--color--rating-star: #ca5839;
  --component--color--swiper-buttons-background: var(--_theme---coffee-dark--900);
  --component--color--outline: var(--_theme---coffee-dark--900);
  --component--color--radio: var(--_theme---coffee-dark--900);
}

/* COFFEE DARK THEME - Dark Style */
[data-theme="coffee-dark"] [data-style="dark"],
[data-theme="coffee-dark"][data-style="dark"] {
  --brand--color--background: var(--_theme---coffee-dark--900);
  --brand--color--foreground: var(--_theme---coffee-dark--50);
  --brand--color--accent-foreground: var(--_theme---coffee-dark--800);
  --brand--color--text-primary: var(--_theme---coffee-dark--50);
  --brand--color--text-secondary: var(--_theme---coffee-dark--200);
  --brand--color--text-muted: var(--_theme---coffee-dark--400);
  --brand--color--text-inverse: var(--_theme---coffee-dark--800);
  --brand--color--primary: white;
  --brand--color--primary-hover: var(--_theme---coffee-dark--300);
  --brand--color--secondary: white;
  --brand--color--tertiary: var(--_theme---coffee-dark--300);
  --brand--color--icons: var(--_theme---coffee-dark--400);
  --brand--color--surface: var(--_theme---coffee-dark--50);
  --brand--color--rating-star: white;
  --component--color--swiper-buttons-background: var(--_theme---coffee-dark--400);
  --component--color--outline: var(--_theme---coffee-dark--400);
  --component--color--radio: var(--_theme---coffee-dark--400);
}

/* COFFEE DARK THEME - Light Style */
[data-theme="coffee-dark"] [data-style="light"],
[data-theme="coffee-dark"][data-style="light"] {
  --brand--color--background: var(--_theme---coffee-dark--25);
  --brand--color--foreground: var(--_theme---coffee-dark--950);
  --brand--color--surface: var(--_theme---coffee-dark--50);
  --brand--color--accent: var(--_theme---coffee-dark--50);
  --brand--color--accent-foreground: var(--_theme---coffee-dark--800);
  --brand--color--text-primary: var(--_theme---coffee-dark--950);
  --brand--color--text-secondary: var(--_theme---coffee-dark--800);
  --brand--color--text-muted: var(--_theme---coffee-dark--600);
  --brand--color--text-inverse: white;
  --brand--color--primary: var(--_theme---coffee-dark--900);
  --brand--color--secondary: var(--_theme---coffee-dark--800);
  --brand--color--tertiary: var(--_theme---coffee-dark--400);
  --brand--color--rating-star: var(--_theme---coffee-dark--900);
  --brand--color--icons: var(--_theme---coffee-dark--900);
}

/* MUSHROOM DARK THEME */
[data-theme="mushroom-dark"] {
  --brand--color--primary: var(--_theme---mushroom-dark--500);
  --brand--color--primary-light: var(--_theme---mushroom-dark--100);
  --brand--color--primary-lighter: var(--_theme---mushroom-dark--100);
  --brand--color--primary-dark: var(--_theme---mushroom-dark--600);
  --brand--color--primary-foreground: white;
  --brand--color--primary-hover: var(--_theme---mushroom-dark--600);
  --brand--color--secondary: var(--_theme---mushroom-dark--700);
  --brand--color--secondary-light: var(--_theme---mushroom-dark--600);
  --brand--color--secondary-lighter: var(--_theme---mushroom-dark--500);
  --brand--color--secondary-dark: var(--_theme---mushroom-dark--800);
  --brand--color--secondary-foreground: white;
  --brand--color--secondary-hover: var(--_theme---mushroom-dark--800);
  --brand--color--tertiary: var(--_theme---mushroom-dark--400);
  --brand--color--tertiary-light: var(--_theme---mushroom-dark--300);
  --brand--color--tertiary-lighter: var(--_theme---mushroom-dark--200);
  --brand--color--tertiary-dark: var(--_theme---mushroom-dark--500);
  --brand--color--tertiary-foreground: white;
  --brand--color--tertiary-hover: var(--_theme---mushroom-dark--500);
  --brand--color--accent: var(--_theme---mushroom-dark--50);
  --brand--color--accent-foreground: var(--_theme---mushroom-dark--800);
  --brand--color--surface: var(--_theme---mushroom-dark--50);
  --brand--color--background: var(--_theme---mushroom-dark--25);
  --brand--color--foreground: var(--_theme---mushroom-dark--950);
  --brand--color--text-primary: var(--_theme---mushroom-dark--950);
  --brand--color--text-secondary: var(--_theme---mushroom-dark--800);
  --brand--color--text-muted: var(--_theme---mushroom-dark--600);
  --brand--color--text-inverse: white;
  --brand--color--cta-primary: var(--_theme---mushroom-dark--500);
  --brand--color--cta-primary-hover: var(--_theme---mushroom-dark--600);
  --brand--color--link: var(--_theme---mushroom-dark--500);
  --brand--color--link-hover: var(--_theme---mushroom-dark--600);
  --brand--color--border: var(--_theme---mushroom-dark--200);
  --brand--color--icons: var(--_theme---mushroom-dark--500);
  --brand--color--rating-star: var(--_theme---mushroom-dark--500);
  --component--color--swiper-buttons-background: var(--_theme---mushroom-dark--500);
  --component--color--outline: var(--_theme---mushroom-dark--500);
  --component--color--radio: var(--_theme---mushroom-dark--500);
}

/* MUSHROOM DARK THEME - Dark Style */
[data-theme="mushroom-dark"] [data-style="dark"],
[data-theme="mushroom-dark"][data-style="dark"] {
  --brand--color--background: var(--_theme---mushroom-dark--500);
  --brand--color--foreground: var(--_theme---mushroom-dark--50);
  --brand--color--accent-foreground: var(--_theme---mushroom-dark--800);
  --brand--color--text-primary: var(--_theme---mushroom-dark--50);
  --brand--color--text-secondary: var(--_theme---mushroom-dark--200);
  --brand--color--text-muted: var(--_theme---mushroom-dark--400);
  --brand--color--text-inverse: var(--_theme---mushroom-dark--950);
  --brand--color--primary: white;
  --brand--color--primary-hover: var(--_theme---mushroom-dark--300);
  --brand--color--secondary: white;
  --brand--color--tertiary: var(--_theme---mushroom-dark--300);
  --brand--color--icons: var(--_theme---mushroom-dark--400);
  --brand--color--surface: var(--_theme---mushroom-dark--50);
  --brand--color--rating-star: white;
  --component--color--swiper-buttons-background: var(--_theme---mushroom-dark--400);
  --component--color--outline: var(--_theme---mushroom-dark--400);
  --component--color--radio: var(--_theme---mushroom-dark--400);
}

/* MUSHROOM DARK THEME - Light Style */
[data-theme="mushroom-dark"] [data-style="light"],
[data-theme="mushroom-dark"][data-style="light"] {
  --brand--color--background: var(--_theme---mushroom-dark--25);
  --brand--color--foreground: var(--_theme---mushroom-dark--950);
  --brand--color--surface: var(--_theme---mushroom-dark--50);
  --brand--color--accent: var(--_theme---mushroom-dark--50);
  --brand--color--accent-foreground: var(--_theme---mushroom-dark--800);
  --brand--color--text-primary: var(--_theme---mushroom-dark--950);
  --brand--color--text-secondary: var(--_theme---mushroom-dark--800);
  --brand--color--text-muted: var(--_theme---mushroom-dark--600);
  --brand--color--text-inverse: white;
  --brand--color--primary: var(--_theme---mushroom-dark--500);
  --brand--color--secondary: var(--_theme---mushroom-dark--700);
  --brand--color--tertiary: var(--_theme---mushroom-dark--400);
  --brand--color--rating-star: var(--_theme---mushroom-dark--500);
  --brand--color--icons: var(--_theme---mushroom-dark--500);
}

/* COFFEE DARK THEME - Button-specific override (base theme only) */
[data-theme="coffee-dark"] .button {
  --brand--color--primary: #ca5839;
  --brand--color--secondary: #9e3a30;
  --brand--color--cta-primary: #ca5839;
}

/* COFFEE DARK THEME - Dark Style Button Override */
[data-theme="coffee-dark"][data-style="dark"] .button,
[data-theme="coffee-dark"] [data-style="dark"] .button {
  --brand--color--primary: #ca5839;
  --brand--color--secondary: #9e3a30;
  --brand--color--cta-primary: #ca5839;
  background-color: white;
  background-image: none;
  color: var(--_theme---coffee-dark--950);
  border-color: white;
}

/* Base styles for 1680px and above */
.hero-image__desktop {
  pointer-events: none;
  width: auto;
  max-width: none;
  height: 100%;
  margin-right: -83px;
}

/* For viewports between 1440px and 1680px */
@media (min-width: 1440px) and (max-width: 1679px) {
  .hero-image__desktop {
    margin-right: -200px;
  }
}

/* Optional: For viewports below 1440px if you need adjustments */
@media (max-width: 1439px) {
  .hero-image__desktop {
    margin-right: -250px;
    /* Adjust this value as needed */
  }
}

[data-video-thumbnail],
[data-video-play-btn] {
  transition: opacity 0.3s;
}

[data-video-thumbnail][data-hidden],
[data-video-play-btn][data-hidden] {
  opacity: 0;
  pointer-events: none;
}

[data-video-component] .plyr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-video-component] .plyr__video-wrapper {
  height: 100%;
}

[data-video-component] video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Webflow Design Mode - Show ONLY Non-California Content */

/* Testimonial Gallery Swiper - Before Initialization */
html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-wrapper {
  display: flex;
  align-items: center;
  transition: none;
}

html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-slide {
  /* Based on slidesPerView: 1.4 and centeredSlides: true */
  width: calc(100% / 1.4);
  flex-shrink: 0;
  margin-right: 16px;
  /* spaceBetween value */
}

/* Center the active slide visually */
html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-wrapper {
  /* Center offset calculation: move left by half the difference between container and slide width */
  transform: translateX(calc((100% - (100% / 1.4)) / 2));
}

/* Responsive breakpoints matching your config */
@media (min-width: 992px) {
  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-slide {
    width: calc(100% / 1.2);
  }

  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-wrapper {
    transform: translateX(calc((100% - (100% / 1.2)) / 2));
  }
}

@media (min-width: 1280px) {
  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-slide {
    width: calc(100% / 1.4);
  }

  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-wrapper {
    transform: translateX(calc((100% - (100% / 1.4)) / 2));
  }
}

@media (min-width: 1440px) {
  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-slide {
    width: calc(100% / 1.8);
  }

  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-wrapper {
    transform: translateX(calc((100% - (100% / 1.8)) / 2));
  }
}

@media (min-width: 1680px) {
  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-slide {
    width: calc(100% / 2.3);
  }

  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-wrapper {
    transform: translateX(calc((100% - (100% / 2.3)) / 2));
  }
}

@media (min-width: 1800px) {
  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-slide {
    width: calc(100% / 2.8);
  }

  html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="slider"] .swiper-wrapper {
    transform: translateX(calc((100% - (100% / 2.8)) / 2));
  }
}

/* Optional: Hide navigation buttons before initialization */
html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="prev-button"],
html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="next-button"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Optional: Style pagination dots before initialization */
html.wf-design-mode [swiper="testimonial-gallery"]:not(.swiper-initialized) [swiper="pagination"] {
  opacity: 0.3;
}



/* Show everything statically in Webflow design mode */
html.wf-design-mode .review__component {
  opacity: 1 !important;
}

html.wf-design-mode .review__component .review_component-star,
html.wf-design-mode .review__component .reviews_content-wrapper {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  animation: none !important;
}


html.wf-design-mode .home-hero__image.cc-home.cc-pointer {
  pointer-events: none !important;
}

html.wf-design-mode .hero-content.cc-homepage.cc-pointer-none {
  pointer-events: all !important;
}

/* Testimonial Gallery Swiper - Before Initialization */
html.wf-design-mode [data-component="sticky-bar"] {
  transform: translate(0) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}