/* ============================================================
   Beck and Partners – Megrendelő platform
   Közös design rendszer  (világos alaptónus, sötét csak accentként)
   ============================================================ */

/* ---------- 1. Design tokenek ---------- */
:root{
  /* Alaptónusok – világos, meleg semleges */
  --paper:        #FAFAF7;   /* oldal háttér */
  --surface:      #FFFFFF;   /* kártya / panel */
  --surface-2:    #F4F4EF;   /* halvány sávozás */
  --tint:         #ECF4F0;   /* accent-halvány (kijelölt / badge háttér) */

  /* Tinta – ez a "sötét" szín, kizárólag accentként */
  --ink:          #0a2842;
  --ink-2:        #2B3037;
  --muted:        #6E747C;
  --line:         #E7E6E0;
  --line-2:       #DEDDD6;

  /* Signature accent – smaragd ("megfelelő jelölt / találat") */
  --accent:       #34788b;
  --accent-600:   #4591a6;
  --accent-700:   #669ead;
  --accent-ink:   #0A3C30;

  /* Visszajelző színek */
  --ok:           #34788b;
  --warn:         #B26B00;
  --danger:       #B23B3B;

  /* Tipográfia */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sugárzás / árnyékok */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(21,24,29,.05);
  --sh-2: 0 6px 24px -10px rgba(21,24,29,.16);
  --sh-3: 0 22px 60px -24px rgba(21,24,29,.30);
  --sh-accent: 0 14px 34px -14px rgba(15,122,95,.55);

  /* Ritmus */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 9vw, 124px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset / alap ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.07; letter-spacing:-.02em; margin:0; color:var(--ink); }
p{ margin:0; }

/* Tabuláris számok az áraknak */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------- 3. Layout segédek ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--surface-2); }
/* #fejvadaszat is deliberately PLAIN on both pages. On index.html it is followed by
   "Miben segitunk" and on szolgaltatasok.html by "Kiegeszito megoldasok" -- both tinted --
   so a tinted new section always forces its neighbour to flip, and the flip then merges
   THAT band with the one after it (measured: #kiegeszitok + #referenciak both plain in the
   normal, references-loaded state). Two adjacent PLAIN bands are already this site's norm
   -- index.html has had two such pairs since before this section existed -- while two
   adjacent TINTS never occur. Plain ripples into nothing; tinted ripples into everything. */
.section--snug{ padding-block:clamp(40px,6vw,72px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-600);
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--accent); border-radius:2px; }

.section-head{ max-width:680px; margin-bottom:clamp(34px,4vw,52px); }
.section-head h2{ font-size:clamp(28px,3.6vw,44px); margin-top:14px; }
.section-head .lead{ margin-top:16px; color:var(--ink-2); font-size:clamp(16px,1.6vw,19px); }

.lead{ color:var(--ink-2); }
.muted{ color:var(--muted); }

/* ---------- 4. Gombok ---------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:transparent;
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:14px 24px; border:1px solid var(--bd); border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-weight:600; font-size:15.5px; letter-spacing:.01em;
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  box-shadow:var(--sh-1);
}
.btn .ic{ width:18px; height:18px; transition:transform .25s var(--ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0) scale(.98); transition-duration:.06s; }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--accent); }
.btn--accent{ --bg:var(--accent); --fg:#fff; }
.btn--accent:hover{ --bg:var(--accent-600); box-shadow:var(--sh-accent); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-2); box-shadow:none; }
.btn--ghost:hover{ --bd:var(--ink); background:var(--surface); }
.btn--lg{ padding:17px 30px; font-size:16.5px; }
.btn--sm{ padding:10px 16px; font-size:14px; }
.btn--block{ width:100%; }
.btn--on-dark.btn--ghost{ --fg:#fff; --bd:rgba(255,255,255,.34); }
.btn--on-dark.btn--ghost:hover{ --bd:#fff; background:rgba(255,255,255,.08); }
.btn:hover .ic--arrow{ transform:translateX(3px); }

/* Link-szerű akció */
.link{ color:var(--accent-600); font-weight:600; display:inline-flex; align-items:center; gap:.4em; }
.link::after{ content:"→"; transition:transform .2s var(--ease); }
.link:hover::after{ transform:translateX(3px); }

/* ---------- 5. Fejléc / navigáció ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-head.is-stuck{ border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(21,24,29,.5); }
.site-head__row{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:128px; padding:14px 0; }

/* Logó – nagyobb, mint a landingen */
.brand{ display:inline-flex; align-items:center; gap:13px; }
.brand__mark{ width:100px; height:100px; min-height:100px; flex:none; display:block; object-fit:contain; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:23px; letter-spacing:-.02em; color:var(--ink); }
.brand__sub{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-top:5px; }

.head-actions{ display:flex; align-items:center; gap:12px; }

/* Kosár ikon a fejlécben */
.cart-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface); cursor:pointer;
  transition:transform .18s var(--ease), border-color .2s, box-shadow .25s;
}
.cart-btn:hover{ transform:translateY(-2px); border-color:var(--ink); box-shadow:var(--sh-2); }
.cart-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--accent); }
.cart-btn svg{ width:21px; height:21px; }
.cart-count{
  position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; padding:0 5px;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; line-height:1;
  box-shadow:0 0 0 2px var(--paper); transform:scale(0); transition:transform .3s var(--ease-out);
}
.cart-count.is-shown{ transform:scale(1); }
.cart-count.pop{ animation:countPop .42s var(--ease-out); }
@keyframes countPop{ 0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)} }

/* ---------- 6. Hero (rövid, nem full-view) ---------- */
.hero{ position:relative; overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px);
  align-items:center; padding-block:clamp(48px,6.5vw,82px);
}
.hero h1{ font-size:clamp(34px,5vw,60px); margin-top:18px; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero__text{ margin-top:20px; font-size:clamp(16px,1.7vw,19.5px); color:var(--ink-2); max-width:42ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }

/* Hero oldalsó panel – kompakt vizuál statisztikákkal */
.hero__aside{
  background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--sh-3); position:relative; overflow:hidden;
}
.hero__aside::after{
  content:""; position:absolute; inset:auto -40% -55% auto; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(15,122,95,.55), transparent 70%);
}
.hero__aside h3{ color:#fff; font-size:18px; font-weight:600; font-family:var(--font-body); letter-spacing:0; }
.hero__aside .mini{ color:rgba(255,255,255,.6); font-size:13.5px; margin-top:4px; }
.hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; margin-top:24px; position:relative; }
.hero-stats .st__n{ font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-.02em; }
.hero-stats .st__l{ color:rgba(255,255,255,.62); font-size:12.5px; margin-top:2px; line-height:1.35; }
.hero-stats .st{ padding-left:13px; border-left:2px solid var(--accent); }

/* ---------- 7. Statisztika sáv ---------- */
.statbar{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.statbar .st{ background:var(--paper); padding:26px var(--gutter); text-align:center; }
.statbar .st__n{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,38px); color:var(--ink); }
.statbar .st__l{ color:var(--muted); font-size:13.5px; margin-top:4px; }

/* ---------- 8. Csomag kártyák ---------- */
.cards{ display:grid; gap:20px; }
/* An author `display` beats the UA sheet's `[hidden]{display:none}`, so a hidden .cards
   container would still lay out — an empty rail with its own gap and padding. Needed since
   the landing's reference block starts hidden and only appears once the pool loads. */
.cards[hidden]{ display:none; }
.cards--pkg{ grid-template-columns:repeat(3,1fr); }
.cards--addon{ grid-template-columns:repeat(3,1fr); }
/* Kiegészítők holds the always-on ATS card plus zero or more dynamic supplement cards.
   With zero dynamic cards, the ATS article is the grid's only item and would otherwise
   land pinned to column 1 at ~1/3 width — centre it instead, same as the old
   #jeloltkezeles rule this replaces. updateEnquiryCards (app.js) toggles this class. */
.cards--addon.is-solo{ grid-template-columns:minmax(0,420px); justify-content:center; }
/* Same treatment for the package grid, needed by the fejvadaszat section, which ships with
   FEWER cards than the grid's three columns. Today that is TWO (MFV + HRE). A catalog that has
   not been redeployed yields ZERO, but renderHeadhuntGrid hides the whole section and returns
   before either class is toggled, so CSS never sees that state -- two counts to handle, not
   three. Measured with one card and no rule at 1440px: a 343px card pinned to column 1 of a
   3-column grid, ~837px of empty band beside it; it reads as a failed render.

   BOTH rules are inside a min-width query, and that is load-bearing. They are (0,2,0)
   specificity while the collapse rules below are (0,1,0), and a media query adds no
   specificity -- so unscoped they would outrank BOTH breakpoints at every width. Measured
   before the fix: at 375px #headhuntCards computed to two 157.5px columns while every other
   package grid on the page had already stacked to 1fr. 721px is the boundary used by the
   1-col breakpoint below, so above it the centring applies and at or below it the ordinary
   collapse takes over. */
@media (min-width:721px){
  .cards--pkg.is-solo{ grid-template-columns:minmax(0,420px); justify-content:center; }
  .cards--pkg.is-duo{ grid-template-columns:repeat(2,minmax(0,420px)); justify-content:center; }
}

/* Horizontal scrolling track — Dalma, 2026-08-12: "oldalra gördülő lista" for the
   Kiegészítő megoldások and Referenciák sections (packages went the other way, to a
   full grid, in the same round). CSS only: no arrows, no dots, no JS. Native swipe,
   trackpad and keyboard scrolling do the work the deleted carousel used to.

   Deliberately a SEPARATE class rather than a change to .cards--addon: the checkout
   drawer reuses .cards--addon as a 2-col grid (#checkoutAddons, section 14), and
   redefining the base class would silently reshape it. `display:flex` overrides the
   `display:grid` on .cards because this rule comes later and both are equal weight. */
.cards--rail{
  --rail-gap:20px;
  /* Cards per screenful. The card width below is derived from it, and the arrows
     (initRailCarousels, app.js) MEASURE the resulting stride rather than reading this
     value — so the ladder can change here alone, with no matching JS breakpoint. */
  --rail-per:3;
  display:flex; overflow-x:auto; scroll-snap-type:x proximity;
  gap:var(--rail-gap); padding-bottom:12px;
  overscroll-behavior-x:contain;
  /* The prev/next buttons are the affordance now. A native scrollbar under them reads
     as a second, redundant control — and it is the exact thing they replace. Scrolling
     itself is untouched: swipe, trackpad, and the focusable region's arrow keys all work. */
  scrollbar-width:none;
}
.cards--rail::-webkit-scrollbar{ display:none; }
@media (max-width:980px){ .cards--rail{ --rail-per:2; } }
/* TWO levels on purpose. #addonCards / #landingAddons are `display:contents` hosts, so
   the dynamic cards take part in this flex track but are GRANDCHILDREN in the DOM — a
   `> *` selector silently misses every one of them. That left them unsized and, worse,
   without a snap point: with `scroll-snap-type: x mandatory` the only real snap target
   was the static ATS card at position 0, so the rail snapped straight back there and no
   programmatic scroll to a card could survive (measured — scrollLeft stayed 0 forever).
   Matching `.card` at both levels fixes the sizing; `proximity` then keeps snapping as a
   nicety rather than something that overrides a deliberate scroll. */
.cards--rail > .card,
.cards--rail > * > .card{
  flex:0 0 calc((100% - (var(--rail-per) - 1) * var(--rail-gap)) / var(--rail-per));
  scroll-snap-align:start;
  /* A flex item's default `min-width:auto` is its MIN-CONTENT size, and that silently
     overrides the basis above. On the catalog page the empty-basket CTA reads "Előbb
     válasszon toborzási csomagot →" and `.btn` is white-space:nowrap (section 3), so
     those cards rendered 397px against a 304px basis — measured 2.3 cards per screenful
     on a rail whose arrows promise 3, with the third card sliced by the next button.
     Pin the basis here and let that one long label wrap (below) instead. */
  min-width:0;
}
/* Only inside the rail: elsewhere a wrapping button would reflow layouts that rely on
   the single-line width (the compare bar, the cart drawer). */
.cards--rail .card__foot .btn{ white-space:normal; text-align:center; }
.cards--rail:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
/* One card only: a flex track would stretch it edge to edge. Cap and centre instead —
   the rail's equivalent of .cards--addon.is-solo above, which is grid-only and stops
   applying the moment the container becomes a flex track. */
.cards--rail.is-solo{ justify-content:center; }
.cards--rail.is-solo > .card,
.cards--rail.is-solo > * > .card{ flex:0 0 min(100%, 420px); }
@media (max-width:640px){
  .cards--rail > .card,
  .cards--rail > * > .card{ flex-basis:85%; }
}

/* Arrow pagination around the rail (Dalma, 2026-08-14: arrows instead of the bare
   scrollbar in the screenshots). The rail stays a native overflow-x scroller and the
   buttons only drive it with `scrollTo({behavior:'smooth'})` — a transform-translated
   track would have broken swipe, the arrow keys, and the ?open= deep-link's scrollLeft
   nudge at the same time (that nudge is why 98d6129/64b128c dropped the old carousel).

   The wrapper and both buttons are built in JS (initRailCarousels), never in the HTML:
   four rails across two pages cannot drift apart that way, and a page whose JS failed
   still gets a plain scrollable rail rather than two dead buttons.

   The buttons take their own flex column instead of floating over the card edges, so
   they never cover card content and no negative margin has to guess at --gutter. */
.rail{ display:flex; align-items:center; gap:14px; }
.rail[hidden]{ display:none; }  /* beats the UA sheet at equal specificity — see .cards[hidden] */
.rail > .cards--rail{ flex:1 1 auto; min-width:0; }
.rail__nav{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink); font-size:15px; cursor:pointer;
  box-shadow:var(--sh-1);
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.rail__nav:hover:not(:disabled){ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.06); }
.rail__nav:active:not(:disabled){ transform:scale(.96); }
.rail__nav:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.rail__nav:disabled{ opacity:.3; cursor:default; box-shadow:none; }
/* Everything already fits — nothing to page through. `visibility` rather than `display`
   keeps the two columns, so the cards do not jump width the moment a re-render (cart
   change, category switch) puts the overflow back; it also drops the buttons out of the
   accessibility tree, so a screen reader is not offered controls that do nothing. */
.rail.is-static .rail__nav{ visibility:hidden; }
@media (prefers-reduced-motion: reduce){
  .rail__nav{ transition:none; }
  .rail__nav:hover:not(:disabled), .rail__nav:active:not(:disabled){ transform:none; }
}
@media (max-width:640px){
  /* Swipe is the native gesture at this width, and two 44px buttons would eat a quarter
     of the row — which is also why the cards keep their 85% peek above. */
  .rail{ gap:0; }
  .rail__nav{ display:none; }
}

.cards--quote{ grid-template-columns:repeat(3,1fr); }
/* .quote-card is a <figure> — reset its UA-default margin (~1em 40px) or it renders
   narrower and off-pattern next to the sibling <article>/<div> .card elements. */
.quote-card{ margin:0; display:flex; flex-direction:column; gap:18px; justify-content:space-between; }
/* Equal-height cards are the resting state and the common one — with today's pool no
   quote is long enough to clamp, so no card is ever expanded. But under `stretch`,
   expanding one "Tovább" grows the flex line and drags every sibling up with it, leaving
   a one-line quote with two-thirds of its card empty: the exact uneven-whitespace
   complaint this change answers. So stretch normally, and drop to content-height only
   while something is actually expanded (renderReferences toggles `.has-expanded`).
   The min-height keeps the cards close in that state. Scoped to the quote rail — the
   addon rail's equal-height cards are correct as they are. */
.cards--quote.cards--rail{ align-items:stretch; }
.cards--quote.cards--rail.has-expanded{ align-items:flex-start; }
.cards--quote .quote-card{ min-height:230px; }
.quote-card__text{ margin:0; font-size:17px; line-height:1.6; color:var(--ink); }
.quote-card__text::before{ content:"\201E"; display:block; font-size:44px; line-height:.4; color:var(--accent); margin-bottom:10px; }
/* Quote lengths in the live pool run from 27 to 535 characters, so an unclamped row
   reads as one wall of text beside several short ones (Dalma, 2026-08-12). Clamp
   VISUALLY ONLY — this pool is verbatim, consent-bound client wording, so the full
   string always stays in the DOM and "Tovább" reveals it. Never truncate the text.
   The clamp lives on an INNER wrapper, never on .quote-card__text itself: the „ above
   is a block ::before on that element and would otherwise eat one of the clamped lines.
   Hanging it off .quote-card instead does not work either — .quote-card also carries
   .card, and `.card::before` (the hover gradient, below) is defined later at the same
   specificity, so it would win and blank the glyph. */
.quote-card__body{ display:block; }
.quote-card__body.is-clamped{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden;
}
.quote-card__more{
  align-self:flex-start; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; color:var(--accent-700); text-decoration:underline;
}
.quote-card__cite{ display:flex; flex-direction:column; gap:4px; font-style:normal; }
.quote-card__who{ font-weight:600; color:var(--ink); }
.quote-card__meta{ font-size:14px; color:var(--ink-2); }
@media (max-width:900px){ .cards--quote{ grid-template-columns:1fr; } }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease);
}
/* Addon card shown before any package is in the basket: readable and priced, but visibly
   not orderable. Muted rather than greyed out — the price range is the reason it is here. */
.card--preview{ border-style:dashed; }
.card--preview .addon-ic,
.card--preview .card__name{ opacity:.9; }
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg, var(--accent), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:transparent; }
.card:hover::before{ opacity:1; }

.card--featured{ border-color:var(--accent); box-shadow:var(--sh-accent); }
.card__flag{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r-pill);
  box-shadow:var(--sh-2); white-space:nowrap;
}
.card__name{ font-family:var(--font-display); font-weight:700; font-size:22px; }
.card__lede{ color:var(--muted); font-size:14px; margin-top:6px; min-height:2.6em; }

.price{ display:flex; align-items:baseline; gap:7px; margin-top:18px; }
.price__amt{ font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-.02em; color:var(--ink); }
.price__cur{ font-weight:700; font-size:18px; color:var(--ink); }
.price__vat{ color:var(--muted); font-size:12.5px; margin-top:3px; }
/* No space inside the content string: Hungarian binds the suffix to the word, so it
   must read "150 000 Ft-tól", not "Ft -tól". The small gap comes from the margin. */
.price--from::after{ content:"-tól"; margin-left:1px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0; align-self:baseline; }

.feat{ list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; }
.feat li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); }
.feat li::before{ content:"✓"; color:var(--accent); font-weight:800; flex:none; }
.feat li.off{ color:var(--muted); }
.feat li.off::before{ content:"–"; color:var(--line-2); }

.card__foot{ margin-top:auto; padding-top:22px; }

/* Kiegészítő kártya ikon */
.addon-ic{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--tint); color:var(--accent-700); font-size:22px; margin-bottom:14px;
}

/* ---------- 9. Mennyiség léptető + variáns ---------- */
.opt-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; }
.variant{
  appearance:none; -webkit-appearance:none; width:100%;
  padding:11px 38px 11px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a2842' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size:14.5px; font-weight:500; cursor:pointer; margin-top:16px;
  transition:border-color .2s, box-shadow .2s;
}
.variant:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--tint); }

.stepper{
  display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); overflow:hidden;
}
.stepper button{
  width:38px; height:40px; border:0; background:transparent; cursor:pointer; font-size:18px; color:var(--ink-2);
  display:grid; place-items:center; transition:background .15s, color .15s;
}
.stepper button:hover{ background:var(--tint); color:var(--accent-700); }
.stepper button:active{ background:var(--accent); color:#fff; }
.stepper button:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--accent); }
.stepper input{
  width:42px; height:40px; border:0; text-align:center; background:transparent;
  font-weight:700; font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper input:focus-visible{ outline:none; }

/* "Kosárba" gomb sikeres állapot */
.btn--accent.is-added{ --bg:var(--accent-700); }
.btn .lbl-done{ display:none; }
.btn.is-added .lbl-add{ display:none; }
.btn.is-added .lbl-done{ display:inline-flex; }

/* ---------- 10. "Toborzás valósága" blokk ---------- */
.pain{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pain__item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pain__item:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.pain__ic{ font-size:26px; }
.pain__item h3{ font-size:18px; margin-top:14px; font-family:var(--font-body); font-weight:700; }
.pain__item p{ color:var(--muted); font-size:14.5px; margin-top:8px; }
.pain-note{
  margin-top:24px; background:var(--ink); color:#fff; border-radius:var(--r); padding:24px 26px;
  font-size:16px;
}
.pain-note strong{ color:#fff; }

/* ---------- 10b. Ügyfélvélemények (testimonial csempék) ---------- */
.pain--testi{ grid-template-columns:repeat(3,1fr); }
.pain--testi .sol{ font-style:italic; color:var(--ink-2); font-size:15.5px; line-height:1.55; margin-top:0; }
.pain--testi .prob{ margin-top:14px; color:var(--accent-700); font-weight:700; font-size:13.5px; letter-spacing:.01em; }

/* ---------- 10c. Ügyfél-márkasor (a testimonial csempék alatt) ---------- */
.brandrow{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:6px 14px; text-align:center;
}
.brandrow__lead{ font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.brandrow__names{ font-weight:600; font-size:15px; color:var(--ink-2); }
.brandrow__more{ font-size:13.5px; color:var(--muted); }

/* ---------- 11. "Miben segítünk" ---------- */
.solve{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.solve__item{
  display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  transition:border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.solve__item:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.solve__tag{
  grid-row:1 / span 3; align-self:start;
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--accent-700);
  background:var(--tint); padding:7px 12px; border-radius:var(--r-pill); white-space:nowrap;
}
.solve__item h3{ font-size:18px; font-family:var(--font-body); font-weight:700; }
.solve__item .prob{ color:var(--muted); font-size:14px; margin-top:4px; }
.solve__item .sol{ color:var(--ink-2); font-size:14.5px; margin-top:8px; }

.cat-row{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.cat-chip{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; letter-spacing:.01em; color:var(--accent-700); background:var(--tint); border:1px solid transparent; padding:9px 16px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; }
.cat-chip:hover{ border-color:var(--line-2); }
.cat-chip.is-active{ background:var(--accent); color:#fff; }
.cat-chip i{ font-size:13px; }
.cat-blurb{ color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 26px; max-width:70ch; }
@media (prefers-reduced-motion: no-preference){ .cat-chip.pulse{ animation:catpulse .5s ease; } }
@keyframes catpulse{ 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }

/* ---------- 12. Slim banner (belső oldalak) ---------- */
.banner{
  position:relative; min-height:150px; display:flex; align-items:center; overflow:hidden;
  background:var(--ink); color:#fff;
}
.banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(15,122,95,.5), transparent 55%),
    radial-gradient(90% 120% at -5% 120%, rgba(15,122,95,.22), transparent 55%);
}
.banner__in{ position:relative; padding-block:30px; }
.banner h1{ color:#fff; font-size:clamp(26px,3.4vw,38px); }
.banner__crumb{ display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.62); margin-bottom:12px; }
.banner__crumb a:hover{ color:#fff; }
.banner__crumb span{ opacity:.5; }

/* ---------- 13. Kosár fiók (drawer) ---------- */
.scrim{ position:fixed; inset:0; background:rgba(21,24,29,.46); opacity:0; visibility:hidden; transition:opacity .35s var(--ease); z-index:90; backdrop-filter:blur(2px); }
.scrim.is-open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(420px,92vw); z-index:100;
  background:var(--surface); box-shadow:-30px 0 70px -30px rgba(21,24,29,.45);
  transform:translateX(102%); transition:transform .42s var(--ease-out);
  display:flex; flex-direction:column;
}
.drawer.is-open{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-size:19px; }
.drawer__close{ width:38px; height:38px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--surface); cursor:pointer; display:grid; place-items:center; font-size:18px; transition:background .15s, transform .15s; }
.drawer__close:hover{ background:var(--tint); transform:rotate(90deg); }
.drawer__body{ flex:1; overflow:auto; padding:8px 24px; }
.cart-note{ margin:12px 0 4px; padding:11px 13px; border:1px solid var(--line-2); border-left:3px solid var(--accent); border-radius:8px; background:var(--surface-2); color:var(--ink-2); font-size:13.5px; line-height:1.45; }
.cart-note b{ color:var(--ink); }
.drawer__foot{ padding:20px 24px; border-top:1px solid var(--line); background:var(--surface-2); }
.drawer__sum{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.drawer__sum .lbl{ color:var(--muted); font-size:14px; }
.drawer__sum .amt{ font-family:var(--font-display); font-weight:700; font-size:24px; }

/* ---------- Allocation modal (supplement distribution) ---------- */
.alloc-modal{ position:fixed; z-index:110; left:50%; top:50%; transform:translate(-50%,-50%); width:min(420px,92vw); background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:0 12px 40px rgba(10,40,66,.18); }
.alloc-modal .alloc-h{ font-weight:700; font-size:15.5px; }
.alloc-modal .alloc-s{ color:var(--ink-2); font-size:13px; margin-bottom:10px; }
.alloc-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-top:1px solid #F0EFEA; }
/* Package-picker rows (openPackagePickerModal): a whole row is one click, unlike the
   distribute modal's rows, which carry a stepper and are not themselves clickable. */
.alloc-row--pick{ width:100%; text-align:left; background:none; border-left:0; border-right:0; border-bottom:0; font:inherit; cursor:pointer; }
.alloc-row--pick:hover{ background:rgba(0,0,0,.03); }
.alloc-row--pick:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.alloc-pick-go{ color:var(--accent); font-weight:700; }
.alloc-nm{ font-weight:600; font-size:13.5px; } .alloc-cap{ color:#7a8089; font-size:11.5px; }
.alloc-rem{ background:var(--surface-2); border-radius:8px; padding:8px 12px; font-size:12.5px; color:var(--accent); font-weight:700; text-align:center; margin:12px 0; }

/* ---------- Pooled supplement sub-rows (drawer + checkout) ---------- */
.sup-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); padding:5px 0 5px 16px; margin-left:6px; border-left:2px solid var(--line); }
.sup-ct{ background:var(--surface-2,#eef5f6); color:var(--accent); border-radius:6px; padding:0 6px; font-weight:700; font-size:11px; }
.pkg-note{ background:var(--surface-2,#eef5f6); color:var(--muted); border-radius:6px; padding:0 6px; font-weight:600; font-size:10.5px; white-space:nowrap; }
.pkg-offer{display:flex;align-items:center;gap:12px;justify-content:space-between;
  margin-top:10px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45;
  background:#f2f8f4;border:1px solid #cfe6d8;color:#1f4733}
.pkg-offer--done{background:#f4f6f8;border-color:#d6dde4;color:#31414f}
.pkg-offer i{margin-right:4px}
.pkg-offer__btn{flex:0 0 auto;cursor:pointer;white-space:nowrap;
  padding:7px 14px;border-radius:6px;font-size:13px;font-weight:600;
  background:#1f6f43;border:1px solid #1f6f43;color:#fff}
.pkg-offer__btn:hover{background:#175734;border-color:#175734}
.pkg-offer--done .pkg-offer__btn{background:#fff;border-color:#9aa7b2;color:#31414f}
.pkg-offer--done .pkg-offer__btn:hover{background:#eef1f4}
@media(max-width:560px){.pkg-offer{flex-direction:column;align-items:flex-start}
  .pkg-offer__btn{width:100%}}
.sup-price-cell{ position:relative; display:inline-flex; align-items:center; gap:4px; }
.sup-move{ border:1px solid var(--line-2,#cfe0e4); background:#fff; color:var(--accent); border-radius:7px; padding:1px 7px; font-size:12px; cursor:pointer; margin-left:6px; }
/* Remove just this package's allocation of the supplement. Quieter than .sup-move: it is
   destructive, so it should not compete with the move control for attention. */
.sup-rm{ border:0; background:none; color:var(--muted); padding:0 0 0 6px; font-size:13px; line-height:1; cursor:pointer; }
.sup-rm:hover{ color:var(--danger,#c0392b); }
.sup-move:hover{ background:var(--tint,#eef5f6); }
.sup-move-menu{ position:absolute; z-index:120; top:100%; right:0; background:#fff; border:1px solid var(--line-2,#cfe0e4); border-radius:9px; box-shadow:0 6px 18px rgba(10,40,66,.12); padding:4px; display:flex; flex-direction:column; min-width:160px; }
.sup-move-menu button{ text-align:left; border:0; background:none; padding:6px 10px; border-radius:6px; font-size:12.5px; cursor:pointer; color:var(--ink); }
.sup-move-menu button:hover{ background:var(--tint,#eef5f6); color:var(--accent); }

/* mini sor a drawerben */
.li{ display:grid; grid-template-columns:1fr auto; gap:4px 14px; padding:18px 0; border-bottom:1px solid var(--line); }
.li__name{ font-weight:600; font-size:15px; }
.li__meta{ color:var(--muted); font-size:13px; }
.li__price{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.li__ctrl{ display:flex; align-items:center; gap:12px; grid-column:1 / -1; margin-top:8px; }
.li__rm{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:13px; padding:4px; transition:color .15s; }
.li__rm:hover{ color:var(--danger); }
.li__suggest{
  font-size:13px; color:var(--muted); line-height:1.5;
  margin:-4px 0 10px; padding-left:2px;
}
.li__suggest a{ color:var(--accent-700); font-weight:700; text-decoration:none; white-space:nowrap; }
.li__suggest a:hover{ text-decoration:underline; }

/* üres állapot */
.empty{ text-align:center; padding:54px 18px; color:var(--muted); }
.empty__ic{ width:58px; height:58px; margin:0 auto 16px; border-radius:50%; background:var(--tint); display:grid; place-items:center; color:var(--accent-700); }
.empty h3{ font-size:19px; color:var(--ink); font-family:var(--font-body); }
.empty p{ margin:8px auto 22px; max-width:34ch; font-size:14.5px; }

/* ---------- 14. Kosár oldal (checkout) ---------- */
.checkout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,3.5vw,46px); align-items:start; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px); box-shadow:var(--sh-1); }
.panel + .panel{ margin-top:22px; }
.panel__title{ font-size:20px; display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.panel__step{ width:28px; height:28px; flex:none; border-radius:50%; background:var(--ink); color:#fff; font-size:14px; font-weight:700; display:grid; place-items:center; font-family:var(--font-body); }

/* checkout sor */
.crow{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px 20px; padding:20px 0; border-top:1px solid var(--line); }
.crow:first-of-type{ border-top:0; }
.crow__name{ font-weight:600; font-size:16px; }
.crow__meta{ color:var(--muted); font-size:13.5px; margin-top:3px; }
.crow__price{ text-align:right; }
.crow__unit{ color:var(--muted); font-size:12.5px; }
.crow__sum{ font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; }
.crow__rm{ background:none; border:0; cursor:pointer; color:var(--muted); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; transition:background .15s,color .15s; }
.crow__rm:hover{ background:#fbeaea; color:var(--danger); }
.crow--custom .crow__sum{ color:var(--accent-700); font-size:13.5px; font-weight:600; }

.addmore{ margin-top:22px; }

/* összegzés */
.totals{ margin-top:8px; }
.totals__row{ display:flex; justify-content:space-between; padding:9px 0; font-size:15px; color:var(--ink-2); }
.totals__row.grand{ border-top:1px solid var(--line); margin-top:6px; padding-top:16px; }
.totals__row.grand .t-lbl{ font-weight:700; color:var(--ink); font-size:17px; }
.totals__row.grand .t-val{ font-family:var(--font-display); font-weight:700; font-size:27px; color:var(--ink); }
.totals .t-val{ font-variant-numeric:tabular-nums; font-weight:600; }
.custom-note{ margin-top:14px; background:var(--tint); border-radius:var(--r-sm); padding:12px 15px; font-size:13px; color:var(--accent-ink); display:flex; gap:9px; }

/* ---------- 15. Űrlap ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
/* An author `display` beats the UA sheet's `[hidden]{display:none}` at equal specificity, so a
   hidden .field stays on screen. This is the FOURTH selector in this file needing the same
   patch (.cards, .rail, .pkg-row above) — a single global `[hidden]{display:none!important}`
   would end the class of bug, but it would also hide anything currently visible-by-accident,
   so it is a deliberate change rather than a drive-by one. Caught by the newsletter e2e:
   #nlPositionField carried `hidden` and rendered anyway. */
.field[hidden]{ display:none; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-2); }
.field label .req{ color:var(--accent); }
/* ⚠️ A BARE `.hint` RULE, because `.field .hint` below is a DESCENDANT selector and three of
   the five hints on this site are not inside a `.field`: the newsletter notice on the landing
   page, the consent hint on the cart, and the empty-cart signpost. All three rendered at full
   body size and full ink — the GDPR notice was as loud as the form above it. The two that ARE
   inside a `.field` keep their own values by specificity (0,2,0 beats 0,1,0), so this changes
   nothing for them. `line-height` is set here and not there: these three are paragraphs, the
   field ones are one-liners. */
.hint{ font-size:12.5px; line-height:1.5; color:var(--muted); }

/* Newsletter step 2 → 3 wait. Verifying the code also fetches the beosztás vocabulary and
   whatever MiniCRM already knows about the person, so this is a real round trip, not a
   flicker. `role="status"` + `aria-live` means a screen reader hears it without the focus
   moving. */
.nl-busy{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.nl-busy[hidden]{ display:none; }  /* our own display:inline-flex would beat the UA sheet — see .field[hidden] */
.nl-busy__spin{
  width:15px; height:15px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--line, #d7dee7); border-top-color: var(--ink-2, #46566b);
  animation: nl-spin .7s linear infinite;
}
@keyframes nl-spin{ to{ transform: rotate(360deg); } }
/* A spinner is decoration; the sentence beside it carries the meaning. Anyone who asked the
   system to stop animating still gets told what is happening. */
@media (prefers-reduced-motion: reduce){ .nl-busy__spin{ animation:none; } }

/* The success state used to be one more `.lede` paragraph in the same panel, directly under
   the intro paragraph and above the GDPR notice — three blocks of identical grey body text,
   so the one sentence that reports the outcome read as continuing prose. It is the answer to
   what the person just did, so it gets to look like an answer. */
.nl-done{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px; border-radius:12px;
  background:var(--tint); border:1px solid var(--line-2); border-left:4px solid var(--ok);
}
.nl-done__ic{ font-size:19px; line-height:1.35; color:var(--ok); flex:0 0 auto; }
.nl-done__txt{ display:flex; flex-direction:column; gap:3px; }
.nl-done__txt strong{ font-size:15.5px; color:var(--ink); }
.nl-done__txt span{ font-size:13.5px; line-height:1.5; color:var(--ink-2); }
.field .hint{ font-size:12.5px; color:var(--muted); }
.input{
  width:100%; padding:13px 15px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); font-size:15.5px; transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder{ color:#aab0b7; }
.input:hover{ border-color:var(--ink-2); }
.input:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--tint); }
.input:read-only{ background:var(--surface-2); color:var(--ink-2); }
textarea.input{ resize:vertical; min-height:96px; }

/* adószám csoport */
.tax-group{ grid-column:1 / -1; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.tax-group .lede{ font-size:13.5px; color:var(--muted); margin:2px 0 14px; }
.tax-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.tax-row .field{ flex:1 1 220px; }
.tax-state{ font-size:13px; margin-top:10px; min-height:1.2em; display:flex; align-items:center; gap:8px; }
.tax-state.ok{ color:var(--ok); }
.tax-state.err{ color:var(--danger); }
.tax-state.load{ color:var(--muted); }
.spin{ display:inline-block; vertical-align:middle; margin-right:6px; width:14px; height:14px; border:2px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn--accent .spin{ border-color:rgba(255,255,255,.45); border-top-color:#fff; }
@media (prefers-reduced-motion: reduce){ .spin{ animation:none; } }

/* Submit-in-flight overlay. The order commit is not one request — submit, then
   verify, which builds a PDF and writes several MiniCRM records — so it can run
   for seconds with nothing on screen but a disabled button. */
.sending-overlay{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:saturate(140%) blur(3px);
}
.sending-overlay__box{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 34px; box-shadow:var(--sh-3); max-width:min(420px, calc(100% - 32px)); text-align:center;
}
.sending-overlay__spin{
  width:38px; height:38px; border:3px solid var(--line-2); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
.sending-overlay__title{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.sending-overlay__note{ font-size:14px; color:var(--muted); line-height:1.5; }
@media (prefers-reduced-motion: reduce){
  .sending-overlay__spin{ animation:none; border-top-color:var(--accent); }
  .sending-overlay{ backdrop-filter:none; }
}

.consent{ grid-column:1 / -1; display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); margin-top:4px; }
.consent input{ margin-top:3px; width:17px; height:17px; accent-color:var(--accent); flex:none; }
.form-error{ grid-column:1 / -1; background:#fbeaea; color:var(--danger); border-radius:var(--r-sm); padding:12px 15px; font-size:14px; display:none; }
.form-error.show{ display:block; }

/* sticky összegző kártya a checkouton */
.summary-card{ position:sticky; top:96px; }

/* ---------- 16. Köszönjük oldal ---------- */
.thanks{ text-align:center; max-width:680px; margin-inline:auto; }
.thanks__check{
  width:84px; height:84px; margin:0 auto 26px; border-radius:50%;
  background:var(--tint); display:grid; place-items:center; color:var(--accent);
  box-shadow:0 0 0 0 rgba(15,122,95,.4);
}
.thanks__check svg{ width:42px; height:42px; }
.reveal-check .thanks__check{ animation:checkPop .7s var(--ease-out) both; }
@keyframes checkPop{ 0%{ transform:scale(.4); opacity:0 } 60%{ transform:scale(1.08) } 100%{ transform:scale(1); opacity:1 } }
.thanks h1{ font-size:clamp(30px,4vw,46px); }
.thanks__ref{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:9px 16px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); font-size:14px; }
.thanks__ref b{ font-variant-numeric:tabular-nums; letter-spacing:.04em; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; text-align:left; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; position:relative; }
.step__n{ font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; background:var(--ink); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; }
.step h3{ font-size:17px; font-family:var(--font-body); font-weight:700; margin-top:16px; }
.step p{ color:var(--muted); font-size:14px; margin-top:7px; }
.step__line{ position:absolute; top:39px; right:-10px; width:20px; height:2px; background:var(--line-2); }
.steps .step:last-child .step__line{ display:none; }

/* ---------- 17. Footer ---------- */
.site-foot{ background:var(--ink); color:rgba(255,255,255,.7); margin-top:auto; }
.foot-cta{ border-bottom:1px solid rgba(255,255,255,.1); }
.foot-cta__in{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding-block:clamp(36px,5vw,60px); }
.foot-cta h2{ color:#fff; font-size:clamp(24px,3vw,36px); max-width:18ch; }
.foot-cta p{ color:rgba(255,255,255,.6); margin-top:10px; }
.foot-main{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-block:42px; }
.foot-brand .brand__name{ color:#fff; }
.foot-brand .brand__sub{ color:rgba(255,255,255,.45); }
.foot-brand p{ margin-top:14px; max-width:32ch; font-size:14px; }
.foot-nav{ display:flex; gap:54px; flex-wrap:wrap; }
.foot-nav h4{ color:#fff; font-family:var(--font-body); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.foot-nav a{ display:block; padding:5px 0; font-size:14.5px; color:rgba(255,255,255,.66); transition:color .15s; }
.foot-nav a:hover{ color:#fff; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:22px; font-size:13px; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ---------- 18. Scroll-reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s; }
.reveal[data-d="2"]{ transition-delay:.14s; }
.reveal[data-d="3"]{ transition-delay:.21s; }
.reveal[data-d="4"]{ transition-delay:.28s; }
.reveal[data-d="5"]{ transition-delay:.35s; }

/* ---------- 19. Reszponzív ---------- */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__aside{ order:-1; }
  .checkout{ grid-template-columns:1fr; }
  .summary-card{ position:static; }
  .cards--pkg,.cards--addon{ grid-template-columns:repeat(2,1fr); }
  .pain{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .head-actions .btn--lg{ display:none; }   /* mobilon a megrendelés gomb a heróból elérhető */
  /* UX-5 (Vincze Dalma, 2026-09-17) — a fejléc kicsúszott a képernyőről telefonon.
     A fenti sor CSAK a `.btn--lg`-t rejti el, a `kosar.html` „← Szolgáltatások" és a
     `koszonjuk.html` „Új megrendelés" gombja viszont `.btn--ghost`, tehát végig látszott.
     Mérve 375px-es nézetben: a dokumentum 433px-re, illetve 422px-re szélesedett, mert a
     `.site-head__row` `nowrap`, a `.brand__mark` pedig `flex:none` 100px — semmi nem tudott
     engedni. ⚠️ A sor MAGASSÁGÁHOZ nem nyúlunk és NEM tördelünk: a 128px fix érték minden
     töréspontnál, ehhez igazodik a `--head-h` és az app.js `HEAD_OFFSET`-je is (lásd a
     „Sticky-header allowance" megjegyzést lentebb) — tördeléstől minden ugrópont a fejléc
     alá kerülne. Ezért a márkajelet szűkítjük, nem a sort.

     ⚠️ A TÉNYLEGES mechanizmus — két független hibavadászat mérte ki 2026-09-17-én, és nem az,
     aminek elsőre látszik: a teherhordó elem a `min-width:0`, nem a `width:64px`. A `.brand`
     automatikus flex-minimuma addig a logó szélességéhez volt kötve; `min-width:0`-val ez
     megszűnik, és onnantól a GLOBÁLIS `img,svg{ max-width:100% }` reset (a fájl elején) viszi
     a képet a deklarált mérete ALÁ. Ezért kap a márkajel `min-width`-et is: enélkül a szélesség
     zsugorodik, a `height:64px` viszont rögzítve marad, tehát a logó TORZUL, nem kicsinyedik.
     Mérve a `kosar.html`-en (a hosszabb gombbal): 290px-en 63.4×64, 280px-en 53.4×64, 260px-en
     33.4×64. A 320px-es valós eszközpadlót ez nem éri el, de a ráhagyás szűk, és egy hosszabb
     gombfelirat — fordítás, még egy ikon — bármikor átvinné. A `min-width:64px` ezt lezárja,
     és egyben ettől lesz igaz a fenti mondat is: floor nélkül a deklarált méret önmagában
     nem számított. */
  .site-head .brand{ min-width:0; }
  .site-head .brand__type{ min-width:0; }
  .site-head .brand__mark{ width:64px; height:64px; min-height:64px; min-width:64px; }
  .site-head .brand__name{ font-size:18px; }
  .head-actions .btn{ font-size:14px; }
  .statbar{ grid-template-columns:1fr 1fr; }
  .statbar .st{ border-bottom:1px solid var(--line); }
  .solve{ grid-template-columns:1fr; }
  .cards--pkg,.cards--addon{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .step__line{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .crow{ grid-template-columns:1fr auto; }
  .crow > div:first-child{ min-width:0; }
  .crow__price{ grid-column:1 / -1; grid-row:2; text-align:left; }
  .crow__rm{ grid-row:1; grid-column:2; justify-self:end; }
  .crow__sum, .crow__unit{ white-space:nowrap; }
}
/* UX-5, második lépcső: 560px alatt a ~181px-es „← Szolgáltatások" gomb mellett a
   szónévnek egyszerűen nincs hely (375px-en a márkára 136px marad, ebből a 64px-es
   logó és a 13px-es rés után 59px — kevés a „Beck and Partners"-nek). Marad a logó,
   ami maga is a főoldal-linkje; a cégnév a heróban és a láblécben ott van. A
   `.site-head` előtag kötelező: a `.foot-brand` ugyanezeket az osztályokat használja. */
@media (max-width:560px){
  .site-head .brand__type{ display:none; }
}

/* ---------- 20. Mozgáscsökkentés ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 21. Akciós árazás (badge + áthúzott listaár) ---------- */
/* Eredeti ár + badge külön sorban, a diszkontált ár FÖLÖTT — így a nagy ár nem
   törik több sorba. A diszkontált árat a `.price` sor tartja (amt + cur egyben). */
.price__was{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.price__was + .price{ margin-top:2px; }
.price__list{ text-decoration:line-through; color:var(--muted); font-weight:600; font-size:15px; }
.promo-badge{
  display:inline-block; padding:3px 10px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
/* A diszkontált összeg ne törjön a hu-HU ezres-elválasztó szóköznél. */
.price__amt{ white-space:nowrap; }

/* Kosár / pénztár kedvezmény-megjelenítés (áthúzott listaár + Kedvezmény sor). */
.li__was, .crow__was{ text-decoration:line-through; color:var(--muted); font-weight:600; font-size:13px; }
.crow__was{ display:block; }
.drawer__disc{ display:flex; justify-content:space-between; align-items:baseline; color:var(--accent); font-weight:700; font-size:13.5px; margin:2px 0 10px; }
.totals__row--disc .t-lbl, .totals__row--disc .t-val{ color:var(--accent); font-weight:700; }

/* ---------- 22. „Aktuális akciók” buborék ---------- */
.akcio-bubble{ margin:0 0 22px; }
.akcio-bubble__toggle{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--tint); color:var(--accent); border:1px solid var(--accent);
  border-radius:var(--r-pill); padding:9px 16px; font-weight:700; font-size:14px;
}
.akcio-bubble__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px;
}
.akcio-bubble__list{ list-style:none; margin:12px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.akcio-bubble__list li{ padding:8px 0; border-bottom:1px solid var(--line); }
.akcio-bubble__list li:last-child{ border-bottom:0; }
.akcio-bubble__desc{ color:var(--muted); font-size:13px; margin-top:3px; }

.cat-section-head {
  grid-column: 1 / -1;      /* span the full package grid row */
  flex: 0 0 100%;           /* and the full width if the grid degrades to flex */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cat-section-head:first-child { margin-top: 0; }
.cat-section-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.cat-section-head i { color: var(--accent); font-size: 18px; }

/* Per-category blurb, printed under its own heading. Every category's blurb is on
   the page at once now that the pills jump instead of filter. */
.cat-section-blurb {
  grid-column: 1 / -1;
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 20px;
  max-width: 78ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Per-category "Ajánlott pozíciótípus" filter row. Full-width in the package grid,
   same treatment as a section heading. */
.aud-row{
  grid-column:1 / -1; flex:0 0 100%; width:100%;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 20px;
}
.aud-row__lbl{ font-size:13px; font-weight:700; color:var(--muted); margin-right:4px; }
.aud-btn{
  font-size:13.5px; font-weight:700; color:var(--accent-700);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.aud-btn:hover{ border-color:var(--line-2); }
.aud-btn.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* "Egyéb csomagok" divider — the cards below it stay fully clickable. */
.aud-split{
  grid-column:1 / -1; flex:0 0 100%; width:100%;
  margin:14px 0 16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--muted);
}
.card.is-dimmed{ opacity:.62; }
.card.is-dimmed:hover{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .card.is-dimmed{ transition:opacity .25s var(--ease); }
}

/* Sticky-header allowance for every in-page jump target: .site-head__row is a
   fixed 128px at every breakpoint (border-box), the rest is breathing room.
   Without this, every fragment link and every pill jump lands UNDER the header.
   Keep in step with HEAD_OFFSET in app.js, which drives the scroll-spy line. */
:root { --head-h: 148px; }
.cat-section-head,
#categoryRow,
#csomagok,
#szolgaltatas,
#info,
#kiegeszitok,
#fejvadaszat { scroll-margin-top: var(--head-h); }

.skeleton-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; min-height:300px; position:relative; overflow:hidden; }
.skeleton-card::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent); animation:sk-shimmer 1.4s infinite; }
.skeleton-line{ height:14px; border-radius:6px; background:var(--surface-2); margin-bottom:12px; }
.skeleton-line.sk-title{ height:22px; width:55%; } .skeleton-line.sk-price{ height:28px; width:40%; margin:18px 0; } .skeleton-line.sk-short{ width:70%; }
@keyframes sk-shimmer{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .skeleton-card::after{ display:none; } }

.card__detail-toggle{ margin-top:14px; background:none; border:none; color:var(--accent); font:inherit; font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:4px 0; align-self:flex-start; }
.card-detail-modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-46%); opacity:0; z-index:1000; background:var(--surface); border-radius:var(--r-lg); padding:30px; max-width:520px; width:calc(100% - 32px); max-height:calc(100vh - 170px); overflow-y:auto; box-shadow:var(--sh-3); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.card-detail-modal.is-open{ opacity:1; transform:translate(-50%,-50%); }
.card-detail-title{ font-size:22px; margin:0 0 14px; padding-right:28px; }
.card-detail-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; }
/* Modal "full card" order controls (appendOrderControls output, package-only) — a
   contiguous block between the title and the detail text, visually separated from
   both so the modal reads as "card, enlarged" rather than two stitched-together UIs. */
.card-detail-controls{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.card-detail-controls .price{ margin-top:0; }
.card-detail-controls .card__foot{ margin-top:0; padding-top:18px; }
.card__detail-desc{ font-size:14.5px; color:var(--ink-2); margin-bottom:14px; line-height:1.6; }
.card-detail-modal .feat{ margin:0 0 14px; }
.card__detail-ideal{ font-size:13.5px; color:var(--muted); margin-top:12px; }
.card__detail-ideal span{ font-weight:600; color:var(--ink); }
@media (prefers-reduced-motion: reduce){ .card-detail-modal{ transition:none; } }

/* ---------- Compare selection (service comparison — radar + table, Task 3) ---------- */
.card__compare{ display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin-top:12px; font-size:13.5px; color:var(--ink-2); cursor:pointer; user-select:none; }
.card__compare input{ width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer; }
.card__compare input:disabled{ cursor:default; opacity:.5; }
.card__compare input:disabled + span{ color:var(--muted); }

.cmp-bar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  /* Above .compare-modal / .card-detail-modal (z-index:1000) — Törlés must stay
   * clickable (and close an open modal) while either dialog is showing; the
   * bar would otherwise sit entirely underneath it. */
  z-index:1010; display:none; align-items:center; gap:14px;
  background:var(--ink); color:#fff; border-radius:var(--r-pill);
  padding:10px 10px 10px 22px; box-shadow:var(--sh-3);
  max-width:calc(100% - 32px);
}
.cmp-bar.is-open{ display:flex; }
.cmp-bar__count{ font-weight:600; font-size:14px; white-space:nowrap; }
.cmp-bar__hint{ font-size:12.5px; color:#ffcf8a; }
.cmp-bar__hint:empty{ display:none; }
.cmp-bar__open{ white-space:nowrap; }
.cmp-bar__open[disabled]{ opacity:.45; cursor:default; }
.cmp-bar__open[disabled]:hover{ transform:none; box-shadow:none; }
/* .cmp-bar__clear is now a real .btn.btn--ghost.btn--sm — the dark bar needs
 * a light fg/border override (mirrors .btn--on-dark.btn--ghost) instead of
 * the old underlined-text-link look. */
.cmp-bar .btn--ghost{ --fg:#fff; --bd:rgba(255,255,255,.34); }
.cmp-bar .btn--ghost:hover{ --bd:#fff; background:rgba(255,255,255,.08); }
.cmp-bar__clear{ white-space:nowrap; }
/* Mobile: the comparison modal is a full-screen sheet (max-height:none) so it CAN'T keep the
 * desktop bottom-clearance — drop the bar BELOW the sheet (z<1000) so the sheet covers it and the
 * tfoot "Megrendelem" CTA stays clickable; the sheet's own × closes it (Törlés-over-modal is
 * desktop-only). The bar flex-wraps taller here, which is exactly why z-1010 would eclipse the CTA. */
@media (max-width:640px){ .cmp-bar{ flex-wrap:wrap; justify-content:center; padding:12px 16px; z-index:999; } }

/* ---------- Comparison modal (Task 4) ---------- */
/* max-height leaves ~85px top/bottom clearance so the centred modal never sits under the
 * fixed .cmp-bar (z-index 1010, ~75px tall at the viewport bottom) — the bar must stay
 * clickable over the modal (Törlés closes it) WITHOUT eclipsing the tfoot "Megrendelem" row. */
.compare-modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-46%); opacity:0; z-index:1000; background:var(--surface); border-radius:var(--r-lg); padding:28px; max-width:860px; width:calc(100% - 32px); max-height:calc(100vh - 170px); display:flex; flex-direction:column; box-shadow:var(--sh-3); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.compare-modal.is-open{ opacity:1; transform:translate(-50%,-50%); }
@media (prefers-reduced-motion: reduce){ .compare-modal{ transition:none; } }

/* Task 3 (comparison refinements): the head/legend/radar never scroll —
 * only .compare-modal__table-wrap below does. flex:0 0 auto keeps this
 * block at its natural height; the table-wrap gets the rest via flex:1 1 auto. */
.compare-modal__pinned{ flex:0 0 auto; }

.compare-modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.compare-modal__title{ font-size:22px; margin:0; }
.compare-modal__close{ background:none; border:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; padding:0; flex:none; }

.compare-modal__legend{ list-style:none; display:flex; flex-wrap:wrap; gap:14px 20px; margin:0 0 18px; padding:0; }
.compare-modal__legend li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); font-weight:600; }
.compare-modal__swatch{ width:12px; height:12px; border-radius:50%; display:inline-block; flex:none; }

.compare-radar{ min-height:8px; margin-bottom:18px; }
.compare-radar svg{ overflow:visible; }
/* Task 3 (comparison refinements): buildStrengthRadar() (app.js, untouched
 * per scope) sets the SVG's own `style.maxWidth="360px"` inline — at that
 * size, once pinned, the radar alone can eat nearly the whole modal budget
 * (measured: table-wrap dropped to ~34px of visible height at a plain
 * 1280x720 viewport). `!important` is the only way to out-rank a JS-set
 * inline style without editing buildStrengthRadar; height:auto (inline)
 * then follows the shrunk width, preserving the square aspect ratio. 180px
 * balances two measured constraints: the axis-label text (9.5px in the
 * SVG's own viewBox units, so it scales down with the SVG) stays legible on
 * standard-density screens — verified via a rendered screenshot of
 * "Költséghatékonyság", the longest label — while the table-wrap still
 * clears its usable-height floor at a plain 1280x720 viewport with the
 * 3-card fixture (200px cut it to within 0.1px of that floor — too tight). */
.compare-radar svg{ max-width:180px !important; }
/* Enlarge the radar where there's confirmed vertical headroom (no cost to the crush
 * case) so it stays prominent + labels legible on common laptop/desktop heights. */
@media (min-height:900px){ .compare-radar svg{ max-width:240px !important; } }
@media (min-height:1100px){ .compare-radar svg{ max-width:300px !important; } }
.compare-radar__label{ font-size:9.5px; fill:var(--ink-2); font-weight:600; }
@media (max-width:640px){ .compare-radar__label{ font-size:8px; } }
/* Very short viewports: even the capped radar above leaves too little room
 * for the table once the pinned title+legend are accounted for. Drop the
 * radar entirely (title+legend stay pinned) so the table gets the space
 * back; it's still shown — capped — on every taller screen. */
/* UX-6 (Vincze Dalma, 2026-09-17): telefonon ez a szabály elrejtette az ábrát, amit
   gépen lát — a `(min-width:641px)` ezért került bele. A magasság-alapú rejtés SZÁNDÉKA
   a rövid laptop-ablak volt (lásd a fenti megjegyzést), a telefon csak mellékesen esett
   bele: 375×600-as nézetben mérve a `.compare-modal__pinned .compare-radar` `display:none`-ra
   számítódott. Önellentmondás is volt a fájlban: a `(max-width:640px)` alatti
   `.compare-radar__label{font-size:8px}` szabály kifejezetten TELEFONRA méretezi az
   ábra feliratait — tehát ott láthatónak szánták. ≤640px-en a modal amúgy is teljes
   képernyős lap, a táblázat saját görgethető régióban van, a radar pedig 180px-re
   korlátozott, így a helyszűke-érv itt nem áll. */
@media (max-height:680px) and (min-width:641px){ .compare-modal__pinned .compare-radar{ display:none; } }

/* The SOLE scroll region — flex:1 1 auto + overflow:auto lets it shrink
 * below its content height (the flex min-height:auto reset that overflow
 * triggers) so it absorbs the excess instead of the modal itself. */
.compare-modal__table-wrap{ flex:1 1 auto; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); }
/* On DESKTOP, table-layout:fixed + a 40% first column (which WRAPS its long feature labels) makes
 * the 3 service columns split the remaining 60% and fit horizontally — no cut-off 3rd column.
 * On the ≤640px full-screen sheet, 3 columns + full-width "Megrendelem" CTAs can't fit, so the
 * table keeps auto-layout and scrolls horizontally inside its wrap (CTAs stay legible, never clipped). */
.compare-modal__table{ width:100%; border-collapse:collapse; font-size:13.5px; }
@media (min-width:641px){
  .compare-modal__table{ table-layout:fixed; }
  .compare-modal__table th:first-child{ width:40%; }
}
.compare-modal__table th, .compare-modal__table td{ padding:11px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.compare-modal__table thead th{ font-weight:700; color:var(--ink); position:sticky; top:0; background:var(--surface); z-index:1; }
.compare-modal__table tbody th[scope="row"]{ font-weight:600; color:var(--ink-2); background:var(--surface-2); white-space:normal; position:sticky; left:0; }
.compare-modal__table tbody td{ white-space:normal; }
.compare-modal__table tfoot td{ border-bottom:none; padding-top:16px; }
.compare-modal__price-was{ text-decoration:line-through; color:var(--muted); font-size:12px; margin-right:8px; }
.compare-modal__add-btn{ white-space:nowrap; }
/* Feature matrix (Task 2 refinement) — recursively-expanded "Minden, ami a
   X csomagban" bullets rendered as one row per unique feature, a green
   check per service that includes it. */
.compare-modal__check{ color:#2e9e5b; }
.compare-modal__table td.compare-modal__has{ text-align:center; }
.compare-modal__table td.compare-modal__feat-no{ color:var(--line-2); text-align:center; }
.compare-modal__table tbody th.compare-modal__feat-name{ font-weight:500; }
.compare-modal__feat-sep th{ padding-top:14px; font-weight:600; }

@media (max-width:640px){
  .compare-modal{ left:0; top:0; transform:none; width:100%; height:100%; max-width:none; max-height:none; border-radius:0; padding:20px 16px; }
  .compare-modal.is-open{ transform:none; }
}

/* Landing addon teaser card's "Részletek" deep-link (beside "Kiválasztom →") — opens the
   catalog page with ?open=<serviceId>, which scrolls to and opens that card's detail modal. */
.addon-detail-link{ display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--accent); }

/* Checkout "Ezekkel egészítheti ki" add-on panel (item 8, part 2). */
#checkoutAddons .cards--addon{ grid-template-columns:repeat(2,1fr); gap:16px; }
#checkoutAddons .lede{ margin:-6px 0 18px; }
@media (max-width:720px){ #checkoutAddons .cards--addon{ grid-template-columns:1fr; } }

/* Compact the checkout add-on cards. On the catalog page these cards are the
   product and deserve the room; at checkout they sit between the basket and the
   customer's own details, and an identified client was scrolling past four
   full-height cards to reach the company fields they came for. Tightened here
   ONLY — the catalog rail keeps the roomier .card sizing. */
#checkoutAddons .card{ padding:18px 18px 16px; }
#checkoutAddons .addon-ic{ width:34px; height:34px; margin-bottom:8px; }
#checkoutAddons .card__name{ font-size:16px; line-height:1.3; margin-bottom:4px; }
#checkoutAddons .card__lede{
  font-size:13px; line-height:1.45; margin-bottom:10px;
  /* Two lines is enough to identify a service the client is already being shown
     in context; the full copy stays one click away under Részletek. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#checkoutAddons .price{ margin-top:2px; }
#checkoutAddons .price__amt{ font-size:22px; }
#checkoutAddons .price__vat{ font-size:11.5px; margin-bottom:8px; }
#checkoutAddons .variant{ margin:0 0 10px; padding:7px 10px; font-size:13.5px; }
#checkoutAddons .card__foot{ margin-top:auto; padding-top:2px; }
#checkoutAddons .card__foot .btn{ margin-top:10px !important; padding:9px 14px; font-size:14px; }
#checkoutAddons .opt-row{ margin:0; }
#checkoutAddons .addon-detail-link,
#checkoutAddons .card__detail-toggle{ margin-top:8px; font-size:12.5px; }

/* Dismiss control for the whole section. Sits in the panel title row so it reads
   as "close this block", not "remove this card". */
.panel__title--with-action{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.addons-dismiss{
  flex:0 0 auto; width:28px; height:28px; line-height:1; padding:0;
  border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--muted, #6b7280); font-size:14px; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.addons-dismiss:hover{ background:#f4f7fa; color:#111; border-color:#c9d3dd; }
.addons-dismiss:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- 23. Mobil csomag-nezet (kiemelt harmas + rovid sorok) ---------- */
/* Csak a landolo oldalon, csak 720px alatt -- a JS ott epiti ezt a szerkezetet
   (renderLandingGrid). Felette a #landingCards a mai racs marad, ezert itt semmi
   sem nyul a .cards--pkg alapszabalyaihoz. */
#landingCards.cards--split{ display:block; }
.pkg-lead{ margin:0 0 14px; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); }
.pkg-lead--sub{ margin:28px 0 12px; font-size:15px; font-weight:600; color:var(--muted); }
.pkg-rows{ display:grid; gap:8px; }
.pkg-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 14px; font:inherit; color:var(--ink);
}
/* Sajat display:flex erosebb, mint a bongeszo [hidden]{display:none} szabalya -- ugyanaz
   a csapda, amit a .cards[hidden] mar dokumental fentebb. */
.pkg-row[hidden]{ display:none; }
.pkg-row:hover{ border-color:var(--line-2); }
.pkg-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pkg-row__name{ flex:1 1 auto; min-width:0; font-weight:600; font-size:15px; }
.pkg-row__price{ font-size:13.5px; color:var(--muted); white-space:nowrap; }
.pkg-row__go{ color:var(--accent); font-weight:700; }
.pkg-pair__card{ margin-top:8px; }
.pkg-close{ margin-top:4px; }
.pkg-expand{ margin-top:16px; }
/* A nyitas/zaras szandekosan azonnali: nincs magassag-animacio, ezert a
   prefers-reduced-motion agnak sincs mit letiltania (app.css 20. szakasz). */
/* A "Legnepszerubb csomagjaink" felirat ugyanazt mondja, mint a jelveny, es harom egymas
   alatti kiemelt keret is sok egy telefonon: itt a felirat viszi az informaciot. Desktopon
   es a katalogusoldalon a jelveny marad. */
@media (max-width:720px){
  .pkg-ranked .card__flag{ display:none; }
  .pkg-ranked .card--featured{ border-color:var(--line); box-shadow:var(--sh-1); }
}

/* ---------- 24. Sorrend (rendezés-váltó a kategóriasorban) ---------- */
/* A `.cat-row` flex-sor, ezért a vezérlő `margin-left:auto`-val a sor jobb szélére ül,
   és szűk sorban egyszerűen a következő sorba törik. Gombjai szándékosan ugyanazok,
   mint az `.aud-btn` — ugyanaz a gesztus, ugyanaz a megjelenés. */
.sort-row{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.sort-row__lbl{ font-size:13px; font-weight:700; color:var(--muted); }
.sort-btn{
  font-size:13.5px; font-weight:700; color:var(--accent-700);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.sort-btn:hover{ border-color:var(--line-2); }
.sort-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sort-btn.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* A landolo oldal mobil nezete sajat szerkezetet ad (kiemelt harmas + rovid sorok), amiben
   nincs masik sorrend felajanlani valo — ott a vezerlo nem jelenik meg. A katalogusoldal
   minden szelessegen megtartja, mert ott egyetlen szerkezet van. */
@media (max-width:720px){
  #landingCatRow .sort-row{ display:none; }
  .sort-row{ margin-left:0; width:100%; }
}