/* =====================================================================
   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; }
}

/* --- 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);
}

/* „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;
  }
}

/* =====================================================================
   182 — „TERMÉKEINK" gyors-belépő a hamburger (mobil/tablet) menüben.
   A meglévő #categoryCanvas kategória-offcanvast nyitja (ship-termekeink-
   menu.js). A markup d-xl-none, ezért CSAK xl ALATT (mobil/tablet) látszik —
   a desktop vízszintes navbart NEM érinti. Token-alapú színek, NEM új layout:
   egy kiemelt, jól elkülönített menüsor a menü tetején.
     - szöveg: --title-color (világos/sötét módban is olvasható; flip-tokent
       a sablon body.dark kezeli),
     - akcent (bal sáv + ikon + chevron): --light-blue (hajós „víz"/hover szín,
       mindkét háttéren kontrasztos),
     - elválasztás: alsó szegély a többi menüponttól.
   ===================================================================== */
.ship-termekeink-menu {
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(var(--content-color), 0.18);
}
.ship-termekeink-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--light-blue), 0.35);
  border-left: 4px solid rgba(var(--light-blue), 1);
  background-color: rgba(var(--light-blue), 0.10);
  color: rgba(var(--title-color), 1);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.ship-termekeink-link:hover,
.ship-termekeink-link:focus,
.ship-termekeink-link:focus-visible,
.ship-termekeink-link.active {
  background-color: rgba(var(--light-blue), 0.18);
  border-color: rgba(var(--light-blue), 0.55);
  color: rgba(var(--title-color), 1);
  text-decoration: none;
}
.ship-termekeink-link .ship-termekeink-ikon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(var(--light-blue), 1);
}
.ship-termekeink-link span {
  flex: 1 1 auto;
}
.ship-termekeink-link .ship-termekeink-chevron {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(var(--light-blue), 1);
  opacity: 0.85;
}

/* ============================================================
   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; }
}