/* bring — komponensek. Mobil első (375 px), min-width töréspontok: 744 / 1024 / 1440.
   Értékek kizárólag a tokens.css-ből. */

/* ---------- Alap ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-radius: var(--radius); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + var(--header-inset) * 2); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.65;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  overflow-x: clip;
}
img, picture, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: var(--weight-light); text-wrap: balance; hyphens: manual; }
.label, .tag, .btn, .link, .spec-table, .price, .menu__text { hyphens: manual; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
main:focus { outline: none; }

:focus-visible { outline: var(--focus-width) solid var(--color-black); outline-offset: var(--focus-offset); }
[data-state="glass"] :focus-visible, .menu :focus-visible, .preorder :focus-visible,
.site-footer :focus-visible, .hero :focus-visible { outline-color: var(--color-white); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; }
.skip-link {
  position: fixed; left: var(--space-s); top: var(--space-s); z-index: 100;
  padding: var(--space-s) var(--space-m); background: var(--color-black); color: var(--color-white);
  font-size: var(--text-button); font-weight: var(--weight-medium); letter-spacing: var(--tracking-button); text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Tipográfia ---------- */
.h1, h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.015em; }
.h2, h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -.01em; }
.h3, h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -.01em; }
.lead { font-size: var(--text-lead); line-height: 1.65; max-width: var(--measure); }
.small { font-size: var(--text-small); line-height: 1.55; }
.label {
  font-size: var(--text-label); font-weight: var(--weight-medium); line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.price { font-size: var(--text-price); font-weight: var(--weight-light); line-height: 1.2; }
.tabular, .price { font-variant-numeric: tabular-nums; }
p, li, dd { max-width: var(--measure); }

.tag {
  display: inline-block; padding: var(--space-xs) var(--space-s);
  background: var(--color-black); color: var(--color-white);
  font-size: var(--text-label); font-weight: var(--weight-medium); line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; font-variant-numeric: tabular-nums;
}

.link {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap);
  text-decoration: underline; text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--hairline);
  font-size: var(--text-button); font-weight: var(--weight-medium); letter-spacing: var(--tracking-button); text-transform: uppercase;
}

/* ---------- Konténer ---------- */
.container { width: 100%; max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto; padding-inline: var(--page-margin); }

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-s);
  min-height: var(--button-height); padding: 0 var(--button-padding);
  font-size: var(--text-button); font-weight: var(--weight-medium); line-height: 1;
  letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none;
  border: var(--hairline) solid transparent;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-click);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
.btn--primary { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.btn--secondary { background: transparent; color: var(--color-black); border-color: var(--color-black); }
.btn--on-dark { background: var(--color-white); color: var(--color-black); border-color: var(--color-white); }
.btn--on-dark:focus-visible { outline-color: var(--color-white); }
.btn--secondary-dark { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn:disabled { background: var(--color-concrete-200); color: var(--color-concrete-600); border-color: var(--color-concrete-200); cursor: not-allowed; }
.btn--block, .btn--block-mobile { width: 100%; }
.btn--spread { justify-content: space-between; }
@media (min-width: 744px) { .btn--block-mobile { width: auto; min-width: 16rem; } }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not(:disabled) { background: var(--color-concrete-800); border-color: var(--color-concrete-800); }
  .btn--secondary:hover:not(:disabled) { background: var(--color-black); color: var(--color-white); }
  .btn--on-dark:hover:not(:disabled) { background: var(--color-concrete-200); border-color: var(--color-concrete-200); }
  .link:hover { text-decoration-thickness: var(--focus-width); }
}

/* ---------- Fejléc ---------- */
.site-header {
  position: fixed; z-index: 50;
  top: max(var(--header-inset), env(safe-area-inset-top));
  left: max(var(--header-inset), env(safe-area-inset-left));
  right: max(var(--header-inset), env(safe-area-inset-right));
  height: var(--header-height);
  border: var(--line);
  background: var(--color-white); color: var(--color-black);
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.site-header[data-state="glass"] {
  background: var(--glass-bg); color: var(--color-white); border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header[data-state="glass"] { background: var(--color-black); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header[data-state="glass"] { background: var(--color-black); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%;
  padding-inline: var(--space-s);
}
.site-header__start { display: flex; align-items: center; }
.site-header__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-m); }
.site-header__menu-btn, .site-header__cart, .site-header__lang a, .site-header__nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-decoration: none;
}
.site-header__menu-btn { min-width: var(--tap); }
.site-header__logo { display: flex; align-items: center; min-height: var(--tap); color: inherit; }
.site-header__logo .logo { height: var(--logo-height); width: auto; }
.site-header__nav, .site-header__lang { display: none; }
.site-header__count { display: inline-block; font-variant-numeric: tabular-nums; }
.site-header__count.is-bump { animation: count-bump var(--dur-ui) var(--ease-click); }
@keyframes count-bump { 0% { transform: translateY(var(--counter-jump)); } 100% { transform: none; } }

/* Görgetésjelző: tisztán CSS, ahol a scroll-timeline támogatott */
.site-header__progress { position: absolute; left: 0; bottom: calc(var(--hairline) * -1); height: var(--hairline); width: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); display: none; }
@supports (animation-timeline: scroll()) {
  .site-header__progress { display: block; animation: progress linear both; animation-timeline: scroll(root block); }
}
@keyframes progress { to { transform: scaleX(1); } }

@media (min-width: 1024px) {
  .site-header__bar { padding-inline: var(--space-m); }
  .site-header__menu-btn { display: none; }
  .site-header__nav, .site-header__lang { display: flex; }
  .site-header__nav ul { display: flex; gap: var(--space-l); }
  .site-header__nav a { position: relative; }
  .site-header__nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--space-xs) + var(--space-2xs)); height: var(--hairline); background: currentColor; }
  .site-header__lang { gap: var(--space-2xs); align-items: center; font-size: var(--text-label); opacity: .9; }
  .site-header__lang a:not([aria-current]) { opacity: .6; }
}
@media (hover: hover) and (pointer: fine) {
  .site-header__nav a:hover, .site-header__lang a:hover, .site-header__cart:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
}

/* ---------- Mobilmenü ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-height) + var(--header-inset) + var(--space-2xl)) var(--page-margin) max(var(--space-l), env(safe-area-inset-bottom));
  background: var(--color-black); color: var(--color-white);
}
.menu__nav ul { border-top: var(--hairline) solid var(--color-concrete-800); }
.menu__nav li { border-bottom: var(--hairline) solid var(--color-concrete-800); max-width: none; }
.menu__nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-m) 0; text-decoration: none; }
.menu__text { font-size: var(--text-h2); font-weight: var(--weight-light); line-height: 1.15; letter-spacing: -.01em; }
.menu__num { font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); color: var(--color-concrete-400); font-variant-numeric: tabular-nums; }
.menu__foot { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); }
.menu__lang { display: flex; gap: var(--space-l); }
.menu__lang a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); color: var(--color-concrete-400); }
.menu__lang a[aria-current] { color: var(--color-white); text-decoration: underline; text-underline-offset: var(--underline-offset); }
.menu__legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); }
.menu__legal a { display: inline-flex; min-height: var(--tap); align-items: center; color: var(--color-concrete-400); text-decoration: none; }
html.menu-open { overflow: hidden; }
html.menu-open .site-header { background: var(--color-black); color: var(--color-white); border-color: var(--color-concrete-800); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 1024px) { .menu { display: none !important; } }

/* ---------- Nyitány ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--color-black); color: var(--color-white); overflow: hidden;
}
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: var(--focus-mobile, 50% 50%); }
@media (min-width: 744px) { .hero__media img { object-position: 50% 50%; } }
.hero__overlay { position: absolute; inset: 0; background: var(--overlay-image); }
.hero__content {
  position: relative; z-index: 1; display: grid; gap: var(--space-l);
  padding: calc(var(--header-height) + var(--space-2xl)) var(--page-margin) max(var(--space-l), calc(env(safe-area-inset-bottom) + var(--space-s)));
}
.hero__eyebrow { color: var(--color-concrete-200); }
.hero__title { margin-top: var(--space-s); max-width: 14em; }
.hero__title-2 { display: block; color: var(--color-concrete-400); }
.hero__price { font-size: var(--text-body); color: var(--color-concrete-200); margin-bottom: var(--space-s); }
.hero__list, .hero__scroll { display: none; }
@media (min-width: 1024px) {
  .hero__content {
    grid-template-columns: 1fr auto; align-items: end;
    padding: 0 var(--page-margin) var(--space-2xl);
    max-width: calc(var(--content-max) + var(--page-margin) * 2); width: 100%; margin-inline: auto;
  }
  .hero__buy { text-align: right; }
  .hero__buy .buy-form { display: inline-block; }
  .hero__list {
    display: block; position: absolute; z-index: 1; right: var(--page-margin);
    top: calc(var(--header-height) + var(--header-inset) + var(--space-2xl)); text-align: right; color: var(--color-concrete-200);
  }
  .hero__list li + li { margin-top: var(--space-2xs); }
  .hero__scroll {
    display: flex; align-items: center; gap: var(--space-s); position: absolute; z-index: 1;
    left: calc(var(--page-margin) / 2 - var(--space-xs)); top: 38%;
    writing-mode: vertical-rl; transform: rotate(180deg); color: var(--color-concrete-200);
  }
  .hero__scroll::before { content: ""; width: var(--hairline); height: var(--space-2xl); background: currentColor; opacity: .6; }
}
/* Belépő: egyszer, 80 ms-os lépcsővel */
.js [data-enter] { opacity: 0; transform: translateY(var(--enter-shift)); }
.js .is-entered [data-enter] { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease-click), transform var(--dur-enter) var(--ease-click); }
.js .is-entered .hero__text [data-enter]:nth-child(2) { transition-delay: 80ms; }
.js .is-entered .hero__buy[data-enter] { transition-delay: 160ms; }
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; }
  .hero__content { padding-top: calc(var(--header-height) + var(--space-3xl)); }
}

/* ---------- Hullám ---------- */
.wave { color: var(--color-black); height: var(--space-xl); }
.wave svg { width: 100%; height: 100%; }
.js .wave path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .wave.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-enter) var(--ease-out); }

/* ---------- A jelenet ---------- */
.scene { position: relative; padding-top: var(--space-3xl); }
.scene__head { padding-inline: var(--page-margin); margin-bottom: var(--space-l); }
.scene__head .label { color: var(--color-concrete-600); }
.scene__intro { margin-top: var(--space-xs); color: var(--color-concrete-600); }
.scene__progress, .scene__stage { display: none; }
/* Alap (JS nélkül / csökkentett mozgás): három állókép egymás alatt, mindegyik a saját szövegével */
.scene__steps { display: grid; gap: var(--space-2xl); }
.scene__figure { position: relative; aspect-ratio: 4 / 5; background: var(--color-white); overflow: hidden; }
.scene__figure picture, .scene__figure img { width: 100%; height: 100%; object-fit: cover; }
.scene__copy { padding: var(--space-m) var(--page-margin) 0; }
.scene__step-label { color: var(--color-concrete-600); margin-bottom: var(--space-s); }
.scene__text { margin-top: var(--space-s); color: var(--color-concrete-600); }
.scene__legend { margin-top: var(--space-m); border-top: var(--line); }
.scene__legend li { display: flex; align-items: center; gap: var(--space-s); padding: var(--space-s) 0; border-bottom: var(--line); max-width: none; }
.scene__legend-num, .scene__callout-num {
  display: inline-grid; place-items: center; width: var(--space-l); height: var(--space-l);
  background: var(--color-black); color: var(--color-white); font-size: var(--text-small); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums;
}
.scene__callout { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; }
.scene__callout-line, .scene__callout-text { display: none; }
.scene__wave { margin-top: var(--space-2xl); }

/* Élő (görgetésvezérelt) mód */
.scene--live .scene__track { height: 250svh; }
.scene--live .scene__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr; align-content: start;
  padding-top: calc(var(--header-height) + var(--header-inset) + var(--space-m));
}
.scene--live { padding-top: 0; }
.scene--live .scene__head { margin-bottom: var(--space-s); }
.scene--live .scene__intro { display: none; }
.scene--live .scene__progress {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs);
  padding-inline: var(--page-margin); margin-bottom: var(--space-s);
}
.scene--live .scene__progress-item {
  padding-top: var(--space-xs); border-top: var(--hairline) solid var(--color-concrete-200);
  font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-concrete-400); transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.scene--live .scene__progress-item.is-active, .scene--live .scene__progress-item.is-done { color: var(--color-black); border-top-color: var(--color-black); }
.scene--live .scene__progress-item.is-done { color: var(--color-concrete-600); }
.scene--live .scene__marker, .scene--live .scene__progress-pct { display: none; }
.scene--live .scene__steps { position: relative; display: block; min-height: 0; }
.scene--live .scene__step { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-ui) var(--ease-out); pointer-events: none; }
.scene--live .scene__step.is-active { opacity: 1; }
.scene--live .scene__figure { width: 100%; max-height: 62svh; aspect-ratio: 4 / 5; margin-inline: auto; }
.scene--live .scene__copy { padding-top: var(--space-s); }
.scene--live .scene__step-label { display: none; }
.scene--live .scene__legend { display: none; }
.scene--live .scene__stage { display: block; position: absolute; left: 0; right: 0; pointer-events: none; }
.scene--live .scene__canvas { width: 100%; height: 100%; }
.scene--live .scene__stage { z-index: 2; }
.scene__pct { position: absolute; right: 0; bottom: 0; min-width: 4.5em; text-align: center; }
.scene--live .scene__stage.is-sized { display: block; }
.scene--frames .scene__figure picture { opacity: 0; }
.scene--frames.is-fallback .scene__figure picture { opacity: 1; }

@media (min-width: 1024px) {
  .scene__head { margin-bottom: var(--space-xl); }
  .scene__steps { gap: var(--space-3xl); padding-inline: var(--page-margin); }
  .scene__step { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-xl); align-items: end; }
  .scene__copy { padding: 0; }
  .scene__callout-line, .scene__callout-text { display: block; }
  .scene__callout-num { display: none; }
  .scene__callout::before { content: ""; width: var(--space-xs); height: var(--space-xs); background: var(--color-black); }
  .scene__callout-line { width: var(--space-xl); height: var(--hairline); background: var(--color-black); }
  .scene__callout-text { white-space: nowrap; padding: var(--space-2xs) var(--space-xs); background: var(--color-black); color: var(--color-white); }
  .scene__callout { transform: translate(0, -50%); }
  .scene__callout--flip { flex-direction: row-reverse; transform: translate(-100%, -50%); }

  .scene--live .scene__sticky {
    grid-template-columns: 3fr 6fr 3fr; grid-template-rows: auto 1fr; column-gap: var(--space-l);
    padding-inline: var(--page-margin); padding-top: calc(var(--header-height) + var(--header-inset) * 2 + var(--space-l));
    max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto;
  }
  .scene--live .scene__head { grid-column: 1; grid-row: 1; padding: 0; }
  .scene--live .scene__intro { display: block; }
  .scene--live .scene__progress {
    grid-column: 1; grid-row: 2; align-self: start; display: grid; grid-template-columns: 1fr; gap: var(--space-l);
    padding: var(--space-l) 0 0; position: relative;
  }
  .scene--live .scene__progress::before { content: ""; position: absolute; left: calc(var(--marker) / 2); top: var(--space-l); bottom: 0; width: var(--hairline); background: var(--color-black); }
  .scene--live .scene__progress-item { border: 0; padding: 0 0 0 calc(var(--marker) + var(--space-m)); position: relative; display: grid; }
  .scene--live .scene__marker { display: block; position: absolute; left: 0; top: .25em; width: var(--marker); height: var(--marker); background: var(--color-black); }
  .scene--live .scene__progress-pct { display: block; color: var(--color-concrete-400); letter-spacing: 0; }
  .scene--live .scene__steps { grid-column: 2 / 4; grid-row: 1 / 3; padding: 0; }
  .scene--live .scene__step { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-l); align-items: start; }
  .scene--live .scene__figure { max-height: calc(100svh - var(--header-height) - var(--space-3xl)); width: auto; height: calc(100svh - var(--header-height) - var(--space-3xl)); margin: 0; }
  .scene--live .scene__step-label { display: block; }
  .scene--live .scene__copy { padding-top: var(--space-l); }
}
@media (prefers-reduced-motion: reduce), (orientation: landscape) and (max-height: 500px) {
  .scene__track { height: auto !important; }
}

/* ---------- Működés ---------- */
.how { padding-block: var(--space-3xl); display: grid; gap: var(--space-xl); }
.how__text { padding-inline: var(--page-margin); }
.how__label { color: var(--color-concrete-600); margin-bottom: var(--space-s); }
.features { margin-top: var(--space-xl); border-top: var(--line); }
.features__item { display: grid; grid-template-columns: var(--space-xl) 1fr; gap: var(--space-s); padding: var(--space-m) 0; border-bottom: var(--line); max-width: none; }
.features__num { font-size: var(--text-small); color: var(--color-concrete-600); padding-top: var(--space-2xs); }
.features__title { color: var(--color-black); }
.features__text { margin-top: var(--space-xs); color: var(--color-concrete-600); }
.how__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-xl); }
.how__buy .buy-form { flex: 1 1 12rem; max-width: 20rem; }
.how__buy .btn { width: 100%; }
.how__media {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--hairline);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--page-margin); scroll-padding-inline: var(--page-margin);
}
.how__media::-webkit-scrollbar { display: none; }
.how__figure { position: relative; scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-white); }
.how__figure picture, .how__figure img { width: 100%; height: 100%; object-fit: cover; }
.how__figure .tag, .detail__tag, .gallery figcaption { position: absolute; left: 0; bottom: 0; }
.how__wave { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .how { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); padding-inline: var(--page-margin); align-items: start;
         max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto; }
  .how__media { grid-column: 1 / 7; grid-row: 1; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto;
                background: var(--color-concrete-200); gap: var(--hairline); }
  .how__figure--large { grid-column: 1 / -1; }
  /* páratlan számú kis kép: az utolsó kitölti a sort, ne maradjon üres szürke cella */
  .how__figure--small:last-child:nth-child(even) { grid-column: 1 / -1; }
  .how__text { grid-column: 8 / 13; grid-row: 1; padding: 0; position: sticky; top: calc(var(--header-height) + var(--space-2xl)); }
}

/* ---------- Részletfotó ---------- */
.detail { position: relative; background: var(--color-black); }
.detail__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 744px) { .detail__media img { aspect-ratio: 16 / 9; } }

/* ---------- Adatlap ---------- */
.specs { padding: var(--space-3xl) var(--page-margin); display: grid; gap: var(--space-xl); max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto; }
.specs__head .label { color: var(--color-concrete-600); margin-bottom: var(--space-s); }
.spec-table { border-top: var(--line-strong); }
.spec-table__row { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-s); padding: var(--space-s) 0; border-bottom: var(--line); }
.spec-table dt { color: var(--color-concrete-600); padding-top: var(--space-2xs); }
.spec-table dd { color: var(--color-black); }
@media (min-width: 1024px) {
  .specs { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
  .specs__head { grid-column: 1 / 5; }
  .spec-table { grid-column: 6 / 13; }
}

/* ---------- Márka röviden ---------- */
.brand { padding: var(--space-3xl) var(--page-margin); max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto; }
.brand__label { color: var(--color-concrete-600); margin-bottom: var(--space-m); }
@media (min-width: 1024px) {
  .brand { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
  .brand__col { grid-column: 4 / 10; }
}

/* ---------- Előrendelés ---------- */
.preorder { background: var(--color-black); color: var(--color-white); padding: var(--space-3xl) var(--page-margin); }
.preorder__wave { color: var(--color-white); margin: calc(var(--space-3xl) * -1) calc(var(--page-margin) * -1) var(--space-2xl); }
.preorder__inner { display: grid; gap: var(--space-xl); max-width: var(--content-max); margin-inline: auto; }
.preorder__label { color: var(--color-concrete-400); margin-bottom: var(--space-s); }
.preorder__note { margin-top: var(--space-m); color: var(--color-concrete-200); }
.preorder__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); padding-top: var(--space-m); margin-bottom: var(--space-m); border-top: var(--hairline) solid var(--color-concrete-800); }
.preorder__row .label { color: var(--color-concrete-400); }
.preorder__stock { margin-top: var(--space-s); color: var(--color-concrete-400); }
@media (min-width: 1024px) {
  .preorder__inner { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; }
  .preorder__text { grid-column: 1 / 7; }
  .preorder__buy { grid-column: 9 / 13; }
}

/* ---------- Lábléc ---------- */
.site-footer { background: var(--color-black); color: var(--color-white); padding-top: var(--space-2xl); padding-bottom: max(var(--space-l), env(safe-area-inset-bottom)); border-top: var(--hairline) solid var(--color-concrete-800); }
.site-footer__logo { height: calc(var(--text-h1) * 1.4); width: auto; margin-bottom: var(--space-xl); }
.site-footer__grid { display: grid; gap: var(--space-xl); }
.site-footer__title { color: var(--color-concrete-400); margin-bottom: var(--space-s); }
.site-footer__col ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); }
.site-footer__col a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-2xl); color: var(--color-concrete-400); }
.site-footer__bottom a { text-decoration: none; }
.site-footer__bottom a[aria-current] { color: var(--color-white); }
@media (hover: hover) and (pointer: fine) { .site-footer__col a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); } }
@media (min-width: 744px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__newsletter { grid-column: 1 / -1; }
  .site-footer__col ul { display: grid; gap: 0; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(3, 2fr) 5fr; }
  .site-footer__newsletter { grid-column: auto; }
}
.newsletter__row { display: flex; align-items: stretch; border-bottom: var(--hairline) solid var(--color-concrete-400); }
.newsletter__row:focus-within { border-bottom-color: var(--color-white); }
.newsletter__input { flex: 1; min-width: 0; height: var(--field-height); background: transparent; border: 0; font-size: var(--text-field); color: var(--color-white); }
.newsletter__input::placeholder { color: var(--color-concrete-400); }
.newsletter__input:focus { outline: none; }
.newsletter__btn { font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; padding-left: var(--space-s); min-height: var(--tap); }
.newsletter__msg { margin-top: var(--space-xs); min-height: 1.55em; color: var(--color-concrete-200); }
.newsletter__legal { color: var(--color-concrete-400); }

/* ---------- Termékoldal ---------- */
.product { padding-top: calc(var(--header-height) + var(--header-inset) * 2); }
.gallery { position: relative; }
.gallery__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { scroll-snap-align: start; max-width: none; }
.gallery__slide figure { position: relative; aspect-ratio: 4 / 5; background: var(--color-white); }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__counter { position: absolute; left: 0; bottom: 0; }
.gallery__slide figcaption { left: auto; right: 0; }
.product__info { padding: var(--space-m) var(--page-margin) var(--space-2xl); }
.product__eyebrow { color: var(--color-concrete-600); margin-bottom: var(--space-xs); }
.product__headline { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); }
.product__name { font-size: var(--text-h3); }
.product__compare { color: var(--color-concrete-600); font-size: var(--text-body); margin-right: var(--space-xs); }
.product__lead { margin: var(--space-s) 0 var(--space-m); color: var(--color-concrete-800); }
.product__note { margin-top: var(--space-s); color: var(--color-concrete-600); display: grid; gap: var(--space-2xs); }
.prose-section, .info-blocks { padding: var(--space-2xl) var(--page-margin); max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto; }
.info-blocks { display: grid; gap: var(--space-xl); border-top: var(--line); }
.info-block .label { color: var(--color-concrete-600); margin-bottom: var(--space-s); }
@media (min-width: 1024px) {
  .product { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--space-xl); padding-inline: var(--page-margin); max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto; }
  .gallery__track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; gap: var(--hairline); overflow: visible; background: var(--color-concrete-200); }
  .gallery__slide:first-child { grid-column: 1 / -1; }
  .gallery__counter { display: none; }
  .product__info { padding: 0; }
  .product__sticky { position: sticky; top: calc(var(--header-height) + var(--header-inset) * 2 + var(--space-l)); padding-bottom: var(--space-2xl); }
  .product__name { font-size: var(--text-h2); }
  .info-blocks { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
}

/* Ragadós vásárlósáv (mobil) */
.buybar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-s) max(var(--page-margin), env(safe-area-inset-right)) max(var(--space-s), env(safe-area-inset-bottom)) max(var(--page-margin), env(safe-area-inset-left));
  background: var(--color-white); border-top: var(--line);
  transform: translateY(100%); transition: transform var(--dur-ui) var(--ease-out);
}
.buybar.is-visible { transform: none; }
.buybar__info { display: grid; line-height: 1.3; }
.buybar__price { font-variant-numeric: tabular-nums; }
.buybar .buy-form { flex: 0 1 12rem; }
.buybar__btn { width: 100%; }
@media (min-width: 1024px) { .buybar { display: none; } }

/* ---------- Oldalak, űrlapok ---------- */
.page { padding-top: calc(var(--header-height) + var(--header-inset) * 2 + var(--space-2xl)); padding-bottom: var(--space-3xl); min-height: 70svh; }
.page--narrow { max-width: calc(36rem + var(--page-margin) * 2); }
.page > * + * { margin-top: var(--space-l); }
.page-head { margin-bottom: var(--space-xl); }
.page-head .label { color: var(--color-concrete-600); margin-bottom: var(--space-s); }
.notice { padding: var(--space-s) 0; border-top: var(--line-strong); border-bottom: var(--line); }
.notice--error p + p { margin-top: var(--space-2xs); }
.empty { display: grid; gap: var(--space-m); justify-items: start; }

.field { display: grid; gap: var(--space-2xs); }
.field + .field, .field-grid + .field, .field + .field-grid, .field-grid + .field-grid { margin-top: var(--space-m); }
.field__label { color: var(--color-concrete-600); }
.field__optional { text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }
.field__input {
  width: 100%; height: var(--field-height); padding: 0; border: 0; border-bottom: var(--line-field); background: transparent;
  font-size: var(--text-field); -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field__input:focus { outline: none; border-bottom-color: var(--color-black); }
.field__input:focus-visible { outline: none; }
.field__textarea { height: auto; min-height: var(--field-height); padding-top: var(--space-s); resize: vertical; }
.field__select { padding-right: var(--space-l); cursor: pointer; }
.field:has(.field__select) { position: relative; }
.field:has(.field__select)::after {
  content: ""; position: absolute; right: var(--space-2xs); bottom: calc(var(--field-height) / 2 - var(--space-2xs));
  width: var(--space-xs); height: var(--space-xs); border-right: var(--line-strong); border-bottom: var(--line-strong);
  transform: rotate(45deg); pointer-events: none;
}
.field--error:has(.field__select)::after { bottom: auto; top: calc(var(--text-label) * 1.3 + var(--space-2xs) + var(--field-height) / 2 - var(--space-xs)); }
.field--error .field__input { border-bottom-color: var(--color-black); }
.field__error { color: var(--color-black); }
.field__hint { color: var(--color-concrete-600); }
.field__row { display: flex; gap: var(--space-s); align-items: center; }
.field-grid { display: grid; gap: var(--space-m); }
@media (min-width: 744px) { .field-grid { grid-template-columns: 1fr 1fr; } .field-grid--zip { grid-template-columns: 1fr 2fr; } }

.check { display: flex; gap: var(--space-s); align-items: flex-start; min-height: var(--tap); padding-block: var(--space-xs); cursor: pointer; }
.check input, .option input {
  flex: none; width: var(--control-size); height: var(--control-size); margin: .15em 0 0; border: var(--line-strong); background: var(--color-white);
  -webkit-appearance: none; appearance: none; display: grid; place-items: center; cursor: pointer;
}
.check input::after, .option input::after { content: ""; width: calc(var(--control-size) / 2); height: calc(var(--control-size) / 2); background: var(--color-black); transform: scale(0); transition: transform var(--dur-micro) var(--ease-click); }
.check input:checked::after, .option input:checked::after { transform: scale(1); }
.check input:disabled { border-color: var(--color-concrete-400); }
.check input:disabled::after { background: var(--color-concrete-400); }
.check a { text-underline-offset: var(--underline-offset); }
.cookies .check input { background: transparent; border-color: var(--color-white); }
.cookies .check input::after { background: var(--color-white); }

.form-section { border: 0; padding: 0; margin: 0 0 var(--space-2xl); min-width: 0; }
.form-section__title { font-size: var(--text-h3); font-weight: var(--weight-light); margin-bottom: var(--space-l); padding: 0; }
.form-section__title .label { color: var(--color-concrete-600); vertical-align: middle; }
.form-section__hint { margin-top: var(--space-s); color: var(--color-concrete-600); }
.options { border-top: var(--line); margin: var(--space-m) 0; }
.option { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-s); align-items: start; padding: var(--space-m) 0; border-bottom: var(--line); cursor: pointer; }
.option__box { display: none; }
.option__body { display: grid; gap: var(--space-2xs); }
.option__desc { color: var(--color-concrete-600); }
.option__price { font-variant-numeric: tabular-nums; }
.pickup { display: grid; gap: var(--space-s); justify-items: start; margin-bottom: var(--space-m); }
.pickup__selected:empty { display: none; }
.pickup__manual { width: 100%; }
.ship-address__fields { margin-top: var(--space-m); }
.ship-address { margin-bottom: var(--space-m); }

.checkout { display: grid; gap: var(--space-xl); }
.checkout__aside, .cart__aside { display: grid; gap: var(--space-m); align-content: start; }
.checkout__secure { color: var(--color-concrete-600); }
@media (min-width: 1024px) {
  .checkout, .cart { grid-template-columns: 7fr 5fr; column-gap: var(--space-2xl); align-items: start; }
  .checkout__aside, .cart__aside { position: sticky; top: calc(var(--header-height) + var(--header-inset) * 2 + var(--space-l)); }
}
.mini-lines { border-top: var(--line-strong); }
.mini-lines li { display: flex; justify-content: space-between; gap: var(--space-s); padding: var(--space-s) 0; border-bottom: var(--line); max-width: none; }
.totals { display: grid; }
.totals__row { display: flex; justify-content: space-between; gap: var(--space-s); padding: var(--space-xs) 0; }
.totals__row dt { color: var(--color-concrete-600); }
.totals__row--total { border-top: var(--line-strong); margin-top: var(--space-xs); padding-top: var(--space-s); font-size: var(--text-price); font-weight: var(--weight-light); }
.totals__row--total dt { color: var(--color-black); }
.totals__note { color: var(--color-concrete-600); }

.cart { display: grid; gap: var(--space-xl); }
.cart__lines { border-top: var(--line-strong); }
.cart-line { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-m); padding: var(--space-m) 0; border-bottom: var(--line); max-width: none; }
.cart-line__media { aspect-ratio: 4 / 5; background: var(--color-white); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__top { display: flex; justify-content: space-between; gap: var(--space-s); }
.cart-line__name { text-decoration: none; }
.cart-line__meta { color: var(--color-concrete-600); margin-top: var(--space-2xs); }
.qty { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-s); }
.qty__btn { width: var(--tap); height: var(--tap); border: var(--line); display: grid; place-items: center; font-size: var(--text-body); }
.qty__btn:disabled { color: var(--color-concrete-400); cursor: not-allowed; }
.qty__value { min-width: 2ch; text-align: center; }
.qty__remove { margin-left: auto; }
.coupon__applied { display: flex; gap: var(--space-s); align-items: center; justify-content: space-between; }
.cart__shipping-note { color: var(--color-concrete-600); }
.currency-switch { display: flex; gap: var(--space-s); align-items: center; margin-top: var(--space-m); }
.currency-switch .label { color: var(--color-concrete-600); }
.currency-switch__btn { min-height: var(--tap); min-width: var(--tap); font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); color: var(--color-concrete-600); }
.currency-switch__btn[aria-pressed="true"] { color: var(--color-black); text-decoration: underline; text-underline-offset: var(--underline-offset); }

.order-summary { display: grid; gap: var(--space-l); }
.order-summary__addresses { display: grid; gap: var(--space-l); }
.order-summary__addresses .label, .status-list dt { color: var(--color-concrete-600); margin-bottom: var(--space-xs); }
@media (min-width: 744px) { .order-summary__addresses { grid-template-columns: 1fr 1fr; } }
.status-list { display: grid; gap: var(--space-m); border-top: var(--line-strong); padding-top: var(--space-m); }
.result__links { display: flex; flex-wrap: wrap; gap: var(--space-m); }

.stack-form { display: grid; gap: var(--space-m); max-width: 30rem; }
.stack-form .field + .field { margin-top: 0; }
.stack-form__links { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.stack-form__sub { margin-top: var(--space-l); color: var(--color-concrete-600); }
.account-nav { display: flex; flex-wrap: wrap; gap: var(--space-l); border-bottom: var(--line); margin-bottom: var(--space-xl); }
.account-nav a, .account-nav .link { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-concrete-600); }
.account-nav a[aria-current] { color: var(--color-black); text-decoration: underline; text-underline-offset: var(--underline-offset); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: var(--space-s) var(--space-s) var(--space-s) 0; border-bottom: var(--line); vertical-align: top; }
.data-table thead th { color: var(--color-concrete-600); border-bottom: var(--line-strong); }
.data-table .num { text-align: right; padding-right: 0; }
.pagination { display: flex; gap: var(--space-m); align-items: center; margin-top: var(--space-l); }
.prose > * + * { margin-top: var(--space-s); }

/* Értesítő sáv (kosárba került) */
.toast {
  position: fixed; z-index: 60; left: var(--header-inset); right: var(--header-inset);
  top: calc(max(var(--header-inset), env(safe-area-inset-top)) + var(--header-height) + var(--space-xs));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-s) var(--space-m); background: var(--color-black); color: var(--color-white);
  transform: translateY(calc(var(--space-s) * -1)); opacity: 0; transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: none; }
.toast a { color: var(--color-white); }
@media (min-width: 1024px) { .toast { left: auto; width: 24rem; } }

/* Sütisáv */
.cookies {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
  background: var(--color-black); color: var(--color-white); border-top: var(--hairline) solid var(--color-concrete-800);
  padding: var(--space-m) max(var(--page-margin), env(safe-area-inset-right)) max(var(--space-m), env(safe-area-inset-bottom)) max(var(--page-margin), env(safe-area-inset-left));
}
.cookies__inner { display: grid; gap: var(--space-m); max-width: var(--content-max); margin-inline: auto; }
.cookies__text { color: var(--color-concrete-200); }
.cookies__text a { color: var(--color-white); }
.cookies__choices { border: 0; padding: 0; display: grid; gap: 0; }
.cookies__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
.cookies .btn--primary { background: var(--color-white); color: var(--color-black); border-color: var(--color-white); }
.cookies .link { color: var(--color-white); }
@media (min-width: 1024px) { .cookies__inner { grid-template-columns: 1fr auto; align-items: center; } }

/* Kártyazseb-dialógus (átvételi pont térkép) */
.pickup-dialog { width: 100%; max-width: 60rem; height: min(90svh, 50rem); padding: 0; border: var(--line-strong); background: var(--color-white); }
.pickup-dialog::backdrop { background: var(--overlay-image); }
.pickup-dialog__bar { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-m); border-bottom: var(--line); }
.pickup-dialog__body { height: calc(100% - var(--tap) - var(--hairline)); }
.pickup-dialog__body > * { width: 100%; height: 100%; }

/* Csökkentett mozgás: nincs belépő, nincs hullám-kirajzolás */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js [data-enter] { opacity: 1; transform: none; }
  .js .wave path { stroke-dashoffset: 0; }
}