/** Shopify CDN: Minification failed

Line 990:0 All "@import" rules must come first
Line 1353:0 All "@import" rules must come first
Line 2023:0 All "@import" rules must come first
Line 2997:0 All "@import" rules must come first
Line 4801:0 All "@import" rules must come first
Line 4827:0 All "@import" rules must come first
Line 5457:0 All "@import" rules must come first
Line 6547:0 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:cf-collection (INDEX:12) */
.cf-col {
  background: var(--cf-bg);
  /* Clears a floating header. --cf-header-offset is published by cf-header and
     is only set when the header actually floats, so this collapses to 0 when
     the header reserves its own space — no double gap either way. */
  padding-top: var(--cf-header-offset, 0px);
}

/* --- Header ---------------------------------------------------------------
   No banner: no edge-to-edge photo, no colour block, nothing that depends on
   a manually uploaded image or on a collection having photogenic products.
   Just the page's own background, a breadcrumb, an eyebrow with a tiny leaf
   mark, the title and description, and one botanical sprig drawn in inline
   SVG as the only decoration — same treatment on every collection, always. */
.cf-col__intro {
  position: relative;
  padding-block: 3rem 2.5rem;
  overflow: hidden;
  /* A soft garden-glow wash, not a block — colour without becoming a banner. */
  background: radial-gradient(120% 160% at 8% 0%, rgb(22 59 45 / 0.055), transparent 60%);
}

.cf-col__intro-inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.cf-col__sprig-wrap {
  position: absolute;
  z-index: 0;
  top: -1.75rem;
  right: max(1.5rem, calc((100% - 1180px) / 2 + 1.5rem));
  width: 172px;
  pointer-events: none;
}

.cf-col__sprig { display: block; width: 100%; height: auto; overflow: visible; }

/* Filled leaf shapes, not just outline strokes — this is meant to read as a
   small piece of botanical art, not a faint watermark. Opacity steps down
   toward the outer leaves so the spray has depth instead of sitting flat. */
.cf-col__sprig-leaves path { fill: var(--cf-green); }
.cf-col__sprig-leaves path:nth-child(1) { opacity: 0.42; }
.cf-col__sprig-leaves path:nth-child(2) { opacity: 0.62; }
.cf-col__sprig-leaves path:nth-child(3) { opacity: 0.8; }
.cf-col__sprig-leaves path:nth-child(4) { opacity: 0.62; }
.cf-col__sprig-leaves path:nth-child(5) { opacity: 0.42; }

/* Pink stays where the brand rules keep it — a small accent, never a wash.
   Four little "buds" along the spray are exactly that: a spot of colour,
   not a background fill. */
.cf-col__sprig-buds circle { fill: var(--cf-pink); }

@media (max-width: 767px) {
  .cf-col__sprig-wrap { width: 116px; top: -0.75rem; right: 1rem; }
}

.cf-col__crumbs {
  display: flex;
  gap: 0.5rem;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  color: var(--cf-muted);
}

.cf-col__crumbs a { color: inherit; text-decoration: none; }
.cf-col__crumbs a:hover { color: var(--cf-pink); }
.cf-col__crumbs [aria-current] { color: inherit; }

.cf-col__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 1.125rem 0 0;
  padding: 0.3rem 0.75rem 0.3rem 0.625rem;
  border-radius: 999px;
  background: rgb(249 95 146 / 0.12);
  font-family: var(--cf-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* --cf-pink-ink, not --cf-pink: the token file itself notes plain --cf-pink
     fails AA for text (2.86:1 on this background) — pink-ink is the same hue,
     darkened until it reads clean, and reads richer here besides. */
  color: var(--cf-pink-ink);
}

.cf-col__eyebrow-icon { width: 0.9375rem; height: 0.9375rem; flex: none; }

.cf-col__title {
  margin: 0.5rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-col-heading, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
  text-wrap: balance;
}

.cf-col__desc {
  margin: 1rem 0 0;
  max-width: 42rem;
  font-family: var(--cf-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cf-muted);
}

/* --- Body & toolbar ------------------------------------------------------ */
.cf-col__body { padding-block: 3rem 6rem; }

.cf-col__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cf-green-10);
}

.cf-col__count {
  margin: 0;
  font-family: var(--cf-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-green);
}

.cf-col__tools { display: flex; align-items: center; gap: 1rem; }

/* Own screen-reader utility. Previously borrowed .cf-ft__sr from the footer,
   which only worked because the footer happened to be on the same page. */
.cf-col__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cf-col__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--cf-green-20);
  border-radius: 999px;
  background: none;
  padding: 0.625rem 1.125rem;
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cf-green);
  cursor: pointer;
  transition: border-color 0.3s var(--cf-ease), color 0.3s var(--cf-ease);
}

.cf-col__filter-toggle svg { width: 1.125rem; height: 1.125rem; }
.cf-col__filter-toggle:hover { border-color: var(--cf-pink); color: var(--cf-pink); }

/* Sidebar is always visible on desktop, so the toggle is mobile-only. */
@media (min-width: 1024px) { .cf-col__filter-toggle { display: none; } }

.cf-col__sort { position: relative; display: inline-flex; align-items: center; }

.cf-col__sort-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--cf-green-20);
  border-radius: 4px;
  background: none;
  padding: 0.5625rem 2.5rem 0.5625rem 1rem;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--cf-green);
  cursor: pointer;
  transition: border-color 0.2s var(--cf-ease);
}
.cf-col__sort-select:hover { border-color: var(--cf-green); }

.cf-col__sort-select:focus-visible { outline: 2px solid var(--cf-pink); outline-offset: 2px; }

.cf-col__sort-chev {
  position: absolute;
  right: 1.125rem;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  color: var(--cf-green);
}

/* --- Layout -------------------------------------------------------------- */
.cf-col__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .cf-col__layout { grid-template-columns: 260px 1fr; gap: 3.5rem; }
}

/* No sidebar — the grid takes the whole width. */
.cf-col__layout--full { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .cf-col__layout--full { grid-template-columns: 1fr; }
}

/* --- Sidebar ------------------------------------------------------------- */
.cf-col__sidebar-head { display: none; }

.cf-col__sidebar-label {
  margin: 0 0 0.25rem;
  font-family: var(--cf-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cf-muted);
}
@media (max-width: 1023px) { .cf-col__sidebar-label { display: none; } }

@media (max-width: 1023px) {
  .cf-col__sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(88%, 360px);
    background: var(--cf-bg);
    padding: 1.25rem var(--cf-gutter) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s var(--cf-ease);
    box-shadow: -20px 0 60px rgb(22 59 45 / 0.15);
  }
  .cf-col__sidebar.is-open { transform: none; }

  .cf-col__sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }
  .cf-col__sidebar-title {
    font-family: var(--cf-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cf-green);
  }
  .cf-col__sidebar-close {
    display: grid;
    place-items: center;
    height: 40px; width: 40px;
    border: 0; background: none; cursor: pointer;
    color: var(--cf-green);
  }
  .cf-col__sidebar-close svg { width: 22px; height: 22px; }
}

@media (min-width: 1024px) {
  .cf-col__sidebar { position: sticky; top: 6rem; align-self: start; }
}

.cf-col__group {
  border-top: 1px solid var(--cf-green-10);
  padding-block: 1.5rem;
}
.cf-col__group:last-of-type { border-bottom: 1px solid var(--cf-green-10); }

.cf-col__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-family: var(--cf-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-green);
}

.cf-col__group-head::-webkit-details-marker { display: none; }
.cf-col__group-head svg { width: 0.625rem; height: 0.625rem; opacity: 0.5; transition: transform 0.3s var(--cf-ease); }
.cf-col__group[open] .cf-col__group-head svg { transform: rotate(180deg); opacity: 1; }

.cf-col__group-body { margin-top: 1rem; }

.cf-col__opts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }

.cf-col__opt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--cf-green);
}
.cf-col__opt:hover .cf-col__opt-label { color: var(--cf-pink); }

.cf-col__opt.is-empty { opacity: 0.4; cursor: not-allowed; }
.cf-col__opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.cf-col__opt-box {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 1.125rem;
  width: 1.125rem;
  border: 1.5px solid var(--cf-green);
  border-radius: 3px;
  transition: background-color 0.18s var(--cf-ease), border-color 0.18s var(--cf-ease);
}

.cf-col__opt-box::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  clip-path: polygon(14% 52%, 0 65%, 40% 100%, 100% 22%, 86% 10%, 38% 72%);
  background: var(--cf-bg);
  transform: scale(0);
  transition: transform 0.18s var(--cf-ease);
}

.cf-col__opt input:checked + .cf-col__opt-box {
  background: var(--cf-green);
  border-color: var(--cf-green);
}

.cf-col__opt input:checked + .cf-col__opt-box::after { transform: scale(1); }
.cf-col__opt input:focus-visible + .cf-col__opt-box { outline: 2px solid var(--cf-pink); outline-offset: 2px; }

.cf-col__opt-label { flex: 1; }
.cf-col__opt-count {
  font-size: 0.6875rem;
  color: var(--cf-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.cf-col__price { display: flex; align-items: center; gap: 0.5rem; }

.cf-col__price-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  border: 1px solid var(--cf-green-20);
  border-radius: 4px;
  padding: 0.5rem 0.625rem;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  color: var(--cf-muted);
}

.cf-col__price-field:focus-within { border-color: var(--cf-pink); }
.cf-col__price-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  color: var(--cf-text);
}

.cf-col__price-dash { color: var(--cf-muted); }

.cf-col__filter-actions { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.cf-col__clear {
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  color: var(--cf-muted);
  text-decoration: none;
}
.cf-col__clear:hover { color: var(--cf-pink); }

.cf-col__active {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.cf-col__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  background: var(--cf-green-10);
  padding: 0.375rem 0.75rem;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  color: var(--cf-green);
  text-decoration: none;
  transition: background-color 0.2s var(--cf-ease);
}

.cf-col__pill svg { width: 0.75rem; height: 0.75rem; }
.cf-col__pill:hover { background: rgb(249 95 146 / 0.15); }

.cf-col__clear-inline {
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  color: var(--cf-muted);
  text-decoration: underline;
}

/* --- Main / grid ---------------------------------------------------------
   Fully self-contained. This previously also carried .cf-pg__grid, whose
   display:grid lives in cf-product-grid.liquid — a section that isn't on this
   page, so the grid silently collapsed to a plain list. A section must never
   depend on another section's CSS. */
.cf-col__main { min-width: 0; }

.cf-col__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

@media (min-width: 1024px) {
  .cf-col__grid {
    grid-template-columns: repeat(var(--cf-col-cols, 4), 1fr);
    gap: 2.5rem 2rem;
  }
}

.cf-col__more { margin-top: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.cf-col__more-btn { min-width: 12rem; justify-content: center; }
.cf-col__more-btn.is-loading { opacity: 0.6; pointer-events: none; }

/* With JS the button drives loading; numbered links are the fallback. */
.cf-col__pages { display: flex; gap: 0.375rem; }
[data-cf-js] .cf-col__pages { display: none; }

.cf-col__page {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border-radius: 10px;
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  color: var(--cf-green);
  text-decoration: none;
  transition: background-color 0.2s var(--cf-ease);
}

.cf-col__page:hover { background: var(--cf-green-10); }
.cf-col__page.is-current { background: var(--cf-green); color: var(--cf-bg); }
.cf-col__page.is-gap { color: var(--cf-muted); }

.cf-col__progress {
  margin: 0;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  color: var(--cf-muted);
}

.cf-col__empty { padding: 4rem 0; text-align: center; }
.cf-col__empty-title {
  margin: 0;
  font-family: var(--cf-font-heading);
  font-size: 1.5rem;
  color: var(--cf-green);
}
.cf-col__empty-text { margin: 0.5rem 0 1.75rem; font-family: var(--cf-font-body); color: var(--cf-muted); }

/* --- Mobile filter scrim ------------------------------------------------- */
.cf-col__scrim-bg {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgb(22 59 45 / 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--cf-ease), visibility 0.3s var(--cf-ease);
}

.cf-col.is-filtering .cf-col__scrim-bg { opacity: 1; visibility: visible; }

@media (min-width: 1024px) {
  .cf-col__sidebar-close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-col__sidebar { transition: none; }
}
/* END_SECTION:cf-collection */

/* START_SECTION:cf-comparison-cards (INDEX:13) */
.cf-vc { background: var(--cf-bg); padding-block: var(--cf-vs-pad, 128px); }

.cf-vc__head { max-width: 46rem; margin: 0 auto 4rem; text-align: center; }
.cf-vc__head .cf-overline { justify-content: center; }
.cf-vc .cf-vc__title {
  margin: 0.75rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-vs-heading, 56px);
  font-weight: 600; line-height: 1.05;
  letter-spacing: var(--cf-track-tight); color: var(--cf-green);
}
.cf-vc__sub { margin: 1rem 0 0; font-family: var(--cf-font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--cf-muted); }

/* Three cards. The middle one is scaled up and pulled together with the others
   via negative margins on the sides, so it visibly sits proud. */
.cf-vc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* Fills the page width (with the container's gutters). Capped only so it
     doesn't sprawl on very large monitors. */
  max-width: 1600px;
  margin-inline: auto;
  align-items: center;
}
@media (min-width: 900px) {
  .cf-vc__grid { grid-template-columns: 1fr 1.12fr 1fr; gap: 0; }
}

.cf-vc__card {
  background: var(--cf-card);
  border: 1px solid var(--cf-green-10);
  border-radius: var(--cf-radius);
  padding: 2rem 1.75rem;
  position: relative;
}

/* Rivals sit slightly recessed. */
.cf-vc__card--rival { }
@media (min-width: 900px) {
  .cf-vc__card--rival:first-child { border-radius: var(--cf-radius) 0 0 var(--cf-radius); border-right: 0; }
  .cf-vc__card--rival:last-child  { border-radius: 0 var(--cf-radius) var(--cf-radius) 0; border-left: 0; }
}

/* CrazyFlora card: raised, colour-filled, taller. */
.cf-vc__card--us {
  background: var(--cf-vs-us-bg, #5c1024);
  border-color: transparent;
  color: #fff;
  z-index: 2;
  padding: 2.75rem 2rem 2.25rem;
  box-shadow: 0 30px 70px rgb(22 59 45 / 0.28);
}
@media (min-width: 900px) {
  .cf-vc__card--us {
    margin-block: -1.75rem;
    border-radius: calc(var(--cf-radius) + 4px);
    transform: scale(1.02);
  }
}

.cf-vc__badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: var(--cf-pink); color: #fff;
  font-family: var(--cf-font-body); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 1rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 20px rgb(249 95 146 / 0.45);
}

.cf-vc__card-head { text-align: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--cf-green-10); }
.cf-vc__card--us .cf-vc__card-head { border-bottom-color: rgb(255 255 255 / 0.15); }

.cf-vc__card-name {
  display: block;
  font-family: var(--cf-font-heading);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--cf-green);
}
.cf-vc__card--us .cf-vc__card-name { color: #fff; font-size: 1.75rem; }

.cf-vc__card-tag {
  display: block; margin-top: 0.35rem;
  font-family: var(--cf-font-body); font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.7);
}

.cf-vc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }

.cf-vc__item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-family: var(--cf-font-body); font-size: 0.9375rem; line-height: 1.4;
}

.cf-vc__text { color: var(--cf-text); padding-top: 0.15rem; }
.cf-vc__card--rival .cf-vc__text { color: var(--cf-muted); }
.cf-vc__card--us .cf-vc__text { color: rgb(255 255 255 / 0.95); font-weight: 500; }

.cf-vc__mk { display: grid; place-items: center; height: 1.4rem; width: 1.4rem; border-radius: 999px; flex-shrink: 0; }
.cf-vc__mk svg { width: 0.95rem; height: 0.95rem; }
.cf-vc__mk--yes { color: #2e9c63; }
.cf-vc__card--us .cf-vc__mk--yes { color: #7ee2a8; }
.cf-vc__mk--no { color: rgb(22 59 45 / 0.3); }
.cf-vc__card--us .cf-vc__mk--no { color: rgb(255 255 255 / 0.45); }
.cf-vc__mk--part { color: #d9a441; }

.cf-vc__cta {
  display: flex; justify-content: center; margin-top: 2rem;
  background: var(--cf-pink); color: #fff;
  font-family: var(--cf-font-body); font-size: 0.875rem; font-weight: 600;
  padding: 0.9rem 1.5rem; border-radius: 999px; text-decoration: none;
  transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease);
}
.cf-vc__cta:hover { transform: translateY(-2px); box-shadow: var(--cf-shadow-pink); }

.cf-vc__why {
  max-width: 42rem; margin: 3rem auto 0; text-align: center;
  font-family: var(--cf-font-body); font-size: 1.0625rem; line-height: 1.6;
  color: var(--cf-green); font-weight: 500;
}

/* Entrance — enhance only. */
.cf-reveal-ready .cf-vc__grid.cf-reveal:not(.cf-in) .cf-vc__card { opacity: 0; transform: translateY(16px); }
.cf-vc__grid.cf-in .cf-vc__card { animation: cf-vc-rise 0.55s var(--cf-ease) both; }
.cf-vc__grid.cf-in .cf-vc__card--rival:first-child { animation-delay: 0s; }
.cf-vc__grid.cf-in .cf-vc__card--us { animation-delay: 0.12s; }
.cf-vc__grid.cf-in .cf-vc__card--rival:last-child { animation-delay: 0.24s; }
@keyframes cf-vc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .cf-vc__grid.cf-in .cf-vc__card--us { animation-name: cf-vc-rise-us; }
  @keyframes cf-vc-rise-us { from { opacity: 0; transform: translateY(16px) scale(1.02); } to { opacity: 1; transform: scale(1.02); } }
}

@media (prefers-reduced-motion: reduce) {
  .cf-reveal-ready .cf-vc__grid.cf-reveal:not(.cf-in) .cf-vc__card { opacity: 1; transform: none; }
  .cf-vc__grid.cf-in .cf-vc__card { animation: none; }
  @media (min-width: 900px) { .cf-vc__card--us { transform: scale(1.02); } }
}
/* END_SECTION:cf-comparison-cards */

/* START_SECTION:cf-comparison (INDEX:14) */
.cf-vs { background: var(--cf-bg); padding-block: var(--cf-vs-pad, 128px); }

.cf-vs__head { max-width: 46rem; margin: 0 auto 3.5rem; text-align: center; }
.cf-vs__head .cf-overline { justify-content: center; }
.cf-vs .cf-vs__title {
  margin: 0.75rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-vs-heading, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
}
.cf-vs__sub { margin: 1rem 0 0; font-family: var(--cf-font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--cf-muted); }

/* One rounded card holding the whole table. overflow visible so the raised
   CrazyFlora column can extend past the top and bottom edges. */
.cf-vs__card {
  --cf-vs-cols: 1.3fr 1fr 1.15fr 1fr;
  max-width: 68rem;
  margin: 1.5rem auto 0;
  border-radius: 22px;
  background: var(--cf-card);
  box-shadow: 0 24px 60px rgb(22 59 45 / 0.10);
  position: relative;
}

.cf-vs__row { display: grid; grid-template-columns: var(--cf-vs-cols); }

.cf-vs__cell {
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center;
  font-family: var(--cf-font-body); font-size: 0.9375rem;
}

.cf-vs__cell--feat {
  align-items: flex-start; text-align: left; justify-content: center;
  font-family: var(--cf-font-heading);
  font-size: 1.0625rem; font-weight: 500; color: var(--cf-green);
  padding-left: 1.75rem;
}

/* Competitor columns: cream, muted text. */
.cf-vs__col-a, .cf-vs__col-b { background: #f7f6f1; }
.cf-vs__col-a .cf-vs__ctext, .cf-vs__col-b .cf-vs__ctext { color: var(--cf-muted); }

/* Row separators (not on header). */
.cf-vs__row:not(.cf-vs__row--head) .cf-vs__cell { border-top: 1px solid var(--cf-green-10); }

/* ---- Header bar ---- */
.cf-vs__row--head .cf-vs__cell {
  background: var(--cf-vs-head-bg, #5c1024);
  color: #fff;
  padding-block: 1.75rem;
  font-family: var(--cf-font-heading);
  font-size: 1.375rem; font-weight: 600;
  flex-direction: row;
}
.cf-vs__row--head .cf-vs__cell--feat { background: var(--cf-vs-head-bg, #5c1024); }
.cf-vs__row--head .cf-vs__cell:first-child { border-top-left-radius: 22px; }
.cf-vs__row--head .cf-vs__cell:last-child { border-top-right-radius: 22px; }
.cf-vs__us-label { font-family: var(--cf-font-heading); font-weight: 600; letter-spacing: -0.01em; }

/* ---- Raised CrazyFlora column (brighter green, lifts past card edges) ---- */
.cf-vs__col-us {
  background: var(--cf-vs-us-bg, #5c1024);
  color: #fff;
  position: relative;
  z-index: 1;
}
/* The header cell of the us-column rises above the card top; the last us-cell
   drops below the bottom — a subtle lift out of the frame. */
.cf-vs__row--head .cf-vs__col-us {
  background: var(--cf-vs-us-bg, #5c1024);
  border-radius: 16px 16px 0 0;
  margin-top: -1.25rem;
  padding-top: 2.5rem;
  box-shadow: 0 -14px 30px rgb(22 59 45 / 0.16);
}
.cf-vs__row:last-child .cf-vs__col-us {
  border-radius: 0 0 16px 16px;
  margin-bottom: -1.25rem;
  padding-bottom: 2.5rem;
  box-shadow: 0 16px 34px rgb(22 59 45 / 0.2);
}
/* Continuous side-lift down the whole column. */
.cf-vs__col-us { box-shadow: 18px 0 40px -32px rgb(22 59 45 / 0.5), -18px 0 40px -32px rgb(22 59 45 / 0.5); }

.cf-vs__ctext { font-size: 0.875rem; font-weight: 500; line-height: 1.35; }
.cf-vs__ctext--us { color: #fff; }

/* Yellow pill (Ugaoo-style highlight). */
.cf-vs__pill {
  margin-top: 0.15rem;
  background: #f5c451;
  color: #3d2f00;
  font-family: var(--cf-font-body);
  font-size: 0.6875rem; font-weight: 700;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ---- Marks ---- */
.cf-vs__mk { display: grid; place-items: center; height: 1.75rem; width: 1.75rem; border-radius: 999px; flex-shrink: 0; }
.cf-vs__mk svg { width: 1.1rem; height: 1.1rem; }
.cf-vs__mk--yes { color: #f5c451; }              /* gold tick, like the reference */
.cf-vs__col-us .cf-vs__mk--yes { color: #ffd873; }
.cf-vs__mk--no { color: rgb(22 59 45 / 0.35); }
.cf-vs__col-us .cf-vs__mk--no { color: rgb(255 255 255 / 0.6); }
.cf-vs__mk--part { color: var(--cf-muted); }

/* ---- Footer (why + CTA) ---- */
.cf-vs__foot { margin-top: 2.5rem; text-align: center; }
.cf-vs__why { margin: 0 auto; max-width: 40rem; font-family: var(--cf-font-body); font-size: 1rem; line-height: 1.6; color: var(--cf-green); font-weight: 500; }
.cf-vs__cta {
  display: inline-flex; margin-top: 1.25rem;
  background: var(--cf-pink); color: #fff;
  font-family: var(--cf-font-body); font-size: 0.875rem; font-weight: 600;
  padding: 0.85rem 1.75rem; border-radius: 999px; text-decoration: none;
  transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease);
}
.cf-vs__cta:hover { transform: translateY(-2px); box-shadow: var(--cf-shadow-pink); }

/* ---- Entrance: enhance only ---- */
.cf-reveal-ready .cf-vs__card.cf-reveal:not(.cf-in) .cf-vs__row:not(.cf-vs__row--head) { opacity: 0; transform: translateY(12px); }
.cf-vs__card.cf-in .cf-vs__row:not(.cf-vs__row--head) {
  animation: cf-vs-row 0.5s var(--cf-ease) both;
  animation-delay: calc(var(--r, 0) * 70ms + 0.1s);
}
@keyframes cf-vs-row { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .cf-vs__card { --cf-vs-cols: 1.2fr 0.9fr 1fr 0.9fr; }
  .cf-vs__cell { padding: 1rem 0.5rem; }
  .cf-vs__cell--feat { font-size: 0.875rem; padding-left: 0.85rem; }
  .cf-vs__row--head .cf-vs__cell { font-size: 0.9375rem; }
  .cf-vs__ctext { font-size: 0.75rem; }
  .cf-vs__pill { font-size: 0.625rem; }
  .cf-vs__mk { height: 1.4rem; width: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-reveal-ready .cf-vs__card.cf-reveal:not(.cf-in) .cf-vs__row:not(.cf-vs__row--head) { opacity: 1; transform: none; }
  .cf-vs__card.cf-in .cf-vs__row:not(.cf-vs__row--head) { animation: none; }
}
/* END_SECTION:cf-comparison */

/* START_SECTION:cf-contact-cta (INDEX:15) */
.cf-cta {
  background: var(--cf-bg);
  padding-bottom: var(--cf-cta-pad, 128px);
}

.cf-cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: var(--cf-green);
  padding: var(--cf-cta-inner, 96px) 2rem;
}

@media (min-width: 768px) {
  .cf-cta__panel { padding: var(--cf-cta-inner, 96px) 4rem; }
}

/* Fractal-noise grain. Inlined rather than living in the global stylesheet —
   this is the only section that uses it, and a data URI costs no request. */
.cf-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cf-cta__orb {
  position: absolute;
  z-index: 0;
  height: 18rem;
  width: 18rem;
  border-radius: 999px;
  filter: blur(64px);
  pointer-events: none;
}

.cf-cta__orb--a {
  top: -6rem;
  right: -4rem;
  background: rgb(224 147 43 / 0.2);
}

.cf-cta__orb--b {
  bottom: -7rem;
  left: -2.5rem;
  background: rgb(224 147 43 / 0.1);
}

.cf-cta__diya {
  position: absolute;
  z-index: 1;
  bottom: 18px;
  right: 22px;
  width: 36px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.cf-cta__flame {
  animation: cf-cta-flicker 1.9s ease-in-out infinite;
  transform-origin: 20px 18px;
  transform-box: fill-box;
}

@keyframes cf-cta-flicker {
  0%, 100% { opacity: 1; transform: scaleY(1) translateY(0); }
  25% { opacity: .82; transform: scaleY(.9) translateY(1px); }
  55% { opacity: 1; transform: scaleY(1.08) translateY(-1px); }
  80% { opacity: .9; transform: scaleY(.95) translateY(0); }
}

@media (max-width: 480px) {
  .cf-cta__diya { display: none; }
}

.cf-cta__body {
  position: relative;
  z-index: 2;
  max-width: 42rem;
}

/* Not .cf-overline — that's pink on the pale page background. Here it sits on
   deep green, where the same pink loses its contrast. */
.cf-cta__overline {
  margin: 0 0 1.25rem;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--cf-track-overline);
  text-transform: uppercase;
  color: #f0b65c;
}

@media (min-width: 768px) { .cf-cta__overline { font-size: 0.875rem; } }

.cf-cta__title {
  margin: 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-cta-heading, 60px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: var(--cf-track-tight);
  color: #fff;
}

.cf-cta__text {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  font-family: var(--cf-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.8);
}

.cf-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  border-radius: 999px;
  background: var(--cf-pink);
  padding: 1rem 2rem;
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s var(--cf-ease), background-color 0.3s var(--cf-ease);
}

.cf-cta__btn:hover { transform: scale(1.03); }

.cf-cta__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cf-cta__wa { width: 1.25rem; height: 1.25rem; }

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

.cf-cta__btn--pulse { animation: cf-soft-pulse 2.4s ease-in-out infinite; }

@keyframes cf-soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(224 147 43 / 0.45); }
  50% { box-shadow: 0 0 0 14px rgb(224 147 43 / 0); }
}

/* An expanding ring that never stops is exactly the kind of persistent motion
   this setting exists to suppress. Kill it, don't slow it. */
@media (prefers-reduced-motion: reduce) {
  .cf-cta__btn--pulse { animation: none; }
  .cf-cta__btn:hover { transform: none; }
  .cf-cta__flame { animation: none; }
}
/* END_SECTION:cf-contact-cta */

/* START_SECTION:cf-corporate (INDEX:17) */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap");

/* Force Outfit across the whole corporate page, independent of theme state. */
.cf-co, .cf-co * { font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif; }
.cf-co { background: var(--cf-bg); color: var(--cf-text); }
.cf-co__sec { padding-block: var(--cf-co-pad, 120px); }
.cf-co__sec-head { max-width: 52rem; margin-bottom: 3.5rem; }

/* Shared heading treatment: big Outfit, pink italic emphasis via <em>. */
.cf-co__h2 {
  margin: 0.75rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--cf-green);
}
.cf-co__h2 em, .cf-co__hero-title em, .cf-co__final-title em, .cf-co__trust-title em, .cf-co__pers-title em {
  font-style: italic;
  color: var(--cf-pink);
}
.cf-co__h2--light { color: #fff; }
.cf-co__lead { margin: 1.25rem 0 0; font-size: 1.0625rem; line-height: 1.7; color: var(--cf-muted); max-width: 34rem; }
.cf-co__lead--light { color: rgb(255 255 255 / 0.75); }

/* Numbered eyebrow — the design's structural signature. */
.cf-co__eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 0.5rem;
  font-family: var(--cf-font-body);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cf-pink-ink);
}
.cf-co__eyebrow span { color: var(--cf-muted); font-variant-numeric: tabular-nums; }
.cf-co__eyebrow span::after { content: ""; display: inline-block; width: 2.5rem; height: 1px; background: var(--cf-green-20); margin-left: 0.75rem; vertical-align: middle; }
.cf-co__eyebrow--light { color: #ffd873; }
.cf-co__eyebrow--light span { color: rgb(255 255 255 / 0.5); }
.cf-co__eyebrow--center { justify-content: center; }
.cf-co__eyebrow--center span { display: none; }

/* --- Buttons --- */
.cf-co__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.75rem; border-radius: 999px;
  font-family: var(--cf-font-body); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease), background-color 0.25s var(--cf-ease);
}
.cf-co__btn svg { width: 1.15rem; height: 1.15rem; }
.cf-co__btn--pink { background: var(--cf-pink); color: #fff; }
.cf-co__btn--pink:hover { transform: translateY(-2px); box-shadow: var(--cf-shadow-pink); }
.cf-co__btn--green { background: var(--cf-green); color: #fff; }
.cf-co__btn--green:hover { transform: translateY(-2px); background: #0f2a20; }
.cf-co__btn--ghost { background: transparent; border-color: rgb(255 255 255 / 0.4); color: #fff; }
.cf-co__btn--ghost:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); }
.cf-co__btn--dark { border-color: var(--cf-green-20); color: var(--cf-green); }
.cf-co__btn--dark:hover { border-color: var(--cf-green); background: var(--cf-green-10); }

/* ============ 1. HERO ============ */
.cf-co__hero {
  position: relative;
  min-height: min(90vh, 800px);
  display: flex; align-items: center;
  padding-top: calc(var(--cf-header-clear, 0px) + 3rem);
  padding-bottom: 5rem;
  overflow: hidden;
  isolation: isolate;
}
.cf-co__hero-bg { position: absolute; inset: 0; z-index: -1; }
.cf-co__hero-img { width: 100%; height: 100%; object-fit: cover; }
.cf-co__hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(22 59 45 / 0.82) 0%, rgb(22 59 45 / 0.55) 45%, rgb(22 59 45 / 0.2) 100%);
}
.cf-co__hero-inner { position: relative; z-index: 1; width: 100%; }

.cf-co__hero-eyebrow {
  margin: 0 0 1.5rem; font-family: var(--cf-font-body);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}
.cf-co__hero-title {
  margin: 0; max-width: 16ch;
  font-family: var(--cf-font-heading);
  font-size: clamp(3.25rem, 8.5vw, 7.5rem);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.03em;
  color: #fff;
}
.cf-co__hero-sub { margin: 1.75rem 0 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.7; color: rgb(255 255 255 / 0.85); }
.cf-co__hero-cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ============ 2. TRUSTED BY ============ */
.cf-co__trust { text-align: center; padding-bottom: calc(var(--cf-co-pad, 120px) * 0.7); }
.cf-co__trust .cf-co__eyebrow { justify-content: center; }
.cf-co__trust-title {
  max-width: 40rem; margin: 0.75rem auto 0;
  font-family: var(--cf-font-heading); font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--cf-green);
}
.cf-co__marquee { margin-top: 3rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cf-co__marquee-track { display: inline-flex; gap: 1rem; padding-left: 1rem; animation: cf-co-scroll 40s linear infinite; will-change: transform; }
.cf-co__pill {
  display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  border: 1px solid var(--cf-green-10); background: var(--cf-card);
  font-family: var(--cf-font-body); font-size: 1rem; font-weight: 500; color: var(--cf-green);
}
.cf-co__pill i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--cf-pink); flex-shrink: 0; }
.cf-co__pill { transition: border-color 0.25s var(--cf-ease); }
.cf-co__pill:hover { border-color: var(--cf-pink); }
@keyframes cf-co-scroll { to { transform: translateX(-50%); } }
.cf-co__trust-note { margin: 2.5rem 0 0; font-size: 0.9375rem; color: var(--cf-muted); }

/* ============ 3. SOLUTIONS ============ */
.cf-co__sol-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .cf-co__sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cf-co__sol-grid { grid-template-columns: repeat(4, 1fr); } }
.cf-co__sol {
  position: relative; border-radius: var(--cf-radius); overflow: hidden;
  min-height: 22rem; display: flex; align-items: flex-end;
  background: var(--cf-green);
}
.cf-co__sol-img { position: absolute; inset: 0; }
.cf-co__sol-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--cf-ease); }
.cf-co__sol:hover .cf-co__sol-img img { transform: scale(1.06); }
.cf-co__sol::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(22 59 45 / 0.85) 100%); }
.cf-co__sol-body { position: relative; z-index: 1; padding: 1.75rem; color: #fff; }
.cf-co__sol-title { margin: 0 0 0.5rem; font-family: var(--cf-font-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.15; }
.cf-co__sol-body p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: rgb(255 255 255 / 0.85); }
.cf-co__sol-cta { display: flex; justify-content: center; margin-top: 3rem; }

/* ============ 4. WHY US ============ */
.cf-co__why-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .cf-co__why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cf-co__why-grid { grid-template-columns: repeat(3, 1fr); } }
.cf-co__why {
  position: relative; padding: 2.5rem 2rem;
  border: 1px solid var(--cf-green-10);
  margin: -0.5px;
  background: var(--cf-card);
  transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease), border-color 0.25s var(--cf-ease);
}
.cf-co__why:hover {
  transform: translateY(-4px);
  border-color: var(--cf-pink);
  box-shadow: 0 18px 40px rgb(22 59 45 / 0.1);
  z-index: 2;
}
.cf-co__why-num { position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--cf-font-body); font-size: 0.75rem; color: var(--cf-green-20); font-variant-numeric: tabular-nums; }
.cf-co__why-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: var(--cf-green); color: #fff; margin-bottom: 1.25rem; }
.cf-co__why-icon :is(svg) { width: 1.4rem; height: 1.4rem; }
.cf-co__why-title { margin: 0 0 0.5rem; font-family: var(--cf-font-heading); font-size: 1.25rem; font-weight: 600; color: var(--cf-green); }
.cf-co__why p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cf-muted); }

/* ============ 5. PERSONALISATION ============ */
.cf-co__pers { background: var(--cf-green); color: #fff; }
.cf-co__pers-top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3.5rem; align-items: center; }
@media (min-width: 900px) { .cf-co__pers-top { grid-template-columns: 1.15fr 0.85fr; gap: 4.5rem; } }
.cf-co__pers-img { border-radius: var(--cf-radius); overflow: hidden; min-height: 30rem; }
.cf-co__pers-img img { width: 100%; height: 100%; min-height: 30rem; object-fit: cover; display: block; }
.cf-co__pers-intro { min-width: 0; }
.cf-co__pers-title { margin: 0.75rem 0 0; }
.cf-co__brand-grid { display: grid; grid-template-columns: 1fr; gap: 2rem 2.5rem; }
@media (min-width: 640px) { .cf-co__brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cf-co__brand-grid { grid-template-columns: repeat(3, 1fr); } }
.cf-co__brand-icon { display: inline-flex; color: var(--cf-pink); margin-bottom: 0.75rem; }
.cf-co__brand-icon :is(svg) { width: 1.5rem; height: 1.5rem; }
.cf-co__brand-title { margin: 0 0 0.4rem; font-family: var(--cf-font-heading); font-size: 1.125rem; font-weight: 600; color: #fff; }
.cf-co__brand p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgb(255 255 255 / 0.7); }
.cf-co__brand { padding: 1.25rem; margin: -1.25rem; border-radius: 14px; transition: background-color 0.25s var(--cf-ease); }
.cf-co__brand:hover { background: rgb(255 255 255 / 0.05); }
.cf-co__brand-icon { transition: transform 0.25s var(--cf-ease); }
.cf-co__brand:hover .cf-co__brand-icon { transform: scale(1.15); }

/* ============ 6. PROCESS ============ */
.cf-co__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2.5rem; counter-reset: step; }
/* Connector line running through all step icons, full row width. */
@media (min-width: 1100px) {
  .cf-co__steps::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 8%; right: 8%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cf-green-20) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
}
@media (min-width: 700px) { .cf-co__steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cf-co__steps { grid-template-columns: repeat(6, 1fr); } }
.cf-co__step { text-align: center; position: relative; }
.cf-co__step-icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 999px; background: var(--cf-card); border: 1px solid var(--cf-green-10); color: var(--cf-green); margin-bottom: 1rem; position: relative; z-index: 1; transition: border-color 0.25s var(--cf-ease), transform 0.25s var(--cf-ease); }
.cf-co__step:hover .cf-co__step-icon { border-color: var(--cf-pink); transform: translateY(-3px); }
.cf-co__step-icon :is(svg) { width: 1.5rem; height: 1.5rem; }
.cf-co__step-num { position: absolute; top: -0.4rem; right: calc(50% - 2.4rem); z-index: 2; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--cf-pink); color: #fff; font-family: var(--cf-font-body); font-size: 0.75rem; font-weight: 700; }
.cf-co__step-title { margin: 0 0 0.4rem; font-family: var(--cf-font-heading); font-size: 1.0625rem; font-weight: 600; color: var(--cf-green); }
.cf-co__step p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--cf-muted); }

/* ============ 7. BUDGET ============ */
.cf-co__tier-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 700px) { .cf-co__tier-grid { grid-template-columns: repeat(3, 1fr); } }
.cf-co__tier {
  position: relative; display: block; text-decoration: none;
  padding: 2.75rem 2.5rem; border-radius: var(--cf-radius); min-height: 16rem;
  border: 1px solid var(--cf-green-10); background: var(--cf-card);
  transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease), border-color 0.25s var(--cf-ease);
}
.cf-co__tier:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgb(22 59 45 / 0.08); border-color: var(--cf-pink); }
.cf-co__tier-link { position: absolute; inset: 0; z-index: 2; }
.cf-co__tier.is-featured { border-color: var(--cf-pink); }
/* Bespoke / custom-quote card — green like the mockup. */
.cf-co__tier--dark { background: var(--cf-green); border-color: var(--cf-green); }
.cf-co__tier--dark .cf-co__tier-eyebrow { color: #ffd873; }
.cf-co__tier--dark .cf-co__tier-range { color: #fff; }
.cf-co__tier--dark p { color: rgb(255 255 255 / 0.75); }
.cf-co__tier--dark:hover { border-color: var(--cf-pink); transform: translateY(-4px); }

.cf-co__tier-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem;
  background: var(--cf-pink); color: #fff;
  font-family: var(--cf-font-body); font-size: 0.875rem; font-weight: 600;
  padding: 0.75rem 1.5rem; border-radius: 999px; text-decoration: none;
  position: relative; z-index: 3;
  transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease);
}
.cf-co__tier-btn svg { width: 1.1rem; height: 1.1rem; }
.cf-co__tier-btn:hover { transform: translateY(-2px); box-shadow: var(--cf-shadow-pink); }
.cf-co__tier-eyebrow { display: block; font-family: var(--cf-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-pink-ink); margin-bottom: 1rem; }
.cf-co__tier-range { display: block; font-family: var(--cf-font-heading); font-size: 1.75rem; font-weight: 600; color: var(--cf-green); letter-spacing: -0.01em; }
.cf-co__tier p { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cf-muted); }
.cf-co__tier-arrow { display: inline-flex; margin-top: 1.5rem; color: var(--cf-pink); }
.cf-co__tier-arrow :is(svg) { width: 1.25rem; height: 1.25rem; }

/* ============ 8. INDUSTRIES ============ */
.cf-co__ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--cf-green-10); border-radius: var(--cf-radius); overflow: hidden; }
@media (min-width: 700px) { .cf-co__ind-grid { grid-template-columns: repeat(4, 1fr); } }
.cf-co__ind { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1rem; text-align: center; border-right: 1px solid var(--cf-green-10); border-bottom: 1px solid var(--cf-green-10); transition: background-color 0.25s var(--cf-ease); }
.cf-co__ind:hover { background: var(--cf-green); }
.cf-co__ind:hover .cf-co__ind-name { color: #fff; }
.cf-co__ind:hover .cf-co__ind-icon { border-color: rgb(255 255 255 / 0.3); color: #fff; }
.cf-co__ind-name, .cf-co__ind-icon { transition: color 0.25s var(--cf-ease), border-color 0.25s var(--cf-ease); }
.cf-co__ind-icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; border: 1px solid var(--cf-green-10); color: var(--cf-pink); }
.cf-co__ind-icon :is(svg) { width: 1.5rem; height: 1.5rem; }
.cf-co__ind-name { font-family: var(--cf-font-heading); font-size: 1.0625rem; font-weight: 600; color: var(--cf-green); }

/* ============ 9. GALLERY ============ */
.cf-co__gal-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .cf-co__gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cf-co__gal-grid { grid-template-columns: repeat(4, 1fr); } }
.cf-co__gal { position: relative; margin: 0; border-radius: var(--cf-radius); overflow: hidden; aspect-ratio: 3 / 4; }
.cf-co__gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--cf-ease); }
.cf-co__gal:hover img { transform: scale(1.05); }
.cf-co__gal-ph { width: 100%; height: 100%; object-fit: cover; background: var(--cf-green-10); }
.cf-co__gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; font-family: var(--cf-font-body); font-size: 0.8125rem; color: #fff; background: linear-gradient(180deg, transparent, rgb(22 59 45 / 0.8)); }

/* ============ 9b. TESTIMONIALS ============ */
.cf-co__tst { background: var(--cf-green); color: #fff; text-align: center; overflow: hidden; }
.cf-co__tst-mark { display: flex; justify-content: center; margin: 2rem 0 2.5rem; color: var(--cf-pink); }
.cf-co__tst-mark svg { width: 3.5rem; height: auto; }
.cf-co__tst-viewport { max-width: 52rem; margin: 0 auto; overflow: hidden; }
.cf-co__tst-track { display: flex; transition: transform 0.5s var(--cf-ease); }
.cf-co__tst-slide { flex: 0 0 100%; margin: 0; padding: 0 1rem; }
.cf-co__tst-quote {
  margin: 0; font-family: var(--cf-font-heading);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem); font-weight: 500; line-height: 1.3;
  letter-spacing: -0.01em; color: #fff;
}
.cf-co__tst-by { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.cf-co__tst-name { font-family: var(--cf-font-heading); font-size: 1.125rem; font-weight: 600; color: #fff; }
.cf-co__tst-role { font-family: var(--cf-font-body); font-size: 0.9375rem; color: rgb(255 255 255 / 0.65); }
.cf-co__tst-nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; }
.cf-co__tst-arrow {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.25);
  background: none; color: #fff; cursor: pointer;
  transition: background-color 0.2s var(--cf-ease), border-color 0.2s var(--cf-ease);
}
.cf-co__tst-arrow svg { width: 1.25rem; height: 1.25rem; }
.cf-co__tst-arrow:hover { background: var(--cf-pink); border-color: var(--cf-pink); }
.cf-co__tst-dots { display: flex; align-items: center; gap: 0.5rem; }
.cf-co__tst-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 999px; border: 0; padding: 0;
  background: rgb(255 255 255 / 0.3); cursor: pointer;
  transition: width 0.3s var(--cf-ease), background-color 0.3s var(--cf-ease);
}
.cf-co__tst-dot.is-active { width: 1.75rem; background: var(--cf-pink); border-radius: 999px; }

/* ============ 10. FAQ ============ */
.cf-co__faq-wrap { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 900px) { .cf-co__faq-wrap { grid-template-columns: 0.85fr 1.15fr; gap: 5rem; align-items: start; } }
.cf-co__faq-intro .cf-co__h2 { margin-top: 0.75rem; }
.cf-co__faq-intro .cf-co__btn { margin-top: 2rem; }
.cf-co__faq-list { border-top: 1px solid var(--cf-green-10); }
.cf-co__faq-item { border-bottom: 1px solid var(--cf-green-10); }
.cf-co__faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; cursor: pointer; list-style: none; font-family: var(--cf-font-heading); font-size: 1.0625rem; font-weight: 600; color: var(--cf-green); }
.cf-co__faq-item summary::-webkit-details-marker { display: none; }
.cf-co__faq-item summary span { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.cf-co__faq-item summary span::before, .cf-co__faq-item summary span::after { content: ""; position: absolute; background: var(--cf-pink); transition: transform 0.3s var(--cf-ease), opacity 0.3s var(--cf-ease); }
.cf-co__faq-item summary span::before { inset: 6px 0; height: 2px; }
.cf-co__faq-item summary span::after { inset: 0 6px; width: 2px; }
.cf-co__faq-item[open] summary { color: var(--cf-pink-ink); }
.cf-co__faq-item[open] summary span::after { transform: scaleY(0); opacity: 0; }
.cf-co__faq-a { padding-bottom: 1.5rem; font-family: var(--cf-font-body); font-size: 0.9375rem; line-height: 1.7; color: var(--cf-muted); }
.cf-co__faq-a p { margin: 0 0 0.75rem; } .cf-co__faq-a p:last-child { margin: 0; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .cf-co__faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.32s var(--cf-ease), content-visibility 0.32s allow-discrete; }
  .cf-co__faq-item[open]::details-content { block-size: auto; }
}

/* ============ 11. FINAL CTA ============ */
.cf-co__final { background: var(--cf-bg); padding-block: var(--cf-co-pad, 120px); text-align: center; overflow: hidden; }
.cf-co__final-marquee { overflow: hidden; margin-bottom: 4rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cf-co__final-track { display: inline-flex; align-items: center; gap: 2rem; animation: cf-co-scroll 30s linear infinite; }
.cf-co__final-track span { font-family: var(--cf-font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px var(--cf-green-20); white-space: nowrap; }
.cf-co__final-track i { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--cf-pink); flex-shrink: 0; }
.cf-co__final-inner { max-width: 46rem; }
.cf-co__final-title { margin: 1rem 0 0; font-family: var(--cf-font-heading); font-size: clamp(3rem, 8vw, 6rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; color: var(--cf-green); }
.cf-co__final-sub { margin: 1.75rem auto 0; max-width: 36rem; font-size: 1.0625rem; line-height: 1.7; color: var(--cf-muted); }
.cf-co__final-cta { justify-content: center; margin-top: 2.5rem; }

/* --- Reveal (enhance only) --- */
.cf-reveal-ready .cf-co .cf-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--cf-ease), transform 0.7s var(--cf-ease); }
.cf-reveal-ready .cf-co .cf-reveal.cf-in { opacity: 1; transform: none; }
.cf-co [style*="--r"].cf-in { transition-delay: calc(var(--r, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .cf-co__marquee-track, .cf-co__final-track { animation: none; }
  .cf-reveal-ready .cf-co .cf-reveal { opacity: 1; transform: none; transition: none; }
}
/* --- Build my gifting programme: quote popup --- */
.cfco-quote-popup { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(15 42 32 / 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.cfco-quote-popup.is-open { opacity: 1; visibility: visible; }
.cfco-quote-popup__box { position: relative; width: min(600px, 100%); max-height: 90vh; overflow-y: auto; padding: 42px; border-radius: 26px; background: #fff; color: var(--cf-green); box-shadow: 0 30px 80px rgb(0 0 0 / 0.25); transform: translateY(20px) scale(.98); transition: transform 0.3s ease; }
.cfco-quote-popup.is-open .cfco-quote-popup__box { transform: translateY(0) scale(1); }
.cfco-quote-popup__close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cf-green-10, #eef3f0); color: var(--cf-green); font-size: 24px; font-weight: 300; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.cfco-quote-popup__close:hover { background: var(--cf-pink); color: #fff; transform: rotate(5deg); }
.cfco-quote-popup__heading { margin: 0 50px 8px 0; font-family: var(--cf-font-heading); color: var(--cf-green); font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.cfco-quote-popup__intro { margin: 0 0 26px; color: var(--cf-muted); font-size: 15px; line-height: 1.55; }
.cfco-quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfco-quote-form__field { display: flex; flex-direction: column; }
.cfco-quote-form__field--full { grid-column: 1 / -1; }
.cfco-quote-form label { margin-bottom: 8px; color: var(--cf-green); font-size: 14px; font-weight: 500; }
.cfco-quote-form input, .cfco-quote-form textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--cf-green-20, #dce4dd); border-radius: 12px; outline: none; background: #fff; color: var(--cf-green); font-family: inherit; font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease; }
.cfco-quote-form input { min-height: 50px; }
.cfco-quote-form textarea { min-height: 100px; resize: vertical; }
.cfco-quote-form input:focus, .cfco-quote-form textarea:focus { border-color: var(--cf-pink); box-shadow: 0 0 0 3px rgb(247 84 142 / 0.10); }
.cfco-quote-form__submit { grid-column: 1 / -1; width: 100%; margin-top: 4px; padding: 15px 22px; border: 0; border-radius: 12px; background: var(--cf-green); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.cfco-quote-form__submit:hover { background: var(--cf-pink); transform: translateY(-2px); }
.cfco-quote-form__success { padding: 30px 10px 10px; text-align: center; }
.cfco-quote-form__success-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--cf-green-10, #eaf2ec); color: var(--cf-green); font-size: 24px; }
.cfco-quote-form__success h3 { margin: 0 0 10px; color: var(--cf-green); font-size: 26px; font-weight: 600; }
.cfco-quote-form__success p { margin: 0; color: var(--cf-muted); font-size: 15px; line-height: 1.5; }
@media screen and (max-width: 600px) {
  .cfco-quote-form { grid-template-columns: 1fr; }
  .cfco-quote-form__field--full { grid-column: auto; }
  .cfco-quote-popup__box { padding: 30px 22px; }
}
/* END_SECTION:cf-corporate */

/* START_SECTION:cf-decor-accessories (INDEX:18) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');


.cf-decor {

  --decor-green: #5c1024;

  --decor-pink: #e0932b;

  --decor-muted: #7e8791;

  padding: clamp(3rem, 6vw, 6rem) 1.25rem;

  background: #fcfcfa;

  font-family: Outfit, sans-serif;

}


.cf-decor *,
.cf-decor *::before,
.cf-decor *::after {

  box-sizing: border-box;

}


.cf-decor__shell {

  width: min(100%, 1430px);

  margin: auto;

  padding: clamp(3rem, 5vw, 5rem);

  overflow: hidden;

  border-radius: 1.8rem;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(248, 92, 145, .13),
      transparent 28rem
    ),
    var(--decor-green);

  color: #fff;

}


.cf-decor__header {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 3rem;

  margin-bottom: clamp(2.6rem, 4vw, 4rem);

}


.cf-decor__header p {

  margin: 0 0 1rem;

  color: var(--decor-pink);

  font-family: Outfit, sans-serif;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: .18em;

  text-transform: uppercase;

}


.cf-decor__header h2 {

  margin: 0;

  font-family: Outfit, sans-serif;

  font-size: clamp(3.8rem, 5.5vw, 6.2rem);

  font-weight: 700;

  line-height: .95;

  letter-spacing: -.05em;

  color: #fff;

}


.cf-decor__intro {

  max-width: 28rem;

  color: rgba(255,255,255,.78);

  font-family: Outfit, sans-serif;

  font-size: 1.2rem;

  line-height: 1.7;

}


.cf-decor__intro p {

  margin: 0;

}


.cf-decor__grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: clamp(1rem, 2vw, 1.6rem);

}


.cf-decor__card {

  display: flex;

  min-width: 0;

  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.18);

  border-radius: 1.4rem;

  background: #fff;

  color: var(--decor-green);

  box-shadow: 0 12px 28px rgba(0,0,0,.12);

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.cf-decor__card:hover {

  transform: translateY(-9px);

  box-shadow: 0 23px 42px rgba(0,0,0,.26);

}


.cf-decor__image-link {

  display: block;

  color: inherit;

  text-decoration: none;

}


.cf-decor__image-wrap {

  position: relative;

  overflow: hidden;

  aspect-ratio: 1.18 / 1;

  background: #e9eeeb;

}


.cf-decor__image,
.cf-decor__placeholder {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .7s cubic-bezier(.2,.72,.25,1),
    filter .3s ease;

}


.cf-decor__card:hover .cf-decor__image {

  transform: scale(1.09);

  filter: saturate(1.08);

}


.cf-decor__quick {

  position: absolute;

  right: .8rem;

  bottom: .8rem;

  padding: .52rem .7rem;

  border-radius: 99px;

  background: #fff;

  color: var(--decor-green);

  font-size: .7rem;

  font-weight: 700;

  opacity: 0;

  transform: translateY(.6rem);

  transition:
    opacity .25s ease,
    transform .25s ease;

}


.cf-decor__quick b {

  color: var(--decor-pink);

  font-size: .95rem;

}


.cf-decor__card:hover .cf-decor__quick {

  opacity: 1;

  transform: none;

}


.cf-decor__details {

  padding: 1.3rem 1.3rem 0;

}


.cf-decor__name {

  display: flex;

  align-items: start;

  justify-content: space-between;

  gap: .7rem;

}


.cf-decor__name h3 {

  margin: 0;

  font-family: Outfit, sans-serif;

  font-size: clamp(1.45rem, 1.7vw, 1.8rem);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -.03em;

}


.cf-decor__name h3 a {

  color: inherit;

  text-decoration: none;

}


.cf-decor__name strong {

  flex: none;

  font-family: Outfit, sans-serif;

  font-size: 1.25rem;

  font-weight: 700;

}


.cf-decor__sub {

  display: flex;

  justify-content: space-between;

  gap: .7rem;

  margin-top: .7rem;

  color: var(--decor-muted);

  font-family: Outfit, sans-serif;

  font-size: 1rem;

  line-height: 1.6;

}


.cf-decor__sub small {

  flex: none;

  font: inherit;

}


/* VARIANT SELECTOR */

.cf-decor__variant-selector {

  margin-top: 1.15rem;

  padding-top: 1rem;

  border-top: 1px solid rgba(92, 16, 36,.1);

}


.cf-decor__variant-heading {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: .7rem;

  margin-bottom: .7rem;

  font-size: .76rem;

}


.cf-decor__variant-heading span {

  color: var(--decor-muted);

  font-weight: 500;

}


.cf-decor__variant-heading strong {

  color: var(--decor-green);

  font-size: .78rem;

  font-weight: 700;

  text-align: right;

}


/* VARIANT BUTTONS */

.cf-decor__variant-options {

  display: flex;

  flex-wrap: wrap;

  gap: .45rem;

}


.cf-decor__variant-option {

  appearance: none;

  border: 1px solid rgba(92, 16, 36,.18);

  border-radius: 999px;

  background: #fff;

  color: var(--decor-green);

  padding: .55rem .8rem;

  font-family: Outfit, sans-serif;

  font-size: .72rem;

  font-weight: 600;

  line-height: 1;

  cursor: pointer;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;

}


.cf-decor__variant-option:hover {

  border-color: var(--decor-green);

  transform: translateY(-1px);

}


.cf-decor__variant-option.is-selected {

  background: var(--decor-green);

  border-color: var(--decor-green);

  color: #fff;

}


/* ADD TO CART */

.cf-decor__form {

  margin-top: auto;

  padding: 1.25rem 1.3rem 1.35rem;

}


.cf-decor__add {

  width: 100%;

  min-height: 3.6rem;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: .65rem;

  padding: 0 1.5rem;

  border: none;

  border-radius: 999px;

  background: var(--decor-pink);

  color: #fff !important;

  cursor: pointer;

  text-decoration: none !important;

  font-family: Outfit, sans-serif !important;

  font-size: 1rem !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: .02em;

  opacity: 1 !important;

  visibility: visible !important;

  -webkit-text-fill-color: #fff !important;

  transition:
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

}


.cf-decor__add > span:first-child {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #fff !important;

  font-size: 1.45rem !important;

  font-weight: 400;

  transition: transform .25s ease;

}


.cf-decor__add:hover:not([disabled]) {

  background: var(--decor-green);

  transform: translateY(-2px);

  box-shadow: 0 10px 18px rgba(92, 16, 36,.2);

}


.cf-decor__add:hover:not([disabled]) > span:first-child {

  transform: rotate(90deg);

}


.cf-decor__add[disabled] {

  opacity: .5 !important;

  cursor: not-allowed;

}


/* TABLET */

@media (max-width: 989px) {

  .cf-decor__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .cf-decor__image-wrap {

    aspect-ratio: 1.45 / 1;

  }

}


/* MOBILE */

@media (max-width: 649px) {

  .cf-decor {

    padding: 1rem;

  }

  .cf-decor__shell {

    padding: 2.2rem 1.2rem;

    border-radius: 1.35rem;

  }

  .cf-decor__header {

    display: block;

  }

  .cf-decor__intro {

    margin-top: 1.5rem;

  }

  .cf-decor__grid {

    grid-template-columns: 1fr;

  }

  .cf-decor__image-wrap {

    aspect-ratio: 1.3 / 1;

  }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .cf-decor * {

    transition-duration: .01ms !important;

  }

}
/* END_SECTION:cf-decor-accessories */

/* START_SECTION:cf-essentials-grid (INDEX:19) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');


  .cf-essentials {

    --cf-essential-green: #5c1024;

    --cf-essential-pink: #e0932b;

    --cf-essential-muted: #78818d;

    background: #fff8ec;

    color: var(--cf-essential-green);

  }


  .cf-essentials,
  .cf-essentials * {

    font-family: 'Outfit', sans-serif;

  }


  .cf-essentials *,
  .cf-essentials *::before,
  .cf-essentials *::after {

    box-sizing: border-box;

  }


  .cf-essentials__wrap {

    width: min(100% - 2.5rem, 1280px);

    margin: auto;

    padding: clamp(5rem, 8vw, 8.5rem) 0;

  }


  .cf-essentials__heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 3rem;

    margin-bottom: clamp(2.75rem, 4.8vw, 4.5rem);

  }


  .cf-essentials__heading p {

    margin: 0 0 1rem;

    color: var(--cf-essential-pink);

    font-size: .95rem;

    font-weight: 600;

    letter-spacing: .22em;

    text-transform: uppercase;

  }


  .cf-essentials__heading h2 {

    margin: 0;

    font-size: clamp(4rem, 6vw, 6.5rem);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -.04em;

  }


  .cf-essentials__intro {

    max-width: 29rem;

    color: var(--cf-essential-muted);

    font-size: 1.18rem;

    line-height: 1.8;

    letter-spacing: .01em;

  }


  .cf-essentials__intro p {

    margin: 0;

  }


  .cf-essentials__grid {

    display: grid;

    grid-template-columns:
      1.15fr
      .85fr
      .85fr;

    grid-auto-rows: minmax(20rem, auto);

    gap: clamp(1.25rem, 2.2vw, 2rem);

  }


  .cf-essentials__card {

    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(92, 16, 36, .1);

    border-radius: 1.5rem;

    background: #fff;

    box-shadow: 0 10px 25px rgba(92, 16, 36, .035);

    transition:
      transform .32s ease,
      border-color .32s ease,
      box-shadow .32s ease;

  }


  .cf-essentials__card--featured {

    grid-row: span 2;

  }


  .cf-essentials__card:hover {

    border-color: #e0932b;

    box-shadow: 0 18px 40px rgba(224, 147, 43, .18);

    transform: translateY(-6px);

  }


  .cf-essentials__image-link {

    display: block;

    color: inherit;

    text-decoration: none;

  }


  .cf-essentials__image-wrap {

    position: relative;

    overflow: hidden;

    aspect-ratio: 3 / 4;

    background: #edf2ef;

  }


  .cf-essentials__card--featured
  .cf-essentials__image-wrap {

    aspect-ratio: 3 / 4;

  }


  .cf-essentials__image,
  .cf-essentials__placeholder {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
      transform .7s cubic-bezier(.2,.72,.25,1),
      filter .3s ease;

  }


  .cf-essentials__badge {

    position: absolute;

    top: 1rem;

    left: 1rem;

    padding: .52rem .78rem;

    border-radius: 999px;

    background: var(--cf-essential-pink);

    color: #fff;

    font-size: .73rem;

    font-weight: 700;

  }


  .cf-essentials__view {

    position: absolute;

    right: 1rem;

    bottom: 1rem;

    padding: .6rem .85rem;

    border-radius: 999px;

    background: rgba(255,255,255,.94);

    color: var(--cf-essential-green);

    font-size: .72rem;

    font-weight: 700;

    opacity: 0;

    transform: translateY(.65rem);

    transition:
      opacity .25s ease,
      transform .25s ease,
      background-color .25s ease;

  }


  .cf-essentials__view b {

    color: var(--cf-essential-pink);

    font-size: 1rem;

  }


  .cf-essentials__card:hover
  .cf-essentials__image {

    transform: scale(1.07);

    filter: saturate(1.12);

  }


  .cf-essentials__card:hover
  .cf-essentials__view {

    opacity: 1;

    transform: none;

  }


  .cf-essentials__details {

    padding: 1.45rem 1.45rem 0;

  }


  .cf-essentials__name-row,
  .cf-essentials__sub-row {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

  }


  .cf-essentials__name-row {

    align-items: start;

  }


  .cf-essentials__name-row h3 {

    margin: 0;

    font-size: clamp(1.45rem, 2vw, 1.8rem);

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: -.02em;

  }


  .cf-essentials__name-row h3 a {

    color: inherit;

    text-decoration: none;

    transition: color .2s ease;

  }


  .cf-essentials__name-row > span {

    flex: none;

    font-size: 1.25rem;

    font-weight: 600;

    letter-spacing: -.01em;

  }


  .cf-essentials__sub-row {

    align-items: baseline;

    margin-top: .55rem;

  }


  .cf-essentials__sub-row p,
  .cf-essentials__sub-row small,
  .cf-essentials__feature-copy {

    margin-top: 1.4rem;

    font-size: 1.08rem;

    line-height: 1.85;

  }


  .cf-essentials__sub-row p {

    margin-bottom: 0;

  }


  .cf-essentials__sub-row small {

    flex: none;

  }


  .cf-essentials__feature-copy {

    margin-top: 1.2rem;

    font-size: .96rem;

    line-height: 1.58;

  }


  /* =========================
     COLOUR SELECTOR
     ========================= */

  .cf-essentials__variant {

    margin-top: 1.35rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(92, 16, 36,.08);

  }


  .cf-essentials__variant-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: .8rem;

    font-size: .82rem;

    color: var(--cf-essential-muted);

  }


  .cf-essentials__variant-heading strong {

    color: var(--cf-essential-green);

    font-weight: 600;

  }


  .cf-essentials__swatches {

    display: flex;

    flex-wrap: wrap;

    gap: .55rem;

  }


  .cf-essentials__swatch {

    width: 2rem;

    height: 2rem;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid rgba(92, 16, 36,.18);

    border-radius: 50%;

    background: #fff;

    cursor: pointer;

    transition:
      transform .2s ease,
      border-color .2s ease,
      box-shadow .2s ease;

  }


  .cf-essentials__swatch:hover {

    transform: translateY(-2px);

  }


  .cf-essentials__swatch.is-active {

    border-color: var(--cf-essential-green);

    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px var(--cf-essential-green);

  }


  .cf-essentials__swatch-dot {

    width: 1.25rem;

    height: 1.25rem;

    display: block;

    border-radius: 50%;

    background: var(--swatch-color);

  }


  /*
    Automatic visual colour mapping.

    These classes make common product colour names
    look like their actual colours.
  */

  .cf-swatch-pink .cf-essentials__swatch-dot,
  .cf-swatch-rose .cf-essentials__swatch-dot {

    background: #e0932b !important;

  }


  .cf-swatch-red .cf-essentials__swatch-dot {

    background: #d63c3c !important;

  }


  .cf-swatch-green .cf-essentials__swatch-dot {

    background: #387a4b !important;

  }


  .cf-swatch-dark-green .cf-essentials__swatch-dot,
  .cf-swatch-forest-green .cf-essentials__swatch-dot {

    background: #5c1024 !important;

  }


  .cf-swatch-blue .cf-essentials__swatch-dot {

    background: #4779b8 !important;

  }


  .cf-swatch-yellow .cf-essentials__swatch-dot {

    background: #e5c443 !important;

  }


  .cf-swatch-orange .cf-essentials__swatch-dot {

    background: #ed8a35 !important;

  }


  .cf-swatch-purple .cf-essentials__swatch-dot {

    background: #7859bd !important;

  }


  .cf-swatch-white .cf-essentials__swatch-dot {

    background: #f7f7f2 !important;

  }


  .cf-swatch-black .cf-essentials__swatch-dot {

    background: #1b1b1b !important;

  }


  .cf-swatch-brown .cf-essentials__swatch-dot {

    background: #8b5e3c !important;

  }


  .cf-swatch-beige .cf-essentials__swatch-dot {

    background: #d9c7a3 !important;

  }


  .cf-swatch-grey .cf-essentials__swatch-dot,
  .cf-swatch-gray .cf-essentials__swatch-dot {

    background: #9a9a9a !important;

  }


  .cf-swatch-cream .cf-essentials__swatch-dot {

    background: #eee5cf !important;

  }


  .cf-swatch-natural .cf-essentials__swatch-dot {

    background: #c9aa7a !important;

  }


  /* =========================
     ADD TO CART
     ========================= */

  .cf-essentials__form {

    margin-top: auto;

    padding: 1.45rem;

  }


  .cf-essentials__add {

    width: 100%;

    min-height: 3.8rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .65rem;

    border: 0;

    border-radius: 999px;

    background: var(--cf-essential-pink);

    color: #fff;

    cursor: pointer;

    font: 600 1.05rem/1 'Outfit', sans-serif;

    text-decoration: none;

    transition:
      all .3s ease;

  }


  .cf-essentials__add span:first-child {

    font-size: 1.35rem;

    font-weight: 400;

    transition: transform .25s ease;

  }


  .cf-essentials__add:hover:not([disabled]) {

    background: var(--cf-essential-green);

    box-shadow:
      0 11px 22px rgba(92, 16, 36,.22);

    transform: translateY(-2px);

  }


  .cf-essentials__add:hover:not([disabled])
  span:first-child {

    transform: rotate(90deg);

  }


  .cf-essentials__add[disabled] {

    opacity: .48;

    cursor: not-allowed;

  }


  .cf-essentials__card:hover h3 a {

    color: var(--cf-essential-pink);

  }


  .cf-essentials__empty {

    padding: 3rem;

    border: 1px dashed rgba(92, 16, 36,.28);

    border-radius: 1rem;

    color: var(--cf-essential-muted);

    font-size: 1.05rem;

    text-align: center;

  }


  @media (max-width: 989px) {

    .cf-essentials__grid {

      grid-template-columns: repeat(2, 1fr);

    }

    .cf-essentials__card--featured {

      grid-row: span 1;

    }

    .cf-essentials__card--featured
    .cf-essentials__image-wrap {

      aspect-ratio: 3 / 4;

    }

  }


  @media (max-width: 649px) {

    .cf-essentials__wrap {

      width: min(100% - 2rem, 620px);

      padding-block: 4rem;

    }

    .cf-essentials__heading {

      display: block;

    }

    .cf-essentials__intro {

      margin-top: 1.5rem;

    }

    .cf-essentials__grid {

      grid-template-columns: 1fr;

    }

    .cf-essentials__image-wrap,
    .cf-essentials__card--featured
    .cf-essentials__image-wrap {

      aspect-ratio: 3 / 4;

    }

  }


  @media (prefers-reduced-motion: reduce) {

    .cf-essentials * {

      transition-duration: .01ms !important;

    }

  }
/* END_SECTION:cf-essentials-grid */

/* START_SECTION:cf-faq (INDEX:20) */
.cf-faq {
  background: var(--cf-bg);
  padding-block: var(--cf-faq-pad, 128px);
}

.cf-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .cf-faq__grid {
    grid-template-columns: 0.9fr 1.4fr;
    gap: 5rem;
  }
}

@media (min-width: 1024px) {
  .cf-faq__sticky { position: sticky; top: 8rem; }
}

/* Self-contained — never borrows .cf-h2. */
.cf-faq .cf-faq__title {
  margin: 1rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-faq-heading, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
}

.cf-faq__sub {
  margin: 1.25rem 0 0;
  max-width: 28rem;
  font-family: var(--cf-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cf-muted);
}

.cf-faq__cta { margin-top: 2rem; }

.cf-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cf-faq__item {
  border-radius: 20px;
  border: 1px solid var(--cf-green-10);
  background: var(--cf-card);
  padding-inline: 1.5rem;
  box-shadow: 0 8px 30px rgb(22 59 45 / 0.04);
  transition: box-shadow 0.3s var(--cf-ease), border-color 0.3s var(--cf-ease);
}

.cf-faq__item:hover { box-shadow: 0 14px 38px rgb(22 59 45 / 0.08); }
.cf-faq__item[open] { border-color: rgb(249 95 146 / 0.4); }

.cf-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-faq-q, 18px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--cf-green);
  transition: color 0.3s var(--cf-ease);
}

/* Both are needed — Safari uses the WebKit pseudo-element, everyone else
   honours list-style on the summary itself. */
.cf-faq__q::-webkit-details-marker { display: none; }
.cf-faq__q::marker { content: ""; }

.cf-faq__q:hover { color: var(--cf-pink); }

.cf-faq__q:focus-visible {
  outline: 2px solid var(--cf-pink);
  outline-offset: 2px;
  border-radius: 6px;
}

.cf-faq__chev {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--cf-pink);
  transition: transform 0.3s var(--cf-ease);
}

.cf-faq__item[open] .cf-faq__chev { transform: rotate(180deg); }

.cf-faq__a {
  padding-bottom: 1.5rem;
  font-family: var(--cf-font-body);
  font-size: var(--cf-faq-a, 15px);
  line-height: 1.75;
  color: var(--cf-muted);
}

.cf-faq__a p { margin: 0 0 0.75rem; }
.cf-faq__a p:last-child { margin-bottom: 0; }
.cf-faq__a a { color: var(--cf-pink); }

/* Answers slide rather than snap. Only fires where it's supported; elsewhere
   <details> just opens instantly, which is the correct fallback. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .cf-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.35s var(--cf-ease), content-visibility 0.35s allow-discrete;
  }

  .cf-faq__item[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-faq__item::details-content { transition: none; }
  .cf-faq__chev { transition: none; }
}
/* END_SECTION:cf-faq */

/* START_SECTION:cf-field-notes (INDEX:21) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
  .cf-notes{--notes-green:#5c1024;--notes-pink:#e0932b;--notes-muted:#77818c;background:#fff8ec;color:var(--notes-green);font-family:Outfit,sans-serif;}.cf-notes *{box-sizing:border-box;font-family:Outfit,sans-serif;}.cf-notes__wrap{width:min(100% - 3rem,1380px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(26rem,.93fr);gap:clamp(3.5rem,8vw,9rem);align-items:center;padding:clamp(5.5rem,9vw,10rem) 0;}.cf-notes__header p{margin:0 0 1.25rem;color:var(--notes-pink);font-size:.9rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;}.cf-notes__header h2{max-width:13ch;margin:0;font-size:clamp(3.4rem,4.6vw,5.65rem);font-weight:700;letter-spacing:-.08em;line-height:.93;}.cf-notes__header>div{max-width:38rem;margin-top:1.75rem;color:var(--notes-muted);font-size:1.18rem;line-height:1.65;}.cf-notes__header>div p{margin:0;}.cf-notes__tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 3.2rem;margin-top:3.5rem;}.cf-notes__tip{padding:.3rem;border-radius:1rem;transition:transform .25s ease,background-color .25s ease;}.cf-notes__tip:hover{background:#fdf0da;transform:translateY(-6px);}.cf-notes__tip>span{width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:50%;background:#f0f4f1;color:var(--notes-green);font-size:1.5rem;transition:background-color .25s ease,color .25s ease,transform .25s ease;}.cf-notes__tip:hover>span{background:var(--notes-pink);color:#fff;transform:rotate(-12deg) scale(1.08);}.cf-notes__tip h3{margin:1.1rem 0 .65rem;font-size:1.2rem;font-weight:700;letter-spacing:-.045em;line-height:1.15;}.cf-notes__tip p{margin:0;color:var(--notes-muted);font-size:1rem;line-height:1.6;}.cf-notes__visual{position:relative;padding:0 0 2.5rem 1.4rem;}.cf-notes__image-wrap{overflow:hidden;aspect-ratio:.97/1;border-radius:1.7rem;background:#e8eee9;box-shadow:0 18px 35px rgba(92, 16, 36,.09);}.cf-notes__image,.cf-notes__placeholder{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.72,.25,1),filter .3s ease;}.cf-notes__visual:hover .cf-notes__image{transform:scale(1.065);filter:saturate(1.1);}.cf-notes__note{position:absolute;right:1rem;bottom:0;width:min(34rem,92%);padding:1.35rem 1.5rem;border:1px solid rgba(255,255,255,.7);border-radius:1.35rem;background:rgba(255,255,255,.93);box-shadow:0 16px 32px rgba(92, 16, 36,.13);backdrop-filter:blur(10px);transition:transform .3s ease,box-shadow .3s ease;}.cf-notes__visual:hover .cf-notes__note{transform:translateY(-8px);box-shadow:0 23px 38px rgba(92, 16, 36,.19);}.cf-notes__note span{display:block;margin-bottom:.55rem;color:var(--notes-muted);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}.cf-notes__note strong{display:block;font-size:1.03rem;font-weight:600;line-height:1.45;letter-spacing:-.02em;}@media(max-width:899px){.cf-notes__wrap{grid-template-columns:1fr;gap:3.5rem;padding-block:4.5rem;}.cf-notes__visual{max-width:44rem;}}@media(max-width:549px){.cf-notes__wrap{width:min(100% - 2rem,600px);padding-block:3.8rem;}.cf-notes__header h2{font-size:clamp(3rem,14vw,4.45rem);}.cf-notes__tips{gap:1.75rem 1rem;margin-top:2.7rem;}.cf-notes__tip h3{font-size:1.1rem;}.cf-notes__tip p{font-size:.92rem;}.cf-notes__visual{padding-left:.8rem;}.cf-notes__note{right:0;padding:1.1rem;}}@media(prefers-reduced-motion:reduce){.cf-notes *{transition-duration:.01ms!important;}}
/* END_SECTION:cf-field-notes */

/* START_SECTION:cf-footer (INDEX:22) */
/* ==========================================================================
   FOOTER BASE
   ========================================================================== */

.cf-ft {
  background: var(--cf-green);
  color: var(--cf-bg);
  padding-top: var(--cf-ft-pad-top, 112px);
  padding-bottom: 2.5rem;
}


/* ==========================================================================
   FOOTER GRID
   ========================================================================== */

.cf-ft__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem 2.5rem;
}

@media (min-width: 640px) {

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

}

@media (min-width: 1024px) {

  .cf-ft__grid {
    grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr 1fr;
    gap: 4rem 2.5rem;
  }

}

.cf-ft__brand,
.cf-ft__col {
  min-width: 0;
}


/* ==========================================================================
   BRAND
   ========================================================================== */

.cf-ft__logo {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.cf-ft__logo-img {
  height: auto;
  width: auto;
  max-height: calc(var(--cf-ft-wordmark, 52px) * 1.1);
  display: block;
}

.cf-ft__wordmark {
  font-family: var(--cf-font-heading);
  font-size: var(--cf-ft-wordmark, 52px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--cf-bg);
}

.cf-ft__tagline {
  margin: 1.5rem 0 0;
  max-width: 26rem;
  font-family: var(--cf-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgb(250 251 248 / 0.7);
}


/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.cf-ft__news {
  margin-top: 2rem;
  max-width: 26rem;
}

.cf-ft__news-label {
  display: block;
  font-family: var(--cf-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(250 251 248 / 0.6);
}

.cf-ft__field {
  margin-top: 0.875rem;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgb(250 251 248 / 0.2);
  background: rgb(250 251 248 / 0.05);
  padding: 0.375rem;
  transition: border-color 0.3s var(--cf-ease);
}

.cf-ft__field:focus-within {
  border-color: var(--cf-pink);
}

.cf-ft__field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  padding: 0.5rem 1rem;
  font-family: var(--cf-font-body);
  font-size: 0.9375rem;
  color: var(--cf-bg);
}

.cf-ft__field input::placeholder {
  color: rgb(250 251 248 / 0.4);
}

.cf-ft__submit {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 2.75rem;
  width: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--cf-pink);
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s var(--cf-ease);
}

.cf-ft__submit svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.cf-ft__submit:hover {
  transform: scale(1.05);
}

.cf-ft__submit:focus-visible,
.cf-ft__field input:focus-visible {
  outline: 2px solid var(--cf-pink);
  outline-offset: 2px;
}

.cf-ft__ok,
.cf-ft__err {
  margin: 0.875rem 0 0;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
}

.cf-ft__ok {
  color: #a7e8c4;
}

.cf-ft__err {
  color: #f0b65c;
}

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


/* ==========================================================================
   SOCIAL
   ========================================================================== */

.cf-ft__social {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cf-ft__soc {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgb(250 251 248 / 0.2);
  color: rgb(250 251 248 / 0.8);
  transition:
    background-color 0.3s var(--cf-ease),
    border-color 0.3s var(--cf-ease),
    color 0.3s var(--cf-ease);
}

.cf-ft__soc svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.cf-ft__soc:hover {
  background: var(--cf-pink);
  border-color: var(--cf-pink);
  color: #fff;
}

.cf-ft__soc:focus-visible {
  outline: 2px solid var(--cf-pink);
  outline-offset: 3px;
}


/* ==========================================================================
   LINK COLUMNS — INCREASED TYPOGRAPHY
   ========================================================================== */

.cf-ft__head {
  margin: 0 0 1.6rem;
  font-family: var(--cf-font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgb(250 251 248 / 0.95);
}

.cf-ft__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cf-ft__link {
  font-family: var(--cf-font-body);
  font-size: 18px;
  line-height: 1.5;
  color: rgb(250 251 248 / 0.72);
  text-decoration: none;
  transition: color 0.25s var(--cf-ease);
}

.cf-ft__link:hover {
  color: var(--cf-pink);
}

.cf-ft__link:focus-visible {
  outline: 2px solid var(--cf-pink);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ==========================================================================
   SUPPORT BLOCK — INCREASED TYPOGRAPHY
   ========================================================================== */

.cf-ft__support {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(250 251 248 / 0.15);
}

.cf-ft__support-head {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--cf-font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(250 251 248 / 0.5);
}

.cf-ft__support-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.85rem;
  font-family: var(--cf-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgb(250 251 248 / 0.75);
  text-decoration: none;
  transition: color 0.25s var(--cf-ease);
}

.cf-ft__support-row:last-child {
  margin-bottom: 0;
}

.cf-ft__support-row svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--cf-pink);
}

.cf-ft__support-row:hover {
  color: var(--cf-bg);
}


/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */

.cf-ft__bar {
  margin-top: 4.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(250 251 248 / 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {

  .cf-ft__bar {
    flex-direction: row;
    justify-content: space-between;
  }

}

.cf-ft__fine {
  margin: 0;
  font-family: var(--cf-font-body);
  font-size: 0.75rem;
  color: rgb(250 251 248 / 0.55);
}

.cf-ft__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.cf-ft__legal a {
  font-family: var(--cf-font-body);
  font-size: 0.75rem;
  color: rgb(250 251 248 / 0.55);
  text-decoration: none;
  transition: color 0.25s var(--cf-ease);
}

.cf-ft__legal a:hover {
  color: var(--cf-pink);
}


/* ==========================================================================
   MOBILE TYPOGRAPHY
   ========================================================================== */

@media (max-width: 639px) {

  .cf-ft__head {
    font-size: 20px;
    margin-bottom: 1.3rem;
  }

  .cf-ft__links {
    gap: 0.9rem;
  }

  .cf-ft__link {
    font-size: 17px;
    line-height: 1.5;
  }

  .cf-ft__support-row {
    font-size: 15px;
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .cf-ft__submit:hover {
    transform: none;
  }

}
/* END_SECTION:cf-footer */

/* START_SECTION:cf-header (INDEX:23) */
.cf-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 9999;
}

/* The glass sits on its own layer, NOT on .cf-header.
   An element with backdrop-filter clips its descendants to its own box — which
   is why the dropdown panel disappeared: it was being cut off at the 68px
   header. Isolating the blur onto a childless layer means the header can blur
   and still let panels hang below it.
   z-index: -1 keeps it behind the bar; .cf-header has no background of its own
   for it to hide behind. Transitions run on background/backdrop-filter, never
   opacity — an opacity animation would make this its own backdrop root and
   there'd be nothing left behind it to blur. */
.cf-header__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.5s var(--cf-ease-soft),
    backdrop-filter 0.5s var(--cf-ease-soft),
    border-color 0.5s var(--cf-ease-soft);
}

.cf-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--cf-header-h, 84px);
  transition: height 0.5s var(--cf-ease-soft);
}

/* --- The two states -------------------------------------------------------
   Over the hero: no background, WHITE contents.
   Scrolled / any other page: glass background, GREEN contents.
   The original was green-on-green over the hero and unreadable.            */
/* Ink over the hero. White is right over a DARK photograph; over a bright,
   sunlit room it disappears. This is a per-photo judgement, so it's a setting
   rather than an assumption. .is-solid always overrides to green — the glass
   bar is pale, so green is the only readable option there. */
.cf-header {
  --cf-ink: #ffffff;
  --cf-ink-dim: rgb(255 255 255 / 0.85);
  --cf-ink-hover: rgb(255 255 255 / 0.12);
}

.cf-header--ink-green {
  --cf-ink: var(--cf-green);
  --cf-ink-dim: rgb(22 59 45 / 0.9);
  --cf-ink-hover: var(--cf-green-10);
}

.cf-header.has-panel-open,
.cf-header.is-solid {
  --cf-ink: var(--cf-green);
  --cf-ink-dim: rgb(22 59 45 / 0.9);
  --cf-ink-hover: var(--cf-green-10);
}

.cf-header.is-solid .cf-header__glass {
  background: rgb(250 251 248 / var(--cf-glass-alpha, 0.72));
  backdrop-filter: blur(var(--cf-glass-blur, 24px)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--cf-glass-blur, 24px)) saturate(1.6);
  border-bottom-color: var(--cf-green-10);
}

/* Without blur support, 0.72 alpha is just a washed-out bar rather than glass.
   Go nearly opaque instead — a clean solid header beats a broken glass one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cf-header.is-solid .cf-header__glass { background: rgb(250 251 248 / 0.97); }
}

.cf-header.is-solid .cf-header__bar { height: var(--cf-header-h-solid, 68px); }

/* NEVER put backdrop-filter on .cf-header — it clips its own descendants, and
   the mega panel is a descendant. This rule previously did exactly that, which
   is why the dropdown was invisible over the hero and only appeared once
   .is-solid kicked in and switched the rule off. Glass goes on the childless
   layer. Only ever on the childless layer. */
.cf-header.has-panel-open:not(.is-solid) .cf-header__glass {
  background: rgb(250 251 248 / var(--cf-glass-alpha, 0.72));
  backdrop-filter: blur(var(--cf-glass-blur, 24px)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--cf-glass-blur, 24px)) saturate(1.6);
  border-bottom-color: var(--cf-green-10);
}

/* Only white ink needs a darkening scrim behind it. Under dark ink a scrim
   would be actively counterproductive — it reduces the contrast it's meant
   to protect. */
.cf-header--overlay:not(.is-solid):not(.cf-header--ink-green)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(22 59 45 / 0.35), transparent);
}

/* Non-overlay page spacing is handled by the wrapper height set inline above.
   A sibling selector can't work here: Shopify wraps this section in its own
   div, so .cf-header's only sibling is the drawer, not the page content. */

/* --- Logo ---------------------------------------------------------------- */
.cf-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cf-ink);
  flex: 0 0 auto;
  /* Nudged down per feedback, now that the logo lives in its own row with
     just the search bar and mini-actions. margin-top (not transform) on
     purpose: it actually grows the row's height, so the nav row below and
     the --cf-header-offset JS measurement both shift down with it instead
     of the logo visually overlapping what's underneath. Trimmed from 36px
     to 16px per a follow-up "tighter" request — it was the single biggest
     driver of the row's height (and so of the gap to the nav row below). */
  margin-top: 16px;
}

.cf-header__mark {
  display: grid;
  place-items: center;
  height: 36px;
  width: 36px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.5s var(--cf-ease);
}

.cf-header__mark svg { width: 18px; height: 18px; color: var(--cf-bg); }
.cf-header.is-solid .cf-header__mark svg { color: var(--cf-bg); }
.cf-header__logo:hover .cf-header__mark { transform: rotate(18deg); }

.cf-header__wordmark {
  font-family: var(--cf-font-heading);
  /* Never let the wordmark outgrow the bar it sits in. */
  font-size: min(var(--cf-wordmark-size, 24px), calc(var(--cf-header-h-solid) * 0.42));
  font-weight: 600;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-ink);
  white-space: nowrap;
}

.cf-header__logo-img {
  height: var(--cf-logo-h, 40px);
  width: auto;
  display: block;
}

/* --- Nav ----------------------------------------------------------------- */
.cf-header__nav { display: none; min-width: 0; flex: 0 1 auto; }

@media (min-width: 1100px) {
  .cf-header__bar { gap: 1rem; }
}

.cf-header__list {
  display: flex;
  align-items: center;
  /* Tightens as the viewport narrows instead of wrapping. */
  gap: clamp(0.9rem, 1.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

/* Positioned so the dropdown anchors under THIS item, not the whole header.
   (It was static for the old full-width mega panel, which spanned the bar.) */
.cf-header__item { position: relative; }

.cf-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--cf-font-body);
  font-size: var(--cf-nav-size, 15px);
  font-weight: 700;
  color: var(--cf-ink);
  text-decoration: none;
  transition: color 0.3s var(--cf-ease);
  /* A nav label must never wrap. Wrapping is what stacked "Build Your Own
     Plant (BYOP)" three lines high and burst it out of the bar. */
  white-space: nowrap;
}

.cf-header__link:hover,
.cf-header__link[aria-expanded="true"] {
    color: var(--cf-pink);
}

/* Pink underline slides out from the left on hover — from the original. */
.cf-header__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 3px;
    border-radius: 999px;
    background: var(--cf-pink);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}

.cf-header__link:hover::after,
.cf-header__link[aria-expanded="true"]::after {
    transform: scaleX(1);
}

/* --- Dropdown (straight down, hover) ------------------------------------- */
.cf-header__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  min-width: 16rem;
  padding: 0.625rem;
  border-radius: 16px;
  background: rgb(250 251 248 / var(--cf-panel-alpha, 0.98));
  backdrop-filter: blur(var(--cf-glass-blur, 24px)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--cf-glass-blur, 24px)) saturate(1.6);
  border: 1px solid var(--cf-green-10);
  box-shadow: 0 20px 48px rgb(22 59 45 / 0.16);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--cf-ease), transform 0.22s var(--cf-ease);
}

/* Bridges the 0.5rem gap between trigger and panel so the hover doesn't drop
   when the pointer crosses it. */
.cf-header__panel::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.cf-header__panel[hidden] { display: none; }
.cf-header__panel.is-open { opacity: 1; transform: none; }

/* Open on hover as well as click, per the request. The click/keyboard path
   (is-open + aria-expanded) still works for touch and accessibility. */
@media (hover: hover) {
  .cf-header__item.has-menu:hover .cf-header__panel:not([hidden]) {
    opacity: 1;
    transform: none;
  }
}

.cf-header__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.cf-header__menu-item + .cf-header__menu-item { margin-top: 0.125rem; }

.cf-header__menu-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-family: var(--cf-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cf-green);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s var(--cf-ease), color 0.16s var(--cf-ease);
}

.cf-header__menu-link:hover,
.cf-header__menu-link.is-active {
  background: var(--cf-green-10);
  color: var(--cf-pink);
}

.cf-header__menu-link--sub {
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--cf-muted);
}

.cf-header__menu-link--sub:hover { color: var(--cf-pink); }

.cf-header__icon--wide { position: relative; }

/* Belt-and-braces alongside the [hidden] attribute itself — this page has
   at least one CSS rule from somewhere outside our own stylesheet quietly
   overriding display on an unrelated element (see the .cf-drawer__scrim
   comment below), so don't assume the browser default [hidden] behaviour
   is safe from the same kind of collision here. */
[data-cf-wishlist-link][hidden] { display: none !important; }

.cf-header__wish-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cf-pink);
  color: #fff;
  font-family: var(--cf-font-body);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}
.cf-header__wish-count[hidden] { display: none; }

/* Wishlist Hero (the app) auto-binds this link because its href is
   "#hero-wishlist", and as part of that binding it injects its own little
   " (1)" count span into the link's content — independent of, and in
   addition to, the pink circular badge above. On the icon that reads as a
   duplicated count (●1 badge plus "(1)" text underneath); in the mobile
   drawer link there's no badge of ours to collide with, so its plain-text
   "Wishlist (1)" is left alone and stays useful. Scoped to the icon only. */
.cf-header__icon--wide .wishlist-hero-items-count { display: none !important; }

/* --- Actions ------------------------------------------------------------- */
/* margin-left: auto keeps this pinned to the right edge of .cf-header__bar
   even below the nav_collapse breakpoint, where nav is display:none and
   actions is otherwise the only visible flex child — without this it would
   collapse to the LEFT edge instead, now that the logo (which used to be
   the other flex child keeping actions pushed right) has moved out of this
   row entirely. Harmless on desktop, where grid placement already pins it
   via justify-self: end. */
.cf-header__actions { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; margin-left: auto; }

.cf-header__icon {
  position: relative;
  display: grid;
  place-items: center;
  height: 44px;
  width: 44px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: var(--cf-ink);
  transition: background-color 0.3s var(--cf-ease), color 0.3s var(--cf-ease);
}

.cf-header__icon svg { width: 22px; height: 22px; stroke-width: 1.7; }
.cf-header__icon:hover { background: var(--cf-ink-hover); }
.cf-header__icon:focus-visible { outline: 2px solid var(--cf-pink); outline-offset: 2px; }

@media (max-width: 639px) { .cf-header__icon--wide { display: none; } }

.cf-header__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding-inline: 3px;
  border-radius: 999px;
  background: var(--cf-pink);
  color: #fff;
  font-family: var(--cf-font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.cf-header__badge.is-empty { display: none; }

/* --- Predictive search -----------------------------------------------------
   The click-to-open icon + modal panel that used to live here was removed
   per feedback (the persistent row below is now the only search entry
   point) — these are the shared field/input/button rules it reused, and
   which the persistent row's --row modifier still depends on. */
.cf-header__search-form {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.cf-header__search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-header__search-input {
  width: 100%;
  height: 48px;
  padding: 0 5.5rem 0 1.25rem;
  border: 1px solid var(--cf-green-10);
  border-radius: 999px;
  background: var(--cf-bg);
  font-family: var(--cf-font-body);
  font-size: 1rem;
  color: var(--cf-green);
  /* input[type="search"] gets its own native appearance in Chrome/Safari
     (different font metrics once text is typed, plus a native "x" clear
     button that overlapped our own .cf-header__search-reset button).
     Turn that off so typed text renders with the same font as everywhere
     else on the site and only our own reset button shows. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.cf-header__search-input::-webkit-search-decoration,
.cf-header__search-input::-webkit-search-cancel-button,
.cf-header__search-input::-webkit-search-results-button,
.cf-header__search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.cf-header__search-input:focus {
  outline: 2px solid var(--cf-pink);
  outline-offset: 2px;
}

.cf-header__search-reset,
.cf-header__search-submit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  height: 38px;
  width: 38px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: var(--cf-green);
}

.cf-header__search-reset svg,
.cf-header__search-submit svg { width: 18px; height: 18px; }

.cf-header__search-submit { right: 0.375rem; }
.cf-header__search-reset { right: 2.75rem; }
.cf-header__search-reset.hidden { display: none; }

/* --- Persistent search row (sits above the nav bar, inside the fixed
   header) -------------------------------------------------------------- */
/* Centered, compact pill rather than a full-bleed bar — it should read as
   a small search field sitting above the menu items, not another full-width
   row competing with the logo/nav/icons bar beneath it. Sized up a little
   from the first compact pass per feedback. */
.cf-header__search-row {
  position: relative;
  z-index: 1;
  /* Tightened further per feedback (was 10px, then 2px) — the logo's own
     margin-top (below) makes it the tallest item in this row, so with
     align-items: center the row's total height was set by the logo,
     leaving the search pill floating well above the row's bottom edge and
     opening up a gap before the nav row underneath. Less padding here
     shrinks that gap; the logo's own margin-top (below) was cut too. */
  padding-block: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Below the nav_collapse breakpoint this stays simple flex: logo fixed on
     the left, search form (flex: 1 1 auto, set on .cf-header__search-form
     above) filling the rest, mini-actions (account/cart) trailing at the
     end. The precise grid placement for all three is a desktop-only
     upgrade, added in the media query above. */
}

/* Account + cart, now living in the search row (see markup) rather than
   the nav bar below, per feedback — "move them up to the level of the
   logo". Below the nav_collapse breakpoint this is a plain flex child;
   .cf-header__search-form's flex: 1 1 auto already pushes it to the row's
   right edge, same as .cf-header__actions used to in the bar. */
.cf-header__mini-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}

/* Reuses the shared .cf-header__search-form / -field / -input / -reset /
   -submit rules above (same predictive-search markup + CSS as before, so
   the dropdown still positions and behaves identically) — this modifier
   turns it into a permanently-visible compact pill, centered above the
   nav, and moves the search icon button from the field's right side to
   its left, to match the reference look. */
.cf-header__search-form--row {
  display: block;
  width: 100%;
  max-width: 640px;
}

.cf-header__search-form--row .cf-header__search-input {
  height: 44px;
  padding: 0 1.125rem 0 3rem;
  font-size: 1rem;
  /* Visibility feedback: the previous near-background tint (8% green mix)
     blended into the page on every template — overlay hero and solid
     pages alike. A solid near-white fill plus a real border and a soft
     shadow reads as its own control everywhere, regardless of what's
     behind the header. */
  background: #fdfcf8;
  border-color: var(--cf-green-10);
  box-shadow: 0 1px 2px rgb(22 59 45 / 0.06), 0 2px 8px rgb(22 59 45 / 0.08);
}

.cf-header__search-form--row .cf-header__search-submit {
  left: 0.3125rem;
  right: auto;
  height: 36px;
  width: 36px;
}

.cf-header__search-form--row .cf-header__search-submit svg,
.cf-header__search-form--row .cf-header__search-reset svg {
  width: 17px;
  height: 17px;
}

.cf-header__search-form--row .cf-header__search-reset {
  right: 0.3125rem;
  height: 36px;
  width: 36px;
}

@media (max-width: 640px) {
  .cf-header__search-row { padding-block: 4px; }
  .cf-header__search-form--row { max-width: 300px; }
  .cf-header__search-form--row .cf-header__search-input { height: 40px; }
}

/* --- Mobile drawer ------------------------------------------------------- */
.cf-drawer { position: fixed; inset: 0; z-index: 60; }
.cf-drawer[hidden] { display: none; }

.cf-drawer__scrim {
  /* display: block !important is deliberate, not defensive boilerplate.
     Something on this page (an installed app's CSS, or a visitor's own
     ad/tracker blocker — cosmetic filter lists commonly target generic
     "scrim"/"overlay"/"backdrop" class names on full-screen divs) was
     forcing this specific element to display: none even though nothing in
     our own stylesheet ever sets that. With it hidden, it stops existing
     for click purposes: tapping anywhere outside the drawer panel did
     nothing, because there was no element there to catch the tap and close
     the drawer — the only way back to the page was a hard reload. */
  display: block !important;
  position: absolute;
  inset: 0;
  background: rgb(22 59 45 / 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.4s var(--cf-ease);
}

.cf-drawer.is-open .cf-drawer__scrim { opacity: 1; }

.cf-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86%, 380px);
  background: var(--cf-bg);
  border-left: 1px solid var(--cf-green-10);
  padding: 1.25rem var(--cf-gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.45s var(--cf-ease);
  display: flex;
  flex-direction: column;
}

.cf-drawer.is-open .cf-drawer__panel { transform: none; }

.cf-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  color: var(--cf-green);
}

.cf-drawer__brand {
  font-family: var(--cf-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cf-green);
}

.cf-drawer__nav { display: flex; flex-direction: column; }

.cf-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--cf-green-10);
  font-family: var(--cf-font-heading);
  font-size: var(--cf-drawer-size, 2rem);
  font-weight: 300;
  color: var(--cf-green);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--cf-ease);
}

.cf-drawer__link::-webkit-details-marker { display: none; }
.cf-drawer__link:hover { color: var(--cf-pink); }

.cf-drawer__caret { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 0.3s var(--cf-ease); }
.cf-drawer__group[open] .cf-drawer__caret { transform: rotate(180deg); }

.cf-drawer__children { display: flex; flex-direction: column; padding: 0.75rem 0 1rem 0.75rem; }

.cf-drawer__child,
.cf-drawer__grandchild {
  font-family: var(--cf-font-body);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.25s var(--cf-ease);
}

.cf-drawer__child { font-size: 0.9375rem; font-weight: 600; color: var(--cf-green); }
.cf-drawer__grandchild { font-size: 0.875rem; color: var(--cf-muted); padding-left: 0.875rem; }
.cf-drawer__child:hover,
.cf-drawer__grandchild:hover { color: var(--cf-pink); }

.cf-drawer__foot {
  display: flex;
  gap: 1.5rem;
  margin-top: auto;
  padding-top: 2.5rem;
}

.cf-drawer__meta {
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cf-green);
  text-decoration: none;
}

.cf-drawer__meta:hover { color: var(--cf-pink); }

@media (prefers-reduced-motion: reduce) {
  .cf-drawer__panel,
  .cf-drawer__scrim,
  .cf-header__panel { transition: none; }
}
/* END_SECTION:cf-header */

/* START_SECTION:cf-hero (INDEX:24) */
.cf-hero {
  position: relative;
  min-height: var(--cf-hero-h, 100svh);
  overflow: hidden;
  background: var(--cf-green);
}

.cf-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

.cf-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.cf-hero__slide.is-active {
  opacity: 1;
}

.cf-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Green wash — opacity driven by scroll progress, set as --p by JS. */
.cf-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cf-green);
  opacity: calc(var(--cf-overlay-from) + (var(--cf-overlay-to) - var(--cf-overlay-from)) * var(--p, 0));
}

.cf-hero__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Anchored bottom-left, under the type. The top-right of the room stays
     bright and sellable. Strength is a setting because it depends entirely
     on how bright your photograph is. */
  background:
    linear-gradient(
      to top,
      rgb(22 59 45 / calc(0.92 * var(--cf-scrim, 1))) 0%,
      rgb(22 59 45 / calc(0.55 * var(--cf-scrim, 1))) 28%,
      rgb(22 59 45 / calc(0.12 * var(--cf-scrim, 1))) 58%,
      transparent 78%
    ),
    linear-gradient(
      to right,
      rgb(22 59 45 / calc(0.55 * var(--cf-scrim, 1))) 0%,
      rgb(22 59 45 / calc(0.18 * var(--cf-scrim, 1))) 38%,
      transparent 68%
    );
}

.cf-hero__inner {
  position: relative;
  z-index: 2;
  min-height: var(--cf-hero-h, 100svh);
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* every child shares one left edge */
  justify-content: flex-end;
  padding-top: 8rem;
  padding-bottom: 4rem;
}

/* Leave room on the far left for the vertically-centred SCROLL cue, but only
   where it's actually shown. */
@media (min-width: 1200px) {
  .cf-hero__inner { padding-left: 2rem; }
}

@media (min-width: 768px) {
  .cf-hero__inner { padding-bottom: 6rem; }
}

/* --- Masked line reveal — the signature on-load moment ------------------- */
.cf-hero__mask {
  display: block;
  overflow: hidden;
  /* Serifs hang lower than Outfit does. Too tight and the mask shears the
     descenders off the y and g mid-animation. */
  padding-block: 0.14em;
  margin-block: -0.06em;
}

.cf-hero__line {
  display: block;
  transform: translateY(110%);
  animation: cf-line-up 0.95s var(--cf-ease) forwards;
  animation-delay: calc(0.35s + var(--i) * 0.13s);
}

@keyframes cf-line-up {
  to { transform: translateY(0); }
}

/* Self-contained on purpose. This deliberately does NOT reuse .cf-h1 —
   two single-class selectors setting the same property is a coin flip
   decided by stylesheet load order, which Shopify controls, not us. */
.cf-hero .cf-hero__title {
  margin: 0;
  font-family: var(--cf-font-heading);
  font-weight: var(--cf-hero-weight);
  font-size: calc(var(--cf-h1) * var(--cf-hero-scale, 1));
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: var(--cf-hero-measure, 20ch);
}

.cf-hero__overline,
.cf-hero__sub,
.cf-hero__actions,
.cf-hero__chips {
  opacity: 0;
  animation: cf-fade-up 0.8s var(--cf-ease) forwards;
}

.cf-hero__overline { margin: 0 0 1.5rem; animation-delay: 0.2s; }

.cf-hero__sub {
  margin: 1.75rem 0 0;
  max-width: 44ch;
  font-family: var(--cf-font-body);
  /* Grows at half the heading's rate. If body text scaled 1:1 with a 96px
     headline the hierarchy would flatten and the hero would read as a poster. */
  font-size: calc(var(--cf-body-lg) * (1 + (var(--cf-hero-scale, 1) - 1) * 0.5));
  line-height: 1.65;
  color: rgb(255 255 255 / 0.85);
  animation-delay: 0.9s;
}

.cf-hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation-delay: 1.05s;
}

@keyframes cf-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.cf-hero__arrow,
.cf-hero__arrow2 { width: 1rem; height: 1rem; transition: transform 0.3s var(--cf-ease); }
.cf-hero__cta:hover .cf-hero__arrow { transform: translate(2px, -2px); }
.cf-hero__cta2:hover .cf-hero__arrow2 { transform: translateX(4px); }

/* --- Chips --------------------------------------------------------------- */
.cf-hero__chips {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  animation-delay: 1.25s;
}

/* --- Trust row ----------------------------------------------------------- */
.cf-hero__trust {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  opacity: 0;
  animation: cf-fade-up 0.8s var(--cf-ease) forwards;
  animation-delay: 1.4s;
}

/* Vertical rule only BETWEEN items — pseudo-element on the adjacent sibling,
   so it never trails after the last one. The negative start margin pulls it
   into the row's own gap rather than adding width. */
.cf-hero__trust-item + .cf-hero__trust-item::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 1.25rem;
  margin-inline-end: 2rem;
  margin-inline-start: -2rem;
  background: rgb(255 255 255 / 0.25);
}

.cf-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.85);
}

.cf-hero__trust-txt strong { color: #fff; font-weight: 600; }
.cf-hero__trust-ic { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.cf-hero__trust-ic--star { color: var(--cf-pink); }

/* --- Scroll cue ---------------------------------------------------------- */
.cf-hero__scroll {
  position: absolute;
  left: calc(var(--cf-gutter) - 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: cf-fade-up-center 0.8s var(--cf-ease) forwards;
  animation-delay: 1.6s;
}

/* Only show it where there's a clear left margin beside the content — below
   1200px the content column reaches the edge and the cue would overlap. */
@media (min-width: 1200px) { .cf-hero__scroll { display: flex; } }

.cf-hero__scroll-label {
  writing-mode: vertical-rl;
  font-family: var(--cf-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.7);
}

.cf-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 3.5rem;
  overflow: hidden;
  background: rgb(255 255 255 / 0.2);
}

/* The travelling fill — the "continuous scroll thing". A pink segment runs
   top to bottom on a loop. */
.cf-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 40%;
  background: var(--cf-pink);
  animation: cf-scroll-run 1.8s var(--cf-ease) infinite;
}

@keyframes cf-scroll-run {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(350%); }
}

@keyframes cf-fade-up-center {
  from { opacity: 0; transform: translateY(calc(-50% + 18px)); }
  to { opacity: 1; transform: translateY(-50%); }
}

.cf-hero__chip {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.12);
  backdrop-filter: blur(12px);
  padding: 0.75rem 1.5rem;
  font-family: var(--cf-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.95);
  text-decoration: none;
  transition: background-color 0.3s var(--cf-ease), border-color 0.3s var(--cf-ease);
}

.cf-hero__chip:hover {
  background: rgb(255 255 255 / 0.2);
  border-color: var(--cf-pink);
}

.cf-hero__chip:focus-visible {
  outline: 2px solid var(--cf-pink);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .cf-hero__chip { font-size: 1rem; padding: 0.8125rem 1.75rem; }
}

/* --- Slide indicators ---------------------------------------------------- */
.cf-hero__dots {
  position: absolute;
  bottom: 2rem;
  right: var(--cf-gutter);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.cf-hero__dot {
  height: 6px;
  width: 16px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.5);
  cursor: pointer;
  transition: width 0.5s var(--cf-ease), background-color 0.5s var(--cf-ease);
}

.cf-hero__dot.is-active {
  width: 36px;
  background: var(--cf-pink);
}

.cf-hero__dot:focus-visible {
  outline: 2px solid var(--cf-pink);
  outline-offset: 3px;
}

/* Tap target stays 44px even though the dot renders at 6px tall. */
.cf-hero__dot::after {
  content: "";
  position: absolute;
  inset-block: -19px;
  inset-inline: -4px;
}

.cf-hero__dot { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .cf-hero__scroll-line::after { animation: none; }
  .cf-hero__trust { opacity: 1; animation: none; }
  .cf-hero__scroll { opacity: 1; animation: none; transform: translateY(-50%); }
  .cf-hero__line { transform: none; animation: none; }
  .cf-hero__overline,
  .cf-hero__sub,
  .cf-hero__actions,
  .cf-hero__chips { opacity: 1; animation: none; }
  .cf-hero__slide { transition: none; }
}
/* END_SECTION:cf-hero */

/* START_SECTION:cf-marquee (INDEX:25) */
/* =========================================================
   CRAZYFLORA MARQUEE
========================================================= */

.cf-marquee {
  --cf-marquee-bg: var(--cf-green, #6b1830);
  --cf-marquee-text: rgb(250 251 248 / 0.92);
  --cf-marquee-pink: var(--cf-pink, #e0932b);

  position: relative;

  width: 100%;

  overflow: hidden;

  background: var(--cf-marquee-bg);

  border-block: 1px solid var(--cf-green-10, rgba(255,255,255,.08));

  padding-block: 1.35rem;

  isolation: isolate;
}


/* =========================================================
   VIEWPORT
========================================================= */

.cf-marquee__viewport {
  position: relative;

  width: 100%;

  overflow: hidden;

  /* Prevent mobile browsers from creating horizontal page scroll */
  touch-action: pan-y;

  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   TRACK
========================================================= */

.cf-marquee__track {
  display: flex;

  width: max-content;

  max-width: none;

  flex: none;

  will-change: transform;

  animation-name: cf-marquee-scroll;

  animation-duration: var(--cf-marquee-duration, 30s);

  animation-timing-function: linear;

  animation-iteration-count: infinite;

  animation-fill-mode: both;

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
}


/* =========================================================
   ROW
========================================================= */

.cf-marquee__row {
  display: flex;

  flex: none;

  align-items: center;

  width: max-content;

  max-width: none;

  min-width: max-content;

  white-space: nowrap;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes cf-marquee-scroll {

  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }

}


/* =========================================================
   ITEM
========================================================= */

.cf-marquee__item,
.cf-marquee__sep {

  flex: none;

  font-family: var(--cf-font-heading, 'Outfit', sans-serif);

  font-size: var(--cf-marquee-size, 36px);

  font-weight: 300;

  line-height: 1.15;

  letter-spacing: -0.02em;

}


/* =========================================================
   ITEM TEXT
========================================================= */

.cf-marquee__item {

  display: inline-flex;

  align-items: center;

  padding-inline: var(--cf-marquee-gap, 40px);

  color: var(--cf-marquee-text);

}


/* =========================================================
   SEPARATOR
========================================================= */

.cf-marquee__sep {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--cf-marquee-pink);

  font-size: calc(var(--cf-marquee-size, 36px) * 0.85);

  line-height: 1;
}


/* =========================================================
   LINKS
========================================================= */

.cf-marquee__link {

  color: inherit;

  text-decoration: none;

  transition:
    color .25s ease,
    opacity .25s ease;

}


.cf-marquee__link:hover {

  color: var(--cf-marquee-pink);

}


.cf-marquee__link:focus-visible {

  outline: 2px solid var(--cf-marquee-pink);

  outline-offset: 7px;

  border-radius: 4px;

}


/* =========================================================
   PAUSE
========================================================= */

.cf-marquee:hover .cf-marquee__track,
.cf-marquee:focus-within .cf-marquee__track {

  animation-play-state: paused;

}


/* =========================================================
   MOBILE
========================================================= */

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

  .cf-marquee {

    padding-block: 1rem;

  }

  .cf-marquee__track {

    /*
      Slightly faster on mobile so the marquee
      doesn't feel sluggish on a small screen.
    */

    animation-duration:
      max(8s, calc(var(--cf-marquee-duration) * .85));

  }

  .cf-marquee__item,
  .cf-marquee__sep {

    font-size:
      clamp(20px, 6vw, var(--cf-marquee-size, 36px));

  }

  .cf-marquee__item {

    padding-inline:
      clamp(20px, 6vw, var(--cf-marquee-gap, 40px));

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

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

  .cf-marquee {

    padding-block: .85rem;

  }

  .cf-marquee__track {

    animation-duration:
      max(8s, calc(var(--cf-marquee-duration) * .75));

  }

  .cf-marquee__item,
  .cf-marquee__sep {

    font-size: 20px;

  }

  .cf-marquee__item {

    padding-inline: 20px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  /*
    Keep the content visible and readable instead of
    completely removing the marquee content.
  */

  .cf-marquee__track {

    animation: none;

    transform: translate3d(0, 0, 0);

  }

  .cf-marquee__viewport {

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none;

  }

  .cf-marquee__viewport::-webkit-scrollbar {

    display: none;

  }

}


/* =========================================================
   SAFETY
========================================================= */

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

  html,
  body {

    overflow-x: clip;

  }

}
/* END_SECTION:cf-marquee */

/* START_SECTION:cf-plant-care-finder (INDEX:26) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
  .cf-finder { --finder-green:#5c1024; --finder-pink:#e0932b; --finder-muted:#76808c; --finder-line:#e4e8e2; background:#fdfdfa; font-family:Outfit,sans-serif; color:var(--finder-green); }
  .cf-finder, .cf-finder * { box-sizing:border-box; font-family:Outfit,sans-serif; }
  .cf-finder__wrap { width:min(100% - 3rem,1440px); min-height:740px; margin:auto; display:grid; grid-template-columns:minmax(20rem,.85fr) minmax(32rem,1.15fr); align-items:center; gap:clamp(4rem,10vw,12rem); padding:clamp(4rem,8vw,8rem) 0; }
  .cf-finder__eyebrow { margin:0 0 1.65rem; color:var(--finder-pink); font-size:.88rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
  .cf-finder__intro h1 { max-width:11ch; margin:0; font-size:clamp(4.1rem,5.45vw,6.5rem); font-weight:700; letter-spacing:-.08em; line-height:.91; }
  .cf-finder__copy { max-width:34rem; margin-top:2.15rem; color:var(--finder-muted); font-size:1.22rem; line-height:1.65; }.cf-finder__copy p{margin:0;}
  .cf-finder__panel { min-height:420px; padding:clamp(2.5rem,4.5vw,4.1rem); border:1px solid var(--finder-line); border-radius:1.8rem; background:#fff; box-shadow:0 20px 45px rgba(92, 16, 36,.07); transition:transform .35s ease,box-shadow .35s ease; }
  .cf-finder__panel:hover { transform:translateY(-5px); box-shadow:0 28px 60px rgba(92, 16, 36,.12); }
  .cf-finder__progress { height:.45rem; overflow:hidden; border-radius:99px; background:#e7ebe5; }.cf-finder__progress span{display:block;width:33.333%;height:100%;border-radius:inherit;background:var(--finder-pink);transition:width .35s ease;}
  .cf-finder__step { padding-top:2.2rem; }.cf-finder__step[hidden],.cf-finder__results[hidden]{display:none;}
  .cf-finder__step-label { margin:0 0 .7rem; color:var(--finder-muted); font-size:.86rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
  .cf-finder__step h2,.cf-finder__results h2 { margin:0; font-size:clamp(2rem,2.6vw,2.65rem); font-weight:700; letter-spacing:-.06em; line-height:1.08; }
  .cf-finder__options { display:grid; gap:.9rem; margin-top:1.8rem; }.cf-finder__options--two{grid-template-columns:repeat(2,1fr);}.cf-finder__options--three{grid-template-columns:repeat(2,1fr);}.cf-finder__options--three button:last-child{grid-column:1/2;}
  .cf-finder__options button { min-height:6.15rem; display:flex; align-items:center; gap:1.1rem; padding:1.15rem 1.35rem; border:1px solid var(--finder-line); border-radius:1rem; background:#fff; color:var(--finder-green); cursor:pointer; font:600 1.2rem/1 Outfit,sans-serif; text-align:left; transition:border-color .25s ease,background-color .25s ease,transform .25s ease,box-shadow .25s ease,color .25s ease; }
  .cf-finder__icon { width:3rem; height:3rem; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; background:#f4f6f4; font-size:1.7rem; line-height:1; transition:background-color .25s ease,color .25s ease,transform .25s ease; }
  .cf-finder__options button:hover,.cf-finder__options button.is-selected { border-color:var(--finder-pink); background:#fdf0da; color:var(--finder-pink); box-shadow:0 12px 24px rgba(224, 147, 43,.13); transform:translateY(-4px); }.cf-finder__options button:hover .cf-finder__icon,.cf-finder__options button.is-selected .cf-finder__icon{background:var(--finder-pink);color:#fff;transform:rotate(-10deg) scale(1.06);}
  .cf-finder__results { padding-top:2.3rem; }.cf-finder__results>p{margin:.65rem 0 1.8rem;color:var(--finder-muted);font-size:1.13rem;}.cf-finder__product-list{display:grid;gap:1rem;}
  .cf-finder__product { min-height:7.35rem; display:flex; align-items:center; gap:1.15rem; padding:.85rem 1rem; border:1px solid var(--finder-line); border-radius:1.05rem; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }.cf-finder__product:hover{border-color:var(--finder-pink);box-shadow:0 10px 20px rgba(92, 16, 36,.07);transform:translateX(5px);}.cf-finder__product img,.cf-finder__product-placeholder { width:5.15rem;height:5.15rem;display:block;flex:0 0 auto;border-radius:.8rem;object-fit:cover;background:#f0f3f0; }.cf-finder__product-info{min-width:0;flex:1;}.cf-finder__product-info a{color:var(--finder-green);text-decoration:none;font-size:1.22rem;font-weight:700;letter-spacing:-.04em;transition:color .2s ease;}.cf-finder__product:hover .cf-finder__product-info a{color:var(--finder-pink);}.cf-finder__product-info p{margin:.4rem 0 0;color:var(--finder-muted);font-size:1rem;}.cf-finder__add{width:3.5rem;height:3.5rem;display:grid;place-items:center;flex:0 0 auto;border:0;border-radius:50%;background:var(--finder-green);color:#fff;cursor:pointer;font:400 2rem/1 Outfit,sans-serif;transition:background-color .2s ease,transform .2s ease;}.cf-finder__add:hover:not([disabled]){background:var(--finder-pink);transform:rotate(90deg) scale(1.06);}.cf-finder__add[disabled]{opacity:.4;cursor:not-allowed;}
  .cf-finder__empty{padding:1.4rem;border:1px dashed var(--finder-line);border-radius:1rem;color:var(--finder-muted);font-size:.95rem;line-height:1.5;}.cf-finder__restart{margin-top:2rem;display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--finder-line);border-radius:99px;background:#fff;padding:.8rem 1.2rem;color:var(--finder-green);cursor:pointer;font:700 .9rem/1 Outfit,sans-serif;transition:border-color .2s ease,color .2s ease;}.cf-finder__restart:hover{border-color:var(--finder-pink);color:var(--finder-pink);}
  @media(max-width:899px){.cf-finder__wrap{min-height:0;grid-template-columns:1fr;gap:3.5rem;padding-block:4.5rem;}.cf-finder__intro h1{max-width:12ch;}.cf-finder__panel{max-width:48rem;width:100%;}}
  @media(max-width:549px){.cf-finder__wrap{width:min(100% - 2rem,600px);padding-block:3.5rem;}.cf-finder__panel{padding:1.3rem;border-radius:1.25rem;}.cf-finder__options--two,.cf-finder__options--three{grid-template-columns:1fr;}.cf-finder__options--three button:last-child{grid-column:auto;}.cf-finder__intro h1{font-size:clamp(3rem,14vw,4.5rem);}.cf-finder__options button{min-height:4.8rem;font-size:1rem;}}
  @media(prefers-reduced-motion:reduce){.cf-finder *{transition-duration:.01ms!important;}}
/* END_SECTION:cf-plant-care-finder */

/* START_SECTION:cf-plant-care-hero (INDEX:27) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');


  /* =========================================================
     CRAZYFLORA PLANT CARE HERO
     ========================================================= */

  .cf-care-hero {
    --cf-care-green: #5c1024;
    --cf-care-deep: #3d0a18;
    --cf-care-pink: #e0932b;
    --cf-care-cream: #f8f7f1;
    --cf-care-muted: #b9c6c0;
  }


  .cf-care-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: max(
      940px,
      calc(100vh - var(--cf-header-offset, 0px))
    );

    padding:
      clamp(4.5rem, 7vw, 7.5rem)
      clamp(1.25rem, 4vw, 4.5rem);

    background:
      radial-gradient(
        circle at 8% 44%,
        rgba(224, 147, 43, .15),
        transparent 22rem
      ),
      linear-gradient(
        118deg,
        var(--cf-care-deep) 0%,
        var(--cf-care-green) 60%,
        #6b1830 100%
      );

    color: var(--cf-care-cream);
  }


  /* =========================================================
     MAIN WRAPPER
     ========================================================= */

  .cf-care-hero__wrap {
    position: relative;
    z-index: 2;

    width: min(100%, 1560px);

    min-height: 790px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
      minmax(27rem, 1fr)
      minmax(40rem, 1.05fr);

    align-items: center;

    gap: clamp(.5rem, 1.5vw, 1.5rem);
  }


  /* =========================================================
     AMBIENT BACKGROUND
     ========================================================= */

  .cf-care-hero__ambient {
    position: absolute;
    z-index: 1;

    pointer-events: none;

    border-radius: 999px;

    filter: blur(5px);
  }

  .cf-care-hero__ambient--one {
    width: 30rem;
    height: 30rem;

    left: -16rem;
    bottom: -18rem;

    background: rgba(27, 129, 94, .4);
  }

  .cf-care-hero__ambient--two {
    width: 26rem;
    height: 26rem;

    right: -13rem;
    top: -13rem;

    background: rgba(28, 120, 91, .28);
  }


  /* =========================================================
     CONTENT
     ========================================================= */

  .cf-care-hero__content {
    padding-bottom: .5rem;
  }


  /* =========================================================
     EYEBROW
     CrazyFlora · Plant care ritual
     ========================================================= */

  .cf-care-hero__eyebrow {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: .65rem;

    margin: 0 0 2.6rem;

    padding: .75rem 1.15rem;

    border: 1px solid rgba(255, 255, 255, .2);

    border-radius: 999px;

    color: rgba(255, 255, 255, .78);

    /*
      Increased from .76rem to 1rem
      and changed weight from 700 to 500
    */
    font: 500 1rem/1 Outfit, sans-serif;

    letter-spacing: .12em;

    text-transform: uppercase;
  }

  .cf-care-hero__eyebrow svg {
    width: 1.1rem;
    height: 1.1rem;

    color: var(--cf-care-pink);
  }


  /* =========================================================
     MAIN HEADING
     Changed from bold 700 → normal 400
     ========================================================= */

  .cf-care-hero h1 {
    max-width: 10ch;

    margin: 0;

    color: #fff;

    font-family: 'Outfit', sans-serif;

    font-size: clamp(
      5.5rem,
      8vw,
      8.8rem
    );

    /*
      Normal / elegant weight
    */
    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.05em;
  }


  /* =========================================================
     DESCRIPTION
     ========================================================= */

  .cf-care-hero__body {
    max-width: 38rem;

    margin-top: 1.8rem;

    color: var(--cf-care-muted);

    font:
      400 clamp(1.2rem, 1.6vw, 1.45rem)/1.75
      'Outfit',
      sans-serif;
  }

  .cf-care-hero__body p {
    margin: 0;
  }


  /* =========================================================
     BUTTONS
     ========================================================= */

  .cf-care-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: .9rem;

    margin-top: 2.2rem;
  }

  .cf-care-hero__button {
    min-height: 3.9rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .7rem;

    padding: .85rem 1.45rem;

    border-radius: 999px;

    text-decoration: none;

    font:
      700 1rem/1
      Outfit,
      sans-serif;

    transition:
      transform .25s ease,
      box-shadow .25s ease,
      background-color .25s ease,
      border-color .25s ease;
  }

  .cf-care-hero__button svg {
    width: 1.1rem;
    height: 1.1rem;

    transition: transform .25s ease;
  }

  .cf-care-hero__button:hover {
    transform: translateY(-3px);
  }

  .cf-care-hero__button:hover svg {
    transform: translateX(3px);
  }


  /* PRIMARY BUTTON */

  .cf-care-hero__button--primary {
    background: var(--cf-care-pink);

    color: #fff;

    box-shadow:
      0 12px 28px rgba(224, 147, 43, .22);
  }

  .cf-care-hero__button--primary:hover {
    background: #eba655;

    box-shadow:
      0 17px 35px rgba(224, 147, 43, .37);
  }


  /* SECONDARY BUTTON */

  .cf-care-hero__button--secondary {
    border: 1px solid rgba(255, 255, 255, .32);

    color: rgba(255, 255, 255, .92);
  }

  .cf-care-hero__button--secondary:hover {
    border-color: rgba(255, 255, 255, .6);

    background: rgba(255, 255, 255, .08);
  }


  /* =========================================================
     STATS
     ========================================================= */

  .cf-care-hero__stats {
    margin: 4rem 0 0;

    padding: 2.15rem 0 0;

    border-top:
      1px solid rgba(255, 255, 255, .16);

    display: flex;

    flex-wrap: wrap;

    gap:
      2.25rem
      clamp(2.5rem, 5vw, 5.5rem);

    list-style: none;
  }

  .cf-care-hero__stats li {
    display: grid;

    gap: .38rem;
  }

  .cf-care-hero__stats strong {
    font:
      700 clamp(1.8rem, 2.3vw, 2.3rem)/1
      Outfit,
      sans-serif;

    letter-spacing: -.06em;

    color: #fff;
  }

  .cf-care-hero__stats span {
    color: rgba(255, 255, 255, .55);

    font:
      500 .78rem/1.3
      Outfit,
      sans-serif;
  }


  /* =========================================================
     IMAGE
     ========================================================= */

  .cf-care-hero__visual {
    position: relative;

    width: 100%;

    max-width: 52rem;

    justify-self: start;

    padding:
      0
      0
      2.25rem
      2.25rem;
  }

  .cf-care-hero__image-frame {
    position: relative;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border-radius: 1rem;

    background: #e7eae7;

    box-shadow:
      0 28px 70px rgba(1, 25, 17, .28);
  }

  .cf-care-hero__image,
  .cf-care-hero__placeholder {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
      transform .8s
      cubic-bezier(.2, .72, .25, 1);
  }

  .cf-care-hero__visual:hover
  .cf-care-hero__image {
    transform: scale(1.045);
  }


  /* =========================================================
     FLOATING RITUAL CARD
     ========================================================= */

  .cf-care-hero__ritual {
    position: absolute;

    z-index: 2;

    left: 0;

    bottom: 0;

    width: min(15.5rem, 58%);

    padding:
      1.4rem
      1.45rem
      1.35rem;

    border:
      1px solid rgba(255, 255, 255, .72);

    border-radius: 1.55rem;

    background:
      rgba(250, 250, 248, .94);

    box-shadow:
      0 20px 45px rgba(2, 27, 19, .22);

    color: var(--cf-care-green);

    backdrop-filter: blur(12px);

    transition:
      transform .3s ease,
      box-shadow .3s ease;
  }

  .cf-care-hero__visual:hover
  .cf-care-hero__ritual {
    transform: translateY(-7px);

    box-shadow:
      0 28px 55px rgba(2, 27, 19, .3);
  }

  .cf-care-hero__ritual span {
    display: block;

    margin-bottom: .55rem;

    color: #77848a;

    font:
      700 .68rem/1
      Outfit,
      sans-serif;

    letter-spacing: .12em;

    text-transform: uppercase;
  }

  .cf-care-hero__ritual strong {
    display: block;

    max-width: 15ch;

    font:
      700 1.05rem/1.35
      Outfit,
      sans-serif;

    letter-spacing: -.035em;
  }

  .cf-care-hero__ritual i {
    position: absolute;

    width: .55rem;
    height: .55rem;

    right: 1.25rem;
    bottom: 1.25rem;

    border-radius: 50%;

    background: var(--cf-care-pink);

    box-shadow:
      0 0 0 6px rgba(224, 147, 43, .12);
  }


  /* =========================================================
     TABLET
     ========================================================= */

  @media (max-width: 989px) {

    .cf-care-hero {
      min-height: auto;
    }

    .cf-care-hero__wrap {
      min-height: 0;

      grid-template-columns: 1fr;

      gap: 3.5rem;
    }

    .cf-care-hero__content {
      max-width: 43rem;
    }

    .cf-care-hero__visual {
      justify-self: start;

      max-width: 38rem;
    }

  }


  /* =========================================================
     MOBILE
     ========================================================= */

  @media (max-width: 549px) {

    .cf-care-hero {
      padding:
        3.5rem
        1.25rem
        3.25rem;
    }

    .cf-care-hero h1 {
      font-size:
        clamp(
          3.6rem,
          16vw,
          5.25rem
        );
    }

    .cf-care-hero__eyebrow {
      margin-bottom: 1.8rem;

      /*
        Slightly smaller on mobile
        so it doesn't overpower the heading
      */
      font-size: .85rem;

      padding: .65rem .9rem;
    }

    .cf-care-hero__body {
      margin-top: 1.5rem;
    }

    .cf-care-hero__actions {
      margin-top: 2rem;
    }

    .cf-care-hero__button {
      width: 100%;
    }

    .cf-care-hero__stats {
      margin-top: 2.75rem;

      padding-top: 1.6rem;

      gap:
        1.5rem
        2rem;
    }

    .cf-care-hero__visual {
      padding:
        0
        0
        1.25rem
        1.25rem;
    }

    .cf-care-hero__ritual {
      width: 68%;

      padding: 1.1rem;

      border-radius: 1.25rem;
    }

  }


  /* =========================================================
     REDUCED MOTION
     ========================================================= */

  @media (prefers-reduced-motion: reduce) {

    .cf-care-hero *,
    .cf-care-hero *::before,
    .cf-care-hero *::after {
      transition-duration: .01ms !important;
    }

  }
/* END_SECTION:cf-plant-care-hero */

/* START_SECTION:cf-plant-care-philosophy (INDEX:28) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

  .cf-philosophy {
    --cf-philo-green: #5c1024;
    --cf-philo-pink: #e0932b;
    --cf-philo-ink: #5c1024;
    --cf-philo-muted: #77818a;
    overflow: hidden;
    background: #fff8ec;
    color: var(--cf-philo-ink);
    font-family: Outfit, sans-serif;
  }
  .cf-philosophy,
  .cf-philosophy * {
  font-family: 'Outfit', sans-serif;
}

  .cf-philosophy__ticker {
    overflow: hidden;
    border-block: 1px solid rgba(255,255,255,.12);
    background: var(--cf-philo-green);
    color: #fff;
  }
  .cf-philosophy__ticker-track { display: flex; width: max-content; animation: cf-philo-ticker 30s linear infinite; }
  .cf-philosophy__ticker-set { display: flex; align-items: center; flex: 0 0 auto; gap: clamp(1.45rem, 2.4vw, 3rem); padding: 1.55rem clamp(.75rem, 1.5vw, 1.5rem); }
  .cf-philosophy__ticker span {
  font-size: clamp(2.8rem, 4.5vw, 5.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}
  .cf-philosophy__ticker b {
  color: var(--cf-philo-pink);
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1;
}
  .cf-philosophy__ticker:hover .cf-philosophy__ticker-track { animation-play-state: paused; }
  @keyframes cf-philo-ticker { to { transform: translateX(-50%); } }

  .cf-philosophy__wrap { width: min(100% - 2.5rem, 1280px); margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) 0 clamp(5rem, 8vw, 8rem); }
  .cf-philosophy__heading { max-width: 53rem; margin-bottom: clamp(2.8rem, 5vw, 4.75rem); }
  .cf-philosophy__heading p { margin: 0 0 1.25rem; color: var(--cf-philo-pink); font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
 .cf-philosophy__heading h2 {
  margin: 0;
  font-size: clamp(3.4rem, 5vw, 6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
}
  .cf-philosophy__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.35rem, 3.2vw, 3rem); }
  .cf-philosophy__card { min-width: 0; }
  .cf-philosophy__card-link { display: block; color: inherit; text-decoration: none; }
  .cf-philosophy__image-wrap { position: relative; overflow: hidden; aspect-ratio: 1.55 / 1; border-radius: 1.45rem; background: #e8eeeb; }
  .cf-philosophy__image, .cf-philosophy__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.72,.25,1), filter .35s ease; }
  .cf-philosophy__meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.45rem; }
  .cf-philosophy__meta strong { color: var(--cf-philo-pink); font-size: 1.6rem; font-weight: 600; letter-spacing: -.055em; }
  .cf-philosophy__meta i { display: block; flex: 1; height: 1px; background: rgba(92, 16, 36,.13); transition: background-color .25s ease, transform .3s ease; transform-origin: left; }
  .cf-philosophy__card h3 {
  margin: 1.2rem 0 .9rem;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
  .cf-philosophy__card p {
  font-size: 1.08rem;
  line-height: 1.8;
  letter-spacing: .01em;
}
  .cf-philosophy__card:hover .cf-philosophy__image { transform: scale(1.075); filter: saturate(1.08); }
  .cf-philosophy__card:hover .cf-philosophy__meta i { background: var(--cf-philo-pink); transform: scaleX(.96); }
  .cf-philosophy__card:hover h3 { color: var(--cf-philo-pink); }
  .cf-philosophy__card:hover p { color: var(--cf-philo-ink); }

  @media (max-width: 749px) {
    .cf-philosophy__wrap { width: min(100% - 2rem, 620px); padding-block: 4rem 4.5rem; }
    .cf-philosophy__ticker-set { padding-block: 1.1rem; }
    .cf-philosophy__grid { grid-template-columns: 1fr; gap: 3rem; }
    .cf-philosophy__image-wrap { aspect-ratio: 1.45 / 1; }
  }
  @media (prefers-reduced-motion: reduce) { .cf-philosophy__ticker-track { animation: none; } .cf-philosophy * { transition-duration: .01ms !important; } }
/* END_SECTION:cf-plant-care-philosophy */

/* START_SECTION:cf-product-grid (INDEX:29) */
.cf-pg {
  background: var(--cf-bg);
  padding-block: var(--cf-pg-pad, 112px);
}

.cf-pg__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .cf-pg__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

.cf-pg__head-text { max-width: 42rem; }

/* Self-contained — never borrows .cf-h2 from the tokens file. */
.cf-pg .cf-pg__title {
  margin: 1rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-pg-heading, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
}

.cf-pg__sub {
  margin: 1rem 0 0;
  font-family: var(--cf-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cf-muted);
}

/* font-size was 0.875rem — see the note on .cf-btn in crazyflora-tokens.css
   for why that rendered at ~9.2px on this theme's rescaled rem root. Same
   fix, same reasoning: 1.4rem lands back at a legible ~14-15px. */
.cf-pg__all {
  display: none;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--cf-font-body);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cf-green);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 768px) { .cf-pg__all { display: inline-flex; } }

.cf-pg__all-arrow {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--cf-green-20);
  transition: background-color 0.3s var(--cf-ease), color 0.3s var(--cf-ease), transform 0.3s var(--cf-ease);
}

.cf-pg__all-arrow svg { width: 1rem; height: 1rem; }

.cf-pg__all:hover .cf-pg__all-arrow {
  background: var(--cf-green);
  color: var(--cf-bg);
  transform: translateX(3px);
}

.cf-pg__all:focus-visible { outline: 2px solid var(--cf-pink); outline-offset: 4px; border-radius: 4px; }

/* --- Grid ---------------------------------------------------------------- */
.cf-pg__grid {
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}

@media (min-width: 640px) { .cf-pg__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .cf-pg__grid {
    grid-template-columns: repeat(var(--cf-pg-cols, 4), 1fr);
    gap: 2.5rem 2rem;
  }
}
/* END_SECTION:cf-product-grid */

/* START_SECTION:cf-product (INDEX:30) */
/* =========================================================================
   CF PRODUCT — PREMIUM TYPE SCALE
   Organised top-to-bottom in the order it appears on the page: layout shell
   → gallery → buy panel → form controls → accordions → below-the-fold
   detail/FAQ → related products → modal.

   Premium pass: a serif display face carries every headline (title, section
   heads, modal title) at a noticeably larger scale, set in tight, confident
   leading. Body copy is bumped up a step for readability and to match the
   larger headline weight. Letter-spacing on labels is widened slightly so
   uppercase eyebrows read as considered rather than cramped. Panel padding,
   rules and shadows are all a touch more generous so the extra type has room
   to breathe — that's what keeps "bigger" from reading as "louder".
   ========================================================================= */

/* --- Base ----------------------------------------------------------------- */
.cf-pd,
.cf-pd button,
.cf-pd input,
.cf-pd textarea {
  font-family: Outfit, sans-serif;
}

.cf-pd {
  background: #fcfcf9;
  padding-top: max(var(--cf-header-offset, 0px), var(--cf-pd-top, 0px));
  font-size: 1.0625rem;
}

.cf-pd__wrap {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4.5vw, 4rem);
  padding-bottom: 9rem;
}

.cf-pd__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-block: 2.5rem 3.25rem;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cf-muted);
}
.cf-pd__crumbs a { color: inherit; text-decoration: none; }
.cf-pd__crumbs a:hover { color: #F95F92; }

/* --- Top grid --------------------------------------------------------------- */
.cf-pd__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
}

@media (min-width: 1024px) {
  .cf-pd__top {
    grid-template-columns: minmax(0, 620px) minmax(480px, 1fr);
    gap: clamp(3.75rem, 6.5vw, 8rem);
    align-items: start;
  }
  .cf-pd__sticky { position: sticky; top: calc(max(var(--cf-header-offset, 0px), var(--cf-pd-top, 0px)) + 2.25rem); padding-top: 0.7rem; }
}

/* --- Gallery ---------------------------------------------------------------- */
.cf-pd__gallery { display: flex; flex-direction: column-reverse; gap: 0.85rem; }

@media (min-width: 640px) {
  .cf-pd__gallery { flex-direction: row-reverse; align-items: flex-start; }
}

.cf-pd__stage {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 32px;
  overflow: hidden;
  background: #eef2ee;
  aspect-ratio: var(--cf-pd-media-ratio, 4 / 5);
  border: 1px solid rgba(20, 63, 48, .1);
  box-shadow: 0 30px 70px rgba(20, 63, 48, .12);
}

.cf-pd__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s var(--cf-ease); }
.cf-pd__slide.is-active { opacity: 1; }
.cf-pd__img, .cf-pd__video, .cf-pd__model { width: 100%; height: 100%; object-fit: contain; display: block; }
.cf-pd__img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cf-pd__stage:hover .cf-pd__img { transform: scale(1.035); }

.cf-pd__badge {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  color: #143f30;
  padding: 9px 15px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.cf-pd__thumbs { display: flex; gap: 0.6rem; flex-shrink: 0; }
@media (min-width: 640px) { .cf-pd__thumbs { flex-direction: column; } }

.cf-pd__thumb {
  width: 72px; height: 72px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(20, 63, 48, .12);
  padding: 0;
  background: var(--cf-card);
  cursor: pointer;
  opacity: 0.65;
  transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.cf-pd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-pd__thumb:hover { border-color: #F95F92; opacity: 1; transform: translateX(2px); }
.cf-pd__thumb.is-active { border: 2px solid #143f30; opacity: 1; }
.cf-pd__thumb:focus-visible { outline: 2px solid #F95F92; outline-offset: 2px; }

/* --- Buy panel: identity & price --------------------------------------------- */
.cf-pd__panel { min-width: 0; }

.cf-pd__vendor {
  margin: 0 0 1.1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F95F92;
}

.cf-pd__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--cf-font-heading), Georgia, 'Times New Roman', serif;
  font-size: clamp(3.25rem, 4.4vw, 5.5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #143f30;
}

.cf-pd__rating { margin-top: 1.3rem; display: flex; align-items: center; gap: 0.6rem; }
.cf-pd__stars { position: relative; font-size: 1.2rem; letter-spacing: 0.08em; color: var(--cf-green-20); }
.cf-pd__stars::before {
  content: "★★★★★";
  position: absolute; inset: 0;
  width: var(--pct, 0%);
  overflow: hidden;
  color: #F95F92;
  white-space: nowrap;
}
.cf-pd__rating-num { font-size: 1.0625rem; font-weight: 700; color: #143f30; }
.cf-pd__rating-count { font-size: 1.0625rem; color: var(--cf-muted); }

.cf-pd__pricing { margin-top: 1.9rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.85rem; }
.cf-pd__price {
  font-family: var(--cf-font-heading), Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #143f30;
}
.cf-pd__price.is-sale { color: #F95F92; }
.cf-pd__was { font-size: 1.25rem; color: var(--cf-muted); }
.cf-pd__was[hidden] { display: none; }
.cf-pd__tax { margin: 0.6rem 0 0; width: 100%; font-size: 0.9375rem; color: var(--cf-muted); }

/* --- Assurance row (guarantee + WhatsApp) ------------------------------------ */
.cf-pd__assure {
  margin-top: 1.6rem;
  padding: 1.15rem 0;
  border-block: 1px solid rgba(20, 63, 48, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.75rem;
}
.cf-pd__assure-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #143f30;
  text-decoration: none;
}
.cf-pd__assure-item svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.cf-pd__assure-wa { color: #143f30; }
.cf-pd__assure-wa:hover { color: #F95F92; }

.cf-pd__info {
  display: inline-grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  border: 0; border-radius: 999px;
  background: var(--cf-green-10);
  color: #143f30;
  font-size: 0.8125rem; font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s var(--cf-ease);
}
.cf-pd__info:hover { background: #F95F92; color: #fff; }

.cf-pd__tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: 21rem;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: #143f30;
  color: var(--cf-bg);
  font-size: 0.875rem;
  line-height: 1.6;
  box-shadow: 0 14px 34px rgb(22 59 45 / 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s var(--cf-ease), transform 0.2s var(--cf-ease), visibility 0.2s;
}
.cf-pd__tip.is-open { opacity: 1; visibility: visible; transform: none; }
.cf-pd__tip-link {
  display: inline-block;
  margin-left: 0.15rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cf-pd__tip-link:hover { color: #F95F92; }

/* --- Attribute grid ----------------------------------------------------------- */
.cf-pd__attrs {
  margin: 1.6rem 0 0;
  padding: 1.35rem 1.5rem;
  border: 0;
  border-radius: 18px;
  background: #f1f5f1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.75rem;
}
.cf-pd__attrs li { font-size: 1.125rem; font-weight: 650; color: #143f30; }
.cf-pd__attrs span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #78828c;
  margin-bottom: 0.32rem;
}

/* --- Care snapshot card --------------------------------------------------------- */
.cf-pd__care-card {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  overflow: hidden;
  border-radius: 16px;
  background: var(--cf-card);
}
.cf-pd__care-intro,
.cf-pd__care-item { min-width: 0; padding: 1.15rem; }
.cf-pd__care-intro {
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  background: var(--cf-green-10);
  color: #143f30;
}
.cf-pd__care-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F95F92;
}
.cf-pd__care-intro strong {
  font-family: var(--cf-font-heading), Georgia, 'Times New Roman', serif;
  font-size: 1.375rem; line-height: 1.15; font-weight: 600;
}
.cf-pd__care-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 0.95rem;
  border-left: 1px solid var(--cf-green-10);
  color: #143f30;
}
.cf-pd__care-icon {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cf-green-10);
}
.cf-pd__care-icon svg { width: 1.5rem; height: 1.5rem; }
.cf-pd__care-item b { display: block; font-size: 0.9375rem; font-weight: 700; }
.cf-pd__care-item small { display: block; margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.45; color: var(--cf-muted); }

@media (max-width: 639px) {
  .cf-pd__care-card { grid-template-columns: 1fr 1fr; }
  .cf-pd__care-intro { grid-column: 1 / -1; min-height: auto; }
  .cf-pd__care-item:first-of-type { border-left: 0; }
}

/* --- Size guide button + modal ------------------------------------------------- */
.cf-pd__sizeguide-btn {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--cf-green-20);
  border-radius: 999px;
  background: none;
  padding: 0.7rem 1.35rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #143f30;
  cursor: pointer;
  transition: border-color 0.2s var(--cf-ease), color 0.2s var(--cf-ease), background-color .2s var(--cf-ease);
}
.cf-pd__sizeguide-btn svg { width: 1.3rem; height: 1.3rem; }
.cf-pd__sizeguide-btn:hover { border-color: #F95F92; background: #fff1f5; color: #F95F92; }

.cf-pd__modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem; }
.cf-pd__modal[hidden] { display: none; }
.cf-pd__modal-scrim { position: absolute; inset: 0; background: rgb(22 59 45 / 0.55); backdrop-filter: blur(4px); animation: cf-pd-fade 0.25s var(--cf-ease); }
.cf-pd__modal-panel {
  position: relative;
  width: min(44rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--cf-bg);
  border-radius: 26px;
  padding: 2.75rem;
  box-shadow: 0 44px 90px rgb(22 59 45 / 0.32);
  animation: cf-pd-pop 0.3s var(--cf-ease);
}
@keyframes cf-pd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-pd-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.cf-pd__modal-close {
  position: absolute; top: 1.35rem; right: 1.35rem;
  display: grid; place-items: center;
  height: 2.4rem; width: 2.4rem;
  border: 0; border-radius: 999px;
  background: var(--cf-green-10);
  color: #143f30;
  cursor: pointer;
  transition: background-color 0.2s var(--cf-ease);
}
.cf-pd__modal-close:hover { background: #F95F92; color: #fff; }
.cf-pd__modal-close svg { width: 1.15rem; height: 1.15rem; }
.cf-pd__modal-title {
  margin: 0;
  font-family: var(--cf-font-heading), Georgia, 'Times New Roman', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #143f30;
  padding-right: 2.5rem;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.cf-pd__modal-intro { margin: 0.9rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--cf-muted); }
.cf-pd__sizeimg-wrap { margin-top: 1.9rem; }
.cf-pd__sizeimg { width: 100%; height: auto; display: block; border-radius: 18px; }
.cf-pd__modal-note { margin: 1.6rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: var(--cf-muted); }
@media (prefers-reduced-motion: reduce) { .cf-pd__modal-scrim, .cf-pd__modal-panel { animation: none; } }

/* --- Options / swatches --------------------------------------------------------- */
.cf-pd__options { order: 1; margin-top: 2.1rem; display: flex; flex-direction: column; gap: 1.4rem; }
.cf-pd__option-head { display: flex; gap: 0.55rem; margin-bottom: 0.75rem; font-size: 1.0625rem; }
.cf-pd__option-name { font-weight: 650; color: #143f30; letter-spacing: 0.02em; }
.cf-pd__option-value { color: var(--cf-muted); }

.cf-pd__swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cf-pd__swatch { position: relative; cursor: pointer; }
.cf-pd__swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cf-pd__swatch-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--cf-green-20);
  font-size: 1.0625rem;
  color: #143f30;
  transition: border-color 0.2s var(--cf-ease), background-color 0.2s var(--cf-ease), color .2s var(--cf-ease);
}
.cf-pd__swatch input:checked + .cf-pd__swatch-label { border-color: #143f30; background: #143f30; color: var(--cf-bg); }
.cf-pd__swatch-label:hover { border-color: #F95F92; color: #F95F92; }
.cf-pd__swatch input:focus-visible + .cf-pd__swatch-label { outline: 2px solid #F95F92; outline-offset: 2px; }
.cf-pd__swatch.is-unavailable .cf-pd__swatch-label { opacity: 0.35; text-decoration: line-through; }

/* --- Gift note ----------------------------------------------------------------- */
.cf-pd__gift {
  order: 2;
  margin-top: 1.3rem;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.cf-pd__gift-toggle { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.cf-pd__gift-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-pd__gift-box {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1.3rem; height: 1.3rem;
  border: 1.5px solid var(--cf-green-20);
  border-radius: 6px;
  color: #fff;
  transition: background-color 0.2s var(--cf-ease), border-color 0.2s var(--cf-ease);
}
.cf-pd__gift-box svg { width: 0.8rem; height: 0.8rem; opacity: 0; transition: opacity 0.15s var(--cf-ease); }
.cf-pd__gift-toggle input:checked + .cf-pd__gift-box { background: #F95F92; border-color: #F95F92; }
.cf-pd__gift-toggle input:checked + .cf-pd__gift-box svg { opacity: 1; }
.cf-pd__gift-toggle input:focus-visible + .cf-pd__gift-box { outline: 2px solid #F95F92; outline-offset: 2px; }
.cf-pd__gift-label {
  font-size: 1.0625rem; font-weight: 500; color: #143f30;
  display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.4rem;
}
.cf-pd__gift-free {
  font-size: 1.0625rem; font-weight: 500; color: var(--cf-muted);
  text-transform: none; letter-spacing: normal;
}
.cf-pd__gift-free::before { content: "\00b7"; margin-right: 0.4rem; color: var(--cf-muted); }
.cf-pd__gift-note { margin-top: 0.95rem; position: relative; }
.cf-pd__gift-note[hidden] { display: none; }
.cf-pd__gift-note textarea {
  width: 100%;
  border: 1px solid var(--cf-green-20);
  border-radius: 12px;
  padding: 0.9rem 1.05rem;
  font-size: 1.0625rem;
  color: var(--cf-text);
  resize: vertical;
  background: var(--cf-card);
}
.cf-pd__gift-note textarea:focus { outline: none; border-color: #F95F92; }
.cf-pd__gift-count { position: absolute; right: 0.8rem; bottom: 0.65rem; font-size: 0.8125rem; color: var(--cf-muted); pointer-events: none; }

/* --- Buy row (quantity + add to cart) ------------------------------------------- */
.cf-pd__form { display: flex; flex-direction: column; }
.cf-pd__form .shopify-payment-button { order: 4; margin-top: 0.8rem; }
.cf-pd__feedback { order: 5; }

.cf-pd__buy { order: 3; margin-top: 1.05rem; display: flex; gap: 0.85rem; }
.cf-pd__qty { display: flex; align-items: center; border: 1px solid var(--cf-green-20); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.cf-pd__qty-btn, .cf-pd__qty-input { height: 4rem; }
.cf-pd__qty-btn { width: 3rem; border: 0; background: none; font-size: 1.25rem; color: #143f30; cursor: pointer; transition: background-color 0.2s var(--cf-ease); }
.cf-pd__qty-btn:hover { background: var(--cf-green-10); }
.cf-pd__qty-input {
  width: 2.9rem; border: 0; text-align: center; background: none;
  font-size: 1.0625rem; color: #143f30; -moz-appearance: textfield;
}
.cf-pd__qty-input::-webkit-outer-spin-button, .cf-pd__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cf-pd__add {
  flex: 1;
  min-height: 4rem;
  border: 1px solid #143f30;
  border-radius: 999px;
  background: #143f30;
  color: var(--cf-bg);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cf-pd__add:hover:not([disabled]) {
  border-color: #F95F92;
  background: #F95F92;
  box-shadow: 0 14px 30px rgba(249, 95, 146, .32);
  transform: translateY(-2px);
}
.cf-pd__add[disabled] { background: var(--cf-muted); border-color: var(--cf-muted); cursor: not-allowed; }
.cf-pd__add.is-loading { opacity: 0.6; pointer-events: none; }
.cf-pd__add:focus-visible { outline: 2px solid #F95F92; outline-offset: 3px; }

/* Force Shopify's dynamic-checkout button into the palette; its stylesheet
   loads after ours with high specificity, so the properties that matter are
   marked important. */
.cf-pd__form .shopify-payment-button__button--unbranded,
.cf-pd__form .shopify-payment-button__button {
  border-radius: 999px !important;
  min-height: 3.25rem !important;
  height: 3.25rem !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #143f30 !important;
  border: 1.5px solid var(--cf-green-20) !important;
  box-shadow: none !important;
  font-family: Outfit, sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  transition: border-color 0.2s var(--cf-ease), background-color 0.2s var(--cf-ease) !important;
}
.cf-pd__form .shopify-payment-button__button:hover:not([disabled]) {
  border-color: #F95F92 !important;
  background: #fff1f5 !important;
  color: #F95F92 !important;
}
.cf-pd__form .shopify-payment-button__more-options { color: var(--cf-muted) !important; text-decoration: underline !important; }
.cf-pd__form .shopify-payment-button__button--branded { filter: none !important; }

.cf-pd__feedback { margin: 1rem 0 0; font-size: 1.0625rem; }
.cf-pd__feedback[hidden] { display: none; }
.cf-pd__feedback.is-ok { color: #1d7a4c; }
.cf-pd__feedback.is-err { color: #c02a52; }

/* --- Accordions (in-panel: description / care / delivery) ---------------------- */
.cf-pd__acc { margin-top: 2.75rem; border-top: 1px solid rgba(20, 63, 48, .14); }
.cf-pd__acc-item { border-bottom: 1px solid rgba(20, 63, 48, .14); }
.cf-pd__acc-item summary {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.35rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #143f30;
}
.cf-pd__acc-item summary::-webkit-details-marker { display: none; }
.cf-pd__acc-item summary::marker { content: ""; }
.cf-pd__acc-item[open] summary { color: #F95F92; }
.cf-pd__acc-item summary span { position: relative; width: 13px; height: 13px; flex-shrink: 0; }
.cf-pd__acc-item summary span::before, .cf-pd__acc-item summary span::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 0.3s var(--cf-ease), opacity 0.3s var(--cf-ease);
}
.cf-pd__acc-item summary span::before { inset: 5.5px 0; height: 1.5px; }
.cf-pd__acc-item summary span::after { inset: 0 5.5px; width: 1.5px; }
.cf-pd__acc-item[open] summary span::after { transform: scaleY(0); opacity: 0; }
.cf-pd__acc-item .cf-pd__rte { padding-bottom: 1.6rem; }

.cf-pd__rte { font-size: 1.0625rem; line-height: 1.8; color: var(--cf-muted); }
.cf-pd__rte p { margin: 0 0 0.9rem; }
.cf-pd__rte p:last-child { margin-bottom: 0; }
.cf-pd__rte a { color: #F95F92; }
.cf-pd__rte ul, .cf-pd__rte ol { padding-left: 1.2rem; margin: 0 0 0.9rem; }
.cf-pd__rte img { max-width: 100%; height: auto; border-radius: var(--cf-radius-sm); }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .cf-pd__acc-item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 0.32s var(--cf-ease), content-visibility 0.32s allow-discrete;
  }
  .cf-pd__acc-item[open]::details-content { block-size: auto; }
}

/* --- Specification table (in-panel) --------------------------------------------- */
.cf-pd__spec-wrap { padding: 0.35rem 0 1.6rem; }
.cf-pd__spectable { width: 100%; border-collapse: collapse; border: 1px solid var(--cf-green-10); border-radius: 18px; overflow: hidden; }
.cf-pd__spectable tr { border-bottom: 1px solid var(--cf-green-10); }
.cf-pd__spectable tr:last-child { border-bottom: 0; }
.cf-pd__spectable tr:nth-child(even) { background: rgb(22 59 45 / 0.025); }
.cf-pd__spectable th {
  width: 34%;
  padding: 1.1rem 1.35rem;
  text-align: left;
  vertical-align: top;
  font-size: 1.0625rem;
  font-weight: 650;
  color: #143f30;
  background: #edf2ee;
  border-right: 1px solid var(--cf-green-10);
  letter-spacing: 0.01em;
}
.cf-pd__spectable td { padding: 1.1rem 1.35rem; vertical-align: top; font-size: 1.0625rem; line-height: 1.55; color: var(--cf-text); }

/* --- Promises ------------------------------------------------------------------ */
.cf-pd__promises { margin: 1.8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.cf-pd__promises li { display: flex; align-items: center; gap: 0.7rem; font-size: 1.0625rem; color: var(--cf-muted); }
.cf-pd__promises svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; color: #F95F92; opacity: 1; }

/* --- Below-the-fold: specifications + FAQ -------------------------------------- */
.cf-pd__below {
  margin-top: clamp(4.5rem, 8.5vw, 8rem);
  padding-top: clamp(3.25rem, 6.5vw, 5.5rem);
  border-top: 1px solid var(--cf-green-10);
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.5fr);
  gap: clamp(2.25rem, 6vw, 7.5rem);
  align-items: start;
}
.cf-pd__below-intro { position: sticky; top: 7.5rem; }
.cf-pd__kicker {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #F95F92;
}
.cf-pd__below h2, .cf-pd__faq h2 {
  margin: 0;
  font-family: var(--cf-font-heading), Georgia, 'Times New Roman', serif;
  color: #143f30;
  font-size: clamp(2.75rem, 4.1vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cf-pd__below-intro > p:last-child {
  margin: 1.25rem 0 0;
  max-width: 26rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cf-muted);
}

.cf-pd__wide-details { border-top: 1px solid var(--cf-green-20); border-bottom: 1px solid var(--cf-green-20); }
.cf-pd__wide-details + .cf-pd__wide-details { border-top: 0; }
.cf-pd__wide-details summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.55rem 0;
  cursor: pointer;
  list-style: none;
  color: #143f30;
  font-size: clamp(1.15rem, 1.5vw, 1.375rem);
  font-weight: 650;
}
.cf-pd__wide-details summary::-webkit-details-marker { display: none; }
.cf-pd__wide-details summary i { position: relative; width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.cf-pd__wide-details summary i::before, .cf-pd__wide-details summary i::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 100%; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform 0.2s var(--cf-ease);
}
.cf-pd__wide-details summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.cf-pd__wide-details[open] summary { color: #F95F92; }
.cf-pd__wide-details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.cf-pd__wide-details-body { padding: 0 0 1.6rem; }
.cf-pd__wide-details-body > p, .cf-pd__wide-details-body .rte p {
  margin: 0;
  max-width: 50rem;
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--cf-muted);
}
.cf-pd__spectable--wide { margin: 0; }
.cf-pd__spectable--wide th { width: 32%; }
.cf-pd__faq { margin-top: 4.5rem; }
.cf-pd__faq > .cf-pd__kicker { margin-top: 0; }
.cf-pd__faq h2 { margin-bottom: 1.6rem; }

@media (max-width: 767px) {
  .cf-pd__below { display: block; margin-top: 3.75rem; padding-top: 3.25rem; }
  .cf-pd__below-intro { position: static; margin-bottom: 2.75rem; }
  .cf-pd__spectable--wide th { width: 42%; }
}

/* --- Reviews (Judge.me) ---------------------------------------------------------- */
/* The section already has its own "Customer Reviews" <h2> above, so Judge.me's
   built-in widget title is hidden to avoid a duplicate heading. */
#cf-pd-reviews .jdgm-rev-widg__title { display: none; }

/* --- Related products ------------------------------------------------------------ */
.cf-pd__related { margin-top: 8.5rem; padding-top: 5.5rem; border-top: 1px solid var(--cf-green-10); }
.cf-pd__section-title {
  margin: 0 0 2.25rem;
  font-family: var(--cf-font-heading), Georgia, 'Times New Roman', serif;
  font-size: clamp(2.75rem, 3.9vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #143f30;
}
.cf-pd__related-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.5rem; }
@media (min-width: 768px) { .cf-pd__related-grid { grid-template-columns: repeat(4, 1fr); gap: 2.75rem 2rem; } }

/* --- Small screens & motion ------------------------------------------------------- */
@media (max-width: 639px) {
  .cf-pd__stage { border-radius: 24px; }
  .cf-pd__thumb { width: 58px; height: 58px; }
  .cf-pd__title { font-size: clamp(2.75rem, 12vw, 3.5rem); }
  .cf-pd__price { font-size: 2.35rem; }
  .cf-pd__wrap { padding-bottom: 5.5rem; }
  .cf-pd__care-item { padding: 0.95rem; }
  .cf-pd__spectable th, .cf-pd__spectable td { padding: 0.9rem; }
  .cf-pd__spectable th { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-pd__slide { transition: none; }
  .cf-pd__acc-item::details-content { transition: none; }
}
/* END_SECTION:cf-product */

/* START_SECTION:cf-reviews (INDEX:31) */
.cf-rv {
  background: var(--cf-bg);
  padding-block: var(--cf-rv-pad, 96px);
  overflow: hidden;
}

.cf-rv__head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.cf-rv .cf-rv__title {
  margin: 1rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-rv-heading, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
}

.cf-rv__sub {
  margin: 1rem 0 0;
  font-family: var(--cf-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cf-muted);
}

.cf-rv__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 2rem auto 0;
  padding: 14px 28px;
  background: var(--cf-card);
  border-radius: 999px;
  box-shadow: var(--cf-shadow);
}

.cf-rv__badge-stars {
  color: #f5b400;
  font-size: 19px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

.cf-rv__badge-divider {
  width: 4px;
  height: 4px;
  min-width: 4px;
  border-radius: 50%;
  background: var(--cf-pink);
}

.cf-rv__badge-text {
  font-family: var(--cf-font-body);
  color: var(--cf-text);
  font-size: 15px;
  line-height: 1.3;
}

.cf-rv__badge-text strong {
  color: var(--cf-green);
  font-weight: 700;
}

/* Marquee viewport bleeds past .cf-container's own gutter, same trick
   custom_liquid_WVkmJw's arrivals rail uses: escape the padded parent,
   then re-pad the track so the first/last card still line up with the
   rest of the page's content edge. */
.cf-rv__viewport {
  margin: 3.5rem calc(var(--cf-gutter) * -1) 0;
  overflow: hidden;
  padding-block: 8px;
}

.cf-rv__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding-inline: var(--cf-gutter);
  animation: cfRvScroll var(--cf-rv-dur, 46s) linear infinite;
}

.cf-rv__viewport:hover .cf-rv__track,
.cf-rv__viewport:focus-within .cf-rv__track {
  animation-play-state: paused;
}

@keyframes cfRvScroll {
  to { transform: translateX(-50%); }
}

.cf-rv__card {
  flex: 0 0 auto;
  width: min(82vw, 340px);
  border-radius: var(--cf-radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cf-rv__card--pink { background: #fdf0da; }
.cf-rv__card--sage { background: #cfd9d0; }

.cf-rv__stars {
  display: flex;
  gap: 4px;
}

.cf-rv__stars svg {
  width: 18px;
  height: 18px;
  fill: rgb(22 59 45 / 0.25);
  flex-shrink: 0;
}

.cf-rv__stars svg.is-filled {
  fill: var(--cf-green);
}

.cf-rv__quote {
  margin: 0;
  font-family: var(--cf-font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cf-green);
}

.cf-rv__byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.cf-rv__avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: var(--cf-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.cf-rv__card--pink .cf-rv__avatar { background: var(--cf-green); }
.cf-rv__card--sage .cf-rv__avatar { background: var(--cf-pink-btn); }

.cf-rv__check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 15px;
  height: 15px;
  fill: var(--cf-green);
  stroke: #fff;
}

.cf-rv__check circle {
  stroke: #fff;
  stroke-width: 1.5;
}

.cf-rv__who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.cf-rv__author {
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cf-green);
}

.cf-rv__verified {
  font-family: var(--cf-font-body);
  font-size: 0.75rem;
  color: rgb(22 59 45 / 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .cf-rv__track {
    animation: none;
    overflow-x: auto;
    width: 100%;
    scroll-snap-type: x proximity;
  }
  .cf-rv__track > [aria-hidden="true"] { display: none; }
}
/* END_SECTION:cf-reviews */

/* START_SECTION:cf-ritual-cta (INDEX:32) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');


  /* =========================================
     MAIN SECTION
  ========================================= */

  .cf-ritual {
    padding: clamp(3.5rem, 7vw, 7rem) 1.25rem;
    background: #fff8ec;
    font-family: 'Outfit', sans-serif;
  }

  .cf-ritual *,
  .cf-ritual *::before,
  .cf-ritual *::after {
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
  }


  /* =========================================
     MAIN BANNER
  ========================================= */

  .cf-ritual__panel {
    position: relative;

    width: min(100%, 1430px);

    min-height: clamp(31rem, 37vw, 39rem);

    display: grid;
    place-items: center;

    overflow: hidden;

    margin: auto;

    border-radius: 1.8rem;

    background:
      linear-gradient(
        115deg,
        #5c1024 0%,
        #3d0a18 54%,
        #6b1830 100%
      );

    color: #fff;
  }


  /* =========================================
     BACKGROUND IMAGE
  ========================================= */

  .cf-ritual__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.01);

    transition:
      transform 1.2s cubic-bezier(.2,.72,.25,1);
  }


  /* =========================================
     TEXT READABILITY OVERLAY
  ========================================= */

  .cf-ritual__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
      radial-gradient(
        ellipse 68% 78% at 50% 50%,
        rgba(4, 35, 26, .72) 0%,
        rgba(4, 35, 26, .55) 30%,
        rgba(4, 35, 26, .30) 52%,
        rgba(4, 35, 26, .10) 72%,
        rgba(4, 35, 26, .02) 100%
      );
  }


  /* =========================================
     DECORATIVE GLOWS
  ========================================= */

  .cf-ritual__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(8px);

    pointer-events: none;

    z-index: 2;

    transition:
      transform .8s cubic-bezier(.2,.72,.25,1);
  }

  .cf-ritual__glow--one {
    width: 32rem;
    height: 32rem;

    top: -25rem;
    left: 15%;

    background: rgba(248, 92, 145, .13);
  }

  .cf-ritual__glow--two {
    width: 30rem;
    height: 30rem;

    right: -17rem;
    bottom: -18rem;

    background: rgba(45, 146, 105, .20);
  }


  /* =========================================
     CONTENT
  ========================================= */

  .cf-ritual__content {
    position: relative;

    z-index: 4;

    width: min(90%, 54rem);

    padding: 4rem 1.5rem;

    text-align: center;
  }


  /* =========================================
     PINK EYEBROW
  ========================================= */

  .cf-ritual__content p {
    margin: 0 0 2.4rem;

    color: #ff78a6;

    font-size: 1.15rem;

    font-weight: 700;

    letter-spacing: .22em;

    line-height: 1.4;

    text-transform: uppercase;

    text-shadow:
      0 2px 8px rgba(0, 0, 0, .45),
      0 0 15px rgba(0, 0, 0, .25);
  }


  /* =========================================
     MAIN HEADING
  ========================================= */

  .cf-ritual__content h2 {
    margin: 0;

    color: #ffffff !important;

    font-size: clamp(5rem, 7vw, 8rem);

    font-weight: 700;

    /*
      Increased from .9 so the two lines
      have more breathing room.
    */
    line-height: 1.08;

    letter-spacing: -.07em;

    text-shadow:
      0 3px 8px rgba(0, 0, 0, .55),
      0 8px 25px rgba(0, 0, 0, .38),
      0 0 35px rgba(0, 0, 0, .18);
  }


  /* =========================================
     BUTTON
  ========================================= */

  .cf-ritual__button {
    min-height: 4.2rem;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .7rem;

    margin-top: 3rem;

    padding: .85rem 1.55rem;

    border-radius: 99px;

    background: #e0932b;

    color: #fff;

    text-decoration: none;

    font-size: 1.08rem;

    font-weight: 700;

    box-shadow:
      0 13px 28px rgba(224, 147, 43, .30),
      0 4px 15px rgba(0, 0, 0, .18);

    transition:
      transform .25s ease,
      background-color .25s ease,
      box-shadow .25s ease;
  }

  .cf-ritual__button b {
    font-size: 1.35rem;

    font-weight: 400;

    transition:
      transform .25s ease;
  }

  .cf-ritual__button:hover {
    background: #eba655;

    box-shadow:
      0 19px 38px rgba(224, 147, 43, .40),
      0 6px 20px rgba(0, 0, 0, .20);

    transform:
      translateY(-5px)
      scale(1.03);
  }

  .cf-ritual__button:hover b {
    transform:
      translate(3px, -3px);
  }


  /* =========================================
     IMAGE HOVER
  ========================================= */

  .cf-ritual__panel:hover .cf-ritual__background {
    transform: scale(1.035);
  }


  /* =========================================
     GLOW HOVER
  ========================================= */

  .cf-ritual__panel:hover .cf-ritual__glow--one {
    transform:
      translate(4rem, 7rem)
      scale(1.2);
  }

  .cf-ritual__panel:hover .cf-ritual__glow--two {
    transform:
      translate(-5rem, -4rem)
      scale(1.16);
  }


  /* =========================================
     MOBILE
  ========================================= */

  @media (max-width: 549px) {

    .cf-ritual {
      padding: 2.4rem 1rem;
    }

    .cf-ritual__panel {
      min-height: 29rem;

      border-radius: 1.3rem;
    }

    .cf-ritual__background {
      background-position: center center;
    }

    .cf-ritual__overlay {
      background:
        radial-gradient(
          ellipse 90% 75% at 50% 50%,
          rgba(4, 35, 26, .76) 0%,
          rgba(4, 35, 26, .58) 38%,
          rgba(4, 35, 26, .22) 70%,
          rgba(4, 35, 26, .05) 100%
        );
    }

    .cf-ritual__content {
      width: 94%;

      padding: 3rem 1rem;
    }

    /* Larger pink text on mobile */

    .cf-ritual__content p {
      font-size: .95rem;

      margin-bottom: 1.8rem;

      letter-spacing: .18em;

      line-height: 1.4;
    }

    /* More breathing room between heading lines */

    .cf-ritual__content h2 {
      font-size:
        clamp(
          3.1rem,
          14vw,
          4.4rem
        );

      line-height: 1.05;

      letter-spacing: -.06em;

      text-shadow:
        0 3px 8px rgba(0, 0, 0, .60),
        0 8px 22px rgba(0, 0, 0, .42);
    }

    .cf-ritual__button {
      margin-top: 2.5rem;

      font-size: 1rem;
    }
  }


  /* =========================================
     REDUCED MOTION
  ========================================= */

  @media (prefers-reduced-motion: reduce) {

    .cf-ritual *,
    .cf-ritual *::before,
    .cf-ritual *::after {
      transition-duration: .01ms !important;
    }

  }
/* END_SECTION:cf-ritual-cta */

/* START_SECTION:cf-services (INDEX:33) */
.cf-sv {
  background: var(--cf-bg);
  padding-block: var(--cf-sv-pad, 96px);
}

.cf-sv__head { max-width: 44rem; }

/* Self-contained — never borrows .cf-h2. */
.cf-sv .cf-sv__title {
  margin: 1rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-sv-heading, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
}

.cf-sv__sub {
  margin: 1rem 0 0;
  font-family: var(--cf-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cf-muted);
}

.cf-sv__grid {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) { .cf-sv__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .cf-sv__grid {
    grid-template-columns: repeat(var(--cf-sv-cols, 4), 1fr);
    gap: 2rem;
  }
}

.cf-sv__item {
  display: flex;
  transition-delay: calc(var(--i, 0) * 80ms);
}

.cf-sv__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--cf-radius);
  background: var(--cf-card);
  border: 1px solid transparent;
  padding: var(--cf-sv-cardpad, 2.25rem);
  box-shadow: 0 8px 30px rgb(22 59 45 / 0.05);
  text-decoration: none;
  transition:
    transform 0.5s var(--cf-ease),
    border-color 0.5s var(--cf-ease),
    box-shadow 0.5s var(--cf-ease);
}

.cf-sv__card:hover {
  transform: translateY(-6px);
  border-color: var(--cf-pink);
  box-shadow: 0 20px 48px rgb(22 59 45 / 0.1);
}

.cf-sv__card:focus-visible {
  outline: 3px solid var(--cf-pink);
  outline-offset: 3px;
}

.cf-sv__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cf-sv__tile {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: var(--cf-sv-tile, 44px);
  width: var(--cf-sv-tile, 44px);
  color: var(--cf-green);
  transition: background-color 0.5s var(--cf-ease), color 0.5s var(--cf-ease);
}

/* Tiled: the icon sits on a tinted rounded square. The original design. */
.cf-sv__card--tile .cf-sv__tile {
  border-radius: 0.875rem;
  background: rgb(22 59 45 / 0.05);
}

.cf-sv__card--tile .cf-sv__tile svg {
  width: calc(var(--cf-sv-tile, 44px) * 0.45);
  height: calc(var(--cf-sv-tile, 44px) * 0.45);
}

.cf-sv__card--tile:hover .cf-sv__tile {
  background: rgb(249 95 146 / 0.1);
  color: var(--cf-pink);
}

/* Bare: no tile, and the icon fills the box it used to sit inside — otherwise
   removing the background just leaves a small mark adrift in white space.
   Left-aligned to the card's padding, not centred in a phantom square. */
.cf-sv__card--bare .cf-sv__tile {
  place-items: center start;
  background: none;
}

.cf-sv__card--bare .cf-sv__tile svg {
  width: calc(var(--cf-sv-tile, 44px) * 0.68);
  height: calc(var(--cf-sv-tile, 44px) * 0.68);
  stroke-width: 1.5;
}

.cf-sv__card--bare:hover .cf-sv__tile { color: var(--cf-pink); }

.cf-sv__arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--cf-muted);
  transition: color 0.5s var(--cf-ease), transform 0.5s var(--cf-ease);
}

.cf-sv__arrow svg { width: 1.125rem; height: 1.125rem; }

.cf-sv__card:hover .cf-sv__arrow {
  color: var(--cf-pink);
  transform: translate(2px, -2px);
}

.cf-sv__name {
  margin: var(--cf-sv-gap, 2.5rem) 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-sv-title, 19px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--cf-green);
}

.cf-sv__text {
  margin: 0.5rem 0 0;
  max-width: 32ch;
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cf-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cf-sv__item { transition-delay: 0ms; }
  .cf-sv__card:hover { transform: none; }
  .cf-sv__card:hover .cf-sv__arrow { transform: none; }
}
/* END_SECTION:cf-services */

/* START_SECTION:cf-shop-by-category (INDEX:34) */
.cf-cat {
  background: rgb(22 59 45 / 0.03);
  padding-block: var(--cf-cat-pad, 128px);
}

.cf-cat__head { max-width: 44rem; }

/* Self-contained. Never borrows .cf-h2 from tokens — equal specificity there
   means load order decides the winner, and Shopify decides load order. */
.cf-cat .cf-cat__title {
  margin: 1rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-cat-heading, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
}

.cf-cat__sub {
  margin: 1rem 0 0;
  font-family: var(--cf-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cf-muted);
}

/* --- Row: snap-scroller on mobile, grid on desktop ----------------------- */
.cf-cat__row {
  margin: 3.5rem 0 0;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Bleed past the gutter so cards run off the edge — the visual cue that
     there's more to swipe. Padding puts the first card back on the grid. */
  margin-inline: calc(var(--cf-gutter) * -1);
  padding-inline: var(--cf-gutter);
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  /* Tell the browser this element only handles horizontal panning itself —
     a vertical swipe that starts over the row is left to the browser's
     native scroll instead of being captured here. Without this, a touch
     that begins directly over the row can get stuck instead of scrolling
     the page past it. */
  touch-action: pan-x;
}

.cf-cat__row::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .cf-cat__row {
    display: grid;
    grid-template-columns: repeat(var(--cf-cat-cols, 4), 1fr);
    gap: 2rem;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
}

.cf-cat__card {
  position: relative;
  display: block;
  flex: 0 0 78%;
  scroll-snap-align: start;
  border-radius: var(--cf-radius);
  overflow: hidden;
  text-decoration: none;
  transition-delay: calc(var(--i, 0) * 80ms);
}

@media (min-width: 640px) { .cf-cat__card { flex-basis: 46%; } }
@media (min-width: 768px) { .cf-cat__card { flex: initial; } }

.cf-cat__media {
  position: relative;
  aspect-ratio: var(--cf-cat-ratio, 1 / 1);
  background: var(--cf-green-10);
}

.cf-cat__img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--cf-ease);
}

.cf-cat__card:hover .cf-cat__img { transform: scale(1.1); }

.cf-cat__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(22 59 45 / 0.85), rgb(22 59 45 / 0.1) 55%, transparent);
}

.cf-cat__body {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.cf-cat__name {
  margin: 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-cat-name, 26px);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.cf-cat__count {
  margin: 0.125rem 0 0;
  font-family: var(--cf-font-body);
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.75);
}

.cf-cat__arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  transition: background-color 0.3s var(--cf-ease), transform 0.3s var(--cf-ease);
}

.cf-cat__arrow svg { width: 1.25rem; height: 1.25rem; }

.cf-cat__card:hover .cf-cat__arrow {
  background: var(--cf-pink);
  transform: translate(2px, -2px);
}

/* The card is the link, so the focus ring belongs on the card. Hiding the
   scrollbar removes the only visual affordance for mouse users — the ring is
   what keeps this navigable by keyboard. */
.cf-cat__card:focus-visible {
  outline: 3px solid var(--cf-pink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cf-cat__card { transition-delay: 0ms; }
  .cf-cat__card:hover .cf-cat__img { transform: none; }
  .cf-cat__card:hover .cf-cat__arrow { transform: none; }
  .cf-cat__row { scroll-snap-type: none; }
}
/* END_SECTION:cf-shop-by-category */

/* START_SECTION:cf-why-choose (INDEX:35) */
.cf-why {
  background: var(--cf-bg);
  padding-block: var(--cf-why-pad, 128px);
}

.cf-why__head { max-width: 48rem; }

/* Self-contained, not borrowing .cf-h2. Two single-class selectors setting the
   same property is a coin flip decided by stylesheet load order — the exact
   bug that made the hero headline render green instead of white. */
.cf-why .cf-why__title {
  margin: 1rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-why-heading, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--cf-track-tight);
  color: var(--cf-green);
}

.cf-why__grid {
  margin: 5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 2rem;
}

@media (min-width: 640px) { .cf-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cf-why__grid { grid-template-columns: repeat(4, 1fr); } }

.cf-why__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Stagger, replacing framer-motion's StaggerGroup. Index from Liquid,
     delay from CSS. */
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* One circle, not two. The original nested a tinted 64px disc inside a white
   112px one and split the hover between them — the outer lifted, the inner
   went green -> pink. With a single disc that hover has to live somewhere or
   the cards go dead on contact, so the colour shift moves onto the icon and
   the disc picks up a trace of pink behind it. */
.cf-why__disc {
  display: grid;
  place-items: center;
  height: var(--cf-why-disc, 144px);
  width: var(--cf-why-disc, 144px);
  border-radius: 999px;
  background: var(--cf-card);
  border: 1px solid rgb(22 59 45 / 0.06);
  box-shadow: 0 10px 34px rgb(22 59 45 / 0.07);
  color: var(--cf-green);
  transition:
    transform 0.5s var(--cf-ease),
    box-shadow 0.5s var(--cf-ease),
    background-color 0.5s var(--cf-ease),
    color 0.5s var(--cf-ease),
    border-color 0.5s var(--cf-ease);
}

.cf-why__card:hover .cf-why__disc {
  transform: translateY(-8px);
  box-shadow: 0 24px 54px rgb(22 59 45 / 0.14);
  background: rgb(249 95 146 / 0.05);
  border-color: rgb(249 95 146 / 0.2);
  color: var(--cf-pink);
}

/* Icon scales with the disc, so one slider can't produce a lost speck or a
   glyph straining at the edges. */
.cf-why__disc svg {
  width: calc(var(--cf-why-disc, 144px) * 0.3);
  height: calc(var(--cf-why-disc, 144px) * 0.3);
}

.cf-why__card-title {
  margin: 1.75rem 0 0;
  font-family: var(--cf-font-heading);
  font-size: var(--cf-why-title, 24px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--cf-green);
}

.cf-why__card-text {
  margin: 0.625rem 0 0;
  max-width: 19rem;
  font-family: var(--cf-font-body);
  font-size: var(--cf-why-text, 16px);
  line-height: 1.7;
  color: var(--cf-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cf-why__card { transition-delay: 0ms; }
  .cf-why__card:hover .cf-why__disc { transform: none; }
}
/* END_SECTION:cf-why-choose */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:cf-product-card (INDEX:176) */
/* Card styles live with the card. Shopify emits a snippet's stylesheet block
   once per page no matter how many times the snippet renders, so a 12-card
   grid ships this CSS a single time. Both cf-product-grid and cf-collection
   get identically-styled cards with no duplication. */
/* Replace the existing CSS inside {% stylesheet %} in cf-product-card.liquid
   with this stylesheet. It works with your existing markup and Liquid. */

.cf-pg__card {
  position: relative;
  isolation: isolate;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}

.cf-pg__media {
  position: relative;
  aspect-ratio: var(--cf-pg-ratio, 4 / 5);
  overflow: hidden;
  border: 1px solid rgba(92, 16, 36, .07);
  border-radius: 25px;
  background: #eff3ef;
  box-shadow: 0 10px 28px rgba(92, 16, 36, .055);
  transition: border-color .38s ease, box-shadow .38s ease;
}

.cf-pg__media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 39, 29, 0) 48%, rgba(8, 39, 29, .18) 100%);
  content: '';
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.cf-pg__media-link { display: block; height: 100%; }

.cf-pg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

.cf-pg__card:hover { transform: translateY(-7px); }
.cf-pg__card:hover .cf-pg__media { border-color: rgba(224, 147, 43, .38); box-shadow: 0 22px 40px rgba(92, 16, 36, .13); }
.cf-pg__card:hover .cf-pg__media::after { opacity: 1; }
.cf-pg__card:hover .cf-pg__img { transform: scale(1.055); filter: saturate(1.05); }

.cf-pg__tag {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 7px 12px;
  color: #5c1024;
  font-family: Outfit, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.cf-pg__tag--out { color: #6d7c74; }

.cf-pg__wish {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 15px;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #5c1024;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease, background-color .2s ease, color .2s ease;
}

.cf-pg__wish svg { width: 17px; height: 17px; }
.cf-pg__card:hover .cf-pg__wish, .cf-pg__wish:focus-visible, .cf-pg__wish.is-active { opacity: 1; transform: none; }
.cf-pg__wish:hover, .cf-pg__wish.is-active { background: #e0932b; color: #fff; }

.cf-pg__add {
  position: absolute;
  z-index: 3;
  right: 15px;
  bottom: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #5c1024;
  color: #fff;
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s ease, transform .32s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}

.cf-pg__add svg { width: 16px; height: 16px; }
.cf-pg__card:hover .cf-pg__add, .cf-pg__add:focus-visible { opacity: 1; transform: none; }
.cf-pg__add:hover { border-color: #e0932b; background: #e0932b; color: #fff; }
.cf-pg__add[disabled] { background: #778092; cursor: default; opacity: 1; transform: none; }

.cf-pg__info { padding: 18px 4px 3px; }

.cf-pg__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
}

.cf-pg__name {
  margin: 0;
  color: #5c1024;
  font-family: Outfit, sans-serif;
  font-size: max(18px, var(--cf-pg-title, 20px));
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.18;
}

.cf-pg__name-link { color: inherit; text-decoration: none; }
.cf-pg__name-link::after { position: absolute; z-index: 1; inset: 0; content: ''; }
.cf-pg__name-link:hover { color: #e0932b; }

.cf-pg__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding-top: 3px;
  color: #778092;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.cf-pg__rating svg { width: 14px; height: 14px; color: #e0932b; }

.cf-pg__meta {
  margin: 7px 0 0;
  color: #778092;
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.35;
}

.cf-pg__prices {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 11px;
}

.cf-pg__price {
  color: #5c1024;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.cf-pg__price.is-sale { color: #e0932b; }
.cf-pg__was { color: #8d9993; font-family: Outfit, sans-serif; font-size: 13px; font-weight: 500; }
.cf-pg__empty { margin: 2rem 0 0; color: #778092; font-family: Outfit, sans-serif; }

.cf-pg__wish:focus-visible, .cf-pg__add:focus-visible, .cf-pg__name-link:focus-visible {
  outline: 2px solid #e0932b;
  outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  .cf-pg__wish, .cf-pg__add { opacity: 1; transform: none; }
  .cf-pg__media::after { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-pg__card, .cf-pg__media, .cf-pg__img, .cf-pg__add, .cf-pg__wish { transition: none; }
  .cf-pg__card:hover { transform: none; }
  .cf-pg__card:hover .cf-pg__img { transform: none; }
}
/* END_SNIPPET:cf-product-card */