/* =====================================================================
   ship-theme.css — VÉKONY arculati override-réteg a shop-demo (Kartify)
   sablon fölött (CMS 2A-1B). A shop-demo eredeti style.css NEM módosul; ezt
   a fájlt a style.css UTÁN kell betölteni, a `<style id="arculat-tokenek">`
   injektált :root blokk PEDIG ez után (az adja a tényleges szín-tokeneket
   beállításból — config/arculat.php).

   A teljes narancs->hajós átszínezést az injektált token-bridge végzi
   (--primary-color stb. átkötése). Itt csak néhány, tokenekre épülő apró
   szerkezeti finomítás van — NEM új layout, NEM a Kartify CSS átírása.
   ===================================================================== */

/* Fejléc szöveges logó (amíg nincs feltöltött hajós logó kép). */
.header-logo .ship-logo-szoveg {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: rgb(var(--primary-color));      /* navy a token-bridge szerint */
  text-decoration: none;
  white-space: nowrap;
}
.header-logo .ship-logo-szoveg .ship-logo-akcent {
  color: rgb(var(--primary-color2));     /* piros akcentus a kézikönyv szerint */
}

/* Feltöltött logó kép méretkorlátja a fejlécben (a kézikönyv 140–240 px iránya). */
.header-logo img {
  max-height: 46px;
  width: auto;
}

/* Tartalmi/dokumentum oldal olvashatóság (CMS 2A-1D). A shop-demo style.css
   tipográfiájára épül; csak kényelmi finomítás, nem új komponens. */
.ship-tartalom { max-width: 920px; line-height: 1.7; }
.ship-tartalom h2 { margin-top: 1.6rem; }
.ship-tartalom h3 { margin-top: 1.2rem; }
.ship-tartalom table { width: 100%; margin-bottom: 1rem; }

/* CMS 2A-4 — a tartalmi/leírás HTML beágyazott képei NE folyjanak ki és NE törjék
   szét a layoutot mobilon (a beillesztett képeknek lehet fix width/height attribútuma). */
.ship-tartalom img,
.product-description img { max-width: 100%; height: auto; }

/* Termékoldali hosszú leírás: a tab teljes szélességet kapjon (a 920px korlát a
   keskeny dokumentumoldalra való, terméknél a fülön belül szélesebb hely van). */
.product-description.ship-tartalom { max-width: none; }

/* Tartalmi/dokumentum oldal (CMS 2A-1D hotfix): a breadcrumb-cím a shop-demo
   .breadcrumb-contain h2 arányaihoz igazítva (NEM óriási H1), és a tartalom
   szürke háttéren FEHÉR, árnyékos kártyában, normális belső paddinggel. */
.breadcrumb-section .breadcrumb-contain h1 {
  font-weight: 500;
  font-size: calc(18px + 6 * (100vw - 320px) / 1600);
  margin-bottom: 0;
}
.ship-tartalom-doboz {
  border: 1px solid var(--ship-border, #D8E2EA);
  border-radius: var(--radius-card, 16px);
  box-shadow: 0 10px 30px rgba(3, 42, 85, 0.06);
  padding: clamp(20px, 4vw, 40px);
}

/* CMS 2A-1D hotfix-2 — OK: a Kartify globálisan `li{display:inline-block}` + `ul{padding-inline:0}`
   (menü-stílushoz). Ettől a TARTALMI listák egy sorba folynak. A content-területen
   visszaállítjuk a normál lista-megjelenítést (scoped; a fejléc/menü NEM érintett). */
.ship-tartalom ul,
.ship-tartalom ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.ship-tartalom ul { list-style: disc; }
.ship-tartalom ol { list-style: decimal; }
.ship-tartalom li { display: list-item; margin-bottom: 0.4rem; }
.ship-tartalom p  { margin-bottom: 1rem; }

/* Breadcrumb visszafogottabbra (a shop-demo 16px helyett kisebb, mellékesebb).
   A TITLE/H1 méretét NEM érinti. */
.breadcrumb-section .breadcrumb-contain nav .breadcrumb .breadcrumb-item { font-size: 13px; }
.breadcrumb-section .breadcrumb-contain nav .breadcrumb .breadcrumb-item i { font-size: 14px; }

/* ===========================================================================
   CMS 2A-3 hotfix-3 (vizual2) — KATEGÓRIAFA NAVIGÁCIÓ (categoryCanvas + bal sáv
   + offcanvas). EGYSÉGES SOR-RÁCS: minden sor = .ship-kat-sor (flex), benne bal
   névcella (.ship-kat-nav, flex:1) + FIX 42px jobb végcella (.ship-kat-veg:
   chevron szülőnél / jobbra-nyíl levélnél). Így minden név ugyanott kezdődik és
   minden nyíl PONTOSAN ugyanabban a jobb oldali pozícióban van. Finom hover
   (#F5F7FA), visszafogott aktív (bal border + félkövér + nagyon halvány háttér).
   Témafüggetlen; a shop-demo style.css-t NEM írja át.
   =========================================================================== */

/* Lista-reset a shop-demo globális li{inline-block} + ul{padding-inline:0} ellen. */
.ship-kat-menu, .ship-kat-menu ul { list-style: none; margin: 0; padding: 0; }
.ship-kat-menu li { display: block; width: 100%; }

/* Egységes sor: flex konténer, bal border-accent sávval. */
.ship-kat-menu .ship-kat-sor {
  display: flex;
  align-items: stretch;
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ship-kat-menu .ship-kat-sor:hover { background-color: #F5F7FA; }
body.dark .ship-kat-menu .ship-kat-sor:hover { background-color: rgba(255, 255, 255, 0.04); }

/* Bal névcella (a navigáló link) — minden sorban azonos bal/függőleges padding. */
.ship-kat-menu .ship-kat-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 11px 6px 11px 16px;
  color: rgba(var(--title-color), 1);
  text-decoration: none;
  line-height: 1.3;
}
.ship-kat-menu .ship-kat-nev {
  font-weight: 500;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* hosszú magyar név max 2 sor, nem szedi szét */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* FIX jobb végcella — chevron (szülő) és jobbra-nyíl (levél) AZONOS pozícióban. */
.ship-kat-menu .ship-kat-veg {
  flex: 0 0 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--content-color), 1);
  text-decoration: none;
}
.ship-kat-menu .ship-kat-veg i { font-size: 18px; transition: transform 0.25s ease; }
.ship-kat-menu a.ship-kat-veg.ship-kat-exp:hover { color: rgba(var(--primary-color), 1); }
/* Chevron: nyitva lefelé, csukva (collapsed) jobbra. */
.ship-kat-menu .ship-kat-exp.collapsed i { transform: rotate(-90deg); }

/* Aktuális kategória — VISSZAFOGOTT: bal border + félkövér + nagyon halvány háttér. */
.ship-kat-menu .ship-kat-li.ship-kat-aktiv > .ship-kat-sor {
  border-left-color: rgba(var(--primary-color), 1);
  background-color: rgba(var(--primary-color), 0.04);
}
.ship-kat-menu .ship-kat-li.ship-kat-aktiv > .ship-kat-sor .ship-kat-nev {
  font-weight: 600;
  color: rgba(var(--primary-color), 1);
}

/* Alkategória-szint: a collapse beljebb húzódik (a fő sorok rácsa változatlan).
   A jobb végcella (nyíl/chevron) MINDEN szinten a sor jobb szélén marad. */
.ship-kat-menu .ship-kat-sub { background-color: rgba(var(--base-gray), 0.45); }
.ship-kat-menu .ship-kat-sub .ship-kat-nav { padding-left: 30px; }
.ship-kat-menu .ship-kat-sub .ship-kat-sub .ship-kat-nav { padding-left: 44px; }
.ship-kat-menu .ship-kat-sub .ship-kat-nev { font-size: 14px; }

/* Görgethető panel + vékony, visszafogott scrollbar (shop-demo ritmus). */
.ship-kat-scroll { overflow-y: auto; scrollbar-width: thin; }
.ship-kat-scroll::-webkit-scrollbar { width: 4px; background-color: #f2f3f7; }
.ship-kat-scroll::-webkit-scrollbar-track { border-radius: 100px; background-color: #f2f3f7; }
.ship-kat-scroll::-webkit-scrollbar-thumb { border-radius: 100px; background-color: rgba(var(--theme-blue-dark), 0.4); }
.category-full-box .ship-kat-scroll { max-height: 560px; }
.category-fixed-box .ship-kat-scroll { max-height: calc(100vh - 90px); }
.shop-left-sidebar .ship-kat-scroll { max-height: 80vh; }

/* Belső-oldali offcanvas szélessége + bal sáv belső padding. */
.category-fixed-box.offcanvas { width: 320px; max-width: 88vw; }
.shop-left-sidebar .left-box { padding: 14px; }

/* (C) — kategórialeírás töltse ki a fehér doboz szélességét (nem a 920px olvasószél.). */
.ship-kat-leiras .ship-tartalom { max-width: none; }

/* ===========================================================================
   (B) Alkategória-kártyák — VALÓDI webshop kategóriakártya a shop-demo
   category-box-4 elemből: FEHÉR háttér, radius, enyhe árnyék, nagy egységes
   képterület (object-fit:contain), olvasható, max 2-soros név, finom hover.
   =========================================================================== */
.ship-alkat-racs .category-box-4 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--content-color), 0.12);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(3, 42, 85, 0.06);
  padding: 18px 16px 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ship-alkat-racs .category-box-4:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(3, 42, 85, 0.12);
}
.ship-alkat-racs .category-box-4 img {
  width: 100%;
  height: 190px;                 /* nagy, EGYSÉGES képterület minden kártyán */
  object-fit: contain;
  mix-blend-mode: normal;        /* a category-box-4 darken-blendje helyett tiszta */
}
body.dark .ship-alkat-racs .category-box-4 img { mix-blend-mode: normal; }
.ship-alkat-racs .category-box-4 .category-content {
  margin-top: auto;             /* a név a kártya aljára igazodik -> egységes */
  padding-top: 14px;
}
.ship-alkat-racs .category-box-4 .category-content h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(var(--title-color), 1);
  -webkit-line-clamp: 2;        /* hosszú kategórianév max 2 sor, nem lóg ki */
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
}

/* ===========================================================================
   CMS 2A-5 — Kategóriaoldali terméklista (shop-grid-3 `product-box-4`) + bal
   sáv AJAX kategória-gyorskereső. A shop-demo `.product-box-4` adja a kártya
   bázisát; itt csak a hosszú terméknév 2-soros, EGYSÉGES magasságú kezelése
   (hogy az árak egy vonalban legyenek), és a keresőtalálat-lista stílusa.
   =========================================================================== */

/* A terméknév 2 sorra (a shop-demo alapból 1 sorra vágja); a fix magasság a
   kártyák ár-sorát egy vonalban tartja → nem „csúszik" a CTA/ár. */
.shop-section .product-box-4 .product-content .name h5,
.shop-section .product-box-4 .product-content .name .h5 {
  -webkit-line-clamp: 2;
  min-height: 2.6em;            /* ~2 sor: az 1-soros nevek is 2 sornyi helyet kapnak */
  white-space: normal;
}
.shop-section .product-box-4 .product-content .sub-name {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
/* A termékkártya ára kiemelt (a shop-demo árszíne), a kártya alján egységesen. */
.shop-section .product-box-4 .product-content .price {
  font-weight: 600;
  color: rgba(var(--title-color), 1);
}

/* Bal sáv: AJAX kategória-kereső találati listája (a fa helyén jelenik meg). */
.ship-kat-talalat {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ship-kat-talalat::-webkit-scrollbar { width: 4px; background-color: #f2f3f7; }
.ship-kat-talalat::-webkit-scrollbar-thumb { border-radius: 100px; background-color: rgba(var(--theme-blue-dark), 0.4); }
.ship-kat-talalat-elem { display: block; }
.ship-kat-talalat-elem a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(var(--title-color), 1);
  transition: background-color 0.15s ease;
}
.ship-kat-talalat-elem a:hover { background-color: #F5F7FA; }
.ship-kat-talalat-nev { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ship-kat-talalat-szulo { font-size: 12px; color: rgba(var(--content-color), 0.75); }
.ship-kat-talalat-ures {
  padding: 10px;
  font-size: 14px;
  color: rgba(var(--content-color), 0.8);
}

/* ----------------------------------------------------------------------------
 * CMS 2A-6 — kategóriaoldali toolbar (shop-grid-3 top-filter-menu adaptáció).
 * A "Sort By" dropdown ÉS a grid/list nézetváltó ikonok (kattintható <a> linkek)
 * a shop `style.css` natív osztályaiból stílusozódnak (`.grid-option li a`,
 * `li.active`, `li.active svg`), és a listanézet a `.product-list-section.list-style`
 * shop-szabályból jön. Saját CSS NEM szükséges → nincs egyedi toolbar-szabály.
 * -------------------------------------------------------------------------- */

/* ===========================================================================
   CMS 2A-8 — TERMÉKOLDAL (product-rectangle parity): a galéria és a variáns-
   opcióválasztó a shop-demo eredeti osztályait használja (product-left-box /
   product-original-slider / select-package rectangle-package). Itt CSAK a valós
   adat-adaptáció apró elemei vannak: készletstátusz-badge + jelmagyarázat + a jobb
   kártya kiegészítő sorai. Token-alapú színek (világos/sötét témakompatibilis).
   =========================================================================== */

/* --- Készlet-státusz badge (darabszám NÉLKÜL) --- */
.ship-keszlet-aktualis {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 14px;
}
.ship-keszlet-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
}
.ship-keszlet-badge i { font-size: 15px; line-height: 1; }
/* Színek: tokenektől függetlenül a státusz egyértelmű jelentésű (zöld/sárga/piros),
   de visszafogott háttérrel, dark mode-ban is olvashatóan. */
.ship-keszlet-green  { color: #1a7f47; background-color: rgba(26, 127, 71, 0.12);  border-color: rgba(26, 127, 71, 0.25); }
.ship-keszlet-yellow { color: #9a6a00; background-color: rgba(214, 158, 0, 0.14);  border-color: rgba(214, 158, 0, 0.30); }
.ship-keszlet-red    { color: #b3402f; background-color: rgba(179, 64, 47, 0.12);  border-color: rgba(179, 64, 47, 0.28); }
.ship-keszlet-unknown,
.ship-keszlet-error,
.ship-keszlet-missing {
  color: rgba(var(--content-color), 0.85);
  background-color: rgba(var(--content-color), 0.08);
  border-color: rgba(var(--content-color), 0.18);
}
body.dark .ship-keszlet-green  { color: #6fd79b; }
body.dark .ship-keszlet-yellow { color: #ecc14d; }
body.dark .ship-keszlet-red    { color: #f0917f; }

/* --- Készlet jelmagyarázat gomb (a badge mellett) --- */
.ship-keszlet-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 13px;
  color: rgba(var(--primary-color), 1);
  border: 1px solid rgba(var(--primary-color), 0.35);
  border-radius: 8px;
  background: transparent;
}
.ship-keszlet-info-btn i { font-size: 16px; }

/* --- Készlet jelmagyarázat (collapse) --- */
.ship-keszlet-legenda {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--content-color), 0.14);
  border-radius: 10px;
  background-color: rgba(var(--content-color), 0.03);
}
.ship-keszlet-legenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ship-keszlet-legenda-lista li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 13px;
  color: rgba(var(--title-color), 1);
  /* Átlátszó keret + padding az alapsorokon → az aktuális sor kiemelése (keret/háttér)
     nem ugráltatja az elrendezést. */
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.ship-legenda-szoveg { flex: 1 1 auto; }
/* 198: AKTUÁLIS sor — a fenti badge-dzsel azonos állapot. A kiemelés NEM csak színnel
   működik (több zöld sor is lehet): keret + enyhe háttér + félkövér szöveg + „Aktuális"
   jelölő badge. A primary token világos/sötét módban is olvasható marad. */
.ship-keszlet-legenda-lista li.is-active {
  border-color: rgba(var(--primary-color), 0.45);
  background-color: rgba(var(--primary-color), 0.08);
}
.ship-keszlet-legenda-lista li.is-active .ship-legenda-szoveg { font-weight: 600; }
.ship-legenda-aktualis-jelolo {
  display: none; /* csak az aktuális soron látszik */
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: rgba(var(--primary-color), 1);
  background-color: rgba(var(--primary-color), 0.12);
  padding: 3px 8px;
  border-radius: 999px;
}
.ship-keszlet-legenda-lista li.is-active .ship-legenda-aktualis-jelolo { display: inline-flex; }
.ship-legenda-aktualis-jelolo i { font-size: 13px; }
.ship-keszlet-legenda-megj {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(var(--content-color), 0.7);
}
/* 197: várható szállítási idő melletti kötelező magyarázó (védő) szöveg. Kis méretű,
   visszafogott, a témái tokenekből (világos/sötét módban is olvasható). */
.ship-szallitasi-vedoszoveg {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(var(--content-color), 0.7);
}

/* 201: KOSÁR — a várható szállítási idő KÜLÖN, teljes szélességű alsó sorban a
   termék alatt (nem a névcellában). A fő tételsor (kép/név/ár/menny./törlés/sorösszeg)
   tiszta marad; a fő sor alól elvesszük az elválasztót, hogy a két <tr> EGY tételként
   olvasódjon, és az elválasztó a szállítási sor aljára kerül → táblázatszerű, rendezett. */
.cart-section .cart-table2 .cart-table-box tbody tr.ship-kosar-oldal-sor td {
  border-bottom: none;
  padding-bottom: 6px;
}
/* Nem rendelhető tételnél NINCS szállítási alsó sor → a fő sor viszi az elválasztót. */
.cart-section .cart-table2 .cart-table-box tbody tr.ship-kosar-oldal-nem-rendelheto td {
  border-bottom: 1px solid rgba(var(--content-color), 0.1);
  padding-bottom: calc(10px + 10 * (100vw - 320px) / 1600);
}
.cart-section .cart-table2 .cart-table-box tbody tr.ship-kosar-oldal-szallitas-sor td {
  border-top: none;
  border-bottom: 1px solid rgba(var(--content-color), 0.1);
  padding-top: 0;
  padding-bottom: calc(10px + 10 * (100vw - 320px) / 1600);
  /* A colspan-cella az egyetlen (első) td → a fő td:first-child min/max szélesség
     korlátját itt fel kell oldani, hogy a sáv teljes szélességet kapjon. */
  min-width: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* A szállítási sor diszkrét háttérsávja + vékony bal jelölés. Visszafogott, nem
   buborékos; kis ikon + rövid szöveg, több forrásnál tagolt (· elválasztó). */
.ship-kosar-szallitas {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 7px 12px;
  border-left: 3px solid rgba(var(--primary-color), 0.35);
  border-radius: 4px;
  background-color: rgba(var(--content-color), 0.04);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--title-color), 1);
  /* Mobil: a colspan-cella a (vízszintesen görgethető) táblázat teljes szélességét
     kapja, ami szélesebb a kijelzőnél. A sávot a görgetőport bal széléhez rögzítjük
     és a viewporthoz méretezzük → olvashatóan a termék alatt marad, vízszintes
     görgetés nélkül tördel. Desktopon (nincs túlcsordulás) ez no-op. */
  position: sticky;
  left: 0;
  max-width: calc(100vw - 32px);
}
.ship-kosar-szallitas-ikon {
  font-size: 16px;
  line-height: 1.2;
  color: rgba(var(--primary-color), 1);
  position: relative;
  top: 2px;
}
.ship-kosar-szallitas-cimke { font-weight: 600; }
.ship-kosar-szallitas-szoveg { font-weight: 500; }
/* Inline tagolt részidők: „5 db: 2-4 munkanap · 5 db: 4-6 munkanap". */
.ship-kosar-szallitas-reszek {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.ship-kosar-szallitas-resz {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.ship-kosar-szallitas-elv { color: rgba(var(--content-color), 0.45); }
/* Kis színes státuszpont (zöld/sárga/piros/semleges) — a meglévő .ship-keszlet-*
   palettát örökli (color), a pont a currentColorból tölt ki. Dark-safe. */
.ship-kosar-szallitas-pont {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
  align-self: center;
  margin-right: 6px;
}

/* 200: KOSÁR — összesített (leglassabb) szállítási idő az árösszegző alatt. */
.ship-kosar-szallitas-osszesito {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--content-color), 0.14);
  border-radius: 10px;
  background-color: rgba(var(--content-color), 0.03);
}
.ship-kosar-szallitas-osszesito-fo {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--title-color), 1);
}
.ship-kosar-szallitas-osszesito-fo i {
  font-size: 17px;
  line-height: 1.4;
  color: rgba(var(--primary-color), 1);
  flex: 0 0 auto;
}
.ship-kosar-szallitas-osszesito-datum {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--title-color), 1);
}
.ship-kosar-szallitas-osszesito .ship-szallitasi-vedoszoveg {
  margin-top: 8px;
}

/* --- „Termék adatai" címke/érték lista (dl/dt/dd). A demo `about-item-list`
   2-oszlopos gridje rövid spec-értékekhez való; a hosszú magyar változatnevek ott
   szétestek. Itt minden adat SAJÁT sorban: bal oldalt fix szélességű, nem-törő
   címke (a kettőspont a címkével marad), jobb oldalt az érték, amely a saját
   cellájában tördel. Mobilon is sorokban marad (nem folyik össze). --- */
.ship-termek-adatok {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
}
.ship-termek-adatok .ship-adat-sor {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--content-color), 0.1);
}
.ship-termek-adatok .ship-adat-sor:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.ship-termek-adatok dt {
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--content-color), 0.8);
  white-space: nowrap;
}
.ship-termek-adatok dt::after { content: ":"; }
.ship-termek-adatok dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--title-color), 1);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ship-termek-adatok dd a {
  color: rgba(var(--primary-color), 1);
  text-decoration: none;
}
.ship-termek-adatok dd a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .ship-termek-adatok .ship-adat-sor { grid-template-columns: 90px 1fr; }
}

/* --- CMS 2A-8 hotfix: jobb oldali rendelési kártya (side-product-detail) saját
   kiegészítő elemei. A kártya alapját a shop-demo style.css adja; itt csak a
   valós adathoz tett apró elemek (cikkszám sor + készlet-badge a fake stock
   helyett). --- */
.side-product-detail .ship-osszegzo-cikk {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(var(--content-color), 0.8);
}
.side-product-detail .ship-osszegzo-statusz {
  margin: 14px 0 4px;
}

/* --- CMS 2A-8 hotfix-3: variánsválasztó kártyás/listás (NEM size-pill). A hosszú
   magyar variánsnevek (pl. „Fehér 120–200 cm") nem férnek el pill-ben, ezért teljes
   szélességű, kattintható sorok: bal névcella (variánsnév + cikkszám) + jobb cella
   (készlet-ikon + ár). A kiválasztott állapotot a .is-selected adja (JS állítja). --- */
.ship-valtozat-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.ship-valtozat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--content-color), 0.16);
  border-radius: 10px;
  background-color: rgba(var(--white), 1);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ship-valtozat:hover { border-color: rgba(var(--primary-color), 0.5); }
.ship-valtozat.is-selected {
  border-color: rgba(var(--primary-color), 1);
  box-shadow: 0 0 0 1px rgba(var(--primary-color), 0.5);
  background-color: rgba(var(--primary-color), 0.05);
}
/* A rádió vizuálisan rejtett, de fókuszálható marad (a label a kattintási felület). */
.ship-valtozat-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ship-valtozat-input:focus-visible + .ship-valtozat-fo {
  outline: 2px solid rgba(var(--primary-color), 0.6);
  outline-offset: 2px;
}
.ship-valtozat-fo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ship-valtozat-nev {
  font-size: 15px;
  font-weight: 600;
  color: rgba(var(--title-color), 1);
  line-height: 1.3;
}
.ship-valtozat-cikk {
  font-size: 12px;
  color: rgba(var(--content-color), 0.75);
}
.ship-valtozat-jobb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.ship-valtozat-jobb .ship-keszlet-badge { padding: 3px 7px; }
.ship-valtozat-ar {
  font-size: 16px;
  font-weight: 700;
  color: rgba(var(--title-color), 1);
  white-space: nowrap;
}
@media (max-width: 575px) {
  .ship-valtozat { padding: 10px 12px; }
  .ship-valtozat-jobb { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* --- Finom variáns-kiválasztási / árváltozási visszajelzés (FAQ-variánsváltás feladat).
   Az ár(ak) nagyon finoman pulzálnak (transform: scale — NEM okoz layout-shiftet), a
   kiválasztott doboz rövid, kulturált box-shadow-villanást kap. 560–620 ms. A class-t a
   JS teszi rá a #shipAr / #shipOsszegzoAr elemekre és a .is-selected dobozra. A transform
   left-center origójú, hogy az ár ne „ugorjon". prefers-reduced-motion esetén kikapcsol. */
@keyframes shipArPulzal {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.ship-ar-pulzal {
  animation: shipArPulzal 560ms ease-in-out;
  transform-origin: left center;
}
@keyframes shipValtozatVillan {
  0%   { box-shadow: 0 0 0 1px rgba(var(--primary-color), 0.5); }
  40%  { box-shadow: 0 0 0 4px rgba(var(--primary-color), 0.28); }
  100% { box-shadow: 0 0 0 1px rgba(var(--primary-color), 0.5); }
}
.ship-valtozat.is-selected.ship-valtozat-villan {
  animation: shipValtozatVillan 620ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .ship-ar-pulzal,
  .ship-valtozat.is-selected.ship-valtozat-villan {
    animation: none;
  }
}

/* --- CMS 2A-8 hotfix-4/5: jobb kártya árblokk vizuális hierarchia (a referencia
   `Total Price: $45.00` súlyához igazítva). FONTOS: a shop-demo
   `.product-section .right-sidebar-box .side-product-detail .total-price-box h4 span`
   szabály (0,4,2) ERŐSEBB volt, mint a korábbi class-override (0,3,1), ezért az ár
   span halvány maradt. Megoldás: az ár NEM span, hanem `<strong>` (a `h4 span` rá nem
   illeszkedik), + az override az ID-t használja (1,1,1), így biztosan győz. A címke
   marad span (a demo szabálytól visszafogott), az ÁR a blokk fő eleme. --- */
.side-product-detail .total-price-box h4 .ship-ar-cimke {
  color: rgba(var(--content-color), 1);
  font-size: calc(15px + 1 * (100vw - 990px) / 930);
  font-weight: 500;
}
.side-product-detail .total-price-box h4 #shipOsszegzoAr.ship-ar-ertek {
  color: rgba(var(--title-color), 1);          /* sötét, hangsúlyos */
  font-size: calc(22px + 6 * (100vw - 990px) / 930);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  margin-left: auto;
}

/* --- Hotfix árblokk: a bruttó (fő ár) ALATTI másodlagos részletek (nettó + egységár).
   Visszafogott, kisebb, NEM piros, NEM harsány — nem nyomja el a bruttó árat. Külön ÁFA
   sor NINCS. Ugyanaz a markup a középső blokkban (mobilon is látszik) és a jobb kártyában. --- */
.ship-ar-reszletek {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ship-ar-reszletek > div {
  font-size: 13px;
  font-weight: 400;
  color: rgba(var(--content-color), 0.75);
  line-height: 1.4;
}
.ship-ar-reszletek strong {
  font-weight: 600;
  color: rgba(var(--content-color), 1);
}
/* A jobb kártya total-price-box-ában a bruttó jobbra zárt — a részletek is jobbra. */
.side-product-detail .total-price-box .ship-ar-reszletek {
  text-align: right;
}

/* =====================================================================
   CMS 2A-9 — KOSÁR (offcanvas tételek extra jelzései + toast).
   A shop-demo offcanvas markupját használjuk; itt csak a VALÓS kosárhoz
   szükséges, a sablonban nem létező visszafogott jelzések stílusa van.
   ===================================================================== */

/* Cikkszám az offcanvas tétel alatt (visszafogott, másodlagos szöveg). */
.cart-offcanvas .ship-kosar-cikk {
  margin: 2px 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(var(--content-color), 0.85);
}

/* Variánsnév — EGYSZERŰ, balra zárt META SOR (NEM badge/chip, nincs háttér/keret/
   kapszula, nincs center). Az offcanvasban és a kosároldalon azonos, visszafogott stílus;
   apró, sorba illeszkedő tag-ikon + „Változat: …". Mobilon is olvasható, nem tör sort. */
.cart-offcanvas .ship-kosar-valtozat,
.cart-section .cart-box .cart-contain span.ship-kosar-oldal-valtozat {
  display: block;
  margin: 2px 0 4px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(var(--content-color), 0.85);
  word-break: break-word;
}
/* Apró, sorba illeszkedő ikon (nem badge) — enyhén hangsúlyos a márkaszínnel. */
.cart-offcanvas .ship-kosar-valtozat i,
.cart-section .cart-box .cart-contain span.ship-kosar-oldal-valtozat i {
  margin-right: 5px;
  font-size: 13px;
  vertical-align: -1px;
  color: rgb(var(--primary-color));
}

/* „Az ár időközben módosult." — visszafogott figyelmeztetés. */
.cart-offcanvas .ship-kosar-arvaltozas {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #9a6700;            /* visszafogott borostyán, dark módban is olvasható */
}

/* „Jelenleg nem rendelhető." — figyelmeztetés + halványított tétel. */
.cart-offcanvas .ship-kosar-figyelmeztetes {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: #b42318;
}
.cart-offcanvas .ship-kosar-nem-rendelheto .product-image,
.cart-offcanvas .ship-kosar-nem-rendelheto .price {
  opacity: 0.55;
}

/* Kosár megtekintése placeholder (még nincs kosároldal) — disabled-szerű. */
.cart-offcanvas .ship-kosar-megtekintes[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Kosár-művelet visszajelző toast (kulturált, eltűnő értesítés). */
.ship-kosar-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  z-index: 1085;                      /* az offcanvas (1045) fölött */
  max-width: 92vw;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(var(--title-color), 1);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ship-kosar-toast.mutat {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ship-kosar-toast-hiba {
  background: #b42318;
}

/* =====================================================================
   CMS 2A-9 hotfix — kosár offcanvas MÍNUSZ + TÖRLÉS gomb láthatóság.
   A shop-demo a kosártétel mínusz gombját (.qty-btn-minus, style.css:~14084)
   és a tétel-törlő X-et (.close-button a cart-offcanvasben, style.css:~5170)
   ALAPBÓL elrejti — eredetileg a qty.js tette láthatóvá qty>1 esetén. A valós
   kosarat a saját ship-kosar.js kezeli (qty.js eltávolítva), ezért ezeket a
   gombokat itt tesszük láthatóvá. Az #cartOffcanvas id biztosítja, hogy a
   felülírás erősebb legyen a hosszú, csak-class alapú eredeti szabályoknál, és
   KIZÁRÓLAG a kosár offcanvasre hasson (a #wishlistOffcanvas érintetlen).
   ===================================================================== */
#cartOffcanvas .vertical-product-box .product-content .quantity-box .qty-btn-minus {
  display: block;
}
#cartOffcanvas .vertical-product-box .close-button {
  display: block;
}

/* =====================================================================
   CMS 2A-9 mobil hotfix — alsó nav kosár badge kis kör (notification).
   A shop-demo `.mobile-menu ul li a span { display:inline-block; margin-top:5px }`
   szabály a badge spanre is ráült → a szám a „Cart" feliratba folyt. Itt a
   badge-et abszolút pozíciójú, kör alakú mini badge-ként visszük az ikon
   jobb-felső sarkára, a desktop fejléc-badge (`--primary-color2`) színével.
   A magasabb specificitás felülírja a template span-szabályt, a `[hidden]`
   pedig a [hidden] attribútum melletti rejtést biztosítja (0 tételnél).
   ===================================================================== */
.mobile-menu ul li a.ship-kosar-mobil-link {
  position: relative;
}
.mobile-menu .ship-kosar-badge-mobil {
  position: absolute;
  top: -4px;
  left: 50%;
  margin-left: 4px;            /* a középre igazított ikon jobb-felső sarka */
  margin-top: 0;               /* a template span margin-top:5px felülírása */
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 100px;
  background-color: rgba(var(--primary-color2), 1);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  display: inline-block;       /* erősebb a template span-szabálynál */
}
.mobile-menu .ship-kosar-badge-mobil[hidden] {
  display: none;               /* (0,3,0) — üti a template span display:inline-block-ot */
}

/* 139 mobil badge-hotfix — KEDVENCEK számláló badge az alsó navigációban.
   Ugyanaz a stabil minta, mint a kosár badge-nél: a `.notifi-wishlist` link
   relatív konténer, a badge abszolút pozícióval ül a szív ikon jobb-felső
   sarkán (NEM folyik a „Kedvencek" feliratba). Korábban a badge csak
   `margin-left`-tel, inline elhelyezéssel volt → lecsúszott a felirat mellé. */
.mobile-menu ul li a.notifi-wishlist {
  position: relative;
}
.mobile-menu .ship-wishlist-szam--mobil {
  position: absolute;
  top: -4px;
  left: 50%;
  margin-left: 4px;            /* a középre igazított ikon jobb-felső sarka */
  margin-top: 0;               /* a template span margin-top:5px felülírása */
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 100px;
  color: #fff;                 /* a piros körben FEHÉR, kontrasztos szám — a (0,2,0)
                                  szelektor üti a template `.mobile-menu ul li a span` színt */
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  display: inline-block;       /* erősebb a template span-szabálynál */
}
.mobile-menu .ship-wishlist-szam--mobil[hidden] {
  display: none;               /* (0,3,0) — üti a template span display:inline-block-ot */
}

/* =====================================================================
   CMS 2A-9 — kategória termékkártya: altermék/kivitel-számláló badge.
   Visszafogott, webshopos pill (NEM CTA-piros): világos háttér, navy
   (title) szöveg, finom keret. Grid és list nézetben is működik, nem
   tolja szét a kártyát (width: fit-content). A badge a termékoldalra
   mutató link (nincs külön variánslista — csak darabszám-jelzés).
   ===================================================================== */
.ship-variant-count-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 3px 0 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--content-color), 0.18);
  background-color: rgba(var(--content-color), 0.06);
  color: rgba(var(--title-color), 1);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.ship-variant-count-badge:hover,
.ship-variant-count-badge:focus {
  background-color: rgba(var(--content-color), 0.12);
  color: rgba(var(--title-color), 1);
}

/* CMS 2A-9 hotfix — a kivitel-számláló badge OVERLAY a termékkép doboz jobb
   felső sarkában (grid + lista nézet). A .product-box-4 .product-image már
   position:relative. Lebegő, fehér, finom árnyékos pill; pointer-events:none →
   nem fogja el a kép-link kattintását; mobilon sem lóg ki. */
.ship-variant-count-badge--image {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  margin: 0;
  max-width: calc(100% - 16px);
  padding: 2px 8px;
  font-size: 11px;
  pointer-events: none;
  background-color: rgba(var(--white), 0.95);
  border-color: rgba(var(--content-color), 0.16);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   Keresés — VARIÁNS/ALTERMÉK TALÁLAT jelzése. A /kereses találati kártyán a
   kép jobb felső sarkában finom „Változat" pill (a kivitel-számláló badge
   pill-stílusát követi, theme-barát; világos/sötét témában is olvasható), és
   a kártya tartalmában a kiválasztott kivitel megnevezése. Így egyértelmű,
   hogy a találat egy konkrét variáns (saját cikkszámmal), nem a fő termék.
   ===================================================================== */
.ship-variant-result-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 16px);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--theme-color), 0.30);
  background-color: rgba(var(--white), 0.95);
  color: rgba(var(--theme-color), 1);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
/* A kiválasztott kivitel megnevezése a kártya tartalmában (a név alatt). */
.ship-search-result-varians {
  display: block;
  margin: 2px 0 4px;
  color: rgba(var(--content-color), 1);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.ship-search-result-varians i {
  margin-right: 3px;
  color: rgba(var(--theme-color), 1);
}

/* =====================================================================
   CMS 2A-10 — KOSÁR OLDAL (/kosar). A shop-demo cart.html cart-table-box +
   right-summery-box markupját használjuk; itt csak a sablonban NEM létező,
   visszafogott jelzések (árváltozás / nem rendelhető), az üres állapot és a
   másodlagos „Vásárlás folytatása" gomb stílusa van. A táblázat/összesítő
   alaplook a shop-demo style.css-ből jön (.cart-table-box / .right-summery-box).
   ===================================================================== */

/* Cikkszám a terméknév alatt (a cart-contain span örökli a shop-demo stílust). */
.cart-section .cart-box .cart-contain span {
  display: block;
}


/* „Az ár időközben módosult." — visszafogott figyelmeztetés (dark módban is olvasható). */
.cart-section .ship-kosar-oldal-arvaltozas {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #9a6700;
}

/* „Jelenleg nem rendelhető." — figyelmeztetés + halványított tétel. */
.cart-section .ship-kosar-oldal-figyelmeztetes {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: #b42318;
}
.cart-section .ship-kosar-oldal-nem-rendelheto .cart-image,
.cart-section .ship-kosar-oldal-nem-rendelheto .price {
  opacity: 0.55;
}

/* Összesítő alatti összevont jelzés-blokk (árváltozás / nem rendelhető). */
.cart-section .ship-kosar-oldal-osszesito-jelzes {
  margin-top: 14px;
}
.cart-section .ship-kosar-oldal-osszesito-jelzes p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.4;
}
.cart-section .ship-kosar-oldal-osszesito-jelzes p:last-child {
  margin-bottom: 0;
}

/* Tájékoztató sor az összesítőben (másodlagos szöveg). */
.cart-section .ship-kosar-oldal-tax {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--content-color), 0.85);
}

/* Másodlagos „Vásárlás folytatása" link az összesítőben (a proceed-btn alatt). */
.cart-section .ship-kosar-oldal-tovabb-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  border: 1px solid rgba(var(--title-color), 0.18);
  color: rgba(var(--title-color), 1);
  font-weight: 500;
}
.cart-section .ship-kosar-oldal-tovabb-link:hover {
  background-color: rgba(var(--title-color), 0.06);
}

/* Üres kosár állapot (shop-demo empty-cart.svg középre, visszafogott CTA).
   SCROLL-FIX (123): üres kosárnál a rövid oldal miatt a sticky-header 300px-es
   kapcsolási küszöbe a lábléc közelébe esett → a fejléc fixre váltásakor a
   dokumentum magassága megugrott, a görgetés a footernél megakadt/vibrált. A
   `min-height: calc(100vh - 320px)` viewport-FÜGGETLEN görgethető magasságot ad
   (a 100vh kiejti a viewportot a számításból), így a küszöb jóval a footer fölé
   kerül → üres kosárnál is sima a görgetés a láblécig, layout-jump nélkül. A
   tartalom függőlegesen középre, intencionált üres állapotként. */
.cart-section .ship-kosar-oldal-ures {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 320px);
  padding: 40px 20px 48px;
}
.cart-section .ship-kosar-oldal-ures-ikon {
  width: 160px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 18px;
}
.cart-section .ship-kosar-oldal-ures-cim {
  margin: 0 0 8px;
  color: rgba(var(--title-color), 1);
}
.cart-section .ship-kosar-oldal-ures-szoveg {
  margin: 0 auto 22px;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--content-color), 0.9);
}
.cart-section .ship-kosar-oldal-ures .proceed-btn {
  display: inline-flex;
  width: auto;
  min-width: 220px;
}

/* =====================================================================
   059 — PUBLIKUS AKCIÓS ÁR megjelenítés (kategória-kártya, termékoldal,
   variánsváltás, kosár/offcanvas, /kosar). Visszafogott, a hajós arculathoz
   illő: az aktuális (akciós) ár a hangsúlyos elem (danger-piros), a normál ár
   áthúzva + muted, a kedvezmény-badge finom piros pill. A színek a shop
   CSS-változóiból jönnek (--danger-color / --content-color / --white) → a
   világos/sötét témákban is olvasható marad. Külön ÁFA sor SEHOL nincs.
   ===================================================================== */

/* Akciós ár-érték (kiemelt, piros) — kártya, termékoldal, kosár közös. */
.ship-ar-akcios,
.ship-ar-akcios .ship-ar-aktualis {
  color: rgba(var(--danger-color), 1);
}

/* Áthúzott eredeti (normál) ár — visszafogott, muted. */
.ship-ar-normal {
  color: rgba(var(--content-color), 0.7);
  font-weight: 500;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Kedvezmény-badge (pl. „-20%") — finom piros pill. */
.ship-ar-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background-color: rgba(var(--danger-color), 0.12);
  color: rgba(var(--danger-color), 1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* Kategória-kártya akciós ár: az aktuális ár + áthúzott normál + badge egy sorban,
   tördelhetően (mobilon sem tolja szét a kártyát). */
.shop-section .product-box-4 .product-content .price.ship-ar-akcios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

/* Termékoldal: aktuális ár ALATT az áthúzott normál + badge sor. */
.ship-ar-akcio-sor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 2px 0 6px;
}

/* Kosár/offcanvas akciós ár-sor: az aktuális egységár + áthúzott normál + badge. */
.cart-product-box .price.ship-ar-akcios,
.cart-table-box .price.ship-ar-akcios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
}

/* =====================================================================
   060b HOTFIX — ERŐSEBB, vásárlásösztönző akciós megjelenés.
   - Kategóriakártya: kép-badge (bal felső sarok) + háromállapotú árblokk
     (áthúzott eredeti + erős piros akciós ár + badge).
   - Termékoldal: „Akció" címke az akció-sorban.
   A normál (akció nélküli) ár markupja VÁLTOZATLAN (.price h5) → nincs regresszió.
   ===================================================================== */

/* Kategóriakártya akció kép-badge — erős piros pill a kép BAL felső sarkában
   (a kivitel-számláló a jobb sarokban; nem ütköznek). pointer-events:none →
   a kattintás a kép-linkre esik. Mobilon is látszik. */
.ship-akcio-badge--image {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: rgba(var(--danger-color), 1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* Kategóriakártya háromállapotú árblokk. */
.ship-product-price { margin: 4px 0 0; }
.ship-product-price--sale {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1px 8px;
}
.ship-product-price--sale .ship-price-original {
  flex-basis: 100%;          /* az eredeti ár külön sorban, fölötte */
  color: rgba(var(--content-color), 0.7);
  font-weight: 500;
  font-size: 13px;
  text-decoration: line-through;
}
.ship-product-price--sale .ship-price-sale {
  color: rgba(var(--danger-color), 1);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.ship-product-price--sale .ship-price-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background-color: rgba(var(--danger-color), 0.12);
  color: rgba(var(--danger-color), 1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.ship-product-price--empty .ship-price-soon {
  color: rgba(var(--content-color), 0.7);
  font-weight: 500;
}

/* Termékoldali akciós fő ár hangsúlyosabb (a #shipAr / #shipOsszegzoAr piros). */
.product-price.ship-ar-akcios,
.total-price-box .ship-ar-ertek.ship-ar-akcios {
  color: rgba(var(--danger-color), 1);
}

/* =====================================================================
   060c HOTFIX — publikus UI átfedések javítása (offcanvas kosár + termékoldali
   jobb árpanel). Kizárólag markup/CSS, üzleti logika változatlan.
   ===================================================================== */

/* --- Termékoldali jobb „Választott termék" árpanel: tiszta hierarchia. ---
   Sor 1: „Ár:" + nagy, piros akciós ár. Sor 2 (ship-ar-akcio-sor): „Eredeti ár:"
   címke + áthúzott normál ár + kedvezmény-badge — saját sorban, nem az árra lógva.
   Sor 3 (ship-ar-reszletek): nettó ár. */
.total-price-box .ship-ar-ertek.ship-ar-akcios {
  font-size: 22px;
  font-weight: 700;
}
.ship-ar-eredeti-cimke {
  color: rgba(var(--content-color), 0.8);
  font-size: 13px;
  font-weight: 500;
}
/* A jobb árpanelben az akció-sor saját, jól elkülönülő blokk (kis felső térrel). */
.total-price-box .ship-ar-akcio-sor {
  margin: 4px 0 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(var(--content-color), 0.12);
}

/* --- Offcanvas kosár: átfedések megszüntetése (markup változatlan). ---
   Gyökérok: a shop-demo a tétel törlés-gombját (.close-button) abszolút a jobb
   felső sarokba, a mennyiségvezérlőt (.quantity-box) abszolút a jobb-alsó sarokba
   teszi DESKTOPON → a hosszú terméknév a törlés gomb alá fut, az akciós ár-sor
   (badge) pedig a qty-box mínusz gombjára lóg. Megoldás: a terméknév-oszlop kap
   jobb térközt a törlés gombnak, a mennyiségvezérlő pedig NORMÁL folyásba kerül
   (mint mobilon) → semmi nem fed át. Csak az #cartOffcanvasre hat. */
#cartOffcanvas .vertical-product-box .product-content {
  padding-right: 26px;            /* hely a jobb felső törlés (X) gombnak */
}
#cartOffcanvas .vertical-product-box .close-button {
  top: 2px;
  right: 0;
  line-height: 1;
  z-index: 2;
}
/* A mennyiségvezérlő MINDIG normál folyásban (nem abszolút) → nem fedi az ár/badge
   sort; ha kell, kulturáltan a saját sorába kerül. */
#cartOffcanvas .vertical-product-box .product-content .quantity-box {
  position: relative;
  inset: unset;
  bottom: auto;
  right: auto;
  margin-top: 8px;
}
/* Az akciós ár-sor (aktuális ár + áthúzott normál + badge) önálló, tördelhető blokk,
   biztos térközzel a mennyiségvezérlő előtt → a „-XX%" badge nem ér a mínusz gombhoz. */
#cartOffcanvas .vertical-product-box .product-content .price.ship-ar-akcios {
  margin-bottom: 2px;
}

/* =====================================================================
   060d HOTFIX — termékoldali akciós megjelenés erősítése + jobb árpanel
   egységesítése (BALRA rendezett, egységes spacing). Csak UI/markup/CSS.
   A kategóriakártya + offcanvas megjelenés VÁLTOZATLAN.
   ===================================================================== */

/* --- Jobb „Választott termék" árpanel: egységes, BALRA rendezett, függőleges. ---
   A shop-demo total-price-box jobbra-zárását (h4 flex/space-between + korábbi
   text-align:right) felülírjuk: minden ár-info egy panelben, balra. */
.side-product-detail .total-price-box.ship-price-panel { text-align: left; }
.ship-price-panel .ship-price-label {
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--content-color), 1);
  margin-bottom: 2px;
}
.ship-price-panel .ship-price-main {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(var(--title-color), 1);
}
.ship-price-panel .ship-price-main.ship-ar-akcios {
  color: rgba(var(--danger-color), 1);    /* akciósnál erős piros */
}
/* Az akció-sor a panel részeként, balra, tiszta térközzel (nincs felső elválasztó). */
.ship-price-panel .ship-ar-akcio-sor {
  margin: 6px 0 0;
  padding: 0;
  border-top: 0;
}
/* A nettó ár a panelben BALRA rendezve (a korábbi jobbra-zárás felülírása). */
.side-product-detail .total-price-box.ship-price-panel .ship-ar-reszletek {
  text-align: left;
  margin-top: 8px;
}

/* „AKCIÓ" flag — erős, piros, tömör (a középső blokkban és a jobb panelben is). */
.ship-sale-flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background-color: rgba(var(--danger-color), 1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Nagy termékkép akció-badge (jobb felső sarok) — a kategóriakártyával AZONOS
   vizuális nyelv (erős piros pill). A .ship-galeria-box position:relative ad
   horgonyt; pointer-events:none → nem fogja el a galéria-kattintást. */
.ship-galeria-box { position: relative; }

/* Variáns-thumbnail hotfix: a galéria thumbnail-sorának (#shipThumbCol) rejtése,
   ha az aktuálisan kiválasztott opciónak csak 1 (vagy 0) képe van. A konténer
   ilyenkor is a DOM-ban marad (a Swiper-thumbs bekötve), csak nem látszik; a
   variánsváltó JS 2+ képnél leveszi ezt az osztályt. */
.ship-thumb-rejtve { display: none !important; }

.ship-kep-akcio-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background-color: rgba(var(--danger-color), 1);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* =====================================================================
   060e HOTFIX — MOBIL termékoldali akciós ár. Desktopon a középső
   `.product-price` (#shipAr) rejtett (a jobb panel az árforrás); MOBILON
   (≤991px) viszont EZ az árforrás, és a shop-demo
   `.product-section .right-box-contain .product-price` (0,3,0, media-blokk)
   `color: var(--primary-color)` (NAVY) felülírta a class-alapú akciós-piros
   szabályt → a mobil akciós ár navy maradt. Itt ID-specifikus (1,1,0) szabály
   teszi pirossá, és a cím/árblokk közé térközt + bal-igazítást ad. Csak CSS;
   az akciós állapotot a meglévő JS (`#shipAr.ship-ar-akcios` class toggle) adja,
   így variánsváltáskor is helyes. A NEM akciós ár (nincs .ship-ar-akcios) érintetlen.
   ===================================================================== */
#shipAr.ship-ar-akcios {
  color: rgba(var(--danger-color), 1);     /* akciós piros — felülírja a demo navy-t */
}
@media (max-width: 991.98px) {
  /* Cím (h2.name) és az akciós árblokk közé függőleges térköz + bal-igazítás
     (a demo ≤767px középre zárná) → tiszta, vásárlásösztönző, rendezett egység. */
  #shipAr.ship-ar-akcios {
    margin-top: 16px;
    text-align: left;
    font-weight: 700;
  }
  /* Az akció-sor (AKCIÓ flag + eredeti ár + -XX%) közvetlenül az ár alatt, balra,
     összetartozó blokként; a felső térköz a cím helyett az árhoz köti. */
  .right-box-contain .ship-ar-akcio-sor {
    justify-content: flex-start;
    text-align: left;
    margin-top: 4px;
  }
}

/* =====================================================================
   062 — AKCIÓ LEJÁRATI ÓRA IKON (csak termékadatlap). A fő ár + óra ikon
   egy sorban (flex), az ikon a fő ár MELLETT. Az ikon külön testvér (a
   #shipAr / #shipOsszegzoAr szövegét a JS textContent-tel írja). Finom,
   elegáns, akció-piros (var(--danger-color)); mobilon is kulturált. A
   tooltip Bootstrap (a JS inicializálja). [hidden] → nincs ikon.
   ===================================================================== */
.ship-ar-fejlec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ship-sale-expiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--danger-color), 1);
  font-size: 18px;
  line-height: 1;
  cursor: help;
}
.ship-sale-expiry i { line-height: 1; }
.ship-sale-expiry[hidden] { display: none; }

/* =====================================================================
   062c — VARIÁNSLISTA („Választható kivitel") akciós ár-jelzés. Kattintás
   ELŐTT is látszik, melyik kivitel akciós: áthúzott eredeti ár + kis -XX%
   badge (felül), nagy piros akciós ár (alul). Per-variáns adat a központi
   akció-helperből (nincs rávetítve a főtermék akciója). Nem akciós sor a
   meglévő `.ship-valtozat-ar` megjelenést tartja.
   ===================================================================== */
.ship-valtozat-ar-blokk {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.ship-valtozat-ar-eredeti-sor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ship-valtozat-ar-eredeti {
  font-size: 12.5px;
  color: rgba(var(--content-color), 0.7);
  text-decoration: line-through;
  white-space: nowrap;
}
.ship-valtozat-kedv-badge {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  color: rgba(var(--danger-color), 1);
  background-color: rgba(var(--danger-color), 0.12);
  white-space: nowrap;
}
/* Az akciós ár a variánssorban is piros + kiemelt (a .ship-ar-akcios mellett explicit). */
.ship-valtozat-ar.ship-ar-akcios {
  color: rgba(var(--danger-color), 1);
}
/* Mobilon (≤575px) a jobb oszlop teljes szélességű; az árblokk maradjon jobbra zárt. */
@media (max-width: 575px) {
  .ship-valtozat-ar-blokk { align-items: flex-end; }
}

/* =====================================================================
   089 — Footer Barion bizalmi logó. A „smart banner" világos hátterű,
   ezért fehér chip-en jelenik meg (footer minden témájában olvasható),
   és nem nagyobb a fizetési ikonsornál. A fizetési ikonok + a Barion logó
   egy flex-csomagba kerülnek; mobilon külön sorba tördelhet.
   ===================================================================== */
.sub-footer .ship-footer-pay-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.ship-footer-barion {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 8px 14px;
  line-height: 0;
}
/* 091 — érdemi méret: a Barion logósor jól látható, nem „odadobott" pici elem.
   A korábbi height:22px + max-width:150px (méretkorlát) ELTÁVOLÍTVA. */
.ship-footer-barion img {
  height: 44px;
  width: auto;
  max-width: none;
  display: block;
}
@media (max-width: 575.98px) {
  .sub-footer .ship-footer-pay-wrap { justify-content: center; }
  /* mobilon arányosan kisebb, de még jól látható; a chip a konténerig tördelhet */
  .ship-footer-barion { max-width: 100%; }
  .ship-footer-barion img { height: 36px; max-width: 100%; }
}

/* 091 — Barion logósor a jogi dokumentumokban (ÁSZF / Fizetési feltételek).
   Az ÁSZF tartalmába ágyazott logó inline width="220" attribútumát felülírjuk, hogy
   ott is érdemi, arányos méretű legyen; reszponzív (mobilon a konténerig zsugorodik). */
.ship-tartalom img[src*="barion-smart-banner-light"] {
  width: 340px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* =====================================================================
   118 — TOPBAR sötét/világos mód váltó ikon
   A topbar (.top-header) háttere a sablonban sötétkék (--theme-blue-dark),
   ezért az ikon világos, körkörös, finom kontúrral. A nyelv/pénznem/social
   helyére kerül a bal oldalon. Reszponzív: kis kijelzőn is kényelmes méret.
   ===================================================================== */
.header-style-1 .top-header .ship-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(var(--white), 0.3);
  border-radius: 50%;
  background-color: transparent;
  color: rgba(var(--white), 1);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.header-style-1 .top-header .ship-theme-toggle:hover {
  background-color: rgba(var(--white), 0.15);
  border-color: rgba(var(--white), 0.6);
  color: rgba(var(--white), 1);
}
.header-style-1 .top-header .ship-theme-toggle:focus-visible {
  outline: 2px solid rgba(var(--white), 0.75);
  outline-offset: 2px;
}
.header-style-1 .top-header .ship-theme-toggle i {
  pointer-events: none;
}
@media (max-width: 575.98px) {
  .header-style-1 .top-header .ship-theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* =====================================================================
   119 — TOPBAR text scroller (szlogen) + jobb oldali wrapper
   A shop-demo eredeti „middle-content" scrollerét hozzuk vissza, de a
   topbar BAL oldalára (.left-header), saját .ship-topbar-szlogen osztály
   alatt — így a demo „1145px alatt elrejt" szabálya nem érinti, mobilon
   is látszik. Tiszta CSS-animáció: a globális @keyframes move (style.css)
   váltogatja a span két sorát (top: 0 → -20px). Nincs JS, nincs layout
   shift (a p fix magasságú, overflow:hidden).
   A sötétkék topbar-háttéren a szöveg fehér, sötét módban is olvasható.
   ===================================================================== */
.header-style-1 .top-header .ship-topbar-szlogen {
  display: flex;
  align-items: center;
  min-width: 0;
}
.header-style-1 .top-header .ship-topbar-szlogen p {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(var(--white), 1);
  overflow: hidden;
  position: relative;
  height: 20px;
}
.header-style-1 .top-header .ship-topbar-szlogen p span {
  display: inline-block;
  color: rgba(var(--white), 1);
  position: relative;
  white-space: nowrap;
  line-height: 20px;
  top: 0;
  left: 0;
  /* Nem zavaróan gyors: a demo 4s helyett nyugodtabb 7s, 1s kezdő késleltetéssel. */
  animation: move 7s infinite;
  animation-delay: 1s;
}
body.dark .header-style-1 .top-header .ship-topbar-szlogen p span {
  color: #fff;
}
/* Kíméletes mozgáscsökkentés: aki rendszerszinten kéri, annak nincs animáció,
   csak az első sor (szlogen) látszik statikusan. */
@media (prefers-reduced-motion: reduce) {
  .header-style-1 .top-header .ship-topbar-szlogen p span {
    animation: none;
    top: 0;
  }
}

/* A jobb oldali csoport: topbar linkek (.right-header) + mód-váltó egy sorban.
   A .top-header space-between elrendezésében ez a blokk kerül jobbra, a
   szlogen marad balra. A linkek mobilon (<670px) a demo szabálya szerint
   eltűnnek, a mód-váltó viszont itt is megmarad és jól látható. */
.header-style-1 .top-header .ship-topbar-jobb {
  display: flex;
  align-items: center;
  gap: calc(10px + 8 * (100vw - 320px) / 1600);
}

/* Kis kijelzőn a szlogen ne tudja szétfeszíteni a topbart. */
@media (max-width: 575.98px) {
  .header-style-1 .top-header .ship-topbar-szlogen p,
  .header-style-1 .top-header .ship-topbar-szlogen p span {
    font-size: 13px;
  }
}

/* =====================================================================
   HOTFIX — TOPBAR jobb oldali linkek (Fiókom / Kosár / Belépés) állapotai
   A topbar háttere mindig sötétkék (--theme-blue-dark), világos és sötét
   módban egyaránt. A demo hover-szabálya a `--primary-color` tokent
   használja, amit az arculat-konfiguráció a navy márkaszínre köt
   (config/arculat.php) -> sötétkék szöveg sötétkék háttéren = olvashatatlan.
   Itt a link/hover/focus/active állapotokat az aqua "link hover" tokenre
   (--light-blue) állítjuk, ami mindkét módban kontrasztos. Az alaphelyzet
   fehér marad (a demo + body.dark szabály adja). A topbar/szlogen/téma-
   váltó korábbi javításait ez nem érinti. Mobilon a linkek a demo szerint
   <670px alatt rejtve maradnak, ez változatlan.
   ===================================================================== */
.header-style-1 .top-header .right-header .content-list li a:hover,
.header-style-1 .top-header .right-header .content-list li a:focus,
.header-style-1 .top-header .right-header .content-list li a:focus-visible,
.header-style-1 .top-header .right-header .content-list li a:active,
.header-style-1 .top-header .right-header .content-list li:hover a,
body.dark .header-style-1 .top-header .right-header .content-list li a:hover,
body.dark .header-style-1 .top-header .right-header .content-list li a:focus,
body.dark .header-style-1 .top-header .right-header .content-list li a:focus-visible,
body.dark .header-style-1 .top-header .right-header .content-list li a:active,
body.dark .header-style-1 .top-header .right-header .content-list li:hover a {
  color: rgba(var(--light-blue), 1);
}

/* A hover-aláhúzás (::before) is az aqua színt kapja, hogy látható legyen a
   sötétkék sávon (a demo itt is a navy --primary-color-t használta). */
.header-style-1 .top-header .right-header .content-list li:hover a::before,
.header-style-1 .top-header .right-header .content-list li a:focus-visible::before {
  width: 100%;
  background-color: rgba(var(--light-blue), 1);
}

/* Billentyűzetes fókusz látható, de diszkrét jelzése. */
.header-style-1 .top-header .right-header .content-list li a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   118 — FOOTER márka-logó: világos/sötét háttérhez igazodó váltás
   A footer háttere a sablonban --white (világos módban fehér, sötét módban
   sötét). Ezért két logó-slot van; alapból (világos) a sötét logó látszik,
   sötét módban a világos/inverz. A szöveges fallback a footer címszínével
   (--title-color) jelenik meg, ami mindkét módban olvasható.
   ===================================================================== */
.ship-footer-logo {
  display: inline-flex;
  align-items: center;
}
.ship-footer-logo .ship-footer-logo-sotet {
  display: none;
}
body.dark .ship-footer-logo .ship-footer-logo-vilagos {
  display: none;
}
body.dark .ship-footer-logo .ship-footer-logo-sotet {
  display: inline-flex;
  align-items: center;
}
.ship-footer-logo-szoveg {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.1;
  color: rgba(var(--title-color), 1);
}

/* Footer-OSZLOP márka-logó (a kivett „Get Shopping App" oszlop helyén, a Kapcsolat
   oszlop tetején). A sub-footer-logónál arányosabb, kontrollált méret: ne legyen
   torz, túl nagy vagy túl kicsi; mobilon arányosan kisebb. A kétváltozatos
   (világos/sötét) láthatóságot a fenti .ship-footer-logo szabályok kezelik. */
.ship-footer-brand-logo {
  margin-bottom: calc(12px + 6 * (100vw - 320px) / 1600);
}
.ship-footer-brand-logo img {
  height: auto;
  width: auto;
  max-height: 56px;
  max-width: 200px;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .ship-footer-brand-logo img {
    max-height: 46px;
    max-width: 170px;
  }
}

/* =====================================================================
   123 — OFFCANVAS ÜRES KOSÁR + MEGTEKINTETT TERMÉKEK
   ===================================================================== */

/* --- Offcanvas üres kosár állapot ---
   A shop-demo `empty-cart` li alapból REJTETT (.empty-cart:not(.show) →
   display:none); a partial most `show` osztállyal + üzenettel + CTA-val rendel.
   Itt középre rendezzük az offcanvas magasságában és stílusozzuk a szöveget/CTA-t. */
.cart-offcanvas .cart-product-box .product-box-list:has(.empty-cart.show) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-box-list li.empty-cart.show {
  display: block;
  text-align: center;
}
.ship-kosar-ures-szoveg {
  margin: 6px auto 18px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--content-color), 0.9);
}
.ship-kosar-ures .ship-kosar-ures-tovabb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 200px;
  margin-top: 0;
}

/* --- Megtekintett termékek lenyíló/offcanvas (123 + javítás) ---
   A menüpont dropdownja a FEJLÉC KERESŐMEZŐ már működő megtekintett-termékek
   kártyáját (`.ship-search-termek*`, ship-kereso.css) ÚJRAHASZNÁLJA → azonos
   kompakt, NEM blur-ös megjelenés. A tartalmat a ship-megtekintett.js tölti
   (ugyanaz a localStorage + AJAX adatforrás, mint a keresőé). */

/* MEGJEGYZÉS: a lista / üres-üzenet láthatóságát a ship-megtekintett.js INLINE
   `display` stílussal vezérli (a demo script.js `checkEmptyList` és a demo CSS
   `:has(.product-box-list[style="display: none;"])` szabályával azonos contract).
   Korábban itt egy `.ship-rejtve` osztály volt, de azt a demo által a listára
   tett inline `display:none` felülírta (inline > class), így a renderelt termékek
   sosem látszottak — ezért megszűnt. */

/* CÍM: a demo 21px-es dropdown-title túl nagy volt → normál, a kereső-panel
   címeihez illő méret. Az `.review-dropdown.ship-megtekintett` + `.dropdown-box`
   prefix felülmúlja a demo (0,0,3,1) specificitását. */
.dropdown-box .review-dropdown.ship-megtekintett .dropdown-title h4 {
  font-size: 16px;
}

/* A kép SOSEM blur (a kereső .ship-search-viewed-body img is filter:none). */
.ship-megtekintett img {
  filter: none !important;
}

/* Egy sor = kompakt kereső-kártya (balra, kitölt) + akciógombok (jobbra). */
.ship-megtekintett .product-box-list .ship-megtekintett-tetel {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  border-bottom: 1px solid rgba(var(--content-color), 0.08);
}
.ship-megtekintett .product-box-list .ship-megtekintett-tetel:last-child {
  border-bottom: 0;
}
.ship-megtekintett .ship-megtekintett-kartya {
  flex: 1 1 auto;
  min-width: 0;
}
.ship-megtekintett .ship-megtekintett-akciok {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}
.ship-megtekintett .ship-megtekintett-kosar,
.ship-megtekintett .ship-megtekintett-torles {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid rgba(var(--content-color), 0.15);
  background-color: rgba(var(--white), 1);
  color: rgba(var(--title-color), 1);
}
.ship-megtekintett .ship-megtekintett-kosar {
  background-color: rgba(var(--primary-color), 1);
  color: #fff;
  border-color: transparent;
}
.ship-megtekintett .ship-megtekintett-kosar:hover {
  background-color: rgba(var(--primary-color), 1);
}
.ship-megtekintett .ship-megtekintett-torles:hover {
  color: rgba(var(--danger-color), 1);
  border-color: rgba(var(--danger-color), 0.4);
}

/* ÜRES ÁLLAPOT kompakt — ne legyen nagy fehér blokk (a demo svg méretlen volt). */
.dropdown-box .review-dropdown.ship-megtekintett .empty-message {
  margin-block: 18px;
  padding-top: 6px;
}
.dropdown-box .review-dropdown.ship-megtekintett .empty-message svg {
  width: 72px;
  height: 72px;
}
.dropdown-box .review-dropdown.ship-megtekintett .empty-message h6 {
  font-size: 15px;
  margin-top: 10px;
}
/* Magyarázó sor az üres állapothoz: tegye egyértelművé, hogy ez NORMÁL üres
   állapot (a lista a termékek megnyitásával töltődik), nem hiba. */
.dropdown-box .review-dropdown.ship-megtekintett .empty-message .ship-megtekintett-ures-info {
  margin: 6px auto 0;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--content-color), 0.85);
}

/* =====================================================================
   AKCIÓS TERMÉKEK — fix promóciós sáv a kategória-panel tetején.
   A shop-demo `top-menu-list .sub-category-box` mintát kiegészítő, kulturáltan
   figyelemfelhívó akció-link + pulzáló piros „Akció" jelzés. Téma-aware (a
   --danger-color / --content-color változókból), így light/dark/half-dark/minimal
   módban is olvasható. NEM tolja szét a panelt (a meglévő padding marad).
   ===================================================================== */

/* Az akciós sáv a kategóriafa fölött, finom alsó elválasztóval. */
.ship-akcios-sav { margin-bottom: 8px; }

/* Az akció-link MINDIG egy sor (ikon · szöveg · badge), függetlenül attól, hogy a
   demo `.sub-category-box` flex-szabálya érvényes-e (a kategóriaoldali bal sávban
   pl. nincs `.category-menu-list` ősszülő → a `<h5>` blokk külön sorba törne). Ezért
   a flexet ITT, a saját osztályon kényszerítjük ki → desktopon és mobilon is egy sor.
   NINCS háttérszín: a piros csak az ikonban és a badge-ben jelenik meg (tiszta sáv). */
.ship-akcios-sav .ship-akcios-sav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background-color: transparent;
}
.ship-akcios-sav .ship-akcios-sav-link:focus-visible {
  outline: 2px solid rgba(var(--danger-color), 0.6);
  outline-offset: 1px;
}

/* A link szövege ne törjön külön sorba, és ne hozzon saját block-margót. */
.ship-akcios-sav .ship-akcios-sav-link h5 {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

/* Aktív állapot (az /akcios-termekek oldalon): csak hangsúlyosabb szöveg, nincs háttér. */
.ship-akcios-sav .ship-akcios-sav-link--aktiv h5 {
  font-weight: 600;
}

/* Az akció-ikon piros, hogy a promóciós jelleg azonnal látszódjon. */
.ship-akcios-sav .ship-akcios-sav-ikon {
  flex: 0 0 auto;
  color: rgba(var(--danger-color), 1);
  font-size: 18px;
  line-height: 1;
}

/* A pulzáló „Akció" pill a link jobb szélén (a sub-category-box flex sorában). */
.ship-akcios-sav .ship-akcios-pont {
  display: inline-block;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background-color: rgba(var(--danger-color), 1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.5;
  vertical-align: middle;
  animation: shipAkcioPulzal 1.8s ease-in-out infinite;
}

/* Kulturált pulzálás: enyhe méret + halo, nem villog agresszíven. */
@keyframes shipAkcioPulzal {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--danger-color), 0.45);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 5px rgba(var(--danger-color), 0);
  }
}

/* Akadálymentesség: ha a felhasználó kéri a mozgás csökkentését, ne pulzáljon. */
@media (prefers-reduced-motion: reduce) {
  .ship-akcios-sav .ship-akcios-pont { animation: none; }
}

/* Akciós termékek oldal: a felső keresőmező és a tartalom közti ritmus. */
.ship-akcios-oldal .ship-kereses-fomezo { margin-bottom: 18px; }
.ship-akcios-oldal .ship-akcios-ures h3 i { color: rgba(var(--danger-color), 1); }

/* A KÖZÖS termékkártya „Kosárba" gombja (a főoldalon és az akciós oldalon is): a
   gomb töltse ki a kártya szélességét. A kék háttér + fehér szöveg a markup
   `theme-bg-color text-white` osztályaiból jön (a termékoldali gombbal azonos),
   ezért itt csak az elrendezés. Globális (ship-theme.css minden oldalon töltődik). */
.ship-kartya-kosar .cart-button {
  width: 100%;
}

/* =====================================================================
   AKCIÓS TERMÉKEK OLDAL — KOMPAKT KATEGÓRIASZŰRŐ (collapse).
   A korábbi végtelen chip-folyam helyett: tömör fejléc (kereső a termékek közt,
   majd egy összecsukható „Kategória" panel), így mobilon nem ömlik a chip-lista a
   terméklista elé. A chipek a meglévő `.ship-kereses-chip` stílust használják.
   ===================================================================== */
.ship-akcios-szuro { margin: 6px 0 18px; }

/* Fejléc-sor: a „Kategória" lenyitó gomb + (aktív szűrőnél) „Szűrés törlése". */
.ship-akcios-szuro-fejlec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* A lenyitó gomb: tiszta, webshop-szerű vezérlő (kerete a tartalomszínből). */
.ship-akcios-szuro-gomb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(var(--content-color), 0.22);
  border-radius: 8px;
  background-color: transparent;
  color: rgba(var(--title-color), 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ship-akcios-szuro-gomb:hover,
.ship-akcios-szuro-gomb[aria-expanded="true"] {
  border-color: rgba(var(--primary-color), 1);
}
.ship-akcios-szuro-gomb .ship-akcios-szuro-ikon {
  font-size: 18px;
  line-height: 1;
}
/* A nyíl elfordul, amikor a panel nyitva van. */
.ship-akcios-szuro-gomb .ship-akcios-szuro-nyil { transition: transform 0.2s ease; }
.ship-akcios-szuro-gomb[aria-expanded="true"] .ship-akcios-szuro-nyil { transform: rotate(180deg); }

/* Az aktuálisan kiválasztott kategória neve a gombban (kiemelve). */
.ship-akcios-szuro-gomb .ship-akcios-szuro-aktiv {
  color: rgba(var(--primary-color), 1);
  font-weight: 600;
}

/* „Szűrés törlése" link. */
.ship-akcios-szuro-torles {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(var(--content-color), 1);
}
.ship-akcios-szuro-torles:hover { color: rgba(var(--danger-color), 1); }

/* A lenyíló chip-panel: kártyás, görgethető (nagyon sok kategóriánál sem nő túl). */
.ship-akcios-szuro-panel {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(var(--content-color), 0.16);
  border-radius: 10px;
  background-color: rgba(var(--white), 1);
}
.ship-akcios-szuro-panel .ship-kereses-szurosor {
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
}

/* =====================================================================
   KOSÁR OFFCANVAS — alsó üres fehér sáv javítása (flex-column layout).
   OK: a demo a `.product-box-list`-nek FIX magasságot ad
   (height: calc(100vh − fejléc − 198px footer)), de a mi összesítőnk (nincs
   free-shipping progress-sáv) alacsonyabb 198px-nél → a lista+footer rövidebb a
   body-nál → ÜRES FEHÉR SÁV az összesítő ALATT. Megoldás: rugalmas flex-column —
   a lista kitölti a maradék helyet és görget, az összesítő mindig alul marad,
   nincs üres sáv. Kevés/sok terméknél, mobilon és desktopon is jó; az üres kosár
   állapot (.empty-cart.show centrálása) változatlan. Csak a VALÓDI kosár
   offcanvasra szkópolva (#cartOffcanvas), a halott wishlist-demo nem érintett.
   Az id-szelektor (1,3,0) felülírja a demo (0,5,0) fix magasságát.
   ===================================================================== */
#cartOffcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;            /* a görgetés a listán belül történik */
}
#cartOffcanvas .offcanvas-body .cart-product-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
/* A terméklista kitölti a maradék helyet és görget (a demo fix height felülírása). */
#cartOffcanvas .offcanvas-body .cart-product-box .product-box-list {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Az összesítő/CTA blokk mindig alul, fix magasságon (nem zsugorodik, nincs alatta sáv). */
#cartOffcanvas .offcanvas-body .cart-product-box .total-price-box {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 16px;
  padding-bottom: 16px;
}
/* A magyarázó mondat eltávolítása után a részösszeg a gombokhoz tapadt → kulturált
   térköz a `Részösszeg` sor és a gombsor között (a korábbi `<p>` helyett). */
#cartOffcanvas .offcanvas-body .cart-product-box .total-price-box .sub-total {
  margin: 0 0 14px;
}
/* A rövid gombszövegek („Pénztár" / „Kosár") ne törjenek sortörést; a két gomb
   egymás mellett marad (a demo flex-sor). Nagyon keskeny mobilon egymás alá. */
#cartOffcanvas .offcanvas-body .cart-product-box .total-price-box .cart-btn-group .btn {
  white-space: nowrap;
}
@media (max-width: 360px) {
  #cartOffcanvas .offcanvas-body .cart-product-box .total-price-box .cart-btn-group {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------
   FELSŐ FŐMENÜ HOVER-OLVASHATÓSÁG HOTFIX
   -------------------------------------------------------------------
   A shop-demo style.css desktop (≥1200px) szabálya a felső menüpont
   szövegét hoverkor --primary-color-ra váltja
   (header .navbar-expand-xl .navbar-nav .nav-item:hover > .nav-link),
   ami az aktuális arculatban sötétkék — a sötétkék fejléc-háttéren
   olvashatatlanná válik.

   A javítás a TOPHEADER jobb oldali linkjeinek MÁR MŰKÖDŐ hover-mintáját
   veszi át (lásd fentebb: .top-header .right-header .content-list li a):
   alaphelyzetben fehér, hover/focus/aktív állapotban az aqua „link hover"
   tokenre (--light-blue) vált, ami a sötétkék sávon kontrasztos és olvasható.
   Aláhúzás (text-decoration) NINCS — a topheaderben sincs a szövegen, és a
   demo főmenü nav-linknek nincs pszeudo-sáv eleme, így nem találunk ki új
   látványt; csak a szín változik, akárcsak a topheaderben.

   Hatókör (szándékosan szűk):
     - csak desktop (≥1200px), ahol a hibás demo-szabály él,
     - csak #primaryMenu .navbar-nav KÖZVETLEN felső pontjai
       (> .nav-item > .nav-link) → a legördülő .dropdown-item és a
       mobil/offcanvas menük NEM érintettek,
     - az #primaryMenu ID miatt a specifitás biztosan felülírja a demo
       0,5,1-es hover-szabályát, globális felülírás nélkül.
   ------------------------------------------------------------------ */
@media (min-width: 1200px) {
  /* Alaphelyzet: fehér (a sötétkék háttéren olvasható). */
  .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link {
    color: rgba(var(--white), 1);
    text-decoration: none;
  }

  /* Hover/focus/aktív: aqua link-hover szín (topheader minta), aláhúzás nélkül. */
  .header-style-1 #primaryMenu .navbar-nav > .nav-item:hover > .nav-link,
  .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link:hover,
  .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link:focus,
  .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link:focus-visible,
  .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link.active,
  body.dark .header-style-1 #primaryMenu .navbar-nav > .nav-item:hover > .nav-link,
  body.dark .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link:hover,
  body.dark .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link:focus,
  body.dark .header-style-1 #primaryMenu .navbar-nav > .nav-item > .nav-link.active {
    color: rgba(var(--light-blue), 1);
    text-decoration: none;
  }
}

/* ============================================================
   203 hotfix — ELÁLLÁSI ŰRLAP jelölők (radio / checkbox) láthatósága.
   PROBLÉMA: a Bootstrap form-check-input körvonala túl halvány volt, a kijelölt
   állapot sem volt egyértelmű az elállási oldalakon.
   CÉLZOTT: kizárólag a .ship-elallas-oldal alatti jelölők (a két elállási oldal:
   /elallas-a-szerzodestol és .../urlap). NEM érinti a checkout / kosár / login /
   admin űrlapok inputjait. Token-alapú színek → világos/sötét témában is olvasható.
   Önálló (appearance:none + saját pipa/pont SVG), így a meglévő Bootstrap-CSS-től
   függetlenül garantáltan látható.
   ============================================================ */
.ship-elallas-oldal .form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.15em;
  border: 2px solid rgba(var(--title-color), 0.55);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ship-elallas-oldal .form-check-input[type="radio"]    { border-radius: 50%; }
.ship-elallas-oldal .form-check-input[type="checkbox"] { border-radius: 0.25em; }
.ship-elallas-oldal .form-check-input:hover {
  border-color: rgba(var(--primary-color), 1);
}
.ship-elallas-oldal .form-check-input:checked {
  background-color: rgba(var(--primary-color), 1);
  border-color: rgba(var(--primary-color), 1);
}
.ship-elallas-oldal .form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 8 3 3 5-6'/%3e%3c/svg%3e");
  background-size: 0.85em;
}
.ship-elallas-oldal .form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%23fff'/%3e%3c/svg%3e");
  background-size: 1em;
}
/* A :focus és :focus-visible KÜLÖN szabályban: ha egy böngésző a :focus-visible-t
   nem ismeri, a közös selector-lista érvénytelenné válna és a :focus gyűrű is elveszne.
   Szétválasztva a :focus ring minden böngészőben látszik (egyúttal felülírja a globális
   `form .form-check-input:focus` szabályt — magasabb specificitás). */
.ship-elallas-oldal .form-check-input:focus {
  outline: 0;
  border-color: rgba(var(--primary-color), 1);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-color), 0.35);
}
.ship-elallas-oldal .form-check-input:focus-visible {
  outline: 0;
  border-color: rgba(var(--primary-color), 1);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-color), 0.35);
}
.ship-elallas-oldal .form-check-input.is-invalid {
  border-color: #dc3545;
}
.ship-elallas-oldal .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.30);
}
.ship-elallas-oldal .form-check-label { cursor: pointer; }

/* ===========================================================================
   Publikus kategóriaoldali hosszú leírás „Bővebben / Kevesebb" összecsukása.

   Cél: a hosszú kategórialeírás ne nyomja túl mélyre a terméklistát, de a teljes
   tartalom maradjon az oldalon (SEO). A TELJES HTML a DOM-ban marad; csak
   VIZUÁLISAN csukjuk össze (max-height + overflow), így táblázat/BS5/összetett
   HTML sem törik, és nincs mondat-/tag-félbevágás (nem substr-alapú).

   Állapotokat a ship-kat-leiras.js kapcsol:
     .ship-kat-leiras--csukhato  -> a tartalom hosszú, van értelme csukni (gomb látszik)
     .ship-kat-leiras--csukott   -> épp összecsukott állapot
   JS nélkül egyik osztály sincs -> a leírás teljesen látszik (progresszív fejlesztés).
   =========================================================================== */

/* Csak akkor klippelünk, ha a JS „csukhatónak" jelölte. A magasságot a JS
   állítja inline (px), ezért itt csak az overflow + finom animáció kell. */
.ship-kat-leiras--csukhato { position: relative; }
.ship-kat-leiras--csukhato .ship-kat-leiras-tartalom {
  overflow: hidden;
  transition: max-height 0.26s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ship-kat-leiras--csukhato .ship-kat-leiras-tartalom { transition: none; }
}

/* Csukott állapotban finom fehér fade a levágott alsó él fölött (a doboz bg fehér,
   ezért a fehérbe olvadó gradiens illeszkedik). pointer-events:none, hogy ne fogja
   el a kattintást/jelölést. A ::after a klippelt tartalom alsó éléhez tapad. */
.ship-kat-leiras--csukott .ship-kat-leiras-tartalom { position: relative; }
.ship-kat-leiras--csukott .ship-kat-leiras-tartalom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.2rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

/* Diszkrét, de jól látható szöveges gomb (nem harsány CTA). A link-akcentus
   az arculati aqua tokenből jön (beállítás-alapú, nem beégetett szín). */
/* A `hidden` attribútumot az attribútum-szelektor magasabb specificitása érvényesíti
   (a `display:inline-flex` egyébként felülírná a böngésző `[hidden]{display:none}` szabályát). */
.ship-kat-leiras-tovabb[hidden] { display: none; }
.ship-kat-leiras-tovabb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  color: rgba(var(--light-blue, 1, 173, 176), 1);
}
.ship-kat-leiras-tovabb:hover,
.ship-kat-leiras-tovabb:focus-visible { text-decoration: underline; }
.ship-kat-leiras-tovabb:focus-visible {
  outline: 2px solid rgba(var(--light-blue, 1, 173, 176), 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}
/* A chevron lefelé mutat csukott állapotban, és felfelé fordul nyitottban. */
.ship-kat-leiras-tovabb i {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.26s ease;
}
.ship-kat-leiras--csukhato:not(.ship-kat-leiras--csukott) .ship-kat-leiras-tovabb i {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .ship-kat-leiras-tovabb i { transition: none; }
}

/* =====================================================================
   258 UI-hotfix — Keresési eredményoldal: egységes blokk-ritmus + a fejléc
   autocomplete „részletes keresés" menekülő sora. Cél: a kapcsolódó / okos /
   menekülő szakaszok ne folyjanak össze, legyen tiszta térköz és elválasztás,
   de NE legyen nagy üres terület. Semleges színek (világos shop), dark-mode-
   semleges; a termék- (product-box-4) és kategóriakártya (category-box-4)
   vizuálisan eleve elkülönül — itt csak a szakasz-ritmust egységesítjük.
   ===================================================================== */
.ship-kereses-oldal .ship-kereses-megfeleltetes,
.ship-kereses-oldal .ship-okos-kereso-blokk,
.ship-kereses-oldal .ship-kereso-menekulo {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* A találati blokkon belüli első szakasznak ne legyen dupla felső vonal. */
.ship-kereses-oldal .ship-kereses-kapcsolodo-szakasz > .ship-kereses-megfeleltetes,
.ship-kereses-oldal .ship-kereses-kapcsolodo-szakasz > .ship-okos-kereso-blokk {
  margin-top: 0;
}
.ship-kereses-oldal .ship-okos-kereso-blokk .title,
.ship-kereses-oldal .ship-kereso-menekulo .title { margin-bottom: 1rem; }
.ship-kereses-oldal .ship-okos-kereso-blokk .title h3,
.ship-kereses-oldal .ship-kereso-menekulo .title h3 { font-size: 1.15rem; margin-bottom: 0; }
/* Chip-sorok (Próbáld ezekkel / Amit mások keresnek / Erre gondoltál) szellős, törhető. */
.ship-kereses-oldal .ship-kereses-talan-lista { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Fejléc autocomplete — „Részletes keresés megnyitása" menekülő sor + halk tipp. */
.ship-search-reszletes { font-weight: 600; }
.ship-search-hint {
  margin: .4rem 0 0;
  font-size: .82rem;
  color: #6c757d;
  text-align: center;
}

/* =====================================================================
   TERMÉKVIDEÓ A KÉPGALÉRIÁBAN (hotfix): a videó a közös Swiper egy slide-ja.
   A slide könnyű poszter (thumbnail) + play-overlay; kattintásra a JS injektálja
   a lejátszót (.ship-media-jatszo). Reszponzív 16:9, mobilbarát. Csak funkcionális
   elrendezés — a galéria demo-stílusát nem írja felül.
   ===================================================================== */
.ship-media-slide,
.ship-media-thumb { position: relative; }
.ship-media-poster {
    display: block; width: 100%; padding: 0; margin: 0;
    border: 0; background: transparent; cursor: pointer; line-height: 0;
}
.ship-media-poster img,
.ship-media-thumb img { display: block; width: 100%; }
.ship-media-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; line-height: 1; pointer-events: none;
    transition: background .2s ease;
}
.ship-media-poster:hover .ship-media-play { background: rgba(0, 0, 0, .75); }
.ship-media-play-sm { width: 30px; height: 30px; font-size: 16px; }
.ship-media-jatszo {
    position: relative; width: 100%; padding-top: 56.25%;
    background: #000; overflow: hidden; border-radius: 8px;
}
.ship-media-jatszo > iframe,
.ship-media-jatszo > video,
.ship-media-jatszo > .cmp-embed-placeholder {
    position: absolute; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    border: 0; min-height: 0 !important;
}

/* =====================================================================
   PUBLIKUS VÍZSZINTES SCROLL FIX — teljes képernyős, fixed overlay-k
   szélessége (globális, MINDEN publikus oldal).

   Gyökérok: a Kartify sablon (style.css) három teljes képernyős,
   position: fixed overlay-t `width: 100vw`-vel méretez:
     - .bg-overlay     (#overlay,        lablec)
     - .search-overlay (#searchOverlay,  fejléc kereső overlay)
     - .preloader      (markup jelenleg eltávolítva, de a szabály maradhat)
   A `100vw` a FÜGGŐLEGES görgetősáv szélességét IS beleszámítja (a teljes
   viewport, nem a tartalmi terület). Amint egy oldal magasabb a képernyőnél
   (van függőleges görgetősáv — „bizonyos felbontásokon"), ezek a fixed
   overlay-k ~a görgetősáv szélességével (≈15 px) túllógnak a tartalmi
   területen. A fixed elem túllógásából több böngésző (pl. Firefox, és
   bizonyos esetekben a Chrome is) VÍZSZINTES görgetősávot generál — minden
   publikus oldalon, mert a fejléc és a lábléc közös.

   Javítás (NEM takarás): fixed elemnél a `width: 100%` az iniciális
   containing block (a viewport görgetősáv NÉLKÜL) szélessége — pontosan a
   látható tartalmi terület, így az overlay hiánytalanul lefedi a képernyőt,
   de nem lóg túl. A `left:0; height:100vh` és a megjelenítési (.show) logika
   változatlan. (A style.css a shop-demóból származó, scss-ből fordítható
   fájl, ezért a javítás itt, az override-rétegben van — túléli az esetleges
   scss-újrafordítást; a shop-demo NEM módosul.)
   ===================================================================== */
.bg-overlay,
.search-overlay,
.preloader {
    width: 100%;
}

/* =====================================================================
   PUBLIKUS VÍZSZINTES SCROLL FIX 2. — fejléc „Megtekintett termékek"
   lenyíló panel jobbra igazítása (globális, MINDEN publikus oldal).

   Gyökérok: a fejléc jobb szélén ülő „Megtekintett termékek"
   (.recent-header .review-dropdown, #recentViwerModal) DESKTOP (xxl+, azaz
   >=1400 px) lenyíló panelje a Kartify sablonban KÖZÉPRE igazított
   (.dropdown-box .dropdown-list: left:50% + translateX(-50%)) és min-width:
   420 px. Mivel a trigger a viewport jobb szélénél van, a panel jobb fele
   túllóg a viewport jobb szélén (pl. 1398 px tartalmi szélességnél a panel
   jobb éle ~1404). Ez a panel `position:absolute` (nem fixed!), ezért az
   overflow-x:visible ősein (recent-header -> nav-header -> header -> body ->
   html) FELPROPAGÁL, és VALÓS vízszintes görgetést okoz MINDEN böngészőben
   (Chrome/WebKit/Firefox is), egy szűk szélesség-sávban (kb. 1400–1450 px,
   ahol a fixed-re váltó @media max-width:1399.98 még nem aktív, de a panel
   már nem fér ki). A closed (visibility:hidden) panel is beleszámít a
   scrollWidth-be.

   Javítás (NEM takarás): a jobb szélső panelt JOBBRA igazítjuk (balra
   nyíljon), ne középre — így a 420 px-es panel jobb éle a triggerhez simul
   és sosem lóg túl a viewporton. CSAK a desktop (min-width:1400px) abszolút
   tartományban avatkozunk be; a <1400 px fixed offcanvas viselkedés
   (@media max-width:1399.98px) VÁLTOZATLAN. Szűk szelektor: kizárólag a
   recent-header review-dropdownja (a fiók/user-dropdown NEM érintett).
   Böngészős méréssel validálva: overflow 6px -> 0. A shop-demo style.css
   NEM módosul (override-réteg).
   ===================================================================== */
@media (min-width: 1400px) {
    .header-style-1 .recent-header .dropdown-box .review-dropdown {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
    /* A felső nyíl-jelölő is a jobb oldalhoz igazodjon (kozmetikai). */
    .header-style-1 .recent-header .dropdown-box .review-dropdown::before {
        left: auto;
        right: 24px;
        transform: rotate(45deg);
    }
}

/* =====================================================================
   TERMÉKNÉV: nincs automatikus Title Case (capitalize kikapcsolása)
   ---------------------------------------------------------------------
   A shop-demo (Kartify) product-box sablonok a termékkártya NEVÉRE
   `text-transform: capitalize`-t tesznek, ami minden szó első betűjét
   nagybetűsíti (pl. „Lewmar utólag beépíthető szellőző" -> „Lewmar
   Utólag Beépíthető Szellőző"). A terméknév az adatforrás (DB) szerinti
   írásmóddal jelenjen meg, mesterséges átalakítás nélkül. Így a valódi
   nagybetűs márkanevek és rövidítések (Lewmar, Ronstan, Minn Kota, NMEA,
   GPS, LED, PVC) és a szándékolt kisbetűk is megőrződnek.

   FONTOS: csak a TERMÉKKÁRTYA NÉV elemekre hat (kategórialista, kereső,
   kapcsolódó termékek, kötelező felszerelések kártyái, kosár-offcanvas
   tétel). NEM érinti: menü, breadcrumb, kategóriacím, gombok, oldalcímek,
   szűrők. A termékadatlap fő címén (breadcrumb h1 + right-box-contain
   .name h2) eleve NINCS capitalize, ott nem kell beavatkozni.

   Specificitás: a demo szabályokkal AZONOS (a product-box ős-osztály
   benne van), a ship-theme.css a style.css UTÁN töltődik -> a cascade
   szerint az azonos súlyú, később jövő szabály nyer. A shop-demo
   style.css NEM módosul (override-réteg).
   ===================================================================== */
.product-box-4 .product-content .name h5,
.product-box-4 .product-content .name .h5,
.product-box-5 .product-content .name,
.vertical-product-box .product-content a .name,
.vertical-sm-product .product-content a .name,
.vertical-sm-product-box .product-content a .name,
.product-white-box .product-content .name,
.product-kid-box .product-content .name {
    text-transform: none;
}

/* ==========================================================================
   328 — Kapcsolódó termékek blokk (termékoldal)
   A rács, a kártya és a gombok a meglévő Kartify (shop-demo) osztályokból
   jönnek; itt CSAK a blokk-specifikus finomhangolás van. Nincs saját
   színrendszer és nincs új komponens.
   ========================================================================== */

/* Két blokk között legyen levegő, de az elsőn ne duplázódjon a szekció-térköz. */
.ship-kapcsolodo-szekcio .ship-kapcsolodo-blokk + .ship-kapcsolodo-blokk {
    margin-top: 0;
}

/* Mobilon kevesebb kártya látszik (webshop beállítás: „Termékszám (mobil)").
   A szerver a többletkártyát ezzel az osztállyal jelöli — nincs layout-ugrás,
   és a DOM nem változik viewport-váltáskor. */
@media (max-width: 767.98px) {
    .ship-kapcsolodo-mobil-rejt {
        display: none;
    }
}

/* A „Részletek" gomb a kártyán a „Kosárba" gombbal azonos méretű és igazítású,
   hogy a vegyes (változatos + egyszerű) blokk sorai ne csússzanak el egymáshoz
   képest. A színt a téma adja (theme-bg-color), nem égetünk be hex-értéket. */
.ship-kapcsolodo-szekcio .ship-kartya-kosar .cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-decoration: none;
}

/* ==========================================================================
   329/UX — EGYSÉGES CTA-RENDSZER a termékkártyákon (.ship-cta)
   Egy helyen definiált gombhierarchia: azonos magasság, padding, tipográfia,
   ikonköz és állapotok. Használja a termékoldali kapcsolódó blokk, a kosároldali
   ajánló és a kosár offcanvas ajánló is — így nincs „szedett-vedett" gombkép.
   A színek KIZÁRÓLAG téma-tokenekből jönnek (rgba(var(--token), alfa)); nincs
   beégetett hex-érték, így a sötét téma is helyes marad.
   ========================================================================== */

.ship-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out,
                border-color 0.15s ease-in-out;
}
.ship-cta i {
    font-size: 16px;
    line-height: 1;
}
.ship-cta span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ELSŐDLEGES: „Kosárba". Tömör téma-primary háttér. A kártya-helperben a
   .theme-bg-color (!important) adja a hátteret; itt az állapotokat definiáljuk. */
.ship-cta--elsodleges {
    background-color: rgba(var(--primary-color), 1);
    color: rgba(var(--white), 1);
    border-color: rgba(var(--primary-color), 1);
}
.ship-cta--elsodleges:hover,
.ship-cta--elsodleges:focus-visible {
    background-color: rgba(var(--primary-color), 0.88) !important;
    color: rgba(var(--white), 1);
}
.ship-cta--elsodleges:active {
    background-color: rgba(var(--primary-color), 1) !important;
    transform: translateY(1px);
}

/* MÁSODLAGOS: „Részletek". Kontúros, nem versenyez a Kosárba gombbal. */
.ship-cta--masodlagos {
    background-color: transparent;
    color: rgba(var(--title-color), 1);
    border-color: rgba(var(--border-color), 1);
}
.ship-cta--masodlagos:hover,
.ship-cta--masodlagos:focus-visible {
    background-color: rgba(var(--primary-color), 0.08);
    border-color: rgba(var(--primary-color), 1);
    color: rgba(var(--primary-color), 1);
}
.ship-cta--masodlagos:active {
    transform: translateY(1px);
}

/* Billentyűzetes fókusz: mindkét változaton látható, kontrasztos gyűrű. */
.ship-cta:focus-visible {
    outline: 2px solid rgba(var(--primary-color), 1);
    outline-offset: 2px;
}

/* ==========================================================================
   329/UX — KOSÁR CROSS-SELL blokk („Hasznos kiegészítők a kosaradhoz")

   UI-forrás (shop-demo / Kartify):
     - kosároldal: `product-box-4` kártyarács — ugyanaz, amit a demo saját
       „frequently bought together" blokkja (product-bundle.html) használ,
       és amit a kategóriaoldal is renderel;
     - offcanvas:  `vertical-sm-product` kompakt sor (index-5.html).
   Itt CSAK a blokk-elrendezés és a kosár-kontextus finomhangolása van.
   ========================================================================== */

.ship-kosar-ajanlo {
    margin-top: 28px;
}

/* --- Fejléc: visszafogott, nem versenyez a „Tovább a pénztárhoz" CTA-val. --- */
.ship-kosar-ajanlo-fej {
    margin-bottom: 14px;
}
.ship-kosar-ajanlo-cim {
    margin: 0 0 4px;
    font-size: calc(16px + 3 * (100vw - 320px) / 1600);
    font-weight: 600;
    color: rgba(var(--title-color), 1);
}
.ship-kosar-ajanlo-alcim {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(var(--content-color), 1);
}

/* --- „Több termékedhez is ajánlott" — halk, nem technikai jelzés. --- */
.ship-kosar-ajanlo-jel {
    display: inline-block;
    margin-bottom: 3px;
    padding: 1px 7px;
    border-radius: 20px;
    background-color: rgba(var(--primary-color), 0.1);
    color: rgba(var(--primary-color), 1);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

/* ==========================================================================
   KOSÁROLDAL — product-box-4 kártyarács (2 / 3 / 4 oszlop)
   A kártya minden eleme a demóból jön; itt csak a kosár-kontextushoz
   kompaktáljuk, hogy ne nyomja el a kosár tartalmát, és a CTA a kártya ALJÁN,
   a kártyához tapadva üljön (ne „lebegjen" tőle elszakadva).
   ========================================================================== */

.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4-main {
    height: 100%;
}
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(var(--border-color), 1);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4:hover {
    border-color: rgba(var(--primary-color), 0.45);
    box-shadow: 0 4px 14px rgba(var(--black), 0.06);
}

/* A képkonténer megtartja a demo 103/100 arányát → nincs torzulás, nincs vágás. */
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .product-image {
    padding: 10px;
}
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .product-image img {
    object-fit: contain;
}

/* A tartalom kitölti a maradék helyet, így a CTA minden kártyán egy vonalban ül. */
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .product-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 10px 12px 12px;
}
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .product-content .name h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font-size: 13px;
    line-height: 1.3;
}
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .product-content .price,
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .ship-product-price {
    margin-bottom: 0;
    font-size: 15px;
}
/* A CTA a kártya aljára tapad. */
.ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .ship-kartya-kosar {
    margin-top: auto;
    padding-top: 10px;
}
/* A kosárban a rövid leírás és a kívánságlista-szívecske felesleges zaj. */
.ship-kosar-ajanlo .product-box-4 .product-details,
.ship-kosar-ajanlo .product-box-4 .ship-wishlist-btn {
    display: none;
}


/* ==========================================================================
   OFFCANVAS / MINI KOSÁR — kompakt ajánlósorok (vertical-sm-product)

   TERVEZÉSI ELV: „egy keret, nem három".
   A korábbi változat három egymásba ágyazott dobozt rajzolt (blokk-keret →
   sor-keret → kép-doboz), és a CTA a `.ship-cta` alap `width: 100%`-át örökölte,
   ezért teljes szélességű, magas gomb ült a név alatt. Ettől lett nehéz, zajos
   és aránytalan.

   Most:
     - a sorok NEM keretezett kártyák, hanem hajszálvékony elválasztóval
       tagolt, könnyed sorok (a mini kosár tétellistájának ritmusához igazodva);
     - a kép marad az EGYETLEN halk felület (világosszürke, keret nélkül);
     - a CTA saját oszlopban, a sor jobb szélén, kompakt pill formában.

   A kosároldali kártyaráccsal az összhangot a KÖZÖS `.ship-cta` rendszer, a
   közös téma-tokenek, a közös tipográfiai hierarchia és a közös képkezelés
   (object-fit: contain) tartja. A mini kosár ennek a tömörebb változata.
   ========================================================================== */

.ship-kosar-ajanlo-li {
    display: block;
    list-style: none;
    padding: 0;
}

/* A blokk EGYETLEN elválasztója: egy hajszálvékony vonal a tétellista alatt. */
.ship-kosar-ajanlo--kompakt {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--border-color), 1);
}
.ship-kosar-ajanlo--kompakt .ship-kosar-ajanlo-fej {
    margin-bottom: 6px;
}
.ship-kosar-ajanlo--kompakt .ship-kosar-ajanlo-cim {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(var(--content-color), 1);
}

.ship-kosar-ajanlo-sorok {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- A SOR: nincs keret, nincs radius. Csak ritmus és levegő. --- */
.ship-kosar-ajanlo-sor {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 6px;
    margin: 0 -6px;              /* a hover-felület a sáv széléig ér */
    border: 0;
    border-radius: 8px;
    transition: background-color 0.15s ease-in-out;
}
/* Finom elválasztás a sorok között — az ELSŐ sor fölé nem kell, ott a blokk-vonal van. */
.ship-kosar-ajanlo-sor + .ship-kosar-ajanlo-sor {
    border-top: 1px solid rgba(var(--border-color), 0.65);
}
.ship-kosar-ajanlo-sor:hover {
    background-color: rgba(var(--content-color), 0.035);
}

/* --- KÉP: az egyetlen halk felület. Keret nélkül, konzisztens képaránnyal. --- */
.ship-kosar-ajanlo-sor .product-image {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 5px;
    border: 0;
    border-radius: 8px;
    background-color: rgba(var(--light-gray), 1);
}
.ship-kosar-ajanlo-sor .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* A demo hover-effektje (scale + rotate) ilyen kis képen zavaró lenne. */
.ship-kosar-ajanlo-sor:hover .product-image img {
    transform: none;
}

/* --- SZÖVEG: név + ár, tömör, kiegyensúlyozott hierarchia. --- */
.ship-kosar-ajanlo-sor .product-content {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.ship-kosar-ajanlo-nev {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 2px;
    font-size: 12.5px;
    line-height: 1.32;
    font-weight: 500;
    color: rgba(var(--title-color), 1);
}
.ship-kosar-ajanlo-ar {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(var(--title-color), 1);
}
.ship-kosar-ajanlo-ar del {
    margin-left: 5px;
    font-size: 11.5px;
    font-weight: 400;
    opacity: 0.55;
}

/* --- „Több termékedhez is ajánlott": halk, apró jelzés. --- */
.ship-kosar-ajanlo--kompakt .ship-kosar-ajanlo-jel {
    margin-bottom: 2px;
    padding: 0;
    background-color: transparent;
    font-size: 10.5px;
    letter-spacing: 0.02em;
}

/* --- CTA-OSZLOP: saját sáv a sor jobb szélén. --- */
.ship-kosar-ajanlo-akcio {
    flex: 0 0 auto;
    margin-left: 2px;
}

/* A mini kosár CTA-ja SOKKAL kisebb, mint a kártyarácsé: automatikus szélesség,
   alacsonyabb, pill forma. A `.ship-cta` alapból 100% széles és 38px magas —
   az a kosároldali kártyán helyes, itt szétnyomná a sort. */
.ship-kosar-ajanlo--kompakt .ship-cta {
    width: auto;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
}
.ship-kosar-ajanlo--kompakt .ship-cta i {
    font-size: 14px;
}

/* Másodlagos („Részletek"): keret helyett halk tónus — kevesebb vonal, kevesebb zaj. */
.ship-kosar-ajanlo--kompakt .ship-cta--masodlagos {
    background-color: rgba(var(--content-color), 0.07);
    border-color: transparent;
    color: rgba(var(--title-color), 1);
    padding-inline: 11px 8px;    /* a nyíl-ikon jobb oldalon kevesebb helyet kér */
}
.ship-kosar-ajanlo--kompakt .ship-cta--masodlagos:hover,
.ship-kosar-ajanlo--kompakt .ship-cta--masodlagos:focus-visible {
    background-color: rgba(var(--primary-color), 0.1);
    border-color: transparent;
    color: rgba(var(--primary-color), 1);
}

/* ==========================================================================
   MOBIL
   ========================================================================== */

@media (max-width: 575.98px) {
    .ship-kosar-ajanlo {
        margin-top: 22px;
    }
    /* Kosároldal: két oszlop marad (row-cols-2), szorosabb belső térközzel. */
    .ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .product-content {
        padding: 8px 10px 10px;
    }
    .ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .product-box-4 .product-content .name h5 {
        font-size: 12.5px;
    }
    .ship-kosar-ajanlo:not(.ship-kosar-ajanlo--kompakt) .ship-cta {
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Mini kosár: a sáv keskenyebb, ezért a CTA még tömörebb, de az érintési
       felület 30px magas + 8px függőleges sor-padding marad kényelmes. */
    .ship-kosar-ajanlo--kompakt .ship-cta {
        padding: 5px 9px;
        font-size: 11.5px;
    }
    .ship-kosar-ajanlo-sor {
        gap: 9px;
        padding: 10px 6px;
    }
    .ship-kosar-ajanlo-sor .product-image {
        width: 48px;
        height: 48px;
    }
}

/* Nagyon keskeny sávon (kis mobil) a „Részletek" felirat elfér, de a „Kosárba"
   ikonja már felesleges — a felirat a fontos. */
@media (max-width: 359.98px) {
    .ship-kosar-ajanlo--kompakt .ship-cta i {
        display: none;
    }
}

/* =====================================================================
 * TERMÉKOLDALI KAPITÁNY / ÉLŐ CHAT KÉRDEZÉSI BLOKK (336)
 * Döntéstámogató CTA a termékadatlapon (a kosárgomb alatt). Visszafogott,
 * prémium, hajós hangulatú. A CTA a MEGLÉVŐ lebegő Kapitány widgetet nyitja meg
 * termékkontextussal — nem külön chat. Önálló, hex-alapú tokenek (téma-független,
 * mindig olvasható). A zöld pont + „élő" szöveg CSAK élő állapotban renderelődik.
 * ===================================================================== */
/* 336-hotfix elrendezés: FÜGGŐLEGES kártya (nem vízszintes flex). A blokk a szűk
   (~360 px) jobb termékoszlopban él, ahol a vízszintes flex a gombot és a szöveget
   egymásra torlaszolta (a cím szavanként tört). Konténer-robusztus megoldás: a fejléc
   (ikon + szöveg) egy sor, a gomb ALATTA teljes szélességben — nem a viewportra bízzuk. */
.ship-termek-chat {
    --stc-navy:    #032A55;
    --stc-cyan:    #038FAE;
    --stc-surface: #FFFFFF;
    --stc-text:    #0B1220;
    --stc-muted:   #5A6B7B;
    --stc-border:  #D8E2EA;
    --stc-mist:    #EEF6F8;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--stc-border);
    border-radius: 14px;
    background: var(--stc-mist);
    box-shadow: 0 4px 14px rgba(3, 42, 85, 0.06);
}
/* Fejléc: ikon + szöveg egy sorban. A szöveg min-width:0 → NORMÁL sortörés (nem szavanként). */
.ship-termek-chat-fej {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ship-termek-chat-ikon {
    position: relative;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--stc-navy), var(--stc-cyan));
    color: #fff;
    font-size: 22px; line-height: 1;
}
.ship-termek-chat-pont {
    position: absolute; right: -1px; bottom: -1px;
    width: 13px; height: 13px; border-radius: 50%;
    background: #22C55E; border: 2px solid var(--stc-surface);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
}
.ship-termek-chat-pont--pulz { animation: shipTermekChatPulz 2.2s ease-out infinite; }
@keyframes shipTermekChatPulz {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.ship-termek-chat-szoveg { flex: 1 1 auto; min-width: 0; }
.ship-termek-chat-cim {
    font-weight: 700; color: var(--stc-text);
    font-size: 15px; line-height: 1.3; text-transform: none;
    overflow-wrap: break-word; word-break: normal;
}
.ship-termek-chat-alcim {
    color: var(--stc-muted); font-size: 13px; line-height: 1.35;
    margin-top: 2px; text-transform: none;
    overflow-wrap: break-word; word-break: normal;
}
/* A gomb saját sorban, TELJES szélességben — sosem fedi/torlaszolja a szöveget. */
.ship-termek-chat-gomb {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--stc-navy), var(--stc-cyan));
    color: #fff; border: none; border-radius: 10px;
    padding: 11px 16px; font-weight: 600; font-size: 14px;
    line-height: 1.2; text-align: center; white-space: normal;
    transition: filter .15s ease, transform .15s ease;
}
.ship-termek-chat-gomb:hover { color: #fff; filter: brightness(1.07); transform: translateY(-1px); }
.ship-termek-chat-gomb:focus-visible { outline: 3px solid rgba(1, 173, 176, 0.5); outline-offset: 2px; }
/* Élő állapot: zöldes akcentus (a bizalomért), de visszafogottan. */
.ship-termek-chat--elo .ship-termek-chat-ikon { background: linear-gradient(135deg, #0F7A3D, #22C55E); }
.ship-termek-chat--elo .ship-termek-chat-gomb { background: linear-gradient(135deg, #0F7A3D, #1EA54F); }
/* Mozgáscsökkentés: ne pulzáljon a státuszpont. */
@media (prefers-reduced-motion: reduce) {
    .ship-termek-chat-pont--pulz { animation: none !important; }
}

/* =====================================================================
   341 — NÉPSZERŰ TERMÉKEK: kártya-badge, adatlap-badge, promó-sáv.
   Vizuális nyelv: telített borostyán/arany pill FEHÉR szöveggel — az akciós
   piros pill mintájára (azonos „telített szín + fehér" recept, jó kontraszt
   világos ÉS sötét témában is; a színek FIX hex-ek, nem token → dark mode-ban
   sem billennek át). A háttér szándékosan MÉLYEBB aranybarna (#d67600), hogy a
   fehér szöveg jól olvasható legyen (a világos --rating aranyon a fehér halvány
   lenne). Prioritás (Szezonban keresett > Sokan választják > Népszerű) szerver-
   oldalon dől el; forrás-specifikus ikon, egységes pill.
   ===================================================================== */

/* JOBB FELSŐ badge-verem: a Népszerű (marketing) és a További kivitelek (struktúra)
   badge EGYMÁS ALATT, jobbra igazítva — nem fedik egymást, mobilon sem csúsznak szét. A
   veremben a badge-ek pozíciója STATIKUS (a verem pozicionál); a --image abszolút szabályát
   a veremben felülírjuk. A kívánságlista-szív a jobb ALSÓ sarokban van → nincs ütközés. */
.ship-kartya-badge-stack {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: calc(100% - 16px);
  pointer-events: none;
}
.ship-kartya-badge-stack > .ship-nepszeru-badge--image,
.ship-kartya-badge-stack > .ship-variant-count-badge--image {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  max-width: 100%;
}

/* Termékkártya badge (kategória/lista): a kép JOBB felső sarka (az akció-badge a bal). */
.ship-nepszeru-badge--image {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: #d67600;      /* mély borostyán/arany */
  color: #ffffff;                 /* FEHÉR szöveg (mint az akciós pillen) */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.ship-nepszeru-badge--image i { font-size: 13px; line-height: 1; color: #ffffff; }
/* Forrás-variánsok: a szezonális megkülönböztető melegebb narancs, fehér szöveggel. */
.ship-nepszeru-badge--bestseller { background-color: #d67600; }
.ship-nepszeru-badge--szezon     { background-color: #c2410c; }
.ship-nepszeru-badge--kezi       { background-color: #d67600; }

/* Termékadatlap nagy kép badge: BAL felső sarok (az akció-badge a jobb felsőt foglalja). */
.ship-kep-nepszeru-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background-color: #d67600;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.ship-kep-nepszeru-badge.ship-nepszeru-badge--szezon { background-color: #c2410c; }
.ship-kep-nepszeru-badge i { font-size: 15px; line-height: 1; color: #ffffff; }

/* Népszerű termékek promó-sáv (az akciós sáv mintája; arany kiemelés). */
.ship-nepszeru-sav { margin-bottom: 8px; }
.ship-nepszeru-sav .ship-nepszeru-sav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background-color: transparent;
}
.ship-nepszeru-sav .ship-nepszeru-sav-link:focus-visible {
  outline: 2px solid rgba(214, 118, 0, 0.6);
  outline-offset: 1px;
}
.ship-nepszeru-sav .ship-nepszeru-sav-link h5 {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}
.ship-nepszeru-sav .ship-nepszeru-sav-link--aktiv h5 { font-weight: 600; }
/* A sáv-ikon a panel FEHÉR hátterén ül → mély borostyán (nem fehér), hogy látszódjon. */
.ship-nepszeru-sav .ship-nepszeru-sav-ikon {
  flex: 0 0 auto;
  color: #d67600;
  font-size: 18px;
  line-height: 1;
}
/* A pulzáló „Top" pill: telített borostyán háttér + FEHÉR szöveg (az akciós „Akció" mintája). */
.ship-nepszeru-sav .ship-nepszeru-pont {
  display: inline-block;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background-color: #d67600;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.5;
  vertical-align: middle;
  animation: shipNepszeruPulzal 1.8s ease-in-out infinite;
}
@keyframes shipNepszeruPulzal {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 118, 0, 0.45); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(214, 118, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ship-nepszeru-sav .ship-nepszeru-pont { animation: none; }
}

/* Népszerű termékek oldal: fejléc ritmus + üres állapot ikon szín. */
.ship-nepszeru-oldal .ship-kereses-fomezo { margin-bottom: 18px; }
.ship-nepszeru-oldal .ship-nepszeru-bevezeto { max-width: 760px; }
.ship-nepszeru-oldal .ship-nepszeru-ures h3 i { color: #d67600; }

/* =====================================================================
   VÉGTELEN TERMÉKFOLYAM (ship-termek-folyam.js) — skeleton töltésjelző,
   felfedező átvezető, hiba+újrapróbálom. Téma-token alapú (light/dark biztos).
   ===================================================================== */
.ship-folyam { width: 100%; }
/* A sentinel a rács ALJÁN: láthatatlan trigger az IntersectionObservernek. */
.ship-folyam-sentinel { width: 100%; height: 1px; }

/* Skeleton (betöltés közben LÁTHATÓ) — a termékkártya arányát idézi. */
.ship-folyam-skeleton { margin-top: 4px; }
.ship-skeleton-card {
  border-radius: 12px;
  padding: 10px;
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--content-color), 0.10);
}
.ship-skeleton-img,
.ship-skeleton-line,
.ship-skeleton-price {
  border-radius: 8px;
  background-image: linear-gradient(90deg,
    rgba(var(--content-color), 0.07) 25%,
    rgba(var(--content-color), 0.15) 37%,
    rgba(var(--content-color), 0.07) 63%);
  background-size: 400% 100%;
  animation: shipFolyamShimmer 1.4s ease infinite;
}
.ship-skeleton-img { aspect-ratio: 1 / 1; width: 100%; margin-bottom: 12px; }
.ship-skeleton-line { height: 12px; margin-bottom: 8px; }
.ship-skeleton-line.rovid { width: 60%; }
.ship-skeleton-price { height: 18px; width: 45%; margin-top: 10px; }
@keyframes shipFolyamShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Finom átvezető felirat a felfedező fázis előtt (nem „vége" üzenet). */
.ship-folyam-atvezeto {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 28px 0 18px;
  color: rgba(var(--content-color), 0.8);
  font-size: 14px;
  font-weight: 600;
}
.ship-folyam-atvezeto::before,
.ship-folyam-atvezeto::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(var(--content-color), 0.16);
}
.ship-folyam-atvezeto span { white-space: nowrap; }

/* Betöltési hiba: kulturált üzenet + „Újrapróbálom". */
.ship-folyam-hiba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 22px 16px;
  margin-top: 8px;
  color: rgba(var(--content-color), 0.9);
}
.ship-folyam-hiba i { font-size: 22px; color: rgba(var(--primary-color), 1); }

@media (prefers-reduced-motion: reduce) {
  .ship-skeleton-img,
  .ship-skeleton-line,
  .ship-skeleton-price { animation: none; }
}

/* =====================================================================
   DESKTOP OLDALSÓ „KATEGÓRIÁK" FÜL (350)
   ---------------------------------------------------------------------
   Diszkrét, rögzített, KIZÁRÓLAG asztali (>=992px) oldalsó fül a bal
   képernyőszélen. Csak akkor jelenik meg, amikor a fejléc kategóriasáv
   (.nav-header) már kigörgött a képből — ezt a meglévő sticky-header
   állapot (script.js) jelzi: a <header> ekkor kapja meg a .sticky-header
   osztályt. A fül kattintásra a MEGLÉVŐ #categoryCanvas offcanvast nyitja
   (ship-kategoria-ful.js) — nincs új kategória-adatforrás, nincs duplikálás.

   Mobil: teljesen elrejtve (a mobil hamburger kategórianavigáció érintetlen).
   A szín-tokenek RGB-hármasok -> rgba(var(--token), a) alakban.
   ===================================================================== */
.ship-kat-ful {
  display: none; /* alap: rejtve; a desktop media query kapcsolja be */
}

@media (min-width: 992px) {
  .ship-kat-ful {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    left: 0;
    top: 50%;
    /* Alaphelyzet: a képernyő bal széle mögé csúsztatva, rejtve. A sticky
       (kigörgetett kategóriasáv) állapot csúsztatja be. */
    transform: translate(-100%, -50%);
    z-index: 1030; /* az offcanvas-panel (1045) alatt -> nyitáskor eltűnik mögötte */
    padding: 14px 7px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border: none;
    border-radius: 0 12px 12px 0;
    background-color: rgba(var(--primary-color), 0.92); /* navy, enyhén áttetsző */
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    box-shadow: 2px 2px 12px rgba(var(--title-color), 0.22);
    transition: transform 0.28s ease, opacity 0.28s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .ship-kat-ful .ship-kat-ful-ikon {
    font-size: 17px;
    line-height: 1;
  }

  /* Görgetés után (kategóriasáv eltűnt): finoman becsúszik és aktívvá válik. */
  header.sticky-header ~ .ship-kat-ful {
    transform: translate(0, -50%);
    opacity: 1;
    pointer-events: auto;
  }

  /* Hoverre enyhe kiemelés: pár px kicsúszás + kicsit erősebb szín/árnyék. */
  header.sticky-header ~ .ship-kat-ful:hover {
    transform: translate(3px, -50%);
    background-color: rgba(var(--primary-color), 1);
    box-shadow: 4px 4px 16px rgba(var(--title-color), 0.3);
  }

  /* Billentyűzet-fókusz: jól látható, akadálymentes fókuszgyűrű. */
  .ship-kat-ful:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    opacity: 1;
    pointer-events: auto;
    transform: translate(3px, -50%);
  }

  /* Ne legyen zavaró, amíg más overlay/offcanvas/modal/kereső van nyitva:
     ilyenkor visszacsúszik és inaktív. (:has – modern desktop böngészők.) */
  body:has(.offcanvas.show) header.sticky-header ~ .ship-kat-ful,
  body:has(.modal.show) header.sticky-header ~ .ship-kat-ful,
  body:has(.search-overlay.show) header.sticky-header ~ .ship-kat-ful {
    opacity: 0;
    pointer-events: none;
    transform: translate(-100%, -50%);
  }
}

/* Sötét mód: a navy token dark-témában is olvasható marad (fehér szöveg). */
body.dark .ship-kat-ful {
  background-color: rgba(var(--primary-color), 0.95);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .ship-kat-ful { transition: opacity 0.2s ease; }
  header.sticky-header ~ .ship-kat-ful { transform: translate(0, -50%); }
}