/*
 * ICE CUBE v2 – components.css (foundation; page builders: read only)
 * Every component of DESIGN.md §11 with its states, the brand elements of §4 and the mockup
 * figure of §10. Tokens only: no literal colours except the brand constants named in DESIGN §5.
 * Markup for each block: site/styleguide.html (source src/pages/styleguide.html) and src/README.md.
 *
 *  1 Icons, logo, mascot          9 Header (brand, shop), dropdown, subnav
 *  2 Buttons                     10 Drawers (navigation, cart), palette, dialog
 *  3 Form controls               11 Breadcrumbs, tabs, page headers
 *  4 Stepper                     12 Content blocks (family, audience, route, fees, lens, bands…)
 *  5 Chips, tags, badges         13 Product card, price block, pack switch, stock
 *  6 Notes, toasts, empty        14 Jégmérő
 *  7 Utility bar                 15 Cart line, summary, checkout steps, account parts
 *  8 Footer, Happy credit        16 Brand motif, partner wall, mockups, cookie, skip link
 */

/* ================================================================== 1. icons, logo, mascot */
.icon {
  display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--32 { width: 32px; height: 32px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.logo { display: inline-block; flex: none; line-height: 0; border-radius: var(--radius-s); }
.logo img { display: block; width: auto; height: 100%; }
.logo--footer { height: 96px; }

.mascot { display: block; width: auto; max-width: none; height: var(--mascot-h, 120px); }

/* ================================================================== 2. buttons (§11.1) */
.btn {
  --btn-h: 48px; --btn-px: 22px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border: 1.5px solid transparent; border-radius: var(--radius-s);
  font-family: var(--font-ui); font-size: var(--fs-button); font-weight: 700; line-height: 1;
  letter-spacing: var(--ls-button); font-stretch: 100%;
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 20px; height: 20px; }
.btn--l { --btn-h: 52px; --btn-px: 26px; }
.btn--s { --btn-h: 40px; --btn-px: 16px; font-size: var(--fs-button-s); gap: 8px; }
.btn--s .icon { width: 18px; height: 18px; }
@media (max-width: 1023px), (pointer: coarse) { .btn--s { --btn-h: 44px; } }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--yellow); color: var(--on-yellow); box-shadow: var(--button-inset); }
.btn--primary:hover { background: var(--yellow-hover); color: var(--on-yellow); }
.btn--primary:active { background: var(--yellow-press); box-shadow: none; transform: translateY(1px); }

.btn--secondary { background: var(--btn-2); color: var(--on-btn-2); }
.btn--secondary:hover { background: var(--btn-2-hover); color: var(--on-btn-2); }
.btn--secondary:active { background: var(--btn-2-press); transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--field); }
.btn--ghost:hover { background: var(--bg-2); color: var(--text); }
.btn--ghost:active { background: var(--bg-3); }

/* Ghost on navy: automatic inside .on-navy, or explicit with .btn--ghost-navy. */
.on-navy .btn--ghost, .btn--ghost-navy { background: transparent; color: var(--on-navy); border-color: var(--on-navy-2); }
.on-navy .btn--ghost:hover, .btn--ghost-navy:hover { background: var(--hover-on-navy); color: var(--on-navy); }
.on-navy .btn--ghost:active, .btn--ghost-navy:active { background: var(--press-on-navy); }
.on-light .btn--ghost { background: transparent; color: var(--text); border-color: var(--field); }
.on-light .btn--ghost:hover { background: var(--bg-2); }

.btn--text {
  --btn-h: 44px; --btn-px: 0px; background: none; border: 0; color: var(--link); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; gap: 6px;
}
.btn--text:hover { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 2px; }
.btn--text.btn--s { --btn-h: 36px; }
.on-navy .btn--text { color: var(--sky-soft); }
.on-navy .btn--text:hover { color: var(--on-navy); }
.btn--danger-text { --btn-h: 44px; --btn-px: 0px; background: none; border: 0; color: var(--danger); font-weight: 600; gap: 6px; }
.btn--danger-text:hover { color: var(--danger); text-decoration: underline; text-underline-offset: 3px; }

/* Disabled: primary and secondary go flat grey, ghost keeps its outline in --line. */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--bg-3); color: var(--text-3); border-color: transparent; box-shadow: none;
  cursor: not-allowed; transform: none; pointer-events: auto;
}
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { background: transparent; border-color: var(--line); color: var(--text-3); }
.on-navy .btn--ghost:disabled, .btn--ghost-navy:disabled, .on-navy .btn--ghost[aria-disabled="true"] { background: transparent; color: var(--on-navy); border-color: var(--on-navy-2); opacity: 0.5; }
.btn--text:disabled, .btn--text[aria-disabled="true"], .btn--danger-text:disabled { background: none; color: var(--text-3); text-decoration: none; }

/* Loading: spinner replaces the leading icon, label "Folyamatban…", width locked by JS, aria-busy. */
.btn[aria-busy="true"] { cursor: progress; }
.btn.is-success .icon { color: inherit; }
.spinner {
  display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ic-spin 0.8s linear infinite;
}
@keyframes ic-spin { to { transform: rotate(360deg); } }

/* Store buttons: text-led, never a redrawn badge (§11.1). */
.btn--store {
  --btn-h: 48px; padding: 0 18px 0 14px; gap: 10px; text-align: left;
  background: var(--navy-ink); color: var(--on-navy); border-color: var(--navy-ink);
}
.btn--store:hover { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.btn--store .icon { width: 22px; height: 22px; }
.btn--store .btn__stack { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.btn--store .btn__small { font-size: 11px; font-weight: 500; }
.btn--store .btn__big { font-size: 16px; font-weight: 700; }
.on-navy .btn--store { background: transparent; color: var(--on-navy); border-color: var(--on-navy-2); }
.on-navy .btn--store:hover { background: var(--hover-on-navy); }
.on-navy .btn--store:active { background: var(--press-on-navy); }
.store-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Icon button: 44 × 44 (§11.1). */
.icon-btn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-s);
  color: inherit; background: transparent; border: 0; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--bg-2); color: inherit; }
.icon-btn:active { background: var(--bg-3); }
.on-navy .icon-btn:hover { background: var(--hover-on-navy); }
.on-navy .icon-btn:active { background: var(--press-on-navy); }
.on-light .icon-btn:hover { background: var(--bg-2); }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { opacity: 0.4; background: transparent; cursor: not-allowed; }
.icon-btn--s { width: 36px; height: 36px; }

/* Inline text link with a trailing arrow ("Összes termék →"). */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--link); font-weight: 700; text-decoration: none;
}
.link-arrow .icon { width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-standard); }
.link-arrow:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover .icon { transform: translateX(3px); }
.on-navy .link-arrow { color: var(--sky-soft); }
.on-navy .link-arrow:hover { color: var(--on-navy); }

/* Phone number as a big selectable link (closing band, contact). */
.phone-link {
  display: inline-block; color: var(--text); text-decoration: none; user-select: text;
  font-family: var(--font-ui); font-weight: 800; font-stretch: 87.5%; font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 2vw + 20px, 40px); line-height: 1.1; white-space: nowrap;
}
.phone-link:hover { color: var(--link); }
.on-navy .phone-link { color: var(--on-navy); }
.on-navy .phone-link:hover { color: var(--sky-soft); }

/* ================================================================== 3. form controls (§11.2–11.3) */
.form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 20px; }
@media (min-width: 768px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row--zip { grid-template-columns: 140px minmax(0, 1fr); } }

.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; color: var(--text); }
.field__optional { font-weight: 400; color: var(--text-2); }
.field__hint { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--danger); }
.field__error .icon { width: 16px; height: 16px; margin-top: 1px; }

.input, .select, .textarea {
  display: block; width: 100%; min-width: 0; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--field); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.3;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 25%, transparent);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-3); color: var(--text-3); border-color: var(--line-2); cursor: not-allowed; }
.input[readonly], .textarea[readonly] { background: var(--bg-2); }
.input--s, .select.input--s { min-height: 40px; }
.select {
  padding-right: 42px; cursor: pointer;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
.textarea { min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
input[type="number"].input { -moz-appearance: textfield; }
input[type="search"].input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Valid (after a format check only): a 16 px check at the field end. */
.input-wrap { position: relative; }
.input-wrap > .input { padding-right: 42px; }
.input-wrap__valid { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--success); display: none; pointer-events: none; }
.input-wrap.is-valid .input-wrap__valid { display: block; }
.input-wrap__btn { position: absolute; right: 2px; top: 50%; translate: 0 -50%; }
.input-wrap--btn > .input { padding-right: 50px; }

/* Checkbox and radio: 20 px, 1.5 px --field, checked in --sel (§11.3). */
.check, .radio { display: inline-flex; align-items: flex-start; gap: 12px; padding-block: 10px; cursor: pointer; font-size: 16px; line-height: 1.4; color: var(--text); }
.check input, .radio input {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--field); background: var(--surface) center / 14px 14px no-repeat;
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.check input { border-radius: var(--radius-xs); }
.radio input { border-radius: 50%; }
.check input:hover, .radio input:hover { border-color: var(--text-3); }
.check input:checked { background-color: var(--sel); border-color: var(--sel); background-image: var(--check-mark); }
.check input:indeterminate { background-color: var(--sel); border-color: var(--sel); background-image: var(--dash-mark); }
.radio input:checked { border-color: var(--sel); background: var(--sel); box-shadow: inset 0 0 0 3.5px var(--surface); }
.check input[aria-invalid="true"], .radio input[aria-invalid="true"] { border-color: var(--danger); }
.check input:disabled, .radio input:disabled { background-color: var(--bg-3); border-color: var(--line-2); cursor: not-allowed; }
.check:has(input:disabled), .radio:has(input:disabled) { color: var(--text-3); cursor: not-allowed; }
.check__text small, .radio__text small { display: block; font-size: 14px; color: var(--text-2); }

/* Radio card: delivery and payment choices. The whole card is the label. */
.radio-card {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: start;
  padding: 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius-m);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.radio-card:hover { border-color: var(--field); }
.radio-card input {
  -webkit-appearance: none; appearance: none; grid-row: 1 / span 2; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--field); border-radius: 50%; background: var(--surface); cursor: pointer;
}
.radio-card input:checked { border-color: var(--sel); background: var(--sel); box-shadow: inset 0 0 0 3.5px var(--surface); }
.radio-card input:focus-visible { outline: none; }
.radio-card:has(input:checked) { border-color: var(--sel); box-shadow: inset 0 0 0 0.5px var(--sel); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.radio-card__title { font-weight: 700; line-height: 1.35; }
.radio-card__desc { grid-column: 2 / -1; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.radio-card__aside { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.radio-card:has(input:disabled) { color: var(--text-3); cursor: not-allowed; background: var(--bg-2); border-color: var(--line); }
.radio-card:has(input:disabled) .radio-card__desc { color: var(--text-3); }
.radio-cards { display: grid; gap: 12px; }

/* Toggle (role="switch"): track 44 × 26, thumb 20. Label on the left. */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; color: var(--text); }
.switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch__track {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--radius-round);
  background: var(--line-2); transition: background-color var(--dur-fast) var(--ease-standard);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--switch-thumb); box-shadow: var(--e1);
  transition: transform var(--dur-base) var(--ease-standard);
}
.switch__input:checked + .switch__track { background: var(--sel); }
.switch__input:checked + .switch__track::after { transform: translateX(18px); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--ring); outline-offset: 2px; }
.switch__input:disabled + .switch__track { opacity: 0.5; }
.switch__text small { display: block; font-size: 14px; color: var(--text-2); }

/* Segmented control: native radios (arrow keys for free). Options 38 tall + 3 padding. */
.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%;
  background: var(--bg-2); border-radius: var(--radius-s); border: 0;
}
.segmented__opt { position: relative; display: flex; flex: 1 1 auto; }
.segmented__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented__label, .segmented__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 38px; padding: 0 14px; border-radius: 4px;
  color: var(--text-2); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.segmented__label .icon, .segmented__link .icon { width: 18px; height: 18px; }
.segmented__opt:hover .segmented__label, .segmented__link:hover { color: var(--text); }
.segmented__input:checked + .segmented__label,
.segmented__link[aria-current="page"], .segmented__link.is-current { background: var(--surface); color: var(--text); box-shadow: var(--e1); }
.segmented__input:focus-visible + .segmented__label { outline: 2px solid var(--ring); outline-offset: 1px; }
.segmented__input:disabled + .segmented__label { color: var(--text-3); cursor: not-allowed; }
.segmented--s .segmented__label { min-height: 34px; padding: 0 12px; }
.segmented--block { display: flex; width: 100%; }
.on-navy .segmented { background: var(--hover-on-navy); }
.on-navy .segmented__label { color: var(--on-navy-2); }
.on-navy .segmented__opt:hover .segmented__label { color: var(--on-navy); }
.on-navy .segmented__input:checked + .segmented__label { background: var(--on-navy); color: var(--navy); box-shadow: none; }

/* ================================================================== 4. stepper (§11.4) */
.stepper {
  display: inline-grid; grid-template-columns: 44px minmax(0, 1fr) 44px; flex: none;
  width: 132px; height: 48px; border: 1.5px solid var(--field); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.stepper:hover { border-color: var(--text-3); }
.stepper:has(.stepper__input:focus) { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 25%, transparent); }
.stepper__btn { display: grid; place-items: center; color: var(--text); background: transparent; border-radius: 4px; transition: background-color var(--dur-fast) var(--ease-standard); }
.stepper__btn .icon { width: 20px; height: 20px; }
.stepper__btn:hover { background: var(--bg-2); }
.stepper__btn:active { background: var(--bg-3); }
.stepper__btn:focus-visible { outline-offset: -3px; }
.stepper__btn:disabled { color: var(--text-3); opacity: 0.55; background: transparent; cursor: not-allowed; }
.stepper__input {
  width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; text-align: center;
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
  -moz-appearance: textfield;
}
.stepper__input:focus { outline: none; }
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper--s { width: 120px; height: 44px; grid-template-columns: 40px minmax(0, 1fr) 40px; }
.stepper--block { width: 100%; }

/* ================================================================== 5. chips, tags, badges (§11.5) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--radius-s);
  background: transparent; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.chip::after { content: ""; position: absolute; inset: -5px 0; } /* 44 px hit area */
.chip:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.chip .icon { width: 16px; height: 16px; }
.chip__check { display: none; }
.chip__count { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.is-selected { background: var(--sel); border-color: var(--sel); color: var(--on-sel); }
.chip[aria-pressed="true"] .chip__check, .chip[aria-checked="true"] .chip__check, .chip.is-selected .chip__check { display: inline-block; }
.chip[aria-pressed="true"] .chip__count, .chip.is-selected .chip__count { color: inherit; }
.chip[aria-disabled="true"], .chip:disabled { color: var(--text-3); border-color: var(--line); background: transparent; cursor: default; }
.chip[aria-disabled="true"] .chip__count { color: var(--text-3); }
.on-navy .chip { color: var(--on-navy); border-color: var(--navy-line); }
.on-navy .chip:hover { background: var(--hover-on-navy); }

.chip-active {
  display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding-left: 12px;
  border-radius: var(--radius-s); background: var(--chip-active-bg); color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1;
}
.chip-active__x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-s); color: var(--text-2); }
.chip-active__x:hover { color: var(--text); background: var(--bg-3); }
.chip-active__x .icon { width: 16px; height: 16px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-xs); background: var(--tone-neutral-bg); color: var(--tone-neutral-text);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
}
.tag .icon { width: 14px; height: 14px; stroke-width: 2; }
.tag--premium { background: var(--ice-soft); color: var(--on-ice); }
.tag--info { background: var(--tone-info-bg); color: var(--tone-info-text); }
.tag--progress { background: var(--tone-progress-bg); color: var(--tone-progress-text); }
.tag--success { background: var(--tone-success-bg); color: var(--tone-success-text); }
.tag--warning { background: var(--tone-warning-bg); color: var(--tone-warning-text); }
.tag--danger { background: var(--tone-danger-bg); color: var(--tone-danger-text); }
.tag--neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-text); }

.count-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-round); background: var(--yellow); color: var(--on-yellow);
  font-family: var(--font-ui); font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.count-badge.is-bumping { animation: ic-bump var(--dur-slow) var(--ease-emphasized); }
@keyframes ic-bump { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Key–value list (specs, order details). */
.kv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-top: 1px solid var(--line); }
.kv > dt, .kv > dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv > dt { padding-right: 16px; color: var(--text-2); font-size: 15px; }
.kv > dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.kv__note { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-3); }

/* ================================================================== 6. notes, toasts, empty states */
.note {
  --note-c: var(--info); --note-bg: var(--info-bg);
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-left: 3px solid var(--note-c); border-radius: var(--radius-s); background: var(--note-bg);
  color: var(--text); font-size: 15px; line-height: 1.5;
}
.note > .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--note-c); }
.note__body > * + * { margin-top: 6px; }
.note__title { font-weight: 700; }
.note a:not([class]) { color: var(--text); text-decoration-color: var(--note-c); }
.note ul { margin: 6px 0 0; padding-left: 1.2em; }
.note--info { --note-c: var(--info); --note-bg: var(--info-bg); }
.note--success { --note-c: var(--success); --note-bg: var(--success-bg); }
.note--warning { --note-c: var(--warning); --note-bg: var(--warning-bg); }
.note--danger { --note-c: var(--danger); --note-bg: var(--danger-bg); }

.toast-region {
  position: fixed; z-index: var(--z-toast); right: 24px; bottom: 24px;
  display: grid; justify-items: end; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none;
  --ring: var(--focus-on-navy);
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 400px;
  padding: 10px 10px 10px 16px; min-height: 52px; border-radius: var(--radius-m);
  background: var(--toast-bg); color: var(--on-navy); box-shadow: var(--e2);
  font-size: 15px; line-height: 1.4; font-weight: 500;
  animation: ic-toast-in var(--dur-base) var(--ease-standard);
}
.toast > .icon { width: 20px; height: 20px; color: var(--sky-soft); }
.toast__text { flex: 1; min-width: 0; padding-block: 4px; }
.toast__action {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: var(--radius-s);
  color: var(--sky-soft); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.toast__action:hover { background: var(--hover-on-navy); color: var(--on-navy); }
.toast__close { color: var(--on-navy-2); }
.toast__close:hover { background: var(--hover-on-navy); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit); }
@keyframes ic-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 767px) {
  .toast-region { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; justify-items: stretch; }
  .toast { max-width: none; }
}

.empty-state { display: grid; justify-items: center; gap: 12px; max-width: 480px; margin-inline: auto; padding: 48px 0 64px; text-align: center; }
.empty-state__mascot { height: var(--mascot-h, 120px); width: auto; margin-bottom: 8px; }
.empty-state__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; font-stretch: 87.5%; }
.empty-state__text { color: var(--text-2); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ================================================================== 7. utility bar (§11.6) */
.utility { background: var(--sky); color: var(--on-sky); font-size: 13px; line-height: 1.2; font-weight: 500; --ring: var(--on-sky); }
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 36px; }
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.utility__switch { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.utility__site { display: inline-flex; align-items: center; min-height: 36px; }
.utility__site.is-current { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.utility__site.is-current:hover { text-decoration-thickness: 2px; }
.utility__sep { opacity: 0.55; }
.utility__meta { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.utility__link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-variant-numeric: tabular-nums; }
.utility__link .icon { width: 16px; height: 16px; }
.utility__mail { display: none; }
.utility__divider { width: 1px; height: 16px; background: currentColor; opacity: 0.35; }
.utility__demo { font-weight: 600; }
@media (min-width: 768px) { .utility__mail { display: inline-flex; } }
@media (max-width: 419px) {
  .utility { font-size: 12px; }
  .utility__inner { gap: 10px; }
  .utility__meta { gap: 10px; }
  .utility__link .icon { display: none; }
}
@media (max-width: 359px) { .utility__inner { flex-wrap: wrap; row-gap: 0; } .utility__divider { display: none; } } /* 320 px: the meta wraps to a second line */

/* ================================================================== 8. footer (§11.28) and Happy credit (§4.7) */
.site-footer { position: relative; color: var(--on-navy); --ring: var(--focus-on-navy); }
.site-footer__edge { position: relative; color: var(--navy-deep); margin-top: calc(-1 * clamp(20px, 3.4vw, 56px)); pointer-events: none; }
.site-footer__body { background: var(--navy-deep); padding: 48px 0 40px; }
.site-footer__grid { display: grid; gap: 40px; }
.site-footer__brand .logo { height: 96px; }
.site-footer__tagline { margin-top: 20px; max-width: 32ch; color: var(--on-navy-2); font-size: 15px; line-height: 1.5; }
.site-footer__social { display: flex; gap: 4px; margin-top: 16px; margin-left: -10px; }
.site-footer__brand .store-buttons { margin-top: 16px; }
.site-footer__title { margin-bottom: 14px; font-family: var(--font-ui); font-size: 18px; line-height: 1.3; font-weight: 700; font-stretch: 100%; letter-spacing: 0; color: var(--on-navy); }
.site-footer__phone {
  display: inline-block; color: var(--on-navy); text-decoration: none; user-select: text;
  font-size: var(--fs-price-m); line-height: var(--lh-price-m); font-weight: 800; font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.site-footer__phone:hover { color: var(--sky-soft); }
.site-footer__contacts { display: grid; gap: 12px; margin-top: 18px; }
.site-footer__contacts dt { font-size: 13px; line-height: 1.4; color: var(--on-navy-2); }
.site-footer__contacts dd { font-size: 15px; line-height: 1.45; }
.site-footer__contacts dd a { color: var(--on-navy); text-decoration: none; overflow-wrap: anywhere; }
.site-footer__contacts dd a:hover { color: var(--sky-soft); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__list { display: grid; gap: 2px; }
.site-footer__list a { display: inline-flex; align-items: center; min-height: 36px; color: var(--on-navy-2); text-decoration: none; font-size: 15px; }
.site-footer__list a:hover { color: var(--on-navy); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__list a[aria-current="page"] { color: var(--on-navy); }
.site-footer__small { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 12px; font-size: 13px; color: var(--on-navy-2); text-decoration: none; }
.site-footer__small:hover { color: var(--on-navy); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__theme { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--navy-line); }
.site-footer__theme-label { font-size: 14px; font-weight: 600; color: var(--on-navy-2); }
.site-footer__legal { display: grid; gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--navy-line); }
.site-footer__company { font-size: 13px; line-height: 1.6; color: var(--on-navy-2); max-width: 64ch; }
.site-footer__company span { white-space: nowrap; }
.site-footer__bar { background: var(--footer-bar); color: var(--on-footer-bar); font-size: 13px; line-height: 1.4; }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; min-height: 48px; padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
.site-footer__muted { opacity: 0.8; cursor: default; }
.site-footer__bar-btn { display: inline-flex; align-items: center; min-height: 36px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.site-footer__bar-btn:hover { text-decoration-thickness: 2px; }
@media (min-width: 768px) {
  .site-footer__body { padding: 64px 0 48px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .site-footer__brand { grid-column: 1 / 5; }
  .site-footer__contact { grid-column: 5 / 8; }
  .site-footer__shop { grid-column: 8 / 10; }
  .site-footer__ice { grid-column: 10 / 13; }
  .site-footer__legal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
}

/* Happy Solutions credit block – exact spec, DESIGN.md §4.7. */
.hs-credit { display: flex; align-items: center; gap: 16px; }
.hs-credit__lockup { display: flex; align-items: center; gap: 12px; flex: none; }
.hs-credit__tile { width: 40px; height: 40px; border-radius: 6px; background: var(--hs-cream); display: grid; place-items: center; }
.hs-credit__tile img { display: block; width: 23px; height: 28px; }
.hs-credit__wordmark { font: 800 13px/1 var(--font-ui); font-stretch: 100%; letter-spacing: 0.06em; color: var(--hs-wordmark); white-space: nowrap; }
.hs-credit__text { border-left: 1px solid var(--navy-line); padding-left: 16px; font-size: 13px; line-height: 1.45; }
.hs-credit__by { color: var(--on-navy); font-weight: 500; }
.hs-credit__co { color: var(--on-navy-2); }
@media (max-width: 767px) {
  .hs-credit { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hs-credit__text { border-left: 0; padding-left: 0; }
}

/* ================================================================== 9. header (§11.7–11.8) */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header);
  background: var(--navy); color: var(--on-navy); --ring: var(--focus-on-navy);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--e1); }
.site-header__bar { display: flex; align-items: center; gap: 16px; height: var(--header-h-mobile); }
.site-header__logo { height: 44px; }
.site-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-header__cta { display: none; }
.header-phone {
  display: none; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border-radius: var(--radius-s);
  color: var(--on-navy); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
}
.header-phone .icon { width: 20px; height: 20px; color: var(--sky-soft); }
.header-phone:hover { color: var(--on-navy); background: var(--hover-on-navy); }
@media (min-width: 768px) { .site-header__logo { height: 52px; } }
@media (min-width: 1024px) {
  .site-header__bar { height: var(--header-h); gap: 32px; }
  .site-header__logo { height: 60px; }
  .site-header__cta { display: inline-flex; margin-left: 8px; }
  .site-header__call, .site-header__menu { display: none; }
}
@media (min-width: 1280px) { .header-phone { display: inline-flex; } }

.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: 2px; }
.site-nav__item { position: relative; }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
  border-radius: var(--radius-s); color: var(--on-navy); background: none;
  font-family: var(--font-ui); font-size: var(--fs-nav); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 1px;
  background: var(--on-navy-2); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
}
.site-nav__link:hover { color: var(--on-navy); text-decoration: none; }
.site-nav__link:hover::after { opacity: 1; }
.site-nav__link.is-current::after, .site-nav__link[aria-current="page"]::after { opacity: 1; height: 3px; bottom: 4px; background: var(--sky); }
.site-nav__trigger .icon { width: 16px; height: 16px; color: var(--on-navy-2); transition: transform var(--dur-base) var(--ease-standard); }
.site-nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__trigger { padding-right: 24px; }
.site-nav__trigger::after { right: 24px; }
@media (min-width: 1024px) { .site-nav { display: block; } }

/* Shop header: logo 48 | "Webshop" */
.shop-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.site-header--shop .site-header__logo { height: 40px; }
.shop-brand__divider { width: 1px; height: 28px; background: var(--navy-line); }
.shop-brand__label { color: var(--on-navy-2); font-size: 16px; font-weight: 700; font-stretch: 87.5%; text-decoration: none; white-space: nowrap; }
.shop-brand__label:hover { color: var(--on-navy); }
@media (min-width: 1024px) {
  .site-header--shop .site-header__logo { height: 48px; }
  .site-header--shop .site-header__bar { gap: 24px; }
}
@media (max-width: 374px) {
  .site-header--shop .site-header__bar { gap: 8px; }
  .site-header--shop .site-header__actions { gap: 0; }
  .shop-brand { gap: 8px; }
}
@media (max-width: 359px) { .shop-brand__divider, .shop-brand__label { display: none; } }

.search-trigger {
  display: none; align-items: center; gap: 10px; width: 280px; height: 44px; padding: 0 8px 0 12px;
  border: 1.5px solid var(--navy-line); border-radius: var(--radius-s); background: var(--hover-on-navy);
  color: var(--on-navy-2); font-size: 15px; font-weight: 500; text-align: left; cursor: text;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.search-trigger:hover { border-color: var(--on-navy-2); background: var(--press-on-navy); }
.search-trigger .icon { width: 20px; height: 20px; }
.search-trigger__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-trigger__short { display: none; }
.search-trigger__key {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border: 1px solid var(--navy-line); border-radius: var(--radius-xs);
  font: 600 12px/1 var(--font-ui); color: var(--on-navy-2);
}
@media (min-width: 1024px) {
  .search-trigger { display: inline-flex; }
  .site-header__search { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .search-trigger { width: 168px; }
  .search-trigger__long { display: none; }
  .search-trigger__short { display: inline; }
  .site-nav--shop .site-nav__link { padding: 0 10px; }
  .site-nav--shop .site-nav__link::after { left: 10px; right: 10px; }
  .site-nav--shop .site-nav__trigger { padding-right: 22px; }
}

.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: var(--radius-s); color: var(--on-navy); font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.cart-btn:hover { background: var(--hover-on-navy); color: var(--on-navy); }
.cart-btn:active { background: var(--press-on-navy); }
.cart-btn__icon { position: relative; display: grid; place-items: center; }
.cart-btn .count-badge { position: absolute; top: -8px; right: -11px; box-shadow: 0 0 0 2px var(--navy); }
.cart-btn__label { display: none; }
.cart-btn__meter {
  position: absolute; left: 50%; bottom: 2px; width: 48px; height: 4px; translate: -50% 0;
  border-radius: 2px; background: var(--navy-line); overflow: hidden;
}
.cart-btn__meter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--on-navy-2); }
.cart-btn__fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--sky); transition: width var(--dur-base) var(--ease-standard); }
@media (max-width: 1279px) { .cart-btn { padding: 0; justify-content: center; width: 44px; } }
@media (min-width: 1280px) {
  .cart-btn__label { display: inline; }
  .cart-btn__meter { left: auto; right: 10px; translate: none; }
}

.site-header__account.is-signed-in::after {
  content: ""; position: absolute; top: 10px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sky); box-shadow: 0 0 0 2px var(--navy);
}

/* Termékek dropdown: panel e2, radius 10, padding 8; rows 56 with 40 × 50 studio thumbs. */
.dropdown {
  position: absolute; top: calc(100% + 18px); left: 0; z-index: var(--z-dropdown);
  width: 320px; padding: 8px; border-radius: var(--radius-m);
  background: var(--surface); color: var(--text); box-shadow: var(--e2); --ring: var(--focus);
}
.dropdown:not([hidden]) { animation: ic-drop-in var(--dur-base) var(--ease-standard); }
@keyframes ic-drop-in { from { opacity: 0; transform: translateY(-8px); } }
.dropdown__row {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 4px 12px 4px 4px;
  border-radius: var(--radius-s); color: var(--text); text-decoration: none;
}
.dropdown__row:hover, .dropdown__row:focus-visible { background: var(--bg-2); color: var(--text); text-decoration: none; }
.dropdown__thumb { flex: none; width: 40px; height: 50px; object-fit: cover; border-radius: var(--radius-xs); background: var(--studio-stage); }
.dropdown__text { display: grid; gap: 2px; min-width: 0; }
.dropdown__label { font-size: 16px; font-weight: 600; line-height: 1.25; }
.dropdown__meta { font-size: 13px; font-weight: 500; color: var(--text-2); }
.dropdown__row--all { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 var(--radius-s) var(--radius-s); }

/* Shop subnav (≥ 1024, not sticky). */
.subnav { display: none; position: relative; z-index: var(--z-subnav); background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--subnav-h); }
.subnav__cats { display: flex; align-items: center; gap: 4px; margin-left: -12px; }
.subnav__link {
  position: relative; display: inline-flex; align-items: center; height: var(--subnav-h); padding: 0 12px;
  color: var(--text-2); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.subnav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--sel); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.subnav__link:hover { color: var(--text); text-decoration: none; }
.subnav__link.is-current { color: var(--text); }
.subnav__link.is-current::after { opacity: 1; }
.subnav__tools { display: flex; align-items: center; gap: 20px; }
.subnav__min { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.subnav__min .icon { width: 16px; height: 16px; }
@media (min-width: 1024px) { .subnav { display: block; } }

/* ================================================================== 10. drawers, palette, dialog */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end; }
.drawer__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard); }
.drawer__panel {
  position: relative; display: flex; flex-direction: column; width: min(360px, 100%); height: 100%;
  background: var(--surface); color: var(--text); box-shadow: var(--e2);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-standard);
  overflow: hidden; overscroll-behavior: contain;
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; min-height: 72px; padding: 10px 10px 10px 20px; }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.drawer__foot { flex: none; }
@media (prefers-reduced-motion: reduce) { .drawer__panel { transform: none; } .drawer__scrim { opacity: 1; } }

/* Mobile navigation drawer: navy, links 56 tall 20/700, current with a 3 px sky bar. */
.nav-drawer .drawer__panel { width: min(360px, 100%); background: var(--navy); color: var(--on-navy); --ring: var(--focus-on-navy); }
.nav-drawer .drawer__head { min-height: 80px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.nav-drawer__logo { height: 56px; }
.nav-drawer__list { border-top: 1px solid var(--navy-line); }
.nav-drawer__link {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 20px; border-bottom: 1px solid var(--navy-line);
  color: var(--on-navy); font-size: 20px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
.nav-drawer__link .icon { width: 20px; height: 20px; color: var(--on-navy-2); }
.nav-drawer__link:hover { background: var(--hover-on-navy); color: var(--on-navy); }
.nav-drawer__link.is-current::before, .nav-drawer__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--sky); }
.nav-drawer__sub { padding: 6px 0 10px; border-bottom: 1px solid var(--navy-line); }
.nav-drawer__sublink { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px 0 32px; color: var(--on-navy-2); font-size: 16px; font-weight: 600; text-decoration: none; }
.nav-drawer__sublink:hover { color: var(--on-navy); background: var(--hover-on-navy); }
.nav-drawer__sublink .dropdown__thumb { width: 32px; height: 40px; }
.nav-drawer__tools { padding: 20px 20px 0; display: grid; gap: 10px; }
.nav-drawer__tools-label { font-size: 14px; font-weight: 600; color: var(--on-navy-2); }
.nav-drawer__foot { display: grid; gap: 14px; margin-top: auto; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.nav-drawer__phone { color: var(--on-navy); font-size: 28px; font-weight: 800; font-stretch: 87.5%; line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums; }
.nav-drawer__phone:hover { color: var(--sky-soft); }
.nav-drawer__mail { color: var(--sky-soft); font-weight: 600; justify-self: start; }
.nav-drawer__switch { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--on-navy-2); }
.nav-drawer__switch a { color: var(--on-navy); font-weight: 600; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.nav-drawer__switch a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nav-drawer .drawer__body { display: flex; flex-direction: column; }

/* Mini-cart drawer (§11.20): 420 px, surface, sticky foot. */
.cart-drawer .drawer__panel { width: min(420px, 100%); background: var(--surface); --ring: var(--focus); }
.cart-drawer .drawer__head { border-bottom: 1px solid var(--line); padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.cart-drawer__title { font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: 800; font-stretch: 87.5%; }
.cart-drawer__title .tabular { font-variant-numeric: tabular-nums; }
.cart-drawer .drawer__body { padding: 0 20px; }
.cart-drawer__foot { display: grid; gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
.cart-drawer__totals { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cart-drawer__totals-label { font-weight: 700; }
.cart-drawer__totals-sub { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.cart-drawer__fee { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.cart-drawer__warn { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--danger); }
.cart-drawer__warn .icon { width: 18px; height: 18px; margin-top: 1px; }
.cart-drawer .empty-state { padding: 40px 0; }

/* Search palette (§11.10). */
.palette { position: fixed; inset: 0; z-index: var(--z-palette); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.palette__scrim { position: absolute; inset: 0; background: var(--scrim); animation: ic-fade-in var(--dur-base) var(--ease-standard); }
.palette__panel {
  position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(88vh - 16px);
  border-radius: var(--radius-m); background: var(--surface); color: var(--text); box-shadow: var(--e2); overflow: hidden;
  --ring: var(--focus); animation: ic-drop-in var(--dur-base) var(--ease-standard);
}
@keyframes ic-fade-in { from { opacity: 0; } }
.palette__field { display: flex; align-items: center; gap: 12px; flex: none; height: 56px; padding: 0 8px 0 18px; border-bottom: 1px solid var(--line); }
.palette__field > .icon { color: var(--text-2); }
.palette__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font-size: 18px; outline: none; }
.palette__input::placeholder { color: var(--text-3); opacity: 1; }
.palette__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.palette__esc { flex: none; height: 26px; padding: 0 7px; border: 1px solid var(--line-2); border-radius: var(--radius-xs); color: var(--text-2); font-size: 12px; font-weight: 600; }
.palette__esc:hover { color: var(--text); border-color: var(--field); }
.palette__body { overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.palette__section + .palette__section { margin-top: 4px; }
.palette__group-title { padding: 12px 12px 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.palette__popular { padding: 8px 12px 16px; }
.palette__popular .chips { margin-top: 6px; }
.palette__option {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 5px 12px 5px 5px;
  border-radius: var(--radius-s); color: var(--text); text-decoration: none; cursor: pointer; scroll-margin: 8px;
}
.palette__option:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.palette__option[aria-selected="true"] { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--sel); }
.palette__option--page { min-height: 52px; padding-left: 12px; }
.palette__option--page > .icon { width: 20px; height: 20px; color: var(--text-2); }
.palette__option--all { min-height: 48px; padding-left: 12px; font-weight: 700; color: var(--link); }
.palette__option--all .icon { width: 20px; height: 20px; }
.palette__thumb { flex: none; width: 40px; height: 50px; object-fit: cover; border-radius: var(--radius-xs); background: var(--studio-stage); }
.palette__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.palette__name { font-size: 15px; font-weight: 500; line-height: 1.3; }
.palette__name b, .palette__name mark { font-weight: 700; background: none; color: inherit; }
.palette__meta { font-size: 13px; line-height: 1.3; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.palette__price { flex: none; margin-left: 12px; font-weight: 800; font-stretch: 87.5%; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.palette__empty { padding: 20px 12px 24px; color: var(--text-2); }
.palette__empty strong { color: var(--text); }
.palette__foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.palette__foot kbd { font: 600 11px/1 var(--font-ui); padding: 3px 5px; border: 1px solid var(--line-2); border-radius: var(--radius-xs); color: var(--text-2); }
@media (max-width: 767px) {
  .palette { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; }
  .palette__panel { max-height: calc(100dvh - 16px); }
  .palette__foot { display: none; }
}

/* Dialog (rare; prefer inline flows). */
.dialog { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; }
.dialog__scrim { position: absolute; inset: 0; background: var(--scrim); animation: ic-fade-in var(--dur-base) var(--ease-standard); }
.dialog__panel {
  position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 28px; border-radius: var(--radius-m); background: var(--surface); color: var(--text); box-shadow: var(--e3);
  --ring: var(--focus); animation: ic-drop-in var(--dur-base) var(--ease-standard);
}
.dialog__close { position: absolute; top: 8px; right: 8px; }
.dialog__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; font-stretch: 87.5%; padding-right: 40px; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ================================================================== 11. breadcrumbs, tabs, page headers */
.breadcrumbs { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--text-2); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs__item > .icon { width: 16px; height: 16px; color: var(--text-3); }
.breadcrumbs a { color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current="page"] { color: var(--text-2); }
.breadcrumbs .breadcrumbs__back { display: none; }
.on-navy .breadcrumbs, .on-navy .breadcrumbs a, .on-navy .breadcrumbs [aria-current="page"], .on-navy .breadcrumbs__item > .icon { color: var(--on-navy-2); }
.on-navy .breadcrumbs a:hover { color: var(--on-navy); }
@media (max-width: 767px) {
  .breadcrumbs__list { display: none; }
  .breadcrumbs .breadcrumbs__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-2); text-decoration: none; font-weight: 600; }
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 48px; padding: 0 14px;
  color: var(--text-2); background: none; font-size: var(--fs-nav); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--sel); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.tab:hover { color: var(--text); text-decoration: none; }
.tab[aria-selected="true"], .tab[aria-pressed="true"], .tab[aria-current="page"], .tab.is-current { color: var(--text); }
.tab[aria-selected="true"]::after, .tab[aria-pressed="true"]::after, .tab[aria-current="page"]::after, .tab.is-current::after { opacity: 1; }
.tab:focus-visible { outline-offset: -2px; }
.tab__count { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Brand inner pages: hero gradient + back range, H1 cols 1–7, lead cols 8–12 (§11.12). */
.page-header { position: relative; overflow: hidden; padding: 40px 0 48px; background: var(--hero-gradient); color: var(--on-navy); --ring: var(--focus-on-navy); }
.page-header .mtn-back { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(160px, 15vw, 220px); pointer-events: none; }
.page-header__inner { position: relative; display: grid; gap: 16px; }
.page-header .breadcrumbs { margin-bottom: 8px; }
.page-header__title { color: var(--on-navy); }
.page-header__lead { color: var(--on-navy-2); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 520px; }
@media (min-width: 768px) { .page-header { padding: 56px 0 72px; } }
@media (min-width: 1024px) {
  .page-header__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
  .page-header__inner > .breadcrumbs { grid-column: 1 / -1; }
  .page-header__title { grid-column: 1 / 8; }
  .page-header__lead { grid-column: 8 / 13; }
}

/* Shop pages: light header on --bg-2 (§11.12). */
.shop-header { padding: 32px 0 40px; background: var(--bg-2); }
.shop-header__title { margin-top: 12px; }
.shop-header__line { margin-top: 10px; color: var(--text-2); }
.shop-header .breadcrumbs + .shop-header__title { margin-top: 8px; }

/* ================================================================== 12. content blocks (§11.13) */
/* Family tiles: A (Prémium) cols 1–7, B and C stacked in cols 8–12. */
.family-tiles { display: grid; gap: 40px 24px; }
.family-tile { display: grid; align-content: start; gap: 0; }
.family-tile__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-l); background: var(--studio-stage); }
.family-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.family-tile:hover .family-tile__media img { transform: scale(1.02); }
.family-tile__title { margin-top: 20px; }
.family-tile__fact { margin-top: 8px; color: var(--text-2); max-width: 46ch; }
.family-tile__link { margin-top: 4px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .family-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-tile--a { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .family-tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .family-tile--a { grid-column: 1 / 8; grid-row: 1 / 3; }
  .family-tile--b { grid-column: 8 / 13; grid-row: 1; }
  .family-tile--c { grid-column: 8 / 13; grid-row: 2; }
  .family-tile--b .family-tile__media, .family-tile--c .family-tile__media { aspect-ratio: 16 / 10; }
}

/* Audience index: an editorial list of 4 rows. */
.audience { border-top: 1px solid var(--line); }
.audience__row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px 20px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.audience__name { grid-column: 1 / -1; font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 800; font-stretch: 75%; letter-spacing: var(--ls-h2); }
.audience__body { grid-column: 1; }
.audience__text { color: var(--text-2); }
.audience__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.audience__links a { font-weight: 600; }
.audience__media { grid-column: 2; grid-row: 2; width: 96px; aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden; background: var(--studio-stage); }
.audience__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .audience__row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 32px 0; align-items: center; }
  .audience__name { grid-column: 1 / 6; }
  .audience__body { grid-column: 6 / 10; }
  .audience__media { grid-column: 10 / 13; grid-row: 1; justify-self: end; width: 160px; }
}

/* Ordering route ("Így jut el Önhöz a jég"): a Méretvonal-style line with 4 stops. */
.route { position: relative; display: grid; gap: 28px; padding-left: 30px; }
.route::before { content: ""; position: absolute; left: 4.25px; top: 8px; bottom: 8px; width: 1.5px; background: var(--dimension-line); }
.route__stop { position: relative; }
.route__stop::before { content: ""; position: absolute; left: -30px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--dimension-line); }
.route__label { font-size: 13px; font-weight: 600; color: var(--on-navy-2); font-variant-numeric: tabular-nums; }
.route__title { margin-top: 2px; font-family: var(--font-ui); font-size: 18px; line-height: 1.3; font-weight: 700; }
.route__text { margin-top: 6px; color: var(--on-navy-2); font-size: 15px; line-height: 1.5; }
.route__text a { color: var(--sky-soft); }
@media (min-width: 1024px) {
  .route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-left: 0; padding-top: 34px; }
  .route::before { left: 0; right: 0; top: 4.25px; bottom: auto; width: auto; height: 1.5px; }
  .route::after { content: ""; position: absolute; right: 0; top: -2px; width: 1.5px; height: 14px; background: var(--dimension-line); }
  .route__stop::before { left: 0; top: -34px; }
}

/* Fees card ("Áraink 2026"). */
.fees-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--text); --ring: var(--focus); }
.fees-card__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; font-stretch: 87.5%; }
.fees-card__rows { margin-top: 12px; }
.fees-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fees-card__label { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.fees-card__label small { display: block; font-size: 13px; color: var(--text-2); font-weight: 500; }
.fees-card__label [data-terms] { white-space: nowrap; } /* "22:00–07:00" never breaks at the dash */
.fees-card__value { flex: 0 1 auto; max-width: 58%; margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; text-wrap: balance; }
.fees-card__note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.fees-card .link-arrow { margin-top: 8px; }
@media (min-width: 1024px) { .fees-card { padding: 32px; } }

/* Loupe / macro lens: the real macro photo in a circle with a 4 px sky ring. */
.loupe { display: block; width: var(--loupe-size, 280px); height: var(--loupe-size, 280px); border-radius: 50%; overflow: hidden; border: 4px solid var(--loupe-ring); box-shadow: var(--e2); background: var(--studio-stage); }
.loupe img { width: 100%; height: 100%; object-fit: cover; }
.macro-lens { margin: 0; width: max-content; max-width: 100%; }
.macro-lens .loupe { --loupe-size: 200px; }
.macro-lens__caption { margin-top: 12px; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-3); }
.on-navy .macro-lens__caption, .section--navy .macro-lens__caption { color: var(--on-navy-2); }
.macro-lens--overlap { position: relative; z-index: 1; margin-top: -50px; }
@media (min-width: 768px) { .macro-lens .loupe { --loupe-size: 280px; } .macro-lens--overlap { margin-top: -70px; } }

/* Campaign band: yellow, max one per page, a ridge tear into the following navy band. */
.campaign-band { position: relative; background: var(--band-yellow); color: var(--on-yellow); padding-top: var(--section-y); --ring: var(--on-yellow); }
/* On yellow the secondary button stays navy in both themes (§11 campaign band: "secondary navy"). */
.campaign-band, .section--yellow { --btn-2: var(--navy); --btn-2-hover: var(--navy-deep); --btn-2-press: var(--navy-ink); --on-btn-2: var(--on-navy); }
.campaign-band__inner { display: grid; gap: 24px; padding-bottom: clamp(40px, 4vw, 72px); }
.campaign-band__title { color: var(--on-yellow); }
.campaign-band__fact { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; max-width: 440px; }
.campaign-band__aside > * + * { margin-top: 20px; }
.campaign-band .edge { color: var(--navy); }
@media (min-width: 1024px) {
  .campaign-band__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .campaign-band__title { grid-column: 1 / 8; }
  .campaign-band__aside { grid-column: 8 / 13; }
}

/* App band: hero gradient, copy 5 cols, mockup 7 cols (max 760 px). */
.app-band { position: relative; overflow: hidden; background: var(--hero-gradient); color: var(--on-navy); padding-block: var(--section-y); --ring: var(--focus-on-navy); }
.app-band__inner { display: grid; gap: 40px; align-items: center; }
.app-band__copy > * + * { margin-top: 16px; }
.app-band__copy .lead { color: var(--on-navy-2); }
.app-band__copy .store-buttons { margin-top: 24px; }
.app-band__media .mockup { max-width: 760px; margin-inline: auto; }
@media (min-width: 1024px) {
  .app-band__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .app-band__copy { grid-column: 1 / 6; }
  .app-band__media { grid-column: 6 / 13; }
}

/* Closing band: white, mascot 4 cols, copy 8 cols. */
.closing-band__inner { display: grid; gap: 32px; align-items: center; }
.closing-band__mascot { height: clamp(240px, 26vw, 420px); width: auto; margin-inline: auto; }
.closing-band__copy > * + * { margin-top: 16px; }
.closing-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (min-width: 1024px) {
  .closing-band__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .closing-band__media { grid-column: 1 / 5; }
  .closing-band__copy { grid-column: 5 / 13; }
}

/* Accordion (FAQ): native details/summary with hairlines; no cards. */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0;
  list-style: none; font-family: var(--font-ui); font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--text);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ""; }
.accordion__summary > .icon { width: 24px; height: 24px; color: var(--text-2); transition: transform var(--dur-base) var(--ease-standard); }
.accordion__item[open] > .accordion__summary > .icon { transform: rotate(180deg); }
.accordion__summary:hover { color: var(--link); }
.accordion__body { max-width: 68ch; padding-bottom: 20px; color: var(--text-2); }
.accordion__body > * + * { margin-top: 12px; }
.on-navy .accordion, .on-navy .accordion__item { border-color: var(--navy-line); }
.on-navy .accordion__summary { color: var(--on-navy); }
.on-navy .accordion__body { color: var(--on-navy-2); }

/* Data table: header row --bg-2, hairlines, numbers right-aligned; scrolls inside its own box. */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-scroll.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.table-caption { margin-bottom: 16px; }
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table caption { caption-side: top; text-align: left; padding-bottom: 16px; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; font-stretch: 87.5%; }
.data-table th { padding: 12px 16px; background: var(--bg-2); color: var(--text-2); font-size: 14px; font-weight: 700; text-align: left; white-space: nowrap; }
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; vertical-align: top; }
.data-table .num, .data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { position: sticky; left: 0; z-index: 1; }
.data-table td:first-child { background: var(--table-bg); font-weight: 600; }
/* Words never split (Chrome narrows table columns for break-word too); a wide table scrolls in .table-scroll. */
.data-table td { overflow-wrap: normal; }
@media (max-width: 767px) { .data-table td, .data-table th { padding: 12px; } .data-table td { font-size: 14px; } .data-table td:first-child { min-width: 140px; } }

/* Vertical timeline (koszonjuk, rolunk). */
.timeline { position: relative; display: grid; gap: 24px; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: -30px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sel); }
.timeline__time { font-size: 13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.timeline__title { margin-top: 2px; font-family: var(--font-ui); font-size: 18px; line-height: 1.3; font-weight: 700; }
.timeline__text { margin-top: 4px; color: var(--text-2); }
.timeline__item.is-upcoming::before { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2); }

/* Address card (kapcsolat): 4:3 navy card with the back range and a pin. Never a map embed. */
.location-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; padding: 24px; overflow: hidden; border-radius: var(--radius-m); background: var(--navy); color: var(--on-navy); --ring: var(--focus-on-navy); }
.location-card .mtn-back { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.location-card__pin { position: absolute; top: 30%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy-deep); box-shadow: 0 0 0 6px var(--hover-on-navy); color: var(--yellow); }
.location-card__pin .icon { width: 24px; height: 24px; }
.location-card__label { position: relative; font-size: 14px; font-weight: 600; color: var(--on-navy-2); }
.location-card__address { position: relative; margin-top: 4px; color: var(--on-navy); }
.location-card__address a { color: inherit; }

/* ================================================================== 13. product card, price block, stock (§11.15–11.18) */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.product-list { display: grid; }

.product-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden;
  container-type: inline-size; container-name: card; --ring: var(--focus);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.product-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--studio-stage); }
.product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.product-card__media .img-pending { position: absolute; inset: 0; aspect-ratio: auto !important; }
.product-card__tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.product-card__meta { font-size: 13px; line-height: 1.4; font-weight: 500; letter-spacing: 0.005em; color: var(--text-2); }
.product-card__name {
  margin-top: 4px; font-family: var(--font-ui); font-size: 18px; line-height: 1.3; font-weight: 700; font-stretch: 100%; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
}
.product-card__name b { font-weight: inherit; box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--sky) 34%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.product-card__link { color: var(--text); text-decoration: none; }
.product-card__link:hover { color: var(--text); text-decoration: none; }
.product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__link:focus-visible { outline: none; }
.product-card:has(.product-card__link:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.product-card__price { margin-top: 12px; }
.product-card__sub { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--text-2); font-variant-numeric: tabular-nums; }
.product-card__unit { display: none; margin-top: 2px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.product-card__stock { margin-top: 10px; }
.product-card__actions { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }
.product-card__add { flex: 1 1 auto; min-width: 0; }
.product-card__cartstep { display: none; }
.product-card__incart { position: relative; z-index: 2; margin-top: 8px; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-2); }
@media (hover: hover) {
  .product-card:hover { border-color: var(--line-2); box-shadow: var(--e1); }
  .product-card:hover .product-card__img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .product-card:hover .product-card__img { transform: none; } }

/* Compact: 2 columns on small phones (card narrower than 240 px). */
@container card (max-width: 239px) {
  .product-card__body { padding: 12px; }
  .product-card__meta { font-size: 12px; }
  .product-card__name { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
  .product-card__price .price { font-size: 18px; }
  .product-card__sub { display: none; }
  .product-card__unit { display: block; }
  .product-card__stock { font-size: 12px; }
  .product-card__actions { flex-direction: column; padding-top: 12px; }
  .product-card__actions > .stepper { display: none; }
  .product-card__add { width: 100%; padding: 0 10px; }
  .product-card.is-in-cart .product-card__add { display: none; }
  .product-card.is-in-cart .product-card__cartstep { display: inline-grid; width: 100%; }
  .product-card__incart { display: none; }
}

/* List row variant (list view, ≥ 768): image 96 × 120 | meta + name | price | stock | actions. */
@media (min-width: 768px) {
  .product-card--row {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 0 20px;
    padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; container-type: normal; overflow: visible;
  }
  .product-card--row .product-card__media { width: 96px; height: 120px; aspect-ratio: auto; border-radius: var(--radius-s); }
  .product-card--row .product-card__tag { top: 6px; left: 6px; }
  .product-card--row .product-card__body {
    display: grid; grid-template-columns: minmax(0, 1fr) 220px 300px; grid-template-areas: "meta price actions" "name price actions" "stock price actions";
    align-items: center; column-gap: 24px; padding: 0;
  }
  .product-card--row .product-card__meta { grid-area: meta; align-self: end; }
  .product-card--row .product-card__name { grid-area: name; margin-top: 2px; }
  .product-card--row .product-card__stock { grid-area: stock; margin-top: 6px; align-self: start; }
  .product-card--row .product-card__price { grid-area: price; margin-top: 0; text-align: right; justify-self: end; }
  .product-card--row .product-card__actions { grid-area: actions; margin-top: 0; padding-top: 0; justify-content: flex-end; }
  .product-card--row .product-card__add { flex: 0 1 160px; }
  .product-card--row .product-card__incart { grid-column: 1 / -1; text-align: right; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card--row .product-card__body { grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "meta price" "name price" "stock price" "actions actions"; row-gap: 0; }
  .product-card--row .product-card__actions { justify-content: flex-start; margin-top: 12px; }
}
@media (hover: hover) and (min-width: 768px) { .product-card--row:hover { box-shadow: none; } }

/* Stock line: an 8 px dot + 13/500 text (§11.15); not a chip. */
.stock { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--text); }
.stock::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.stock--coord { color: var(--warning-ink); }
.stock--coord::before { background: var(--warning); }

/* PDP stock and delivery note (§11.17). */
.stock-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; }
.stock-note > .icon { color: var(--success); }
.stock-note__title { font-weight: 700; }
.stock-note__text { grid-column: 2; color: var(--text-2); font-size: 15px; }

/* PDP price block (§11.16). */
.price-block { display: grid; gap: 4px; }
.price-block__label { font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--text-2); }
.price-block__alt { margin-top: 6px; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.unit-prices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.unit-prices__cell { padding: 10px 14px; }
.unit-prices__cell + .unit-prices__cell { border-left: 1px solid var(--line); }
.unit-prices__label { font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--text-2); }
.unit-prices__value { margin-top: 2px; font-size: 20px; line-height: 1.1; font-weight: 800; font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-prices__value .price__cur { font-size: 0.65em; }

/* Pack switcher: a segmented row of links, one per sibling pack (§11.18). */
.pack-switch { display: grid; gap: 8px; }
.pack-switch__label { font-size: var(--fs-label); font-weight: 600; }
/* A tidy grid when the options wrap; long labels break inside their own cell. */
.pack-switch .segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pack-switch .segmented__opt { flex: none; }
.pack-switch .segmented__link { white-space: normal; text-align: center; padding: 6px 12px; }

/* PDP gallery v1 (the product builder refines it). */
.gallery { display: grid; gap: 12px; }
.gallery__stage { position: relative; margin: 0; }
.gallery__main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-l); background: var(--studio-stage); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__caption { margin-top: 10px; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-3); }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery__thumb { position: relative; width: 64px; height: 80px; padding: 0; overflow: hidden; border-radius: var(--radius-s); background: var(--studio-stage); border: 2px solid transparent; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-pressed="true"], .gallery__thumb[aria-current="true"] { border-color: var(--sel); }
.gallery__thumb:hover { border-color: var(--line-2); }
.gallery__thumb[aria-pressed="true"]:hover { border-color: var(--sel); }

/* Image placeholder before a render exists: the studio stage colour. */
.img-pending { display: block; width: 100%; background: var(--studio-stage); }
.studio-bg { background: var(--studio-stage); }

/* ================================================================== 14. jégmérő (§11.19) */
.meter { --over-w: 62px; display: flex; align-items: flex-start; gap: 14px; color: var(--text); } /* --over-w: the over label (52) + the tray gap (10) */
.meter__mascot { flex: none; width: auto; height: 56px; }
.meter__main { flex: 1; min-width: 0; }
.meter__copy { font-size: 16px; line-height: 1.4; font-weight: 600; min-height: 1.4em; }
.meter__tray { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.meter__group { flex: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.meter__cell {
  height: 18px; border-radius: var(--radius-xs); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color var(--dur-meter-cell) var(--ease-standard), box-shadow var(--dur-meter-cell) var(--ease-standard);
  transition-delay: calc(var(--i, 0) * var(--dur-meter-stagger));
}
.meter__cell.is-cart { background: var(--blue); box-shadow: none; }
.meter__cell.is-item { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--meter-this-outline); }
.meter__cell.is-partial { box-shadow: inset 0 0 0 1px var(--line-2); }
.meter__cell.is-partial.has-item { box-shadow: inset 0 0 0 1.5px var(--meter-this-outline); }
.meter__over { flex: none; min-width: 52px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); }
.meter__ticks { display: flex; gap: 10px; margin-top: 6px; }
.meter__ticks--over { padding-right: var(--over-w, 0px); }
.meter__tick { position: relative; flex: 1; padding-top: 7px; text-align: right; font-size: 12px; line-height: 1.3; font-weight: 500; white-space: nowrap; color: var(--text-2); }
.meter__tick::before { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 5px; background: var(--text-3); }
.meter__caption { margin-top: 8px; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.meter__note { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.meter--compact { gap: 0; }
.meter--compact .meter__copy { font-size: 14px; }
.meter--compact .meter__cell { height: 10px; }
.meter--compact .meter__tray { margin-top: 8px; }
.meter--compact .meter__tick { font-size: 11.5px; padding-top: 5px; }
.meter--compact .meter__tick::before { height: 4px; }
.on-navy .meter { color: var(--on-navy); }
.on-navy .meter__tick, .on-navy .meter__caption { color: var(--on-navy-2); }
@media (max-width: 419px) { .meter__mascot { height: 48px; } .meter { gap: 10px; } .meter__tick, .meter--compact .meter__tick { font-size: 11px; } }

/* ================================================================== 15. cart line, summary, steps, account */
.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__media { grid-row: 1 / span 3; width: 64px; height: 80px; overflow: hidden; border-radius: var(--radius-s); background: var(--studio-stage); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.cart-line__name { font-size: 15px; line-height: 1.3; font-weight: 700; }
.cart-line__name a { color: var(--text); text-decoration: none; }
.cart-line__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-line__pack { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-2); }
.cart-line__remove { margin: -8px -10px 0 0; color: var(--text-2); }
.cart-line__remove:hover { color: var(--danger); }
.cart-line__row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; }
.cart-line__total { font-size: 18px; line-height: 1.1; font-weight: 800; font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cart-line__unit { display: block; font-size: 12px; font-weight: 500; font-stretch: 100%; color: var(--text-2); }

.summary-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--text); --ring: var(--focus); }
.summary-card__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; font-stretch: 87.5%; margin-bottom: 12px; }
.summary-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; font-variant-numeric: tabular-nums; }
.summary-card__row dt, .summary-card__label { color: var(--text-2); }
.summary-card__row dd, .summary-card__value { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
.summary-card__row--total { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); align-items: flex-end; }
.summary-card__row--total dt, .summary-card__row--total .summary-card__label { color: var(--text); font-weight: 700; }
.summary-card__sep { border-top: 1px solid var(--line); margin: 12px 0; }
.summary-card > * + .meter, .summary-card > * + .btn { margin-top: 16px; }
@media (min-width: 1024px) { .summary-card--sticky { position: sticky; top: 96px; } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.steps__item { position: relative; display: flex; align-items: center; gap: 6px; padding-top: 14px; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--text-3); min-width: 0; }
.steps__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--line); }
.steps__item.is-done::before, .steps__item.is-current::before, .steps__item[aria-current="step"]::before { background: var(--sel); }
.steps__item.is-current, .steps__item[aria-current="step"] { color: var(--text); font-weight: 700; }
.steps__item.is-done { color: var(--text-2); }
.steps__item .icon { width: 16px; height: 16px; color: var(--success); }
@media (max-width: 479px) { .steps__item { font-size: 12px; } }

.account-nav { display: grid; gap: 2px; }
.account-nav__link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-s); color: var(--text-2); font-weight: 600; text-decoration: none; }
.account-nav__link:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
.account-nav__link[aria-current="page"], .account-nav__link.is-current { background: var(--bg-3); color: var(--text); box-shadow: inset 3px 0 0 var(--sel); }
.account-nav__link .icon { width: 20px; height: 20px; }
.order-row, .invoice-row { display: grid; gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; font-variant-numeric: tabular-nums; }
.order-row__no, .invoice-row__no { font-weight: 700; }
.order-row__meta, .invoice-row__meta { font-size: 14px; color: var(--text-2); }
.order-row__total, .invoice-row__amount { font-weight: 800; font-stretch: 87.5%; font-size: 18px; white-space: nowrap; }
.order-row__actions, .invoice-row__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 768px) {
  .order-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto auto auto; }
  .invoice-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto auto auto; }
  .order-row__actions, .invoice-row__actions { justify-content: flex-end; }
}
.site-card { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.site-card__name { font-weight: 700; }
.site-card__line { color: var(--text-2); }
.site-card__default { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--success); }
.site-card__default .icon { width: 16px; height: 16px; }
.demo-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.demo-mark .icon { width: 16px; height: 16px; }

/* ================================================================== 16. brand motif, partner wall, mockups, cookie, skip */
/* Mountain motif (§4.5): fills live in CSS so they follow the theme tokens. */
.hero__mtn { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(140px, 22vw, 320px); pointer-events: none; }
.ridge__back, .mtn-back__range { fill: var(--mtn-back); fill-opacity: var(--mtn-back-opacity); }
.ridge__snow { fill: var(--ridge-snow); }
.ridge__shade { fill: var(--ridge-shade); }
.edge { display: block; width: 100%; height: clamp(20px, 3.4vw, 56px); margin-bottom: -1px; }
.mtn-back { display: block; }

/* Partner wall (§4.4): <ul> of 25 white tiles, full colour, no animation. */
.partner-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.partner-wall__tile { position: relative; aspect-ratio: 5 / 3; border-radius: var(--radius-s); background: var(--logo-tile); box-shadow: inset 0 0 0 1px var(--tile-border); }
.partner-wall__tile img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 72%; max-height: 56%; object-fit: contain; }
.partner-wall__cta { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.35; }
.partner-wall__cta strong { font-size: 14px; }
.partner-wall__cta a { font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 768px) { .partner-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } .partner-wall__cta { display: none; } }
.partner-section__inner { display: grid; gap: 32px; }
.partner-section__count { margin-top: 12px; font-family: var(--font-ui); font-size: 18px; font-weight: 700; }
.partner-section__text { margin-top: 12px; color: var(--text-2); max-width: 44ch; }
.partner-section__link { margin-top: 16px; display: inline-block; font-weight: 600; }
@media (max-width: 767px) { .partner-section__link { display: none; } }
@media (min-width: 1024px) {
  .partner-section__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .partner-section__head { grid-column: 1 / 5; position: sticky; top: 112px; }
  .partner-section__wall { grid-column: 5 / 13; }
}

/* Phone mockups of the real app (§10.5): never upscaled, never cropped, no CSS shadow. */
.mockup { margin: 0; }
.mockup img { display: block; margin-inline: auto; width: auto; height: auto; max-width: 100%; }
.mockup--phone img { max-height: 600px; }
.mockup--sm img { max-height: 300px; }
.mockup--group img { width: 100%; max-width: 760px; }
.mockup__caption { margin-top: 12px; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-3); text-align: center; }
.on-navy .mockup__caption, .section--navy .mockup__caption, .section--hero .mockup__caption, .app-band .mockup__caption { color: var(--on-navy-2); }
.mockup--pending .mockup__pending { display: block; width: min(100%, 332px); margin-inline: auto; border-radius: 48px; border: 1.5px dashed var(--line-2); background: var(--bg-2); }
.mockup--group.mockup--pending .mockup__pending { width: min(100%, 760px); border-radius: var(--radius-l); }

/* Cookie notice (§11.27): bottom-left panel on desktop, slim bar on mobile (spacer keeps content clear). */
.cookie {
  position: fixed; z-index: var(--z-cookie); left: 24px; bottom: 24px; width: min(420px, calc(100vw - 48px));
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); color: var(--text); box-shadow: var(--e2); --ring: var(--focus);
  animation: ic-toast-in var(--dur-base) var(--ease-standard);
}
.cookie__text { font-size: 14px; line-height: 1.5; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cookie-spacer { display: none; }
@media (max-width: 767px) {
  .cookie { left: 0; right: 0; bottom: 0; width: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cookie__text { font-size: 13px; line-height: 1.4; }
  .cookie__actions { flex-wrap: nowrap; margin-top: 8px; }
  .cookie__actions .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .cookie-spacer:not([hidden]) { display: block; height: var(--cookie-h, 128px); }
}

/* Skip link: first focusable element, yellow on focus. */
.skip { position: absolute; left: -9999px; top: 12px; z-index: var(--z-skip); padding: 12px 18px; border-radius: var(--radius-s); background: var(--yellow); color: var(--on-yellow); font-weight: 700; text-decoration: none; box-shadow: var(--e2); }
.skip:focus, .skip:focus-visible { left: 12px; position: fixed; color: var(--on-yellow); outline: 2px solid var(--on-yellow); outline-offset: 2px; }

/* Visible "demo" note under forms and demo data. */
.demo-note { font-size: 13px; line-height: 1.45; color: var(--text-3); }

/* ================================================================== 17. product page v1 (§12.3 PDP) */
/* Layout for the one product page, webshop/termek.html?id=<id> (rendered client-side by pages/product.js from
 * the Happy API). The product-page builder refines it in pages/product.css (loaded after this file); after
 * rendering, IC.ui.refresh(root) / IC.ui.bindPdp(root) wire the data-* hooks (sticky bar, meter, steppers). */
.pdp { padding: 16px 0 var(--section-y); }
.pdp__crumbs { margin-bottom: 16px; }
.pdp__main { display: grid; gap: 28px; }
.pdp__gallery, .pdp__buy { min-width: 0; }
.pdp__buy { display: grid; gap: 24px; align-content: start; }
.pdp__head { display: grid; gap: 6px; }
.pdp__meta { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--text-2); }
.pdp__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.pdp__pack { font-weight: 600; color: var(--text-2); }
.pdp__price .price-block__main { line-height: 1; }
.pdp__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.pdp__add { width: 100%; }
.pdp__fee { font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--text-2); }
.pdp__fee a { font-weight: 600; }
.pdp__details { display: grid; gap: 40px; margin-top: var(--section-y); padding-top: var(--section-y); border-top: 1px solid var(--line); }
.pdp__about > * + * { margin-top: 16px; }
.pdp__about .prose { color: var(--text); }
.pdp__written { font-size: 13px; line-height: 1.45; color: var(--text-3); }
.pdp__uses { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pdp__uses a { font-weight: 600; }
.pdp__specs-title, .pdp__about-title { margin-bottom: 4px; }
.pdp__footnote { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.pdp__related { margin-top: var(--section-y); }
.pdp__related .section-header { margin-bottom: 24px; }
@media (min-width: 768px) {
  .gallery__thumb { width: 88px; height: 110px; }
}
@media (min-width: 1024px) {
  .pdp { padding-top: 24px; }
  .pdp__crumbs { margin-bottom: 24px; }
  .pdp__main { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .pdp__gallery { grid-column: 1 / 8; }
  .pdp__buy { grid-column: 8 / 13; position: sticky; top: 96px; padding-left: 16px; }
  .pdp__details { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .pdp__about { grid-column: 1 / 7; }
  .pdp__specs { grid-column: 8 / 13; }
}

/* Mobile sticky buy bar: 72 px + safe area; appears once the buy box has scrolled away. */
.pdp-sticky { display: none; }
@media (max-width: 1023px) {
  .pdp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) - 5);
    display: flex; align-items: center; gap: 12px; min-height: calc(72px + env(safe-area-inset-bottom, 0px));
    padding: 12px max(var(--gutter), env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); color: var(--text); border-top: 1px solid var(--line); box-shadow: var(--e2); --ring: var(--focus);
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base);
  }
  .pdp-sticky.is-visible { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-standard), visibility 0s; }
  .pdp-sticky__price { flex: 1 1 auto; min-width: 0; }
  .pdp-sticky__price .price { font-size: 22px; }
  .pdp-sticky__label { display: block; font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdp-sticky .btn { flex: none; }
  main.pdp ~ .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  main.pdp:has(.pdp-sticky.is-visible) ~ .toast-region { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 419px) {
  .pdp-sticky { gap: 10px; }
  .pdp-sticky__label { display: none; }
  .pdp-sticky__price .price { font-size: 20px; }
  .pdp-sticky .btn { --btn-px: 14px; gap: 8px; }
}
@media (max-width: 379px) { .pdp-sticky .stepper { display: none; } } /* the buy box stepper still sets the quantity */

/* ================================================================== 18. loading and API errors (Happy API) */
/* Until ic:ready, product areas show skeletons: .skeleton pieces (size them with a variant, --w or page CSS),
 * the runtime's skeleton cards (.product-card--skeleton, IC.ui.skeletonCards(n)) and containers marked
 * [data-skeleton] or .is-loading (with aria-busy="true"). The pulse is an opacity change (the brand gradient
 * stays the only CSS gradient) and stops for reduced motion. */
.skeleton {
  display: block; width: var(--w, 100%); height: 14px; border-radius: var(--radius-xs);
  background: var(--bg-3); animation: ic-skeleton 1.4s var(--ease-standard) infinite alternate;
}
.skeleton--text { height: 14px; margin-top: 8px; }
.skeleton--title { height: 22px; width: var(--w, 80%); margin-top: 10px; border-radius: var(--radius-s); }
.skeleton--media { height: auto; aspect-ratio: 4 / 5; border-radius: 0; }
.skeleton--btn { height: 36px; margin-top: 16px; border-radius: var(--radius-s); }
.skeleton--chip { display: inline-block; width: var(--w, 92px); height: 40px; border-radius: var(--radius-round); }
.skeleton--block { height: var(--h, 120px); border-radius: var(--radius-m); }
.on-navy .skeleton { background: var(--navy-line); }
@keyframes ic-skeleton { from { opacity: 1; } to { opacity: 0.5; } }
.product-card--skeleton { pointer-events: none; }
[data-skeleton]:empty { display: block; min-height: var(--skeleton-h, 120px); border-radius: var(--radius-m); background: var(--bg-2); animation: ic-skeleton 1.4s var(--ease-standard) infinite alternate; }
[data-skeleton], .is-loading { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .skeleton, [data-skeleton]:empty { animation: none; } }

/* The shared API error block (IC.ui.apiError({title, message}) → element; ic:error). The Hungarian message
 * is the API's own. „Újrapróbálom” is a [data-api-retry] button: the runtime runs its startup calls again
 * (IC.retry()); a page handles its own requests. Flat markup (title, text, button as children, the icon in
 * the title) and .api-error.note work too. In a card grid it spans the row. */
.api-error {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; grid-column: 1 / -1;
  padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--radius-s);
  background: var(--danger-bg); color: var(--text); font-size: 15px; line-height: 1.5; text-align: left; --ring: var(--focus);
}
.api-error > .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--danger); }
.api-error > :not(.icon):not(.btn) { flex: 1 1 calc(100% - 32px); min-width: 0; }
.api-error > .btn { flex: none; }
.api-error__title { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; color: var(--text); }
.api-error__title > .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--danger); }
.api-error__text, .api-error__message { margin-top: 2px; color: var(--text-2); }
.api-error__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.api-error [data-api-retry][aria-busy="true"] .icon { animation: ic-spin 0.9s linear infinite; }
.api-error--compact { padding: 12px 16px; font-size: 14px; }
.api-error--compact .api-error__actions { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .api-error [data-api-retry][aria-busy="true"] .icon { animation: none; } }