/**
 * Héjakút homepage components.
 *
 * All system values come from theme.json. Component geometry follows the
 * desktop Figma frame and deliberately becomes fluid below 1440px.
 */

.hk-home,
.hk-home > * {
  margin-block: 0;
}

:where(.hk-home > .wp-block-post-content),
:where(.hk-home > .wp-block-post-content > *) {
  margin-block: 0;
}

.hk-home-section {
  margin-block: 0;
  overflow: clip;
  padding-block: var(--wp--preset--spacing--section);
  padding-inline: var(--wp--custom--container--gutter);
  position: relative;
}

.hk-home-section > .alignwide {
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size);
}

.hk-home p {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
}

.hk-needs__grid > *,
.hk-family-grid > *,
.hk-recommendations__grid > *,
.hk-benefits__grid > *,
.hk-testimonials__grid > *,
.hk-rituals__grid > * {
  margin-block: 0 !important;
}

.hk-section-heading {
  gap: var(--wp--preset--spacing--sm);
  margin-block-end: var(--wp--preset--spacing--2-xl);
}

.hk-section-heading > * {
  margin-inline: 0 !important;
  margin-block: 0;
  max-width: none;
  width: 100%;
}

.hk-section-heading > p:not(.hk-eyebrow) {
  max-width: 72rem;
}

.hk-section-heading h2 + p {
  margin-block-start: var(--wp--preset--spacing--sm) !important;
}

.hk-section-heading--row {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.hk-section-heading--row > .wp-block-group {
  flex: 1 1 48rem;
}

.hk-eyebrow {
  display: none;
}

/* Hero */

.hk-home-hero {
  align-items: center;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  display: flex;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 36rem;
  overflow: visible;
  padding-block: clamp(5.5rem, 7vw, 7.5rem) clamp(6rem, 7.5vw, 8rem);
  position: relative;
  z-index: 1;
}

.hk-home-hero::before {
  bottom: -4rem;
  height: min(38rem, 43vw);
  width: min(48rem, 43vw);
}

.hk-home-hero::after {
  bottom: -4.9375rem;
  height: 5rem;
}

.hk-home-hero__inner {
  margin-inline: auto;
  position: relative;
  width: 100%;
  z-index: 3;
}

.hk-home-hero__title {
  color: inherit;
  font-size: var(--wp--preset--font-size--h-1);
  line-height: 1.2;
  margin-block: 0 !important;
  max-width: 76.125rem;
}

.hk-home-hero__line {
  display: inline-block;
}

.hk-home-hero__lead {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  margin-block: var(--wp--preset--spacing--sm) 0 !important;
  max-width: 59.75rem;
}

.hk-home-hero .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--2-xl);
}

.hk-home-hero .wp-block-button__link {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
}

.hk-home-hero .wp-block-button__link {
  align-items: center;
  display: inline-flex;
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--h-5);
  font-weight: 400;
  justify-content: center;
  line-height: 1;
  min-height: 4.1875rem;
  padding-block: 0.375rem 0;
  padding-inline: var(--wp--preset--spacing--lg);
}

.hk-home-hero .wp-block-button__link:hover,
.hk-home-hero .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
}

/* Intro */

.hk-home-intro {
  background: var(--wp--preset--color--white);
  margin-block-start: 4.9375rem;
  overflow: visible;
  padding-block-end: var(--wp--preset--spacing--xl);
  padding-block-start: var(--wp--preset--spacing--xl);
}

.hk-home-intro::before {
  content: none;
}

.hk-home-intro__card {
  align-items: center;
  background: var(--wp--preset--color--surface-mint);
  border-radius: var(--wp--custom--radius--md);
  display: grid;
  gap: var(--wp--preset--spacing--2-xl);
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  overflow: hidden;
  padding-inline-end: var(--wp--preset--spacing--lg);
}

.hk-home-intro__image {
  align-self: stretch;
  margin: 0;
}

.hk-home-intro__image img {
  border-radius: var(--wp--custom--radius--md) 0 0 var(--wp--custom--radius--md);
  display: block;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
  width: 100%;
}

.hk-home .hk-home-intro__copy {
  color: var(--wp--preset--color--foreground);
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  margin: var(--wp--preset--spacing--lg) 0;
  max-width: 40rem;
}

.hk-home .hk-home-intro__copy > * {
  margin: 0;
}

.hk-home .hk-home-intro__lead {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.21;
}

.hk-home .hk-home-intro__copy > p:not(.hk-home-intro__lead) {
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5;
}

/* Needs */

.hk-needs {
  background: var(--wp--preset--color--white);
  margin-block-start: 0;
  padding-block-start: 4.5625rem;
  padding-block-end: var(--wp--preset--spacing--2-xl);
}

.hk-needs__grid {
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 13.75rem 13.75rem 13.75rem;
}

.hk-need-card {
  background: var(--wp--custom--need--digestion);
  border-radius: var(--wp--custom--radius--md);
  min-height: 13.75rem;
  overflow: hidden;
  padding: var(--wp--preset--spacing--lg);
  position: relative;
}

.hk-need-card__link {
  border-radius: inherit;
  inset: 0;
  position: absolute;
  z-index: 3;
}

.hk-need-card:has(.hk-need-card__link) {
  cursor: pointer;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.hk-need-card:has(.hk-need-card__link):hover {
  box-shadow: 0 0.75rem 1.75rem rgb(33 33 52 / 10%);
  transform: translateY(-0.1875rem);
}

.hk-need-card:has(.hk-need-card__link):focus-within {
  outline: 3px solid var(--wp--preset--color--primary-dark);
  outline-offset: 3px;
}

.hk-need-card--featured {
  background-color: var(--wp--custom--need--sleep);
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  grid-row: span 2;
  justify-content: center;
  min-height: 28.5rem;
}

.hk-need-card--featured::after,
.hk-need-card:nth-child(3)::after {
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: "";
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.hk-need-card--featured::after {
  background-image: url("../images/alvas-pihenes-stressz.webp");
  height: 25.875rem;
  width: 27.1875rem;
}

.hk-need-card:nth-child(2) {
  background-color: var(--wp--custom--need--digestion);
  grid-column: 3;
  grid-row: 1;
}

.hk-need-card:nth-child(3) {
  background-color: var(--wp--custom--need--female);
  display: flex;
  flex-direction: column;
  grid-column: 3 / span 2;
  grid-row: 2;
  justify-content: center;
}

.hk-need-card:nth-child(3)::after {
  background-image: url("../images/noi-minoseg-ciklus.webp");
  height: 13.75rem;
  width: 17.6875rem;
}

.hk-need-card:nth-child(4) {
  background-color: var(--wp--custom--need--skin);
  grid-column: 4;
  grid-row: 1;
}

.hk-need-card:nth-child(5) {
  background-color: var(--wp--custom--need--kidney);
  grid-column: 1;
  grid-row: 3;
}

.hk-need-card:nth-child(6) {
  background-color: var(--wp--custom--need--metabolism);
  grid-column: 2;
  grid-row: 3;
}

.hk-need-card:nth-child(7) {
  background-color: var(--wp--custom--need--respiratory);
  grid-column: 3;
  grid-row: 3;
}

.hk-need-card:nth-child(8) {
  background-color: var(--wp--custom--need--masculine);
  grid-column: 4;
  grid-row: 3;
}

.hk-need-card > * {
  margin-block: 0;
  margin-inline: 0 !important;
  position: relative;
  z-index: 1;
}

/* The full-card link must stay above the card copy and illustrations. */
.hk-need-card > .hk-need-card__link {
  inset: 0;
  position: absolute;
  z-index: 3;
}

.hk-need-card > * + * {
  margin-block-start: 0.75rem;
}

.hk-need-card h3 {
  font-size: 1.2rem;
  line-height: 1.1;
}

.hk-need-card p {
  max-width: 29rem;
}

.hk-need-card--featured p {
  max-width: 17.625rem;
}

.hk-need-card--featured > * + * {
  margin-block-start: 0.75rem;
}

.hk-need-card:nth-child(3) p {
  max-width: 24.5625rem;
}

/* Products */

.hk-product-section {
  background: var(--wp--preset--color--surface-mint);
  display: flex;
  flex-direction: column;
}

.hk-product-section--popular {
  background: var(--wp--preset--color--white);
  padding-block-start: var(--wp--preset--spacing--xl);
}

.hk-product-section__heading {
  margin-block-end: var(--wp--preset--spacing--2-xl);
}

.hk-home-section.hk-product-section--starter,
.hk-home-section.hk-product-section--popular {
  padding-block-end: var(--wp--preset--spacing--2-xl);
}

.hk-home-section.hk-product-section--starter {
  padding-block-start: var(--wp--preset--spacing--3-xl);
}

.hk-product-section--starter .hk-product-section__heading {
  margin-block-end: var(--wp--preset--spacing--lg);
}

.hk-product-section__heading h2,
.hk-product-section__heading p {
  margin-inline: 0 !important;
  max-width: 72rem;
}

.hk-product-section__heading h2 {
  margin-block: 0;
}

.hk-product-section__heading h2 + p {
  margin-block: var(--wp--preset--spacing--sm) 0 !important;
}

.hk-product-collection {
  margin-block: 0;
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
}

.hk-product-collection .wc-block-product-template {
  gap: var(--wp--preset--spacing--sm);
}

.hk-product-collection .wc-block-product-template > li {
  min-width: 0;
}

.hk-product-collection .wc-block-product-template > li > .hk-product-card {
  height: 100%;
}

.hk-product-section .hk-product-card__title {
  font-size: var(--wp--preset--font-size--h-4);
}

.hk-product-section .hk-product-card__description {
  flex: none;
  min-height: 0;
}

.hk-product-section .hk-product-card__purchase {
  margin-block-start: var(--wp--preset--spacing--2-xs);
}

.hk-product-section .hk-product-card__button .button {
  font-weight: 600;
  height: 3.5rem;
  min-height: 3.5rem;
  padding-block: 0.125rem 0;
}

.hk-product-section__cta {
  margin-block-start: var(--wp--preset--spacing--2-xl);
}

.hk-product-section--popular .hk-product-section__cta {
  margin-block-start: var(--wp--preset--spacing--lg);
}

.hk-product-section__cta .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

/* Keep the previously inserted starter section close to the updated pattern. */
.hk-product-section .hk-section-heading--row {
  align-items: flex-start;
}

.hk-product-section .hk-section-heading--row .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-weight: 600;
}

/* Backwards-compatible styling for already inserted native product cards. */
.hk-product-collection .wp-block-group.hk-product-card {
  align-items: stretch;
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--md);
  gap: 0;
  height: 100%;
  overflow: hidden;
  padding: 0 0 var(--wp--preset--spacing--lg);
}

.hk-product-collection .wp-block-group.hk-product-card .wc-block-components-product-image,
.hk-product-collection .wp-block-group.hk-product-card .wc-block-components-product-image img {
  aspect-ratio: 469 / 352;
  border-radius: 0;
  object-fit: contain;
  width: 100%;
}

.hk-product-collection .wp-block-group.hk-product-card .wp-block-post-title {
  font-size: var(--wp--preset--font-size--h-4);
  margin: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) 0;
  text-align: center;
}

.hk-product-collection .wp-block-group.hk-product-card .wp-block-post-title a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}

.hk-product-collection .wp-block-group.hk-product-card .wp-block-woocommerce-product-price,
.hk-product-collection .wp-block-group.hk-product-card .wp-block-woocommerce-product-button {
  margin-inline: var(--wp--preset--spacing--lg);
  text-align: center;
}

.hk-product-collection .wp-block-group.hk-product-card .wp-block-woocommerce-product-button {
  margin-block-start: auto;
}

/* Families */

.hk-tea-families {
  background: var(--wp--preset--color--surface-mint);
  color: var(--wp--preset--color--body-text);
  padding-block-start: var(--wp--preset--spacing--section);
}

.hk-tea-families h2,
.hk-tea-families h3 {
  color: var(--wp--preset--color--foreground);
}

.hk-family-grid {
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hk-family-card {
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--md);
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-height: 38.8125rem;
  overflow: hidden;
  padding: 0;
}

.hk-family-card--mother { order: 1; }
.hk-family-card--helpers { order: 2; }
.hk-family-card--roots { order: 3; }
.hk-family-card--moon { order: 4; }
.hk-family-card--sun { order: 5; }

.hk-family-card--mother,
.hk-family-card--helpers {
  grid-column: span 3;
  min-height: 39.625rem;
}

.hk-family-card__image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 0 0 22.375rem;
  margin: 0;
  width: 100%;
}

.hk-family-card--roots .hk-family-card__image { background-image: url("../images/gyokerek-ereje.webp"); }
.hk-family-card--mother .hk-family-card__image { background-image: url("../images/foldanya-ereje.webp"); }
.hk-family-card--moon .hk-family-card__image { background-image: url("../images/hold-ereje.webp"); }
.hk-family-card--sun .hk-family-card__image { background-image: url("../images/nap-ereje.webp"); }
.hk-family-card--helpers .hk-family-card__image { background-image: url("../images/teak-segitoi.webp"); }

.hk-family-card__image img {
  border-radius: 0;
  display: block;
  height: 22.375rem;
  object-fit: cover;
  opacity: 0;
  width: 100%;
}

.hk-family-card__content {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
  text-align: center;
}

.hk-family-card__content > * {
  margin-block: 0 !important;
  margin-inline: 0 !important;
}

.hk-family-card__content > * + * {
  margin-block-start: var(--wp--preset--spacing--sm);
}

.hk-family-card__content h3 + p {
  margin-block-start: 1.25rem !important;
}

.hk-family-card h3 {
  font-size: 1.875rem;
}

.hk-family-card__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs);
  justify-content: center;
  list-style: none;
  margin-block-start: auto !important;
  padding: 12px 0 0 0;
}

.hk-family-card__list li {
  background: var(--wp--preset--color--primary);
  border-radius: 0.375rem;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  line-height: 1.1;
  padding: var(--wp--preset--spacing--xs) 0.75rem;
  text-transform: uppercase;
}

.hk-family-card__list li:has(a) {
  padding: 0;
}

.hk-family-card__list a {
  color: inherit;
  display: block;
  padding: var(--wp--preset--spacing--xs) 0.75rem;
  text-decoration: none;
}

.hk-family-card__list a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hk-family-card__list li:focus-within {
  outline: 2px solid var(--wp--preset--color--foreground);
  outline-offset: 2px;
}

.hk-family-card__list a:focus-visible {
  outline: none;
}

.hk-tea-families > .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--lg);
}

.hk-tea-families .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.hk-family-card--roots .hk-family-card__list li:nth-child(1) { background: var(--wp--custom--product-family--earth); }
.hk-family-card--roots .hk-family-card__list li:nth-child(2) { background: var(--wp--custom--product-family--root-orange); }
.hk-family-card--mother .hk-family-card__list li:nth-child(2) { background: var(--wp--custom--product-family--air-blue); }
.hk-family-card--mother .hk-family-card__list li:nth-child(3) { background: var(--wp--custom--product-family--frost-purple); }
.hk-family-card--mother .hk-family-card__list li:nth-child(4) { background: var(--wp--custom--product-family--bird-orange); }
.hk-family-card--mother .hk-family-card__list li:nth-child(5) { background: var(--wp--custom--product-family--patience-blue); }
.hk-family-card--mother .hk-family-card__list li:nth-child(6) { background: var(--wp--custom--product-family--trust-pink); }
.hk-family-card--mother .hk-family-card__list li:nth-child(7) { background: var(--wp--custom--product-family--wormwood-green); }
.hk-family-card--mother .hk-family-card__list li:nth-child(8) { background: var(--wp--custom--product-family--borokas-blue); }
.hk-family-card--mother .hk-family-card__list li:nth-child(9) { background: var(--wp--custom--product-family--grass-green); }
.hk-family-card--mother .hk-family-card__list li:nth-child(10) { background: var(--wp--custom--product-family--meadow); }
.hk-family-card--moon .hk-family-card__list li:nth-child(1) { background: var(--wp--custom--product-family--rose); }
.hk-family-card--moon .hk-family-card__list li:nth-child(2) { background: var(--wp--custom--product-family--fertility-purple); }
.hk-family-card--moon .hk-family-card__list li:nth-child(3) { background: var(--wp--custom--product-family--quiet-purple); }
.hk-family-card--moon .hk-family-card__list li:nth-child(4) { background: var(--wp--custom--product-family--nest-red); }
.hk-family-card--sun .hk-family-card__list li:nth-child(1) { background: var(--wp--custom--product-family--masculine-orange); }
.hk-family-card--sun .hk-family-card__list li:nth-child(2) { background: var(--wp--custom--product-family--barcogo-brown); }

.hk-dot {
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  height: 0.65rem;
  margin-inline-end: var(--wp--preset--spacing--xs);
  width: 0.65rem;
}

.hk-dot--earth {
  color: var(--wp--custom--product-family--earth);
}

.hk-dot--root {
  color: var(--wp--custom--product-family--root-orange);
}

/* Recommendations */

.hk-recommendations {
  background: var(--wp--preset--color--white);
  margin-block-start: 8.3125rem;
  overflow: visible;
  padding-block-end: var(--wp--preset--spacing--xl);
}

.hk-recommendations::before,
.hk-benefits::before,
.hk-blog::before {
  background-color: var(--wp--preset--color--white);
  background-image: url("../images/home-divider-recommendations.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  height: 8.3125rem;
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  top: -8.3125rem;
}

.hk-recommendations::after {
  background: url("../images/ajanlasok-amik-segitenek-elindulni.png") no-repeat center / contain;
  content: "";
  height: 20.6875rem;
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
  position: absolute;
  right: max(var(--wp--custom--container--gutter), calc((100vw - var(--wp--style--global--wide-size)) / 2));
  top: 0;
  width: 14.375rem;
}

.hk-recommendations__grid {
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hk-recommendation-card {
  background: transparent;
  border-radius: 0;
  min-height: 0;
  padding: 0;
}

.hk-recommendation-card::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--wp--custom--radius--md);
  content: "";
  display: block;
  height: 24.4375rem;
  margin-block-end: 1.25rem;
  width: 100%;
}

.hk-recommendation-card--body::before {
  background-image: url("../images/recommendation-body.webp");
}

.hk-recommendation-card--families::before {
  background-image: url("../images/recommendation-families.webp");
}

.hk-recommendation-card--course::before {
  background-image: url("../images/recommendation-course.webp");
}

.hk-recommendation-card > * {
  margin-inline: 0 !important;
  max-width: none;
}

.hk-recommendation-card h3 {
  font-size: 1.875rem;
  line-height: 1.1;
  margin-block: 0 1.25rem;
}

.hk-recommendation-card p {
  margin-block: 0;
  max-width: none;
}

.hk-recommendations > .wp-block-buttons {
  justify-content: center;
  margin-block-start: var(--wp--preset--spacing--lg);
}

.hk-recommendations .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

/* Selector */

.hk-selector {
  display: none;
}

.hk-selector__shell {
  align-items: center;
  display: grid;
  gap: var(--wp--preset--spacing--2-xl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hk-selector__intro,
.hk-selector__intro h2 {
  color: var(--wp--preset--color--white);
}

.hk-selector__intro .hk-eyebrow {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
}

.hk-selector__preview {
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--2-xl);
}

.hk-selector__preview h3 {
  font-size: var(--wp--preset--font-size--h-4);
  margin-block: 0 var(--wp--preset--spacing--sm);
}

.hk-selector__question + .hk-selector__question {
  border-block-start: 1px solid var(--wp--preset--color--neutral-200);
  margin-block-start: var(--wp--preset--spacing--md);
  padding-block-start: var(--wp--preset--spacing--md);
}

.hk-selector__chips {
  gap: var(--wp--preset--spacing--xs);
}

.hk-selector__chips p {
  border: 1px solid var(--wp--preset--color--neutral-200);
  border-radius: var(--wp--custom--radius--pill);
  margin: 0;
  padding: 0.75rem 1rem;
}

.hk-selector__note {
  color: var(--wp--preset--color--neutral-600);
  font-size: var(--wp--preset--font-size--sm);
}

/* Mantra */

.hk-mantra {
  background: var(--wp--preset--color--white);
  overflow: visible;
  padding-block-end: var(--wp--preset--spacing--xl);
}

.hk-home .hk-stats {
  padding-block-start: var(--wp--preset--spacing--xl);
}

.hk-mantra__card {
  background: var(--wp--preset--color--surface-mint);
  border-radius: var(--wp--custom--radius--md);
  min-height: 24rem;
  overflow: visible;
  padding: var(--wp--preset--spacing--2-xl);
  position: relative;
}

.hk-mantra__card::after {
  background: url("../images/gyengeden-fokozatosan-figyelemmel.webp") no-repeat center / contain;
  content: "";
  height: 31.4375rem;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  mix-blend-mode: multiply;
  right: -4rem;
  top: auto;
  width: 32.6875rem;
}

.hk-mantra__card > * {
  max-width: 52rem;
  position: relative;
  z-index: 1;
}

.hk-mantra__card h2 {
  font-size: var(--wp--preset--font-size--h-2);
  line-height: 1.1;
}

/* Benefits */

.hk-benefits {
  background: var(--wp--preset--color--white);
  margin-block-start: 8.3125rem;
  overflow: visible;
}

.hk-benefits::after {
  background: url("../images/amitol-nyugodtabban-valaszthatsz.webp") no-repeat center / contain;
  content: "";
  height: 36.125rem;
  left: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  top: 20.6875rem;
  width: 15.6875rem;
}

.hk-benefits > * {
  position: relative;
  z-index: 1;
}

.hk-benefits__grid {
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hk-benefit-card {
  background: var(--wp--preset--color--surface-mint);
  border-radius: var(--wp--custom--radius--sm);
  color: var(--wp--preset--color--body-text);
  padding: var(--wp--preset--spacing--lg);
}

.hk-benefit-card p {
  color: var(--wp--preset--color--body-text);
}

.hk-benefit-card h3 {
  color: var(--wp--preset--color--foreground);
}

.hk-benefit-card > * {
  margin-block: 0;
}

.hk-benefit-card > * + * {
  margin-block-start: var(--wp--preset--spacing--xs);
}

.hk-benefit-card h3 {
  font-size: 1.5rem;
  line-height: 1.1;
}

/* Testimonials */

.hk-testimonials {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.hk-testimonials h2 {
  color: inherit;
}

.hk-testimonials .hk-eyebrow {
  padding-inline: 0;
}

.hk-testimonials__grid {
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hk-testimonial {
  background: var(--wp--preset--color--surface-mint);
  border: 0;
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--body-text);
  margin: 0;
  padding: var(--wp--preset--spacing--lg);
}

.hk-testimonial__stars,
.hk-testimonial > p:first-child {
  color: #f39433;
  font-size: var(--wp--preset--font-size--h-5);
  letter-spacing: 0.08em;
  text-align: center;
}

.hk-testimonial cite {
  color: var(--wp--preset--color--foreground);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--h-4);
  font-style: normal;
  font-weight: 700;
}

/* Rituals */

.hk-rituals {
  background: var(--wp--preset--color--white);
}

.hk-rituals__grid {
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hk-ritual-card {
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

.hk-ritual-card > *:not(.wp-block-image) {
  margin-block-start: 0;
  margin-inline: 0 !important;
}

.hk-ritual-card > * + * {
  margin-block-start: var(--wp--preset--spacing--sm) !important;
}

.hk-ritual-card .wp-block-image {
  margin: 0 0 var(--wp--preset--spacing--lg);
}

.hk-ritual-card .wp-block-image img {
  aspect-ratio: 4 / 3;
  border-radius: var(--wp--custom--radius--md);
  display: block;
  object-fit: cover;
  width: 100%;
}

.hk-ritual-card h3 {
  font-size: var(--wp--preset--font-size--h-4);
}

.hk-ritual-card__recommendation {
  color: inherit;
  font-size: var(--wp--preset--font-size--body);
}

.hk-ritual-card__recommendation a {
  color: var(--wp--preset--color--primary-dark);
  font-weight: 600;
  text-underline-offset: 0.15em;
}

.hk-rituals > .wp-block-buttons {
  justify-content: center;
  margin-block-start: var(--wp--preset--spacing--lg);
}

.hk-rituals > .wp-block-buttons .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.hk-rituals > .wp-block-buttons .wp-block-button__link:hover,
.hk-rituals > .wp-block-buttons .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
}

/* FAQ */

.hk-faq {
  background-color: var(--wp--preset--color--surface-mint);
  overflow: hidden;
}

.hk-faq::before {
  background: url("../images/gyik-bg.webp") no-repeat left bottom / contain;
  bottom: var(--wp--preset--spacing--lg);
  content: "";
  height: min(42rem, 52vw);
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.24;
  pointer-events: none;
  position: absolute;
  top: auto;
  width: min(34rem, 42vw);
}

.hk-faq > * {
  position: relative;
  z-index: 1;
}

.hk-faq__grid {
  align-items: start;
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hk-faq__item {
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--sm);
  margin-block: 0;
  padding: 1.5rem var(--wp--preset--spacing--lg);
}

/* Progressive reveal: hidden states are enabled only after JavaScript starts. */
.hk-reveal-ready .hk-reveal {
  opacity: 0;
  transform: translateY(1.125rem);
  transition:
    opacity 640ms ease,
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hk-reveal-ready .hk-reveal.hk-reveal--delay-1 {
  transition-delay: 70ms;
}

.hk-reveal-ready .hk-reveal.hk-reveal--delay-2 {
  transition-delay: 140ms;
}

.hk-reveal-ready .hk-reveal.hk-reveal--delay-3 {
  transition-delay: 210ms;
}

.hk-reveal-ready .hk-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.hk-faq__item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 700;
  gap: var(--wp--preset--spacing--sm);
  justify-content: space-between;
  line-height: 1.1;
  list-style: none;
}

.hk-faq__item summary::-webkit-details-marker {
  display: none;
}

.hk-faq__item summary::after {
  background-color: var(--wp--preset--color--primary);
  background-image: url("../images/faq-plus.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  border-radius: 50%;
  content: "";
  display: block;
  flex: 0 0 2.75rem;
  height: 2.75rem;
  width: 2.75rem;
}

.hk-faq__item[open] summary::after {
  background-image: url("../images/faq-minus.svg");
}

.hk-faq__item > p {
  margin-block-end: 0;
}

/* Blog */

.hk-blog {
  background: var(--wp--preset--color--white);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: 8.3125rem;
  overflow: visible;
}

/* Keep the CTA below the posts on pages saved with the older pattern. */
.hk-blog > .hk-section-heading--row {
  display: contents;
}

.hk-blog > .hk-section-heading--row > .wp-block-group {
  grid-row: 1;
  margin-inline: auto !important;
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
}

.hk-blog > .hk-blog__query {
  grid-row: 2;
}

.hk-blog > .hk-section-heading--row > .wp-block-buttons,
.hk-blog > .hk-blog__cta {
  grid-row: 3;
  justify-content: center;
  margin-block-start: var(--wp--preset--spacing--lg);
}

.hk-blog__grid {
  gap: var(--wp--preset--spacing--sm);
}

.hk-blog-card {
  height: 100%;
}

.hk-blog-card .wp-block-post-featured-image {
  margin: 0 0 var(--wp--preset--spacing--lg);
}

.hk-blog-card .wp-block-post-featured-image img {
  border-radius: var(--wp--custom--radius--md);
  object-fit: cover;
}

.hk-blog-card .wp-block-post-date {
  color: var(--wp--preset--color--neutral-600);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.05em;
}

.hk-blog-card .wp-block-post-title {
  font-size: var(--wp--preset--font-size--h-4);
}

.hk-blog-card .wp-block-post-title a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}

/* Closing CTA */

.hk-home-cta {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--body-text);
  min-height: 0;
  overflow: visible;
  text-align: left;
}

.hk-home-cta__inner {
  align-items: flex-start;
  background: var(--wp--preset--color--surface-mint);
  border-radius: var(--wp--custom--radius--md);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 25.0625rem;
  overflow: visible;
  padding: var(--wp--preset--spacing--2-xl);
  position: relative;
}

.hk-home-cta__inner::after {
  background: url("../images/cta-bg.webp") no-repeat center / contain;
  content: "";
  height: 31.4375rem;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  mix-blend-mode: multiply;
  right: -4rem;
  top: auto;
  width: 32.6875rem;
}

.hk-home-cta__inner > * {
  margin-inline: 0 !important;
  max-width: 52rem;
  position: relative;
  z-index: 1;
}

.hk-home-cta h2 {
  color: var(--wp--preset--color--foreground);
}

.hk-home-cta .wp-block-buttons {
  justify-content: flex-start;
  margin-block-start: var(--wp--preset--spacing--2-xl);
}

.hk-home-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.hk-home-cta .is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

.hk-home-cta .wp-block-button .wp-block-button__link:hover,
.hk-home-cta .wp-block-button .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
}

@media (max-width: 64rem) {
  .hk-product-collection .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hk-needs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .hk-needs__grid > .hk-need-card {
    grid-column: auto;
    grid-row: auto;
  }

  .hk-needs__grid > .hk-need-card--featured,
  .hk-needs__grid > .hk-need-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .hk-family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hk-family-card,
  .hk-family-card--helpers,
  .hk-family-card--roots,
  .hk-family-card--moon,
  .hk-family-card--sun {
    grid-column: auto;
  }

  .hk-selector__shell {
    grid-template-columns: 1fr;
  }

  .hk-selector__preview {
    max-width: none;
  }

  .hk-faq__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.9375rem) {
  /*
   * Defer layout and paint for the rich grids that are still below the mobile
   * viewport. The intrinsic block size reserves scroll space; `auto` keeps the
   * measured size after a section has been visited.
   */
  .hk-home-section:not(.hk-home-hero):not(.hk-home-intro) {
    contain-intrinsic-block-size: auto 62.5rem;
    content-visibility: auto;
  }

  .hk-reveal-ready .hk-reveal {
    transition-delay: 0ms;
    transition-duration: 420ms;
  }

  .hk-home-section {
    padding-block: var(--wp--preset--spacing--xl);
  }

  .hk-section-heading {
    margin-block-end: var(--wp--preset--spacing--lg);
  }

  .hk-section-heading--row {
    align-items: flex-start;
    flex-direction: column;
  }

  .hk-product-collection .wc-block-product-template {
    grid-template-columns: 1fr;
  }

  .hk-product-section .hk-product-card__title,
  .hk-product-collection .wp-block-group.hk-product-card .wp-block-post-title {
    font-size: var(--wp--preset--font-size--h-4);
  }

  .hk-product-section .hk-product-card__description {
    min-height: 0;
  }

  .hk-product-section .hk-product-card__purchase {
    margin-block-start: 0;
  }

  .hk-product-section .hk-product-card__button .button {
    font-size: var(--wp--preset--font-size--body);
    height: 3rem;
    min-height: 3rem;
  }

  .hk-testimonial {
    padding: var(--wp--preset--spacing--sm);
  }

  .hk-testimonial__stars {
    margin-block: 0 var(--wp--preset--spacing--xs);
  }

  .hk-testimonial cite {
    font-size: var(--wp--preset--font-size--h-5);
  }

  .hk-product-section__cta,
  .hk-product-section__cta .wp-block-button,
  .hk-product-section__cta .wp-block-button__link {
    width: 100%;
  }

  .hk-home-hero {
    min-height: 25.2rem;
    padding-block: 4rem 5.2rem;
  }

  .hk-home-hero::before {
    bottom: -2.5rem;
    height: 14rem;
    width: min(24rem, 88vw);
  }

  .hk-home-hero::after {
    bottom: -3.5rem;
    height: 3.5rem;
  }

  .hk-home-hero__title {
    line-height: 1.18;
  }

  .hk-home-hero .wp-block-buttons,
  .hk-home-hero .wp-block-button,
  .hk-home-hero .wp-block-button__link {
    width: 100%;
  }

  .hk-home-intro__card,
  .hk-needs__grid,
  .hk-recommendations__grid,
  .hk-testimonials__grid,
  .hk-rituals__grid,
  .hk-benefits__grid {
    grid-template-columns: 1fr;
  }

  .hk-needs__grid > .hk-need-card--featured,
  .hk-needs__grid > .hk-need-card:nth-child(3) {
    grid-column: auto;
  }

  .hk-home-intro {
    margin-block-start: var(--wp--preset--spacing--lg);
    padding-block-start: var(--wp--preset--spacing--md);
    padding-block-end: var(--wp--preset--spacing--lg);
    margin-block-start: var(--wp--preset--spacing--xl);
  }

  .hk-recommendations,
  .hk-benefits,
  .hk-blog {
    margin-block-start: 4rem;
  }

  .hk-recommendations::before,
  .hk-benefits::before,
  .hk-blog::before {
    height: 4rem;
    top: -4rem;
  }

  .hk-home-intro__card {
    gap: 0;
    padding: 0;
  }

  .hk-home-intro__image img {
    border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
    min-height: 20rem;
  }

  .hk-home .hk-home-intro__copy {
    padding: var(--wp--preset--spacing--md);
    margin: 0;
  }

  .hk-needs,
  .hk-tea-families,
  .hk-mantra,
  .hk-faq,
  .hk-home-cta {
    padding-block-start: var(--wp--preset--spacing--lg);
  }

  .hk-home .hk-stats {
    padding-block: var(--wp--preset--spacing--lg);
  }

  .hk-family-card__content {
    padding: var(--wp--preset--spacing--md);
    margin-top:0;
  }

  .hk-family-card__content h3 + p {
    margin-block-start: var(--wp--preset--spacing--xs) !important;
  }

  .hk-family-card__list {
    column-gap: var(--wp--preset--spacing--2-xs);
    row-gap: var(--wp--preset--spacing--xs);
    padding-block-start: var(--wp--preset--spacing--xs);
  }

  .hk-family-card__list li {
    font-size: var(--wp--preset--font-size--xs);
    padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  }

  .hk-family-card__list li:has(a) {
    padding: 0;
  }

  .hk-family-card__list a {
    padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  }

  .hk-tea-families {
    padding-block-end: var(--wp--preset--spacing--lg);
  }

  .hk-recommendations,
  .hk-benefits,
  .hk-blog {
    margin-block-start: var(--wp--preset--spacing--xl);
  }

  .hk-recommendations::before,
  .hk-benefits::before,
  .hk-blog::before {
    height: var(--wp--preset--spacing--xl);
    top: calc(-1 * var(--wp--preset--spacing--xl));
  }

  .hk-faq__item {
    padding: var(--wp--preset--spacing--sm);
  }

  .hk-home-cta {
    padding-block-end: var(--wp--preset--spacing--lg);
  }

  .hk-need-card--featured,
  .hk-family-card--mother,
  .hk-family-card--roots,
  .hk-family-card--helpers {
    grid-column: auto;
  }

  .hk-need-card {
    min-height:auto;
    padding: var(--wp--preset--spacing--sm);
  }

  .hk-need-card--featured::after,
  .hk-need-card:nth-child(3)::after,
  .hk-recommendations::after,
  .hk-benefits::after,
  .hk-mantra__card::after,
  .hk-faq::before,
  .hk-home-cta__inner::after {
    content: none;
  }

  .hk-recommendation-card::before {
    height: min(24.4375rem, 82vw);
  }

  .hk-family-grid {
    grid-template-columns: 1fr;
  }

  .hk-family-card {
    min-height: 0;
  }

  .hk-family-card__image {
    flex-basis: min(22.375rem, 76vw);
  }

  .hk-family-card__image img {
    height: auto;
    min-height: 16rem;
  }

  .hk-selector__shell {
    gap: var(--wp--preset--spacing--lg);
  }

  .hk-selector__preview,
  .hk-mantra__card,
  .hk-home-cta__inner {
    padding: var(--wp--preset--spacing--md);
  }

  .hk-mantra__card {
    min-height: 0;
    padding-block-end: var(--wp--preset--spacing--md);
  }

  .hk-blog__grid {
    grid-template-columns: 1fr;
  }

  .hk-home-cta__inner {
    min-height: 0;
    overflow: hidden;
    padding-block-end: var(--wp--preset--spacing--lg);
  }

  .hk-home-cta .wp-block-buttons {
    align-items: stretch;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs);
  }

  .hk-home-cta .wp-block-button,
  .hk-home-cta .wp-block-button__link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-need-card:has(.hk-need-card__link),
  .hk-reveal-ready .hk-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 30rem) {
  .hk-selector__chips p {
    width: 100%;
  }
}