/** Shopify CDN: Minification failed

Line 3343:7 Expected identifier but found whitespace
Line 3343:8 Unexpected "has("

**/
/* ==========================================================================
   TIIAN V2 — Section styles
   ========================================================================== */

/* Announcement bar
   -------------------------------------------------------------------------- */
.announcement-bar {
  background: rgba(var(--color-accent-rgb), 0.08);
  border-bottom: 1px solid var(--color-border-soft);
}
.announcement-bar__inner {
  display: flex;
  justify-content: center;
  gap: 4rem;
}
.announcement-bar__message {
  margin: 0;
  padding: 0.9rem 0;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-foreground);
}
.announcement-bar__message a { color: inherit; }
.announcement-bar__message a:hover { color: var(--color-accent); }

/* Header
   -------------------------------------------------------------------------- */
/* Fontos: nincs backdrop-filter a wrapperen, mert az containing blockot
   csinálna a fixed pozíciójú fiókoknak (mobil menü, kereső, kosár). */
.header-wrapper {
  display: block;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border-soft);
}
.header-wrapper--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
  min-height: 7.2rem;
}

/* A fejléc teljes szélességű, csak oldalsó gutter marad */
.header.page-width {
  max-width: none;
  padding-left: 3rem;
  padding-right: 3rem;
}
@media screen and (max-width: 749px) {
  .header.page-width {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

.header__logo-link { display: inline-flex; align-items: center; }
.header__logo-text {
  font-family: var(--font-heading-family);
  font-size: 2.6rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-foreground);
}

.header__nav { justify-self: center; }
.header__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__menu-item { position: relative; }
.header__menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-foreground);
}
.header__menu-link:hover,
.header__menu-link--active { color: var(--color-accent); }
.header__menu-link--active { box-shadow: inset 0 -1px 0 var(--color-accent); }
.header__menu-link .icon--chevron { width: 1.2rem; height: 1.2rem; }

.header__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 22rem;
  padding: 1rem 0;
  margin: 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-short) ease, transform var(--duration-short) ease, visibility var(--duration-short);
  z-index: 50;
}
.header__menu-item:hover .header__submenu,
.header__menu-item:focus-within .header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.header__submenu-link {
  display: block;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.header__submenu-link:hover { color: var(--color-accent); }

.header__icons {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: end;
}
.header__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  background: transparent;
  border: none;
  color: var(--color-foreground);
  cursor: pointer;
  list-style: none;
}
.header__icon::-webkit-details-marker { display: none; }
.header__icon:hover { color: var(--color-accent); }
.header__icon--menu { display: none; }

.header__cart-count {
  position: absolute;
  top: 0.4rem;
  right: 0.2rem;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: 999px;
}
.header__cart-count.hidden { display: none; }

@media screen and (max-width: 989px) {
  .header { grid-template-columns: auto 1fr auto; }
  .header__nav { display: none; }
  .header__icon--menu { display: flex; }
  .header__logo { justify-self: center; }
}

/* Mobilon a fejléc 3rem-es gapjei és a 0.42em betűközű logó együtt 400px-et
   igényelnek — 400px alatti kijelzőn ez vízszintes túlcsordulást okozott az
   egész dokumentumon. A logó oszlopa `minmax(0, …)`, hogy zsugorodni tudjon. */
@media screen and (max-width: 749px) {
  .header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
  }
  .header__logo {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .header__logo-link { max-width: 100%; }
  .header__logo-text {
    font-size: 2rem;
    letter-spacing: 0.28em;
    white-space: nowrap;
  }
  .header__logo img {
    max-width: 100%;
    height: auto;
  }
}

/* Search modal */
details-modal details[open] .search-modal { display: block; }
.search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
}
.search-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 7, 0.8);
  backdrop-filter: blur(4px);
}
.search-modal__content {
  position: relative;
  margin-top: 12vh;
}
.search-modal__form {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.search-modal__input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 1.8rem !important;
  padding: 1.2rem 0.4rem !important;
}

/* Menu drawer */
.menu-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.menu-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0;
  font-family: var(--font-heading-family);
  font-size: 1.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-foreground);
  border-bottom: 1px solid var(--color-border-soft);
  cursor: pointer;
  list-style: none;
}
.menu-drawer__link::-webkit-details-marker { display: none; }
.menu-drawer__link:hover { color: var(--color-accent); }
.menu-drawer__details[open] > .menu-drawer__link .icon--chevron { transform: rotate(180deg); }
.menu-drawer__link .icon--chevron { width: 1.4rem; height: 1.4rem; transition: transform var(--duration-default) ease; }
.menu-drawer__sublist {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 1.2rem 1.6rem;
}
.menu-drawer__sublink {
  display: block;
  padding: 0.9rem 0;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.menu-drawer__sublink:hover { color: var(--color-accent); }
.menu-drawer__footer {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.menu-drawer__account {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Localization */
.localization {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.localization__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.localization__icon { width: 1.6rem; height: 1.6rem; color: var(--color-muted); }
.localization__select {
  width: auto;
  padding: 0.7rem 3rem 0.7rem 1.2rem;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  background-color: transparent;
  border-color: var(--color-border-soft);
}

/* Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--color-background);
  border-top: 1px solid var(--color-border-soft);
  padding: 6rem 0 3rem;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(24rem, 1fr) 2.5fr;
  gap: 6rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--color-border-soft);
}
.footer__brand-text {
  margin-top: 1.6rem;
  font-size: 1.3rem;
  color: var(--color-muted);
  max-width: 30rem;
}
.footer__menus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 3rem;
}
.footer__heading {
  color: var(--color-foreground);
  margin-bottom: 1.8rem;
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer__link {
  font-size: 1.3rem;
  color: var(--color-muted);
}
.footer__link:hover { color: var(--color-accent); }
.footer__text { font-size: 1.3rem; color: var(--color-muted); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 3rem;
}
.footer__copyright {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.footer__bottom-right {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.footer__payment {
  display: flex;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__payment .payment-icon { opacity: 0.7; }

.social-icons {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.social-icons a { color: var(--color-muted); }
.social-icons a:hover { color: var(--color-accent); }
.social-icons .icon { width: 1.8rem; height: 1.8rem; }

@media screen and (max-width: 989px) {
  .footer__top { grid-template-columns: 1fr; gap: 4rem; }
}

/* Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero--small { min-height: 32rem; }
.hero--medium { min-height: 48rem; }
.hero--large { min-height: 62rem; }
.hero--full { min-height: calc(100vh - 10rem); }

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(var(--color-accent-rgb), 0.12), transparent 65%),
    linear-gradient(160deg, var(--color-surface) 0%, var(--color-background) 100%);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--color-background-rgb), calc(var(--overlay-opacity, 0.4) + 0.25)) 0%,
    rgba(var(--color-background-rgb), var(--overlay-opacity, 0.4)) 55%,
    rgba(var(--color-background-rgb), calc(var(--overlay-opacity, 0.4) * 0.5)) 100%
  );
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
/* Függőleges igazítás — a `.hero` flex konténer, a tartalom az egyetlen eleme.
   Régi szekcióknál a beállítás üres, ilyenkor egyik osztály sem talál, és marad
   a `.hero` alap `align-items: center` értéke. */
.hero--valign-top { align-items: flex-start; }
.hero--valign-center { align-items: center; }
.hero--valign-bottom { align-items: flex-end; }

/* A szélességek px-egységben jönnek a beállításból, rem-re váltva (x 0.1rem), így
   a Tipográfia méretskálájával együtt skálázódnak, mint eddig. Alap: 560 / 420. */
.hero__box { max-width: calc(var(--hero-box-width, 560) * 0.1rem); }
.hero--align-center .hero__box { margin: 0 auto; text-align: center; }
.hero--align-right .hero__box { margin-left: auto; text-align: right; }
.hero__heading { margin-bottom: 2rem; }
.hero__text {
  color: var(--color-foreground);
  font-size: 1.6rem;
  max-width: calc(var(--hero-text-width, 420) * 0.1rem);
}
.hero--align-center .hero__text { margin-inline: auto; }
.hero--align-right .hero__text { margin-inline: auto 0; }
.hero__buttons {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.hero--align-center .hero__buttons { justify-content: center; }
.hero--align-right .hero__buttons { justify-content: flex-end; }

/* Szöveg igazítása a tartalmi dobozon belül, a doboz helyzetétől függetlenül.
   A gombok követik, amíg nincs saját gomb-igazításuk — ezért ezek a szabályok a
   gomb-felülírások ELŐTT állnak (azonos specificitásnál a későbbi nyer). */
.hero__box.hero__box--text-left { text-align: left; }
.hero__box.hero__box--text-center { text-align: center; }
.hero__box.hero__box--text-right { text-align: right; }
.hero__box--text-left .hero__text { margin-inline: 0; }
.hero__box--text-center .hero__text { margin-inline: auto; }
.hero__box--text-right .hero__text { margin-inline: auto 0; }
.hero__box--text-left .hero__buttons { justify-content: flex-start; }
.hero__box--text-center .hero__buttons { justify-content: center; }
.hero__box--text-right .hero__buttons { justify-content: flex-end; }

/* Gombok igazítása a tartalomtól függetlenül. Két osztály kell a szelektorba,
   hogy verje a fenti `.hero--align-* .hero__buttons` szabályokat. */
.hero__buttons.hero__buttons--left { justify-content: flex-start; }
.hero__buttons.hero__buttons--center { justify-content: center; }
.hero__buttons.hero__buttons--right { justify-content: flex-end; }

/* Category cards
   -------------------------------------------------------------------------- */
.category-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  min-height: 30rem;
  display: flex;
  align-items: flex-end;
  transition: border-color var(--duration-default) ease, transform var(--duration-default) ease;
}
.category-card:hover {
  border-color: var(--color-border);
  transform: translateY(-4px);
}
.category-card__media,
.category-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-card__media .placeholder-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.category-card__media img { transition: transform 700ms ease; }
.category-card:hover .category-card__media img { transform: scale(1.05); }
.category-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(var(--color-background-rgb), 0.92) 100%);
}
.category-card__content {
  position: relative;
  z-index: 1;
  padding: 2.4rem;
  width: 100%;
}
.category-card__title { margin-bottom: 0.6rem; }
.category-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.category-card__text {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-muted);
  max-width: 26rem;
}
.category-card__arrow {
  position: absolute;
  right: 2.4rem;
  bottom: 2.6rem;
  width: 2rem;
  height: 2rem;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}
.category-card:hover .category-card__arrow { opacity: 1; transform: translateX(0); }

/* Trust badges
   -------------------------------------------------------------------------- */
.trust-badges { padding: calc(3.2rem * var(--section-pt-scale, 1)) 0 calc(3.2rem * var(--section-pb-scale, 1)); }
.trust-badges--bordered {
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.trust-badges__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-badges__list--3 { grid-template-columns: repeat(3, 1fr); }
.trust-badges__list--2 { grid-template-columns: repeat(2, 1fr); }
.trust-badges__item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.trust-badges__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
}
.trust-badges__title {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.trust-badges__text {
  margin: 0.2rem 0 0;
  font-size: 1.2rem;
  color: var(--color-muted);
}
@media screen and (max-width: 989px) {
  .trust-badges__list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 599px) {
  .trust-badges__list { grid-template-columns: 1fr; }
}

/* Program overview
   -------------------------------------------------------------------------- */
.program-overview {
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(var(--color-accent-rgb), 0.06), transparent 60%),
    var(--color-surface);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.program-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.program-overview__heading { margin-bottom: 2rem; }
.program-overview__text { margin-bottom: 3rem; }
.program-overview__visual { position: relative; }
.program-overview__visual img { border-radius: var(--radius-card); }
.program-overview__pillars {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.program-overview__pillar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: rgba(var(--color-background-rgb), 0.5);
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.program-overview__pillar-icon {
  display: flex;
  color: var(--color-accent);
}
.program-overview__pillar-icon .icon { width: 1.6rem; height: 1.6rem; }

/* Kattintható pillér: a fedőréteg az egész pirulát kattinthatóvá teszi, nem
   csak a feliratot. A `position: relative` csak a linkes pilléren kell. */
.program-overview__pillar--link {
  position: relative;
  transition: border-color var(--duration-short) ease, color var(--duration-short) ease;
}
.program-overview__pillar--link:hover {
  border-color: var(--color-border);
  color: var(--color-accent);
}
.program-overview__pillar-label a {
  color: inherit;
  border-bottom: 0;
}
.program-overview__pillar-label a::after {
  content: '';
  position: absolute;
  inset: 0;
}
@media screen and (max-width: 989px) {
  .program-overview__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* Pillar list (program page)
   -------------------------------------------------------------------------- */
.pillar-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.pillar-list__item,
.plaque__item {
  display: grid;
  grid-template-columns: 16rem 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--duration-default) ease;
}
.pillar-list__item:hover,
.plaque__item:hover { border-color: var(--color-border); }
.pillar-list__media img,
.plaque__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pillar-list__item:not(:has(.pillar-list__media)) { grid-template-columns: 1fr; }
.pillar-list__content,
.plaque__content { padding: 2.4rem; }
.pillar-list__head,
.plaque__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.pillar-list__number,
.plaque__number {
  font-family: var(--font-heading-family);
  font-size: 2.6rem;
  color: rgba(var(--color-foreground-rgb), 0.35);
  letter-spacing: 0.1em;
}
.pillar-list__icon,
.plaque__icon { color: var(--color-accent); }
.pillar-list__title,
.plaque__title { margin-bottom: 0.8rem; }
.pillar-list__text,
.plaque__text { font-size: 1.3rem; margin-bottom: 1.4rem; }
@media screen and (max-width: 989px) {
  .pillar-list__grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 599px) {
  .pillar-list__item { grid-template-columns: 1fr; }
  .pillar-list__media img { aspect-ratio: 16/9; }
}

/* Plakett
   -------------------------------------------------------------------------- */
/* A kártya megjelenése a pillér listáéval közös (lásd a fenti, csoportosított
   szelektorokat) — itt csak a saját rács, a képsáv szélessége és a kép oldala
   különbözik. */
.plaque__grid {
  display: grid;
  grid-template-columns: repeat(var(--plaque-columns, 2), minmax(0, 1fr));
  gap: 2rem;
}
.plaque__item {
  grid-template-columns: calc(var(--plaque-media-width, 160) * 0.1rem) minmax(0, 1fr);
}
.plaque__item--no-media { grid-template-columns: minmax(0, 1fr); }
/* Kép jobbra: a sávok sorrendje fordul, a tartalom kerül az első oszlopba. */
.plaque__item--media-right {
  grid-template-columns: minmax(0, 1fr) calc(var(--plaque-media-width, 160) * 0.1rem);
}
.plaque__item--media-right .plaque__media { order: 2; }

/* A kártya tartalmának igazítása. A cím és a szöveg blokk, a hivatkozás
   inline-flex — mindháromra elég a `text-align`. */
.plaque__content.align-center { text-align: center; }
.plaque__content.align-right { text-align: right; }

/* A sorszám + ikon sor flex: itt `justify-content` igazít. A „Szélekre" az
   eredeti elrendezés (sorszám balra, ikon jobbra). */
.plaque__head--edges { justify-content: space-between; }
.plaque__head--left { justify-content: flex-start; gap: 1.2rem; }
.plaque__head--center { justify-content: center; gap: 1.2rem; }
.plaque__head--right { justify-content: flex-end; gap: 1.2rem; }

@media screen and (max-width: 989px) {
  .plaque__grid { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 599px) {
  .plaque__item,
  .plaque__item--media-right { grid-template-columns: minmax(0, 1fr); }
  .plaque__item--media-right .plaque__media { order: 0; }
  .plaque__media img { aspect-ratio: 16/9; }
}

/* Quote banner
   -------------------------------------------------------------------------- */
.quote-banner {
  position: relative;
  padding: calc(8rem * var(--section-pt-scale, 1)) 0 calc(8rem * var(--section-pb-scale, 1));
  overflow: hidden;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(var(--color-accent-rgb), 0.07), transparent 70%),
    var(--color-surface);
}
.quote-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-background-rgb), 0.75);
}
.quote-banner__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 86rem;
}
.quote-banner__text { margin-bottom: 2rem; }
.quote-banner__line {
  display: block;
  width: 6rem;
  height: 1px;
  margin: 2.4rem auto 0;
  background: var(--color-accent);
  box-shadow: var(--glow-accent);
}

/* Newsletter
   -------------------------------------------------------------------------- */
.newsletter {
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}
.newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  flex-wrap: wrap;
}
.newsletter__intro {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.newsletter__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
}
.newsletter__icon .icon { width: 2.4rem; height: 2.4rem; }
.newsletter__heading { margin-bottom: 0.4rem; }
.newsletter__text { margin: 0; font-size: 1.3rem; max-width: 40rem; }
.newsletter__form { flex: 1 1 40rem; max-width: 52rem; }
.newsletter__field {
  display: flex;
  gap: 1rem;
}
.newsletter__field input { flex: 1; }
@media screen and (max-width: 749px) {
  .newsletter__field { flex-direction: column; }
}

/* Multicolumn & numbered steps
   -------------------------------------------------------------------------- */
.multicolumn__item--boxed {
  padding: 2.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  height: 100%;
}
.multicolumn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.8rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
}
.multicolumn__media { margin-bottom: 1.8rem; border-radius: var(--radius-card); overflow: hidden; }
.multicolumn__title { margin-bottom: 1rem; }
.multicolumn__text { font-size: 1.35rem; margin-bottom: 1.4rem; }

.numbered-steps__item {
  padding: 2.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  height: 100%;
}
.numbered-steps__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.numbered-steps__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
}
.numbered-steps__number {
  font-family: var(--font-heading-family);
  font-size: 2rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.numbered-steps__title { margin-bottom: 0.8rem; }
.numbered-steps__text { margin: 0; font-size: 1.3rem; }
.numbered-steps__footnote {
  margin-top: 2.4rem;
  font-size: 1.2rem;
  text-align: center;
}

/* Mobilon a lépések mindig egymás alatt — a `grid--mobile-1-col` csak 599px-től
   vált egy oszlopra, a lépéskártyák viszont már ennél szélesebben is szűkek. */
@media screen and (max-width: 749px) {
  .numbered-steps .grid {
    grid-template-columns: 1fr;
  }
}

/* Ingredients
   -------------------------------------------------------------------------- */
.ingredients__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: start;
}
.ingredients__table {
  width: 100%;
  margin: 2.4rem 0;
  border-collapse: collapse;
}
.ingredients__table th,
.ingredients__table td {
  padding: 1.2rem 0.4rem;
  border-bottom: 1px dashed var(--color-border-soft);
  font-size: 1.35rem;
  font-weight: 400;
  text-align: left;
}
.ingredients__table td { text-align: right; color: var(--color-muted); }
.ingredients__footnote { font-size: 1.2rem; margin-bottom: 2rem; }
.ingredients__highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.ingredients__highlight-media {
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 1.4rem;
  aspect-ratio: 1;
  background: var(--color-surface);
}
.ingredients__highlight-media img { width: 100%; height: 100%; object-fit: cover; }
.ingredients__highlight-title { margin-bottom: 0.4rem; color: var(--color-foreground); }
.ingredients__highlight-text { margin: 0; font-size: 1.25rem; }
@media screen and (max-width: 989px) {
  .ingredients__grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media screen and (max-width: 599px) {
  .ingredients__highlights { grid-template-columns: 1fr; }
}

/* Image with text
   -------------------------------------------------------------------------- */
.image-with-text__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.image-with-text__grid--reversed .image-with-text__media { order: 2; }
.image-with-text__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}
.image-with-text__media img { width: 100%; }
.image-with-text__content .button { margin-top: 1.6rem; margin-right: 1.2rem; }
.image-with-text--bleed .image-with-text__media { border-radius: 0; border: none; }
@media screen and (max-width: 989px) {
  .image-with-text__grid { grid-template-columns: 1fr; gap: 3rem; }
  .image-with-text__grid--reversed .image-with-text__media { order: 0; }
}

/* Rich text
   -------------------------------------------------------------------------- */
.rich-text__inner { max-width: 72rem; }
.rich-text--align-center .rich-text__inner { margin: 0 auto; text-align: center; }
.rich-text .button { margin-top: 2rem; }

/* Featured / related products
   -------------------------------------------------------------------------- */
.featured-product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.featured-product__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: var(--color-product-media);
}
.featured-product__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.featured-product__content .price { margin-top: 2rem; }
.featured-product__actions { flex-wrap: wrap; }
.featured-product__form { display: contents; }
.featured-product__form form { display: flex; }
.featured-product__form .product-form__error { flex-basis: 100%; margin: 0; }
/* A kép oldala az A nézetben. A DOM-ban a kép marad elöl — mobilon ez a
   természetes sorrend —, asztalon csak az `order` cseréli meg a két hasábot. */
.featured-product__grid--media-right .featured-product__media { order: 2; }

@media screen and (max-width: 989px) {
  .featured-product__grid { grid-template-columns: 1fr; gap: 3rem; }
  /* Egy oszlopban az asztali oldalcsere nem érvényes — itt a mobil sorrend dönt. */
  .featured-product__grid--media-right .featured-product__media { order: 0; }
  .featured-product__grid--media-mobile-bottom .featured-product__media { order: 2; }
}

/* Kép nélkül nem marad fél hasábnyi üres hely a szöveg mellett. */
.featured-product__grid--no-media { grid-template-columns: minmax(0, 1fr); }

/* Kiemelt termék — B nézet
   -------------------------------------------------------------------------- */
/* Az idézet sáv teljes szélességű, elhalványuló hátterű megjelenése, de
   termékadatokkal és kosárba gombbal. A `.section` helyett saját belső
   térközt kap, ugyanúgy, ahogy a `.quote-banner`. */
.featured-product--centered {
  position: relative;
  /* Rács, hogy a megadott magasságon belül az `align-content` függőlegesen
     középre tegye a tartalmat. Magasság nélkül ennek nincs hatása, ezért az
     „Automatikus” beállítás ugyanazt adja, mint a korábbi blokk-elrendezés.
     Az explicit `minmax(0, 1fr)` oszlop kötelező: a tartalom `.page-width`
     automatikus oldalmargói kikapcsolnák a nyújtást, és a sáv a szöveg
     max-content szélességére zsugorodna. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: var(--fp-min-height, auto);
  padding: calc(8rem * var(--section-pt-scale, 1)) 0 calc(8rem * var(--section-pb-scale, 1));
  overflow: hidden;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(var(--color-accent-rgb), 0.07), transparent 70%),
    var(--color-surface);
}
.featured-product__background img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-product__background-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-background-rgb), 0.75);
}
.featured-product__centered {
  position: relative;
  z-index: 1;
  /* A `width: 100%` azért kell, mert rács-elemként az automatikus oldalmargók
     kikapcsolnák a nyújtást, és a doboz a szöveg max-content szélességére
     zsugorodna. A `max-width` így is korlátozza, a margó pedig középre teszi. */
  width: 100%;
  text-align: center;
  max-width: calc(var(--fp-content-width, 860) * 0.1rem);
}
.featured-product__centered-media {
  max-width: calc(var(--fp-media-width, 420) * 0.1rem);
  margin: 0 auto 3.2rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: var(--color-product-media);
}
.featured-product__centered-media img,
.featured-product__centered-media .placeholder-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* A jelvénysor a kártyákon abszolút pozíciójú — itt sorban, középen áll. */
.featured-product__centered .badge-list {
  position: static;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.featured-product__centered-title { margin-bottom: 1.2rem; }
.featured-product__centered .price,
.featured-product__centered .featured-product__actions { justify-content: center; }
.featured-product__centered .price { margin-top: 2rem; }
.featured-product__centered .featured-product__form form { justify-content: center; }
.featured-product__centered-line {
  display: block;
  width: 6rem;
  height: 1px;
  margin: 3.2rem auto 0;
  background: var(--color-accent);
  box-shadow: var(--glow-accent);
}

/* Blog
   -------------------------------------------------------------------------- */
.card__content--article { text-align: left; align-items: flex-start; }
.article-card__meta { margin-bottom: 0.2rem; }
.article-card__footer {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  font-size: 1.2rem;
}

.main-blog__hero {
  max-width: 64rem;
  margin-bottom: 4rem;
}
.main-blog__featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 4rem;
}
.main-blog__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-blog__featured-content {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
}
.main-blog__featured-content .article-card__footer { margin-top: 1.2rem; }
.main-blog__tags {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 3.2rem;
  border-bottom: 1px solid var(--color-border-soft);
  padding-bottom: 1.6rem;
}
.main-blog__tag {
  padding: 0.7rem 1.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid transparent;
  border-radius: 999px;
}
.main-blog__tag:hover { color: var(--color-accent); }
.main-blog__tag.is-active {
  color: var(--color-accent);
  border-color: var(--color-border);
}
@media screen and (max-width: 989px) {
  .main-blog__featured { grid-template-columns: 1fr; }
  .main-blog__featured-content { padding: 2.4rem; }
}

.main-article__container { max-width: 80rem; margin: 0 auto; }
.main-article__meta {
  display: flex;
  gap: 1rem;
  font-size: 1.3rem;
  margin-bottom: 3rem;
}
.main-article__image {
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 3.2rem;
}
.main-article__share {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-border-soft);
}
.main-article__back { margin-top: 2.4rem; }
.main-article__comment {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.main-article__comment-form { margin-top: 4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.main-article__comment-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
@media screen and (max-width: 599px) {
  .main-article__comment-fields { grid-template-columns: 1fr; }
}

/* Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs [aria-current] { color: var(--color-foreground); }
/* A morzsamenü flex-sor, ezért a `text-align` nem mozdítja — külön igazítjuk. */
.breadcrumbs.align-left { justify-content: flex-start; }
.breadcrumbs.align-center { justify-content: center; }
.breadcrumbs.align-right { justify-content: flex-end; }

/* Main product
   -------------------------------------------------------------------------- */
.main-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 6rem;
  align-items: start;
}
.main-product__gallery {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.6rem;
  position: sticky;
  top: 10rem;
}
.main-product__thumbnails {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main-product__thumbnail {
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: calc(var(--radius-card) / 2);
  overflow: hidden;
  background: var(--color-product-media);
  cursor: pointer;
  transition: border-color var(--duration-short) ease;
}
.main-product__thumbnail img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.main-product__thumbnail:hover,
.main-product__thumbnail.is-active { border-color: var(--color-accent); }
.main-product__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: var(--color-product-media);
}
.main-product__media-item { display: none; }
.main-product__media-item.is-active { display: block; }
.main-product__media-item img { width: 100%; height: auto; }
.main-product__gallery:not(:has(.main-product__thumbnails)) { grid-template-columns: 1fr; }

.main-product__info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main-product__title { margin: 0; }
.main-product__subtitle { margin: -0.8rem 0 0; font-size: 1.4rem; }
.main-product__tax-note { margin: 0.6rem 0 0; font-size: 1.2rem; }
.main-product__availability { margin-top: 1rem; }
.main-product__stock {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.main-product__stock .icon { width: 1.4rem; height: 1.4rem; }
.main-product__stock--in { color: var(--color-accent); }
.main-product__stock--out { color: var(--color-muted); }

.main-product__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main-product__benefits li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
}
.main-product__benefits .icon {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  color: var(--color-accent);
}

.main-product__option { border: none; margin: 0; padding: 0; }
.main-product__option-label {
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1rem;
  padding: 0;
}
.main-product__option-values {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.main-product__option-values input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.main-product__option-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
  margin: 0;
  padding: 1rem 1.8rem;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-foreground);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: border-color var(--duration-short) ease, color var(--duration-short) ease, background var(--duration-short) ease;
}
.main-product__option-value:hover { border-color: var(--color-border); }
.main-product__option-values input[type='radio']:checked + .main-product__option-value {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.07);
}
.main-product__option-values input[type='radio']:focus-visible + .main-product__option-value {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.main-product__quantity label { margin-bottom: 1rem; }
.main-product__buy { display: flex; flex-direction: column; gap: 1.2rem; }
.main-product__buy-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: 1.3rem;
}
.main-product__buy-note .icon { width: 1.8rem; height: 1.8rem; }
.shopify-payment-button__button--unbranded {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-border) !important;
}
.shopify-payment-button__button--unbranded:hover {
  border-color: var(--color-accent) !important;
  background: rgba(var(--color-accent-rgb), 0.06) !important;
}

.main-product__trust {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 2.4rem 0 0;
  border-top: 1px solid var(--color-border-soft);
}
.main-product__trust li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.main-product__trust .icon { width: 1.8rem; height: 1.8rem; color: var(--color-accent); }

.main-product__share {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.3rem;
}

@media screen and (max-width: 989px) {
  .main-product__grid { grid-template-columns: 1fr; gap: 3rem; }
  .main-product__gallery { position: static; grid-template-columns: 1fr; }
  .main-product__thumbnails { order: 2; flex-direction: row; overflow-x: auto; }
  .main-product__thumbnail { flex: 0 0 7rem; }
  .main-product__trust { flex-direction: column; }
}

/* Collection
   -------------------------------------------------------------------------- */
.collection-banner {
  display: grid;
  gap: 4rem;
  margin-bottom: 4rem;
}
.collection-banner--with-image {
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}
.collection-banner__title { margin-bottom: 1.2rem; }
.collection-banner__description { max-width: 48rem; color: var(--color-muted); }

/* Kollekció leírás: összecsukva `-webkit-line-clamp` vágja le, a natív "…"-tal.
   A `data-collapsed` attribútumot a <read-more> elem kezeli — JS nélkül a
   teljes leírás látszik, a gomb pedig rejtve marad. */
/* A <read-more> egyedi elem alapból inline — blokká tesszük, hogy az igazítás
   és a benne lévő gomb elrendezése kiszámítható legyen. */
.collection-banner__description-wrapper { display: block; }
.collection-banner__description-wrapper .collection-banner__description { max-width: none; }

.collection-banner__description-wrapper[data-collapsed] .collection-banner__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-lines, 3);
  line-clamp: var(--read-more-lines, 3);
  overflow: hidden;
}
.collection-banner__description-wrapper[data-collapsed] .collection-banner__description > :last-child {
  margin-bottom: 0;
}

.collection-banner__read-more {
  margin-top: 1.2rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body-family);
  cursor: pointer;
}
.collection-banner__read-more[hidden] { display: none; }
/* A `.text-link` alap hoverje oldalra tolja az ikont — itt forgatás kell. */
.collection-banner__read-more:hover .icon,
.collection-banner__read-more .icon { transform: none; }
.collection-banner__read-more[aria-expanded='true'] .icon,
.collection-banner__read-more[aria-expanded='true']:hover .icon { transform: rotate(180deg); }
.collection-banner__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}
@media screen and (max-width: 989px) {
  .collection-banner--with-image { grid-template-columns: 1fr; gap: 2rem; }
}

.collection-toolbar {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.6rem 0;
  margin-bottom: 3rem;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.collection-toolbar__count { margin: 0; margin-right: auto; font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; }
.collection-toolbar__sort select { min-width: 20rem; }

.collection-toolbar__filters-wrapper { position: relative; }
.collection-toolbar__filters-wrapper summary { list-style: none; }
.collection-toolbar__filters-wrapper summary::-webkit-details-marker { display: none; }
.collection-filters {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 60;
  width: min(36rem, 90vw);
  padding: 2.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.collection-filters__label {
  display: block;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.collection-filters__values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: 22rem;
  overflow-y: auto;
}
.collection-filters__value {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.35rem;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--color-foreground);
  cursor: pointer;
  margin: 0;
}
.collection-filters__value.is-disabled { opacity: 0.4; cursor: not-allowed; }
.collection-filters__price {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.collection-filters__actions {
  display: flex;
  gap: 1rem;
  padding-top: 0.6rem;
}
.collection-empty { padding: 6rem 0; }

/* Cart page
   -------------------------------------------------------------------------- */
.main-cart__header {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  margin-bottom: 3rem;
}
.main-cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38rem;
  gap: 4rem;
  align-items: start;
}
.main-cart__table {
  width: 100%;
  border-collapse: collapse;
}
.main-cart__table thead th {
  padding: 0 0 1.4rem;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
}
.main-cart__col-total { text-align: right !important; }
.main-cart__row td {
  padding: 2rem 1rem 2rem 0;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}
.main-cart__media { width: 12rem; }
.main-cart__media img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--product-image-ratio, 1 / 1);
  object-fit: cover;
  border-radius: calc(var(--radius-card) / 2);
  border: 1px solid var(--color-border-soft);
  background: var(--color-product-media);
}
.main-cart__title { display: block; margin-bottom: 0.4rem; }
.main-cart__details p { margin: 0.2rem 0; font-size: 1.25rem; }
.main-cart__unit-price { font-size: 1.35rem; color: var(--color-foreground); }
.main-cart__quantity { width: 20rem; }
.main-cart__qty-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.main-cart__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: none;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-button);
  padding: 0;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--duration-short) ease, border-color var(--duration-short) ease;
}
.main-cart__remove .icon { width: 1.7rem; height: 1.7rem; }
.main-cart__remove:hover {
  color: var(--color-error);
  border-color: rgba(229, 106, 106, 0.4);
}
.main-cart__line-total {
  text-align: right;
  font-size: 1.5rem;
  white-space: nowrap;
}
.main-cart__below {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.4rem;
  flex-wrap: wrap;
}
.main-cart__note { flex: 1 1 32rem; max-width: 48rem; }
.main-cart__note textarea { min-height: 10rem; }
.main-cart__note .accordion__summary { gap: 1rem; justify-content: flex-start; }
.main-cart__note .accordion__summary .icon:last-child { margin-left: auto; }

.main-cart__summary { display: flex; flex-direction: column; gap: 2rem; }
.main-cart__summary-box {
  padding: 2.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
}
.main-cart__summary-box h2 { margin-bottom: 2rem; }
.main-cart__summary-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.8rem 0;
  font-size: 1.4rem;
}
.main-cart__summary-row--discount { color: var(--color-accent); }
.main-cart__summary-row--total {
  margin-top: 1.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.main-cart__total { font-size: 2.2rem; }
.main-cart__tax-note { font-size: 1.2rem; margin: 0.6rem 0 2rem; }
.main-cart__reassurance {
  list-style: none;
  margin: 0;
  padding: 2.4rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.main-cart__reassurance li {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}
.main-cart__reassurance .icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--color-accent);
}
.main-cart__reassurance strong {
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.main-cart__reassurance p { margin: 0.3rem 0 0; font-size: 1.25rem; }
.main-cart__empty { padding: 8rem 0; }
.main-cart__empty .button { margin-top: 2rem; }

@media screen and (max-width: 989px) {
  .main-cart__grid { grid-template-columns: 1fr; }
  .main-cart__table thead { display: none; }
  .main-cart__row { display: grid; grid-template-columns: 10rem 1fr; }
  .main-cart__row td { border: none; padding: 0.6rem 0; }
  .main-cart__media { grid-row: span 3; width: 10rem; padding-right: 1.6rem !important; }
  .main-cart__line-total { text-align: left; }
  .main-cart__row { border-bottom: 1px solid var(--color-border-soft); padding: 1.6rem 0; }
}

/* Cart drawer
   -------------------------------------------------------------------------- */
.cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.cart-drawer__item {
  position: relative;
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 1.6rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border-soft);
}
.cart-drawer__item-media img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--product-image-ratio, 1 / 1);
  object-fit: cover;
  border-radius: calc(var(--radius-card) / 2);
  border: 1px solid var(--color-border-soft);
  background: var(--color-product-media);
}
.cart-drawer__item-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cart-drawer__item-title {
  display: block;
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.cart-drawer__item-variant { margin: 0; font-size: 1.2rem; }
.cart-drawer__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: auto;
  padding-top: 1.2rem;
}
.cart-drawer__item quantity-input .quantity__button { width: 3.2rem; }
.cart-drawer__item quantity-input .quantity__input { width: 3.6rem; }
.cart-drawer__item-price { font-size: 1.4rem; white-space: nowrap; }
.cart-drawer__item-remove {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: 0.4rem;
  color: var(--color-muted);
  cursor: pointer;
}
.cart-drawer__item-remove:hover { color: var(--color-error); }
.cart-drawer__item-remove .icon { width: 1.6rem; height: 1.6rem; }

.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
}
.cart-drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cart-drawer__subtotal-price { font-size: 2rem; letter-spacing: 0.08em; }
.cart-drawer__tax-note { margin: 0.6rem 0 1.6rem; font-size: 1.2rem; }
.cart-drawer__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cart-drawer__shipping-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.6rem;
  font-size: 1.25rem;
  color: var(--color-muted);
}
.cart-drawer__shipping-note .icon { width: 1.8rem; height: 1.8rem; color: var(--color-accent); flex-shrink: 0; }
.cart-drawer__shipping-note--reached { color: var(--color-accent); }
.cart-drawer__shipping-bar {
  height: 3px;
  margin-bottom: 1rem;
  background: var(--color-border-soft);
  border-radius: 2px;
  overflow: hidden;
}
.cart-drawer__shipping-bar span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  box-shadow: var(--glow-accent);
  transition: width var(--duration-default) ease;
}
.cart-drawer__error {
  margin-top: 1.6rem;
  color: var(--color-error);
  font-size: 1.3rem;
}

/* Search page / 404
   -------------------------------------------------------------------------- */
.main-search__header { max-width: 60rem; margin: 0 auto 4rem; }
.main-search__form {
  display: flex;
  gap: 1rem;
  margin: 2.4rem 0 1.6rem;
}
.main-search__form input { flex: 1; }
.main-404 { padding-top: 10rem; padding-bottom: 10rem; }
.main-404 .button { margin-top: 2.4rem; }

/* Contact
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: start;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 3.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
}
.contact__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.contact__detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.contact__detail a { color: var(--color-accent); }
@media screen and (max-width: 989px) {
  .contact__grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media screen and (max-width: 599px) {
  .contact__fields { grid-template-columns: 1fr; }
}

/* Page
   -------------------------------------------------------------------------- */
.main-page__container { max-width: 80rem; margin: 0 auto; }

/* Customer pages
   -------------------------------------------------------------------------- */
.customer {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--section-spacing) var(--page-gutter);
}
.customer--wide { max-width: var(--page-width); }
.customer h1 { text-align: center; }
.customer form {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 3.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
}
.customer__links {
  margin-top: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: 1.3rem;
}
.customer__links a { color: var(--color-accent); }
.customer table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}
.customer th, .customer td {
  padding: 1.2rem 1rem;
  font-size: 1.35rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
}
.customer th {
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.customer__addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  gap: 2rem;
  margin-top: 2.4rem;
}
.customer__address {
  padding: 2.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
}

/* ==========================================================================
   Reszponzív finomhangolás
   ========================================================================== */

@media screen and (max-width: 989px) {
  .section {
    padding-top: calc(var(--section-spacing) * 0.75);
    padding-bottom: calc(var(--section-spacing) * 0.75);
  }
  .hero--large { min-height: 52rem; }
  .hero--full { min-height: 80vh; }
}

@media screen and (max-width: 749px) {
  .section {
    padding-top: calc(var(--section-spacing) * 0.6);
    padding-bottom: calc(var(--section-spacing) * 0.6);
  }

  .hero--small { min-height: 26rem; }
  .hero--medium { min-height: 36rem; }
  .hero--large { min-height: 44rem; }
  .hero__content { padding-top: 5rem; padding-bottom: 5rem; }
  .hero__buttons .button { width: 100%; }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
  }

  /* A `grid--mobile-1-col` csak 599px-től vált egy oszlopra — a kategória
     kártyák képe és felirata viszont már ennél szélesebben is összenyomódik. */
  .category-cards .grid { grid-template-columns: 1fr; }
  .category-card { min-height: 22rem; }

  .blog-posts .grid { grid-template-columns: 1fr; }

  .newsletter__inner { flex-direction: column; align-items: stretch; }
  .newsletter__intro { gap: 1.6rem; }
  /* Az `inner` itt oszlop irányú, ezért a form 40rem-es flex-basise 400px
     MAGASSÁGOT jelentene — vissza `auto`-ra, hogy a tartalomhoz igazodjon. */
  .newsletter__form { flex: 0 1 auto; max-width: none; }

  .footer { padding: 4rem 0 2.4rem; }
  .footer__menus { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .program-overview__pillars { grid-template-columns: 1fr; }

  .quote-banner { padding: 5rem 0; }

  .main-blog__hero { margin-bottom: 2.4rem; }

  .collection-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .collection-toolbar__count { margin-right: 0; }
  .collection-toolbar__sort select { width: 100%; }
  .collection-filters { position: static; width: 100%; margin-top: 1rem; }

  .main-cart__qty-row { flex-wrap: wrap; gap: 1rem; }
  .main-cart__summary-box { padding: 2rem; }
  .contact__form { padding: 2rem; }
  .main-blog__featured-content { padding: 2rem; }
}

@media screen and (max-width: 479px) {
  /* Termékek mobilon is 2 oszlopban, kompaktabb kártyákkal */
  .grid--4-col,
  .grid--3-col,
  .grid--2-col { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .card__content { padding: 1.2rem; gap: 0.5rem; }
  .card__heading { font-size: calc(var(--font-heading-scale) * 1.3rem); letter-spacing: 0.1em; }
  .card__text { font-size: 1.15rem; }
  .card .price { font-size: 1.35rem; }
  .card__footer .button {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    min-height: 3.4rem;
  }
  .trust-badges__item { justify-content: flex-start; }
  .drawer__panel { width: 100vw; }
}

/* ==========================================================================
   Nyelvválasztó (header + finomított dropdown)
   ========================================================================== */

.localization__select {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background-color: var(--color-background);
  color: var(--color-foreground);
  cursor: pointer;
}
.localization__select:hover { border-color: var(--color-border); }
.localization__select option {
  background: var(--color-surface);
  color: var(--color-foreground);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Custom-select a nyelv-/országváltóban: kompakt, tartalomhoz méretezett */
.localization .custom-select,
.header__localization .custom-select {
  width: auto;
}
.localization .custom-select__list {
  min-width: max-content;
}
/* A fejlécben az svg chevron adja a nyilat, a bg-image-nek szánt
   nagy jobb padding nem kell */
.header__localization .custom-select .custom-select__trigger {
  padding-right: 0.8rem;
}

.header__localization { display: flex; align-items: center; }
.header__localization .localization__icon { display: none; }
.header__localization .localization__select {
  border: none;
  padding: 0.6rem 2.6rem 0.6rem 0.8rem;
  font-size: 1.15rem;
  background-position: right 0.8rem center;
}
@media screen and (max-width: 989px) {
  .header__localization { display: none; }
}

/* ==========================================================================
   Vélemények (testimonials)
   ========================================================================== */

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.testimonial {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
}
.testimonial__stars {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 1.6rem;
  color: var(--color-accent);
}
.testimonial__stars .icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.testimonial__quote {
  margin: 0 0 2rem;
  font-size: 1.45rem;
  line-height: 1.7;
  color: var(--color-foreground);
}
.testimonial__author {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.testimonial__avatar {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name {
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.testimonial__meta { font-size: 1.15rem; color: var(--color-muted); }
@media screen and (max-width: 989px) {
  .testimonials__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Számok sáv (stats)
   ========================================================================== */

.stats {
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(var(--color-accent-rgb), 0.05), transparent 70%),
    var(--color-surface);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem;
  text-align: center;
}
.stats__value {
  display: block;
  font-family: var(--font-heading-family);
  font-size: calc(var(--font-heading-scale) * 4.2rem);
  letter-spacing: 0.06em;
  color: var(--color-accent);
  line-height: 1.1;
}
.stats__label {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-foreground);
}
.stats__text {
  margin: 0.6rem auto 0;
  max-width: 24rem;
  font-size: 1.25rem;
  color: var(--color-muted);
}

/* ==========================================================================
   Videó szekció
   ========================================================================== */

.video-section__wrapper {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}
.video-section__media {
  position: relative;
  aspect-ratio: 16 / 9;
}
.video-section__media video,
.video-section__media iframe,
.video-section__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}
.video-section__poster { cursor: pointer; }
.video-section__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-background-rgb), 0.35);
  transition: background var(--duration-default) ease;
}
.video-section__poster:hover .video-section__play { background: rgba(var(--color-background-rgb), 0.2); }
.video-section__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.2rem;
  height: 7.2rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: rgba(var(--color-background-rgb), 0.6);
  box-shadow: var(--glow-accent);
}
.video-section__play-icon svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: var(--color-accent);
  margin-left: 0.3rem;
}

/* ==========================================================================
   Képgaléria (mozaik)
   ========================================================================== */

.image-gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
  gap: 1.6rem;
}
.image-gallery__item {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  aspect-ratio: 4 / 5;
}
.image-gallery__item--wide { grid-column: span 2; aspect-ratio: auto; }
.image-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.image-gallery__item:hover img { transform: scale(1.04); }
.image-gallery__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 4rem 2rem 1.8rem;
  background: linear-gradient(180deg, transparent, rgba(var(--color-background-rgb), 0.9));
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-foreground);
}
.image-gallery__item a::after { content: ''; position: absolute; inset: 0; }
@media screen and (max-width: 749px) {
  .image-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .image-gallery__item--wide { grid-column: span 2; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */

.cta-banner {
  position: relative;
  overflow: hidden;
  padding: calc(9rem * var(--section-pt-scale, 1)) 0 calc(9rem * var(--section-pb-scale, 1));
  text-align: center;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  background:
    radial-gradient(ellipse 60% 120% at 50% 100%, rgba(var(--color-accent-rgb), 0.1), transparent 70%),
    var(--color-surface);
}
.cta-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-background-rgb), 0.7);
}
.cta-banner__content {
  position: relative;
  z-index: 1;
  max-width: 72rem;
}
.cta-banner__text {
  color: var(--color-muted);
  font-size: 1.6rem;
  max-width: 52rem;
  margin: 0 auto 1rem;
}
.cta-banner__buttons {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 2.8rem;
}

/* ==========================================================================
   Ikonos highlight sor (feature highlights)
   ========================================================================== */

.feature-highlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 2rem;
}
.feature-highlight {
  display: flex;
  gap: 1.8rem;
  padding: 2.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  transition: border-color var(--duration-default) ease;
}
.feature-highlight:hover { border-color: var(--color-border); }
.feature-highlight__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
}
.feature-highlight__title {
  margin-bottom: 0.6rem;
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}
.feature-highlight__text {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-muted);
}

/* ==========================================================================
   Kosár promóció (/cart)
   ========================================================================== */

.cart-promo { display: block; margin-top: calc(4rem * var(--section-pt-scale, 0)); margin-bottom: calc(4rem * var(--section-pb-scale, 1)); }

.cart-promo__box {
  padding: 2.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
}
.cart-promo__box--empty { text-align: center; }

.cart-promo__eyebrow {
  margin: 0 0 2rem;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.cart-promo__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart-promo__list--single { grid-template-columns: 1fr; gap: 0; }

/* A gomb mindig a teljes soron átér, különben a bélyegkép 8rem-es
   oszlopába esne. A `--wide` csak a gomb teljes szélességét kapcsolja. */
.cart-promo__item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  grid-template-areas:
    'media details'
    'action action';
  gap: 1.6rem;
  align-items: center;
}
.cart-promo__media { grid-area: media; }
.cart-promo__details { grid-area: details; }
.cart-promo__action { grid-area: action; }

.cart-promo__media {
  width: 8rem;
  height: 8rem;
  overflow: hidden;
  background: var(--color-product-media);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
}
.cart-promo__media img,
.cart-promo__media .placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-promo__details { min-width: 0; }
.cart-promo__title {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-foreground);
}
.cart-promo__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
}
.cart-promo__price-was {
  font-size: 1.3rem;
  color: var(--color-muted);
  text-decoration: line-through;
}
.cart-promo__price-now {
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.cart-promo__note {
  margin: 0.8rem 0 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.cart-promo__note--footer { margin-top: 2rem; }

.cart-promo__action .button.is-loading { opacity: 0.6; pointer-events: none; }
.cart-promo__action .button .icon { width: 1.6rem; height: 1.6rem; }

.cart-promo__error {
  margin: 1.6rem 0 0;
  font-size: 1.3rem;
  color: var(--color-error);
}
.cart-promo__error[hidden] { display: none; }

@media screen and (max-width: 749px) {
  .cart-promo__box { padding: 1.6rem; }
  .cart-promo__list { grid-template-columns: 1fr; }
  .cart-promo__item { grid-template-columns: 6.4rem 1fr; gap: 1.2rem; }
  .cart-promo__media { width: 6.4rem; height: 6.4rem; }
  .cart-promo__action .button { width: 100%; }
}

/* Promóciós „ghost” sor a kosár táblázatban ------------------------------- */

.main-cart__row--ghost td {
  background: rgba(var(--color-accent-rgb), 0.05);
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
}
/* A kép cellájának alapból nincs bal paddingja — a ghost keretnél kell,
   hogy a szaggatott vonal ne érjen hozzá a képhez. */
.main-cart__row--ghost td:first-child {
  padding-left: 1.6rem;
  border-left: 1px dashed var(--color-border);
}
.main-cart__row--ghost td:last-child {
  padding-right: 1.6rem;
  border-right: 1px dashed var(--color-border);
}
.main-cart__row--ghost .main-cart__title { color: var(--color-foreground); }
.main-cart__ghost-eyebrow {
  margin: 0 0 0.6rem !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.main-cart__ghost-action { vertical-align: middle; }
.main-cart__ghost-action .button.is-loading { opacity: 0.6; pointer-events: none; }
.main-cart__ghost-action .button .icon { width: 1.4rem; height: 1.4rem; }
.main-cart__row--ghost .cart-promo__price { margin: 0.4rem 0 0; }
.main-cart__row--ghost .cart-promo__note { margin-top: 0.6rem; }

@media screen and (max-width: 989px) {
  /* Mobilon a sor rácsra vált és a cellák keretei eltűnnek — a ghost keret
     ilyenkor magára a sorra kerül. */
  .main-cart__row--ghost {
    padding: 1.6rem;
    background: rgba(var(--color-accent-rgb), 0.05);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
  }
  .main-cart__row--ghost td {
    background: none;
    border: none;
  }
  .main-cart__row--ghost td:first-child,
  .main-cart__row--ghost td:last-child {
    padding-left: 0;
    padding-right: 0;
  }
  .main-cart__ghost-action { text-align: left !important; }
  .main-cart__ghost-action .button { width: 100%; }
}

/* Hero slider
   -------------------------------------------------------------------------- */
/* A diák a `.hero` osztályokat használják, így pontosan úgy néznek ki, mint a
   Hero banner szekció. A léptetés natív scroll-snap — ettől mobilon a húzás
   ingyen működik, és nincs szükség animációs kódra. */

.hero-slider {
  position: relative;
  display: block;
}

.hero-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__track:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.hero-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Nyilak ------------------------------------------------------------------- */

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  transform: translateY(-50%);
  color: var(--color-foreground);
  background: rgba(var(--color-background-rgb), 0.55);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color var(--duration-short) ease, background var(--duration-short) ease,
    border-color var(--duration-short) ease;
}
.hero-slider__arrow:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(var(--color-background-rgb), 0.8);
}
.hero-slider__arrow .icon { width: 1.8rem; height: 1.8rem; }
.hero-slider__arrow--prev { left: 2rem; }
.hero-slider__arrow--next { right: 2rem; }
.hero-slider__arrow[disabled] { opacity: 0.35; cursor: default; }

/* Pontok ------------------------------------------------------------------- */

.hero-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  z-index: 2;
  display: flex;
  gap: 1rem;
  transform: translateX(-50%);
}
.hero-slider__dot {
  width: 1rem;
  height: 1rem;
  padding: 0;
  background: rgba(var(--color-foreground-rgb), 0.35);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--duration-short) ease, transform var(--duration-short) ease;
}
.hero-slider__dot:hover { background: rgba(var(--color-foreground-rgb), 0.6); }
.hero-slider__dot[aria-selected='true'] {
  background: var(--color-accent);
  transform: scale(1.25);
}

@media screen and (max-width: 749px) {
  .hero-slider__arrow { width: 4rem; height: 4rem; }
  .hero-slider__arrow--prev { left: 1rem; }
  .hero-slider__arrow--next { right: 1rem; }
  .hero-slider__dots { bottom: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__track { scroll-behavior: auto; }
  .hero-slider__dot { transition: none; }
}

/* Hero videó
   -------------------------------------------------------------------------- */
/* A `.hero` osztályokat használja, ezért a magasság, az igazítások és a
   sötétítő réteg pontosan úgy viselkedik, mint a Hero banneren. Itt csak a
   médiaréteg más: a Shopify `video_tag` egy <video>-t rak be, amit a
   `.hero__media`-hoz hasonlóan teljes felületre feszítünk. */

hero-video {
  display: flex;
}

.hero-video .hero__media video,
.hero-video .hero__media .hero-video__video,
.hero-video .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A kivágás fókuszát a szekció adja inline változóként. */
  object-position: var(--hero-media-x, center) var(--hero-media-y, center);
  display: block;
}

/* A Shopify a <video>-t egy wrapperbe teszi — az is feszüljön ki. */
.hero-video .hero__media > div:not(.hero__overlay):not(.hero__media-placeholder) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-video .hero__media video::-webkit-media-controls {
  display: none !important;
}

/* Kiemelt termékek (kézzel válogatott, max. 5)
   -------------------------------------------------------------------------- */
/* Saját rács, mert a globális `.grid--*-col` csak 2–4 oszlopot ismer. Az
   oszlopszámot a szekció adja inline változóként; tableten Liquid korlátozza 3-ra. */

/* A sáv szélessége mindig az OSZLOPSZÁM szerinti, a sávok száma viszont a
   kiírt kártyák száma (legfeljebb az oszlopszám). Így kevesebb terméknél a
   kártyák nem nyúlnak szét, a maradék helyet a `justify-content` osztja el —
   ez adja a sor igazítását. `fr` helyett számolt hossz kell, mert az `fr`
   felszívná a maradékot, és az igazításnak nem maradna mit mozgatnia. */
.featured-products__grid {
  --fp-gap: 2rem;
  display: grid;
  grid-template-columns: repeat(
    var(--fp-tracks, 4),
    calc((100% - (var(--fp-columns, 4) - 1) * var(--fp-gap)) / var(--fp-columns, 4))
  );
  justify-content: var(--fp-justify, start);
  gap: var(--fp-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.featured-products__item { min-width: 0; }

@media screen and (max-width: 989px) {
  .featured-products__grid {
    grid-template-columns: repeat(
      var(--fp-tracks-tablet, 3),
      calc((100% - (var(--fp-columns-tablet, 3) - 1) * var(--fp-gap)) / var(--fp-columns-tablet, 3))
    );
  }
}

@media screen and (max-width: 749px) {
  .featured-products__grid--mobile-1 {
    grid-template-columns: minmax(0, 1fr);
    --fp-gap: 1.6rem;
    justify-content: stretch;
  }
  .featured-products__grid--mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --fp-gap: 1.2rem;
    justify-content: stretch;
  }

  /* Görgethető sor: a következő kártya széle kilátszik, jelezve hogy van még. */
  .featured-products__grid--mobile-scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    --fp-gap: 1.2rem;
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
  }
  .featured-products__grid--mobile-scroll::-webkit-scrollbar { display: none; }
  .featured-products__grid--mobile-scroll .featured-products__item { scroll-snap-align: start; }
}

/* Letöltés gomb
   -------------------------------------------------------------------------- */
/* Ugyanez a burkoló megy a „Letöltés gomb" szekcióban és a Hero / Hero videó /
   Szöveges blokk / Kép és szöveg / termékoldal blokkjában is, hogy a térköz és
   az igazítás ne csússzon szét a használatok között. Igazítás nélkül (a blokk
   „Mint a tartalom" beállításával) a szülő `text-align`-jét követi. */
.download-button { margin-top: 2.4rem; }
.download-button:first-child { margin-top: 0; }
/* A Heróban a gombsor ritmusát követi. */
.hero__box .download-button { margin-top: 3rem; }
.download-button__icon { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }
.download-button__meta {
  margin: 1rem 0 0;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.download-section__inner { max-width: calc(var(--download-width, 640) * 0.1rem); }
.download-section__inner.align-center { margin-inline: auto; }
.download-section__inner.align-right { margin-inline: auto 0; }
.download-section__heading { margin-bottom: 1.2rem; }
.download-section__text { margin-bottom: 2rem; }
.download-section__text > :last-child { margin-bottom: 0; }

/* Kiemelt rács (blogbejegyzések, oldalak)
   -------------------------------------------------------------------------- */
/* Közös rács a „Kiemelt blogbejegyzések" és a „Kiemelt oldalak" szekcióhoz.
   Rács helyett tördelő flexbox: CSS Gridnél a `justify-content` a TELJES
   sávrácsot mozgatja, nem az egyes sorokat — így egy 3×3-as rácsban a 7. kártya
   akkor is balra ragadt volna, ha középre igazítást kértek. Flexboxban a
   `justify-content` soronként érvényesül, tehát a félig teli utolsó sor is
   igazodik. A kártya szélessége az oszlopszámból számolt hossz, hogy ne
   nyúljon szét, amikor kevesebb van belőle. */
.featured-grid {
  --fg-gap: 2rem;
  --fg-basis: calc((100% - (var(--fg-columns, 3) - 1) * var(--fg-gap)) / var(--fg-columns, 3));
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--fg-justify, flex-start);
  gap: var(--fg-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.featured-grid__item {
  flex: 0 0 var(--fg-basis);
  min-width: 0;
  display: flex;
}
.featured-grid__item > .card,
.featured-grid__item > .plaque-2__card { width: 100%; }

/* A helykitöltő SVG kövesse a fekvő kártya arányát, ne az 1:1-es termékarányt. */
.card__media--landscape .placeholder-svg { aspect-ratio: 16 / 10; }

/* Az oldalkártya lábán nincs dátum, csak a hivatkozás — a cikkártya
   `space-between`-je helyett balra zárjuk. */
.page-card__footer { justify-content: flex-start; }

/* A teljes kártyát kattinthatóvá tevő fedőréteg. Azért külön elem és nem a
   címre akasztott `::after`, mert a cím és a „Tovább" gomb is elrejthető. */
.page-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Elemenkénti igazítás az oldalkártyán. A tartalom oszlopos flexbox, ahol az
   elemek a saját szélességükre zsugorodnak — ezért a `text-align` mellé az
   `align-self` is kell, különben a doboz a bal szélen maradna. */
.card--page .card__content > .align-left { align-self: flex-start; text-align: left; }
.card--page .card__content > .align-center { align-self: center; text-align: center; }
.card--page .card__content > .align-right { align-self: flex-end; text-align: right; }

/* A gombsor `width: 100%`, ezért rajta az `align-self` nem fog — a belső
   elrendezést kell igazítani. */
.card--page .page-card__footer.align-left { justify-content: flex-start; }
.card--page .page-card__footer.align-center { justify-content: center; }
.card--page .page-card__footer.align-right { justify-content: flex-end; }

@media screen and (max-width: 989px) {
  .featured-grid {
    --fg-basis: calc((100% - (var(--fg-columns-tablet, 2) - 1) * var(--fg-gap)) / var(--fg-columns-tablet, 2));
  }
}

@media screen and (max-width: 749px) {
  .featured-grid--mobile-1 {
    --fg-gap: 1.6rem;
    --fg-basis: 100%;
    justify-content: flex-start;
  }
  .featured-grid--mobile-2 {
    --fg-gap: 1.2rem;
    --fg-basis: calc((100% - var(--fg-gap)) / 2);
    justify-content: flex-start;
  }

  /* Görgethető sor: a következő kártya széle kilátszik, jelezve hogy van még. */
  .featured-grid--mobile-scroll {
    --fg-gap: 1.2rem;
    --fg-basis: 78%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
  }
  .featured-grid--mobile-scroll::-webkit-scrollbar { display: none; }
  .featured-grid--mobile-scroll .featured-grid__item { scroll-snap-align: start; }
}

/* Plakett 2
   -------------------------------------------------------------------------- */
/* Teljes felületű kép, alul erősödő sötétítéssel, a felirat és a nyíl a kártya
   alján ül. A rácsot a közös `.featured-grid` adja, itt csak a kártya él. */
.plaque-2__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: var(--p2-ratio, 3 / 2);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition: border-color var(--duration-default) ease, transform var(--duration-default) ease;
}
.plaque-2__card:hover {
  border-color: var(--color-border);
  transform: translateY(-4px);
}
.plaque-2__media,
.plaque-2__media img,
.plaque-2__media .placeholder-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plaque-2__media img { transition: transform 700ms ease; }
.plaque-2__card:hover .plaque-2__media img { transform: scale(1.05); }
.plaque-2__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(var(--color-background-rgb), var(--p2-scrim, 0.85)) 100%
  );
}
.plaque-2__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 1.6rem;
  padding: 2rem 2.2rem;
}
/* A felirat kitölti a maradékot, így a nyíl akkor is a jobb sarokban marad,
   ha a szöveg középre vagy jobbra igazodik. */
.plaque-2__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-foreground);
}
.plaque-2__title--heading {
  font-family: var(--font-heading-family);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.plaque-2__content.align-center .plaque-2__title { text-align: center; }
.plaque-2__content.align-right .plaque-2__title { text-align: right; }
/* A teljes kártyát kattinthatóvá tevő fedőréteg. A feliratra akasztott
   `::after` csak a lenti sávot fedné le, mert a felirat doboza pozicionált. */
.plaque-2__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.plaque-2__arrow {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--color-foreground);
  transition: transform var(--duration-default) ease, color var(--duration-default) ease;
}
.plaque-2__card:hover .plaque-2__arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .plaque-2__card,
  .plaque-2__media img,
  .plaque-2__arrow { transition: none; }
  .plaque-2__card:hover { transform: none; }
  .plaque-2__card:hover .plaque-2__media img { transform: none; }
  .plaque-2__card:hover .plaque-2__arrow { transform: none; }
}

/* ==========================================================================
   Keresés és programútmutató
   ==========================================================================
   Az exportból átemelt felületek. Az eredeti fájlokban ezek `{% stylesheet %}`
   blokkokban éltek; itt gyűjtöttük össze, hogy a téma stílusai egy helyen
   legyenek. A forrás-snippetet a blokkok fölötti komment jelzi. */
/* --- search-scope --- */
precise-search {
  display: block;
  width: 100%;
}
.tiian-search-scope:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
}
.tiian-search-scope select {
  min-height: 44px;
  font-size: 16px;
  padding: 8px;
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
}
precise-search .main-search__form,
precise-search .search-modal__form {
  flex-wrap: wrap;
}
precise-search .tiian-search-scope {
  flex-basis: 100%;
  justify-content: center;
}

/* --- search-filters --- */
.tiian-search-filters {
  margin: 24px 0;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  padding: 16px;
}
.tiian-search-filters summary {
  cursor: pointer;
  min-height: 44px;
  display: list-item;
  padding: 10px;
}
.tiian-search-filters__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 24px;
  margin-top: 16px;
}
.tiian-search-filters fieldset {
  border: 0;
  padding: 0;
  min-width: 180px;
  max-width: 100%;
}
.tiian-search-filters legend {
  font-weight: 600;
  margin-bottom: 12px;
}
.tiian-search-filters__check {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
}
.tiian-search-filters__range {
  display: flex;
  gap: 12px;
  max-width: 320px;
}
.tiian-search-filters__range label {
  min-width: 0;
  flex: 1;
}
.tiian-search-filters input[type=number],
.tiian-search-filters select {
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 10px;
  min-height: 44px;
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border-soft);
}
.tiian-search-filters__actions,
.tiian-search-filters__active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}
.tiian-search-filters__active:empty {
  display: none;
}
.tiian-search-filters__active a {
  padding: 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  text-decoration: none;
}

/* --- shop-categories --- */
.tiian-shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 32px;
}
.tiian-shop-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
  text-decoration: none;
}
.tiian-shop-tabs a[aria-current],
.tiian-shop-tabs a:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

/* --- program-finder --- */
.tiian-program-finder {
  padding: 28px;
  margin: 36px 0;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: var(--color-surface);
}
.tiian-program-finder h2 {
  margin-top: 0;
}
.tiian-program-finder__form:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 16px;
}
.tiian-program-finder label {
  display: block;
  margin-bottom: 8px;
}
.tiian-program-finder select {
  width: 100%;
  min-height: 48px;
  padding: 10px;
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  font-size: 16px;
}
.tiian-program-finder__browse {
  display: inline-block;
  margin-top: 18px;
  text-underline-offset: 4px;
  min-height: 44px;
}
@media(max-width:749px) {
  .tiian-program-finder {
    padding: 20px;
  }
  .tiian-program-finder__form:not([hidden]) {
    grid-template-columns: 1fr;
  }
}

/* --- program-start --- */
.tiian-start,
.tiian-follow {
  margin: 44px 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-soft);
}
.tiian-start__steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  list-style-position: inside;
  padding: 0;
  counter-reset: steps;
}
.tiian-start__steps li {
  padding: 24px;
  background: var(--color-surface);
  border-radius: 8px;
  line-height: 1.65;
}
.tiian-start__steps h3 {
  font-size: 1.8rem;
  line-height: 1.3;
}
.tiian-start p {
  line-height: 1.65;
}
.tiian-follow__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.tiian-follow__card {
  padding: 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  display: flex;
  align-items: start;
  flex-direction: column;
}
.tiian-follow__card h3 {
  font-size: 2rem;
  line-height: 1.3;
}
.tiian-follow__card .button {
  margin-top: auto;
}
.tiian-follow__label {
  color: var(--color-muted);
  margin: 0;
}
.tiian-start__compare a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  text-underline-offset: 4px;
}
@media(max-width:749px) {
  .tiian-start__steps,
  .tiian-follow__grid {
    grid-template-columns: 1fr;
  }
}

/* --- t1-comparison --- */
.tiian-compare {
  grid-column: 1/-1;
  min-width: 0;
  margin: 36px 0;
  padding: 28px;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: var(--color-surface);
}
.tiian-compare h2 {
  margin: 0 0 12px;
}
.tiian-compare__scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 24px;
}
.tiian-compare table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
.tiian-compare th,
.tiian-compare td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}
.tiian-compare thead th {
  color: var(--color-accent);
}
.tiian-compare__note {
  font-size: 1.3rem;
  margin: 20px 0 0;
}
@media(max-width:749px) {
  .tiian-compare {
    padding: 18px 14px;
  }
  .tiian-compare h2 {
    font-size: 2.2rem;
  }
}

/* --- t1-pack-options --- */
.tiian-pack-options {
  margin: 12px 0 24px;
  font-size: 1.3rem;
}
.tiian-pack-options h2 {
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.tiian-pack-options__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.tiian-pack-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
  text-decoration: none;
}
.tiian-pack-option[aria-current],
.tiian-pack-option:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
}
.tiian-pack-option__saving {
  color: var(--color-accent);
}
@media(max-width:380px) {
  .tiian-pack-options__grid {
    grid-template-columns: 1fr;
  }
  .tiian-pack-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* --- product-purchase-summary --- */
.tiian-purchase-summary {
  margin: 20px 0;
  font-size: 1.4rem;
  line-height: 1.6;
}
.tiian-purchase-summary p {
  margin: 0 0 12px;
}
.tiian-purchase-summary ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.tiian-purchase-summary li {
  padding: 6px 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
}

/* --- mobile-purchase-bar --- */
.tiian-mobile-buy {
  display: none;
}
@media(max-width:749px) {
  .tiian-mobile-buy:not([hidden]) {
    display: flex;
    position: fixed;
    inset: auto 0 0;
    z-index: 35;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--color-background);
    border-top: 1px solid var(--color-border-soft);
    box-shadow: 0 -4px 18px #0003;
  }
  .tiian-mobile-buy__info {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px;
    font-size: 1.3rem;
  }
  .tiian-mobile-buy__info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tiian-mobile-buy .button {
    min-height: 44px;
    max-width: 55%;
    letter-spacing: .04em;
  }
  body: has(.tiian-mobile-buy:not([hidden])) {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  body.overflow-hidden .tiian-mobile-buy {
    display: none;
  }
}

/* --- order-help --- */
.tiian-order-help__inner {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.75;
}
.tiian-order-help__inner h1 {
  font-size: clamp(2.8rem,4vw,4.4rem);
  line-height: 1.2;
}
.tiian-order-help__inner h2 {
  font-size: 2.2rem;
  line-height: 1.3;
  margin-top: 30px;
}
.tiian-order-help__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  margin: 30px 0;
}
.tiian-order-help__grid article {
  padding: 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: var(--color-surface);
}
.tiian-order-help__grid h2 {
  margin-top: 0;
}
@media(max-width:749px) {
  .tiian-order-help__grid {
    grid-template-columns: 1fr;
  }
}

/* --- program-comparison --- */
.tiian-program__header {
  max-width: 850px;
  margin: 0 auto 36px;
  text-align: center;
}
.tiian-program__header h1 {
  font-size: clamp(2.8rem,4vw,4.8rem);
  line-height: 1.15;
}
.tiian-program__header p,
.tiian-program__contents {
  color: var(--color-muted);
  line-height: 1.65;
}
.tiian-program__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.tiian-program__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  line-height: 1.55;
}
.tiian-program__table caption {
  text-align: left;
  font-weight: 600;
  font-size: 1.8rem;
  margin-bottom: 16px;
}
.tiian-program__table th,
.tiian-program__table td {
  padding: 20px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
}
.tiian-program__table thead {
  color: var(--color-muted);
}
.tiian-program__table th:first-child {
  min-width: 150px;
}
.tiian-program__complete {
  background: var(--color-surface);
}
.tiian-program__price {
  white-space: nowrap;
  font-weight: 600;
}
.tiian-program__price small {
  display: block;
  white-space: normal;
  font-weight: 400;
}
.tiian-program__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-underline-offset: 4px;
}
.tiian-program__saving {
  padding: 18px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  font-weight: 600;
}
.tiian-program a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}
@media(max-width:749px) {
  .tiian-program__table,
  .tiian-program__table tbody {
    display: block;
  }
  .tiian-program__table thead {
    display: none;
  }
  .tiian-program__table tr {
    display: block;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px;
  }
  .tiian-program__table th,
  .tiian-program__table td {
    display: block;
    border: 0;
    padding: 5px 0;
    min-width: 0;
  }
  .tiian-program__table th {
    font-size: 1.9rem;
    margin-bottom: 8px;
  }
  .tiian-program__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--color-muted);
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 6px;
  }
  .tiian-program__actions .button {
    width: 100%;
  }
}

/* --- main-product: a T1 család termékoldalán a jobb hasáb saját rácsot kap --- */
.tiian-t1-product-columns {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit;
  gap: inherit;
  align-items: start;
  min-width: 0;
}

/* --- kosár: tétel jellege és a szállítási összefoglaló ------------------- */
.cart-item__kind {
  margin: 0.2rem 0 0;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cart-delivery-summary { margin-bottom: 1.6rem; }

/* Lejárati dátum
   -------------------------------------------------------------------------- */
/* A `confirm-expiry:` tagből jövő jelzés. Figyelemfelkeltő, de nem riasztó —
   a türkiz helyett semleges, halvány keret, hogy ne versenyezzen az akció- és
   készletjelzésekkel. */
.product-expiry {
  display: inline-flex;
  /* Flex- vagy rács-elemként a böngésző blokkosítja az `inline-flex`-et, ezért
     a pirula a teljes szélességre nyúlna — a `fit-content` ezt zárja a
     tartalomhoz. Igazítást itt NEM adunk: alapból a szülő `align-items`-ét
     követi, a középre szedett környezeteket pedig lentebb külön kezeljük. */
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0 0;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: rgba(var(--color-foreground-rgb), 0.04);
  color: var(--color-muted);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}
.product-expiry__icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
}
.product-expiry--small {
  margin: 0.8rem 0 0;
  padding: 0.4rem 0.9rem;
  font-size: 1.1rem;
  gap: 0.6rem;
}
.product-expiry--small .product-expiry__icon {
  width: 1.3rem;
  height: 1.3rem;
}

/* A pirula a környezete igazítását veszi át. A termékkártya tartalma középre
   szedett, de `align-items: stretch`-csel — a számolt szélesség miatt onnan
   balra esne, ezért itt kifejezetten középre tesszük. Az oldalkártyák
   (`--article`) balra igazítanak, ott a szülő `align-items: flex-start`-ja
   magától jó. */
.card__content > .product-expiry { align-self: center; }
/* A kártya lábában a láb saját `gap`-je adja a térközt. */
.card__footer > .product-expiry { margin-top: 0; }
.card__content--article > .product-expiry { align-self: flex-start; }

/* A kiemelt termék B nézete blokk-elrendezésű és középre szedett, ott az
   automatikus oldalmargó centrál. */
.featured-product__centered .product-expiry { margin-inline: auto; }

/* A megerősítő ablak a figyelmeztető panelt használja, csak az ikon és a
   gombsor tér el: itt két egyenrangú választás van, nem egy nyugtázás. */
.theme-alert--confirm .theme-alert__icon { color: var(--color-foreground); }
.theme-alert--confirm .theme-alert__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}