/** Shopify CDN: Minification failed

Line 317:0 All "@import" rules must come first
Line 500:0 All "@import" rules must come first
Line 892:0 All "@import" rules must come first
Line 1172:0 All "@import" rules must come first
Line 1390:0 All "@import" rules must come first
Line 1533:0 All "@import" rules must come first
Line 1811:0 All "@import" rules must come first
Line 2079:0 All "@import" rules must come first
Line 2384:0 All "@import" rules must come first
Line 2579:0 All "@import" rules must come first
... and 12 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:custom-about-us (INDEX:14) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

section.grooni-about,
.grooni-about {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-about-bg, #FFFFFF) !important;
  padding: var(--grooni-about-pt, 80px) 80px var(--grooni-about-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-about *,
.grooni-about span,
.grooni-about p,
.grooni-about a {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-about__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
  width: 100%;
}

/* ───────── Top split ───────── */
.grooni-about__split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}
.grooni-about--mosaic-left  .grooni-about__content { grid-column: 2; }
.grooni-about--mosaic-left  .grooni-about__mosaic  { grid-column: 1; }
.grooni-about--mosaic-right .grooni-about__content { grid-column: 1; }
.grooni-about--mosaic-right .grooni-about__mosaic  { grid-column: 2; }

/* Content column */
.grooni-about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.grooni-about .grooni-about__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-about .grooni-about__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-about__quote-mark {
  display: block;
  color: #00426A;
  margin-bottom: 8px;
  opacity: 0.85;
}
.grooni-about .grooni-about__body,
.grooni-about .grooni-about__body p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #191716 !important;
  margin: 0 0 12px !important;
}
.grooni-about .grooni-about__body p:last-child { margin-bottom: 0 !important; }
.grooni-about .grooni-about__body a {
  color: #00426A !important;
  text-decoration: underline;
}
.grooni-about .grooni-about__body strong {
  color: #00426A !important;
  font-weight: 700 !important;
}
.grooni-about a.grooni-about__cta,
.grooni-about .grooni-about__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease, gap 0.2s ease;
  margin-top: 8px !important;
}
.grooni-about a.grooni-about__cta:hover { background: #003355 !important; gap: 12px !important; }

/* ───────── Team mosaic ───────── */
.grooni-about__mosaic {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.grooni-about .grooni-about__mosaic-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-about__mosaic-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100%;
}
.grooni-about__mosaic-grid--1 { grid-template-columns: minmax(0, 200px) !important; }
.grooni-about__mosaic-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grooni-about__mosaic-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* Person card */
.grooni-about__person {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
}
.grooni-about__person-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #F8F7F5;
}
.grooni-about__person-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.grooni-about__person:hover .grooni-about__person-photo-img {
  transform: scale(1.06);
}
.grooni-about__person-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #cdbfa9, #a89a82);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.grooni-about__person-photo-placeholder span {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
}
.grooni-about__person-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.grooni-about .grooni-about__person-name {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #00426A !important;
  text-align: center !important;
}
.grooni-about .grooni-about__person-role {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #434343 !important;
  text-align: center !important;
}

/* ───────── Values / Principles ───────── */
.grooni-about__values-wrap {
  width: 100%;
}
.grooni-about .grooni-about__sub-heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 0 32px !important;
}
.grooni-about__values {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
.grooni-about__value {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 28px !important;
  background: #F8F7F5 !important;
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.grooni-about__value:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.grooni-about__value-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 12px;
  color: #00426A;
}
.grooni-about__value-icon svg { width: 32px; height: 32px; }
.grooni-about__value-icon-img { width: 32px; height: 32px; object-fit: contain; }
.grooni-about__value-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grooni-about .grooni-about__value-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #191716 !important;
}
.grooni-about .grooni-about__value-desc {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #434343 !important;
}

/* ───────── Tablet ───────── */
@media (max-width: 990px) {
  section.grooni-about,
  .grooni-about { padding: var(--grooni-about-pt, 56px) 32px var(--grooni-about-pb, 56px) !important; }
  .grooni-about__inner { gap: 56px !important; }
  .grooni-about__split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grooni-about--mosaic-left  .grooni-about__content,
  .grooni-about--mosaic-right .grooni-about__content { grid-column: 1; grid-row: 1; }
  .grooni-about--mosaic-left  .grooni-about__mosaic,
  .grooni-about--mosaic-right .grooni-about__mosaic { grid-column: 1; grid-row: 2; }
  .grooni-about .grooni-about__heading { font-size: 32px !important; }
  .grooni-about .grooni-about__sub-heading { font-size: 24px !important; }
  .grooni-about__values { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ───────── Mobile ───────── */
@media (max-width: 640px) {
  section.grooni-about,
  .grooni-about { padding: var(--grooni-about-pt-m, 56px) 16px var(--grooni-about-pb-m, 56px) !important; }
  .grooni-about__inner { gap: 40px !important; }
  .grooni-about__split { gap: 32px !important; }
  .grooni-about .grooni-about__heading { font-size: 26px !important; }
  .grooni-about .grooni-about__sub-heading { font-size: 22px !important; margin: 0 0 24px !important; }
  .grooni-about__mosaic-grid { gap: 12px !important; }
  .grooni-about .grooni-about__person-name { font-size: 13px !important; }
  .grooni-about .grooni-about__person-role { font-size: 11px !important; }
  .grooni-about__value { padding: 20px !important; }
}
/* END_SECTION:custom-about-us */

/* START_SECTION:custom-blog-articles (INDEX:15) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

section.grooni-blog,
.grooni-blog {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-blog-bg, #FFFFFF) !important;
  padding: var(--grooni-blog-pt, 80px) 80px var(--grooni-blog-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-blog *,
.grooni-blog span,
.grooni-blog p,
.grooni-blog a {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-blog .grooni-blog__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
  width: 100%;
}

/* Header */
.grooni-blog__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.grooni-blog .grooni-blog__heading {
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}
.grooni-blog .grooni-blog__subheading {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 720px;
}

/* Grid */
.grooni-blog__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--grooni-blog-cols, 3), minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Card */
.grooni-blog .grooni-blog__card {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease;
}
.grooni-blog .grooni-blog__card:hover { transform: translateY(-2px); }

.grooni-blog__media {
  width: 100%;
  aspect-ratio: 435 / 344;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f1f1;
}
.grooni-blog__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-blog__img--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
}

.grooni-blog__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 12px;
}
.grooni-blog__head-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grooni-blog .grooni-blog__category {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
}
.grooni-blog .grooni-blog__title {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-blog .grooni-blog__excerpt {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #434343 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.grooni-blog__empty {
  font-size: 14px !important;
  color: #909090 !important;
  text-align: center !important;
}

/* See All button */
.grooni-blog a.grooni-blog__cta,
.grooni-blog .grooni-blog__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 32px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease;
  min-width: 125px;
}
.grooni-blog a.grooni-blog__cta:hover { background: #003355 !important; }

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-blog,
  .grooni-blog { padding: var(--grooni-blog-pt, 56px) 32px var(--grooni-blog-pb, 56px) !important; }
  .grooni-blog .grooni-blog__inner { gap: 40px !important; }
  .grooni-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  .grooni-blog .grooni-blog__heading { font-size: 24px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-blog,
  .grooni-blog { padding: var(--grooni-blog-pt-m, 56px) 16px var(--grooni-blog-pb-m, 56px) !important; }
  .grooni-blog .grooni-blog__inner { gap: 28px !important; }
  .grooni-blog__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .grooni-blog .grooni-blog__heading { font-size: 22px !important; }
  .grooni-blog .grooni-blog__title { font-size: 17px !important; }
}
/* END_SECTION:custom-blog-articles */

/* START_SECTION:custom-collection-products (INDEX:16) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&display=swap');

section.grooni-cprod,
.grooni-cprod {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-cprod-bg, #FFFFFF) !important;
  padding: var(--grooni-cprod-pt, 60px) 80px var(--grooni-cprod-pb, 60px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-cprod *,
.grooni-cprod span,
.grooni-cprod p,
.grooni-cprod a,
.grooni-cprod button,
.grooni-cprod select {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-cprod .grooni-cprod__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
  width: 100%;
}

/* Header */
.grooni-cprod__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 720px;
}
.grooni-cprod .grooni-cprod__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
  text-transform: none !important;
}
.grooni-cprod .grooni-cprod__subheading {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #434343 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Grid */
.grooni-cprod__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--grooni-cprod-cols, 3), minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Card */
.grooni-cprod__card {
  display: flex !important;
  flex-direction: column !important;
  background: #F8F7F5 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 1px 2px rgba(25, 23, 22, 0.04) !important;
  position: relative;
  height: 100%;
}

.grooni-cprod__media-link {
  display: block;
  width: 100%;
  text-decoration: none !important;
  color: inherit !important;
  position: relative;
}
.grooni-cprod__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--grooni-cprod-aspect, 1 / 1);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
.grooni-cprod__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-cprod__img--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
  width: 100%;
  height: 100%;
}

/* SAVE X% badge */
.grooni-cprod__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px !important;
  background: #F0EDEA !important;
  color: #00426A !important;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Body */
.grooni-cprod__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 4px 4px;
  flex: 1 1 auto;
}
.grooni-cprod__top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grooni-cprod .grooni-cprod__category {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-cprod .grooni-cprod__title {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #191716 !important;
  margin: 0 !important;
  text-decoration: none !important;
}
.grooni-cprod__title-link {
  text-decoration: none !important;
  color: inherit !important;
}

/* Price + rating row */
.grooni-cprod__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.grooni-cprod__price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.grooni-cprod .grooni-cprod__price-current {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #191716 !important;
}
.grooni-cprod .grooni-cprod__price-compare {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #909090 !important;
  text-decoration: line-through !important;
}

.grooni-cprod__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.grooni-cprod .grooni-cprod__stars,
.grooni-cprod__stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  color: #00426A !important;   /* Grooni blue — inherited by SVG via currentColor */
  font-size: 14px !important;
  line-height: 1 !important;
}
.grooni-cprod .grooni-cprod__stars svg,
.grooni-cprod__stars svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}
/* Filled stars: force Grooni blue fill so theme CSS can't recolor them */
.grooni-cprod .grooni-cprod__stars svg[fill="currentColor"],
.grooni-cprod__stars svg[fill="currentColor"] {
  fill: #00426A !important;
  color: #00426A !important;
}
.grooni-cprod .grooni-cprod__stars svg[fill="currentColor"] path,
.grooni-cprod__stars svg[fill="currentColor"] path {
  fill: #00426A !important;
}
/* Empty stars: faded Grooni blue */
.grooni-cprod .grooni-cprod__stars svg[fill="#00426A"],
.grooni-cprod__stars svg[fill="#00426A"] {
  fill: #00426A !important;
  fill-opacity: 0.2 !important;
}
.grooni-cprod .grooni-cprod__rating-count {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #434343 !important;
  line-height: 1 !important;
}

/* Variant + ATC */
.grooni-cprod__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.grooni-cprod__variant-wrap {
  position: relative;
  width: 100%;
}
.grooni-cprod__variant {
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: #FFFFFF !important;
  border: 1px solid #D9D4D2 !important;
  border-radius: 6px !important;
  padding: 12px 40px 12px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #191716 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  outline: none;
}
.grooni-cprod__variant:focus {
  border-color: #00426A !important;
}
.grooni-cprod__variant-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 14px;
  height: 14px;
  color: #191716;
}
.grooni-cprod__variant-chevron svg { width: 100%; height: 100%; display: block; }

.grooni-cprod button.grooni-cprod__atc,
.grooni-cprod .grooni-cprod__atc {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 16px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.2s ease;
}
.grooni-cprod button.grooni-cprod__atc:hover,
.grooni-cprod .grooni-cprod__atc:hover { background: #003355 !important; }
.grooni-cprod button.grooni-cprod__atc:disabled,
.grooni-cprod .grooni-cprod__atc:disabled {
  background: #909090 !important;
  cursor: not-allowed;
}

.grooni-cprod__empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 16px !important;
  color: #909090 !important;
  padding: 40px 20px !important;
}

/* Pagination */
.grooni-cprod__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.grooni-cprod a.grooni-cprod__page-link,
.grooni-cprod .grooni-cprod__page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px;
  height: 40px;
  padding: 0 12px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #191716 !important;
  text-decoration: none !important;
  border: 1px solid #D9D4D2 !important;
  background: #FFFFFF !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.grooni-cprod a.grooni-cprod__page-link:hover {
  background: #F0EDEA !important;
}
.grooni-cprod .grooni-cprod__page-link--current {
  background: #00426A !important;
  color: #F0EDEA !important;
  border-color: #00426A !important;
}
.grooni-cprod .grooni-cprod__page-link--gap {
  border-color: transparent !important;
  background: transparent !important;
  color: #909090 !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-cprod,
  .grooni-cprod { padding: var(--grooni-cprod-pt, 56px) 32px var(--grooni-cprod-pb, 56px) !important; }
  .grooni-cprod .grooni-cprod__inner { gap: 40px !important; }
  .grooni-cprod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  .grooni-cprod .grooni-cprod__heading { font-size: 36px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-cprod,
  .grooni-cprod { padding: var(--grooni-cprod-pt-m, 40px) 16px var(--grooni-cprod-pb-m, 40px) !important; }
  .grooni-cprod .grooni-cprod__inner { gap: 28px !important; }
  .grooni-cprod__grid {
    grid-template-columns: repeat(var(--grooni-cprod-cols-m, 2), minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .grooni-cprod .grooni-cprod__heading { font-size: 28px !important; }
  .grooni-cprod .grooni-cprod__subheading { font-size: 15px !important; }

  /* Tighter typography for mobile 2-col layout */
  .grooni-cprod--mobile-cols-2 .grooni-cprod__card { padding: 8px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__body { padding: 12px 2px 2px !important; gap: 8px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__title { font-size: 15px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__category { font-size: 10px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__price-current { font-size: 15px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__price-compare { font-size: 12px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__rating-count { font-size: 11px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__stars { font-size: 12px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__stars svg { width: 12px; height: 12px; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__variant { padding: 10px 32px 10px 10px !important; font-size: 12px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__atc { padding: 12px 10px !important; font-size: 12px !important; }
  .grooni-cprod--mobile-cols-2 .grooni-cprod__badge { font-size: 10px !important; padding: 4px 8px !important; top: 8px; left: 8px; }
}
/* END_SECTION:custom-collection-products */

/* START_SECTION:custom-comparison-table (INDEX:17) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

.grooni-compare {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: #FFFFFF;
  padding: var(--grooni-compare-pt, 80px) 80px var(--grooni-compare-pb, 80px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-compare *,
.grooni-compare p,
.grooni-compare h1,
.grooni-compare h2,
.grooni-compare h3,
.grooni-compare span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-compare__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}

/* ---- Header ---- */
.grooni-compare__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
}
.grooni-compare .grooni-compare__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-compare .grooni-compare__heading {
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}
.grooni-compare .grooni-compare__sub {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 720px;
}

/* ---- Swipe hint (mobile only) ---- */
.grooni-compare__hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto -8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #F0EDEA;
  color: #778AA1;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: fit-content;
}
.grooni-compare__hint svg {
  flex: 0 0 16px;
  animation: grooni-compare-nudge 1.6s ease-in-out infinite;
}
@keyframes grooni-compare-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* ---- Table ---- */
.grooni-compare__table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.grooni-compare__table-wrap::after { display: none !important; }
.grooni-compare__table {
  display: flex;
  flex-direction: column;
  min-width: 880px;
  border-radius: 8px;
  overflow: hidden;
}
.grooni-compare__row {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  min-height: 75px;
}
.grooni-compare__row:nth-child(even) {
  background: rgba(217, 212, 210, var(--grooni-compare-gray-opacity, 0.5));
}
.grooni-compare__row--header {
  min-height: 77px;
  background: #FFFFFF !important;
}
.grooni-compare__feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  width: 320px;
  flex: 0 0 320px;
}
.grooni-compare .grooni-compare__features-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
}
.grooni-compare .grooni-compare__feature-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #191716 !important;
}
.grooni-compare .grooni-compare__feature-desc {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
}

/* ---- Cells container ---- */
.grooni-compare__cells {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.grooni-compare__cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  text-align: center;
}

/* Brand name in header */
.grooni-compare .grooni-compare__brand-name {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  text-align: center !important;
}
.grooni-compare__brand-logo {
  height: 24px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

/* ---- Icons ---- */
.grooni-compare__icon { display: block; }
.grooni-compare__icon--check  { color: #909090; }
.grooni-compare__icon--x      { color: #823636; }
.grooni-compare__icon--minus  { color: #909090; }
.grooni-compare__cell--brand .grooni-compare__icon--check { color: #00426A; }

/* Cell text */
.grooni-compare .grooni-compare__cell-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
}
.grooni-compare__cell--brand .grooni-compare__cell-text {
  font-weight: 700 !important;
  color: #00426A !important;
}

/* ---- Price row ---- */
/* All prices share the same size; Grooni differentiated by weight + color */
.grooni-compare__row--price .grooni-compare__cell-text {
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #191716 !important;
}
.grooni-compare__row--price .grooni-compare__cell--brand .grooni-compare__cell-text {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #00426A !important;
}

/* "Best Value" subtle pill — absolute-positioned BELOW the Grooni price
   so it doesn't push the price out of vertical alignment with the
   competitor prices. The price stays centered in the cell, the pill
   sits at the bottom of the cell. */
.grooni-compare__row--price .grooni-compare__cell--brand {
  position: relative;
}
.grooni-compare__best-value {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px !important;
  background: #F0EDEA !important;
  color: #00426A !important;
  border: 1px solid rgba(0, 66, 106, 0.15) !important;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  pointer-events: none;
}
/* Reserve bottom padding inside the price row so the pill never
   overlaps the price number. Applied to ALL price-row cells so prices
   stay vertically aligned across columns. */
.grooni-compare__row--price .grooni-compare__cell {
  padding-bottom: 28px;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-compare { padding: var(--grooni-compare-pt, 56px) 24px var(--grooni-compare-pb, 56px); }
  .grooni-compare__inner { gap: 40px; }
  .grooni-compare .grooni-compare__heading { font-size: 24px !important; }
  .grooni-compare__feature { width: 240px; flex: 0 0 240px; padding: 12px; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-compare { padding: var(--grooni-compare-pt-m, 56px) 16px var(--grooni-compare-pb-m, 56px); }
  .grooni-compare__inner { gap: 28px; }
  .grooni-compare .grooni-compare__heading { font-size: 22px !important; }
  .grooni-compare__feature { width: 200px; flex: 0 0 200px; padding: 12px; }
  .grooni-compare__table { min-width: 720px; }
  .grooni-compare__cell { padding: 8px; }
  .grooni-compare .grooni-compare__brand-name { font-size: 14px !important; }
  .grooni-compare .grooni-compare__feature-name { font-size: 14px !important; }
  .grooni-compare .grooni-compare__feature-desc { font-size: 12px !important; }
  .grooni-compare__row--price .grooni-compare__cell-text { font-size: 18px !important; }
  .grooni-compare__row--price .grooni-compare__cell--brand .grooni-compare__cell-text { font-size: 18px !important; }
  .grooni-compare__best-value { font-size: 9px !important; padding: 2px 8px !important; }

  /* Show swipe hint on mobile */
  .grooni-compare__hint { display: inline-flex; }
}
/* END_SECTION:custom-comparison-table */

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

section.grooni-experts,
.grooni-experts {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-experts-bg, #00426A) !important;
  padding: var(--grooni-experts-pt, 80px) 80px var(--grooni-experts-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-experts *,
.grooni-experts span,
.grooni-experts p,
.grooni-experts blockquote {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-experts__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
  width: 100%;
}

/* ---- Header ---- */
.grooni-experts__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.grooni-experts .grooni-experts__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--grooni-experts-eyebrow, #778AA1) !important;
  margin: 0 !important;
}
.grooni-experts .grooni-experts__heading {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--grooni-experts-heading, #F0EDEA) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- Grid / Carousel wrap ---- */
.grooni-experts__carousel {
  position: relative;
  width: 100%;
}
.grooni-experts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}
.grooni-experts__grid--1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.grooni-experts__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 740px; margin: 0 auto; }
.grooni-experts__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grooni-experts__nav { display: none; }

/* ---- Card ---- */
.grooni-experts__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: #FFFFFF;
  border-radius: 12px;
  text-align: center;
}
.grooni-experts__avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 104px;
  background: #D9D9D9;
}
.grooni-experts__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-experts__avatar-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
}
.grooni-experts .grooni-experts__quote {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #434343 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  flex: 1 1 auto;
}
.grooni-experts__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: auto;
}
.grooni-experts .grooni-experts__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #383838 !important;
  text-align: center !important;
}
.grooni-experts .grooni-experts__title {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #909090 !important;
  text-align: center !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-experts,
  .grooni-experts { padding: var(--grooni-experts-pt, 56px) 32px var(--grooni-experts-pb, 56px) !important; }
  .grooni-experts__inner { gap: 36px; }
  .grooni-experts__grid,
  .grooni-experts__grid--3,
  .grooni-experts__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
  .grooni-experts .grooni-experts__heading { font-size: 24px !important; }
}

/* ---- Mobile (centered single-card carousel with arrows) ---- */
@media (max-width: 640px) {
  section.grooni-experts,
  .grooni-experts { padding: var(--grooni-experts-pt-m, 56px) 0 var(--grooni-experts-pb-m, 56px) !important; }
  .grooni-experts__inner { gap: 28px; }
  .grooni-experts__head { padding: 0 16px; }
  .grooni-experts .grooni-experts__heading { font-size: 22px !important; }

  .grooni-experts__grid,
  .grooni-experts__grid--1,
  .grooni-experts__grid--2,
  .grooni-experts__grid--3,
  .grooni-experts__grid--4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .grooni-experts__grid::-webkit-scrollbar { display: none !important; }

  .grooni-experts__card {
    flex: 0 0 100vw;
    box-sizing: border-box;
    padding: 28px 32px;
    scroll-snap-align: center;
    margin: 0 16px;
    flex: 0 0 calc(100vw - 32px);
  }

  /* Minimal nav arrows (white) */
  .grooni-experts__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .grooni-experts__nav svg { width: 22px; height: 22px; }
  .grooni-experts__nav:hover { transform: translateY(-50%) scale(1.1); }
  .grooni-experts__nav--prev { left: 8px; }
  .grooni-experts__nav--next { right: 8px; }
  .grooni-experts__nav:disabled { opacity: 0; pointer-events: none; }
}
/* END_SECTION:custom-experts */

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

.grooni-faq {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: #FFFFFF;
  padding: var(--grooni-faq-pt, 80px) 80px var(--grooni-faq-pb, 80px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-faq *,
.grooni-faq p,
.grooni-faq h1,
.grooni-faq h2,
.grooni-faq h3,
.grooni-faq span,
.grooni-faq summary {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}

/* ---- Header ---- */
.grooni-faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
}
.grooni-faq .grooni-faq__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-faq .grooni-faq__heading {
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- FAQ list ---- */
.grooni-faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 894px;
}
.grooni-faq__item {
  border-top: 1px solid #D1CAC7;
}
.grooni-faq__item:last-child {
  border-bottom: 1px solid #D1CAC7;
}
.grooni-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
}
.grooni-faq__summary::-webkit-details-marker { display: none; }
.grooni-faq__summary::marker { content: ''; }
.grooni-faq .grooni-faq__question {
  flex: 1;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
}
.grooni-faq__icon {
  flex: 0 0 20px;
  color: #191716;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.grooni-faq__icon-plus  { display: block; }
.grooni-faq__icon-minus { display: none; }
.grooni-faq__item[open] .grooni-faq__icon-plus  { display: none; }
.grooni-faq__item[open] .grooni-faq__icon-minus { display: block; }

/* ---- Answer ---- */
.grooni-faq__answer {
  padding: 0 24px 24px;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #191716 !important;
}
.grooni-faq__answer p {
  margin: 0 0 12px;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #191716 !important;
}
.grooni-faq__answer p:last-child { margin-bottom: 0; }
.grooni-faq__answer ul,
.grooni-faq__answer ol { margin: 0 0 12px; padding-left: 20px; }
.grooni-faq__answer a {
  color: #00426A !important;
  text-decoration: underline;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-faq { padding: var(--grooni-faq-pt, 56px) 32px var(--grooni-faq-pb, 56px); }
  .grooni-faq__inner { gap: 36px; }
  .grooni-faq .grooni-faq__heading { font-size: 24px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-faq { padding: var(--grooni-faq-pt-m, 48px) 16px var(--grooni-faq-pb-m, 48px); }
  .grooni-faq__inner { gap: 28px; }
  .grooni-faq .grooni-faq__heading { font-size: 22px !important; }
  .grooni-faq__summary { padding: 20px 0; }
  .grooni-faq__answer { padding: 0 0 20px; }
  .grooni-faq .grooni-faq__question { font-size: 16px !important; }
}
/* END_SECTION:custom-faq */

/* START_SECTION:custom-featured-products (INDEX:20) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

section.grooni-featured,
.grooni-featured {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-featured-bg, #FFFFFF) !important;
  padding: var(--grooni-featured-pt, 80px) 80px var(--grooni-featured-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-featured *,
.grooni-featured span,
.grooni-featured p,
.grooni-featured a {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-featured .grooni-featured__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 60px !important;
  max-width: var(--grooni-max-w, 1512px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ---- Header ---- */
.grooni-featured__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 720px !important;
}
.grooni-featured .grooni-featured__heading {
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}
.grooni-featured .grooni-featured__subheading {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- Grid ---- */
.grooni-featured__grid {
  display: grid !important;
  grid-template-columns: repeat(var(--grooni-featured-cols, 3), minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* ---- Card ---- */
.grooni-featured .grooni-featured__card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--grooni-featured-card-bg, #F8F7F5) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.grooni-featured .grooni-featured__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.grooni-featured .grooni-featured__link {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

.grooni-featured__media {
  width: 100%;
  aspect-ratio: var(--grooni-featured-aspect, 435 / 344);
  overflow: hidden;
  background: #f1f1f1;
}
.grooni-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-featured__img--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
}

.grooni-featured__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
.grooni-featured .grooni-featured__title {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-featured__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grooni-featured__price {
  display: flex;
  align-items: center;
  gap: 14px;
}
.grooni-featured .grooni-featured__price-current {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #434343 !important;
}
.grooni-featured .grooni-featured__price-compare {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #909090 !important;
  text-decoration: line-through !important;
}
.grooni-featured__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.grooni-featured__stars {
  display: inline-flex;
  align-items: center;
  color: #00426A;
  gap: 0;
}
.grooni-featured__star { display: block; }
.grooni-featured .grooni-featured__rating-value {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  color: #434343 !important;
  margin-left: 4px;
}
.grooni-featured .grooni-featured__rating-count {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #909090 !important;
}

.grooni-featured__empty {
  font-size: 14px !important;
  color: #909090 !important;
  text-align: center !important;
}

/* ---- Add to Cart button ---- */
.grooni-featured .grooni-featured__atc-form { margin: 0 20px 20px !important; }
.grooni-featured a.grooni-featured__atc,
.grooni-featured button.grooni-featured__atc,
.grooni-featured .grooni-featured__atc {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 40px) !important;
  margin: 0 20px 20px !important;
  padding: 12px 20px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s ease;
  box-sizing: border-box !important;
}
.grooni-featured__atc-form .grooni-featured__atc { width: 100% !important; margin: 0 !important; }
.grooni-featured a.grooni-featured__atc:hover,
.grooni-featured button.grooni-featured__atc:hover { background: #003355 !important; }
.grooni-featured .grooni-featured__atc--disabled {
  background: #909090 !important;
  cursor: not-allowed !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-featured,
  .grooni-featured { padding: var(--grooni-featured-pt, 56px) 32px var(--grooni-featured-pb, 56px) !important; }
  .grooni-featured .grooni-featured__inner { gap: 40px !important; }
  .grooni-featured__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  .grooni-featured .grooni-featured__heading { font-size: 24px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-featured,
  .grooni-featured { padding: var(--grooni-featured-pt-m, 56px) 16px var(--grooni-featured-pb-m, 56px) !important; }
  .grooni-featured .grooni-featured__inner { gap: 28px !important; }
  .grooni-featured__grid {
    grid-template-columns: repeat(var(--grooni-featured-cols-m, 1), minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .grooni-featured .grooni-featured__heading { font-size: 22px !important; }
  .grooni-featured .grooni-featured__title { font-size: 17px !important; }

  /* ----- Tighter layout when 2 columns on mobile (cards are narrow) ----- */
  .grooni-featured--mobile-cols-2 .grooni-featured__body {
    padding: 14px !important;
    gap: 10px !important;
  }
  .grooni-featured--mobile-cols-2 .grooni-featured__title {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .grooni-featured--mobile-cols-2 .grooni-featured__meta { gap: 8px !important; }
  .grooni-featured--mobile-cols-2 .grooni-featured__price {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .grooni-featured--mobile-cols-2 .grooni-featured__price-current,
  .grooni-featured--mobile-cols-2 .grooni-featured__price-compare {
    font-size: 14px !important;
  }
  .grooni-featured--mobile-cols-2 .grooni-featured__rating {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }
  .grooni-featured--mobile-cols-2 .grooni-featured__star {
    width: 12px !important;
    height: 12px !important;
  }
  .grooni-featured--mobile-cols-2 .grooni-featured__rating-value,
  .grooni-featured--mobile-cols-2 .grooni-featured__rating-count {
    font-size: 13px !important;
  }
  .grooni-featured--mobile-cols-2 .grooni-featured__atc,
  .grooni-featured--mobile-cols-2 a.grooni-featured__atc,
  .grooni-featured--mobile-cols-2 button.grooni-featured__atc {
    width: calc(100% - 28px) !important;
    margin: 0 14px 14px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
  }
}
/* END_SECTION:custom-featured-products */

/* START_SECTION:custom-frequencies-grid (INDEX:21) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

.grooni-freq {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: #FFFFFF;
  padding: var(--grooni-freq-pt, 60px) 80px var(--grooni-freq-pb, 60px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-freq *,
.grooni-freq p,
.grooni-freq h1,
.grooni-freq h2,
.grooni-freq h3,
.grooni-freq span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-freq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}

/* ---- Header ---- */
.grooni-freq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  max-width: 720px;
}
.grooni-freq .grooni-freq__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-freq .grooni-freq__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}
.grooni-freq .grooni-freq__sub {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 8px 0 0 !important;
  max-width: 692px;
}

/* ---- Grid ---- */
.grooni-freq__carousel {
  position: relative;
  width: 100%;
}
.grooni-freq__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
/* Desktop: hide the entire mobile nav row (arrows + dots).
   All cards fit on screen, no scrolling needed. */
.grooni-freq__nav-row { display: none; }
.grooni-freq__nav { display: none; }
.grooni-freq__dots { display: none; }

/* ---- Card ---- */
.grooni-freq__card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.grooni-freq__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e6e3df;
}
.grooni-freq__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-freq__img--placeholder {
  background: linear-gradient(135deg, #c9c2bb, #a8a09a);
}
.grooni-freq .grooni-freq__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: #00426A;
  color: #F0EDEA !important;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  z-index: 2;
}

/* ---- Card body ---- */
.grooni-freq__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: 12px;
}
.grooni-freq .grooni-freq__title {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-freq .grooni-freq__caps {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-freq .grooni-freq__desc {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #191716 !important;
  margin: 0 !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-freq { padding: var(--grooni-freq-pt, 48px) 32px var(--grooni-freq-pb, 48px); }
  .grooni-freq__inner { gap: 40px; }
  .grooni-freq .grooni-freq__heading { font-size: 32px !important; }
  .grooni-freq__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ---- Mobile (centered carousel with arrows) ---- */
@media (max-width: 640px) {
  .grooni-freq { padding: var(--grooni-freq-pt-m, 48px) 0 var(--grooni-freq-pb-m, 48px); }
  .grooni-freq__inner { gap: 28px; }
  .grooni-freq__head { padding: 0 16px; }
  .grooni-freq .grooni-freq__heading { font-size: 24px !important; }
  .grooni-freq .grooni-freq__sub { font-size: 16px !important; }

  .grooni-freq__grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 0;
    margin: 0;
  }
  .grooni-freq__grid::-webkit-scrollbar { display: none; }
  .grooni-freq__card {
    flex: 0 0 100vw;
    box-sizing: border-box;
    padding: 0 32px;
    scroll-snap-align: center;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .grooni-freq__media { border-radius: 8px; overflow: hidden; }

  /* Mobile: navigation row sits below the cards.
     Arrows flank the pagination dots in a single horizontal cluster
     centered under the carousel. Nothing overlays the card image. */
  .grooni-freq__nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding: 0 16px;
  }

  .grooni-freq__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid rgba(25, 23, 22, 0.1);
    border-radius: 999px;
    color: #00426A;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(25, 23, 22, 0.08);
    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    flex: 0 0 auto;
  }
  .grooni-freq__nav svg { width: 16px; height: 16px; }
  .grooni-freq__nav:hover {
    background: #F0EDEA;
    box-shadow: 0 2px 6px rgba(25, 23, 22, 0.12);
  }
  .grooni-freq__nav:disabled { opacity: 0.35; pointer-events: none; }

  /* Pagination dots — sit between the arrows */
  .grooni-freq__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
  }
  .grooni-freq__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 999px;
    background: rgba(25, 23, 22, 0.18);
    border: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
  }
  .grooni-freq__dot.is-active {
    background: #00426A;
    width: 24px;
  }
}
/* END_SECTION:custom-frequencies-grid */

/* START_SECTION:custom-home-hero (INDEX:22) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

section.grooni-hero-home,
.grooni-hero-home {
  position: relative !important;
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  width: 100% !important;
  height: var(--grooni-hero-h, 640px) !important;
  min-height: var(--grooni-hero-h, 640px) !important;
  overflow: hidden !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
  display: block;
}
.grooni-hero-home *,
.grooni-hero-home p,
.grooni-hero-home h1,
.grooni-hero-home h2,
.grooni-hero-home h3,
.grooni-hero-home span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Background ---- */
.grooni-hero-home .grooni-hero-home__bg {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.grooni-hero-home__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-hero-home__bg-video {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none;
  display: block !important;
}
.grooni-hero-home__bg-img--placeholder {
  background: linear-gradient(135deg, #5a4f48, #2d2925);
}
.grooni-hero-home__bg-img--mobile { display: none; }

.grooni-hero-home__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grooni-hero-overlay-color, #393532);
  opacity: var(--grooni-hero-overlay, 0.32);
  pointer-events: none;
}

/* ---- Inner & content ---- */
.grooni-hero-home .grooni-hero-home__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: var(--grooni-max-w, 1512px) !important;
  margin: 0 auto !important;
  padding: var(--grooni-hero-pt, 12px) 80px var(--grooni-hero-pb, 12px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}
.grooni-hero-home--align-left  .grooni-hero-home__inner { align-items: flex-start !important; }
.grooni-hero-home--align-center .grooni-hero-home__inner { align-items: center !important; }
.grooni-hero-home--align-right  .grooni-hero-home__inner { align-items: flex-end !important; }

.grooni-hero-home__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 612px;
  width: 100%;
  flex: 0 0 auto;
}
.grooni-hero-home--align-center .grooni-hero-home__content {
  align-items: center;
  text-align: center;
}
.grooni-hero-home--align-right .grooni-hero-home__content {
  align-items: flex-end;
  text-align: right;
}

/* ---- Typography ---- */
.grooni-hero-home .grooni-hero-home__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #F0EDEA !important;
  margin: 0 !important;
  opacity: 0.85;
}
.grooni-hero-home .grooni-hero-home__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #F0EDEA !important;
  margin: 0 !important;
}
.grooni-hero-home .grooni-hero-home__desc,
.grooni-hero-home .grooni-hero-home__desc p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #F0EDEA !important;
  margin: 0 !important;
  max-width: 460px;
}
.grooni-hero-home__desc p + p { margin-top: 8px !important; }

/* ---- Buttons ---- */
.grooni-hero-home .grooni-hero-home__buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px !important;
  padding: 0 !important;
}
.grooni-hero-home a.grooni-hero-home__btn,
.grooni-hero-home .grooni-hero-home__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  min-width: 159px;
  cursor: pointer;
}
.grooni-hero-home a.grooni-hero-home__btn:hover { transform: translateY(-1px); }
.grooni-hero-home a.grooni-hero-home__btn--primary,
.grooni-hero-home .grooni-hero-home__btn--primary {
  background: #00426A !important;
  background-color: #00426A !important;
  color: #F0EDEA !important;
}
.grooni-hero-home a.grooni-hero-home__btn--primary:hover { background: #003355 !important; }
.grooni-hero-home a.grooni-hero-home__btn--secondary,
.grooni-hero-home .grooni-hero-home__btn--secondary {
  background: #F0EDEA !important;
  background-color: #F0EDEA !important;
  color: #00426A !important;
}
.grooni-hero-home a.grooni-hero-home__btn--secondary:hover { background: #FFFFFF !important; }

/* Desktop: optional toggle to hide buttons */
@media (min-width: 641px) {
  .grooni-hero-home--hide-btns-d .grooni-hero-home__buttons { display: none !important; }
}

/* Mobile: force vertical centering via flex column. Buttons are visible
   by default — toggle off via the "Hide buttons (mobile)" section setting
   if you want a button-less hero on small screens. */
@media (max-width: 640px) {
  .grooni-hero-home--hide-btns-m .grooni-hero-home__buttons { display: none !important; }

  /* Reset any absolute positioning from previous approaches */
  .grooni-hero-home .grooni-hero-home__content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Inner: flex column, content vertically centered. min-height matches the section's so flex centering works. */
  .grooni-hero-home .grooni-hero-home__inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vw !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }
  .grooni-hero-home--mobile-4-5 .grooni-hero-home__inner { min-height: calc(100vw * 5 / 4) !important; }
  .grooni-hero-home--mobile-9-16 .grooni-hero-home__inner { min-height: calc(100vw * 16 / 9) !important; }
  .grooni-hero-home--mobile-custom .grooni-hero-home__inner { min-height: var(--grooni-hero-h-m, 480px) !important; }

  /* Horizontal alignment per setting */
  .grooni-hero-home--align-left .grooni-hero-home__inner   { align-items: flex-start !important; }
  .grooni-hero-home--align-center .grooni-hero-home__inner { align-items: center !important; }
  .grooni-hero-home--align-right .grooni-hero-home__inner  { align-items: flex-end !important; }
  .grooni-hero-home--align-center .grooni-hero-home__content,
  .grooni-hero-home--align-center .grooni-hero-home__content * { text-align: center !important; }
  .grooni-hero-home--align-right .grooni-hero-home__content,
  .grooni-hero-home--align-right .grooni-hero-home__content * { text-align: right !important; }
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-hero-home__inner { padding: 24px 32px; }
  .grooni-hero-home .grooni-hero-home__heading { font-size: 40px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  /* Default custom: use the height_mobile setting */
  section.grooni-hero-home.grooni-hero-home--mobile-custom,
  .grooni-hero-home.grooni-hero-home--mobile-custom {
    height: var(--grooni-hero-h-m, 480px) !important;
    min-height: var(--grooni-hero-h-m, 480px) !important;
  }
  /* 1:1 square — section is at least as tall as it is wide, can grow if content needs more room */
  section.grooni-hero-home.grooni-hero-home--mobile-1-1,
  .grooni-hero-home.grooni-hero-home--mobile-1-1 {
    height: auto !important;
    min-height: 100vw !important;
  }
  /* 4:5 portrait */
  section.grooni-hero-home.grooni-hero-home--mobile-4-5,
  .grooni-hero-home.grooni-hero-home--mobile-4-5 {
    height: auto !important;
    min-height: calc(100vw * 5 / 4) !important;
  }
  /* 9:16 full vertical (Instagram/TikTok format) */
  section.grooni-hero-home.grooni-hero-home--mobile-9-16,
  .grooni-hero-home.grooni-hero-home--mobile-9-16 {
    height: auto !important;
    min-height: calc(100vw * 16 / 9) !important;
  }

  /* When using aspect-ratio modes, scale typography down so content has a better chance of fitting */
  .grooni-hero-home--mobile-1-1 .grooni-hero-home__heading,
  .grooni-hero-home--mobile-4-5 .grooni-hero-home__heading {
    font-size: 26px !important;
  }
  .grooni-hero-home--mobile-1-1 .grooni-hero-home__desc,
  .grooni-hero-home--mobile-1-1 .grooni-hero-home__desc p,
  .grooni-hero-home--mobile-4-5 .grooni-hero-home__desc,
  .grooni-hero-home--mobile-4-5 .grooni-hero-home__desc p {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .grooni-hero-home--mobile-1-1 .grooni-hero-home__content,
  .grooni-hero-home--mobile-4-5 .grooni-hero-home__content {
    gap: 14px !important;
  }
  .grooni-hero-home--mobile-1-1 .grooni-hero-home__btn,
  .grooni-hero-home--mobile-4-5 .grooni-hero-home__btn {
    padding: 12px 18px !important;
    font-size: 14px !important;
    min-width: 0 !important;
  }
  .grooni-hero-home__inner { padding: 24px 16px; }
  .grooni-hero-home__bg-img--desktop { display: none; }
  .grooni-hero-home__bg-img--mobile  { display: block; }
  /* Fallback: if no mobile-specific image, keep desktop visible */
  .grooni-hero-home__bg-img--mobile:not([src]),
  .grooni-hero-home__bg:has(.grooni-hero-home__bg-img--mobile:not([src])) .grooni-hero-home__bg-img--desktop { display: block; }

  .grooni-hero-home__content { gap: 20px; max-width: 100%; }
  .grooni-hero-home .grooni-hero-home__heading { font-size: 32px !important; }
  .grooni-hero-home .grooni-hero-home__desc { font-size: 15px !important; }

  .grooni-hero-home__buttons { width: 100%; }
  .grooni-hero-home__btn { flex: 1 1 auto; padding: 14px 20px; min-width: 0; }
}
/* END_SECTION:custom-home-hero */

/* START_SECTION:custom-how-it-works (INDEX:23) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

section.grooni-hiw,
.grooni-hiw {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-hiw-bg, #F0EDEA) !important;
  padding: var(--grooni-hiw-pt, 80px) 80px var(--grooni-hiw-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-hiw *,
.grooni-hiw span,
.grooni-hiw p,
.grooni-hiw a {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-hiw .grooni-hiw__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  max-width: var(--grooni-max-w, 1512px) !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ---- Left intro ---- */
.grooni-hiw__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.grooni-hiw .grooni-hiw__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-hiw .grooni-hiw__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-hiw .grooni-hiw__desc,
.grooni-hiw .grooni-hiw__desc p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  margin: 0 !important;
  max-width: 500px;
}
.grooni-hiw a.grooni-hiw__cta,
.grooni-hiw .grooni-hiw__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 32px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  margin-top: 12px !important;
  transition: background 0.2s ease;
}
.grooni-hiw a.grooni-hiw__cta:hover { background: #003355 !important; }

/* ---- Right steps ---- */
.grooni-hiw__steps {
  position: relative;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-left: 60px !important;
}
/* Connecting vertical line behind the circles */
.grooni-hiw__steps::before {
  content: '';
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 92px;
  width: 0;
  border-left: 3px solid #FAF9F8;
  z-index: 0;
}

.grooni-hiw__step {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 16px;
  border-radius: 8px;
  z-index: 1;
}
.grooni-hiw__step-num {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background: #FAF9F8;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.grooni-hiw .grooni-hiw__step-num span {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #00426A !important;
}
.grooni-hiw__step-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.grooni-hiw .grooni-hiw__step-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #00426A !important;
  margin: 0 !important;
}
.grooni-hiw .grooni-hiw__step-desc {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  margin: 0 !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-hiw,
  .grooni-hiw { padding: var(--grooni-hiw-pt, 56px) 32px var(--grooni-hiw-pb, 56px) !important; }
  .grooni-hiw .grooni-hiw__inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .grooni-hiw .grooni-hiw__heading { font-size: 32px !important; }
  .grooni-hiw__steps { padding-left: 0 !important; }
  .grooni-hiw__steps::before { left: 32px; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-hiw,
  .grooni-hiw { padding: var(--grooni-hiw-pt-m, 56px) 16px var(--grooni-hiw-pb-m, 56px) !important; }
  .grooni-hiw .grooni-hiw__inner { gap: 32px !important; }
  .grooni-hiw .grooni-hiw__heading { font-size: 26px !important; }
  .grooni-hiw__step { padding: 12px 4px !important; gap: 16px !important; }
  .grooni-hiw__step-num {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }
  .grooni-hiw .grooni-hiw__step-num span { font-size: 22px !important; }
  .grooni-hiw .grooni-hiw__step-title { font-size: 14px !important; }
  .grooni-hiw .grooni-hiw__step-desc { font-size: 14px !important; }
  .grooni-hiw__steps::before { left: 24px; top: 24px; bottom: 24px; }
}
/* END_SECTION:custom-how-it-works */

/* START_SECTION:custom-logo-bar (INDEX:25) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

.grooni-logos {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-logos-bg, #F0EDEA);
  padding: var(--grooni-logos-pt, 40px) 80px var(--grooni-logos-pb, 40px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.grooni-logos *,
.grooni-logos span,
.grooni-logos a {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-logos__inner {
  display: flex;
  align-items: center;
  gap: 76px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}
.grooni-logos .grooni-logos__label {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--grooni-logos-label, #909090) !important;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Viewport (clips overflow + optional edge fade) */
.grooni-logos__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.grooni-logos__viewport--fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Track */
.grooni-logos__track {
  display: flex;
  align-items: center;
  gap: var(--grooni-logos-gap, 76px);
  width: max-content;
  animation: grooni-logos-scroll var(--grooni-logos-dur, 40s) linear infinite var(--grooni-logos-dir, normal);
  will-change: transform;
}
.grooni-logos__track--pausable:hover { animation-play-state: paused; }
.grooni-logos__track--grayscale .grooni-logos__img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.grooni-logos__track--grayscale .grooni-logos__item:hover .grooni-logos__img {
  filter: grayscale(0);
  opacity: 1;
}

/* Items */
.grooni-logos__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: var(--grooni-logos-h, 30px);
  text-decoration: none;
  color: inherit;
}
.grooni-logos__img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.grooni-logos__placeholder {
  font-size: 12px;
  color: var(--grooni-logos-label, #909090);
  padding: 0 12px;
  border: 1px dashed currentColor;
  border-radius: 4px;
  height: 100%;
  display: inline-flex;
  align-items: center;
}

@keyframes grooni-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--grooni-logos-gap, 76px) / 2)); }
}

/* Reduced motion — stop the marquee */
@media (prefers-reduced-motion: reduce) {
  .grooni-logos__track { animation: none; }
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-logos { padding: var(--grooni-logos-pt, 32px) 32px var(--grooni-logos-pb, 32px); }
  .grooni-logos__inner { gap: 40px; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-logos { padding: var(--grooni-logos-pt-m, 24px) 16px var(--grooni-logos-pb-m, 24px); }
  .grooni-logos__inner {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .grooni-logos .grooni-logos__label { text-align: center; }
}
/* END_SECTION:custom-logo-bar */

/* START_SECTION:custom-personas-grid (INDEX:26) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

.grooni-personas {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-personas-bg, #F8F7F5);
  padding: var(--grooni-personas-pt, 80px) 80px var(--grooni-personas-pb, 80px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-personas *,
.grooni-personas p,
.grooni-personas h1,
.grooni-personas h2,
.grooni-personas h3,
.grooni-personas span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-personas__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}

/* ---- Header ---- */
.grooni-personas__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  max-width: 720px;
}
.grooni-personas .grooni-personas__eyebrow {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--grooni-personas-eyebrow, #778AA1) !important;
  margin: 0 !important;
}
.grooni-personas .grooni-personas__heading {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--grooni-personas-heading, #191716) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- Grid ---- */
.grooni-personas__grid {
  display: grid;
  grid-template-columns: repeat(var(--grooni-personas-cols, 3), minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

/* ---- Card ---- */
.grooni-personas__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px;
  gap: 16px;
  background: var(--grooni-personas-card-bg, #FFFFFF);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.grooni-personas__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 96px;
  background: #D9D9D9;
}
.grooni-personas__icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-personas__icon-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
}
.grooni-personas .grooni-personas__title {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--grooni-personas-heading, #191716) !important;
  text-align: center !important;
  margin: 0 !important;
}
.grooni-personas .grooni-personas__desc {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--grooni-personas-text, #434343) !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 384px;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-personas { padding: var(--grooni-personas-pt, 56px) 32px var(--grooni-personas-pb, 56px); }
  .grooni-personas__inner { gap: 36px; }
  .grooni-personas__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grooni-personas .grooni-personas__heading { font-size: 24px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-personas { padding: var(--grooni-personas-pt-m, 48px) 16px var(--grooni-personas-pb-m, 48px); }
  .grooni-personas__inner { gap: 28px; }
  .grooni-personas__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .grooni-personas__card { padding: 24px; }
  .grooni-personas .grooni-personas__heading { font-size: 22px !important; }
  .grooni-personas .grooni-personas__title { font-size: 17px !important; }
}
/* END_SECTION:custom-personas-grid */

/* START_SECTION:custom-pillars-grid (INDEX:27) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

.grooni-pillars {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: #FFFFFF;
  padding: var(--grooni-pillars-pt, 80px) 80px var(--grooni-pillars-pb, 80px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-pillars *,
.grooni-pillars p,
.grooni-pillars h1,
.grooni-pillars h2,
.grooni-pillars h3,
.grooni-pillars span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-pillars__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}

/* ---- Header ---- */
.grooni-pillars__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.grooni-pillars .grooni-pillars__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-pillars .grooni-pillars__heading {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}
.grooni-pillars .grooni-pillars__sub {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- Grid ---- */
.grooni-pillars__grid {
  display: grid;
  grid-template-columns: repeat(var(--grooni-pillars-cols, 5), minmax(0, 1fr));
  gap: 44px 12px;
  width: 100%;
}

/* ---- Card ---- */
.grooni-pillars__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
  border-radius: 8px;
}
.grooni-pillars__icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grooni-pillars__icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.grooni-pillars__icon--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
  border-radius: 8px;
}
.grooni-pillars .grooni-pillars__number {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-pillars .grooni-pillars__title {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-pillars .grooni-pillars__desc {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  margin: 0 !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-pillars { padding: var(--grooni-pillars-pt, 56px) 32px var(--grooni-pillars-pb, 56px); }
  .grooni-pillars__inner { gap: 40px; }
  .grooni-pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .grooni-pillars .grooni-pillars__heading { font-size: 24px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-pillars { padding: var(--grooni-pillars-pt-m, 56px) 16px var(--grooni-pillars-pb-m, 56px); }
  .grooni-pillars__inner { gap: 28px; }
  .grooni-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .grooni-pillars__card { padding: 8px; gap: 10px; }
  .grooni-pillars__icon { width: 56px; height: 56px; }
  .grooni-pillars .grooni-pillars__heading { font-size: 22px !important; }
  .grooni-pillars .grooni-pillars__title { font-size: 17px !important; }
  .grooni-pillars .grooni-pillars__desc { font-size: 14px !important; }
}
/* END_SECTION:custom-pillars-grid */

/* START_SECTION:custom-pillars-tabs (INDEX:28) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

section.grooni-pillarstabs,
.grooni-pillarstabs {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: #F8F7F5 !important;
  padding: var(--grooni-pt, 80px) 80px var(--grooni-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-pillarstabs *,
.grooni-pillarstabs span,
.grooni-pillarstabs p,
.grooni-pillarstabs a,
.grooni-pillarstabs button {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-pillarstabs__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 40px !important;
  max-width: var(--grooni-max-w, 1512px) !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ---- Header ---- */
.grooni-pillarstabs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
}
.grooni-pillarstabs .grooni-pillarstabs__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-pillarstabs .grooni-pillarstabs__heading {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- White card wrapper ---- */
.grooni-pillarstabs__card {
  width: 100%;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
}

/* ---- Tabs strip ---- */
.grooni-pillarstabs__tabs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 16px;
}
.grooni-pillarstabs__tabs {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding: 0 16px;
  padding-bottom: 4px;
}
.grooni-pillarstabs__tabs::-webkit-scrollbar { display: none; }

.grooni-pillarstabs .grooni-pillarstabs__tab {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 16px 12px 20px !important;
  width: 160px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  scroll-snap-align: start;
  text-align: center !important;
  transition: background 0.2s ease;
}
.grooni-pillarstabs__tab:hover { background: #F8F7F5; }
.grooni-pillarstabs__tab-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B3B3B3;
  transition: color 0.2s ease;
}
.grooni-pillarstabs__tab.is-active .grooni-pillarstabs__tab-icon { color: #00426A; }
.grooni-pillarstabs__tab-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.2s ease;
}
.grooni-pillarstabs__tab.is-active .grooni-pillarstabs__tab-icon-img {
  filter: none;
}
.grooni-pillarstabs__tab-icon-placeholder {
  display: block;
  width: 60%;
  height: 60%;
  background: currentColor;
  opacity: 0.3;
  border-radius: 8px;
}
.grooni-pillarstabs .grooni-pillarstabs__tab-name {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #B3B3B3 !important;
  text-align: center !important;
}
.grooni-pillarstabs__tab.is-active .grooni-pillarstabs__tab-name {
  font-weight: 600 !important;
  color: #191716 !important;
}

/* Tab nav arrows */
.grooni-pillarstabs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E5E1DD;
  color: #191716;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}
.grooni-pillarstabs__nav:hover { background: #F8F7F5; }
.grooni-pillarstabs__nav:disabled { opacity: 0; pointer-events: none; }

/* ---- Panels (content area) ---- */
.grooni-pillarstabs__panels {
  position: relative;
  width: 100%;
}
.grooni-pillarstabs__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 0 0 32px;
}
.grooni-pillarstabs__panel[hidden] { display: none; }

/* Media */
/* Mobile image carousel — hidden on desktop */
.grooni-pillarstabs__mcarousel { display: none; }

.grooni-pillarstabs__media {
  width: 100%;
  aspect-ratio: 664 / 631;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f1f1;
}
.grooni-pillarstabs__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-pillarstabs__img--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
}

/* Info card */
.grooni-pillarstabs__info {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: start;
}
.grooni-pillarstabs__info-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grooni-pillarstabs .grooni-pillarstabs__pillar-num {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-pillarstabs .grooni-pillarstabs__pillar-name {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-pillarstabs .grooni-pillarstabs__short-desc {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  margin: 0 !important;
}

/* Why / How blocks */
.grooni-pillarstabs__detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grooni-pillarstabs .grooni-pillarstabs__detail-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-pillarstabs .grooni-pillarstabs__detail-body,
.grooni-pillarstabs .grooni-pillarstabs__detail-body p {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #191716 !important;
  margin: 0 !important;
}

/* Recommended Dose box */
.grooni-pillarstabs__dose {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #FAF9F8;
  border-radius: 4px;
}
.grooni-pillarstabs__dose-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grooni-pillarstabs__dose-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.grooni-pillarstabs__dose-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.grooni-pillarstabs .grooni-pillarstabs__dose-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
}
.grooni-pillarstabs .grooni-pillarstabs__dose-value {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #191716 !important;
}

/* CTA */
.grooni-pillarstabs a.grooni-pillarstabs__cta,
.grooni-pillarstabs .grooni-pillarstabs__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 32px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease;
}
.grooni-pillarstabs a.grooni-pillarstabs__cta:hover { background: #003355 !important; }

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-pillarstabs,
  .grooni-pillarstabs { padding: var(--grooni-pt, 56px) 24px var(--grooni-pb, 56px) !important; }
  .grooni-pillarstabs__inner { gap: 32px !important; }
  .grooni-pillarstabs__panel {
    grid-template-columns: 1fr;
    padding: 0 24px;
  }
  .grooni-pillarstabs__media { aspect-ratio: 4 / 3; }
  .grooni-pillarstabs .grooni-pillarstabs__pillar-name { font-size: 28px !important; }
  .grooni-pillarstabs .grooni-pillarstabs__heading { font-size: 24px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-pillarstabs,
  .grooni-pillarstabs { padding: var(--grooni-pt-m, 56px) 16px var(--grooni-pb-m, 56px) !important; }
  .grooni-pillarstabs__card { padding: 24px 0; gap: 24px; }
  .grooni-pillarstabs__tabs-wrap { padding: 0 16px; gap: 8px; }
  .grooni-pillarstabs__tabs { gap: 8px; }
  .grooni-pillarstabs .grooni-pillarstabs__tab { width: 110px !important; padding: 12px 8px 16px !important; gap: 10px !important; }
  .grooni-pillarstabs__tab-icon { width: 44px; height: 44px; }
  .grooni-pillarstabs .grooni-pillarstabs__tab-name { font-size: 13px !important; }
  .grooni-pillarstabs__panel { padding: 0 16px; gap: 20px; }
  .grooni-pillarstabs__info { padding: 20px; gap: 20px; }
  .grooni-pillarstabs .grooni-pillarstabs__pillar-name { font-size: 24px !important; }
  .grooni-pillarstabs__nav { flex: 0 0 28px; width: 28px; height: 28px; }

  /* Hide the in-panel image on mobile — replaced by the swipeable
     mobile image carousel rendered above the panels. */
  .grooni-pillarstabs__media { display: none !important; }

  /* Hide tab strip prev/next arrows on mobile — the image carousel's
     own chevron + native horizontal scroll handle navigation. */
  .grooni-pillarstabs__nav { display: none !important; }

  .grooni-pillarstabs__mcarousel {
    display: block !important;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .grooni-pillarstabs__mcarousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
  }
  .grooni-pillarstabs__mcarousel-track::-webkit-scrollbar { display: none; }
  .grooni-pillarstabs__mcarousel-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background: #F0EDEA;
    overflow: hidden;
  }
  .grooni-pillarstabs__mcarousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .grooni-pillarstabs__mcarousel-img--placeholder {
    background: linear-gradient(135deg, #e6e3df, #d4cfca);
  }
  .grooni-pillarstabs__mcarousel-hint {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #00426A;
    border-radius: 999px;
    border: 1px solid rgba(25, 23, 22, 0.08);
    box-shadow: 0 2px 6px rgba(25, 23, 22, 0.12);
    pointer-events: none;
    transition: opacity 0.3s ease;
    animation: grooni-pillarstabs-mcarousel-nudge 1.6s ease-in-out 1.2s infinite;
  }
  .grooni-pillarstabs__mcarousel.has-scrolled .grooni-pillarstabs__mcarousel-hint {
    opacity: 0;
  }
  @keyframes grooni-pillarstabs-mcarousel-nudge {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(-4px); }
  }
}
/* END_SECTION:custom-pillars-tabs */

/* START_SECTION:custom-product-comparison (INDEX:29) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&display=swap');

section.grooni-pcompare,
.grooni-pcompare {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-pcompare-bg, #F8F7F5) !important;
  padding: var(--grooni-pcompare-pt, 80px) 80px var(--grooni-pcompare-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-pcompare *,
.grooni-pcompare span,
.grooni-pcompare p,
.grooni-pcompare a,
.grooni-pcompare button {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-pcompare .grooni-pcompare__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 60px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
  width: 100%;
}

/* Header */
.grooni-pcompare__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.grooni-pcompare .grooni-pcompare__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-pcompare .grooni-pcompare__heading {
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
  font-family: 'Figtree', system-ui, sans-serif !important;
}
.grooni-pcompare .grooni-pcompare__subheading {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 720px;
}

/* Scroll wrapper for mobile horizontal scroll */
.grooni-pcompare__scroll {
  position: relative;
  width: 100%;
}

/* Table */
.grooni-pcompare__table {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 8px;
  /* No overflow:hidden here — it would trap position: sticky on the
     mobile label column. Each row already has border-radius of its own. */
}

.grooni-pcompare__row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  border-radius: 8px;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-pcompare__row--a { background: var(--grooni-pcompare-row-a, #FFFFFF) !important; }
.grooni-pcompare__row--b { background: var(--grooni-pcompare-row-b, #FAF9F8) !important; }

.grooni-pcompare__row--header,
.grooni-pcompare__row--footer { background: transparent !important; }

.grooni-pcompare__label {
  flex: 0 0 var(--grooni-pcompare-label-w, 320px) !important;
  width: var(--grooni-pcompare-label-w, 320px) !important;
  min-width: var(--grooni-pcompare-label-w, 320px) !important;
  max-width: var(--grooni-pcompare-label-w, 320px) !important;
  padding: 16px;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box !important;
}
.grooni-pcompare__spacer {
  display: inline-block;
  width: 1px;
  visibility: hidden;
}
.grooni-pcompare__logo {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 80px;
  margin: 0 auto;
  object-fit: contain;
}
.grooni-pcompare__row--header .grooni-pcompare__label {
  align-items: center !important;
  justify-content: center !important;
}
.grooni-pcompare .grooni-pcompare__label-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #191716 !important;
}
.grooni-pcompare .grooni-pcompare__label-sub {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #434343 !important;
}

.grooni-pcompare__cells {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(var(--grooni-pcompare-cols, 4), minmax(0, 1fr)) !important;
  align-items: center;
  gap: 0;
  min-height: 75px;
  box-sizing: border-box !important;
}
.grooni-pcompare__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  text-align: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.grooni-pcompare .grooni-pcompare__value {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: #191716 !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Icons */
.grooni-pcompare__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.grooni-pcompare__icon svg { width: 24px; height: 24px; display: block; }
.grooni-pcompare__icon--check { color: #00426A; }
.grooni-pcompare__icon--x { color: #823636; }
.grooni-pcompare__icon--minus { color: #909090; }

/* Header row: product cards */
.grooni-pcompare__row--header .grooni-pcompare__cells { min-height: 256px; padding: 0; gap: 0; }
.grooni-pcompare__cell--product {
  padding: 0 20px 28px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: center;
  width: 100% !important;
}
.grooni-pcompare__product-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}
.grooni-pcompare__product-img {
  width: 100%;
  aspect-ratio: 228 / 160;
  border-radius: 8px;
  overflow: hidden;
  background: #F0EDEA;
}
.grooni-pcompare__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-pcompare__img--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
  width: 100%;
  height: 100%;
}
.grooni-pcompare .grooni-pcompare__product-title {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  text-align: center !important;
  color: #191716 !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* Footer row: buttons */
.grooni-pcompare__row--footer .grooni-pcompare__cells { min-height: 0; padding: 16px 0 0; }
.grooni-pcompare__cells--buttons { gap: 40px !important; padding: 16px 16px 0 !important; }
.grooni-pcompare__cell--button { padding: 0 !important; }
.grooni-pcompare a.grooni-pcompare__btn,
.grooni-pcompare .grooni-pcompare__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 24px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease;
}
.grooni-pcompare a.grooni-pcompare__btn:hover { background: #003355 !important; }

/* Swipe hint (mobile only) */
.grooni-pcompare__swipe-hint {
  display: none;
  position: absolute;
  top: -32px;
  right: 0;
  pointer-events: none;
}
.grooni-pcompare__swipe-hint span {
  display: inline-block;
  padding: 4px 12px;
  background: #00426A;
  color: #F0EDEA;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-pcompare,
  .grooni-pcompare { padding: var(--grooni-pcompare-pt, 56px) 32px var(--grooni-pcompare-pb, 56px) !important; }
  .grooni-pcompare .grooni-pcompare__inner { gap: 40px !important; }
  .grooni-pcompare__label {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
  .grooni-pcompare .grooni-pcompare__heading { font-size: 24px !important; }
  .grooni-pcompare .grooni-pcompare__product-title { font-size: 18px !important; }

  /* Logo: desktop only */
  .grooni-pcompare__logo { display: none !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-pcompare,
  .grooni-pcompare { padding: var(--grooni-pcompare-pt-m, 56px) 16px var(--grooni-pcompare-pb-m, 56px) !important; }
  .grooni-pcompare .grooni-pcompare__inner { gap: 28px !important; }
  .grooni-pcompare .grooni-pcompare__heading { font-size: 22px !important; }

  /* Horizontal scroll wrapper.
     IMPORTANT: padding-left must be 0 so the sticky label can hug the
     left viewport edge. Otherwise cell content peeks through the gap
     between viewport edge and label start while scrolling.
     The right padding stays for the fade gradient on the right edge.
     scroll-padding-left reserves the sticky-label width so snap targets
     align AFTER the label, never behind it. */
  .grooni-pcompare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px -16px 0;
    padding: 0 16px 16px 0;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 110px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
  }
  .grooni-pcompare__scroll::-webkit-scrollbar { display: none; }
  .grooni-pcompare__scroll::after { display: none !important; }

  /* Mobile: a narrow label column + fixed-width product columns so the
     first product image lands fully inside the viewport on initial load,
     with a sliver of the next column showing to invite swiping.
     The label column is STICKY so feature names stay visible while
     users swipe horizontally through products. */
  .grooni-pcompare__table {
    width: max-content;
  }
  .grooni-pcompare__cells {
    grid-template-columns: repeat(var(--grooni-pcompare-cols, 4), 200px) !important;
    min-height: 60px !important;
  }

  .grooni-pcompare__label {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    padding: 12px !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    /* Stretch label to fill the entire row height — otherwise on the
       header row (256px tall) the empty label only covers ~24px and
       product imagery shows through above/below it. */
    align-self: stretch !important;
    justify-content: center !important;
    box-shadow: 3px 0 4px -2px rgba(0, 0, 0, 0.08) !important;
  }
  /* Each product column snaps to the start (after the sticky label)
     so users can't get stuck in awkward half-scroll states. */
  .grooni-pcompare__cell {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
  /* Label needs its own FULLY OPAQUE bg (solid colors, not the
     CSS variable which may have user-set alpha applied) so scrolling
     cells don't bleed through the sticky label. */
  .grooni-pcompare__row--a .grooni-pcompare__label {
    background: #FFFFFF !important;
  }
  .grooni-pcompare__row--b .grooni-pcompare__label {
    background: #FAF9F8 !important;
  }
  .grooni-pcompare__row--header .grooni-pcompare__label,
  .grooni-pcompare__row--footer .grooni-pcompare__label {
    background: #F8F7F5 !important;
  }
  .grooni-pcompare .grooni-pcompare__label-text { font-size: 12px !important; line-height: 1.2 !important; }
  .grooni-pcompare__cell { padding: 10px !important; }
  .grooni-pcompare .grooni-pcompare__value { font-size: 14px !important; }
  .grooni-pcompare__icon,
  .grooni-pcompare__icon svg { width: 20px !important; height: 20px !important; }

  /* Header row mobile: full-bleed product cards inside their fixed columns */
  .grooni-pcompare__row--header .grooni-pcompare__cells { min-height: auto !important; }
  .grooni-pcompare__cell--product { padding: 0 12px 16px !important; }
  .grooni-pcompare__product-link { gap: 10px !important; }
  .grooni-pcompare__product-img { aspect-ratio: 1 / 1 !important; }
  .grooni-pcompare .grooni-pcompare__product-title { font-size: 14px !important; line-height: 1.2 !important; }

  /* Footer buttons mobile */
  .grooni-pcompare__cells--buttons { gap: 0 !important; padding: 12px 0 0 !important; }
  .grooni-pcompare__cell--button { padding: 0 12px !important; }
  .grooni-pcompare a.grooni-pcompare__btn { padding: 10px 8px !important; font-size: 11px !important; }

  /* Swipe hint */
  .grooni-pcompare__swipe-hint { display: block; }
}
/* END_SECTION:custom-product-comparison */

/* START_SECTION:custom-product-hero (INDEX:30) */
.grooni-hero {
  font-family: var(--grooni-font-sans);
  color: var(--grooni-text);
  padding: 60px 80px;
  background: var(--grooni-bg);
}
.grooni-hero__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  max-width: var(--grooni-max-w);
  margin: 0 auto;
}

/* ────────── Gallery ────────── */
.grooni-hero__gallery {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}
/* Horizontal scroll-snap stage. Holds all product images side-by-side.
   On mobile, users swipe naturally. On desktop, thumbnails scroll. */
.grooni-hero__main-stage {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  border-radius: var(--grooni-radius-md);
  background: #f1f1f1;
}
.grooni-hero__main-stage::-webkit-scrollbar { display: none; }
.grooni-hero__main-image {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #f1f1f1;
}
.grooni-hero__main-img,
.grooni-hero__main-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-hero__main-video {
  background: #000;
}
.grooni-hero__main-iframe-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.grooni-hero__main-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Play-icon overlay on video / model thumbs */
.grooni-hero__thumb { position: relative; }
.grooni-hero__thumb-icon {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
}
.grooni-hero__thumb-icon svg { display: block; }
.grooni-hero__thumb-strip {
  position: relative;
}
.grooni-hero__thumbnails {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.grooni-hero__thumbnails::-webkit-scrollbar { display: none; }
.grooni-hero__thumb {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  border-radius: var(--grooni-radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: #f1f1f1;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
  scroll-snap-align: start;
}
.grooni-hero__thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--grooni-border);
  color: var(--grooni-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.grooni-hero__thumb-strip:hover .grooni-hero__thumb-nav,
.grooni-hero__thumb-nav:focus-visible { opacity: 1; }
.grooni-hero__thumb-nav:hover { background: #fff; }
.grooni-hero__thumb-nav:disabled { opacity: 0 !important; pointer-events: none; }
.grooni-hero__thumb-nav--prev { left: -12px; }
.grooni-hero__thumb-nav--next { right: -12px; }
@media (hover: none) {
  .grooni-hero__thumb-nav { display: none; }
}
.grooni-hero__thumb:hover { border-color: var(--grooni-border); }
.grooni-hero__thumb.is-active { border-color: var(--grooni-primary); }
.grooni-hero__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ────────── Info ────────── */
.grooni-hero__info {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px;
  gap: 28px;
}

/* Rating */
.grooni-hero__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grooni-stars { display: inline-flex; color: var(--grooni-primary); gap: 0; }
.grooni-star  { display: block; }
.grooni-hero__rating-text {
  font-size: var(--grooni-fs-text-s);
  font-weight: 400;
  line-height: var(--grooni-lh-body);
  color: var(--grooni-text-muted);
}

/* Custom Judge.me-powered rating link */
.grooni-hero__rating-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.grooni-hero__rating-link:hover .grooni-hero__rating-text { text-decoration: underline; }

/* Fallback styling if Judge.me's own HTML ends up rendering */
.grooni-hero__rating .jdgm-widget,
.grooni-hero__rating .jdgm-prev-badge {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--grooni-font-sans) !important;
}
.grooni-hero__rating .jdgm-prev-badge__stars {
  color: var(--grooni-icon) !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
}
.grooni-hero__rating .jdgm-prev-badge__text {
  font-size: var(--grooni-fs-text-s) !important;
  font-weight: 400 !important;
  line-height: var(--grooni-lh-body) !important;
  color: var(--grooni-text-muted) !important;
  margin-left: 0 !important;
}

/* Heading */
.grooni-hero__heading { display: flex; flex-direction: column; gap: 16px; }
.grooni-hero__title {
  font-family: var(--grooni-font-serif);
  font-size: var(--grooni-fs-h1);
  font-weight: 500;
  line-height: var(--grooni-lh-tight);
  color: var(--grooni-text);
  margin: 0;
}
.grooni-hero__subtitle {
  font-size: var(--grooni-fs-text-l);
  font-weight: 400;
  line-height: var(--grooni-lh-body);
  color: var(--grooni-text);
  margin: 0;
  max-width: 100%;
}
.grooni-hero__price {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.grooni-hero__price-current {
  font-size: var(--grooni-fs-h2);
  font-weight: 700;
  line-height: var(--grooni-lh-tight);
  color: var(--grooni-text-strong);
}
.grooni-hero__price-compare {
  font-size: var(--grooni-fs-h2);
  font-weight: 500;
  line-height: var(--grooni-lh-tight);
  color: var(--grooni-text-muted);
  text-decoration: line-through;
}
.grooni-hero__price-compare[hidden] { display: none; }

/* HSA badge */
.grooni-hero__hsa {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--grooni-bg-card);
  border-radius: var(--grooni-radius-sm);
}
/* Size variants */
.grooni-hero__hsa--small  { padding: 8px 10px;  gap: 10px; }
.grooni-hero__hsa--medium { padding: 12px;      gap: 16px; }
.grooni-hero__hsa--large  { padding: 16px 20px; gap: 20px; }

.grooni-hero__hsa--small .grooni-hero__hsa-icon  { flex: 0 0 28px; width: 28px; height: 28px; }
.grooni-hero__hsa--medium .grooni-hero__hsa-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.grooni-hero__hsa--large .grooni-hero__hsa-icon  { flex: 0 0 52px; width: 52px; height: 52px; }

.grooni-hero__hsa--small .grooni-hero__hsa-title  { font-size: 11px; }
.grooni-hero__hsa--medium .grooni-hero__hsa-title { font-size: var(--grooni-fs-caps-s); }
.grooni-hero__hsa--large .grooni-hero__hsa-title  { font-size: 14px; }

.grooni-hero__hsa--small .grooni-hero__hsa-sub  { font-size: 12px; }
.grooni-hero__hsa--medium .grooni-hero__hsa-sub { font-size: var(--grooni-fs-text-s); }
.grooni-hero__hsa--large .grooni-hero__hsa-sub  { font-size: 15px; }

.grooni-hero__hsa--small .grooni-hero__hsa-learn  { font-size: 11px; }
.grooni-hero__hsa--large .grooni-hero__hsa-learn  { font-size: 13px; }
/* Link variant — same look, but interactive */
a.grooni-hero__hsa,
.grooni-hero__hsa--link {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
a.grooni-hero__hsa:hover,
.grooni-hero__hsa--link:hover {
  border-color: var(--grooni-border, rgba(25, 23, 22, 0.08));
  background: var(--grooni-bg-card-hover, #F0EDEA);
}
a.grooni-hero__hsa:active,
.grooni-hero__hsa--link:active { transform: scale(0.99); }
a.grooni-hero__hsa:focus-visible,
.grooni-hero__hsa--link:focus-visible {
  outline: 2px solid var(--grooni-primary, #00426A);
  outline-offset: 2px;
}
.grooni-hero__hsa-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.grooni-hero__hsa-icon svg,
.grooni-hero__hsa-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.grooni-hero__hsa-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.grooni-hero__hsa-title {
  font-size: var(--grooni-fs-caps-s);
  font-weight: 700;
  line-height: var(--grooni-lh-tight);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grooni-caps);
}
.grooni-hero__hsa-sub {
  font-size: var(--grooni-fs-text-s);
  font-weight: 400;
  line-height: var(--grooni-lh-body);
  color: var(--grooni-text);
}
.grooni-hero__hsa-learn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--grooni-text-muted, #909090);
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}
.grooni-hero__hsa-learn-arrow { transition: transform 0.2s ease; }
a.grooni-hero__hsa:hover .grooni-hero__hsa-learn,
.grooni-hero__hsa--link:hover .grooni-hero__hsa-learn { color: var(--grooni-primary, #00426A); }
a.grooni-hero__hsa:hover .grooni-hero__hsa-learn-arrow,
.grooni-hero__hsa--link:hover .grooni-hero__hsa-learn-arrow { transform: translateX(2px); }

/* Features */
.grooni-hero__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grooni-hero__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--grooni-fs-text-m);
  line-height: var(--grooni-lh-body);
  color: var(--grooni-text);
}
.grooni-hero__check { flex: 0 0 24px; color: var(--grooni-primary); }
/* Flatten richtext output so paragraph metafields render inline */
.grooni-hero__feature-text > p {
  margin: 0;
  display: inline;
}
.grooni-hero__feature-text > p + p { display: block; margin-top: 4px; }

/* Form / variants */
.grooni-hero__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: -22px 0 0;
}
.grooni-hero__variant-label {
  font-size: var(--grooni-fs-caps-m);
  font-weight: 700;
  line-height: var(--grooni-lh-tight);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grooni-caps);
}
.grooni-hero__variant-section-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--grooni-text-muted, #909090);
  margin: 4px 0 4px;
}
.grooni-hero__variants {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.grooni-hero__variants > .grooni-hero__variant {
  flex: 1 1 calc(50% - 6px);
  min-width: 0;
}

/* ── Dropdown variant picker (alternative to cards) ── */
.grooni-hero__variant-select-wrap {
  position: relative;
  width: 100%;
}
.grooni-hero__variant-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 16px 44px 16px 18px;
  background: var(--grooni-bg-card);
  border: 2px solid transparent;
  border-radius: var(--grooni-radius-lg);
  font-family: var(--grooni-font-sans);
  font-size: var(--grooni-fs-text-l);
  font-weight: 500;
  line-height: var(--grooni-lh-tight);
  color: var(--grooni-text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.grooni-hero__variant-select:hover { border-color: var(--grooni-border); }
.grooni-hero__variant-select:focus,
.grooni-hero__variant-select:focus-visible {
  border-color: var(--grooni-primary);
  outline: 2px solid var(--grooni-primary);
  outline-offset: 2px;
}
.grooni-hero__variant-select-chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--grooni-text);
  display: inline-flex;
}
.grooni-hero__variant {
  /* Reset native button styles */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
  background: var(--grooni-bg-card);
  border: 2px solid transparent;
  border-radius: var(--grooni-radius-lg);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  color: inherit;
}
.grooni-hero__variant:hover { border-color: var(--grooni-border); }
.grooni-hero__variant:focus-visible {
  outline: 2px solid var(--grooni-primary);
  outline-offset: 2px;
}
.grooni-hero__variant.is-selected { border-color: var(--grooni-primary); }
.grooni-hero__variant.is-unavailable,
.grooni-hero__variant[disabled] { opacity: 0.55; cursor: not-allowed; }
.grooni-hero__variant-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grooni-hero__variant-title {
  font-size: var(--grooni-fs-text-l);
  font-weight: 600;
  line-height: var(--grooni-lh-tight);
  color: var(--grooni-text);
}
.grooni-hero__variant-desc {
  font-size: var(--grooni-fs-text-s);
  font-weight: 400;
  line-height: var(--grooni-lh-body);
  color: var(--grooni-text);
  max-width: 460px;
}
.grooni-hero__variant-price {
  font-size: var(--grooni-fs-h3);
  font-weight: 700;
  line-height: var(--grooni-lh-tight);
  color: var(--grooni-text-strong);
}
.grooni-hero__radio {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--grooni-text-muted);
  border-radius: var(--grooni-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: border-color 0.2s ease;
}
.grooni-hero__variant.is-selected .grooni-hero__radio { border-color: var(--grooni-primary); }
.grooni-hero__radio-dot {
  width: 16px;
  height: 16px;
  border-radius: var(--grooni-radius-pill);
  background: transparent;
  transition: background 0.2s ease;
}
.grooni-hero__variant.is-selected .grooni-hero__radio-dot { background: var(--grooni-primary); }

/* CTA */
.grooni-hero__cta {
  width: 100%;
  padding: 16px 32px;
  background: var(--grooni-primary);
  color: var(--grooni-bg);
  border: none;
  border-radius: var(--grooni-radius-sm);
  font-family: var(--grooni-font-sans);
  font-size: var(--grooni-fs-text-m);
  font-weight: 600;
  line-height: var(--grooni-lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0;
  transition: background 0.2s ease;
}
.grooni-hero__cta:hover { background: var(--grooni-primary-hover); }
.grooni-hero__cta:disabled { background: var(--grooni-text-muted); cursor: not-allowed; }

/* Express payment buttons (Shop Pay, Apple Pay, Google Pay, PayPal) */
.grooni-hero__payment-buttons {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grooni-hero__payment-buttons .shopify-payment-button {
  width: 100%;
}
.grooni-hero__payment-buttons .shopify-payment-button__button,
.grooni-hero__payment-buttons .shopify-payment-button__more-options {
  width: 100% !important;
  border-radius: var(--grooni-radius-sm) !important;
  font-family: var(--grooni-font-sans) !important;
  font-size: var(--grooni-fs-text-m) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  min-height: 52px !important;
  padding: 14px 32px !important;
}
.grooni-hero__payment-buttons .shopify-payment-button__more-options {
  background: transparent !important;
  color: var(--grooni-text-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: auto !important;
  padding: 4px !important;
}
.grooni-hero__payment-buttons .shopify-payment-button__more-options:hover {
  color: var(--grooni-text) !important;
}

/* Static payment icons row */
.grooni-hero__payment-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
/* Pull the icons row up so the gap to the express buttons above
   doesn't read as an empty band on the page. */
.grooni-hero__payment-icons--tight {
  margin-top: -16px;
}
.grooni-hero__payment-icons-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--grooni-text-muted, #909090);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.grooni-hero__payment-icons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
}
.grooni-hero__payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 30px;
  padding: 3px;
  border-radius: 4px;
  border: 1px solid rgba(25, 23, 22, 0.08);
  background: #FFFFFF;
  box-sizing: border-box;
}
.grooni-hero__payment-icon-svg,
.grooni-hero__payment-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  object-fit: contain;
}

/* Delivery estimate */
.grooni-hero__delivery {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--grooni-bg-card);
  border-radius: var(--grooni-radius-sm);
  border: 1px solid rgba(25, 23, 22, 0.06);
}
.grooni-hero__delivery-icon {
  flex: 0 0 auto;
  color: var(--grooni-delivery-icon-color, var(--grooni-primary, #00426A));
}
.grooni-hero__delivery-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  line-height: 1.3;
}
.grooni-hero__delivery-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--grooni-text-muted, #909090);
}
.grooni-hero__delivery-dates {
  font-size: 14px;
  font-weight: 700;
  color: var(--grooni-delivery-text-color, var(--grooni-text, #191716));
}
/* Size variants */
.grooni-hero__delivery--small  { padding: 6px 10px; gap: 8px; }
.grooni-hero__delivery--small  .grooni-hero__delivery-icon { width: 16px; height: 16px; }
.grooni-hero__delivery--small  .grooni-hero__delivery-label { font-size: 12px; }
.grooni-hero__delivery--small  .grooni-hero__delivery-dates { font-size: 12px; }

.grooni-hero__delivery--medium .grooni-hero__delivery-icon { width: 20px; height: 20px; }

.grooni-hero__delivery--large  { padding: 14px 18px; gap: 12px; }
.grooni-hero__delivery--large  .grooni-hero__delivery-icon { width: 26px; height: 26px; }
.grooni-hero__delivery--large  .grooni-hero__delivery-label { font-size: 14px; }
.grooni-hero__delivery--large  .grooni-hero__delivery-dates { font-size: 16px; }

/* Trust badges */
.grooni-hero__trust {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.grooni-hero__trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.grooni-hero__trust-icon-wrap {
  width: var(--grooni-hero-trust-icon-size, 60px);
  height: var(--grooni-hero-trust-icon-size, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.grooni-hero__trust-icon {
  width: var(--grooni-hero-trust-icon-size, 60px);
  height: var(--grooni-hero-trust-icon-size, 60px);
  object-fit: contain;
}
.grooni-hero__trust-label {
  font-size: var(--grooni-fs-caps-s);
  font-weight: 700;
  line-height: var(--grooni-lh-tight);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grooni-text-strong);
}

/* Accordions */
.grooni-hero__accordions { display: flex; flex-direction: column; }
.grooni-hero__accordion { border-top: 1px solid var(--grooni-border); }
.grooni-hero__accordion:last-child { border-bottom: 1px solid var(--grooni-border); }
.grooni-hero__accordion-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
}
.grooni-hero__accordion-summary::-webkit-details-marker { display: none; }
.grooni-hero__accordion-summary::marker { content: ''; }
.grooni-hero__accordion-icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
.grooni-hero__accordion-title {
  flex: 1;
  font-size: var(--grooni-fs-caps-m);
  font-weight: 700;
  line-height: var(--grooni-lh-tight);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grooni-text);
}
.grooni-hero__accordion-toggle { flex: 0 0 20px; color: var(--grooni-text); display: inline-flex; }
.grooni-hero__accordion-plus  { display: block; }
.grooni-hero__accordion-minus { display: none; }
.grooni-hero__accordion[open] .grooni-hero__accordion-plus  { display: none; }
.grooni-hero__accordion[open] .grooni-hero__accordion-minus { display: block; }
.grooni-hero__accordion-body {
  padding: 0 24px 24px 60px;
  font-size: var(--grooni-fs-text-m);
  line-height: var(--grooni-lh-loose);
  color: var(--grooni-text);
}
.grooni-hero__accordion-body ul { margin: 0; padding-left: 20px; }
.grooni-hero__accordion-body p:first-child { margin-top: 0; }
.grooni-hero__accordion-body p:last-child  { margin-bottom: 0; }

/* ────────── Tablet ────────── */
@media (max-width: 990px) {
  .grooni-hero { padding: 40px 32px; }
  .grooni-hero__inner { flex-direction: column; gap: 32px; }
  .grooni-hero__gallery,
  .grooni-hero__info { flex: 1 1 100%; width: 100%; }
  .grooni-hero__gallery { position: static; }
  .grooni-hero__info { padding: 0; gap: 24px; }
}

/* ────────── Mobile ────────── */
@media (max-width: 640px) {
  .grooni-hero { padding: 24px 16px; }
  .grooni-hero__title { font-size: 28px; }
  .grooni-hero__subtitle { font-size: 16px; }
  .grooni-hero__price-current,
  .grooni-hero__price-compare { font-size: 24px; }
  .grooni-hero__thumbnails { gap: 8px; }
  .grooni-hero__thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px; }

  /* Payment icons: force a single row on mobile.
     Allow horizontal scroll if there are too many to fit cleanly. */
  .grooni-hero__payment-icons-list {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start;
    width: 100%;
    gap: 6px;
    padding: 2px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .grooni-hero__payment-icons-list::-webkit-scrollbar { display: none; }
  .grooni-hero__payment-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 24px;
    padding: 2px;
  }
  .grooni-hero__variant { padding: 16px; gap: 12px; }

  /* Trust badges: 2x2 grid (default) or single row, controlled by section setting */
  .grooni-hero--trust-mobile-rows-2 .grooni-hero__trust {
    flex-wrap: wrap;
    gap: 20px 12px;
  }
  .grooni-hero--trust-mobile-rows-2 .grooni-hero__trust-item {
    flex: 0 0 calc(50% - 12px);
  }
  .grooni-hero--trust-mobile-rows-1 .grooni-hero__trust {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: space-between;
  }
  .grooni-hero--trust-mobile-rows-1 .grooni-hero__trust-item {
    flex: 1 1 0;
    min-width: 0;
  }
  .grooni-hero--trust-mobile-rows-1 .grooni-hero__trust-label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .grooni-hero__accordion-summary { padding: 20px 0; }
  .grooni-hero__accordion-body { padding: 0 0 20px 36px; }
}
/* END_SECTION:custom-product-hero */

/* START_SECTION:custom-promo-banner (INDEX:31) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

section.grooni-promo,
.grooni-promo {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-promo-bg, #F0EDEA) !important;
  padding: var(--grooni-promo-pt, 40px) 80px var(--grooni-promo-pb, 40px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-promo *,
.grooni-promo span,
.grooni-promo p,
.grooni-promo a {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-promo .grooni-promo__inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 30px !important;
  max-width: var(--grooni-max-w, 1512px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ---- Main (image + text) ---- */
.grooni-promo .grooni-promo__main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 40px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}
.grooni-promo__image {
  width: 132px;
  height: 132px;
  flex: 0 0 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grooni-promo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- Text ---- */
.grooni-promo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.grooni-promo .grooni-promo__heading {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--grooni-promo-text, #191716) !important;
  margin: 0 !important;
}
.grooni-promo .grooni-promo__desc,
.grooni-promo .grooni-promo__desc p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--grooni-promo-text, #191716) !important;
  margin: 0 !important;
}

/* ---- Button ---- */
.grooni-promo a.grooni-promo__btn,
.grooni-promo .grooni-promo__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 32px !important;
  background: var(--grooni-promo-btn-bg, #00426A) !important;
  color: var(--grooni-promo-btn-text, #F0EDEA) !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  flex: 0 0 auto !important;
  min-width: 159px;
  transition: opacity 0.2s ease;
}
.grooni-promo a.grooni-promo__btn:hover { opacity: 0.85; }

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-promo,
  .grooni-promo { padding: var(--grooni-promo-pt, 32px) 32px var(--grooni-promo-pb, 32px) !important; }
  .grooni-promo .grooni-promo__main { gap: 24px !important; }
  .grooni-promo__image { width: 100px; height: 100px; flex: 0 0 100px; }
  .grooni-promo .grooni-promo__heading { font-size: 22px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-promo,
  .grooni-promo { padding: var(--grooni-promo-pt-m, 32px) 16px var(--grooni-promo-pb-m, 32px) !important; }
  .grooni-promo .grooni-promo__inner {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }
  .grooni-promo .grooni-promo__main {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .grooni-promo__image { width: 88px; height: 88px; flex: 0 0 88px; }
  .grooni-promo__text {
    align-items: center !important;
    text-align: center !important;
  }
  .grooni-promo .grooni-promo__heading {
    font-size: 20px !important;
    text-align: center !important;
  }
  .grooni-promo .grooni-promo__desc,
  .grooni-promo .grooni-promo__desc p {
    text-align: center !important;
    font-size: 15px !important;
  }
  .grooni-promo a.grooni-promo__btn { width: 100%; max-width: 280px; }
}
/* END_SECTION:custom-promo-banner */

/* START_SECTION:custom-research-comparison (INDEX:32) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

.grooni-research {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  color: var(--grooni-research-text, #F0EDEA);
  background: var(--grooni-research-bg, #00426A);
  padding: var(--grooni-research-pt, 80px) 80px var(--grooni-research-pb, 80px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-research *,
.grooni-research p,
.grooni-research h1,
.grooni-research h2,
.grooni-research h3,
.grooni-research span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-research__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}

/* ---- Header ---- */
.grooni-research__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
}
.grooni-research .grooni-research__eyebrow {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--grooni-research-muted, #778AA1) !important;
  margin: 0 !important;
}
.grooni-research .grooni-research__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--grooni-research-text, #F0EDEA) !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 1000px;
}

/* ---- Compare slider ---- */
.grooni-research__compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.grooni-research__images {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 694 / 357;
  border-radius: var(--grooni-radius-md, 8px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.grooni-research__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.grooni-research__image--before { z-index: 1; }
.grooni-research__image--after  {
  z-index: 2;
  clip-path: inset(0 0 0 var(--grooni-clip, 50%));
}
.grooni-research__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-research__img--placeholder {
  background: linear-gradient(135deg, #2c5878, #1a3a52);
}

/* Badges */
.grooni-research .grooni-research__badge {
  position: absolute;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--grooni-research-text, #F0EDEA);
  color: #191716 !important;
  border-radius: 999px;
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  z-index: 4;
  white-space: nowrap;
  pointer-events: none;
}
.grooni-research__badge--left  { left: 16px; }
.grooni-research__badge--right { right: 16px; }

/* Slider handle */
.grooni-research__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--grooni-pos, 50%);
  width: 2px;
  background: var(--grooni-research-text, #F0EDEA);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.grooni-research__handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grooni-research-text, #F0EDEA);
  border: none;
  cursor: ew-resize;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grooni-research-bg, #00426A);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.grooni-research__handle-button:hover,
.grooni-research__handle-button:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.grooni-research__images.is-dragging { cursor: ew-resize; }
.grooni-research__images.is-dragging .grooni-research__handle-button {
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---- Citation ---- */
.grooni-research .grooni-research__citation {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--grooni-research-muted, #778AA1) !important;
  text-align: center !important;
  max-width: 694px;
  margin: 0 !important;
}
.grooni-research__citation p { margin: 0 !important; }
.grooni-research__citation a {
  color: var(--grooni-research-muted, #778AA1) !important;
  text-decoration: underline;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-research { padding: var(--grooni-research-pt, 56px) 32px var(--grooni-research-pb, 56px); }
  .grooni-research__inner { gap: 40px; }
  .grooni-research .grooni-research__heading { font-size: 32px !important; }
  .grooni-research__images { max-width: 600px; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-research { padding: var(--grooni-research-pt-m, 60px) 16px var(--grooni-research-pb-m, 60px); }
  .grooni-research__inner { gap: 32px; }
  .grooni-research .grooni-research__heading { font-size: 24px !important; }
  .grooni-research .grooni-research__badge {
    font-size: 12px !important;
    padding: 6px 12px;
    top: 12px;
  }
  .grooni-research__badge--left  { left: 12px; }
  .grooni-research__badge--right { right: 12px; }
  .grooni-research__handle-button { width: 38px; height: 38px; }
  .grooni-research__handle-button svg { width: 16px; height: 16px; }
}
/* END_SECTION:custom-research-comparison */

/* START_SECTION:custom-stats-banner (INDEX:33) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

section.grooni-stats,
.grooni-stats {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-stats-bg, #132938) !important;
  padding: var(--grooni-stats-pt, 40px) 80px var(--grooni-stats-pb, 40px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-stats *,
.grooni-stats span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-stats .grooni-stats__inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  max-width: var(--grooni-max-w, 1512px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ---- Item ---- */
.grooni-stats .grooni-stats__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-align: center !important;
}
.grooni-stats .grooni-stats__number {
  font-size: var(--grooni-stats-num-size, 44px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--grooni-stats-number, #F0EDEA) !important;
  text-align: center !important;
}
.grooni-stats .grooni-stats__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--grooni-stats-label, #778AA1) !important;
  text-align: center !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-stats,
  .grooni-stats { padding: var(--grooni-stats-pt, 32px) 32px var(--grooni-stats-pb, 32px) !important; }
  .grooni-stats__inner { gap: 16px !important; }
  .grooni-stats .grooni-stats__number { font-size: 36px !important; }
}

/* ---- Mobile: 4-row layout (each stat on its own row, default) ---- */
@media (max-width: 640px) {
  section.grooni-stats,
  .grooni-stats { padding: var(--grooni-stats-pt-m, 32px) 16px var(--grooni-stats-pb-m, 32px) !important; }

  .grooni-stats--mobile-4row .grooni-stats__inner {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .grooni-stats--mobile-4row .grooni-stats__item { width: 100% !important; }

  /* 2x2 grid mobile */
  .grooni-stats--mobile-2x2 .grooni-stats__inner {
    flex-wrap: wrap !important;
    gap: 24px 12px !important;
  }
  .grooni-stats--mobile-2x2 .grooni-stats__item {
    flex: 1 1 calc(50% - 6px) !important;
  }

  /* Single row (still 4 across) */
  .grooni-stats--mobile-row .grooni-stats__inner { gap: 8px !important; }
  .grooni-stats--mobile-row .grooni-stats__item { gap: 6px !important; }
  .grooni-stats--mobile-row .grooni-stats__label { font-size: 9px !important; }

  .grooni-stats .grooni-stats__number {
    font-size: var(--grooni-stats-num-size-m, 32px) !important;
  }
  .grooni-stats--mobile-row .grooni-stats__number { font-size: 22px !important; }
}
/* END_SECTION:custom-stats-banner */

/* START_SECTION:custom-tech-features (INDEX:34) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

.grooni-tech {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: #F8F7F5;
  padding: var(--grooni-tech-pt, 80px) 80px var(--grooni-tech-pb, 80px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-tech *,
.grooni-tech p,
.grooni-tech h1,
.grooni-tech h2,
.grooni-tech h3,
.grooni-tech h4,
.grooni-tech span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-tech__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
}

/* ---- Header (outside, dark) ---- */
.grooni-tech__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  width: 100%;
}
.grooni-tech .grooni-tech__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #727E74 !important;
  margin: 0 !important;
}
.grooni-tech .grooni-tech__heading {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #191716 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ---- Body layout ---- */
.grooni-tech__body {
  display: grid;
  grid-template-columns: 624fr 836fr;
  gap: 52px;
  align-items: stretch;
}

/* ---- Featured (left, BLUE with CREAM text) ---- */
.grooni-tech__featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 64px;
  gap: 24px;
  background: #00426A;
  border-radius: 8px;
}
.grooni-tech .grooni-tech__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 2px solid #F0EDEA;
  border-radius: 999px;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #F0EDEA !important;
  white-space: nowrap;
}
.grooni-tech .grooni-tech__featured-title {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  text-align: center !important;
  color: #F0EDEA !important;
  margin: 0 !important;
  max-width: 496px;
}
.grooni-tech .grooni-tech__featured-desc,
.grooni-tech .grooni-tech__featured-desc p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #F0EDEA !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 496px;
}

/* ---- Feature grid (right, light bg with dark text) ---- */
.grooni-tech__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 24px;
}
.grooni-tech__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 16px;
  border-radius: 8px;
}
.grooni-tech__icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grooni-tech__icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.grooni-tech__icon--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
  border-radius: 8px;
}
.grooni-tech .grooni-tech__caps {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #727E74 !important;
  margin: 0 !important;
}
.grooni-tech__card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.grooni-tech__separator {
  display: block;
  width: 48px;
  height: 1px;
  background: #D1CAC7;
}
.grooni-tech .grooni-tech__title {
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-tech .grooni-tech__desc {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  margin: 0 !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-tech { padding: var(--grooni-tech-pt, 56px) 32px var(--grooni-tech-pb, 56px); }
  .grooni-tech__inner { gap: 32px; }
  .grooni-tech__body { grid-template-columns: 1fr; gap: 32px; }
  .grooni-tech__featured { padding: 36px 32px; }
  .grooni-tech .grooni-tech__featured-title { font-size: 32px !important; }
  .grooni-tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grooni-tech .grooni-tech__heading { font-size: 24px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-tech { padding: var(--grooni-tech-pt-m, 56px) 16px var(--grooni-tech-pb-m, 56px); }
  .grooni-tech__inner { gap: 28px; }
  .grooni-tech__featured { padding: 32px 24px; gap: 20px; }
  .grooni-tech .grooni-tech__featured-title { font-size: 26px !important; }
  .grooni-tech__grid { grid-template-columns: 1fr; column-gap: 16px; row-gap: 24px; }
  .grooni-tech .grooni-tech__heading { font-size: 22px !important; }
  .grooni-tech .grooni-tech__title { font-size: 19px !important; }

  /* Center feature cards on mobile */
  .grooni-tech__card {
    align-items: center;
    text-align: center;
    padding: 16px 24px;
  }
  .grooni-tech__card-head { align-items: center; }
  .grooni-tech .grooni-tech__caps,
  .grooni-tech .grooni-tech__title,
  .grooni-tech .grooni-tech__desc {
    text-align: center !important;
  }
}
/* END_SECTION:custom-tech-features */

/* START_SECTION:custom-trust-badges (INDEX:35) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

section.grooni-trust,
.grooni-trust {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-trust-bg, #F0EDEA) !important;
  padding: var(--grooni-trust-pt, 20px) 80px var(--grooni-trust-pb, 20px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-trust *,
.grooni-trust span,
.grooni-trust a {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-trust .grooni-trust__inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  max-width: var(--grooni-max-w, 1512px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ---- Item ---- */
.grooni-trust .grooni-trust__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}
a.grooni-trust__item { transition: opacity 0.2s ease; }
a.grooni-trust__item:hover { opacity: 0.8; }

/* ---- Icon ---- */
.grooni-trust__icon {
  width: var(--grooni-trust-icon-size, 60px);
  height: var(--grooni-trust-icon-size, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grooni-trust-icon, #727E74);
}
.grooni-trust__icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.grooni-trust__icon-placeholder {
  display: block;
  width: 60%;
  height: 60%;
  background: currentColor;
  opacity: 0.2;
  border-radius: 8px;
}

/* ---- Label ---- */
.grooni-trust .grooni-trust__label {
  font-size: var(--grooni-trust-label-size, 13px) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--grooni-trust-label, #434343) !important;
  text-align: center !important;
  white-space: nowrap;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  section.grooni-trust,
  .grooni-trust { padding: var(--grooni-trust-pt, 20px) 32px var(--grooni-trust-pb, 20px) !important; }
  .grooni-trust__icon {
    width: calc(var(--grooni-trust-icon-size, 60px) * 0.85);
    height: calc(var(--grooni-trust-icon-size, 60px) * 0.85);
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  section.grooni-trust,
  .grooni-trust { padding: var(--grooni-trust-pt-m, 20px) 16px var(--grooni-trust-pb-m, 20px) !important; }

  /* 2-rows layout (default): wraps into 2x2 grid */
  .grooni-trust--mobile-2rows .grooni-trust__inner {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .grooni-trust--mobile-2rows .grooni-trust__item {
    flex: 1 1 calc(50% - 8px) !important;
  }
  .grooni-trust--mobile-2rows .grooni-trust__icon {
    width: 44px;
    height: 44px;
  }
  .grooni-trust--mobile-2rows .grooni-trust__label {
    font-size: var(--grooni-trust-label-size-m, 11px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
  }

  /* 1-row layout: all badges side by side */
  .grooni-trust--mobile-1row .grooni-trust__inner {
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .grooni-trust--mobile-1row .grooni-trust__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .grooni-trust--mobile-1row .grooni-trust__icon {
    width: 32px;
    height: 32px;
  }
  .grooni-trust--mobile-1row .grooni-trust__label {
    font-size: calc(var(--grooni-trust-label-size-m, 11px) - 2px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
}
/* END_SECTION:custom-trust-badges */

/* START_SECTION:custom-video-feature (INDEX:36) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

.grooni-vf {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-vf-bg, #FFFFFF);
  padding: var(--grooni-vf-pt, 80px) 80px var(--grooni-vf-pb, 80px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-vf *,
.grooni-vf p,
.grooni-vf h1,
.grooni-vf h2,
.grooni-vf h3,
.grooni-vf span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-vf__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 16px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
  align-items: center;
}
/* Default: video left */
.grooni-vf__media   { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.grooni-vf__heading { grid-column: 2; grid-row: 1; align-self: end; }
.grooni-vf__content { grid-column: 2; grid-row: 2; align-self: start; }

/* Video right: swap columns */
.grooni-vf--video-right .grooni-vf__media   { grid-column: 2; }
.grooni-vf--video-right .grooni-vf__heading { grid-column: 1; }
.grooni-vf--video-right .grooni-vf__content { grid-column: 1; }

/* ---- Media ---- */
.grooni-vf__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #4C4340;
  cursor: pointer;
}
.grooni-vf__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(76, 67, 64, 0.35);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.grooni-vf__media.is-playing::before { opacity: 0; }
.grooni-vf__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-vf__poster--placeholder {
  background: linear-gradient(135deg, #2c5878, #1a3a52);
}
.grooni-vf__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.grooni-vf__play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(240, 237, 234, 0.5);
  color: #191716;
  transition: background 0.2s ease, transform 0.2s ease;
}
.grooni-vf__media:hover .grooni-vf__play-circle {
  background: rgba(240, 237, 234, 0.85);
  transform: scale(1.05);
}
.grooni-vf__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
  display: none;
}
.grooni-vf__player--html5 { object-fit: cover; background: #4C4340; }
.grooni-vf__media.is-playing { cursor: default; }
.grooni-vf__media.is-playing .grooni-vf__poster,
.grooni-vf__media.is-playing .grooni-vf__play { display: none; }
.grooni-vf__media.is-playing .grooni-vf__player { display: block; z-index: 3; }

/* ---- Content ---- */
.grooni-vf__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.grooni-vf .grooni-vf__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
  margin: 0 !important;
}
.grooni-vf .grooni-vf__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-vf .grooni-vf__desc,
.grooni-vf .grooni-vf__desc p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #191716 !important;
  margin: 0 0 12px !important;
}
.grooni-vf .grooni-vf__desc p:last-child { margin-bottom: 0 !important; }
.grooni-vf .grooni-vf__desc a {
  color: #00426A !important;
  text-decoration: underline;
}
.grooni-vf__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: #00426A;
  color: #F0EDEA !important;
  border-radius: 4px;
  text-decoration: none;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease;
  margin-top: 8px;
}
.grooni-vf__cta:hover { background: #003355; }

/* ---- Tablet & mobile: stack heading → media → content ---- */
@media (max-width: 990px) {
  .grooni-vf { padding: var(--grooni-vf-pt, 56px) 32px var(--grooni-vf-pb, 56px); }
  .grooni-vf__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 24px;
  }
  /* Heading row 1, media row 2, content row 3 — works for both default and video-right */
  .grooni-vf__heading,
  .grooni-vf--video-right .grooni-vf__heading {
    grid-column: 1;
    grid-row: 1;
    align-self: auto;
  }
  .grooni-vf__media,
  .grooni-vf--video-right .grooni-vf__media {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
  }
  .grooni-vf__content,
  .grooni-vf--video-right .grooni-vf__content {
    grid-column: 1;
    grid-row: 3;
    align-self: auto;
  }
  .grooni-vf .grooni-vf__heading { font-size: 28px !important; }
}

/* ---- Mobile (smaller padding + typography) ---- */
@media (max-width: 640px) {
  .grooni-vf { padding: var(--grooni-vf-pt-m, 48px) 16px var(--grooni-vf-pb-m, 48px); }
  .grooni-vf__inner { row-gap: 20px; }
  .grooni-vf .grooni-vf__heading { font-size: 24px !important; }
  .grooni-vf__play-circle { width: 64px; height: 64px; }
  .grooni-vf__play-circle svg { width: 22px; height: 22px; }
}
/* END_SECTION:custom-video-feature */

/* START_SECTION:custom-video-testimonials (INDEX:37) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:wght@400;500;600;700&display=swap');

.grooni-testi {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  color: var(--grooni-text);
  padding: var(--grooni-testi-pt, 80px) 80px var(--grooni-testi-pb, 80px);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-testi *,
.grooni-testi p,
.grooni-testi h1,
.grooni-testi h2,
.grooni-testi h3,
.grooni-testi span {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grooni-testi .grooni-testi-card__title {
  font-family: 'Literata', Georgia, serif !important;
}
.grooni-testi__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  max-width: var(--grooni-max-w);
  margin: 0 auto;
}

/* ---- Header ---- */
.grooni-testi__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 0 80px;
  width: 100%;
}
.grooni-testi .grooni-testi__eyebrow {
  font-family: var(--grooni-font-sans) !important;
  font-size: var(--grooni-fs-caps-s) !important;
  font-weight: 700 !important;
  line-height: var(--grooni-lh-tight) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--grooni-caps) !important;
  margin: 0 !important;
}
.grooni-testi .grooni-testi__heading {
  font-family: var(--grooni-font-sans) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: var(--grooni-lh-tight) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--grooni-text) !important;
  margin: 0 !important;
}
.grooni-testi .grooni-testi__subheading {
  font-family: var(--grooni-font-sans) !important;
  font-size: var(--grooni-fs-text-m) !important;
  font-weight: 400 !important;
  line-height: var(--grooni-lh-body) !important;
  color: var(--grooni-text) !important;
  margin: 0 !important;
  max-width: 720px;
}

/* ---- Grid ---- */
.grooni-testi__carousel {
  position: relative;
  width: 100%;
}
.grooni-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.grooni-testi__grid--1 { grid-template-columns: minmax(0, 460px); justify-content: center; }
.grooni-testi__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin: 0 auto; }
.grooni-testi__nav { display: none; }

/* ---- Card ---- */
.grooni-testi-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  min-width: 0;
}
.grooni-testi-card__media {
  position: relative;
  aspect-ratio: 440 / 255;
  border-radius: var(--grooni-radius-md);
  overflow: hidden;
  background: #4C4340;
  cursor: pointer;
}
.grooni-testi-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(76, 67, 64, 0.51);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.grooni-testi-card__media.is-playing::before { opacity: 0; }
.grooni-testi-card__poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.grooni-testi-card__poster--empty {
  background: #ddd6d2;
}
.grooni-testi-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.grooni-testi-card__play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(240, 237, 234, 0.5);
  color: var(--grooni-text);
  transition: background 0.2s ease, transform 0.2s ease;
}
.grooni-testi-card__media:hover .grooni-testi-card__play-circle {
  background: rgba(240, 237, 234, 0.85);
  transform: scale(1.05);
}
.grooni-testi-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #4C4340;
  z-index: 0;
  display: none;
}
.grooni-testi-card__media.is-playing { cursor: default; }
.grooni-testi-card__media.is-playing .grooni-testi-card__poster,
.grooni-testi-card__media.is-playing .grooni-testi-card__play { display: none; }
.grooni-testi-card__media.is-playing .grooni-testi-card__video { display: block; z-index: 3; }

/* ---- Card content ---- */
.grooni-testi-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: 8px;
}
.grooni-testi-card__stars {
  display: inline-flex;
  align-items: center;
  color: var(--grooni-primary);
  margin-bottom: 4px;
}
.grooni-testi-card__star { display: block; }
.grooni-testi-card__star:not(.is-filled) { color: var(--grooni-border); }
.grooni-testi .grooni-testi-card__title {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: var(--grooni-lh-tight) !important;
  color: var(--grooni-text) !important;
  margin: 0 !important;
}
.grooni-testi .grooni-testi-card__quote {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: var(--grooni-lh-body) !important;
  color: var(--grooni-text-strong) !important;
  margin: 0 !important;
}
.grooni-testi-card__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.grooni-testi-card__verified { color: var(--grooni-primary); flex: 0 0 16px; }
.grooni-testi .grooni-testi-card__author-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: var(--grooni-lh-body) !important;
  color: #383838 !important;
}

/* ---- Tablet ---- */
@media (max-width: 990px) {
  .grooni-testi { padding: var(--grooni-testi-pt, 56px) 32px var(--grooni-testi-pb, 56px); }
  .grooni-testi__inner { gap: 40px; }
  .grooni-testi__head { padding: 0; }
  .grooni-testi__grid,
  .grooni-testi__grid--1,
  .grooni-testi__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grooni-testi { padding: var(--grooni-testi-pt-m, 40px) 0 var(--grooni-testi-pb-m, 40px); }
  .grooni-testi__inner { gap: 32px; }
  .grooni-testi__head { padding: 0 16px; }
  .grooni-testi__heading { font-size: 22px; }

  /* Centered single-card carousel */
  .grooni-testi__grid,
  .grooni-testi__grid--1,
  .grooni-testi__grid--2 {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 0;
    margin: 0;
    max-width: none;
  }
  .grooni-testi__grid::-webkit-scrollbar,
  .grooni-testi__grid--1::-webkit-scrollbar,
  .grooni-testi__grid--2::-webkit-scrollbar { display: none; }

  .grooni-testi-card {
    flex: 0 0 100vw;
    box-sizing: border-box;
    padding: 0 32px;
    scroll-snap-align: center;
  }

  .grooni-testi-card__media { aspect-ratio: 1 / 1; }
  .grooni-testi-card__play-circle { width: 60px; height: 60px; }
  .grooni-testi-card__play-circle svg { width: 22px; height: 22px; }
  .grooni-testi-card__content {
    padding: 16px 4px 0;
    align-items: center;
    text-align: center;
  }
  .grooni-testi-card__author { justify-content: center; }
  .grooni-testi .grooni-testi-card__title,
  .grooni-testi .grooni-testi-card__quote,
  .grooni-testi .grooni-testi-card__author-name {
    text-align: center !important;
  }

  /* Minimal nav arrows */
  .grooni-testi__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc((100vw - 64px) / 2);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .grooni-testi__nav svg { width: 22px; height: 22px; }
  .grooni-testi__nav:hover { transform: translateY(-50%) scale(1.1); }
  .grooni-testi__nav--prev { left: 40px; }
  .grooni-testi__nav--next { right: 40px; }
  .grooni-testi__nav:disabled { opacity: 0; pointer-events: none; }
}
/* END_SECTION:custom-video-testimonials */

/* START_SECTION:product-guides-accordion (INDEX:280) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&display=swap');

section.grooni-pillars,
.grooni-pillars {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
  background: var(--grooni-pillars-bg, #FFFFFF) !important;
  padding: var(--grooni-pillars-pt, 80px) 80px var(--grooni-pillars-pb, 80px) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.grooni-pillars *,
.grooni-pillars span,
.grooni-pillars p,
.grooni-pillars a,
.grooni-pillars button {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif !important;
}
.grooni-pillars__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: var(--grooni-max-w, 1512px);
  margin: 0 auto;
  width: 100%;
}

/* ── Header ── */
.grooni-pillars__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.grooni-pillars .grooni-pillars__eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
}
.grooni-pillars .grooni-pillars__heading {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: #191716 !important;
  margin: 0 !important;
  text-align: center !important;
  text-transform: none !important;
}
.grooni-pillars .grooni-pillars__sub {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #434343 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Empty state */
.grooni-pillars__empty {
  padding: 40px 24px;
  border: 1px dashed rgba(25, 23, 22, 0.15);
  border-radius: 12px;
  text-align: center;
  background: var(--grooni-pillars-card-bg, #F8F7F5);
}
.grooni-pillars .grooni-pillars__empty p {
  font-size: 15px !important;
  color: #434343 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── Tab strip ── */
.grooni-pillars__tabs-wrap {
  position: relative;
  width: 100%;
}
.grooni-pillars__tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid rgba(25, 23, 22, 0.08);
  padding-bottom: 0;
}
.grooni-pillars__tab {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 12px 16px 16px !important;
  cursor: pointer !important;
  color: #909090 !important;
  position: relative;
  text-align: center;
  flex: 0 0 auto;
  transition: color 0.2s ease;
}
.grooni-pillars__tab:hover { color: #191716 !important; }
.grooni-pillars__tab.is-active { color: #191716 !important; }
.grooni-pillars__tab.is-active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: #00426A;
  border-radius: 2px;
}
.grooni-pillars__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: currentColor;
}
.grooni-pillars__tab-icon-img,
.grooni-pillars__tab-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  color: currentColor;
}
.grooni-pillars .grooni-pillars__tab-label {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: inherit !important;
  max-width: 120px;
}
.grooni-pillars__tab.is-active .grooni-pillars__tab-label {
  font-weight: 700 !important;
}

/* Tab strip arrows (mobile only) */
.grooni-pillars__tabs-nav { display: none; }

/* ── Panel ── */
.grooni-pillars__panels { width: 100%; }
.grooni-pillars__panel[hidden] { display: none !important; }
.grooni-pillars__panel {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  width: 100%;
  align-items: start;
}
/* Image keeps a fixed aspect ratio (no stretching/zoom-cropping when
   toggles expand) and uses position: sticky to stay visible while the
   user scrolls through the taller right column. */
.grooni-pillars__media {
  position: sticky;
  top: 24px;
  align-self: start;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: #F0EDEA;
}
.grooni-pillars__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grooni-pillars__img--placeholder {
  background: linear-gradient(135deg, #e6e3df, #d4cfca);
  width: 100%;
  height: 100%;
}
/* Floating pillar badge on the image — gives the empty image area
   visual purpose and ties the left column to the right. */
.grooni-pillars__media-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px !important;
  background: rgba(0, 66, 106, 0.92) !important;
  color: #F0EDEA !important;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(6px);
}

/* ── Content zones: header / subs / toggles / callout / cta ─────── */
.grooni-pillars__zone {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.grooni-pillars__zone--header { gap: 14px; }
.grooni-pillars__zone--subs   { gap: 18px; }
.grooni-pillars__zone--toggles { gap: 0; }
.grooni-pillars__zone--callout { gap: 0; }
.grooni-pillars__zone--cta { gap: 0; }
/* Subtle thin divider between zones */
.grooni-pillars__zone + .grooni-pillars__zone {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(25, 23, 22, 0.08);
}
/* Skip the divider before the CTA so the button feels like a continuation
   of the callout, and skip before the callout when it follows toggles
   (toggles already have their own separators) */
.grooni-pillars__zone--cta {
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.grooni-pillars__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.grooni-pillars .grooni-pillars__pillar-num {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
}
.grooni-pillars .grooni-pillars__title {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: #191716 !important;
  margin: 0 !important;
  text-transform: none !important;
}
.grooni-pillars .grooni-pillars__desc {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #434343 !important;
  margin: 0 !important;
}

.grooni-pillars__sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grooni-pillars .grooni-pillars__sub-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00426A !important;
  margin: 0 !important;
}
.grooni-pillars .grooni-pillars__sub-text {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #434343 !important;
  margin: 0 !important;
}

/* Recommended dose callout — shown after the toggles.
   Treated as a distinct "key takeaway" card with a subtle shadow. */
.grooni-pillars__callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--grooni-pillars-card-bg, #F8F7F5);
  border: 1px solid rgba(0, 66, 106, 0.12);
  border-left: 3px solid #00426A;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(25, 23, 22, 0.04);
}
.grooni-pillars .grooni-pillars__callout-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #778AA1 !important;
}
.grooni-pillars .grooni-pillars__callout-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
}
.grooni-pillars .grooni-pillars__callout-text p {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #191716 !important;
  margin: 0 !important;
}
.grooni-pillars .grooni-pillars__callout-text p + p { margin-top: 6px !important; }
.grooni-pillars .grooni-pillars__callout-text ul,
.grooni-pillars .grooni-pillars__callout-text ol {
  margin: 4px 0 0 !important;
  padding-left: 20px !important;
  font-size: 15px;
  font-weight: 500;
  color: #191716;
  line-height: 1.5;
}

/* CTA */
.grooni-pillars a.grooni-pillars__cta,
.grooni-pillars .grooni-pillars__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 16px 32px !important;
  background: #00426A !important;
  color: #F0EDEA !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease, transform 0.15s ease;
}
.grooni-pillars a.grooni-pillars__cta svg {
  transition: transform 0.2s ease;
}
.grooni-pillars a.grooni-pillars__cta:hover {
  background: #003355 !important;
}
.grooni-pillars a.grooni-pillars__cta:hover svg {
  transform: translateX(3px);
}

/* ── Accordion (per-pillar extras) ── */
.grooni-pillars__accordions {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.grooni-pillars__acc {
  border-top: 1px solid rgba(25, 23, 22, 0.08);
}
.grooni-pillars__acc:last-child {
  border-bottom: 1px solid rgba(25, 23, 22, 0.08);
}
.grooni-pillars__acc-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.grooni-pillars__acc-summary::-webkit-details-marker { display: none; }
.grooni-pillars .grooni-pillars__acc-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #191716 !important;
}
.grooni-pillars__acc-icon { color: #191716; }
.grooni-pillars__acc-plus  { display: block; }
.grooni-pillars__acc-minus { display: none; }
.grooni-pillars__acc[open] .grooni-pillars__acc-plus  { display: none; }
.grooni-pillars__acc[open] .grooni-pillars__acc-minus { display: block; }
.grooni-pillars__acc-body {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #434343;
}
.grooni-pillars__acc-body p:first-child { margin-top: 0; }
.grooni-pillars__acc-body p:last-child  { margin-bottom: 0; }

/* ── Tablet ── */
@media (max-width: 990px) {
  section.grooni-pillars,
  .grooni-pillars { padding: var(--grooni-pillars-pt, 56px) 32px var(--grooni-pillars-pb, 56px) !important; }
  .grooni-pillars__inner { gap: 40px !important; }
  .grooni-pillars .grooni-pillars__heading { font-size: 32px !important; }
  .grooni-pillars__panel { gap: 32px !important; }
  .grooni-pillars .grooni-pillars__title { font-size: 28px !important; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  section.grooni-pillars,
  .grooni-pillars { padding: var(--grooni-pillars-pt-m, 56px) 16px var(--grooni-pillars-pb-m, 56px) !important; }
  .grooni-pillars__inner { gap: 28px !important; }
  .grooni-pillars .grooni-pillars__heading { font-size: 26px !important; }
  .grooni-pillars .grooni-pillars__sub { font-size: 15px !important; }

  /* Tab strip becomes horizontal scroll */
  .grooni-pillars__tabs-wrap {
    margin: 0 -16px;
    padding: 0 16px;
  }
  .grooni-pillars__tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 0 1px;
    gap: 4px;
  }
  .grooni-pillars__tabs::-webkit-scrollbar { display: none; }
  .grooni-pillars__tab {
    padding: 8px 12px 12px !important;
    scroll-snap-align: start;
    min-width: 96px;
  }
  .grooni-pillars__tab-icon { width: 36px; height: 36px; }
  .grooni-pillars .grooni-pillars__tab-label { font-size: 13px !important; }
  .grooni-pillars__tab.is-active::after { left: 12px; right: 12px; }

  /* Panel stacks vertically on mobile; image returns to 4:3 and loses
     sticky positioning since it's now above the content. */
  .grooni-pillars__panel {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .grooni-pillars__media {
    aspect-ratio: 4 / 3 !important;
    position: static !important;
    top: auto !important;
  }
  .grooni-pillars .grooni-pillars__title { font-size: 26px !important; }
  .grooni-pillars .grooni-pillars__desc { font-size: 15px !important; }
  .grooni-pillars .grooni-pillars__sub-text { font-size: 15px !important; }
  .grooni-pillars__content { gap: 14px; }
}
/* END_SECTION:product-guides-accordion */