/** Shopify CDN: Minification failed

Line 1151:13 Expected identifier but found whitespace
Line 1151:14 Unexpected "var("

**/
:root {
  --cnd-white: #ffffff;
  --cnd-off-white: #fafafa;
  --cnd-light: #f5f5f5;
  --cnd-charcoal: #2d2d2d;
  --cnd-green: #2d4a3e;
  --cnd-green-dark: #1e3329;
  --cnd-muted: #6b6b6b;
  --cnd-border: #e5e5e5;
  --cnd-border-soft: #f0f0f0;
  --cnd-shadow: rgba(0, 0, 0, 0.08);
  --cnd-yellow: #ffd400;
  --cnd-yellow-deep: #f6c500;
  --hp-orange: #ef5b2e;
  --hp-pink: #e085ad;
  --hp-green-vivid: #85d60a;
  /* Active-slide accent for the mobile comparison-table swipe carousel.
     The comparison table (.cpc) uses the Headspace brand green as-is. */
  --slide-accent: var(--hp-green-vivid);
  --page-width: 1240px;
  --radius: 22px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background: var(--cnd-off-white);
  color: var(--cnd-charcoal);
  line-height: 1.5;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--cnd-charcoal);
  color: white;
  padding: 0.75rem 1rem;
  z-index: 1000;
}
.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 22px;
}
.button,
.shopify-payment-button__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--cnd-green);
  color: white;
  padding: 12px 20px;
  border: 1px solid var(--cnd-green);
  font-weight: 750;
  min-height: 46px;
  cursor: pointer;
}
.button--secondary {
  background: transparent;
  color: var(--cnd-charcoal);
  border-color: var(--cnd-border);
}
.button--tertiary {
  background: white;
  color: var(--cnd-charcoal);
  border-color: var(--cnd-border);
}
.button--secondary:hover {
  background: var(--cnd-light);
}
.button--with-arrow {
  gap: 0.55rem;
}
.button-arrow {
  display: inline-block;
  transition: transform 0.25s ease-out;
}
.button--with-arrow:hover .button-arrow,
.button--with-arrow:focus-visible .button-arrow {
  transform: translateX(4px);
}
.eyebrow {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--cnd-muted);
}
.h1,
.h2,
h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.02;
  margin: 0.2em 0;
}
.h1,
h1 {
  font-size: clamp(2.4rem, 7vw, 5.8rem);
}
.h2,
h2 {
  font-size: clamp(2rem, 4vw, 3.8rem);
}
.rte {
  color: var(--cnd-muted);
}
.announcement {
  background: var(--cnd-charcoal);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.55rem 1rem;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cnd-border);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 76px;
  gap: 18px;
}
.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  justify-self: start;
}
.nav {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  justify-self: center;
}
.nav a {
  font-weight: 750;
  font-size: 0.95rem;
}
.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  align-items: center;
}
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.icon-link:hover,
.icon-link:focus-visible {
  background: var(--cnd-light);
  color: var(--cnd-green);
}
/* Account menu — icon + dropdown ------------------------------ */
.account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.account-menu__trigger {
  cursor: pointer;
}
.account-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  padding: 14px 16px 12px;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px var(--cnd-shadow);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    pointer-events 0s linear 0.16s;
}
.account-menu:hover .account-menu__panel,
.account-menu:focus-within .account-menu__panel,
.account-menu.is-open .account-menu__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}
.account-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 240px;
  height: 12px;
  pointer-events: auto;
}
.account-menu__greeting {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cnd-muted, #6b6b6b);
}
.account-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.account-menu__list li a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cnd-charcoal);
  text-decoration: none;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.account-menu__list li a:hover,
.account-menu__list li a:focus-visible {
  background: var(--cnd-light);
  color: var(--cnd-green);
}
.account-menu__signout {
  display: block;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--cnd-border);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnd-green);
  text-decoration: none;
}
.account-menu__signout:hover,
.account-menu__signout:focus-visible {
  text-decoration: underline;
}
.cart-link__count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cnd-green);
  color: var(--cnd-white);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.01em;
  pointer-events: none;
}
.cart-link__count:empty {
  display: none;
}
.hero {
  padding: 62px 0 42px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: 30px;
  align-items: stretch;
}
.hero-copy {
  background: var(--cnd-off-white);
  color: var(--cnd-charcoal);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 64px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--cnd-border);
}
.hero-copy .rte {
  color: var(--cnd-muted);
  font-size: 1.1rem;
  max-width: 620px;
}
.hero-art {
  border-radius: var(--radius);
  background: linear-gradient(135deg, #e8e8e8, #fafafa);
  padding: 28px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cnd-border);
}
.bag-stack {
  position: relative;
  width: min(420px, 90%);
  height: 420px;
}
.bag {
  position: absolute;
  border: 2px solid var(--cnd-border);
  background: white;
  border-radius: 20px;
  padding: 30px 20px;
  width: 220px;
  height: 330px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.bag:before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 60px;
  height: 14px;
  border-radius: 99px;
  background: var(--cnd-border);
  transform: translateX(-50%);
}
.bag strong {
  font-size: 1.6rem;
  font-family: Georgia, "Times New Roman", serif;
  margin-top: 55px;
}
.bag span {
  color: var(--cnd-muted);
  font-weight: 700;
}
.bag-one {
  left: 20px;
  top: 42px;
  transform: rotate(-7deg);
}
.bag-two {
  right: 12px;
  bottom: 22px;
  background: var(--cnd-charcoal);
  color: white;
  transform: rotate(6deg);
}
.bag-two span {
  color: rgba(255, 255, 255, 0.6);
}
.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.trust-strip {
  padding: 18px 0;
  container-type: inline-size;
}
.trust-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border: 1px solid var(--cnd-border);
  border-radius: 18px;
  background: white;
  overflow: hidden;
  align-items: center;
}
.trust-card {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px;
  font-weight: 800;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-left: 1px solid var(--cnd-border);
}
.trust-card:first-child {
  border-left: none;
}
.trust-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-card__media img {
  max-width: clamp(56px, 24vw, var(--icon-max, 64px));
  max-height: clamp(56px, 24vw, var(--icon-max, 64px));
  width: auto;
  height: auto;
  display: block;
}
/* Mobile: full-bleed seamless banner with icons pushed to the edges */
@media (max-width: 767px) {
  .trust-strip {
    padding: 0;
    border-top: 1px solid var(--cnd-border);
    border-bottom: 1px solid var(--cnd-border);
    background: white;
  }
  .trust-grid {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0; /* override .page-width 22px side padding for true edge-to-edge */
  }
  .trust-card {
    padding: 4px;
  }
  .trust-card__media img {
    width: 100%;
    height: auto;
    max-width: clamp(72px, 26vw, var(--icon-max, 64px));
    max-height: clamp(72px, 26vw, var(--icon-max, 64px));
  }
}
.section {
  padding: 56px 0;
}
.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}
.section-header .rte {
  max-width: 620px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.category-card,
.product-card,
.story-card,
.quiz-card,
.footer-card {
  background: white;
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--cnd-shadow);
}
.category-card {
  min-height: 260px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
}
.category-card h3 {
  font-size: 1.5rem;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}
.category-card p {
  color: var(--cnd-muted);
  margin: 0.6rem 0 0;
}
.fake-image {
  aspect-ratio: 1.05;
  background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cnd-muted);
  font-weight: 800;
}
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  container-type: inline-size;
  container-name: product-card;
}
.product-card__media {
  background: var(--cnd-light);
}
.product-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-card__body > .badge-row {
  border-top: 1px solid var(--cnd-border-soft);
  padding-top: 18px;
}
.product-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.15;
  color: var(--cnd-charcoal);
}
.product-card__title a {
  color: inherit;
  text-decoration: none;
}
.product-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.product-card__title--overlay {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  color: var(--cnd-white);
  max-width: calc(100% - 28px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.product-card__media-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.price {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge {
  font-size: 0.75rem;
  font-weight: 850;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--cnd-off-white);
}
.roast-scale--compact .roast-scale__row--dots {
  gap: 4px;
}
.roast-scale--compact .roast-scale__dot {
  width: 11px;
  height: 11px;
  border-width: 1.25px;
}
.roast-scale--compact .roast-scale__dot.is-current {
  box-shadow: 0 0 0 2px var(--roast-ring-color);
}
.roast-meter__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cnd-muted);
}
.product-card__tapes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.product-card__media-wrap {
  position: relative;
}
.product-card__tapes--overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
}
.product-card__tapes--overlay .tape:nth-child(odd) {
  transform: rotate(-0.7deg);
}
.product-card__tapes--overlay .tape:nth-child(even) {
  transform: rotate(0.5deg);
  margin-left: 6px;
}
.tape {
  display: inline-block;
  background: var(--cnd-yellow);
  color: var(--cnd-charcoal);
  font-family: Inter, Arial, sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  padding: 5px 9px 6px;
  border-bottom: 2px solid var(--cnd-charcoal);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease;
}
.product-card:hover .tape {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
@keyframes tape-wobble-odd {
  0% {
    transform: rotate(-0.7deg) translateY(0);
  }
  30% {
    transform: rotate(-1.8deg) translateY(-1.5px);
  }
  60% {
    transform: rotate(-0.2deg) translateY(-2px);
  }
  100% {
    transform: rotate(-0.7deg) translateY(-2px);
  }
}
@keyframes tape-wobble-even {
  0% {
    transform: rotate(0.5deg) translateY(0);
  }
  30% {
    transform: rotate(1.6deg) translateY(-1.5px);
  }
  60% {
    transform: rotate(0deg) translateY(-2px);
  }
  100% {
    transform: rotate(0.5deg) translateY(-2px);
  }
}
.product-card:hover .tape:nth-child(odd) {
  animation: tape-wobble-odd 0.45s ease-out forwards;
}
.product-card:hover .tape:nth-child(even) {
  animation: tape-wobble-even 0.45s ease-out forwards;
  animation-delay: 0.04s;
}
@container product-card (max-width: 260px) {
  .tape {
    font-size: 0.5625rem;
    padding: 3px 6px 3px;
  }
  .product-card__tapes {
    gap: 3px;
  }
  .product-card__tapes--overlay {
    top: 9px;
    left: 9px;
    max-width: calc(100% - 18px);
  }
  .product-card__title--overlay {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    font-size: 1.05rem;
  }
}
@container product-card (max-width: 170px) {
  .tape {
    font-size: 0.5rem;
    padding: 2px 5px 3px;
    letter-spacing: 0.04em;
  }
  .product-card__tapes {
    gap: 2px;
  }
  .product-card__tapes--overlay {
    top: 7px;
    left: 7px;
    max-width: calc(100% - 14px);
  }
  .product-card__title--overlay {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    font-size: 0.9rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tape {
    transition: none;
  }
  .product-card:hover .tape {
    transform: translateY(-2px) !important;
  }
  .product-card:hover .tape:nth-child(odd) {
    animation: none;
    transform: translateY(-2px) rotate(-0.7deg) !important;
  }
  .product-card:hover .tape:nth-child(even) {
    animation: none;
    transform: translateY(-2px) rotate(0.5deg) !important;
  }
}
.product-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quiz {
  background: var(--cnd-off-white);
  color: var(--cnd-charcoal);
  border-radius: 0;
  padding: clamp(26px, 5vw, 56px);
  border: 1px solid var(--cnd-border);
}
.quiz .rte {
  color: var(--cnd-muted);
}
.quiz-layout {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 28px;
  align-items: center;
}
.quiz-card {
  background: white;
  color: var(--cnd-charcoal);
  padding: 22px;
  border: 1px solid var(--cnd-border);
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.quiz-option {
  border: 1px solid var(--cnd-border);
  padding: 14px;
  border-radius: 16px;
  background: white;
  cursor: pointer;
}
.quiz-option.is-active {
  background: var(--cnd-green);
  color: white;
}
.quiz-result {
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  background: var(--cnd-light);
}
/* ============================================================
   Coffee matcher — Rave-style layout
   ============================================================ */
.section-coffee-matcher {
  --cnm-bg: #f5f5f5;
  --cnm-accent: var(--cnd-yellow);
  --cnm-accent-deep: var(--cnd-yellow-deep);
  --cnm-heading-font: Georgia, "Times New Roman", serif;
  --cnm-radius-card: 14px;
  --cnm-radius-bar: 999px;
  --cnm-pad: clamp(20px, 4vw, 48px);
  padding: 0;
}
.section-coffee-matcher .quiz-wizard {
  background: var(--cnm-bg);
  color: var(--cnd-charcoal);
  padding: var(--cnm-pad) clamp(20px, 5vw, 80px) clamp(40px, 6vw, 96px);
  min-height: 60vh;
}
.section-coffee-matcher .quiz-wizard > * {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
}

.section-coffee-matcher .quiz-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--cnd-charcoal);
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.section-coffee-matcher .quiz-back-btn:hover {
  opacity: 0.6;
}
.section-coffee-matcher .quiz-back-btn:focus-visible {
  outline: 2px solid var(--cnd-charcoal);
  outline-offset: 4px;
}
.section-coffee-matcher .quiz-back-btn[hidden] {
  display: none;
}

.section-coffee-matcher .quiz-restart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  background: transparent;
  color: var(--cnd-charcoal);
  border: 0;
  padding: 12px 18px;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: opacity 160ms ease;
}
.section-coffee-matcher .quiz-restart-btn:hover {
  opacity: 0.6;
}
.section-coffee-matcher .quiz-restart-btn:focus-visible {
  outline: 3px solid var(--cnd-charcoal);
  outline-offset: 3px;
}

.section-coffee-matcher .quiz-progress {
  margin: 0 0 8px;
}
.section-coffee-matcher .quiz-progress[hidden] {
  display: none;
}
.section-coffee-matcher .quiz-progress__track {
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--cnm-radius-bar);
  overflow: hidden;
}
.section-coffee-matcher .quiz-progress__fill {
  height: 100%;
  width: 0;
  background: var(--cnm-accent);
  border-radius: inherit;
  transition: width 320ms ease;
}

.section-coffee-matcher .quiz-step-counter {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 clamp(28px, 4vw, 56px);
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cnd-charcoal);
}
.section-coffee-matcher .quiz-step-counter__sep {
  color: rgba(0, 0, 0, 0.45);
}

.section-coffee-matcher .quiz-step {
  display: none;
}
.section-coffee-matcher .quiz-step[data-active="true"] {
  display: block;
  animation: quiz-step-in 280ms ease both;
}
@keyframes quiz-step-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.section-coffee-matcher .quiz-step__prompt {
  margin: 0 auto 14px;
  text-align: center;
  font-family: var(--cnm-heading-font);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cnd-charcoal);
  max-width: 22ch;
}
.section-coffee-matcher .quiz-step__helper {
  text-align: center;
  color: var(--cnd-muted);
  margin: 0 auto 20px;
  font-size: 0.95rem;
  max-width: 56ch;
}

.section-coffee-matcher .quiz-step__option-counter {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 clamp(24px, 4vw, 48px);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: rgba(0, 0, 0, 0.25);
  font-weight: 400;
}
.section-coffee-matcher .quiz-step__option-counter-sep {
  margin: 0 2px;
  color: rgba(0, 0, 0, 0.18);
}

.section-coffee-matcher .quiz-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.section-coffee-matcher .quiz-options--pair {
  grid-template-columns: repeat(2, 1fr);
}
.section-coffee-matcher .quiz-options--trip {
  grid-template-columns: repeat(3, 1fr);
}

.section-coffee-matcher .quiz-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--cnd-white);
  border: 1.5px solid var(--cnd-charcoal);
  border-radius: var(--cnm-radius-card);
  padding: 24px 16px;
  cursor: pointer;
  text-align: center;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
  min-height: 100%;
}
.section-coffee-matcher .quiz-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--cnd-shadow);
}
.section-coffee-matcher .quiz-option.is-selected {
  background: var(--cnm-accent);
  border-color: var(--cnd-charcoal);
}
.section-coffee-matcher .quiz-option input:focus-visible + .quiz-option__label,
.section-coffee-matcher .quiz-option:focus-within {
  outline: 3px solid var(--cnd-charcoal);
  outline-offset: 3px;
}
.section-coffee-matcher .quiz-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1 / 1;
}
.section-coffee-matcher .quiz-option__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Roulette wheel ships as black-on-transparent. Paint it in the same blue as
   the continent outline assets (africa/asia/south-america.png) so the four
   origin-step icons sit on the same palette. Done via alpha-mode mask: only
   the wheel shape holds the colour, the rest stays transparent. */
.section-coffee-matcher .quiz-option__icon img[src*="roulette"] {
  -webkit-mask-image: url("/assets/roulette.png");
  mask-image: url("/assets/roulette.png");
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: #579bd3;
}
.section-coffee-matcher .quiz-option__label {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnd-charcoal);
  line-height: 1.3;
}

.section-coffee-matcher .quiz-step__nav--bottom {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.section-coffee-matcher .quiz-step__next-button {
  min-width: 220px;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 28px;
  font-size: 1rem;
  border: 2px solid var(--cnd-charcoal);
}
.section-coffee-matcher .quiz-step__next-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.section-coffee-matcher .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-coffee-matcher .quiz-result {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 auto;
}
.section-coffee-matcher .quiz-result__heading {
  margin: 0 auto 8px;
  text-align: center;
  font-family: var(--cnm-heading-font);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.section-coffee-matcher .quiz-result__rationale {
  text-align: center;
  color: var(--cnd-muted);
  margin: 0 auto 32px;
  max-width: 56ch;
}
.section-coffee-matcher .quiz-result__card {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 24px;
  align-items: center;
  margin: 0 auto 28px;
  background: var(--cnd-white);
  border: 2px solid var(--cnd-charcoal);
  border-radius: var(--cnm-radius-card);
  padding: 20px;
  max-width: 760px;
}
.section-coffee-matcher .quiz-result__card .product-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
}
.section-coffee-matcher .quiz-result__card .product-card__media-wrap::after {
  content: none;
}
  background: var(--cnd-light);
}
.section-coffee-matcher .quiz-result__card .product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-coffee-matcher .quiz-result__card .product-card__media--origin {
  padding: 16px;
}
.section-coffee-matcher
  .quiz-result__card
  .product-card__media--origin
  .cnd-country-outline {
  display: block;
  width: 100%;
  height: 100%;
}
.section-coffee-matcher
  .quiz-result__card
  .product-card__media--origin
  .cnd-country-outline__flag {
  filter: saturate(0.55) opacity(0.75);
}
.section-coffee-matcher .quiz-result__card .product-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-coffee-matcher .quiz-result__card h3 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
}
.section-coffee-matcher .quiz-result__desc {
  font-size: 0.9rem;
  color: var(--cnd-muted, #666);
  line-height: 1.5;
  margin: 0;
}
.section-coffee-matcher .quiz-result__card .product-card__footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-coffee-matcher .quiz-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.section-coffee-matcher .quiz-result__actions .button {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 2px solid var(--cnd-charcoal);
}

.section-coffee-matcher .quiz-empty {
  text-align: center;
  color: var(--cnd-muted);
  padding: 40px 20px;
}

.section-coffee-matcher .quiz-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 10vw, 140px) 20px;
  min-height: 40vh;
}
.section-coffee-matcher .quiz-loading[hidden] {
  display: none;
}
.section-coffee-matcher .quiz-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.section-coffee-matcher .quiz-loading__spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--cnm-accent, var(--cnd-yellow));
  border-right-color: var(--cnm-accent, var(--cnd-yellow));
  animation: quiz-spin 800ms linear infinite;
}
.section-coffee-matcher .quiz-loading__caption {
  margin: 0;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cnd-muted);
}
@keyframes quiz-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-coffee-matcher .quiz-step[data-active="true"] {
    animation: none;
  }
  .section-coffee-matcher .quiz-progress__fill,
  .section-coffee-matcher .quiz-option {
    transition: none;
  }
  .section-coffee-matcher .quiz-loading__spinner {
    animation: quiz-spin 1600ms linear infinite;
  }
}

@media (max-width: 989px) {
  .section-coffee-matcher .quiz-options {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 749px) {
  .section-coffee-matcher .quiz-options,
  .section-coffee-matcher .quiz-options--pair,
  .section-coffee-matcher .quiz-options--trip {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-coffee-matcher .quiz-step__prompt {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }
  .section-coffee-matcher .quiz-result__card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 479px) {
  .section-coffee-matcher .quiz-options,
  .section-coffee-matcher .quiz-options--pair,
  .section-coffee-matcher .quiz-options--trip {
    grid-template-columns: 1fr;
  }
  .section-coffee-matcher .quiz-step__next-button {
    min-width: 100%;
  }
}
.section-coffee-matcher .quiz-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
}
.section-coffee-matcher .quiz-progress__track {
  flex: 1 1 auto;
  height: 6px;
  background: var(--cnd-border);
  border-radius: 999px;
  overflow: hidden;
}
.section-coffee-matcher .quiz-progress__fill {
  height: 100%;
  width: 0;
  background: var(--cnd-green);
  border-radius: inherit;
  transition: width 240ms ease;
}
.section-coffee-matcher .quiz-progress__counter {
  font-size: 0.875rem;
  color: var(--cnd-muted);
  font-variant-numeric: tabular-nums;
}
.section-coffee-matcher .quiz-progress__sep {
  margin: 0 4px;
  color: var(--cnd-border);
}
.section-coffee-matcher .quiz-steps {
  position: relative;
}
.section-coffee-matcher .quiz-step {
  display: none;
}
.section-coffee-matcher .quiz-step[data-active="true"] {
  display: block;
  animation: quiz-step-in 240ms ease both;
}
@keyframes quiz-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.section-coffee-matcher .quiz-step__helper {
  color: var(--cnd-muted);
  margin: 0 0 20px;
}
.section-coffee-matcher .quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.section-coffee-matcher .quiz-options--pair {
  grid-template-columns: repeat(2, 1fr);
}
.section-coffee-matcher .quiz-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1.5px solid var(--cnd-border);
  border-radius: 16px;
  background: var(--cnd-white);
  padding: 16px;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
  position: relative;
}
.section-coffee-matcher .quiz-option:hover {
  border-color: var(--cnd-green);
}
.section-coffee-matcher .quiz-option.is-selected {
  border-color: var(--cnd-green);
  background: color-mix(in srgb, var(--cnd-green) 8%, white);
}
.section-coffee-matcher .quiz-option input:focus-visible + .quiz-option__label,
.section-coffee-matcher .quiz-option:focus-within {
  outline: 2px solid var(--cnd-green);
  outline-offset: 2px;
}
.section-coffee-matcher .quiz-option__label {
  font-weight: 500;
}
.section-coffee-matcher .quiz-option__helper {
  color: var(--cnd-muted);
  font-size: 0.875rem;
}
.section-coffee-matcher .quiz-empty {
  text-align: center;
  color: var(--cnd-muted);
  padding: 20px 0;
}
.section-coffee-matcher .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .section-coffee-matcher .quiz-step[data-active="true"] {
    animation: none;
  }
  .section-coffee-matcher .quiz-progress__fill,
  .section-coffee-matcher .quiz-option {
    transition: none;
  }
}
@media (max-width: 989px) {
  .section-coffee-matcher .quiz-options {
    grid-template-columns: repeat(3, 1fr);
  }
  .section-coffee-matcher .quiz-options--pair,
  .section-coffee-matcher .quiz-options--trip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 749px) {
  .section-coffee-matcher .quiz-options,
  .section-coffee-matcher .quiz-options--pair,
  .section-coffee-matcher .quiz-options--trip {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-coffee-matcher .quiz-step__prompt {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }
  .section-coffee-matcher .quiz-result__card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 479px) {
  .section-coffee-matcher .quiz-options,
  .section-coffee-matcher .quiz-options--pair,
  .section-coffee-matcher .quiz-options--trip {
    grid-template-columns: 1fr;
  }
  .section-coffee-matcher .quiz-step__next-button {
    min-width: 100%;
  }
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.split--one-third-two-thirds {
  grid-template-columns: 1fr 2fr;
}
.split--two-thirds-one-third {
  grid-template-columns: 2fr 1fr;
}
.story-card {
  --story-card-bg: var(--cnd-green);
  --story-card-heading-color: white;
  --story-card-body-color: white;
  --story-card-eyebrow-color: white;
  padding: 32px;
  background: var(--story-card-bg);
  color: var(--story-card-body-color);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.story-card h2 {
  color: var(--story-card-heading-color);
}
.story-card .eyebrow {
  color: var(--story-card-eyebrow-color);
}
.story-card .rte {
  color: color-mix(in srgb, var(--story-card-body-color) 80%, transparent);
}
.story-card__image {
  aspect-ratio: var(--story-card-img-aspect, auto);
  max-height: var(--story-card-img-max-h, none);
  overflow: hidden;
}
.story-card__image img {
  width: 100%;
  height: 100%;
  object-fit: var(--story-card-img-fit, cover);
  object-position: var(--story-card-img-position, center);
}
.story-card--overlay {
  position: relative;
  padding: 0;
  justify-content: flex-end;
}
.story-card--overlay .story-card__image {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  max-height: none;
}
.story-card--overlay .story-card__content {
  position: relative;
  z-index: 1;
  padding: 32px;
  max-width: 100%;
}
.subscription {
  background: var(--cnd-off-white);
  border-radius: 30px;
  padding: clamp(26px, 5vw, 52px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--cnd-border);
}
.subscription .button {
  background: var(--cnd-charcoal);
  color: white;
}

/* Subscription selector — PDP buy box (one-time vs subscribe) ----- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.subscription-selector {
  display: grid;
  gap: 12px;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cnd-border);
}
.subscription-selector__row {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.subscription-selector__row--mode {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.subscription-selector__row--cadence[hidden] {
  display: none;
}
.subscription-selector__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cnd-charcoal);
  letter-spacing: 0.02em;
}
.subscription-selector__cadence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.subscription-selector__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cnd-muted, #6b6b6b);
}
.subscription-selector__guest-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--cnd-muted, #6b6b6b);
}
.subscription-selector__guest-hint a {
  color: var(--cnd-green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.subscription-tile {
  position: relative;
  border: 1.5px solid var(--cnd-border);
  border-radius: 16px;
  background: white;
  padding: 14px 12px 14px;
  display: grid;
  justify-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 800;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.subscription-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.subscription-tile__input:focus-visible + .subscription-tile__name {
  outline: 2px solid var(--cnd-green);
  outline-offset: 4px;
  border-radius: 4px;
}
.subscription-tile__name {
  color: var(--cnd-charcoal);
  font-size: 0.95rem;
}
.subscription-tile__badge {
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--cnd-green);
  color: var(--cnd-white);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.subscription-tile--accent {
  border-color: var(--blend-color, var(--cnd-green));
}
.subscription-tile:has(input:checked) {
  background: var(--blend-color, var(--cnd-green));
  border-color: var(--blend-color, var(--cnd-green));
}
.subscription-tile:has(input:checked) .subscription-tile__name {
  color: var(--cnd-white);
}
.subscription-tile:has(input:checked) .subscription-tile__badge {
  background: var(--cnd-white);
  color: var(--blend-color, var(--cnd-green));
}
.subscription-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cnd-shadow, rgba(0, 0, 0, 0.08));
}
.cadence-tile {
  position: relative;
  border: 1.5px solid var(--cnd-border);
  border-radius: 14px;
  background: white;
  padding: 12px 10px 14px;
  display: grid;
  justify-items: center;
  gap: 2px;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}
.cadence-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cadence-tile__name {
  color: var(--cnd-charcoal);
  font-size: 0.9rem;
  font-weight: 700;
}
.cadence-tile__hint {
  color: var(--blend-color, var(--cnd-green));
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cadence-tile:has(input:checked) {
  background: var(--cnd-light);
  border-color: var(--blend-color, var(--cnd-green));
}

/* Subscription overview page ------------------------------------- */
.subscription-hero {
  padding: clamp(40px, 7vw, 96px) 0;
}
.subscription-how__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 26px;
}
.subscription-how__step {
  background: white;
  border: 1px solid var(--cnd-border);
  border-radius: 22px;
  padding: 26px 22px;
  display: grid;
  gap: 8px;
}
.subscription-how__step-number {
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--cnd-green);
  letter-spacing: 0.04em;
}
.subscription-how__step h3 {
  margin: 0;
  font-size: 1.15rem;
}
.subscription-how__step .rte {
  margin: 0;
  color: var(--cnd-muted, #6b6b6b);
}
/* Subscription context (logged-in vs guest) ----------------------- */
.subscription-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px auto 0;
  padding: 18px 22px;
  border: 1.5px solid var(--cnd-border);
  border-radius: 16px;
  background: var(--cnd-light, #f7f5f0);
  box-shadow: 0 4px 0 var(--cnd-border);
}
.subscription-context--logged-in {
  background: var(--cnd-light, #f7f5f0);
  border-color: var(--cnd-green, #2d4a3e);
}
.subscription-context__copy {
  margin: 0;
  flex: 1 1 240px;
  font-size: 0.95rem;
  color: var(--cnd-charcoal);
}
.subscription-context__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
@media (max-width: 560px) {
  .subscription-context {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .subscription-context__cta {
    justify-content: center;
  }
}
.subscription-perks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.subscription-perks__card {
  background: var(--cnd-off-white, var(--cnd-light));
  border-radius: 18px;
  padding: 22px;
  display: grid;
  gap: 6px;
}
.subscription-perks__card h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--cnd-green);
}
.subscription-perks__card .rte {
  margin: 0;
  color: var(--cnd-charcoal);
  font-size: 0.95rem;
}

.collection-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items: start;
}
.collection-filter-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* Mobile-only "Refine" toggle that opens/closes the filter panel inline
   on narrow viewports. Hidden on desktop where the panel is always visible.
   Border-radius matches the panel (var(--radius)) so the two elements
   read as one continuous control when opened; the open state flattens
   the meeting edges and removes the gap. */
.filter-panel-trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  padding: 12px 18px;
  font: inherit;
  font-weight: 850;
  font-size: 0.95rem;
  color: var(--cnd-charcoal);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    border-radius 0.16s ease;
}
.filter-panel-trigger:hover,
.filter-panel-trigger:focus-visible {
  border-color: var(--cnd-charcoal);
}
.filter-panel-trigger:focus-visible {
  outline: 2px solid var(--cnd-green);
  outline-offset: 2px;
}
.filter-panel-trigger__label {
  flex: 1 1 auto;
}
.filter-panel-trigger__chevron {
  font-weight: 800;
  color: var(--cnd-muted);
  font-size: 1.1rem;
  line-height: 1;
}
.filter-panel-trigger__count {
  background: var(--cnd-light);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--cnd-green);
  font-variant-numeric: tabular-nums;
}
body.is-mobile-filter-open .filter-panel-trigger__chevron::before {
  content: "−";
}
body.is-mobile-filter-open .filter-panel-trigger__chevron {
  font-size: 0;
}
body.is-mobile-filter-open .filter-panel-trigger__chevron::before {
  font-size: 1.1rem;
}
.filter-panel {
  position: sticky;
  top: 96px;
  background: white;
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  /* Panel sizes to its content (the per-group max-height inside keeps
     individual lists bounded). max-height is just a safety net for
     the unlikely case where every group is expanded simultaneously. */
  max-height: calc(100vh - 96px - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cnd-border) transparent;
}
.filter-panel::-webkit-scrollbar {
  width: 8px;
}
.filter-panel::-webkit-scrollbar-track {
  background: transparent;
}
.filter-panel::-webkit-scrollbar-thumb {
  background: var(--cnd-border);
  border-radius: 999px;
  border: 2px solid var(--cnd-white);
  background-clip: padding-box;
}
.filter-panel::-webkit-scrollbar-thumb:hover {
  background: var(--cnd-muted);
  background-clip: padding-box;
  border: 2px solid var(--cnd-white);
}
.filter-panel__scroll {
  /* Plain padded wrapper now — no flex, no overflow. The per-group bodies
     have their own scroll; the panel only scrolls if everything
     together (uncommon) exceeds its max-height. */
  padding: 4px 6px 16px 20px;
}
.filter-group {
  border-top: 1px solid var(--cnd-border);
  padding: 14px 0;
}
/* The whole UX here: only the expanded group's value list scrolls, never
   the page. Each <details[open]> gets a fixed-height value container with
   its own scrollbar, so Notes/Origin/Roast can have hundreds of items
   without ever pushing the grid down. */
.filter-group[open] > .filter-group__body {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  margin-top: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--cnd-border) transparent;
}
.filter-group[open] > .filter-group__body::-webkit-scrollbar {
  width: 8px;
}
.filter-group[open] > .filter-group__body::-webkit-scrollbar-track {
  background: transparent;
}
.filter-group[open] > .filter-group__body::-webkit-scrollbar-thumb {
  background: var(--cnd-border);
  border-radius: 999px;
  border: 2px solid var(--cnd-white);
  background-clip: padding-box;
}
.filter-group[open] > .filter-group__body::-webkit-scrollbar-thumb:hover {
  background: var(--cnd-muted);
  background-clip: padding-box;
  border: 2px solid var(--cnd-white);
}
.filter-group:first-child {
  border-top: 0;
}
.filter-group summary {
  font-weight: 850;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.filter-group summary > span {
  flex: 1 1 auto;
}
.filter-group summary::-webkit-details-marker {
  display: none;
}
.filter-group summary::marker {
  content: "";
}
.filter-group[open] summary::after {
  content: "−";
  font-weight: 800;
  color: var(--cnd-muted);
}
.filter-group:not([open]) summary::after {
  content: "+";
  font-weight: 800;
  color: var(--cnd-muted);
}
.filter-group__active-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cnd-green);
  display: inline-block;
  flex: 0 0 auto;
}
.filter-group ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.filter-group a {
  color: var(--cnd-muted);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--product-grid-columns, 3), 1fr);
  gap: 18px;
}
.product-page {
  padding: 32px 0 64px;
}
.product-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.product-layout--colored {
  --blend-color: var(--cnd-green);
}
.product-layout--colored .product-gallery {
  border: 1.5px solid var(--blend-color);
  background: var(--cnd-white);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--blend-color) 8%, transparent);
}
.product-gallery {
  position: relative;
  background: var(--cnd-off-white);
  border-radius: var(--radius);
  border: 1px solid var(--cnd-border);
  overflow: hidden;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}
.product-gallery__slide {
  display: none;
  position: relative;
  flex: 1 1 auto;
}
.product-gallery__slide.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
}
.product-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  margin: 0 auto;
}
.product-gallery__slide--outline {
  background: var(--cnd-off-white);
}
.product-gallery__slide--origin {
  background-color: transparent;
}
.product-gallery__image--outline {
  display: block;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 82%;
  aspect-ratio: 1;
  color: var(--cnd-green);
  margin: 0 auto;
}
.product-gallery .cnd-country-outline {
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.4));
}
.product-gallery .cnd-country-outline__flag {
  filter: saturate(0.55) opacity(0.75);
}
.product-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  color: var(--cnd-charcoal);
  border: 1px solid var(--cnd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--cnd-shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.product-gallery__arrow:hover {
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 6px 18px var(--cnd-shadow);
  background: color-mix(in srgb, var(--cnd-charcoal) 4%, white);
}
.product-gallery__arrow--prev {
  left: 14px;
}
.product-gallery__arrow--next {
  right: 14px;
}
.product-gallery__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.product-gallery__dot {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.18s ease,
    width 0.18s ease;
}
.product-gallery__dot.is-active {
  background: var(--blend-color, var(--cnd-charcoal));
  width: 36px;
}

/* Hide tap controls on mobile and on touch-capable devices, where users swipe instead. */
@media (max-width: 900px) {
  .product-gallery__arrow,
  .product-gallery__dots {
    display: none;
  }
}
.product-gallery.is-touch .product-gallery__arrow,
.product-gallery.is-touch .product-gallery__dots {
  display: none;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.breadcrumbs {
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--cnd-charcoal);
}
.breadcrumbs a {
  color: var(--cnd-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumbs span {
  margin: 0 8px;
  color: var(--cnd-muted);
}
.product-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.12;
}
.price-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.price-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cnd-muted);
}
.product-info .price {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cnd-charcoal);
}
.price-block__weight {
  display: inline-flex;
  align-self: flex-start;
  align-items: baseline;
  gap: 8px;
  margin: -2px 0 0;
  padding: 6px 12px;
  background: var(--cnd-cream, #f6f1ea);
  border: 1.5px solid var(--cnd-border);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
}
.price-block__weight-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cnd-muted);
}
.price-block__weight-value {
  font-weight: 700;
  color: var(--cnd-charcoal);
}
.delivery-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 0;
  font-size: 0.82rem;
  color: var(--cnd-muted);
}
.delivery-line__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cnd-green);
}

.taste-card {
  border: 1.5px solid var(--cnd-charcoal);
  border-radius: 18px;
  padding: 18px 20px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--blend-color, var(--cnd-charcoal)) 3%, white),
    white
  );
  display: grid;
  gap: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.taste-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--cnd-shadow);
}
.taste-card__row {
  display: grid;
  grid-template-columns: 32px auto 1fr;
  align-items: center;
  gap: 12px;
}
.taste-card__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.taste-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.taste-card__label {
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap;
}
.taste-card__value {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.roast-scale {
  --roast-empty: #ffffff;
  --roast-empty-border: var(--cnd-charcoal);
  --roast-ring-color: var(--blend-color, var(--cnd-charcoal));
  --roast-t-1: #c8966a;
  --roast-t-2: #a86f43;
  --roast-t-3: #7a4925;
  --roast-t-4: #4a2912;
  --roast-t-5: #1f1108;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.roast-scale__row {
  display: inline-flex;
  align-items: center;
}
.roast-scale__row--dots {
  gap: 6px;
}
.roast-scale__row--anchors {
  justify-content: space-between;
  width: 96px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cnd-muted);
}
.roast-scale__dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--roast-empty-border);
  background: var(--roast-empty);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  flex: 0 0 auto;
}
.roast-scale__dot.is-filled[data-step="1"] {
  background: var(--roast-t-1);
  border-color: var(--roast-t-1);
}
.roast-scale__dot.is-filled[data-step="2"] {
  background: var(--roast-t-2);
  border-color: var(--roast-t-2);
}
.roast-scale__dot.is-filled[data-step="3"] {
  background: var(--roast-t-3);
  border-color: var(--roast-t-3);
}
.roast-scale__dot.is-filled[data-step="4"] {
  background: var(--roast-t-4);
  border-color: var(--roast-t-4);
}
.roast-scale__dot.is-filled[data-step="5"] {
  background: var(--roast-t-5);
  border-color: var(--roast-t-5);
}
.roast-scale__dot.is-current {
  box-shadow: 0 0 0 3px var(--roast-ring-color);
}
.roast-scale__dot.is-current::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cnd-white);
  pointer-events: none;
}
.roast-scale__label {
  font-weight: 700;
}

.product-description {
  position: relative;
  border-top: 1px solid var(--cnd-border);
  padding-top: 16px;
  margin-top: 2px;
}
.product-description__body {
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cnd-charcoal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.6em;
  transition: max-height 0.3s ease;
}
.product-description.is-expanded .product-description__body {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  max-height: 1200px;
  overflow: visible;
}
.product-description__toggle {
  margin-top: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--cnd-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.product-description__toggle[hidden] {
  display: none;
}
.product-description__details {
  display: none;
  margin-top: 14px;
}
.product-description.is-expanded .product-description__details {
  display: block;
}
.product-description__detail-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px dashed var(--cnd-border);
}
.product-description__detail-label {
  flex: 0 0 auto;
  min-width: 90px;
  font-weight: 800;
  font-size: 0.95rem;
}
.product-description__detail-value {
  font-weight: 700;
  font-size: 0.95rem;
}

.selector-wrapper {
  margin: 6px 0 4px;
}
.selector-label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.selector-label__value {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
}
.selector-wrapper select,
.quantity-input,
.newsletter input {
  width: 100%;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  padding: 12px 14px;
  background: white;
}

.variant-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.variant-tile {
  position: relative;
  border: 1.5px solid var(--cnd-border);
  border-radius: 16px;
  background: white;
  padding: 18px 14px 22px;
  display: grid;
  justify-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 850;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.variant-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.variant-tile__input:focus-visible + .variant-tile__name {
  outline: 2px solid var(--cnd-green);
  outline-offset: 4px;
  border-radius: 4px;
}
.variant-tile__name {
  color: var(--cnd-charcoal);
  font-size: 0.95rem;
}
.variant-tile__pill {
  position: absolute;
  top: -9px;
  right: -6px;
  background: var(--cnd-green-dark);
  color: var(--cnd-white);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--cnd-charcoal);
  white-space: nowrap;
  transform: rotate(3deg);
  box-shadow: 0 2px 0 var(--cnd-charcoal);
}
.variant-tiles.has-blend-color .variant-tile.is-selected .variant-tile__pill {
  background: var(--blend-color);
  border-color: var(--blend-color);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--blend-color) 70%, black);
}
.variant-tile__pill--free-shipping {
  background: #2d4a3e;
  color: white;
}
.variant-tile.is-selected {
  background: var(--blend-color, var(--cnd-green));
  border-color: var(--blend-color, var(--cnd-green));
}
.variant-tile.is-selected .variant-tile__name {
  color: var(--cnd-white);
}
.variant-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cnd-shadow);
}

.buy-buttons {
  display: grid;
  gap: 10px;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cnd-border);
}
.purchase-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.quantity-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cnd-charcoal);
  border-radius: 999px;
  background: white;
  overflow: hidden;
  height: 54px;
}
.quantity-stepper__btn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 100%;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cnd-charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.quantity-stepper__btn:hover {
  background: var(--cnd-light);
}
.quantity-stepper__btn:focus-visible {
  outline: 2px solid var(--cnd-green);
  outline-offset: -3px;
}
.quantity-stepper__input {
  width: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
  height: 100%;
}
.quantity-stepper__input::-webkit-outer-spin-button,
.quantity-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.purchase-row__cta {
  width: 100%;
  border-radius: 999px;
  padding: 16px 22px;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.purchase-row__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--cnd-shadow);
}
.purchase-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 6px 10px;
  border-bottom: 1px dashed var(--cnd-border);
  margin-bottom: 2px;
}
.purchase-total__label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cnd-muted);
}
.purchase-total__value {
  font-size: 1.2rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--cnd-charcoal);
}
.buy-buttons__hint {
  font-size: 0.85rem;
  color: var(--cnd-muted);
  margin: 0;
  line-height: 1.5;
}
.buy-buttons__hint strong {
  color: var(--cnd-charcoal);
}

.meta-tile {
  border: 1px solid var(--cnd-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--cnd-off-white);
}
.meta-tile strong {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cnd-muted);
  margin-bottom: 4px;
}
.meta-tile--origin {
  margin-top: 12px;
}
.footer {
  position: relative;
  background: var(--cnd-charcoal);
  color: white;
  padding: 56px 0 32px;
  margin-top: 64px;
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--cnd-gold, #c5a47e) 50%, transparent 100%);
  opacity: 0.7;
}
.footer::after {
  content: "";
  position: absolute;
  inset: 3px 0 0 0;
  background: radial-gradient(1200px 200px at 80% 0%, rgba(197, 164, 126, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-grid__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.footer-grid__menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
  align-content: start;
}
.footer-grid__menu h3 {
  margin: 0 0 12px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cnd-gold, #c5a47e);
  font-weight: 600;
}
.footer a,
.footer p {
  color: rgba(255, 255, 255, 0.72);
}
.footer__brand {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: white;
  transition: opacity 0.15s ease;
  max-width: 100%;
  line-height: 0;
}
.footer__brand:hover,
.footer__brand:focus-visible {
  opacity: 0.85;
}
.footer__brand-logo {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  line-height: 0;
}
.footer__brand-logo img,
.footer__brand-logo picture,
.footer__brand-logo picture > img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.footer__brand-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1;
  color: white;
}
.footer__tagline {
  margin: 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.55;
}
.footer__signup {
  margin-top: 6px;
}
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.footer__links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.12s ease;
}
.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--cnd-gold, #c5a47e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__links a[aria-current="page"] {
  color: white;
  font-weight: 700;
}
.footer-contact {
  font-style: normal;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px 22px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.footer-contact::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cnd-gold, #c5a47e), rgba(197, 164, 126, 0.2));
}
.footer-contact__label {
  margin: 0 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: white;
  font-weight: 400;
}
.footer-contact__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.5;
}
.footer-contact__icon {
  flex: 0 0 18px;
  margin-top: 3px;
  color: var(--cnd-gold, #c5a47e);
  opacity: 0.9;
}
.footer-contact__text {
  color: rgba(255, 255, 255, 0.78);
}
.footer-contact__link {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.12s ease;
}
.footer-contact__link:hover,
.footer-contact__link:focus-visible {
  color: var(--cnd-gold, #c5a47e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.newsletter {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination ul li {
  display: inline-flex;
  margin: 0;
}
/* Style the OUTER pagination item only (pill). Works with both
   <nav><ul><li><a/></li></ul></nav> markup AND with anchors/spans
   rendered as direct children of .pagination. */
.pagination > a,
.pagination > span,
.pagination li > a,
.pagination li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 9px 13px;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  background: white;
  color: var(--cnd-charcoal);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
/* Reset nested elements so they don't inherit a second pill border. */
.pagination a span,
.pagination a svg,
.pagination span a,
.pagination span svg {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
}
.pagination > a:hover,
.pagination li > a:hover {
  border-color: var(--cnd-charcoal);
  background: var(--cnd-off-white);
}
/* Active / current page. Cover all the attribute + class shapes
   Shopify's default_pagination has emitted across versions. */
.pagination > a[aria-current="page"],
.pagination > span[aria-current="page"],
.pagination > a.current,
.pagination > span.current,
.pagination > b.current,
.pagination li > a[aria-current="page"],
.pagination li > span[aria-current="page"],
.pagination li > a.current,
.pagination li > span.current,
.pagination li > b.current,
.pagination [aria-current="page"],
.pagination .current {
  border-color: var(--cnd-charcoal);
  background: var(--cnd-charcoal);
  color: #fff;
  font-weight: 800;
  cursor: default;
}
.pagination > a[aria-current="page"]:hover,
.pagination > a.current:hover,
.pagination > b.current:hover,
.pagination li > a[aria-current="page"]:hover,
.pagination li > a.current:hover,
.pagination li > b.current:hover,
.pagination [aria-current="page"]:hover,
.pagination .current:hover {
  border-color: var(--cnd-charcoal);
  background: var(--cnd-charcoal);
}
.mobile-menu-button {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  line-height: 1;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.mobile-menu-button:hover,
.mobile-menu-button:focus-visible {
  background: var(--cnd-light);
  color: var(--cnd-green);
}
.mobile-menu-button:focus-visible {
  outline: 2px solid var(--cnd-green);
  outline-offset: 2px;
}
.nav__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}
.nav__burger-line {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}
.mobile-menu-button.is-active .nav__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-button.is-active .nav__burger-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-button.is-active .nav__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.empty-state {
  background: white;
  border: 1px dashed var(--cnd-border);
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  color: var(--cnd-muted);
}
@media (max-width: 900px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }
  .nav {
    display: none;
  }
  .mobile-menu-button {
    display: inline-flex;
  }
  .header-actions {
    gap: 8px;
  }
  .hero-grid,
  .quiz-layout,
  .split,
  .split--one-third-two-thirds,
  .split--two-thirds-one-third,
  .subscription,
  .product-layout,
  .collection-layout {
    grid-template-columns: 1fr;
  }
  .hero-copy,
  .hero-art {
    min-height: auto;
  }
  .card-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .filter-panel,
  .product-info {
    position: static;
  }
  .section-header {
    display: block;
  }
  .bag-stack {
    height: 320px;
  }
  .bag {
    width: 180px;
    height: 270px;
  }
  .product-gallery {
    min-height: 380px;
  }
  .taste-card__row {
    gap: 10px;
  }
  .quantity-stepper {
    height: 50px;
  }
  .quantity-stepper__btn {
    width: 36px;
  }
}
@media (max-width: 560px) {
  .page-width {
    padding: 0 16px;
  }
  .card-grid,
  .product-grid,
  .quiz-options,
  .footer-grid,
  .footer-grid__menu {
    grid-template-columns: 1fr;
  }
  .product-grid--scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-bottom: 4px;
  }
  .product-grid--scroll::-webkit-scrollbar {
    display: none;
  }
  .product-grid--scroll > .product-card,
  .product-grid--scroll > .product-card-cnd,
  .product-grid--scroll > article {
    flex: 0 0 75%;
    min-width: 0;
    scroll-snap-align: start;
    margin: 0;
  }
  .hero {
    padding-top: 28px;
  }
  .newsletter {
    display: grid;
  }
  .header-inner {
    min-height: 64px;
  }
  .nav {
    max-height: calc(100vh - 105px);
  }
  .brand {
    font-size: 1.15rem;
  }
  .bag-stack {
    height: 280px;
  }
  .bag {
    width: 165px;
    height: 245px;
    padding: 22px 16px;
  }
  .hero-copy {
    padding: 26px;
  }
  .section {
    padding: 38px 0;
  }
  .product-info {
    padding: 20px;
  }
  .purchase-row {
    grid-template-columns: 1fr;
  }
  .quantity-stepper {
    width: 100%;
    justify-content: space-between;
  }
  .quantity-stepper__input {
    flex: 1;
    width: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .product-grid--scroll {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      overflow: visible;
      gap: 12px;
    }
    .product-grid--scroll > .product-card,
    .product-grid--scroll > .product-card-cnd,
    .product-grid--scroll > article {
      flex: none;
      min-width: 0;
    }
  }
}
/* Homepage sections */
.promo-grid {
  background: var(--cnd-off-white);
  padding-block: var(--promo-grid-padding, 0);
}
.promo-grid__inner {
  display: grid;
  grid-template-columns: var(--promo-grid-col-1, 1fr) var(
      --promo-grid-col-2,
      1fr
    );
  /* The 2-col desktop layout looks best flush — the off-white section bg would
     otherwise show as a vertical strip between the two card backgrounds. Mobile
     keeps a small gap to visually separate stacked cards (overridden below). */
  gap: 0;
}
/* When the section asks for 3 or 4 columns, override the 2-col vars */
.promo-grid[style*="--promo-grid-cols: 3"] .promo-grid__inner {
  grid-template-columns: repeat(3, 1fr);
}
.promo-grid[style*="--promo-grid-cols: 4"] .promo-grid__inner {
  grid-template-columns: repeat(4, 1fr);
}
.promo-grid[style*="--promo-grid-cols: 1"] .promo-grid__inner {
  grid-template-columns: 1fr;
}

/* Promo card — wraps a static panel or a slider with caption + layout overrides */
.promo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  /* Explicitly stretch to fill the grid cell so both cards in a row share
     the same height — grid's default `align-self: stretch` doesn't propagate
     to flex containers in some engines when they have content-sized children. */
  height: 100%;
}
.promo-card__media {
  position: relative;
  overflow: hidden;
  min-height: var(--promo-card-min-h, 420px);
  flex: 1;
  display: flex;
  border: 1px solid var(--cnd-border);
}
.promo-card--ar-16-9 .promo-card__media {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.promo-card--ar-4-3 .promo-card__media {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.promo-card--ar-3-4 .promo-card__media {
  aspect-ratio: 3 / 4;
  min-height: 0;
}
.promo-card--ar-1-1 .promo-card__media {
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.promo-card--ar-21-9 .promo-card__media {
  aspect-ratio: 21 / 9;
  min-height: 0;
}
.promo-card--ar-9-16 .promo-card__media {
  aspect-ratio: 9 / 16;
  min-height: 0;
}

.promo-card--valign-top .promo-card__media {
  align-items: flex-start;
}
.promo-card--valign-center .promo-card__media {
  align-items: center;
}
.promo-card--valign-bottom .promo-card__media {
  align-items: flex-end;
}

/* Inside a promo card, the slider/panel must fill the media container end-to-end
   and drop the panel's own border (the card already provides one). */
.promo-card__media .promo-slider {
  flex: 1;
  width: 100%;
  /* The slider's default min-height: 420px constrains it inside the card,
     keeping the slider at 420px even when the card stretches taller to match
     the row's tallest item. Drop the min-height so the slider can grow. */
  min-height: 0;
}
.promo-card__media .promo-slider__viewport {
  width: 100%;
  height: 100%;
  /* Match the slider's min-height so the viewport doesn't shrink below it when
     the slide content is short, otherwise the slide bg + content collapse. */
  min-height: 420px;
  /* The viewport is a CSS grid containing the slide. Without an explicit row
     track, the row sizes to the slide's intrinsic height — which is exactly
     what we're trying to escape. Force the row to fill the viewport so the
     slide's `height: 100%` resolves to the full media height. */
  grid-template-rows: 1fr;
}
.promo-card__media .promo-slider__slide {
  width: 100%;
  height: 100%;
}
.promo-card__media .promo-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  /* Make the panel flex-grow so it stretches to the card's full height, just
     like the slider above. */
  flex: 1;
}

.promo-card__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 0;
  color: var(--promo-caption-color, var(--cnd-charcoal));
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}
.promo-card__caption-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}
.promo-card__caption-text {
  line-height: 1.4;
}
.promo-panel {
  --promo-panel-color: transparent;
  --promo-text-color: inherit;
  --promo-button-color: var(--cnd-green);
  --promo-button-text-color: white;
  min-height: 420px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: var(--promo-panel-color);
  background-image: linear-gradient(
    var(--promo-gradient-angle, 135deg),
    var(--promo-gradient-from, #e8e8e8),
    var(--promo-gradient-to, #fafafa)
  );
  color: var(--promo-text-color);
  border: 1px solid var(--cnd-border);
}
.promo-panel--has-color {
  background-image: none;
}
.promo-panel--has-image {
  background-color: transparent;
}
/* Keep the chosen background colour visible behind a contained image */
.promo-panel--show-bg.promo-panel--has-image {
  background-color: var(--promo-panel-color);
}
.promo-panel .button {
  background-color: var(--promo-button-color);
  border-color: var(--promo-button-color);
  color: var(--promo-button-text-color);
}
.promo-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--promo-img-fit, cover);
  opacity: 0.72;
  z-index: 0;
}
/* Gradient overlay (per-slide legibility wash).
   Stacks above the image and below .promo-panel__content, which already has
   z-index: 1 and later source order. */
.promo-panel__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.promo-panel__overlay--cream {
  background-image: linear-gradient(
    var(--promo-overlay-angle, 90deg),
    color-mix(
        in srgb,
        #faf5eb var(--promo-overlay-strength, 40%),
        transparent
      )
      0%,
    transparent 100%
  );
}
.promo-panel__overlay--dark {
  background-image: linear-gradient(
    var(--promo-overlay-angle, 90deg),
    transparent 0%,
    color-mix(
        in srgb,
        #000000 var(--promo-overlay-strength, 40%),
        transparent
      )
      100%
  );
}
/* Contained image: show the whole image, centred, on the background colour */
.promo-panel--img-contained img {
  object-fit: var(--promo-img-fit, contain);
  opacity: 1;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: var(--promo-img-max-w, 100%);
  max-height: 100%;
}
/* When an aspect ratio is set, size the contained image box to that ratio */
.promo-panel--img-ar img {
  width: var(--promo-img-max-w, 100%);
  height: auto;
  aspect-ratio: var(--promo-img-ar, auto);
}
/* Image alignment (start = left, end = right in LTR) */
.promo-panel--img-start img {
  object-position: left center;
}
.promo-panel--img-end img {
  object-position: right center;
}
/* Reposition a contained image to start/end of the panel */
.promo-panel--img-contained.promo-panel--img-start img {
  left: 0;
  right: auto;
  transform: translate(0, -50%);
}
.promo-panel--img-contained.promo-panel--img-end img {
  left: auto;
  right: 0;
  transform: translate(0, -50%);
}
.promo-panel__content {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, 56px);
  max-width: 620px;
}
/* When the left panel is the wider of the duo, shift its content right on
   desktop so the left edge aligns with the centred body content below
   (.page-width), instead of hugging the screen edge. The .promo-grid section
   itself is full-bleed, so without this the wider panel looks sparse. */
@media (min-width: 901px) {
  .promo-grid--wider-left
    .promo-grid__inner
    > .promo-card:first-child
    .promo-panel__content {
    padding-inline-start: max(
      clamp(24px, 4vw, 56px),
      calc((100vw - var(--page-width)) / 2 + 22px)
    );
    /* Lift the 620px cap so the sticker/CTA can use the full panel width
       now that the offset padding has eaten most of the column. The h2
       keeps its 10ch cap so the heading stays the same line-break shape. */
    max-width: none;
  }
}
.promo-panel h2 {
  font-size: clamp(2rem, 4vw, 4.6rem);
  max-width: 10ch;
}
.sticker {
  display: inline-flex;
  align-items: center;
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 7px 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

/* Promo slider (right column of the promo duo, also reusable in isolation) */
.promo-slider {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  /* Tell the browser we'll handle horizontal swipes ourselves so it doesn't
     eat the pointer stream as a possible page-scroll / tap-on-anchor gesture
     (which is why swipe-to-change-slide silently failed on Chrome mobile). */
  touch-action: pan-y;
}
.promo-slider__viewport {
  position: relative;
  flex: 1;
  display: grid;
}
.promo-slider__slide {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.promo-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
/* Theme editor: outline the slide whose block is currently selected in the
   inspector. Uses an inset box-shadow so it isn't clipped by overflow:hidden. */
.promo-slider__slide.is-block-selected {
  box-shadow: inset 0 0 0 3px #1f6feb;
}
.promo-slider--static .promo-slider__slide {
  opacity: 1;
  visibility: visible;
}
.promo-slider__slide .sticker {
  background: rgba(0, 0, 0, 0.2);
}
.promo-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--cnd-charcoal, #2d2d2d);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.promo-slider__arrow:hover,
.promo-slider__arrow:focus-visible {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.promo-slider__arrow--prev {
  left: 16px;
}
.promo-slider__arrow--next {
  right: 16px;
}
.promo-slider__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
}
.promo-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.promo-slider__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}
.promo-slider__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Hide tap controls on mobile and on touch-capable devices, where users swipe instead.
   Keep the dot indicators visible as progress hints. */
@media (max-width: 900px) {
  .promo-slider__arrow {
    display: none;
  }
}
.promo-slider.is-touch .promo-slider__arrow {
  display: none;
}

.shop-tiles {
  padding-bottom: 0;
}
.shop-tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.shop-tile {
  min-height: 260px;
  background: white;
  position: relative;
  overflow: hidden;
  color: var(--cnd-charcoal);
  display: flex;
  align-items: end;
  border: 1px solid var(--cnd-border);
}
.shop-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
.shop-tile:hover img {
  opacity: 1;
}
.shop-tile__overlay {
  position: relative;
  z-index: 1;
  padding: 24px;
  width: 100%;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.95));
}
.shop-tile h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  margin: 0;
}
.shop-tile span {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--cnd-green);
}
.brand-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: white;
  color: var(--cnd-charcoal);
}
.brand-benefits__media {
  min-height: 560px;
  background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
}
.brand-benefits__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-benefits__copy {
  padding: clamp(32px, 6vw, 78px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-benefits .rte {
  color: var(--cnd-muted);
}
.benefit-list {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.benefit-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: start;
  border-top: 1px solid var(--cnd-border);
  padding-top: 16px;
}
.benefit-item strong {
  color: var(--cnd-green);
}
.benefit-item span {
  color: var(--cnd-muted);
}
.testimonials {
  background: var(--cnd-off-white);
}
.testimonial-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  overflow: auto;
  padding-bottom: 4px;
}
.testimonial-card {
  min-width: 240px;
  background: white;
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 4px 16px var(--cnd-shadow);
}
.stars {
  letter-spacing: 0.08em;
  color: var(--cnd-green);
  font-weight: 900;
}
.testimonial-card p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}
.testimonial-card strong {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.feature-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: white;
  color: var(--cnd-charcoal);
}
.feature-band--image-right .feature-band__image {
  order: 2;
}
.feature-band__image {
  min-height: 430px;
  background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
}
.feature-band__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-band__copy {
  padding: clamp(30px, 6vw, 70px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.feature-band .rte {
  color: var(--cnd-muted);
  max-width: 620px;
}
.feature-band + .feature-band {
  border-top: 1px solid var(--cnd-border);
}
.cnd-coffee-story {
  padding-top: var(--cnd-cs-pt, 56px);
  padding-bottom: var(--cnd-cs-pb, 56px);
}
.cnd-coffee-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
.cnd-coffee-story--image-right .cnd-coffee-story__media {
  order: 2;
}
.cnd-coffee-story__media {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
}
.cnd-coffee-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cnd-coffee-story__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cnd-coffee-story__copy h2 {
  margin: 0;
}
.cnd-coffee-story__copy .rte {
  max-width: 56ch;
}
@media (max-width: 800px) {
  .cnd-coffee-story__grid {
    grid-template-columns: 1fr;
  }
  .cnd-coffee-story--image-right .cnd-coffee-story__media {
    order: 0;
  }
}
.faq-section {
  background: var(--cnd-off-white);
}
.faq-wrap {
  max-width: 900px;
}
.faq-list {
  border-top: 1px solid var(--cnd-border);
}
.faq-item {
  border-bottom: 1px solid var(--cnd-border);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 850;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:after {
  content: "+";
  font-weight: 900;
}
.faq-item[open] summary:after {
  content: "-";
}
.faq-item .rte {
  padding-top: 12px;
  max-width: 720px;
}
.social-strip {
  background: var(--cnd-light);
  padding-bottom: 34px;
}
.social-strip__inner {
  text-align: center;
}
.social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.social-tile {
  aspect-ratio: 1;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  color: var(--cnd-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid var(--cnd-border);
}
.social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer {
  margin-top: 0;
}
.product-card__media {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__media img,
.product-card__media .product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card__image--outline {
  width: 70%;
  height: 70%;
  padding: 0;
  color: var(--cnd-green);
  object-fit: contain;
}
.product-card__media--colored {
  padding: 16px;
}
.product-card__media--colored .product-card__image {
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
}
.product-card__media--origin {
  padding: 16px;
}
.product-card__media--origin .product-card__image--outline {
  width: 70%;
  height: 70%;
}
.product-card .cnd-country-outline {
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.4));
}
.product-card .cnd-country-outline__flag {
  filter: saturate(0.55) opacity(0.75);
}
.quick-add-form {
  margin-top: 10px;
}
.quick-add-form .button {
  width: 100%;
  min-height: 40px;
  padding: 9px 14px;
  font-size: 0.84rem;
}
.section--flush-bottom {
  padding-bottom: 0;
}
@media (max-width: 900px) {
  .promo-grid__inner {
    grid-template-columns: repeat(var(--promo-grid-cols-md, 2), 1fr) !important;
  }
  /* At tablet widths, the 420px desktop min-height leaves too much empty space
     and the bottom-aligned content looks orphaned. Shorten the min-height and
     centre the content vertically. */
  .promo-card__media {
    min-height: 360px;
  }
  .promo-card--valign-bottom .promo-card__media {
    align-items: center;
  }
  .promo-panel {
    min-height: 360px;
    align-items: center;
  }
  .promo-slider {
    min-height: 360px;
  }
  .brand-benefits,
  .feature-band {
    grid-template-columns: 1fr;
  }
  .feature-band--image-right .feature-band__image {
    order: 0;
  }
  .shop-tiles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonial-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .benefit-item {
    grid-template-columns: 1fr;
  }
  .social-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand-benefits__media,
  .feature-band__image {
    min-height: 320px;
  }
}
@media (max-width: 560px) {
  .promo-grid__inner {
    grid-template-columns: repeat(var(--promo-grid-cols-sm, 1), 1fr) !important;
    gap: 0;
  }
  /* On mobile, drop the min-height entirely so the card sizes to its content,
     and centre the content vertically instead of pinning it to the bottom. */
  .promo-card__media {
    min-height: 0;
  }
  .promo-card--valign-bottom .promo-card__media {
    align-items: center;
  }
  .promo-panel {
    min-height: 0;
    align-items: center;
  }
  .promo-slider {
    min-height: 0;
  }
  .shop-tiles__grid,
  .testimonial-row {
    grid-template-columns: 1fr;
  }
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Product page selectors */
.selector-label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
}
.selector-wrapper--icons select {
  display: none;
}
.grind-icon-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.grind-icon-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.grind-icon-card {
  border: 1px solid var(--cnd-border);
  border-radius: 18px;
  background: white;
  padding: 14px 10px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  font-weight: 850;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
.grind-icon-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--cnd-shadow);
}
.grind-icon-input:checked + .grind-icon-card,
.grind-icon-selector.has-blend-color
  .grind-icon-input:checked
  + .grind-icon-card {
  background: var(--blend-color, var(--cnd-green));
  border-color: var(--blend-color, var(--cnd-green));
  color: white;
}
.grind-icon-input:focus-visible + .grind-icon-card {
  outline: 2px solid var(--cnd-green);
  outline-offset: 3px;
}
.grind-icon-card__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grind-icon-card__icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.grind-icon-input:checked + .grind-icon-card .grind-icon-card__icon img {
  filter: brightness(0) invert(1);
}
.grind-icon-card__label {
  font-size: 0.86rem;
}
@media (max-width: 560px) {
  .grind-icon-selector {
    grid-template-columns: 1fr;
  }
  .grind-icon-card {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    padding: 12px 14px;
  }
  .grind-icon-card__icon {
    width: 34px;
    height: 34px;
  }
  .grind-icon-card__icon img {
    width: 34px;
    height: 34px;
  }
}

/* ------------------------------------------------------------
 * Navigation — primary nav with dropdowns and a mega menu slot
 * ------------------------------------------------------------ */
.nav {
  position: static;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.nav__item {
  position: relative;
}
.nav__primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 4px 6px;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  border-radius: 6px;
  line-height: 1;
}
.nav__toggle:hover,
.nav__toggle:focus-visible {
  color: var(--cnd-green);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
  font-size: 0.95rem;
  padding: 8px 2px;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--cnd-green);
}
.nav__item.is-current > .nav__link {
  color: var(--cnd-green);
}
.nav__caret {
  display: inline-flex;
  width: 10px;
  height: 10px;
  transition: transform 0.16s ease;
}
.nav__item.has-dropdown.is-open .nav__caret {
  transform: rotate(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .nav__item.has-dropdown:not([data-cnd-click-closed]):hover .nav__caret,
  .nav__item.has-dropdown:not([data-cnd-click-closed]):focus-within
    .nav__caret {
    transform: rotate(180deg);
  }
}
.nav__mega {
  position: fixed;
  top: 80px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(8px);
  width: min(var(--mega-max-width, var(--page-width)), calc(100vw - 32px));
  min-width: 640px;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px var(--cnd-shadow);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    pointer-events 0s linear 0.16s;
  z-index: 60;
}
.nav__item.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 1;
  pointer-events: auto;
}
.nav__item.has-dropdown:not([data-cnd-click-closed]):hover > .nav__mega,
.nav__item.has-dropdown:not([data-cnd-click-closed]):focus-within > .nav__mega,
.nav__item.has-dropdown.is-open > .nav__mega {
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    pointer-events 0s linear 0s;
  transform: translateX(-50%) translateY(0);
}
.nav__mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 28px;
  padding: 26px 22px;
}
.nav__mega-columns {
  min-width: 0;
}
.nav__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}
.nav__subgroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px 28px;
}
.nav__subgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.nav__subgroup-label {
  margin: 0;
  padding: 0 6px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cnd-muted);
}
.nav__subgroup-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav__subgroup-items--standalone {
  align-self: start;
}
.nav__sublist--leaves {
  margin-bottom: 18px;
}
.nav__sublink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 6px;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--cnd-charcoal);
  border-radius: 8px;
}
.nav__sublink--has-desc {
  gap: 4px;
  padding: 12px 6px 14px;
}
.nav__sublink-title {
  display: block;
}
.nav__sublink-desc {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--cnd-muted);
}
.nav__sublink:hover,
.nav__sublink:focus-visible {
  color: var(--cnd-green);
  background: var(--cnd-off-white);
}
.nav__mega-featured {
  background: var(--mega-accent, var(--cnd-off-white));
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 14px;
  min-width: 0;
  align-items: stretch;
}
.nav__mega-featured--image-right {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 20px;
}
.nav__mega-featured--image-bottom {
  grid-template-columns: minmax(0, 1fr);
}
.nav__mega-featured--text-only {
  grid-template-columns: minmax(0, 1fr);
  padding: 24px;
}
.nav__mega-featured__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.nav__mega-featured--image-bottom .nav__mega-featured__body {
  gap: 6px;
}
.nav__mega-featured__eyebrow {
  margin: 0;
  font-size: 0.7rem;
}
.nav__mega-featured__heading {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nav__mega-featured__copy {
  font-size: 0.9rem;
  color: var(--cnd-muted);
}
.nav__mega-featured__copy p {
  margin: 0;
}
.nav__mega-featured__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
  font-size: 0.9rem;
  color: var(--cnd-green);
  margin-top: 2px;
}
.nav__mega-featured__link:hover,
.nav__mega-featured__link:focus-visible {
  text-decoration: underline;
}
.nav__mega-featured__media {
  border-radius: 12px;
  overflow: hidden;
  background: var(--cnd-border-soft);
  align-self: stretch;
}
.nav__mega-featured--image-right .nav__mega-featured__media {
  aspect-ratio: 4 / 5;
}
.nav__mega-featured--image-bottom .nav__mega-featured__media {
  aspect-ratio: 16 / 9;
  order: 2;
}
.nav__mega-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nav__mega-inner--solo {
  grid-template-columns: minmax(0, 1fr);
}
.nav__mega-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cnd-white);
  background: var(--cnd-green);
  border-radius: var(--radius);
  transition: filter 0.16s ease;
}
.nav__mega-cta:hover,
.nav__mega-cta:focus-visible {
  filter: brightness(0.92);
}
@media (max-width: 1100px) {
  .nav__mega-featured--image-right {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav__mega-featured--image-right .nav__mega-featured__media {
    aspect-ratio: 16 / 9;
    order: 2;
  }
}
@media (max-width: 900px) {
  .site-header {
    position: sticky;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    justify-self: stretch;
    background: var(--cnd-white);
    border-top: 1px solid var(--cnd-border-soft);
    border-bottom: 1px solid var(--cnd-border);
    box-shadow: 0 14px 32px -16px var(--cnd-shadow);
    padding: 8px 0 16px;
    max-height: calc(100vh - 117px);
    overflow-y: auto;
    z-index: 55;
  }
  .site-header.is-menu-open .nav {
    display: block;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 22px;
  }
  .nav__item {
    border-bottom: 1px solid var(--cnd-border-soft);
  }
  .nav__item:last-child {
    border-bottom: 0;
  }
  .nav__primary {
    display: flex;
    width: 100%;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
  }
  .nav__link {
    flex: 1;
    padding: 14px 8px;
    font-size: 1rem;
  }
  .nav__toggle {
    padding: 12px 14px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
  }
  .nav__primary > .nav__toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 8px;
  }
  .nav__item.has-dropdown .nav__mega {
    display: none;
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 14px;
    width: auto;
    min-width: 0;
    max-height: none;
  }
  .nav__item.has-dropdown.is-open > .nav__mega {
    display: block;
    transform: none;
  }
  .nav__item.has-dropdown:not([data-cnd-click-closed]):hover > .nav__mega,
  .nav__item.has-dropdown:not([data-cnd-click-closed]):focus-within
    > .nav__mega {
    transform: none;
  }
  .nav__item.has-dropdown::after {
    display: none;
  }
  .nav__mega-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0 0 4px 16px;
    max-width: none;
  }
  .nav__mega-inner--solo {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav__sublist {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .nav__subgroups {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .nav__sublink {
    padding: 12px 8px 12px 16px;
    font-size: 1.05rem;
    border-radius: 0;
  }
  .nav__sublink-desc {
    font-size: 0.8rem;
  }
  .nav__mega-featured,
  .nav__mega-featured--image-right,
  .nav__mega-featured--image-bottom,
  .nav__mega-featured--text-only {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
    align-items: start;
  }
  .nav__mega-featured__media {
    max-width: 280px;
    aspect-ratio: 16 / 10;
  }
  .mobile-menu-button.is-active {
    color: var(--cnd-green);
  }
  .account-menu__panel {
    right: -8px;
    box-shadow: 0 14px 28px -14px var(--cnd-shadow);
  }
}
body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Cart page + cart drawer
   ========================================================================== */

.cart-page {
  padding-top: 36px;
  padding-bottom: 64px;
}

.cart-page__continue {
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--cnd-muted);
}

.cart-page__continue:hover {
  color: var(--cnd-charcoal);
}

.cart-form {
  margin-bottom: 22px;
}

.cart-page__items {
  display: grid;
  gap: 16px;
}

.cart-page__footer-section {
  padding-top: 0;
}

/* Empty state */

.cart-empty {
  background: white;
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-bottom: 36px;
  box-shadow: 0 2px 12px var(--cnd-shadow);
}

.cart-empty__icon {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: var(--cnd-off-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cnd-green);
}

.cart-empty__heading {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.cart-empty__body {
  margin: 0;
  color: var(--cnd-muted);
  max-width: 440px;
}

/* Recommendations block */

.cart-recommendations {
  margin-top: 40px;
}

.cart-recommendations__heading {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0 0 18px;
}

/* Line item */

.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cnd-border);
}

.cart-line:first-child {
  padding-top: 6px;
}

.cart-line:last-child {
  border-bottom: 0;
}

.cart-line__image {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: var(--cnd-light);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cnd-border);
}

.cart-line__image-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-line__image-fallback {
  color: var(--cnd-muted);
  font-weight: 800;
  font-size: 0.85rem;
}

.cart-line__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cart-line__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.cart-line__title a {
  color: var(--cnd-charcoal);
}

.cart-line__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-line__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  align-self: center;
  min-width: 96px;
}

.cart-line__unit-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cnd-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.cart-line__unit-price-amount {
  font-weight: 800;
  color: var(--cnd-charcoal);
}

.cart-line__unit-price-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnd-muted);
}

.cart-line__total-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.cart-line__total-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--cnd-muted);
}

.cart-line__total {
  font-weight: 850;
  font-size: 1.15rem;
  color: var(--cnd-charcoal);
  white-space: nowrap;
}

.cart-line--multi .cart-line__total {
  font-size: 1.3rem;
}

/* Hide the per-unit subline on single-quantity lines so we never show
   "£9.00 each" stacked above "£9.00 total" — visually identical and noisy. */
.cart-line:not(.cart-line--multi) .cart-line__unit-price {
  display: none;
}

.cart-line__variant {
  margin: 0;
  color: var(--cnd-muted);
  font-size: 0.9rem;
}

.cart-line__properties {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.cart-line__properties li {
  font-size: 0.85rem;
  color: var(--cnd-muted);
}

.cart-line__property-key {
  color: var(--cnd-charcoal);
  font-weight: 700;
}

.cart-line__subscription {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--cnd-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.cart-line__subscription-tag {
  background: var(--cnd-green);
  color: white;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 3px 8px;
}

.cart-line__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cart-line__controls .quantity-stepper {
  height: 42px;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  background: white;
}

.cart-line__controls .quantity-stepper__btn {
  width: 36px;
  height: 40px;
  border-radius: 999px;
}

.cart-line__controls .quantity-stepper__input {
  width: 40px;
  height: 40px;
  padding: 0;
  text-align: center;
  border: 0;
  background: transparent;
  font-weight: 800;
}

.cart-line__remove {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cnd-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-line__remove:hover {
  color: var(--cnd-charcoal);
}

/* When inside the drawer, tighten things up */

.cart-drawer__lines .cart-line {
  grid-template-columns: 64px 1fr;
  padding: 14px 0;
  gap: 12px;
}

.cart-drawer__lines .cart-line__image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
}

.cart-drawer__lines .cart-line__prices {
  grid-column: 2;
  align-items: flex-start;
  text-align: left;
}

.cart-drawer__lines .cart-line__total {
  font-size: 0.95rem;
}

/* Single-origin country outline in the cart line thumbnail.
   Renders the outline SVG centred on the origin's colour so it matches
   the product-card treatment. */
.cart-line__image--origin {
  padding: 8px;
  border: 1px solid var(--cnd-border);
}
.cart-line__image--origin .cnd-country-outline {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
.cart-line__image--origin .cnd-country-outline__flag {
  filter: saturate(0.55) opacity(0.75);
}
.cart-drawer__lines .cart-line__image--origin {
  padding: 4px;
}

/* Cart footer */

.cart-footer {
  background: white;
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  gap: 18px;
  box-shadow: 0 2px 12px var(--cnd-shadow);
}

.cart-cf-progress {
  display: grid;
  gap: 10px;
}

.cart-cf-progress__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--cnd-charcoal);
}

.cart-cf-progress__state {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cart-cf-progress__state[hidden] {
  display: none;
}

.cart-cf-progress__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cnd-green) 14%, white);
  color: var(--cnd-green);
  flex: 0 0 auto;
}

.cart-cf-progress__row strong {
  font-weight: 850;
}

.cart-cf-progress__text {
  line-height: 1.35;
}

.cart-cf-progress__bar {
  position: relative;
  height: 6px;
  background: var(--cnd-border-soft);
  border-radius: 999px;
  overflow: hidden;
}

.cart-cf-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(
    90deg,
    var(--cnd-green),
    color-mix(in srgb, var(--cnd-green) 70%, var(--cnd-yellow))
  );
  border-radius: 999px;
  transition: width 0.25s ease;
}

/* Discount */

.cart-discount__label {
  display: block;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.cart-discount__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.cart-discount__input {
  flex: 1;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  padding: 12px 16px;
  background: white;
  font: inherit;
}

.cart-discount__input:focus {
  outline: none;
  border-color: var(--cnd-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnd-green) 18%, transparent);
}

.cart-discount__apply {
  flex: 0 0 auto;
}

.cart-discount__applied {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cart-discount__applied li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--cnd-green) 8%, white);
  border: 1px solid color-mix(in srgb, var(--cnd-green) 18%, transparent);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cnd-green-dark);
}

.cart-discount__tag {
  letter-spacing: 0.02em;
}

.cart-discount__remove {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  color: var(--cnd-green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-discount__remove:hover {
  background: color-mix(in srgb, var(--cnd-green) 14%, transparent);
}

/* Summary */

.cart-summary {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--cnd-border);
  padding-top: 16px;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.cart-summary__row--subtotal {
  font-weight: 850;
  font-size: 1.1rem;
}

.cart-summary__row--discount {
  color: var(--cnd-green);
  font-weight: 700;
  font-size: 0.95rem;
}

.cart-summary__note {
  margin: 6px 0 0;
  color: var(--cnd-muted);
  font-size: 0.85rem;
}

/* Note + checkout */

.cart-checkout-form {
  display: grid;
  gap: 12px;
}

.cart-note__label {
  font-weight: 800;
  font-size: 0.9rem;
}

.cart-note__input {
  width: 100%;
  border: 1px solid var(--cnd-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: white;
  font: inherit;
  resize: vertical;
  min-height: 64px;
}

.cart-note__input:focus {
  outline: none;
  border-color: var(--cnd-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnd-green) 18%, transparent);
}

.cart-checkout {
  width: 100%;
}

.cart-footer__assurance {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--cnd-muted);
}

.cart-footer__assurance-icon {
  color: var(--cnd-green);
}

/* Two-column page layout on wider screens */

@media (min-width: 901px) {
  .cart-page .page-width {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
    align-items: start;
    gap: 36px;
  }
  .cart-page .section-header,
  .cart-empty,
  .cart-recommendations,
  .cart-form,
  .cart-page__footer-section {
    grid-column: 1 / -1;
  }
  .cart-page .section-header {
    grid-column: 1 / -1;
  }
  .cart-form {
    margin-bottom: 0;
  }
  .cart-page__footer-section {
    grid-column: 2 / 3;
    align-self: start;
    position: sticky;
    top: 96px;
  }
  .cart-page__footer-section .page-width {
    display: block;
    padding: 0;
  }
  .cart-page__footer-section .cart-footer {
    margin-top: 0;
  }
  .cart-recommendations {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.cart-drawer[hidden] {
  display: none;
}
.cart-drawer__empty[hidden],
.cart-drawer__lines[hidden],
.cart-drawer__footer[hidden],
.cart-page__items[hidden],
.cart-empty[hidden],
.cart-form[hidden],
.cart-cf-progress[hidden],
.cart-summary[hidden] {
  display: none;
}

.cart-drawer.is-open {
  pointer-events: auto;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.cart-drawer.is-open .cart-drawer__backdrop {
  opacity: 1;
}

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  background: var(--cnd-off-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -16px 0 38px rgba(0, 0, 0, 0.14);
}

.cart-drawer.is-open .cart-drawer__panel {
  transform: translateX(0);
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cnd-border);
  background: white;
}

.cart-drawer__heading-wrap {
  display: grid;
  gap: 2px;
}

.cart-drawer__title {
  margin: 0;
  font-size: 1.3rem;
}

.cart-drawer__count {
  color: var(--cnd-muted);
  font-weight: 700;
  font-size: 1rem;
  font-family: Inter, Arial, sans-serif;
}

.cart-drawer__close {
  background: transparent;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cnd-charcoal);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.cart-drawer__close:hover {
  background: var(--cnd-light);
  color: var(--cnd-green);
}

.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 20px 18px;
}

.cart-drawer__lines {
  display: grid;
}

.cart-drawer__empty {
  text-align: center;
  padding: 48px 12px;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.cart-drawer__empty p {
  margin: 0;
  color: var(--cnd-muted);
}

.cart-drawer__footer {
  border-top: 1px solid var(--cnd-border);
  background: white;
  padding: 16px 20px 20px;
  display: grid;
  gap: 10px;
}

.cart-drawer__totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
}

.cart-drawer__totals strong {
  font-size: 1.15rem;
  font-weight: 850;
}

.cart-drawer__tax-note {
  margin: 0;
  color: var(--cnd-muted);
  font-size: 0.78rem;
}

.cart-drawer__checkout {
  width: 100%;
}

.cart-drawer__view-cart {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cnd-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-drawer__view-cart:hover {
  color: var(--cnd-charcoal);
}

/* Cart live region (visually hidden) */

.cart-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Loading state on lines */

.cart-line[data-loading="true"] {
  opacity: 0.55;
  pointer-events: none;
}

body.cart-open {
  overflow: hidden;
}

/* Smaller screens */

@media (max-width: 900px) {
  .cart-line {
    grid-template-columns: 80px 1fr;
    gap: 14px;
  }
  .cart-line__image {
    width: 80px;
    height: 80px;
  }
  .cart-line__prices {
    grid-column: 2;
    align-self: start;
    align-items: flex-end;
  }
}

@media (max-width: 560px) {
  .cart-drawer__panel {
    width: 100%;
  }
  .cart-line__prices {
    align-items: flex-start;
  }
}

/* =========================================================================
   Headspace composite section (sections/cnd-headspace-hero.liquid)
   ========================================================================= */

.gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  /* If background-image isn't set (e.g. CSS gradient unsupported),
     fall back to the colour attribute so the text is still readable. */
  background-color: transparent;
}

.button--gradient {
  background: linear-gradient(90deg, #ff6a3d, #ff3d8a, #c93dff, #5e7cff);
  color: #fff;
  border: 0;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.button--gradient:hover,
.button--gradient:focus-visible {
  filter: brightness(1.05);
  color: #fff;
}

.section-headspace {
  position: relative;
  padding: 24px 0 0;
  overflow: hidden;
}

/* HERO --------------------------------------------------------------- */
.hp-hero {
  position: relative;
  --hp-hero-bg: var(--cnd-off-white);
  background-color: var(--hp-hero-bg);
  border-radius: var(--radius);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 56px);
  margin-bottom: 24px;
  overflow: hidden;
  isolation: isolate;
}
.hp-hero__backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.hp-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hp-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.hp-hero__eyebrow {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--cnd-muted);
}
.hp-hero__heading {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(2.8rem, 11vw, 8.5rem);
  margin: 0;
  text-transform: uppercase;
  white-space: pre-line;
}
.hp-hero__tagline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--cnd-charcoal);
  max-width: 28ch;
}
.hp-hero__body {
  max-width: 56ch;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--cnd-charcoal);
  margin: 0;
}
.hp-hero__body a[href="#inside-myco-formula"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hp-orange) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hp-orange) 30%, white);
  color: var(--cnd-charcoal);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}
.hp-hero__body a[href="#inside-myco-formula"]:hover,
.hp-hero__body a[href="#inside-myco-formula"]:focus-visible {
  background: color-mix(in srgb, var(--hp-orange) 22%, white);
  border-color: color-mix(in srgb, var(--hp-orange) 45%, white);
  text-decoration: none;
}
.hp-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.hp-hero__ctas .button--secondary {
  background: transparent;
  border-color: transparent;
  color: var(--cnd-muted);
  font-weight: 600;
  padding-inline: 8px;
}
.hp-hero__ctas .button--secondary:hover,
.hp-hero__ctas .button--secondary:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--cnd-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hp-hero__note {
  font-size: 0.9rem;
  color: var(--cnd-muted);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 0;
}
.hp-hero__img {
  position: absolute;
  z-index: 1;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.hp-hero__inner {
  z-index: 2;
}

/* FEATURED PRODUCT (themed highlight) ------------------------------- */
.hp-featured {
  --hp-featured-bg: #ee6a3a;
  --hp-featured-fg: #ffffff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  background-color: var(--hp-featured-bg);
  color: var(--hp-featured-fg);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 64px);
  margin: 0 auto 24px;
  max-width: var(--page-width);
}
.hp-featured--image-right .hp-featured__media {
  order: 2;
}
.hp-featured__media img,
.hp-featured__media a {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 8px);
}
.hp-featured__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 8px);
  background: rgba(255, 255, 255, 0.18);
}
.hp-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hp-featured__eyebrow {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  opacity: 0.85;
}
.hp-featured__heading {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin: 0;
  text-transform: uppercase;
}
.hp-featured__text {
  font-size: 1.05rem;
  max-width: 52ch;
}
.hp-featured__price {
  font-size: 1.25rem;
  font-weight: 750;
}
.hp-featured__cta {
  margin-top: 4px;
  background-color: var(--hp-featured-fg);
  color: var(--hp-featured-bg);
  border: 0;
}
.hp-featured__cta:hover,
.hp-featured__cta:focus-visible {
  filter: brightness(1.05);
  color: var(--hp-featured-bg);
}
@media (max-width: 749px) {
  .hp-hero__img--mobile-hidden {
    display: none;
  }
  .hp-featured {
    grid-template-columns: 1fr;
  }
  .hp-featured--image-right .hp-featured__media {
    order: 0;
  }
}

/* HOW IT WORKS ------------------------------------------------------- */
.hp-how {
  background: #f1ede5;
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  margin: 0 auto 24px;
  max-width: var(--page-width);
}
.hp-how__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hp-how__footer {
  font-size: 0.9rem;
  color: var(--cnd-muted);
}
.hp-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hp-how__step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hp-how__step-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  color: var(--cnd-charcoal);
}
.hp-how__step-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hp-how__step-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hp-how__step h3 {
  font-family: Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--cnd-charcoal);
}
.hp-how__step p {
  font-size: 0.95rem;
  margin: 0;
  color: var(--cnd-muted);
  line-height: 1.45;
}

/* MYCO --------------------------------------------------------------- */
.hp-myco {
  text-align: center;
  padding: clamp(40px, 5vw, 64px) 0 16px;
}
.hp-myco__header {
  max-width: 640px;
  margin: 0 auto 32px;
}
.hp-myco__header h2 {
  margin: 0 0 8px;
}
.hp-myco__header p {
  margin: 0;
}
.hp-myco__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: start;
}
.hp-myco__item {
  text-align: center;
}
.hp-myco__item img,
.hp-myco__placeholder {
  width: 130px;
  height: 130px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
}
.hp-myco__placeholder {
  border-radius: 50%;
  background: var(--cnd-light);
  color: var(--cnd-muted);
  font-family: Georgia, serif;
  font-size: 2.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.hp-myco__item h3 {
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  color: var(--cnd-charcoal);
}
.hp-myco__item p {
  font-size: 0.85rem;
  margin: 6px 0 0;
  color: var(--cnd-muted);
  max-width: 22ch;
  margin-inline: auto;
}

/* RITUALS ------------------------------------------------------------ */
.hp-rituals {
  text-align: center;
  padding: 32px 0 16px;
}
.hp-rituals__header {
  max-width: 640px;
  margin: 0 auto 28px;
}
.hp-rituals__header h2 {
  margin: 0 0 8px;
}
.hp-rituals__header p {
  margin: 0;
}
.hp-rituals__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hp-ritual {
  --hp-ritual-bg: #ee6a3a;
  --hp-ritual-fg: #ffffff;
  background: var(--hp-ritual-bg);
  color: var(--hp-ritual-fg);
  border-radius: var(--radius);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 280px;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.hp-ritual:hover,
.hp-ritual:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  color: var(--hp-ritual-fg);
}
.hp-ritual__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-ritual__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.hp-ritual__media {
  width: 180px;
  height: 240px;
  margin-bottom: 16px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
}
.hp-ritual__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hp-ritual h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--hp-ritual-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4em;
  width: 100%;
}
.hp-ritual p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--hp-ritual-fg);
  opacity: 0.95;
  flex: 1;
}
.hp-ritual__cta {
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--hp-ritual-fg);
}

/* SUBSCRIPTION STRIP (promotional band) ------------------------------- */
.hp-subscription {
  margin-top: 56px;
  padding: 0 0 48px;
}
.hp-subscription__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--cnd-green) 8%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--cnd-green) 18%, #ffffff);
  border-radius: var(--radius);
  padding: 22px 28px;
}
.hp-subscription__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.hp-subscription__title {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--cnd-charcoal);
}
.hp-subscription__msg {
  font-size: 0.95rem;
  color: var(--cnd-charcoal);
  opacity: 0.82;
}
.hp-subscription__link {
  margin: 0;
  white-space: nowrap;
  background: var(--cnd-green);
  border-color: var(--cnd-green);
  color: #ffffff;
}
.hp-subscription__link:hover,
.hp-subscription__link:focus-visible {
  background: var(--cnd-green-dark);
  border-color: var(--cnd-green-dark);
  color: #ffffff;
}

/* RESPONSIVE --------------------------------------------------------- */
@media (max-width: 960px) {
  .hp-how__steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hp-myco__grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 24px;
  }
  .hp-rituals__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .hp-myco__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-rituals__grid {
    grid-template-columns: 1fr;
  }
  .hp-how__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .hp-subscription__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ADAPTOGENICS STRIP -------------------------------------------------- */
.adapt-strip {
  text-align: center;
  padding: clamp(40px, 5vw, 64px) 0;
}
.adapt-strip__header {
  max-width: 680px;
  margin: 0 auto 32px;
}
.adapt-strip__header h2 {
  margin: 6px 0 10px;
}
.adapt-strip__header p {
  margin: 0;
}
.adapt-strip__group {
  margin-bottom: 32px;
}
.adapt-strip__group:last-child {
  margin-bottom: 0;
}
.adapt-strip__group-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cnd-muted);
  margin: 0 0 18px;
}
.adapt-strip__ingredients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  align-items: flex-start;
}
.adapt-strip__ingredient {
  text-align: center;
  flex: 0 1 150px;
}
.adapt-strip__ingredient img,
.adapt-strip__ingredient-placeholder {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}
.adapt-strip__ingredient-placeholder {
  border-radius: 50%;
  background: var(--cnd-light);
  color: var(--cnd-muted);
  font-family: Georgia, serif;
  font-size: 2.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.adapt-strip__ingredient h4 {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: var(--cnd-charcoal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
/* Legend swatch: small dot before the name in the donut colour so
   the adaptogenics strip acts as the key for the donut chart. */
.adapt-strip__ingredient--has-ink h4::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}
.adapt-strip__ingredient p {
  font-size: 0.82rem;
  margin: 6px 0 0;
  color: var(--cnd-muted);
  line-height: 1.4;
  max-width: 22ch;
  margin-inline: auto;
}
.adapt-strip__benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.adapt-strip__benefit {
  background: white;
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 1 240px;
}
.adapt-strip__benefit-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adapt-strip__benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.adapt-strip__benefit-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cnd-green, #2f7a4d);
  margin: 13px 0;
}
.adapt-strip__benefit h4 {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: var(--cnd-charcoal);
}
.adapt-strip__benefit p {
  font-size: 0.88rem;
  margin: 0;
  color: var(--cnd-muted);
  line-height: 1.45;
}

/* ADAPTOGENICS STRIP - responsive ------------------------------------- */
@media (max-width: 960px) {
  .adapt-strip__ingredient {
    flex-basis: 28%;
  }
  .adapt-strip__benefit {
    flex-basis: 45%;
  }
}
@media (max-width: 560px) {
  .adapt-strip__ingredient {
    flex-basis: 42%;
  }
  /* 2x2 compact grid instead of stacked full-width rows */
  .adapt-strip__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: stretch;
  }
  .adapt-strip__benefit {
    flex: initial;
    width: auto;
    max-width: none;
    padding: 14px 12px;
    gap: 6px;
    border-radius: 16px;
  }
  .adapt-strip__benefit-icon {
    width: 30px;
    height: 30px;
  }
  .adapt-strip__benefit h4 {
    font-size: 0.92rem;
  }
  .adapt-strip__benefit p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* SIGNUP FORM - footer --------------------------------------------------- */
.signup-form {
  flex-wrap: wrap;
}
.signup-form__consent {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 0.85em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}
.signup-form__consent input {
  margin: 3px 0 0;
  flex-shrink: 0;
}
.signup-form__cta {
  margin: 10px 0 0;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.72);
}
.signup-form__cta a {
  color: var(--cnd-gold, #c5a47e);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* HEADSPACE — WHY US ---------------------------------------------------- */
.hp-whyus {
  --hp-whyus-pt: 56px;
  --hp-whyus-pb: 56px;
  padding-top: var(--hp-whyus-pt);
  padding-bottom: var(--hp-whyus-pb);
}
.hp-whyus__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 18px;
}
.hp-whyus__header .eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
}
.hp-whyus__header h2 {
  margin: 8px 0 12px;
}
.hp-whyus__header .rte {
  margin: 0;
  color: var(--cnd-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Cards — left-aligned, modelled on .adapt-strip__benefit */
.hp-whyus__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}
.hp-whyus-card {
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 8px;
  flex: 0 1 240px;
}
.hp-whyus-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cnd-charcoal);
}
.hp-whyus-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hp-whyus-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hp-whyus-card h3 {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.45;
  color: var(--cnd-charcoal);
}
.hp-whyus-card p {
  font-size: 0.88rem;
  margin: 0;
  color: var(--cnd-muted);
  line-height: 1.45;
}

.hp-whyus__closing {
  text-align: center;
  margin: 24px auto 0;
  max-width: 640px;
  color: var(--cnd-muted);
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 560px) {
  /* 2x2 compact grid instead of stacked full-width rows */
  .hp-whyus__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: stretch;
  }
  .hp-whyus-card {
    flex: initial;
    padding: 14px 12px;
    gap: 6px;
    border-radius: 16px;
  }
  .hp-whyus-card__icon {
    width: 34px;
    height: 34px;
  }
  .hp-whyus-card h3 {
    font-size: 0.92rem;
    line-height: 1.35;
  }
  .hp-whyus-card p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* PRODUCT — COMPETITOR COMPARISON -------------------------------------- */
.cpc {
  --cpc-pt: 48px;
  --cpc-pb: 48px;
  padding-top: var(--cpc-pt);
  padding-bottom: var(--cpc-pb);
  position: relative;
}
.cpc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    110deg,
    var(--hp-orange),
    var(--hp-pink),
    var(--hp-green-vivid)
  );
}
.cpc > .page-width {
  padding-top: 8px;
}

/* Two-column header: heading/intro on left, lede card on right */
.cpc__header {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px 40px;
  align-items: start;
  margin-bottom: 36px;
}
.cpc__header-left h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
  color: var(--cnd-charcoal);
}
.cpc__header-left .rte {
  margin: 0;
  color: var(--cnd-muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* Lede card on the right column of the header.
   Subtle diagonal gradient — pink top-left fading to lime green
   bottom-right — echoes the wider Headspace brand palette. */
.cpc__lede {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hp-pink) 12%, white) 0%,
    color-mix(in srgb, var(--hp-pink) 4%, white) 35%,
    color-mix(in srgb, var(--hp-green-vivid) 10%, white) 100%
  );
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  padding: 22px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cpc__lede-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--hp-green-vivid) 14%, white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cnd-charcoal);
}
.cpc__lede-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.cpc__lede-body {
  flex: 1;
  min-width: 0;
}
.cpc__lede-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cnd-charcoal);
  margin: 0 0 6px;
}
.cpc__lede-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cnd-muted);
  margin: 0;
}

/* Stats row: pastel-tinted pill cards */
.cpc__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.cpc__stats-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.cpc__stats-card--mushroom {
  background: color-mix(in srgb, var(--hp-orange) 18%, white);
  border-color: color-mix(in srgb, var(--hp-orange) 22%, white);
}
.cpc__stats-card--extract {
  background: color-mix(in srgb, var(--hp-pink) 18%, white);
  border-color: color-mix(in srgb, var(--hp-pink) 22%, white);
}
.cpc__stats-card--brewed {
  background: color-mix(in srgb, var(--hp-green-vivid) 20%, white);
  border-color: color-mix(in srgb, var(--hp-green-vivid) 26%, white);
}
.cpc__stats-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--cnd-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cnd-charcoal);
  box-shadow: 0 0 0 1px var(--cnd-border-soft);
}
.cpc__stats-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.cpc__stats-card--mushroom .cpc__stats-card-icon {
  color: color-mix(in srgb, var(--hp-orange) 90%, var(--cnd-charcoal));
}
.cpc__stats-card--extract .cpc__stats-card-icon {
  color: color-mix(in srgb, var(--hp-pink) 90%, var(--cnd-charcoal));
}
.cpc__stats-card--brewed .cpc__stats-card-icon {
  color: color-mix(in srgb, var(--hp-green-vivid) 90%, var(--cnd-charcoal));
}
.cpc__stats-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cpc__stats-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cnd-charcoal);
}
.cpc__stats-card--mushroom .cpc__stats-value {
  color: color-mix(in srgb, var(--hp-orange) 80%, var(--cnd-charcoal));
}
.cpc__stats-card--extract .cpc__stats-value {
  color: color-mix(in srgb, var(--hp-pink) 80%, var(--cnd-charcoal));
}
.cpc__stats-card--brewed .cpc__stats-value {
  color: color-mix(in srgb, var(--hp-green-vivid) 90%, var(--cnd-charcoal));
}
.cpc__stats-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cnd-muted);
  line-height: 1.3;
}

/* Table */
.cpc__table {
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cpc__head {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--cnd-border);
}
.cpc__cell {
  padding: 18px 18px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--cnd-charcoal);
  border-right: 1px solid var(--cnd-off-white);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  text-align: center;
}
.cpc__cell:last-child {
  border-right: 0;
}
.cpc__cell--head {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cnd-muted);
  padding: 24px 16px;
  background: var(--cnd-off-white);
}
.cpc__cell--head .cpc__cell-head-inner {
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cpc__cell--ours.cpc__cell--head {
  background: color-mix(in srgb, var(--hp-pink) 5%, var(--cnd-off-white));
  color: var(--hp-orange);
}
.cpc__cell--head .cpc__cell-head-icon {
  width: 20px;
  height: 20px;
}
.cpc__cell--head a {
  color: inherit;
  text-decoration: none;
}

/* Headspace column: visible warm pink wash, fading from more saturated
   at the top of each cell to nearly white at the bottom. Gradient per
   cell so the column reads as a continuous vertical flow rather than a
   flat block. */
.cpc__row .cpc__cell--ours {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hp-pink) 8%, white) 0%,
    color-mix(in srgb, var(--hp-orange) 3%, white) 100%
  );
  font-weight: 600;
}
.cpc__row .cpc__cell--theirs {
  color: var(--cnd-muted);
}

/* Subtle mid-table divider after row 5 */
.cpc__row--theme-break + .cpc__row {
  border-top: 2px solid var(--cnd-border);
}

/* Row label with small icon */
.cpc__row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.cpc__row + .cpc__row {
  border-top: 1px solid var(--cnd-off-white);
}
.cpc__cell--label {
  font-weight: 600;
  color: var(--cnd-charcoal);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.cpc__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--cnd-charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cpc__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cpc__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cpc__label-text {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cnd-charcoal);
}

/* Highlight row class kept on the element for theming hooks (no visual
   treatment on the row itself — the Headspace column tint and the ✓
   badge in the winning cells carry the emphasis now). */
.cpc__row--highlight {
  position: relative;
}

/* "Not stated" pill */
.cpc__pill {
  display: inline-block;
  padding: 3px 14px;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  background: transparent;
  color: var(--cnd-muted);
  font-size: 0.88rem;
  font-style: italic;
}
.cpc__dash {
  color: var(--cnd-muted);
}

/* Footnote marker */
.cpc__note-mark {
  font-size: 0.78rem;
  color: var(--hp-green-vivid);
  margin-left: 4px;
  font-weight: 800;
  vertical-align: super;
  line-height: 0;
  display: inline-block;
}

/* Winner ✓ marker */
.cpc__cell--winner {
  font-weight: 700;
}
.cpc__winner-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--hp-green-vivid);
  margin-left: 6px;
  vertical-align: -2px;
  flex-shrink: 0;
}
.cpc__winner-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Single consolidated methodology note */
.cpc__notes {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--cnd-muted);
  line-height: 1.5;
}
.cpc__notes-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--hp-green-vivid);
}
.cpc__notes strong {
  color: var(--cnd-charcoal);
  font-weight: 700;
}
.cpc__checked {
  margin-top: 12px;
  padding: 0 4px;
  font-size: 0.8rem;
  color: var(--cnd-muted);
  font-style: italic;
}

/* Responsive */
@media (max-width: 1080px) {
  .cpc__cell {
    padding: 14px 12px;
    font-size: 0.85rem;
  }
  .cpc__cell--head {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    padding: 14px 8px;
  }
  .cpc__label-text {
    font-size: 0.82rem;
  }
}
@media (max-width: 860px) {
  .cpc__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cpc__head,
  .cpc__row {
    grid-template-columns: minmax(120px, 1fr) repeat(5, minmax(0, 1fr));
  }
  .cpc__cell {
    padding: 8px 6px;
    font-size: 0.76rem;
  }
  .cpc__cell--head {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    padding: 10px 4px;
  }
  .cpc__icon {
    width: 16px;
    height: 16px;
  }
  .cpc__winner-mark {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 720px) {
  .cpc__stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cpc__stats-card {
    padding: 14px 22px;
  }
}
@media (max-width: 560px) {
  /* Hide the desktop head row — each card labels its own brands below */
  .cpc__head {
    display: none;
  }

  /* Horizontal swipe track. Each comparison point is a full-width card that
     the user swipes left/right between. */
  .cpc__table {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .cpc__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  .cpc__track::-webkit-scrollbar {
    display: none;
  }

  /* Card: lifted with shadow. The track scrolls; cards are 100% width so
     one shows at a time. scroll-snap-stop keeps one swipe = one card. */
  .cpc__row {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 1px solid var(--cnd-border);
    border-radius: var(--radius);
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 10px
      color-mix(in srgb, var(--cnd-charcoal) 8%, transparent);
  }
  .cpc__row + .cpc__row {
    border-top: 1px solid var(--cnd-border);
  }

  /* Row label: static at top of each card */
  .cpc__row .cpc__cell--label {
    background: var(--cnd-off-white);
    font-weight: 800;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--cnd-border);
    text-align: left;
  }

  /* On mobile, append "vs competitors" for context since the row sits
     alone in its own swipeable card rather than in the full table. */
  .cpc__row .cpc__cell--label .cpc__label-text::after {
    content: " vs competitors";
    font-weight: 600;
    color: var(--cnd-muted);
  }

  /* Brand cells: stack vertically inside the card. Each one is its own
     labelled line, showing the brand name on top and the value below. */
  .cpc__row .cpc__cell--ours,
  .cpc__row .cpc__cell--theirs {
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--cnd-border-soft);
    padding: 14px 16px;
    font-size: 0.95rem;
    text-align: left;
  }
  .cpc__row .cpc__cell:last-child {
    border-bottom: 0;
  }

  /* Brand label above each value */
  .cpc__row .cpc__cell--ours::before,
  .cpc__row .cpc__cell--theirs::before {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cnd-muted);
    margin-bottom: 4px;
  }
  .cpc__row .cpc__cell--ours::before {
    content: "Headspace";
    color: var(--hp-green-vivid);
  }
  .cpc__row .cpc__cell--theirs:nth-of-type(3)::before {
    content: attr(data-comp-1);
  }
  .cpc__row .cpc__cell--theirs:nth-of-type(4)::before {
    content: attr(data-comp-2);
  }
  .cpc__row .cpc__cell--theirs:nth-of-type(5)::before {
    content: attr(data-comp-3);
  }
  .cpc__row .cpc__cell--theirs:nth-of-type(6)::before {
    content: attr(data-comp-4);
  }

  /* Headspace row tinted to stand out */
  .cpc__row .cpc__cell--ours {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--hp-pink) 15%, white) 0%,
      color-mix(in srgb, var(--hp-orange) 8%, white) 100%
    );
  }

  /* Larger winner ✓ on mobile */
  .cpc__winner-mark {
    width: 20px;
    height: 20px;
  }

  /* Mobile nav: counter + dots */
  .cpc__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 0 2px;
  }
  .cpc__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cpc__dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cnd-charcoal) 22%, white);
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      transform 0.2s ease,
      width 0.2s ease;
    flex-shrink: 0;
  }
  .cpc__dot.is-active {
    background: var(--slide-accent);
    width: 22px;
    border-radius: 999px;
  }
  .cpc__counter {
    flex-shrink: 0;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cnd-muted);
    font-variant-numeric: tabular-nums;
  }
  .cpc__counter-current {
    color: var(--slide-accent);
  }
  .cpc__counter-sep,
  .cpc__counter-total {
    color: var(--cnd-muted);
  }
}

/* The comparison table uses the Headspace brand green for its active-slide
   accent (dots + counter) as-is. */
.cpc {
  --slide-accent: var(--hp-green-vivid);
}

/* The comparison nav is only relevant on the mobile swipe layout */
@media (min-width: 561px) {
  .cpc__nav {
    display: none;
  }
}

/* =========================================================================
   Formula breakdown (cnd-formula-breakdown)
   ------------------------------------------------------------------------- */
.cnd-fb {
  position: relative;
  overflow: hidden;
  padding-top: var(--cnd-fb-pt);
  padding-bottom: var(--cnd-fb-pb);
}
@media (max-width: 600px) {
  .cnd-fb {
    --cnd-fb-pt: 16px;
    --cnd-fb-pb: 16px;
  }
}
.cnd-fb--cream-wave {
  background-color: #faf6ef;
}
.cnd-fb--cream-wave::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 0% 50%,
      rgba(239, 91, 46, 0.04) 0,
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(133, 214, 10, 0.03) 0,
      transparent 35%
    ),
    repeating-linear-gradient(
      115deg,
      transparent 0,
      transparent 38px,
      rgba(45, 45, 45, 0.015) 38px,
      rgba(45, 45, 45, 0.015) 39px
    );
  pointer-events: none;
  z-index: 0;
}
.cnd-fb > .page-width {
  position: relative;
  z-index: 1;
}
.cnd-fb__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 16px;
}
.cnd-fb__heading {
  margin: 4px 0 6px;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cnd-fb__heading em {
  font-style: italic;
  color: var(--hp-orange);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.cnd-fb__subheading {
  font-size: 0.9rem;
  color: var(--cnd-muted);
  margin-top: 2px;
}
.cnd-fb__tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 auto 18px;
  padding: 5px;
  max-width: 720px;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  box-shadow: 0 1px 0 var(--cnd-shadow);
}
.cnd-fb__tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cnd-charcoal);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
  white-space: nowrap;
}
.cnd-fb__tab:hover:not(.is-active) {
  background: rgba(239, 91, 46, 0.06);
  color: var(--hp-orange);
}
.cnd-fb__tab:focus-visible {
  outline: 2px solid var(--hp-orange);
  outline-offset: 2px;
}
.cnd-fb__tab.is-active {
  background: var(--hp-orange);
  color: #ffffff;
}
.cnd-fb__tab.is-active .cnd-fb__tab-icon {
  filter: brightness(0) invert(1);
}
.cnd-fb__tab-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.18s ease;
}
.cnd-fb__tab-label {
  line-height: 1;
}
.cnd-fb__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 960px) {
  .cnd-fb__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.cnd-fb__donut-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.cnd-fb__chart {
  margin: 0;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
.cnd-fb__chart-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.cnd-fb__chart-pane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 320ms ease,
    transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.cnd-fb__chart-pane.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.cnd-fb__svg-el {
  width: 100%;
  height: 100%;
  display: block;
}
.cnd-fb__segment {
  transition: transform 0.18s ease;
  transform-origin: 400px 400px;
}
.cnd-fb__segment:hover {
  transform: scale(1.01);
}
.cnd-fb__substrate-label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  fill: var(--cnd-charcoal);
  letter-spacing: 0.01em;
  pointer-events: none;
}
.cnd-fb__substrate-leader {
  fill: none;
  stroke: var(--cnd-charcoal);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  pointer-events: none;
}
.cnd-fb__substrate-dot {
  fill: var(--cnd-charcoal);
  opacity: 0.7;
  pointer-events: none;
}
.cnd-fb__total-stack {
  position: relative;
  width: 100%;
  text-align: center;
  max-width: 460px;
}
.cnd-fb__total-pane {
  display: none;
}
.cnd-fb__total-pane.is-active {
  display: block;
  animation: cnd-fb-pane-in 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes cnd-fb-pane-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cnd-fb__total-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.75rem, 4.4vw, 3.75rem);
  line-height: 1;
  font-weight: 700;
  color: var(--cnd-charcoal);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cnd-fb__total-unit {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.42em;
  margin-left: 4px;
  color: var(--cnd-muted);
  font-weight: 600;
}
.cnd-fb__total-label {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-orange);
}
.cnd-fb__divider {
  border: 0;
  height: 1px;
  background: var(--cnd-border);
  margin: 16px 0 16px;
  position: relative;
}
.cnd-fb__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cnd-muted);
  transform: translate(-50%, -50%);
}
.cnd-fb__explainer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  justify-content: center;
  max-width: 380px;
  margin-inline: auto;
}
.cnd-fb__leaf {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(239, 91, 46, 0.1);
  color: var(--hp-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cnd-fb__explainer-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--cnd-charcoal);
}
.cnd-fb__explainer-text strong {
  font-weight: 700;
  color: var(--hp-orange);
}
.cnd-fb__serving-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--cnd-muted);
}
.cnd-fb__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--hp-orange);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition:
    gap 0.18s ease,
    color 0.18s ease;
}
.cnd-fb__cta:hover {
  gap: 14px;
  color: #d24a20;
}
.cnd-fb__cta-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}
@media (max-width: 760px) {
  .cnd-fb__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cnd-fb__tabs::-webkit-scrollbar {
    display: none;
  }
  .cnd-fb__tab {
    scroll-snap-align: start;
  }
}

/* Legend / key grid --------------------------------------------------
   The mushroom key sits to the right of the donut on desktop and
   below the donut on mobile. Each card carries the mushroom image,
   a coloured-underline name and a short description. The colour is
   taken from the matching donut slice via --ink, so the slice and
   the card stay in sync without any JS. */
.cnd-fb__key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 12px;
  align-self: start;
}
.cnd-fb__key-card {
  background: #ffffff;
  border: 1.5px solid var(--ink, var(--cnd-border));
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  min-height: 0;
}
.cnd-fb__key-image {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.cnd-fb__key-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cnd-fb__key-image--placeholder {
  border-radius: 50%;
  background: var(--cnd-light);
  color: var(--cnd-muted);
  font-family: Georgia, serif;
  font-size: 1.6rem;
  font-weight: 800;
}
.cnd-fb__key-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cnd-fb__key-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--cnd-charcoal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid currentColor;
  line-height: 1;
}
.cnd-fb__key-name--has-ink {
  border-bottom-color: var(--ink);
  color: var(--cnd-charcoal);
}
.cnd-fb__key-name--has-ink::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}
.cnd-fb__key-desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--cnd-muted);
  margin: 0;
}
@media (max-width: 960px) {
  .cnd-fb__key {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cnd-fb__key-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 0;
  }
  .cnd-fb__key-image {
    width: 60px;
    height: 60px;
    margin-left: 0;
    order: 2;
  }
  .cnd-fb__key-body {
    order: 1;
    flex: 1 1 auto;
  }
  .cnd-fb__key-name {
    font-size: 0.95rem;
  }
  .cnd-fb__key-desc {
    font-size: 0.78rem;
  }
}
/* Respect users who prefer no motion - skip the cross-fade /
   scale-up and just swap panes instantly. */
@media (prefers-reduced-motion: reduce) {
  .cnd-fb__chart-pane {
    transition: none;
    transform: none;
  }
  .cnd-fb__total-pane.is-active {
    animation: none;
  }
}
.cnd-fb__sr-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Journey timeline (cnd-journey-timeline)
   ------------------------------------------------------------------------- */
.cnd-jt {
  position: relative;
  padding-top: var(--cnd-jt-pt);
  padding-bottom: var(--cnd-jt-pb);
}
.cnd-jt__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.cnd-jt__heading {
  margin: 8px 0 12px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cnd-jt__heading em {
  font-style: italic;
  background: linear-gradient(
    110deg,
    var(--hp-orange) 0%,
    var(--hp-pink) 50%,
    var(--hp-green-vivid) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cnd-jt__subheading {
  font-size: 1.05rem;
  color: var(--cnd-muted);
}
.cnd-jt__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) {
  .cnd-jt__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .cnd-jt__grid {
    grid-template-columns: 1fr;
  }
}
.cnd-jt__track {
  display: none;
}
@media (min-width: 961px) {
  .cnd-jt__track {
    display: block;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 38px;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--hp-orange) 12%,
      var(--hp-pink) 50%,
      var(--hp-green-vivid) 88%,
      transparent 100%
    );
    opacity: 0.35;
    z-index: 0;
    border-radius: 2px;
  }
}
.cnd-jt__stage {
  border-radius: 16px;
  overflow: hidden;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.cnd-jt__stage:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(45, 45, 45, 0.18);
}
.cnd-jt__stage-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cnd-light);
}
.cnd-jt__stage-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cnd-jt__stage-body {
  padding: 20px 22px 24px;
  flex: 1;
}
.cnd-jt__stage-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-orange);
  margin-bottom: 8px;
}
.cnd-jt__stage-heading {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--cnd-charcoal);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.cnd-jt__stage-text {
  color: var(--cnd-muted);
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0;
}
.cnd-jt__cta-wrap {
  text-align: center;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cnd-jt__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  background: var(--cnd-charcoal);
  color: var(--cnd-white);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.cnd-jt__cta:hover,
.cnd-jt__cta:focus-visible {
  background: var(--cnd-green);
  transform: translateY(-1px);
}
.cnd-jt__note {
  color: var(--cnd-muted);
  font-size: 0.92rem;
}

/* =========================================================================
   Subscription builder (cnd-subscription-builder)
   ------------------------------------------------------------------------- */
.csb {
  position: relative;
  padding-top: var(--csb-pt);
  padding-bottom: var(--csb-pb);
}
.csb__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.csb__heading {
  margin: 8px 0 12px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.csb__heading em {
  font-style: italic;
  background: linear-gradient(
    110deg,
    var(--hp-orange) 0%,
    var(--hp-pink) 50%,
    var(--hp-green-vivid) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.csb__subheading {
  font-size: 1.05rem;
  color: var(--cnd-muted);
}
.csb__inner {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .csb__inner {
    grid-template-columns: 1fr;
  }
}
.csb__hero {
  background: var(--cnd-light);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--cnd-border);
}
.csb__hero-image {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cnd-white);
}
.csb__hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.csb__hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-orange);
}
.csb__hero-heading {
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 4px 0 0;
  color: var(--cnd-charcoal);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.csb__hero-text {
  font-size: 0.95rem;
  color: var(--cnd-muted);
  line-height: 1.5;
  margin: 4px 0 0;
}
.csb__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.csb__stepper-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
}
.csb__stepper-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cnd-charcoal);
}
.csb__stepper-counter {
  font-size: 0.85rem;
  color: var(--cnd-muted);
  font-variant-numeric: tabular-nums;
}
.csb__stepper-current {
  color: var(--hp-orange);
  font-weight: 700;
}
.csb__products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .csb__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .csb__products {
    grid-template-columns: 1fr;
  }
}
.csb__product {
  border-radius: 14px;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.csb__product:hover {
  border-color: var(--hp-orange);
  box-shadow: 0 6px 18px -10px rgba(45, 45, 45, 0.18);
}
.csb__product-media {
  aspect-ratio: 1 / 1;
  background: var(--cnd-light);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.csb__product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.csb__product-placeholder {
  font-size: 2rem;
  font-weight: 700;
  color: var(--cnd-muted);
}
.csb__product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.csb__product-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hp-orange) 18%, white);
  color: var(--hp-orange);
  width: fit-content;
}
.csb__product-name {
  font-size: 0.98rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
  color: var(--cnd-charcoal);
}
.csb__product-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.csb__product-tags li {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hp-green-vivid) 16%, white);
  color: var(--cnd-green);
}
.csb__product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
}
.csb__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  background: var(--cnd-white);
  overflow: hidden;
}
.csb__stepper-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cnd-charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.csb__stepper-btn:hover:not(:disabled),
.csb__stepper-btn:focus-visible:not(:disabled) {
  background: var(--cnd-light);
  color: var(--hp-orange);
}
.csb__stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.csb__stepper-qty {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cnd-charcoal);
}
.csb__product-price {
  font-weight: 700;
  color: var(--cnd-charcoal);
  font-size: 0.95rem;
}
.csb__product-stock {
  font-size: 0.78rem;
  color: var(--cnd-muted);
  font-weight: 600;
}
.csb__sample-box {
  align-self: flex-start;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--hp-orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.csb__sample-box:hover,
.csb__sample-box:focus-visible {
  border-bottom-color: var(--hp-orange);
}
.csb__cta-wrap {
  text-align: center;
  margin-top: 32px;
}
.csb__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 56px;
  background: var(--cnd-charcoal);
  color: var(--cnd-white);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.csb__cta::after {
  content: "→";
  font-size: 1.1em;
}
.csb__cta:hover,
.csb__cta:focus-visible {
  background: var(--cnd-green);
  transform: translateY(-1px);
}

/* ============================================================
   Collection toolbar + active-filter chips
   ============================================================ */
.section--collection {
  padding-top: 32px;
}
.collection-results-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--cnd-white);
  border: 1px solid var(--cnd-border);
  border-radius: var(--radius);
  position: sticky;
  top: 88px;
  z-index: 5;
  flex-wrap: wrap;
}
.collection-toolbar[data-no-sticky] {
  position: static;
}
.collection-toolbar__count {
  margin: 0;
  color: var(--cnd-muted);
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.collection-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.collection-toolbar__sort > span {
  color: var(--cnd-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--cnd-white);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232d2d2d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  padding: 10px 36px 10px 16px;
  min-height: 42px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cnd-charcoal);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.sort-select:hover {
  border-color: var(--cnd-charcoal);
}
.sort-select:focus-visible {
  outline: none;
  border-color: var(--cnd-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnd-green) 24%, transparent);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cnd-light);
  border: 1px solid var(--cnd-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cnd-charcoal);
  text-decoration: none;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
.active-filter-chip:hover,
.active-filter-chip:focus-visible {
  background: var(--cnd-charcoal);
  border-color: var(--cnd-charcoal);
  color: var(--cnd-white);
  text-decoration: none;
}
.active-filter-chip__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cnd-charcoal) 8%, transparent);
  font-size: 0.95rem;
  line-height: 1;
}
.active-filter-chip:hover .active-filter-chip__close,
.active-filter-chip:focus-visible .active-filter-chip__close {
  background: color-mix(in srgb, var(--cnd-white) 16%, transparent);
}
.clear-all-filters {
  margin-left: 4px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cnd-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 8px;
  transition:
    color 0.16s ease,
    background 0.16s ease;
}
.clear-all-filters:hover {
  color: var(--cnd-green-dark);
  background: var(--cnd-light);
}

.collection-results {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 320px;
  transition: opacity 140ms ease;
}
.collection-results[aria-live="polite"]:focus-visible {
  outline: 2px solid var(--cnd-green);
  outline-offset: 4px;
}
.collection-results.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Compact section header used on collection pages — just the eyebrow
   plus optional description, no big h1. */
.section-header--compact {
  margin-bottom: 24px;
}
.section-header--compact > .eyebrow {
  margin-bottom: 0;
}
.section-header--compact > .rte {
  margin-top: 6px;
  max-width: 720px;
}

/* Tighten the .filter-panel__scroll padding when there's no head to
   consume vertical space. */
@media (min-width: 750px) {
  .filter-panel__scroll {
    padding: 18px 6px 24px 20px;
  }
}
@media (max-width: 749px) {
  .filter-panel__scroll {
    padding: 14px 6px 14px 16px;
  }
}

/* Close button — only used in legacy drawer markup; panel can stay without
   a close X at the top. Keep selector harmless if it's still in some
   template. */
.filter-panel__close {
  display: none;
}
.filter-checkbox {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  color: var(--cnd-charcoal);
  font-size: 0.92rem;
}
.filter-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cnd-green);
}
.filter-checkbox__label {
  font-weight: 700;
}
.filter-checkbox__count {
  color: var(--cnd-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.filter-checkbox input:disabled + .filter-checkbox__label,
.filter-checkbox input:disabled ~ .filter-checkbox__count {
  color: var(--cnd-border);
}
.filter-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.filter-price input {
  width: 100%;
  border: 1px solid var(--cnd-border);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cnd-charcoal);
  background: var(--cnd-off-white);
}
.filter-price input:focus-visible {
  outline: none;
  border-color: var(--cnd-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnd-green) 18%, transparent);
}
.filter-price__sep {
  color: var(--cnd-muted);
  font-weight: 800;
}

@media (max-width: 749px) {
  .collection-toolbar {
    flex-direction: column;
    align-items: stretch;
    top: 76px;
  }
  .collection-toolbar__count {
    text-align: center;
  }
  .collection-toolbar__sort {
    width: 100%;
  }
  .sort-select {
    width: 100%;
  }
  /* Mobile filter UX: show the trigger button and hide the panel by
     default. Clicking the trigger toggles `.is-mobile-filter-open`
     on <body>; the panel then expands inline and the chevron flips
     to −. When open, the trigger and panel merge into a single
     continuous card by removing the gap between them and flattening
     the touching edges. */
  .filter-panel-trigger {
    display: inline-flex;
  }
  .filter-panel {
    position: relative;
    top: auto;
    display: none;
    max-height: calc(100vh - 200px);
  }
  body.is-mobile-filter-open .collection-filter-col {
    gap: 0;
  }
  body.is-mobile-filter-open .filter-panel {
    display: block;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
  }
  body.is-mobile-filter-open .filter-panel-trigger {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }
  .active-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    margin: 0 -22px;
    padding: 0 22px 4px;
    -webkit-overflow-scrolling: touch;
  }
  .active-filters::-webkit-scrollbar {
    display: none;
  }
  .active-filter-chip {
    flex: 0 0 auto;
  }
  .clear-all-filters {
    flex: 0 0 auto;
    margin-left: 0;
  }
}

/* Footer payment-methods band --------------------------------------- */
.footer__payments {
  margin-top: 40px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__payments-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__payments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
}
.footer__payments-item {
  display: inline-flex;
}
.footer__payments-icon {
  display: block;
  height: 24px;
  width: auto;
  border-radius: 3px;
  opacity: 0.88;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.footer__payments-icon:hover,
.footer__payments-icon:focus-visible {
  opacity: 1;
}
@media (max-width: 749px) {
  .footer__payments-inner {
    justify-content: center;
  }
  .footer__payments {
    margin-top: 32px;
  }
}
.product-title + .jdgm-widget.jdgm-preview-badge {
  margin: 0.5rem 0 1rem;
}
.product-card__body .jdgm-widget.jdgm-preview-badge {
  margin: 0.25rem 0 0.5rem;
}