/* Pénztári ajánló – az ajánló blokk, a sorok és a bizalmi sor stílusai (pénztár, kosárpanel, popup).
   A modulok/penztar-ajanlo.php tölti be a <head>-ben (wp_head, 10) – ott, ahol korábban a beágyazott stílus állt. */
/* kék doboz (a termékoldali ajánló sáv színei), benne fehér kártyasorok */
.szu-pa { margin: 0 0 2rem; padding: 1.4rem; border-radius: var(--radius-m); background: var(--accent); color: var(--on-accent); }
.szu-pa--ures { display: none; }
/* pénztár: összesítő ≥ 992 px, első lépés ≤ 991 px (ott az összesítő össze van csukva) */
#cfw-customer-info .szu-pa { display: none; }
@media (max-width: 991.98px) {
  #cfw-cart-summary .szu-pa { display: none; }
  #cfw-customer-info .szu-pa:not(.szu-pa--ures) { display: block; margin-top: 2.4rem; }
}
/* a cím sora: jobbra a fülek legördülő listája (popup) */
.szu-pa__fej { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; margin: 0 0 1.2rem; }
.szu-pa__fulvalaszto { flex: 0 1 auto; min-width: 0; max-width: 60%; min-height: 3.2rem; padding: 0.2rem 0.8rem; border: 1px solid color-mix(in srgb, var(--on-accent) 50%, transparent); border-radius: var(--radius-s); background: var(--neutral-0); color: var(--neutral-900); font: inherit; font-size: 1.3rem; text-overflow: ellipsis; cursor: pointer; -webkit-appearance: auto; appearance: auto; }
.szu-pa__fulvalaszto:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
/* a #cfw előtag a CheckoutWC saját címsor- és linkszabályai miatt kell */
.szu-pa__cim, #cfw .szu-pa__cim { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--on-accent); }
/* fekvő sorok (kép – adatok – gomb), kettő egymás alatt; a többi kettesével oldalra görgethető (egy oldal = a
   lista teljes szélessége); a ‹ › gombokat a assets/js/hscroll-arrows.js teszi a lista köré (.hscroll-wrap) */
.szu-pa__lista { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 100%; gap: 0.8rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
/* egyetlen látható sornál nincs üres második sor */
.szu-pa__lista:not(:has(.szu-pa__sor:not([hidden]) ~ .szu-pa__sor:not([hidden]))) { grid-template-rows: auto; }
.szu-pa__lista::-webkit-scrollbar { display: none; }
.szu-pa .hscroll-btn { width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; }
.szu-pa .hscroll-btn svg { width: 1.5rem; height: 1.5rem; }
.szu-pa__sor { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: 0.4rem 1.2rem; align-items: center; min-width: 0; padding: 0.8rem; border-radius: var(--radius-s); background: var(--neutral-0); color: var(--neutral-900); scroll-snap-align: start; }
.szu-pa__sor[hidden] { display: none; }
.szu-pa__kep { display: block; width: 5.2rem; height: 5.2rem; border: 1px solid var(--neutral-200); border-radius: var(--radius-s); background: var(--media-bg); overflow: hidden; }
.szu-pa__kep img { display: block; width: 100%; height: 100%; object-fit: contain; }
:root[data-brx-theme="dark"] .szu-pa__kep { filter: brightness(0.91); }
.szu-pa__adat { display: grid; gap: 0.2rem; min-width: 0; font-size: 1.3rem; line-height: 1.35; }
.szu-pa__nev, #cfw .szu-pa__nev { color: var(--neutral-900); font-weight: 500; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.szu-pa__nev:hover, #cfw .szu-pa__nev:hover { text-decoration: underline; }
.szu-pa__meta { display: flex; flex-wrap: wrap; gap: 0 0.6rem; font-size: 1.2rem; color: var(--neutral-500); }
/* az elválasztó a változat végén marad, ha a cikkszám új sorba törik */
.szu-pa__valtozat:has(+ .szu-pa__cikkszam:not([hidden]))::after { content: "·"; margin-left: 0.6rem; }
.szu-pa__valaszto { width: 100%; max-width: 22rem; min-height: 3.2rem; padding: 0.2rem 0.8rem; border: 1px solid var(--neutral-300); border-radius: var(--radius-s); background: var(--neutral-0); color: var(--neutral-900); font: inherit; -webkit-appearance: auto; appearance: auto; }
.szu-pa__ar { font-weight: 600; }
.szu-pa__ar del { font-weight: 400; color: var(--neutral-500); }
.szu-pa__ar ins { text-decoration: none; color: var(--primary-text); }
.szu-pa__gomb { min-height: 3.6rem; padding: 0 1.4rem; border: 0; border-radius: var(--radius-s); background: var(--primary); color: var(--on-primary); font: inherit; font-size: 1.3rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.szu-pa__gomb:hover { filter: brightness(0.92); }
.szu-pa__gomb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.szu-pa__gomb[disabled] { opacity: 0.45; cursor: not-allowed; }
.szu-pa__gomb.is-loading { opacity: 0.7; cursor: progress; }
.szu-pa__gomb.is-loading::after { content: ""; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: 0.6rem; vertical-align: -0.1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: szu-pa-forog 0.7s linear infinite; }
.szu-pa__gomb.is-kesz { opacity: 1; background: var(--success); color: var(--neutral-0); cursor: default; }
.szu-pa__gomb.is-kesz::before { content: "✓ " / ""; }
.szu-pa__hiba { grid-column: 2 / -1; font-size: 1.2rem; color: var(--danger); }
.szu-pa__hiba a, #cfw .szu-pa__hiba a { color: inherit; text-decoration: underline; }
@keyframes szu-pa-forog { to { transform: rotate(360deg); } }
/* Kosárpanel: bizalmi sor a részösszeg és a két gomb között */
.szu-bizalom { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1.6rem; padding: 0 var(--space-m) var(--space-2xs); font-size: 1.25rem; line-height: 1.45; color: var(--neutral-700); }
.szu-bizalom__elem { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.szu-bizalom__elem strong { font-weight: 700; color: var(--neutral-900); }
.szu-bizalom__jel { flex: none; font-weight: 700; }
.szu-bizalom__jel--csillag { color: var(--warning); }
.szu-bizalom__jel--pipa { color: var(--success); }
/* „most nyitva”: csak nyitvatartási időben (a nyitvatartas-statusz.php teszi a html elemre az osztályt) */
.szu-bizalom__nyitva { display: none; color: color-mix(in srgb, var(--success) 70%, var(--neutral-900)); }
html.szu-nyitva .szu-bizalom__nyitva { display: inline; }
@media (prefers-reduced-motion: reduce) { .szu-pa__gomb.is-loading::after { animation: none; } }