/* ======================
   ThermoScope – styles.css (CLEAN)
   ====================== */

/* --- Téma változók --- */
:root{
  --bg:#e9f2fb; --panel:#ffffff; --text:#0f172a; --muted:#3e4a63; --border:#d3dde8;
  --accent:#1f3a8a; --chip:#f1f5fb; --chiptext:#1f2937; --overlay:rgba(0,0,0,.45);
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --drawer-bg:#f2f6fd; --drawer-dark:#1c273a;
  --input-bg:#fff; --input-txt:var(--text); --placeholder:#5b6b86; --link:#1f3a8a;
  --ok:#0ea45b; --warn:#d97706; --err:#dc2626;
  --hdr-h: 64px;
  --modal-gap-top: 12px;
}

:root.dark{
  --bg:#0f172a; --panel:#111827; --text:#e5e7eb; --muted:#96a3bb; --border:#2b3647;
  --chip:#182235; --chiptext:#e5e7eb; --overlay:rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --drawer-bg:#1c273a; --drawer-dark:#1c273a;
  --input-bg:#0f172a; --input-txt:#e5e7eb; --placeholder:#b6c6df; --link:#93c5fd;
}

/* --- Alapok --- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:14px/1.55 var(--app-font);
  color:var(--text);
  background-image:linear-gradient(180deg,#E8F0FF 0%,#B2CAF1 50%,#E8F0FF 100%);
  background-size:100% 200vh; background-repeat:repeat-y;
}
:root.dark body{
  background-image:linear-gradient(180deg,#3B5F97 0%,#060D1B 50%,#3B5F97 100%);
  background-size:100% 200vh; background-repeat:repeat-y;
}

html, body { max-width:100%; overflow-x:hidden }

/* --- Layout helper-ek --- */
.ctr{ max-width:1760px; margin:0 auto; padding:0 12px }
.row{ display:flex; gap:8px; align-items:center }
.row-between{ display:flex; gap:8px; align-items:center; justify-content:space-between }
.grid{ display:grid; gap:12px }

/* ===== Globális linkstílus (ÁSZF-hez igazítva) ===== */
a{ color:var(--link); text-decoration:none }
a:hover

/* megtartjuk a .link segédosztályt is, de a fenti mostantól minden <a>-ra érvényes */
.link{ color:var(--link); text-decoration:none }
.link:hover{ text-decoration:underline }
.badgewrap{ position:relative }
.badgecount{
  position:absolute; top:-6px; right:-6px;
  background:#ef4444; color:#fff; border-radius:999px; min-width:20px; height:20px;
  padding:0 6px; font-size:12px; display:grid; place-items:center
}

/* --- Banner --- */
.top-banner{ background:transparent; padding:14px 0 }
.banner-inner{ display:flex; flex-direction:column; gap:4px }
.banner-logo{ display:flex; align-items:center; gap:8px }
.banner-logo .brand-text{ font-size:28px; font-weight:900; color:var(--accent) }
.banner-logo .logo-ico{ color:var(--accent) }
.brand-link{ display:inline-flex; align-items:center }
.brand-logo{ display:block; width:clamp(160px,42vw,280px); height:auto; max-width:100%; flex-shrink:0 }

/* --- Header (sticky) --- */
.hdr{ position:sticky; top:0; z-index:90; background:transparent; padding:8px 0 12px }
.hdr-in{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:8px 10px; box-shadow:var(--shadow);
  display:flex; flex-wrap:wrap; gap:8px;
}
.iconbtn{
  border:1px solid var(--border); background:var(--panel); color:inherit;
  width:40px; height:40px; border-radius:12px; cursor:pointer; display:grid; place-items:center
}
.iconbtn:hover{ filter:brightness(.98) }
.pill{ border:1px solid var(--border); background:var(--chip); color:var(--chiptext); padding:8px 12px; border-radius:999px; cursor:pointer }

/* --- Ikonok --- */
.ico-sun,.ico-moon,.ico-bars,.ico-search,.ico-cart,.ico-close,.ico-expand,.ico-collapse{
  width:20px; height:20px; display:inline-block; position:relative
}
.ico-bars::before,.ico-bars::after,.ico-bars span{
  content:""; display:block; height:2px; background:currentColor; position:absolute; left:2px; right:2px; border-radius:2px
}
.ico-bars::before{ top:5px } .ico-bars::after{ bottom:5px } .ico-bars span{ top:calc(50% - 1px) }
.ico-search{ border:2px solid currentColor; border-radius:50% }
.ico-search::after{ content:""; position:absolute; width:10px; height:2px; right:-6px; bottom:-2px; background:currentColor; transform:rotate(45deg) }
.ico-cart::before{ content:""; position:absolute; left:3px; right:3px; bottom:6px; height:10px; border:2px solid currentColor; border-bottom-width:6px; border-radius:3px }
.ico-cart::after{ content:""; position:absolute; left:6px; bottom:2px; width:4px; height:4px; border-radius:50%; background:currentColor; box-shadow:10px 0 0 currentColor }
.ico-close::before,.ico-close::after{ content:""; position:absolute; left:3px; right:3px; top:9px; height:2px; background:currentColor; border-radius:2px }
.ico-close::before{ transform:rotate(45deg) } .ico-close::after{ transform:rotate(-45deg) }
.ico-expand::before,.ico-expand::after{ content:""; position:absolute; left:3px; right:3px; height:2px; background:currentColor; border-radius:2px }
.ico-expand::before{ top:6px } .ico-expand::after{ top:12px }
.ico-collapse::before{ content:""; position:absolute; left:3px; right:3px; height:2px; top:9px; background:currentColor; border-radius:2px }

/* --- Kereső --- */
.search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:12px; padding:6px 8px; background:var(--panel);
  flex:1 1 180px; min-width:0;
}
.search input{
  border:none; outline:none; background:var(--input-bg); color:var(--input-txt);
  min-width:0; width:100%; font-size:14px;
}
.search input::placeholder{ color:var(--placeholder) }

/* --- Drawer + backdrop --- */
#backdrop{ position:fixed; inset:0; background:var(--overlay); z-index:900 }
#drawer{
  position:fixed; inset:0 auto 0 0; width:360px; max-width:90vw;
  transform:translateX(-100%); background:var(--drawer-bg);
  border-right:1px solid var(--border); box-shadow:var(--shadow);
  z-index:1000; display:flex; flex-direction:column; transition:transform .25s ease; will-change:transform;
}
:root.dark #drawer{ background:#1c273a }
#drawer.open{ transform:none }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border) }
.drawer-title{ font-weight:800 }
.drawer-body{ padding:12px; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain }

/* --- Kategóriafa --- */
.cat-tree ul{ list-style:none; padding-left:14px; margin:6px 0 }
.cat-tree li{ margin:2px 0 }
.cat-row{ display:flex; align-items:center; gap:8px }
.cat-toggle.tri{
  width:24px; height:24px; border:1px solid var(--border); border-radius:6px;
  display:grid; place-items:center; background:var(--panel); cursor:pointer; font-size:18px; line-height:1
}
:root.dark .cat-toggle.tri{ background:#0f1627; border-color:#2b3647; color:#e5e7eb }
.cat-check{ transform:translateY(1px) }
.cat-name{ cursor:pointer }
.filters-head{ display:flex; gap:8px; align-items:center; margin:6px 0 }
.filters-head .spacer{ flex:1 }
.filters-section{ display:block }
.filters-section:not(.open){ display:none }

/* --- Brand facet --- */
#brand-search{ width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--input-txt); margin-bottom:6px }
.facet-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px }
@media (max-width:520px){ .facet-list{ grid-template-columns:1fr } }
.facet-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:10px; background:var(--panel) }
.facet-left{ display:flex; gap:6px; align-items:center }
.facet-count{ opacity:.75 }

/* --- Ajánlósáv --- */
.reco{ padding:18px 0 }
.reco-head h2{ margin:0 }
.reco-strip{
  display:flex; gap:12px; overflow:hidden; padding:8px 2px; user-select:none; -webkit-user-drag:none; cursor:grab;
}
.reco-strip:active{ cursor:grabbing }
.reco-item{
  flex:0 0 220px; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.10), 0 12px 22px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}
.reco-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.14), 0 22px 36px rgba(0,0,0,.22);
}
.reco-item .reco-pic{ display:block; width:100%; height:140px; overflow:hidden; border-radius:12px 12px 0 0; background:#f4f6fa }
:root.dark .reco-item .reco-pic{ background:#0f1627 }
.reco-item .reco-pic img{ width:100%; height:100%; object-fit:contain }
.reco-item .reco-box{ padding:12px; display:grid; gap:6px }


.reco-title{ color:inherit; text-decoration:none }
.reco-title:hover
/* --- Találatsáv + GRID --- */
.bar{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin:12px 0; box-shadow:var(--shadow) }
#result-info{ min-height:22px }

.grid.products{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-left:auto;
  margin-right:auto;
}

/* UL alapértelmezett behúzás eltüntetése */
#grid{
  list-style:none;
  margin:0;
  padding:0;
}

/* --- Kártya (egységes, duplikátumok nélkül) --- */
.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 2px 8px rgba(0,0,0,.10), 0 14px 28px rgba(0,0,0,.18);
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.16), 0 26px 48px rgba(0,0,0,.24);
}
.card .imgbox{
  display:flex; align-items:center; justify-content:center;
  height:220px; flex:0 0 220px;
  background:#f4f6fa; border-bottom:1px solid var(--border);
  margin:0 0 8px 0; overflow:hidden;
}
:root.dark .card .imgbox{ background:#0f1627 }
.card .imgbox img{ width:100%; height:100%; object-fit:contain; display:block }
.card .p-12{ padding:12px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto }

/* ÚJ: termék ID a cím FELETT (jól másolható) */
.prod-id{
  font-weight:800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--accent);
  letter-spacing: .2px;
  user-select: text;
}

.card .title{ font-weight:800; color:var(--text); line-height:1.3; margin:6px 0 4px; overflow:visible; text-overflow:clip;}
@media (max-width: 420px){ 
.card .title{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
}
.card .meta{ color:var(--muted); font-size:13px; margin:0 0 8px; line-height:1.3; max-height:2.6em; overflow:hidden; text-overflow:ellipsis }

.row-actions{ display:flex; gap:8px; flex-wrap:wrap }
.btn{ border:1px solid var(--border); background:var(--panel); padding:8px 10px; border-radius:12px; cursor:pointer; color:inherit; transition:transform .05s ease }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent) }
.btn.ghost{ background:transparent }
.btn.sm{ padding:6px 8px; border-radius:8px }
.btn:active{ transform:translateY(1px) }

/* --- Pager + sticky --- */
.pager{ display:flex; justify-content:center; gap:6px; margin:16px 0; flex-wrap:wrap; max-width:100% }
.pager .btn{ min-width:36px; padding:8px 8px }
.pager .ellipsis{ padding:8px 4px; color:var(--muted) }
.pager .jumpto{ display:flex; gap:6px; align-items:center; margin-left:8px }
.pager input[type="number"]{ width:90px; border:1px solid var(--border); border-radius:10px; padding:6px 8px; background:var(--input-bg); color:var(--input-txt) }

#result-info, #pager-top{
  position:static !important;
  background:var(--bg);
  padding-top:6px; padding-bottom:6px;
  max-width:1760px; margin-left:auto; margin-right:auto; padding-left:12px; padding-right:12px;
}

/* --- Modal keret (fluid) --- */
.overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;           /* felülről indul, header alatt paddal */
  justify-content: center;
  background: var(--overlay);
  z-index: 900;
  overflow: hidden;                  /* << csak a modal-body görget */
}

.overlay.open{
  display: flex;
  cursor: default;
  /* A modal teteje a header alá kerüljön (változóval számolunk) */
  padding-top: calc(var(--hdr-h) + var(--modal-gap-top));
}
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  width: clamp(320px, 92vw, 980px);
  box-shadow:var(--shadow);
}
.modal.xl{ width: clamp(360px, 96vw, 1320px) }

/* A body görget – a rendelkezésre álló magasság a header alá férjen be */
.modal .modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; border-bottom:1px solid var(--border);
}
.modal .modal-title{ font-weight:800 }

.modal .modal-body{
  /* felül 0px, oldalt 12, alul 12 – így a sticky tényleg a header alá ér */
  padding: 0 12px 12px 12px;
  max-height: calc(100vh - (var(--hdr-h) + var(--modal-gap-top) + 12px)); /* +12px alsó puffer */
  overflow: auto;
  line-height: 1.65;
  color: var(--text);
}



/* --- Termék modal (két oszlop – fluid) --- */
.prod-detail{ display:grid; gap:16px; align-items:start }
@media (min-width:861px){ .prod-detail{ grid-template-columns:minmax(0,520px) minmax(0,1fr) } }
@media (max-width:860px){ .prod-detail{ grid-template-columns:1fr } }

.detail-imgbox{
  height:380px; background:#f4f6fa;
  border:1px solid var(--border); border-radius:10px;
  overflow:hidden; margin-bottom:12px;
}
:root.dark .detail-imgbox{ background:#0f1627 }
.detail-imgbox img{ width:100%; height:100%; object-fit:contain; display:block }

.detail-desc{
  max-height:60vh; overflow:auto; white-space:normal;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px;
}
.detail-desc::-webkit-scrollbar{ width:10px }
.detail-desc::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.35); border-radius:999px }

/* --- Szűrők (ár) --- */
.filters{ margin-top:8px }
.filters-title{ font-weight:800; margin:8px 0 6px 0 }
.filters-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.filters-row label{ color:var(--muted) }
.filters-row input[type="number"]{
  width:110px; background:var(--input-bg); color:var(--input-txt);
  border:1px solid var(--border); border-radius:10px; padding:6px 8px; outline:none
}
@media (max-width:480px){ .filters-row input[type="number"]{ width:96px } }

/* --- Chips --- */
.chips{ display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle }
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--chip); color:var(--chiptext); border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:12px }
.chip.linklike{ cursor:pointer; }
.chip.linklike:hover{ text-decoration: underline; filter: brightness(.98); }
/* --- Input finomhangolás --- */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type=number]{ -moz-appearance:textfield }

/* --- Görgetősávok --- */
.reco-strip::-webkit-scrollbar{ height:8px }
.reco-strip::-webkit-scrollbar-track{ background:transparent }
.reco-strip::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.35); border-radius:999px }
.modal .modal-body::-webkit-scrollbar{ width:10px }
.modal .modal-body::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.35); border-radius:999px }

/* --- Fókusz jelölések --- */
:where(button,[role="button"],a,input,select,textarea):focus-visible{
  outline:2px solid #60a5fa; outline-offset:2px; border-radius:10px;
}

/* --- Reszponzív apróságok --- */
@media(min-width:1760px){ .ctr{ max-width:1760px } }
@media(max-width:360px){
  .iconbtn{ width:34px; height:34px }
  .pill{ padding:6px 9px }
  .hdr .search{ flex-basis:160px }
}

/* --- Egyebek --- */
#cart-badge[hidden]{ display:none!important }
.aszf-body{ white-space:normal }
.aszf-body p{ margin:0 0 12px 0 }
.aszf-body ul,.aszf-body ol{ margin:0 0 12px 20px }
.aszf-body h1,.aszf-body h2,.aszf-body h3{ margin:16px 0 8px; line-height:1.25 }

/* ==== ÁSZF (aszf-body) – dark mód színjavítás ==== */
:root.dark .aszf-body { color: var(--text); }
:root.dark .aszf-body h1,
:root.dark .aszf-body h2,
:root.dark .aszf-body h3 {
  color: var(--text) !important;
  border-color: var(--border) !important; /* ha van aláhúzás/border */
}

/* linkek kontrasztja */
:root.dark .aszf-body a { color: var(--link); }

/* táblázatok, dobozok keretei az ÁSZF-ben */
:root.dark .aszf-body table,
:root.dark .aszf-body th,
:root.dark .aszf-body td {
  border-color: var(--border) !important;
}

/* ha az ÁSZF-ben bárhol inline fekete (#000 / rgb(0,0,0)) van,
   üsd felül szelektíven */
:root.dark .aszf-body [style*="color:#000"],
:root.dark .aszf-body [style*="color: rgb(0, 0, 0)"] {
  color: var(--text) !important;
}

/* --- Z-index összehangolás --- */
#backdrop{ z-index:900 }
#drawer{ z-index:1000; position:fixed }
.hdr{ z-index:90 }

/* ===== Kosár modal – fejlécek & mennyiség vezérlő (opcionális kiegészítő) ===== */
.cart-grid-head{
  display:grid; grid-template-columns:auto 72px 1fr auto auto auto auto; gap:8px;
  font-size:12px; opacity:.7; padding:0 4px; align-items:end;
}
.cart-grid-head > .h-termek{ font-weight:800; text-align:left }
.cart-grid-head > .h-egyseg{ text-align:center }
.cart-grid-head > .h-menny{ text-align:center }
.cart-grid-head > .h-osszeg{ text-align:right }

.cart-row{
  display:grid; grid-template-columns:auto 72px 1fr auto auto auto auto; gap:8px; align-items:center;
}
.qty{ display:flex; gap:4px; align-items:center }
.qty .btn{ line-height:1; min-width:32px; padding:6px 8px }
.qty .val{ min-width:28px; text-align:center }

/* Header/pager keretek igazítása a konténerhez */
.hdr-in, #result-info, #pager-top{
  max-width:1760px !important; margin-left:auto !important; margin-right:auto !important;
  padding-left:12px !important; padding-right:12px !important; box-sizing:border-box;
}
/* === Globális loader – enyhe sötétítés, középen spinner === */
#loader{
  position:fixed; inset:0;
  background:rgba(0,0,0,.18);
  display:none; z-index:1200;            /* modal (z:1000) fölé */
  pointer-events:auto;                   /* blokkolja a kattintást betöltéskor */
}
:root.dark #loader{ background:rgba(0,0,0,.28); }

#loader::before{
  /* finom fade-in, hogy ne „villanjon” */
  content:""; position:absolute; inset:0;
  animation: loaderfade .12s ease-out forwards;
}
@keyframes loaderfade{ from{ opacity:0 } to{ opacity:1 } }

#loader .spinner{
  position:absolute; top:50%; left:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.55);
  border-top-color: transparent;
  animation: spin .8s linear infinite;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
:root.dark #loader .spinner{
  border-color: rgba(255,255,255,.75);
  border-top-color: transparent;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer mobil-javítás: linkek törhessenek új sorba */
footer .row {
  flex-wrap: wrap;
}

/* (opcionális) kicsi képernyőn adjunk még egy leheletnyi térközt */
@media (max-width: 480px) {
  footer { padding-bottom: 14px; }
}


:root :where(a){
color: var(--link) !important;
text-decoration: none !important;
}
:root :where(a:hover){
text-decoration: underline !important;
}

/* Modal fejléc- és törzs-sorok tördelhessenek kisebb szélességnél is */
.modal .modal-head,
.modal .modal-body .row {
  flex-wrap: wrap;
}

/* Gombok ne törjék széthúzással a sort, de maradjanak egyben */
.modal .modal-head .btn,
.modal .modal-body .btn {
  white-space: nowrap;
}

/* Segéd: bármi, ami sticky-top osztályt kap a modal bodyban, felül marad */
.modal .modal-body .sticky-top{
  position: sticky;
  top: 0;
  z-index: 5;
  background: inherit;   /* dark/light kompatibilis */
}

/* === cart additions (safe to append) === */
.modal .modal-body .cart-total {
  font-size: 18px;
}
.modal .modal-body .cart-total > div:first-child {
  font-weight: 800;
}
.modal .modal-body .brutto-note {
  opacity: .85;
  font-size: 12px;
}

/* ===== MODAL MAGASSÁGOK – desktop + mobil külön ===== */

/* Közös layout: minden modal flex oszlop, body scrollozik */
.modal{
  display: flex;
  flex-direction: column;
}
.modal .modal-body{
  flex: 1 1 auto;
  overflow: auto;
}

/* DESKTOP/TABLET (>= 769px) – marad az eddigi logika */
@media (min-width: 769px) {
  .modal{
    max-height: calc(
      100vh - (var(--hdr-h) + var(--modal-gap-top))
    );
  }

  .modal .modal-body{
    max-height: calc(
      100vh - (var(--hdr-h) + var(--modal-gap-top) + 16px + 76px)
    );
  }
}

/* MOBIL (<= 768px) – extra puffer az alsó Android sáv fölé
   + inline max-height felülírása !important-tel */
@media (max-width: 768px) {

  /* Az overlay kapjon alsó paddinget, hogy fizikailag feljebb tolja a modalt */
  .overlay.open{
    padding-bottom: 76px;
  }

  /* A modal magassága biztosan hagyjon kb. 56px rést alul */
  .modal{
    max-height: calc(
      100vh - (var(--hdr-h) + var(--modal-gap-top) + 76px)
    ) !important;
  }

  /* A belső törzs is vegye figyelembe a plusz 56px-et */
  .modal .modal-body{
    max-height: calc(
      100vh
      - (var(--hdr-h) + var(--modal-gap-top) + 16px + 76px + 76px)
    ) !important;
  }
}



/* ==== Sticky hátterek finomítása (globális) ==== */
.hdr{
  /* Ne legyen átlátszó sáv a tetején */
  background: var(--panel) !important;
}

.modal .modal-body .sticky-top{
  /* A modalon belüli ragadós sorok is kapjanak saját hátteret */
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
  z-index: 6; /* picit a tartalom fölé */
}

/* Kosár és checkout sticky fejlécek – konzisztens háttér */
.cart-sticky,
.checkout-sticky{
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.modal .modal-body > .cart-sticky:first-child,
.modal .modal-body > .checkout-sticky:first-child{
  margin-top: -12px; /* ugyanannyi, mint a .modal .modal-body padding-top-ja */
}
/* ==== Checkout összegző – jelölők és üzenet ==== */
/* A két checkbox egymás alatt, jobb oldalra igazítva */
#sum-accept-wrap{
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
}
#sum-accept-wrap label{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;  /* szöveg jobbra */
  gap: 8px;
  width: 100%;
}
/* Figyelmeztetés helye mindig foglalt (ne ugráljon a gomb) */
#sum-accept-msg{
  min-height: 18px;           /* vagy height:18px; ha fix kell */
  margin-top: 6px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}

.cart-toast{
  position: fixed;        /* fontos, ha eddig relative volt */
  z-index: 10000 !important;
}