/* ==========================================================================
   SZD Theme – main.css
   Minimál, funkcionális alap-elrendezés. NEM dizájn — csak annyi, hogy a
   staging használható legyen. A tényleges kinézet a PS-elrendezés alapján épül.
   ========================================================================== */

/* --- Layout segédek --------------------------------------------------------- */
.container,
.woo-container,
.site-header__inner,
.site-footer__inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 16px;
}

.site-content { padding-block: 24px; }

/* --- Kisegítő ----------------------------------------------------------------*/
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 8px 16px;
	background: #fff;
}
.skip-link:focus { left: 0; }

/* --- Fejléc ------------------------------------------------------------------*/
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 12px;
}
.site-title { margin: 0; font-size: 20px; }
.site-title a { text-decoration: none; }
.main-navigation { flex: 1; }
.main-navigation ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.main-navigation a { text-decoration: none; }
.site-header__tools { margin-left: auto; }

/* --- Termékrács (kategória) --------------------------------------------------*/
ul.products {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
ul.products li.szd-product-card { min-width: 0; }

@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	ul.products { grid-template-columns: 1fr; }
}

/* --- Termékoldal -------------------------------------------------------------
   FIGYELEM: a `.szd-single-product` NEM lehet 2 oszlopos rács!
   Egyetlen érdemi gyereke a `.product_container`, ami MAGA a 2 oszlop.
   Ha itt is rácsot csinálunk, a tartalom a bal félbe szorul, a jobb oldal
   üresen marad, a belső rács pedig negyed szélességű oszlopokat ad.
   ------------------------------------------------------------------------- */
.szd-single-product {
	display: block;
}
.szd-single-product .woocommerce-tabs,
.szd-single-product .related,
.szd-single-product .upsells {
	grid-column: 1 / -1;
}
@media (max-width: 768px) {
	.szd-single-product { grid-template-columns: 1fr; }
}

/* --- Lábléc ------------------------------------------------------------------*/
.site-footer {
	margin-top: 48px;
	padding-block: 24px;
	border-top: 1px solid #e5e5e5;
}
.footer-navigation ul {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.site-info { font-size: 14px; }

/* ==========================================================================
   TERMÉKOLDAL (single product) – PS AngarTheme elrendezés, alap stílusok.
   Csak szerkezet/olvashatóság; a végleges színvilág külön lépésben jön.
   ========================================================================== */

/* Breadcrumb */
.woocommerce-breadcrumb {
	margin-block: 12px 20px;
	font-size: 13px;
}
.woocommerce-breadcrumb ol {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.woocommerce-breadcrumb li:not(:last-child)::after {
	content: "›";
	margin-left: 6px;
	opacity: .5;
}
.woocommerce-breadcrumb a { text-decoration: none; }

/* 2 oszlopos elrendezés */
.szd-single-product .product_container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.szd-single-product .product_left,
.szd-single-product .product_right { min-width: 0; }

@media (max-width: 768px) {
	.szd-single-product .product_container { grid-template-columns: 1fr; }
}

/* A tabok / kapcsolódó termékek a rács alatt teljes szélességben */
.szd-single-product .woocommerce-tabs,
.szd-single-product .related,
.szd-single-product .upsells { margin-top: 40px; }

/* Cím */
.szd-single-product .product_title {
	margin: 0 0 12px;
	font-size: 24px;
}

/* Kép-megjegyzés */
.szd-image-note {
	margin-top: 6px;
	font-size: 11px;
	opacity: .8;
}

/* Meta: Cikkszám + Gyártó */
.szd-product-meta {
	font-size: 13px;
	margin-bottom: 12px;
}
.szd-product-meta .product-reference_top { margin-bottom: 2px; }
.szd-product-meta .label { font-weight: 600; }

/* Rövid leírás */
.szd-single-product .product_desc { margin: 8px 0 12px; }

/* Ár – a tényleges kiemelt dobozt lentebb a `.szd-single-product .price`
   szabály adja (egyesített ár + ÁFA sáv). Itt csak a wrapper. */
.product-prices { margin: 14px 0; }
.tax-shipping-delivery-label { font-size: 12px; opacity: .8; }

/* Készlet-infó */
.szd-stock-info { margin: 8px 0; font-size: 12px; }
.szd-stock-info__title { font-weight: 600; }
.availability-list-in-stock { color: #1a7f37; }
.availability-list-out-of-stock { color: #b35900; }

/* Értékelés */
.szd-rating { margin-top: 16px; font-size: 13px; }
.szd-rating__value { font-weight: 700; }
.szd-rating__link { display: inline-block; margin-top: 6px; }

/* Tabok (alap – Woo saját markupját használja) */
.woocommerce-tabs .tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 1px solid #e5e5e5;
}
.woocommerce-tabs .tabs li a {
	display: block;
	padding: 8px 14px;
	text-decoration: none;
}
.woocommerce-tabs .tabs li.active a {
	border-bottom: 2px solid currentColor;
	font-weight: 600;
}

/* ==========================================================================
   TERMÉKKÁRTYA a kategórialistában (PS product-miniature paritás).
   ========================================================================== */
.szd-product-card {
	list-style: none;
	display: flex;
	flex-direction: column;
}
.szd-product-card .thumbnail-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 10px;
	background: #fff;
}
.szd-product-card .product-thumbnail { display: block; text-decoration: none; }
.szd-product-card .product-thumbnail img { margin: 0 auto; }
.szd-card-sku { font-size: 10px; opacity: .8; margin-top: 4px; text-align: center; }

.szd-product-card .product-right {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-top: 8px;
}
.szd-product-card .product-title {
	font-size: 14px;
	line-height: 1.3;
	margin: 0 0 6px;
}
.szd-product-card .product-title a { text-decoration: none; }

.szd-card-stock { font-size: 11px; margin-bottom: 6px; }
.szd-product-card .product-desc {
	font-size: 12px;
	opacity: .85;
	margin: 0 0 8px;
}

/* Az árblokk a kártya aljára tapad */
.szd-product-card .product-bottom { margin-top: auto; }
.szd-product-card .product-price-and-shipping .price {
	font-size: 18px;
	font-weight: 700;
	color: #e2001a;
}

/* =============================================================================
   ELRENDEZÉS: bal oldali menü + tartalom
   ========================================================================== */

.szd-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 24px;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
	align-items: start;
}

/* Ha nincs oldalsáv (szd_show_sidebar = false) */
/*
 * Ha az oldalsáv nem renderelődött, a rács egy oszlop.
 *
 * ⚠️ A `.szd-blog-layout` KIVÉTEL: annak saját oldalsávja van
 * (`.szd-blog-sidebar`), amit ez a `:has()` nem lát.
 */
.szd-layout:not(.szd-blog-layout):not(:has(.szd-sidebar)) {
	grid-template-columns: minmax(0, 1fr);
}

.szd-layout__main { min-width: 0; }

/* A belső konténerek már nem korlátozzák a szélességet, a layout teszi */
.szd-layout__main .woo-container {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}

@media (max-width: 900px) {
	.szd-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.szd-sidebar {
		order: 2; /* mobilon a tartalom alá */
	}
}

/* =============================================================================
   FELSŐ VÍZSZINTES MENÜ (egyedi linkek)
   ========================================================================== */

.szd-topbar {
	border-block: 1px solid #e3e3e3;
	background: #fff;
}

.szd-topbar__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
}

.szd-topbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.szd-topbar__list a {
	display: block;
	padding: 12px 0;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.szd-topbar__list a:hover { text-decoration: underline; }

/* =============================================================================
   BAL OLDALI KATEGÓRIAMENÜ
   ========================================================================== */

.szd-sidebar {
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
	position: sticky;
	top: 16px;

	/* FIGYELEM: itt NEM lehet `overflow: hidden`.
	   A megamenü panelje `position:absolute; left:100%` – vagyis kilóg
	   az oldalsávból. Az overflow:hidden levágná, és úgy tűnne,
	   mintha a hover nem működne. */
	overflow: visible;

	/* A panel a tartalom fölé kerüljön */
	z-index: 20;
}

.szd-sidebar__title {
	padding: 12px 16px;
	font-weight: 700;
	font-size: 15px;
	border-bottom: 1px solid #e3e3e3;
	background: #f7f7f7;
}

.szd-sidebar__list,
.szd-sidebar__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.szd-sidebar__list li { border-bottom: 1px solid #f0f0f0; }
.szd-sidebar__list li:last-child { border-bottom: 0; }

.szd-sidebar__list a {
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	text-decoration: none;
	line-height: 1.35;
}

.szd-sidebar__list a:hover { background: #f7f7f7; }

/* Almenük behúzása */
.szd-sidebar__list ul a { padding-left: 32px; font-size: 13px; }
.szd-sidebar__list ul ul a { padding-left: 48px; }

.szd-sidebar__list .current-menu-item > a,
.szd-sidebar__list .current-menu-ancestor > a {
	font-weight: 700;
}

/* Helykitöltő szöveg – csak adminnak látszik */
.szd-menu-placeholder {
	margin: 0;
	padding: 12px 16px;
	font-size: 13px;
	color: #777;
	background: #fffbe6;
	border: 1px dashed #e0d48a;
}

/* =============================================================================
   KATEGÓRIAFA (bal oldal)
   ========================================================================== */

.szd-cats__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.szd-cats__item { border-bottom: 1px solid #f0f0f0; }
.szd-cats__list--depth-1 > .szd-cats__item:last-child { border-bottom: 0; }

.szd-cats__row {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.szd-cats__link {
	flex: 1;
	min-width: 0;
	padding: 9px 12px 9px 4px;
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
	color: inherit;
}

.szd-cats__row:hover { background: #f7f7f7; }

.szd-cats__item.is-current > .szd-cats__row > .szd-cats__link {
	font-weight: 700;
}

/* +/- gomb */
.szd-cats__toggle {
	flex: 0 0 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: #666;
	font-family: inherit;
}

.szd-cats__toggle:hover { color: #000; }
.szd-cats__toggle--empty { cursor: default; }

.szd-cats__item.is-loading > .szd-cats__row > .szd-cats__toggle {
	opacity: .4;
}

/* Almenük: csak nyitott ágon látszanak */
.szd-cats__item > .szd-cats__list { display: none; }
.szd-cats__item.is-open > .szd-cats__list { display: block; }

/* Behúzás szintenként */
.szd-cats__list--depth-2 .szd-cats__link { padding-left: 12px; font-size: 13px; }
.szd-cats__list--depth-3 .szd-cats__link { padding-left: 24px; font-size: 13px; }
.szd-cats__list--depth-4 .szd-cats__link { padding-left: 36px; font-size: 12.5px; }
.szd-cats__list--depth-5 .szd-cats__link { padding-left: 48px; font-size: 12.5px; }

.szd-cats__list .szd-cats__list {
	border-top: 1px solid #f0f0f0;
	background: #fcfcfc;
}

/* =============================================================================
   MEGAMENÜ
   ========================================================================== */

.szd-mega__list { margin: 0; padding: 0; list-style: none; }

.szd-mega__item { position: relative; border-bottom: 1px solid #f0f0f0; }
.szd-mega__item:last-child { border-bottom: 0; }

.szd-mega__link {
	display: block;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.szd-mega__item.has-panel > .szd-mega__link::after {
	content: "›";
	float: right;
	color: #999;
}

.szd-mega__item:hover > .szd-mega__link,
.szd-mega__item.is-open > .szd-mega__link { background: #f2f6fb; }

/* --- A kinyíló panel --- */
.szd-mega__panel {
	display: none;
	position: absolute;
	z-index: 60;
	background: #fff;
	border: 1px solid #dfe3e8;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	padding: 18px 20px;
	min-width: 640px;
	max-width: 900px;
	max-height: 70vh;
	overflow-y: auto;
}

.szd-mega__item.is-open > .szd-mega__panel { display: block; }

/* Oldalsáv mód: oldalra nyílik */
.szd-mega--sidebar .szd-mega__panel { top: -1px; left: 100%; }

/* Legördülő mód: a panel a listától jobbra */
.szd-mega--dropdown .szd-mega__panel { top: -1px; left: 100%; }

.szd-mega__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px 28px;
	align-items: start;
}

.szd-mega__col { break-inside: avoid; margin-bottom: 14px; }

.szd-mega__col-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 5px;
	margin-bottom: 6px;
}

.szd-mega__col-link { text-decoration: none; color: #333; }
.szd-mega__col-link:hover { text-decoration: underline; }

.szd-mega__sublist { margin: 0; padding: 0; list-style: none; }

.szd-mega__sublink {
	display: block;
	padding: 3px 0;
	font-size: 13px;
	color: #1c62b9;
	text-decoration: none;
}
.szd-mega__sublink:hover { text-decoration: underline; }

/* --- Badge --- */
.szd-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 5px;
	border-radius: 2px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	color: #fff;
	vertical-align: middle;
}
.szd-badge--kiemelt { background: #e02b2b; }
.szd-badge--uj      { background: #2fa84f; }
.szd-badge--akcio   { background: #f08018; }

/* =============================================================================
   FELSŐ SÁV: "Termék főkategóriák" gomb + legördülő
   ========================================================================== */

.szd-topbar__inner {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.szd-topbar__trigger { position: relative; flex: 0 0 auto; }

.szd-topbar__trigger-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 14px 22px;
	border: 0;
	background: #5e696e;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.szd-topbar__trigger-icon {
	width: 16px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

.szd-topbar__dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 280px;
	background: #fff;
	border: 1px solid #dfe3e8;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.szd-topbar__trigger.is-open .szd-topbar__dropdown { display: block; }

.szd-topbar__nav { flex: 1; min-width: 0; }

@media (max-width: 900px) {
	.szd-mega__panel {
		position: static;
		min-width: 0;
		max-width: none;
		box-shadow: none;
		border: 0;
		border-top: 1px solid #eee;
		padding: 10px 14px;
	}
	.szd-mega__cols { grid-template-columns: 1fr; }
	.szd-topbar__inner { flex-wrap: wrap; }
}

/* Nem kattintható menüelem (a PS-ben is az volt) */
.szd-mega__link.is-not-clickable,
.szd-mega__col-title span.is-not-clickable {
	cursor: default;
	color: #888;
}

/* =============================================================================
   MEGAMENÜ PANEL – kilógás és rétegzés javítása
   -----------------------------------------------------------------------------
   Az oldalsáv `position: sticky`, ami saját rétegkontextust hoz létre.
   A panelnek a fő tartalom FÖLÉ kell kerülnie, és nem szabad levágni.
   ========================================================================== */

/* A rács ne vágja le a kilógó panelt */
.szd-layout { overflow: visible; }

/* A sáv és a benne lévő elemek rétegei */
.szd-sidebar .szd-mega { position: relative; }
.szd-sidebar .szd-mega__item { position: relative; }

/* Az oldalsáv-mód panelje: közvetlenül az elem mellé, a tartalom fölé */
.szd-mega--sidebar .szd-mega__panel {
	top: -1px;
	left: calc(100% + 1px);
	z-index: 100;
}

/* A legördülő-mód panelje ugyanígy, de a legördülő dobozhoz képest */
.szd-mega--dropdown .szd-mega__panel {
	top: -1px;
	left: calc(100% + 1px);
	z-index: 100;
}

/* Hézag-áthidalás: az elem és a panel közti 1px-en ne csukódjon be.
   (Az egérnek van ~180ms türelmi ideje, de a láthatatlan híd biztosabb.) */
.szd-mega__item.has-panel::after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 8px;
	height: 100%;
}

/* A fő tartalom maradjon a panel alatt */
.szd-layout__main { position: relative; z-index: 1; }

@media (max-width: 900px) {
	.szd-mega--sidebar .szd-mega__panel,
	.szd-mega--dropdown .szd-mega__panel {
		position: static;
		left: auto;
	}
	.szd-mega__item.has-panel::after { display: none; }
}

/* =============================================================================
   MEGAMENÜ PANEL – balra nyitás, ha jobbra nem fér el
   -----------------------------------------------------------------------------
   A `panel-left` osztályt a JS teszi rá, miután megmérte a helyet.
   A függőleges eltolást (felfelé nyitás) a JS inline `top` értékkel oldja meg.
   ========================================================================== */

.szd-mega__item.panel-left > .szd-mega__panel {
	left: auto;
	right: calc(100% + 1px);
}

/* A hover-híd is átkerül a másik oldalra */
.szd-mega__item.panel-left::after {
	left: auto;
	right: 100%;
}

/* Sima átcsúszás, amikor a panel felfelé igazodik */
.szd-mega__panel { transition: top .08s ease-out; }

/* =============================================================================
   TERMÉKRÁCS – a WooCommerce alap-stíluslap felülírása
   -----------------------------------------------------------------------------
   A WooCommerce `woocommerce-layout.css` a listaelemekre ezt teszi:
       ul.products li.product { float: left; width: 22.05%; margin-right: 3.8%; }
   Ez FLOAT-alapú elrendezés. A mi `ul.products` viszont CSS Grid, így a 22.05%
   a RÁCS-OSZLOP 22%-a lesz -> ~70px széles kártyák.

   Ezért a rácson belül semlegesítjük a float-ot és a százalékos szélességet.
   ========================================================================== */

ul.products {
	/* a Woo clearfix pszeudoelemei ne foglaljanak rács-cellát */
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

ul.products li.product,
ul.products li.szd-product-card {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
	min-width: 0;
}

/* FIGYELEM: a `.thumbnail-container` NEM a képdoboz, hanem MAGA A KÁRTYA
   (nála van a keret, a padding, benne a cím és az ár is).
   Ezért ide SOHA nem kerülhet `overflow: hidden` vagy fix arány – levágná
   az árat és a készlet-jelzést.

   A négyzetes képarányt a kép linkje (`.product-thumbnail`) kapja. */

.szd-product-card {
	height: 100%;
}

.szd-product-card .thumbnail-container {
	overflow: visible;
	aspect-ratio: auto;
}

/* FIGYELEM 2: a `.product-thumbnail` linken BELÜL van a cikkszám is,
   nem csak a kép. Ezért NEM lehet flex konténer – a cikkszám a kép mellé
   csúszna. A négyzetes arányt maga a KÉP kapja. */

.szd-product-card .product-thumbnail {
	display: block;
	overflow: visible;
}

.szd-product-card .product-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto;
}

/* A cikkszám a kép ALATT, középen */
.szd-product-card .szd-card-sku {
	display: block;
	text-align: center;
	margin-top: 6px;
}

/* A cím ne törjön szavanként */
.szd-product-card .product-title {
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: none;
}

/* Rácsköz */
ul.products {
	gap: 20px;
}

/* Rugalmas oszlopszám: annyi fér, amennyi. Így a bal sáv melletti szűkebb
   tartalomsávban sem lesznek túl keskeny kártyák. */
ul.products {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

@media (max-width: 480px) {
	ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* A PS-ből örökölt egymásba ágyazott <ul> dupla felsorolásjelének eltüntetése
   a Műszaki adatok fülön. */
.szd-tab-content ul > li > ul { margin-top: 4px; }
.szd-tab-content ul li:has(> ul):not(:has(> :not(ul))) { list-style: none; }

/* A kártya alsó része (ár, készlet) mindig látszódjon, és a kártyák
   egyforma magasak legyenek: a cím nyúlik, az ár tapad az aljára. */
.szd-product-card .product-right { flex: 1; min-height: 0; }
.szd-product-card .product-bottom { margin-top: auto; padding-top: 8px; }

/* =============================================================================
   TERMÉKKÁRTYA – gombsor (Kosárba tesz / Bővebben)
   ========================================================================== */

.szd-product-card .product-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.szd-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
}

/* Elsődleges: Kosárba tesz */
.szd-btn--cart,
.szd-product-card .product-actions a.button,
.szd-product-card .product-actions .add_to_cart_button {
	background: #4c565b;
	border-color: #4c565b;
	color: #fff;
}

.szd-btn--cart:hover,
.szd-product-card .product-actions a.button:hover { background: #333a3e; color: #fff; }

/* Kosár ikon */
.szd-btn--cart::before,
.szd-product-card .product-actions .add_to_cart_button::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM7.2 14h9.4a2 2 0 001.9-1.4L21 6H6.2L5.5 3H2v2h2l3.6 7.6-1.4 2.5A2 2 0 007.9 18H20v-2H7.9l.3-.6z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM7.2 14h9.4a2 2 0 001.9-1.4L21 6H6.2L5.5 3H2v2h2l3.6 7.6-1.4 2.5A2 2 0 007.9 18H20v-2H7.9l.3-.6z'/></svg>") center/contain no-repeat;
}

/* Másodlagos: Bővebben */
.szd-btn--more {
	background: #eaf1fb;
	border-color: #cfdff5;
	color: #4c565b;
}
.szd-btn--more:hover { background: #dbe7f8; }

/* A WooCommerce AJAX után beszúr egy "Kosár megtekintése" linket a gomb mellé
   (`a.added_to_cart`). Ez szétnyomja a kétgombos sort, ezért elrejtjük.
   `!important` kell, mert a WooCommerce stíluslapja is azzal jeleníti meg. */
.szd-product-card .added_to_cart,
.szd-product-card .product-actions a.added_to_cart,
.szd-product-card .product-actions .added_to_cart.wc-forward {
	display: none !important;
}

/* Az AJAX-gomb töltés-animációja */
.szd-product-card .add_to_cart_button.loading { opacity: .7; }

@media (max-width: 480px) {
	.szd-product-card .product-actions { flex-direction: column; }
	.szd-btn { white-space: normal; }
}

/* =============================================================================
   TERMÉKOLDAL – a WooCommerce float-elrendezésének semlegesítése
   -----------------------------------------------------------------------------
   A woocommerce-layout.css ezt teszi:
       div.product div.images  { float: left;  width: 48%; }
       div.product div.summary { float: right; width: 48%; }
   A mi `.product_container`-ünk CSS Grid, így a 48% a RÁCS-OSZLOP fele lenne.
   ========================================================================== */

.szd-single-product .product_container {
	display: grid;
	grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.szd-single-product .product_left,
.szd-single-product .product_right,
.szd-single-product div.images,
.szd-single-product div.summary,
.szd-single-product .woocommerce-product-gallery {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
}

/* Galéria: a kép töltse ki a bal oszlopot */
.szd-single-product .woocommerce-product-gallery__wrapper,
.szd-single-product .woocommerce-product-gallery__image { width: 100%; }

.szd-single-product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* A galéria kerete szorosan a kép körül – ne legyen nagy üres padding */
.szd-single-product .woocommerce-product-gallery {
	border: 1px solid #e5e9ef;
	padding: 8px;
	background: #fff;
}
.szd-single-product .woocommerce-product-gallery__image { background: #fff; }

/* Cím: ne törjön szavanként */
.szd-single-product .product_title {
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Ár */
.szd-single-product .summary .price,
.szd-single-product .product_right .price {
	font-size: 28px;
	font-weight: 700;
	color: #4c565b;
}

/* Kosárba tesz gomb – a WooCommerce lila alapstílusa helyett */
.szd-single-product .single_add_to_cart_button,
.szd-single-product form.cart button.button {
	background: #4c565b !important;
	color: #fff !important;
	border: 0;
	border-radius: 4px;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.szd-single-product .single_add_to_cart_button:hover { background: #333a3e !important; }

.szd-single-product form.cart {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
}

.szd-single-product form.cart .quantity input {
	width: 64px;
	padding: 10px 8px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* Fülek teljes szélességben */
.szd-single-product .woocommerce-tabs,
.szd-single-product .related,
.szd-single-product .upsells {
	margin-top: 40px;
}

@media (max-width: 900px) {
	.szd-single-product .product_container { grid-template-columns: 1fr; }
}

/* Ha az oldalsáv nem renderelődött (nincs alkategória), a rács egy oszlop */
.szd-layout:not(.szd-blog-layout):not(:has(> .szd-sidebar)) {
	grid-template-columns: minmax(0, 1fr);
}

/* =============================================================================
   TERMÉKOLDAL – PrestaShop (AngarTheme) paritás
   -----------------------------------------------------------------------------
   Szerkezet:
     .szd-product-head      -> cím, teljes szélességben, alul kék vonal
     .product_container     -> 2 oszlop: galéria | összefoglaló
       .szd-product-meta    -> világoskék doboz: Cikkszám + Gyártó (egy sorban)
       .product_desc        -> szürke keretes doboz: rövid leírás
       .price + label       -> piros bal szegélyes, rózsaszín hátterű ár-doboz
       form.cart            -> Db + nagy kék, lekerekített "Kosárba tesz"
       .szd-stock-info      -> készlet
   ========================================================================== */

/* --- Cím --- */
.szd-product-head {
	border-bottom: 2px solid #e6e8ea;
	padding-bottom: 14px;
	margin-bottom: 24px;
}

.szd-product-head .product_title {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 800;
	text-transform: uppercase;
	color: #3b4247;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* --- Galéria --- */
.szd-single-product .woocommerce-product-gallery {
	border: 1px solid #e5e9ef;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.szd-image-note {
	margin-top: 8px;
	font-size: 12px;
	font-style: italic;
	color: #6b7280;
}

/* --- Cikkszám + Gyártó doboz --- */
.szd-product-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	align-items: center;
	background: #eff1f2;
	border-left: 4px solid #5e696e;
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 13.5px;
}

.szd-product-meta a { color: #5e696e; text-decoration: none; font-weight: 600; }
.szd-product-meta a:hover { text-decoration: underline; }

/* --- Rövid leírás doboz --- */
.szd-single-product .product_desc {
	border: 1px solid #e5e9ef;
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 14px;
	color: #374151;
}

.szd-single-product .product_desc p:last-child { margin-bottom: 0; }

/* --- Ár doboz --- */
.szd-single-product .price {
	background: #f9e7e9;
	border-left: 4px solid #c42331;
	margin: 0;
}

/* A .product-prices wrapper adja a boxok közti rést, kompaktan */
.szd-single-product .product-prices { margin: 8px 0; }

.szd-single-product .price,
.szd-single-product .price .woocommerce-Price-amount,
.szd-single-product .price ins,
.szd-single-product .price ins .woocommerce-Price-amount,
.szd-single-product .price bdi {
	display: inline;
	font-size: 30px;
	font-weight: 800;
	color: #c42331 !important;
	line-height: 1.1;
}
.szd-single-product .price {
	display: block;
	padding: 14px 18px 4px;
}

.szd-single-product .price del { font-size: 18px; color: #9ca3af; font-weight: 500; }
.szd-single-product .price ins { text-decoration: none; }

.szd-single-product .tax-shipping-delivery-label {
	padding: 6px 0 0;
	font-size: 12.5px;
	color: #6b7280;
	background: transparent;
	border-left: 0;
}

/* --- Mennyiség + Kosárba tesz --- */
.szd-single-product form.cart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.szd-single-product form.cart .quantity {
	display: flex;
	align-items: center;
	gap: 10px;
}

.szd-single-product form.cart .quantity::before {
	content: "Db";
	font-weight: 700;
	font-size: 14px;
	color: #374151;
}

.szd-single-product form.cart .quantity input {
	width: 84px;
	padding: 12px 10px;
	font-size: 16px;
	text-align: center;
	border: 1px solid #d5dbe3;
	border-radius: 8px;
}

.szd-single-product .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #4c565b !important;
	color: #fff !important;
	border: 0;
	border-radius: 999px;
	padding: 16px 36px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(20,70,143,.25);
}

.szd-single-product .single_add_to_cart_button:hover { background: #333a3e !important; }

.szd-single-product .single_add_to_cart_button::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM7.2 14h9.4a2 2 0 001.9-1.4L21 6H6.2L5.5 3H2v2h2l3.6 7.6-1.4 2.5A2 2 0 007.9 18H20v-2H7.9l.3-.6z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM7.2 14h9.4a2 2 0 001.9-1.4L21 6H6.2L5.5 3H2v2h2l3.6 7.6-1.4 2.5A2 2 0 007.9 18H20v-2H7.9l.3-.6z'/></svg>") center/contain no-repeat;
}

/* --- Készlet --- */
.szd-stock-info { margin-top: 8px; font-size: 14px; }
.szd-stock-info__title { font-weight: 700; color: #374151; margin-bottom: 4px; }

/* --- Fülek --- */
.szd-single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid #e6e8ea;
}

.szd-single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	border: 0;
	background: none;
}

.szd-single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 24px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: #6b7280;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.szd-single-product .woocommerce-tabs ul.tabs li.active a {
	color: #5e696e;
	background: #f5f6f7;
	border-bottom-color: #5e696e;
}

.szd-single-product .woocommerce-tabs .panel { padding-top: 24px; }

/* =============================================================================
   TERMÉKLEÍRÁS / MŰSZAKI ADATOK – tipográfiai egységesítés
   -----------------------------------------------------------------------------
   A PrestaShopból örökölt HTML tele van beágyazott stílussal:
       <span style="font-family:Verdana; font-size:11px; color:#333">
       <font face="Arial" size="2">
   Ezeket CSS-ből csak `!important`-tal lehet felülírni, mert az inline stílus
   erősebb minden szelektornál.

   A takarítás helyes helye az IMPORT lenne (style attribútum + <font> eltávolítása),
   de az csak új importnál hat. Ez a réteg minden meglévő terméknél is működik.
   ========================================================================== */

.szd-tab-content,
.woocommerce-Tabs-panel,
.szd-tech,
.szd-warranty {
	font-size: 15px;
	line-height: 1.65;
	color: #374151;
}

/* Minden leszármazott: örökölje a tipográfiát */
.woocommerce-Tabs-panel *,
.szd-tech * {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	background-color: transparent !important;
	letter-spacing: normal !important;
}

/* Kivételek: a címsorok és a kiemelés maradjanak megkülönböztethetők */
.woocommerce-Tabs-panel h1,
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4,
.szd-tech h1, .szd-tech h2, .szd-tech h3, .szd-tech h4 {
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #3b4247 !important;
	margin: 22px 0 10px;
}

.woocommerce-Tabs-panel h1 { font-size: 22px !important; }
.woocommerce-Tabs-panel h2 { font-size: 20px !important; }

.woocommerce-Tabs-panel strong,
.woocommerce-Tabs-panel b,
.szd-tech strong, .szd-tech b {
	font-weight: 700 !important;
}

.woocommerce-Tabs-panel em,
.woocommerce-Tabs-panel i { font-style: italic !important; }

.woocommerce-Tabs-panel a {
	color: #5e696e !important;
	text-decoration: underline;
}

/* Bekezdések, listák */
.woocommerce-Tabs-panel p { margin: 0 0 12px; }
.woocommerce-Tabs-panel p:last-child { margin-bottom: 0; }

.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.woocommerce-Tabs-panel li { margin-bottom: 5px; }

/* Egymásba ágyazott <ul> – a PS-ből örökölt dupla felsorolásjel */
.woocommerce-Tabs-panel li > ul { margin-top: 5px; margin-bottom: 0; }
.woocommerce-Tabs-panel li:not(:has(> :not(ul))) { list-style: none; }

/* Képek a leírásban ne lógjanak ki */
.woocommerce-Tabs-panel img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 12px 0;
}

/* --- Táblázatok (a Műszaki adatok gyakran táblázat) --- */
.woocommerce-Tabs-panel table,
.szd-tech table {
	width: 100% !important;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14px !important;
}

.woocommerce-Tabs-panel table td,
.woocommerce-Tabs-panel table th,
.szd-tech table td,
.szd-tech table th {
	border: 1px solid #e5e9ef !important;
	padding: 9px 12px !important;
	text-align: left !important;
	vertical-align: top;
	width: auto !important;
	height: auto !important;
}

/* Az első oszlop a "megnevezés" – emeljük ki */
.szd-tech table td:first-child,
.woocommerce-Tabs-panel table td:first-child {
	font-weight: 600 !important;
	background: #f7f9fc !important;
	width: 40% !important;
}

.woocommerce-Tabs-panel table th,
.szd-tech table th {
	font-weight: 700 !important;
	background: #eff1f2 !important;
	color: #3b4247 !important;
}

/* Zebracsíkozás */
.szd-tech table tr:nth-child(even) td { background: #fcfdfe !important; }
.szd-tech table tr:nth-child(even) td:first-child { background: #f2f6fb !important; }

/* A PS néha üres <p>-ket és <br>-eket halmoz */
.woocommerce-Tabs-panel p:empty,
.woocommerce-Tabs-panel br + br { display: none; }

/* =============================================================================
   LÁBLÉC
   ========================================================================== */

.site-footer {
	margin-top: 60px;
	background: #3b4247;
	color: #dcdfe2;
	font-size: 14px;
}

.footer-main__inner,
.footer-bottom__inner,
.footer-newsletter__inner,
.footer-badges__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
}

/* --- Hírlevél --- */
.footer-newsletter {
	background: #12294a;
	padding: 22px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

/* --- Fő rész: 3 oszlop --- */
.footer-main { padding: 40px 0 32px; }

.footer-main__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}

.footer-col__title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(255,255,255,.15);
}

.footer-col__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col__list li { margin-bottom: 9px; }

.footer-col__list a {
	color: #dcdfe2;
	text-decoration: none;
	transition: color .12s;
}

.footer-col__list a:hover { color: #fff; text-decoration: underline; }

/* --- Kapcsolat --- */
.footer-contact {
	font-style: normal;
	line-height: 1.55;
	margin-bottom: 14px;
}

.footer-contact strong { color: #fff; }

.footer-contact__label {
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}

.footer-contact__hours { line-height: 1.6; margin-bottom: 12px; }

.footer-contact__note {
	margin: 8px 0 0;
	padding: 8px 10px;
	background: rgba(255,255,255,.06);
	border-left: 3px solid #f0a500;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1.45;
}

.footer-contact__list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.footer-contact__list li { margin-bottom: 6px; }

.footer-contact__list a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.footer-contact__list a:hover { text-decoration: underline; }

.footer-contact__phone a { font-size: 17px; }

/* --- Közösségi --- */
.footer-social__label { font-weight: 700; color: #fff; margin-bottom: 6px; }

.footer-social__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #dcdfe2;
	text-decoration: none;
}
.footer-social__link:hover { color: #fff; }

/* --- Bizalmi jelvények --- */
.footer-badges {
	padding: 18px 0;
	border-top: 1px solid rgba(255,255,255,.08);
	background: rgba(0,0,0,.12);
}

/* --- Alsó sáv --- */
.footer-bottom {
	padding: 16px 0;
	background: #0f2543;
	font-size: 13px;
}

.footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.footer-bottom__list {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-bottom__list a { color: #dcdfe2; text-decoration: none; }
.footer-bottom__list a:hover { color: #fff; }

@media (max-width: 900px) {
	.footer-main__inner { grid-template-columns: 1fr; gap: 28px; }
	.footer-bottom__inner { justify-content: center; text-align: center; }
}

/* =============================================================================
   FEJLÉC
   ========================================================================== */

.szd-topline {
	background: #001630;
	color: #fff;
}

.szd-topline__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 14px 16px;
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, auto);
	align-items: center;
	gap: 24px;
}

/* --- Logó --- */
.szd-brand { display: flex; align-items: center; gap: 14px; }
.szd-brand img { max-width: 100%; height: auto; }

.szd-brand__text { text-decoration: none; color: #fff; display: block; }
.szd-brand__name { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.szd-brand__tagline { display: block; font-size: 11px; opacity: .75; }

.szd-brand__partner img { max-height: 34px; width: auto; }

/* --- Kereső --- */
.szd-search__form {
	display: flex;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.szd-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 11px 14px;
	font: inherit;
	font-size: 15px;
	color: #1f2937;
}

.szd-search__input:focus { outline: 2px solid #3b82f6; outline-offset: -2px; }

.szd-search__button {
	flex: 0 0 52px;
	border: 0;
	background: #c42331;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.szd-search__button:hover { background: #c92c39; }

/* --- Fiók + kosár --- */
.szd-header-tools {
	display: flex;
	align-items: center;
	gap: 22px;
	justify-content: flex-end;
}

.szd-account { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.szd-account__greeting { opacity: .75; }
.szd-account__sep { opacity: .5; }

.szd-account__link {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.4);
}
.szd-account__link:hover { border-bottom-color: #fff; }

.szd-cart {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}

.szd-cart:hover { background: rgba(255,255,255,.16); color: #fff; }
.szd-cart__label { font-weight: 700; letter-spacing: .02em; }
.szd-cart__sep { opacity: .4; }
.szd-cart__count { font-weight: 700; }
.szd-cart__total { font-weight: 700; }
.szd-cart__icon { display: flex; }

@media (max-width: 1024px) {
	.szd-topline__inner { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
	.szd-search { grid-column: 1 / -1; order: 3; }
}

@media (max-width: 640px) {
	.szd-topline__inner { grid-template-columns: 1fr; gap: 12px; }
	.szd-header-tools { justify-content: space-between; }
	.szd-cart__label, .szd-cart__sep { display: none; }
}

/* =============================================================================
   TERMÉKKÁRTYA – gombsor stabilitása AJAX után
   -----------------------------------------------------------------------------
   A "Kosárba tesz" AJAX-hívás után a WooCommerce:
     1. `added` osztályt tesz a gombra (pipa jelenik meg)
     2. beszúr egy <a class="added_to_cart"> linket MÖGÉ
   Az (2) elrejtve. Az (1) marad, de a gomb szélessége NEM változhat,
   különben a sor átrendeződik.
   ========================================================================== */

.szd-product-card .product-actions {
	flex-wrap: nowrap;
	align-items: stretch;
}

/* A gombok osszák el a helyet, de a SZÖVEG ne csonkuljon ("Kosárb…").
   Ezért nincs `overflow: hidden` és `text-overflow: ellipsis`; helyette
   kisebb vízszintes belső margó és szükség esetén tördelés. */
.szd-product-card .product-actions > .szd-btn,
.szd-product-card .product-actions > .button {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline: 8px;
	font-size: 12.5px;
	white-space: nowrap;
}

/* Nagyon szűk kártyánál inkább egymás alá */
@media (max-width: 1400px) {
	.szd-product-card .product-actions { flex-wrap: wrap; }
	.szd-product-card .product-actions > .szd-btn,
	.szd-product-card .product-actions > .button { flex: 1 1 100%; }
}

/* A gombra kerülő pipa ne tolja szét a szöveget */
.szd-product-card .add_to_cart_button.added::after {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	margin-left: 6px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
}

/* Töltés közben pörgő jelzés helyett halványítás (a Woo ::after-t használna) */
.szd-product-card .add_to_cart_button.loading::after { content: none; }
.szd-product-card .add_to_cart_button.loading { opacity: .6; pointer-events: none; }

/* =============================================================================
   FELSŐ VÍZSZINTES MENÜ – PrestaShop (AngarTheme) paritás
   -----------------------------------------------------------------------------
   Sáv:  világoskék (#5e696e), a megamenü-gomb sötétebb (#4c565b).
   Linkek: nagybetűs, félkövér, fehér, függőleges elválasztóval.

   BADGE és IKON a menüelem "CSS osztályok" mezőjéből (Megjelenés -> Menük,
   Képernyő opciók -> CSS osztályok bekapcsolása):
       badge-kiemelt   -> piros "KIEMELT" címke az elem fölött
       badge-uj        -> zöld "ÚJ"
       icon-user       -> személy ikon a szöveg elé
   ========================================================================== */

.szd-topbar {
	background: #5e696e;
	color: #fff;
}

.szd-topbar__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 0;
}

/* --- A megamenü gomb --- */
.szd-topbar__trigger-btn {
	position: relative;
	background: #4c565b;
	padding: 16px 24px;
	font-size: 14px;
	letter-spacing: .02em;
	gap: 14px;
}

.szd-topbar__trigger-btn:hover { background: #333a3e; }

/* A hamburger helyett lefelé mutató nyíl (mint a PS-ben) */
.szd-topbar__trigger-icon {
	width: 0;
	height: 0;
	background: none;
	box-shadow: none;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid currentColor;
	margin-left: 6px;
	transition: transform .15s;
}

.szd-topbar__trigger.is-open .szd-topbar__trigger-icon { transform: rotate(180deg); }

/* --- A linkek --- */
.szd-topbar__list {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

.szd-topbar__list > li {
	position: relative;
	display: flex;
	align-items: center;
	border-right: 1px solid rgba(255,255,255,.14);
}

.szd-topbar__list > li:first-child { border-left: 1px solid rgba(255,255,255,.14); }

.szd-topbar__list > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 16px 22px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}

.szd-topbar__list > li > a:hover,
.szd-topbar__list > li.current-menu-item > a {
	background: rgba(0,0,0,.14);
}

/* --- Badge a menüelem fölött --- */
.szd-topbar__list > li.badge-kiemelt > a::before,
.szd-topbar__list > li.badge-uj > a::before {
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(-50%);
	padding: 1px 6px;
	border-radius: 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	white-space: nowrap;
}

.szd-topbar__list > li.badge-kiemelt > a::before {
	content: "KIEMELT";
	background: #e02b2b;
	color: #fff;
}

.szd-topbar__list > li.badge-uj > a::before {
	content: "ÚJ";
	background: #2fa84f;
	color: #fff;
}

/* --- Ikon a szöveg előtt --- */
.szd-topbar__list > li.icon-user > a > span.szd-icon,
.szd-topbar__list > li.icon-user > a::after {
	content: "";
	order: -1;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 12a4 4 0 10-4-4 4 4 0 004 4zm0 2c-3 0-9 1.5-9 4.5V21h18v-2.5c0-3-6-4.5-9-4.5zM6 10V7H4v3H1v2h3v3h2v-3h3v-2H6z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 12a4 4 0 10-4-4 4 4 0 004 4zm0 2c-3 0-9 1.5-9 4.5V21h18v-2.5c0-3-6-4.5-9-4.5zM6 10V7H4v3H1v2h3v3h2v-3h3v-2H6z'/></svg>") center/contain no-repeat;
}

/* A menüelem-helykitöltő adminoknak */
.szd-menu-placeholder {
	margin: 0;
	padding: 14px 20px;
	font-size: 13px;
	color: rgba(255,255,255,.75);
}

@media (max-width: 900px) {
	.szd-topbar__list { flex-wrap: wrap; }
	.szd-topbar__list > li > a { padding: 12px 14px; font-size: 13px; }
	.szd-topbar__list > li:first-child { border-left: 0; }
}

/* =============================================================================
   MÁRKASZŰRŐ (kategória-oldalsáv)
   ========================================================================== */

.szd-brand-filter {
	margin-top: 18px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.szd-brand-filter.is-loading { opacity: .6; pointer-events: none; }

.szd-brand-filter .szd-sidebar__title { margin: 0; }

.szd-brand-filter__clear {
	display: block;
	padding: 8px 14px 0;
	font-size: 12px;
	color: #c42331;
	text-decoration: none;
}
.szd-brand-filter__clear:hover { text-decoration: underline; }

.szd-brand-filter__list {
	margin: 0;
	padding: 10px 6px 12px;
	list-style: none;
	max-height: 340px;
	overflow-y: auto;
}

.szd-brand-filter__item label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 3px;
	font-size: 13px;
	cursor: pointer;
}

.szd-brand-filter__item label:hover { background: #f6f7f8; }
.szd-brand-filter__item.is-checked label { font-weight: 600; }

.szd-brand-filter__cb {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	accent-color: #5e696e;
	cursor: pointer;
}

.szd-brand-filter__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.szd-brand-filter__count { color: #8b96a5; font-size: 12px; }

.szd-brand-filter__noscript { padding: 10px 14px; font-size: 12px; color: #8b96a5; }

/* =============================================================================
   KEZDŐLAP
   ========================================================================== */

.szd-home > section { margin-bottom: 26px; }

/* --- 1. Slider --- */
.szd-slider {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background: #eef1f5;
}

.szd-slider__track { position: relative; }

.szd-slider__slide { display: none; }
.szd-slider__slide.is-active { display: block; }

.szd-slider__slide img {
	display: block;
	width: 100%;
	height: auto;
}

.szd-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 60px;
	border: 0;
	background: rgba(0,0,0,.25);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: background .15s;
}

.szd-slider__nav:hover { background: rgba(0,0,0,.45); }
.szd-slider__nav--prev { left: 0; border-radius: 0 4px 4px 0; }
.szd-slider__nav--next { right: 0; border-radius: 4px 0 0 4px; }

.szd-slider__dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
}

.szd-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	cursor: pointer;
}

.szd-slider__dot.is-active { background: #fff; }

/* --- 2. Csempék --- */
.szd-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.szd-tile {
	display: block;
	border-radius: 3px;
	overflow: hidden;
	line-height: 0;
}

.szd-tile img {
	width: 100%;
	height: auto;
	transition: transform .25s;
}

.szd-tile:hover img { transform: scale(1.03); }

/* --- 3-4. Blokkcím --- */
.szd-home-block__title {
	margin: 0 0 16px;
	padding: 13px 18px;
	background: #3b4247;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-radius: 3px;
}

.szd-home-block__title--plain {
	background: none;
	color: #3b4247;
	padding: 0 0 10px;
	border-bottom: 1px solid #dfe3e8;
	border-radius: 0;
	font-size: 13px;
}

.szd-home-products { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* --- 4. Kategória-csempék --- */
.szd-home-cats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	border: 1px solid #e3e6ea;
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
}

.szd-home-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px 16px;
	border-right: 1px solid #eceff2;
	text-align: center;
}

.szd-home-cat:last-child { border-right: 0; }

.szd-home-cat__link { text-decoration: none; color: inherit; }

.szd-home-cat__img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	margin-bottom: 8px;
}

.szd-home-cat__img img { width: 100%; height: 100%; object-fit: cover; }
.szd-home-cat__img--empty { background: #f1f3f5; display:none;}

.szd-home-cat__name {
	display: block;
	font-size: 12px;<?php
/**
 * Telepítési útmutató az Elállási Kezelő webshop-integrációihoz.
 * WooCommerce plugin + PrestaShop modul telepítése és beállítása.
 */
require_once __DIR__ . '/../includes/auth.php';
require_login();

$pageTitle = 'Útmutató';
$tab = $_GET['tab'] ?? 'wp';

include __DIR__ . '/_layout_top.php';
?>

<div class="page-header">
    <h1>Telepítési útmutató</h1>
</div>

<div class="card" style="padding:0;overflow:hidden;">
    <!-- Fül-választó -->
    <div style="display:flex;border-bottom:2px solid #e5e7eb;background:#f9fafb;">
        <a href="?tab=wp" style="padding:12px 20px;text-decoration:none;color:<?= $tab === 'wp' ? '#6b757a' : '#667085' ?>;font-weight:<?= $tab === 'wp' ? '600' : '500' ?>;border-bottom:3px solid <?= $tab === 'wp' ? '#6b757a' : 'transparent' ?>;margin-bottom:-2px;">
            WordPress / WooCommerce
        </a>
        <a href="?tab=ps" style="padding:12px 20px;text-decoration:none;color:<?= $tab === 'ps' ? '#6b757a' : '#667085' ?>;font-weight:<?= $tab === 'ps' ? '600' : '500' ?>;border-bottom:3px solid <?= $tab === 'ps' ? '#6b757a' : 'transparent' ?>;margin-bottom:-2px;">
            PrestaShop
        </a>
        <a href="?tab=jogi" style="padding:12px 20px;text-decoration:none;color:<?= $tab === 'jogi' ? '#6b757a' : '#667085' ?>;font-weight:<?= $tab === 'jogi' ? '600' : '500' ?>;border-bottom:3px solid <?= $tab === 'jogi' ? '#6b757a' : 'transparent' ?>;margin-bottom:-2px;">
            Jogi háttér
        </a>
    </div>

    <div style="padding:1.5rem;line-height:1.7;">

<?php if ($tab === 'wp'): ?>

    <h2 style="margin-top:0;">WordPress / WooCommerce telepítés</h2>

    <p>Használd a mellékelt <strong>Elállási Kezelő Integráció</strong> plugint. Egy zip-et telepítesz, egy beállító oldalon megadod a slug-ot – ennyi. Nincs functions.php piszkálás.</p>

    <div style="background:#f0f9ff;border-left:4px solid #6b757a;padding:.85rem 1rem;margin:1rem 0;border-radius:0 4px 4px 0;">
        <strong>Plugin letöltése:</strong><br>
        <a href="../downloads/elallaskezelo-integracio.zip" class="btn" style="margin-top:.5rem;">📦 elallaskezelo-integracio.zip</a>
    </div>

    <h3>1. Telepítés</h3>
    <ol>
        <li>WP admin → <strong>Bővítmények → Új bővítmény → Bővítmény feltöltése</strong></li>
        <li>Válaszd ki a fenti <code>elallaskezelo-integracio.zip</code>-et → <strong>Telepítés</strong> → <strong>Aktiválás</strong></li>
    </ol>

    <h3>2. Beállítás</h3>
    <p>WP admin → <strong>Beállítások → Elállási Kezelő</strong>. Töltsd ki:</p>
    <ul>
        <li><strong>Bolt slug</strong>: az adott bolt slug-ja, amit itt az Elállási Kezelő adminban a <a href="shops.php">Webshopok</a> alatt felvettél (pl. <code>tobox</code>, <code>enjoyroll</code>)</li>
        <li><strong>Elállás-kezelő URL</strong>: már be van írva alapból, ne módosítsd</li>
        <li><strong>Rendelés visszaigazoló email</strong>: <em>bekapcsolva</em></li>
        <li><strong>Vásárlói fiók → Rendeléseim</strong>: <em>bekapcsolva</em></li>
        <li><strong>Lebegő gomb (footer)</strong>: <em>kikapcsolva</em>, ha már manuálisan tettél linket a lábléc szövegébe</li>
    </ul>
    <p>Mentés.</p>

    <h3>3. Előző kód eltávolítása (fontos!)</h3>
    <p>Ha korábban másoltál kódot a <strong>child theme <code>functions.php</code></strong>-jébe az elálláshoz, most töröld ki, hogy ne legyen dupla gomb. Konkrétan:</p>
    <ul>
        <li>Az <code>add_action( 'woocommerce_email_order_details', ... )</code> blokk (email gomb)</li>
        <li>Az <code>add_filter( 'woocommerce_my_account_my_orders_actions', ... )</code> blokk (Rendeléseim oldal gomb)</li>
    </ul>
    <p>A <strong>Flatsome Options / Customizer</strong>-ben manuálisan berakott <em>footer szöveges link</em> maradjon úgy, ahogy van — az más rendszer.</p>

    <h3>4. Teszt</h3>
    <ol>
        <li>Csinálj egy teszt rendelést a webshopon (elég 1 Ft-os, ha van olcsó termék)</li>
        <li>A visszaigazoló emailben meg kell jelennie a kék "Elállás a szerződéstől" gombnak</li>
        <li>Vásárlói fiók → Rendeléseim oldalon minden rendelés mellett látszania kell az "Elállás" gombnak</li>
        <li>Kattintás után az űrlap a bolt megfelelő adataival és a rendelt termékekkel előre kitöltve nyílik meg</li>
        <li>Küldd be a beküldést → itt a <a href="submissions.php">Beküldések</a> oldalon ellenőrizd, hogy megérkezett</li>
    </ol>

    <h3>Bónusz: shortcode</h3>
    <p>Bárhol a szövegben, widgetben vagy oldalon: <code>[elallas_link]</code> — egyszerű gomb, automatikusan a beállított slug-gal.</p>
    <p>Egyedi felirattal: <code>[elallas_link label="Terméket vissza akarok küldeni"]</code></p>

    <hr style="margin:2rem 0;">
    <h3>Hibaelhárítás</h3>
    <table class="data">
        <thead><tr><th>Probléma</th><th>Megoldás</th></tr></thead>
        <tbody>
            <tr><td>"A bolt slug még nincs beállítva" figyelmeztetés</td><td>WP admin → Beállítások → Elállási Kezelő → Slug megadása</td></tr>
            <tr><td>Nem jelenik meg az email gomb teszt rendeléskor</td><td>Ellenőrizd, hogy a "Rendelés visszaigazoló email" pipálva van-e a plugin beállításokban</td></tr>
            <tr><td>Két gomb jelenik meg</td><td>A régi <code>functions.php</code> snippetet töröld ki (lásd 3. lépés)</td></tr>
            <tr><td>Az űrlapon rossz cégadatok látszanak</td><td>Az adott bolt slug-ja a plugin beállításban egyezik-e a Webshopok alatt felvett slug-gal</td></tr>
        </tbody>
    </table>

<?php elseif ($tab === 'ps'): ?>

    <h2 style="margin-top:0;">PrestaShop telepítés</h2>

    <div style="background:#f0f9ff;border-left:4px solid #6b757a;padding:.85rem 1rem;margin:1rem 0;border-radius:0 4px 4px 0;">
        <strong>Modul letöltése:</strong><br>
        <a href="../downloads/elallaslink.zip" class="btn" style="margin-top:.5rem;">📦 elallaslink.zip</a>
    </div>

    <h3>1. Modul telepítése</h3>
    <ol>
        <li>PS admin → <strong>Modulok → Modulkezelő</strong> → jobb felül <strong>„Modul feltöltése"</strong></li>
        <li>Válaszd ki az <code>elallaslink.zip</code>-et → telepítés</li>
    </ol>

    <h3>2. Konfiguráció</h3>
    <p>A modul után kattints a <strong>„Konfigurálás"</strong> gombra és add meg:</p>
    <ul>
        <li><strong>Bolt slug</strong>: a bolt slug-ja itt az adminban (pl. <code>szerszamdoboz</code>, <code>mwszerszam</code>, <code>whszerszam</code>)</li>
        <li><strong>Alap URL</strong>: alapból ki van töltve, ne módosítsd</li>
    </ul>

    <h3>3. Email sablon módosítása</h3>
    <p>A modul beilleszt egy <code>{elallas_url}</code> Smarty változót az <code>order_conf</code> email küldésekor. Ezt kell egy gombhoz kötni a sablonban.</p>

    <p>Két fájlt módosíts:</p>
    <ul>
        <li><code>mails/hu/order_conf.html</code></li>
        <li><code>mails/hu/order_conf.txt</code></li>
    </ul>
    <p><strong>Figyelem:</strong> ha van saját témán belüli override (<code>themes/&lt;téma&gt;/mails/hu/order_conf.html</code>), azt kell szerkeszteni.</p>

    <p>Az HTML sablonba, a záró blokkok előtt tedd be:</p>
    <pre style="background:#f6f8fa;padding:1rem;border-radius:4px;overflow:auto;font-size:.85rem;">&lt;table cellspacing="0" cellpadding="0" border="0" width="100%"&gt;
    &lt;tr&gt;
        &lt;td align="center" style="padding: 20px; background: #f5f7fa; border-radius: 6px;"&gt;
            &lt;p style="margin: 0 0 10px; color: #444; font-size: 14px;"&gt;
                A megrendeléstől a kézhezvételtől számított &lt;strong&gt;14 napon belül&lt;/strong&gt; indokolás nélkül elállhat.
            &lt;/p&gt;
            &lt;p style="margin: 0;"&gt;
                &lt;a href="{elallas_url}"
                   style="display: inline-block; padding: 10px 22px; background: #6b757a; color: #ffffff; text-decoration: none; border-radius: 4px; font-weight: 600; font-size: 14px;"&gt;
                    Elállás a szerződéstől
                &lt;/a&gt;
            &lt;/p&gt;
            &lt;p style="margin: 8px 0 0; color: #888; font-size: 11px;"&gt;
                45/2014. (II. 26.) Korm. rendelet alapján
            &lt;/p&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</pre>

    <p>A TXT sablonba (a végén):</p>
    <pre style="background:#f6f8fa;padding:1rem;border-radius:4px;overflow:auto;font-size:.85rem;">-----------------------------
ELÁLLÁS A SZERZŐDÉSTŐL
A megrendeléstől a kézhezvételtől számított 14 napon belül indokolás nélkül elállhat.
Link: {elallas_url}
(45/2014. Korm. rendelet alapján)
-----------------------------</pre>

    <p><strong>NE használj <code>{if}...{/if}</code> Smarty feltételes blokkokat</strong> az email sablonban – a PS az email templates-ben nem cseréli le őket, csak nyers szövegként megjelenne a vásárlónál.</p>

    <h3>4. Rendeléseim oldal gombja</h3>
    <p>Módosítsd a téma <code>history.tpl</code> fájlját. A hely általában:</p>
    <pre style="background:#f6f8fa;padding:.5rem 1rem;border-radius:4px;font-size:.85rem;">themes/&lt;téma&gt;/templates/customer/history.tpl</pre>

    <p>Keresd meg a rendelés-táblázat sorát (asztali nézet), ahol a <code>Részletek</code> link van, és mellé illeszd be:</p>
    <pre style="background:#f6f8fa;padding:1rem;border-radius:4px;overflow:auto;font-size:.85rem;">{hook h='displayCustomerOrderHistoryAction' id_order=$order.details.id}</pre>

    <p>Ugyanezt tedd be a mobil nézet <code>&lt;div class="col-xs-2 text-xs-right"&gt;</code> blokkjába is.</p>

    <h3>5. Cache törlés</h3>
    <p>PS admin → <strong>Speciális → Teljesítmény</strong> → felül <strong>„Cache törlése"</strong> gomb.</p>

    <h3>6. Teszt</h3>
    <ol>
        <li>Csinálj egy teszt rendelést</li>
        <li>Visszaigazoló emailben megjelenik a kék gomb</li>
        <li>Vásárlói fiók → Rendeléseim: minden rendelés mellett látszik az "Elállás" gomb</li>
        <li>Kattintva az űrlap előre kitöltve nyílik meg</li>
    </ol>

    <hr style="margin:2rem 0;">
    <h3>Hibaelhárítás</h3>
    <table class="data">
        <thead><tr><th>Probléma</th><th>Megoldás</th></tr></thead>
        <tbody>
            <tr><td>Az emailben <code>{elallas_url}</code> szöveg jelenik meg a link helyett</td><td>A modul nincs aktiválva, vagy nincs beállítva a slug. Modulkezelő → Konfigurálás</td></tr>
            <tr><td>Az emailben <code>{if isset...}</code> szöveg látszik</td><td>Az email sablonokban vedd ki a <code>{if}</code> és <code>{/if}</code> sorokat – a PS emailek nem támogatják</td></tr>
            <tr><td>A Rendeléseim oldalon nincs "Elállás" gomb</td><td>1) Cache törlés  2) Modul frissítése után újratelepítés (Eltávolítás → Telepítés), hogy a hook regisztrálódjon  3) history.tpl-be beillesztetted-e a <code>{hook ...}</code> sort</td></tr>
            <tr><td>Layout hiba a Rendeléseim oldalon</td><td>Ellenőrizd, hogy a <code>{hook ...}</code> sort <em><code>&lt;td&gt;</code>-n belül</em> tetted, ne közé</td></tr>
        </tbody>
    </table>

<?php elseif ($tab === 'jogi'): ?>

    <h2 style="margin-top:0;">Jogi háttér</h2>

    <p>A rendszer és a webshop integrációk a <strong>45/2014. (II. 26.) Korm. rendelet 22. §</strong> előírásait valósítják meg, amely <strong>2026. június 19-től</strong> kötelező.</p>

    <h3>Miket ír elő a rendelet?</h3>
    <ol>
        <li><strong>Online elállási funkció</strong> minden webshopon (nem elég a papíralapú levél)</li>
        <li><strong>Konkrét felirat</strong>: „elállás a szerződéstől"</li>
        <li><strong>Folyamatos elérhetőség</strong> az elállási időszak alatt (14 nap az átvételtől)</li>
        <li><strong>Bejelentkezett vásárlónak</strong> ne kelljen újra hitelesítenie magát</li>
        <li><strong>Automatikus visszaigazolás tartós adathordozón</strong> (email) a beküldés tartalmáról és időpontjáról</li>
        <li><strong>Nem szabad</strong> a vásárlót az elállás okára kérdezni (indoklás nélkül elállhat)</li>
    </ol>

    <h3>Hogy tudja a rendszer teljesíteni ezeket?</h3>
    <table class="data">
        <thead><tr><th>Követelmény</th><th>Megoldás</th></tr></thead>
        <tbody>
            <tr><td>Online funkció, „elállás a szerződéstől" felirattal</td><td>Publikus űrlap + gomb minden webshop láblécében / My Account-jában</td></tr>
            <tr><td>Folyamatos elérhetőség</td><td>Minden oldalon a lábléc link, illetve a Rendeléseim oldalon minden rendelés mellett gomb</td></tr>
            <tr><td>Bejelentkezett vásárlónak automatikus kitöltés</td><td>A Rendeléseim oldalon a gomb URL-je tartalmazza a vásárló adatait és a rendelt termékeket. Nem kell újra bejelentkezni sehova</td></tr>
            <tr><td>Automatikus visszaigazolás tartós adathordozón</td><td>Beküldés után azonnal küldött email a vásárlónak, benne az elállás UID-je, időpontja és teljes tartalma</td></tr>
            <tr><td>Nem firtatható az indok</td><td>Az űrlapon csak semleges „Egyéb megjegyzés (nem kötelező)" mező szerepel</td></tr>
            <tr><td>Bizonyíthatóság</td><td>Beküldések tárolva, audit log (ki, mikor, mit) IP-vel</td></tr>
        </tbody>
    </table>

    <h3>Rendelés visszaigazoló email — mit tartalmaz?</h3>
    <p>A vásárló minden rendelése után egy emailt kap, amiben megjelenik az "Elállás a szerződéstől" gomb. A gomb URL-je tartalmazza:</p>
    <ul>
        <li>A vásárló nevét, email címét, telefonját, számlázási címét</li>
        <li>A rendelés számát, dátumát</li>
        <li>A rendelt termékek listáját (mennyiséggel)</li>
    </ul>
    <p>A vásárló csak kattint, az űrlap előre ki van töltve, a termékek checkbox-osan választhatók.</p>

    <h3>Kulcs linkek</h3>
    <ul>
        <li><a href="https://net.jogtar.hu/jogszabaly?docid=A1400045.KOR" target="_blank">45/2014. (II. 26.) Korm. rendelet – teljes szöveg</a></li>
        <li><a href="https://fogyasztobarat.hu" target="_blank">Fogyasztóbarát – gyakori kérdések</a></li>
    </ul>

<?php endif; ?>

    </div>
</div>

<?php include __DIR__ . '/_layout_bottom.php'; ?>
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
	color: #3b4247;
}

.szd-home-cat__btn {
	margin-top: auto;
	padding: 5px 14px;
	background: #5e696e;
	color: #fff;
	border-radius: 3px;
	font-size: 12px;
	text-decoration: none;
}

.szd-home-cat__btn:hover { background: #4c565b; color: #fff; }

/* --- 5. Rólunk --- */
.szd-home-about {
	position: relative;
	background-color: #2b3a4a;
	background-size: cover;
	background-position: center;
	border-radius: 3px;
	overflow: hidden;
	color: #fff;
}

.szd-home-about::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20,35,55,.88) 0%, rgba(20,35,55,.72) 55%, rgba(20,35,55,.35) 100%);
}

.szd-home-about__inner {
	position: relative;
	padding: 36px 40px;
	max-width: 720px;
}

.szd-home-about__title {
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.szd-home-about__text { font-size: 14px; line-height: 1.7; }
.szd-home-about__text p { margin: 0 0 14px; }
.szd-home-about__text p:last-child { margin-bottom: 0; }

/* --- 6. Előnyök --- */
.szd-benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	padding: 34px 10px;
	text-align: center;
}

.szd-benefit__icon { color: #5e696e; margin-bottom: 10px; }

.szd-benefit__title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #3b4247;
}

.szd-benefit__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #5e696e;
}

/* --- Üres állapot --- */
.szd-home-empty {
	padding: 40px;
	text-align: center;
	border: 2px dashed #cbd5e1;
	border-radius: 6px;
	color: #64748b;
}

@media (max-width: 1024px) {
	.szd-home-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.szd-home-cat:nth-child(3n) { border-right: 0; }
	.szd-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.szd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.szd-home-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.szd-home-about__inner { padding: 24px 20px; }
	.szd-home-about__title { font-size: 22px; }
}

/* =============================================================================
   SLIDER – átmenet-módok
   -----------------------------------------------------------------------------
   fade  : a diák egymáson, csak az aktív látszik (opacity)
   slide : a diák egy sorban, a sávot toljuk (a JS állítja a transformot)
   ========================================================================== */

.szd-slider--slide { overflow: hidden; }
.szd-slider--slide .szd-slider__track { display: flex; will-change: transform; }
.szd-slider--slide .szd-slider__slide { display: block; flex: 0 0 100%; }

.szd-slider--fade .szd-slider__slide {
	display: none;
	animation: szd-fade .5s ease;
}
.szd-slider--fade .szd-slider__slide.is-active { display: block; }

@keyframes szd-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.szd-slider--fade .szd-slider__slide { animation: none; }
	.szd-slider--slide .szd-slider__track { transition: none !important; }
}

/* =============================================================================
   ELŐNYÖK – ikon középre, HTML szöveg
   ========================================================================== */

.szd-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.szd-benefit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 12px;
	color: #5e696e;
}

.szd-benefit__icon svg { display: block; }

.szd-benefit__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #5e696e;
	max-width: 260px;
}

.szd-benefit__text p { margin: 0 0 8px; }
.szd-benefit__text p:last-child { margin-bottom: 0; }
.szd-benefit__text ul,
.szd-benefit__text ol { margin: 6px 0; padding-left: 18px; text-align: left; }
.szd-benefit__text a { color: inherit; text-decoration: underline; }

/* A kezdőlapi kártyákon nincs gombsor -> ne maradjon üres hely */
.szd-home-products .szd-product-card .product-actions { display: none; }

/* =============================================================================
   KAPCSOLAT OLDAL
   ========================================================================== */

.szd-contact {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* --- Bal oszlop --- */
.szd-contact__info {
	background: #f7f9fc;
	border: 1px solid #e3e8ee;
	border-radius: 4px;
	padding: 20px;
	font-size: 14px;
	line-height: 1.6;
}

.szd-contact__info-title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #e6e8ea;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #3b4247;
}

.szd-contact__block { margin-bottom: 18px; }
.szd-contact__block:last-child { margin-bottom: 0; }

.szd-contact__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8b96a5;
	margin-bottom: 4px;
}

.szd-contact__phone {
	font-size: 19px;
	font-weight: 700;
	color: #5e696e;
	text-decoration: none;
}

.szd-contact__note {
	margin: 8px 0 0;
	padding: 8px 10px;
	background: #fff6e5;
	border-left: 3px solid #f0a500;
	border-radius: 3px;
	font-size: 12px;
	line-height: 1.45;
	color: #6b5b34;
}

/* --- Ügyfél Portál --- */
.szd-portal {
	background: linear-gradient(135deg, #5e696e, #4c565b);
	color: #fff;
	border-radius: 6px;
	padding: 26px 28px;
	margin-bottom: 26px;
}

.szd-portal__title {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
}

.szd-portal__intro { font-weight: 600; margin: 0 0 10px; }
.szd-portal p { margin: 0 0 14px; line-height: 1.6; opacity: .95; }

.szd-portal__btn {
	display: inline-block;
	padding: 11px 24px;
	background: #fff;
	color: #4c565b;
	font-weight: 700;
	border-radius: 999px;
	text-decoration: none;
}

.szd-portal__btn:hover { background: #eaf1fb; color: #4c565b; }

/* --- Visszajelzések --- */
.szd-contact__ok,
.szd-contact__error {
	padding: 14px 18px;
	border-radius: 4px;
	margin-bottom: 20px;
}

.szd-contact__ok {
	background: #e8f6ec;
	border-left: 4px solid #2fa84f;
	color: #1c5c2e;
}

.szd-contact__ok p { margin: 4px 0 0; }

.szd-contact__error {
	background: #f9e7e9;
	border-left: 4px solid #c42331;
	color: #8f2018;
}

.szd-contact__error ul { margin: 0; padding-left: 18px; }

/* --- Űrlap --- */
.szd-contact-form {
	background: #fff;
	border: 1px solid #e3e8ee;
	border-radius: 4px;
	padding: 24px;
}

.szd-field { margin-bottom: 18px; }
.szd-field:last-child { margin-bottom: 0; }

.szd-field > label,
.szd-field__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #374151;
	margin-bottom: 6px;
}

.szd-field .req { color: #c42331; }

.szd-field input[type=email],
.szd-field input[type=text],
.szd-field select,
.szd-field textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #d5dbe3;
	border-radius: 4px;
	font: inherit;
	font-size: 15px;
	background: #fff;
}

.szd-field input:focus,
.szd-field select:focus,
.szd-field textarea:focus {
	outline: 2px solid #5e696e;
	outline-offset: -1px;
	border-color: #5e696e;
}

.szd-field textarea { resize: vertical; }

.szd-field input[type=file] {
	width: 100%;
	padding: 9px;
	border: 1px dashed #cbd5e1;
	border-radius: 4px;
	background: #fafbfc;
	font-size: 13px;
}

.szd-field__hint {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #8b96a5;
}

.szd-field--check label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.szd-field--check input[type=checkbox] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	accent-color: #5e696e;
}

.szd-field--check a { color: #5e696e; }

.szd-contact__submit {
	padding: 13px 40px;
	background: #4c565b;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.szd-contact__submit:hover { background: #333a3e; }

/* --- Honeypot: elrejtve, de nem `display:none` --- */
.szd-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Térkép --- */
.szd-contact__map {
	margin-top: 26px;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #e3e8ee;
	line-height: 0;
}

@media (max-width: 900px) {
	.szd-contact { grid-template-columns: 1fr; }
}

/* Térkép hiba – csak adminnak látszik */
.szd-contact__map-error {
	margin: 12px 0;
	padding: 10px 14px;
	background: #f9e7e9;
	border-left: 4px solid #c42331;
	border-radius: 3px;
	font-size: 13px;
	color: #7a271a;
}

/* =============================================================================
   KOSÁR
   -----------------------------------------------------------------------------
   A WooCommerce sablonjait NEM írjuk felül – csak stílust adunk. Így a
   WooCommerce frissítései nem törik el az oldalt.
   ========================================================================== */

.woocommerce-cart .szd-layout__main,
.woocommerce-checkout .szd-layout__main,
.woocommerce-account .szd-layout__main { min-width: 0; }

/* --- Táblázat --- */
.woocommerce-cart table.shop_table {
	width: 100%;
	border: 1px solid #e5e9ef;
	border-radius: 6px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin-bottom: 24px;
}

.woocommerce-cart table.shop_table thead th {
	background: #f6f7f8;
	padding: 14px 16px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #3b4247;
	text-align: left;
	border-bottom: 2px solid #e6e8ea;
}

.woocommerce-cart table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid #eef1f5;
	vertical-align: middle;
}

.woocommerce-cart table.shop_table tbody tr:last-child td { border-bottom: 0; }

.woocommerce-cart .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border: 1px solid #eef1f5;
	border-radius: 4px;
}

.woocommerce-cart .product-name a {
	color: #3b4247;
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-cart .product-name a:hover { color: #5e696e; }

.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal { font-weight: 700; color: #3b4247; white-space: nowrap; }

.woocommerce-cart .quantity input.qty {
	width: 72px;
	padding: 9px 6px;
	text-align: center;
	border: 1px solid #d5dbe3;
	border-radius: 6px;
}

/* Törlés gomb */
.woocommerce-cart a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f9e7e9 !important;
	color: #c42331 !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}
.woocommerce-cart a.remove:hover { background: #c42331 !important; color: #fff !important; }

/* --- Kupon --- */
.woocommerce-cart .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
}

.woocommerce-cart .coupon input#coupon_code {
	width: 220px;
	padding: 11px 12px;
	border: 1px solid #d5dbe3;
	border-radius: 6px;
}

/* --- Összegzés --- */
.cart-collaterals { display: flex; justify-content: flex-end; }

.cart_totals {
	width: 100%;
	max-width: 440px;
	border: 1px solid #e5e9ef;
	border-radius: 6px;
	padding: 20px 22px;
	background: #fbfcfe;
}

.cart_totals h2 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #3b4247;
}

.cart_totals table { width: 100%; }
.cart_totals th, .cart_totals td { padding: 9px 0; text-align: left; }
.cart_totals th { font-weight: 600; color: #4b5563; }
.cart_totals td { text-align: right; font-weight: 600; }

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-top: 2px solid #e6e8ea;
	padding-top: 14px;
	font-size: 19px;
	color: #c42331;
	font-weight: 800;
}

/* --- Gombok --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	background: #5e696e;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: #4c565b; color: #fff; }

.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: .5; cursor: default; }

/* A "Tovább a pénztárhoz" a fő cselekvés */
.wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 16px;
	background: #c42331;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.wc-proceed-to-checkout a.checkout-button:hover { background: #a51d2a; }

/* Másodlagos gombok (Kosár frissítése, Kupon) */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart button[name="apply_coupon"] {
	background: #eff1f2;
	color: #4c565b;
	border: 1px solid #dcdfe2;
}

.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart button[name="apply_coupon"]:hover { background: #e6e8ea; color: #4c565b; }

/* --- Üres kosár --- */
.woocommerce .cart-empty {
	padding: 28px;
	background: #f6f7f8;
	border-radius: 6px;
	text-align: center;
	font-size: 16px;
	color: #3b4247;
}

.woocommerce .return-to-shop { text-align: center; margin-top: 16px; }

@media (max-width: 780px) {
	.woocommerce-cart table.shop_table thead { display: none; }
	.woocommerce-cart table.shop_table tr { display: block; border-bottom: 1px solid #eef1f5; padding: 8px 0; }
	.woocommerce-cart table.shop_table td { display: flex; justify-content: space-between; align-items: center; border: 0; padding: 8px 12px; }
	.woocommerce-cart table.shop_table td::before { content: attr(data-title); font-weight: 600; color: #6b7280; font-size: 12px; }
	.woocommerce-cart td.product-remove::before { content: ""; }
	.cart_totals { max-width: none; }
}

/* =============================================================================
   PÉNZTÁR
   ========================================================================== */

.woocommerce-checkout .woocommerce { display: block; }

/* -----------------------------------------------------------------------------
   A WooCommerce pénztár jelölése:

     form.checkout
       ├── #customer_details        (benne .col-1 számlázás + .col-2 szállítás)
       ├── h3#order_review_heading  "A rendelésed"
       └── #order_review            a táblázat + fizetési módok

   ⚠️ CSAPDA: ha a fejléc és a táblázat KÜLÖN grid-sorba kerül, a jobb oldali
   oszlop szétesik (a fejléc fent, a táblázat lent, köztük lyuk). Ezért
   mindkettőnek EXPLICIT sort adunk, a bal oszlop pedig átfogja mindkettőt.
   -------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	grid-template-rows: auto 1fr;
	gap: 0 32px;
	align-items: start;
}

.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	min-width: 0;
}

.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
}

/* A kupon-sáv teljes szélességben, a rács FÖLÖTT (a form-on kívül van) */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon { margin-bottom: 22px; }

/* -----------------------------------------------------------------------------
   A `#customer_details` belső kétoszlopos szerkezete (.col2-set).
   A WooCommerce alapból egymás mellé teszi a számlázást és a szállítást.
   Nálunk a bal oszlop szűk, ezért EGYMÁS ALÁ tesszük.
   -------------------------------------------------------------------------- */

.woocommerce-checkout #customer_details .col2-set {
	display: block;
	width: 100%;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0 0 24px;
	padding: 0;
}

.woocommerce-checkout #customer_details .col-2:last-child { margin-bottom: 0; }

/* Két mező egy sorban ott, ahol a WooCommerce is így kéri */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	display: inline-flex;
	width: calc(50% - 6px);
	vertical-align: top;
}

.woocommerce-checkout .form-row-first { margin-right: 8px; }
.woocommerce-checkout .form-row-wide { width: 100%; }

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 16px;
	padding-bottom: 10px;
	font-size: 17px;
	font-weight: 700;
	color: #3b4247;
	border-bottom: 2px solid #e6e8ea;
}

/* Mezők */
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.woocommerce form .form-row .required { color: #c42331; text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	padding: 11px 12px;
	border: 1px solid #d5dbe3;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: 2px solid #5e696e;
	outline-offset: -2px;
	border-color: #5e696e;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #c42331; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: #2fa84f; }

/* Rendelés összegzése – ragadós, hogy görgetéskor látszódjon */
.woocommerce-checkout #order_review {
	position: sticky;
	top: 20px;
	border: 1px solid #e5e9ef;
	border-radius: 6px;
	padding: 20px;
	background: #fbfcfe;
}

.woocommerce-checkout table.shop_table { border: 0; margin-bottom: 16px; }
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td { padding: 9px 0; border-bottom: 1px solid #eef1f5; }
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
	padding-top: 14px;
	border-top: 2px solid #e6e8ea;
	border-bottom: 0;
	font-size: 18px;
	font-weight: 800;
	color: #c42331;
}

/* Fizetési módok */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 0 0 16px;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: 8px;
	padding: 14px 16px;
	border: 1px solid #dbe1e8;
	border-radius: 6px;
	background: #fff;
	transition: border-color .12s, background .12s;
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: #5e696e;
	background: #f5f6f7;
}

.woocommerce-checkout #payment ul.payment_methods label {
	font-weight: 600;
	color: #3b4247;
	cursor: pointer;
}

.woocommerce-checkout #payment .payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	background: #eff1f2;
	border-radius: 4px;
	font-size: 13px;
	color: #374151;
}

.woocommerce-checkout #payment .payment_box::before { display: none; }

/* A rendelés véglegesítése – a legfontosabb gomb az oldalon */
.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	padding: 17px;
	background: #c42331;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.woocommerce-checkout #place_order:hover { background: #a51d2a; }

/* Értesítések */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 14px 18px;
	margin-bottom: 20px;
	border-radius: 6px;
	border-left: 4px solid;
	list-style: none;
}

.woocommerce-message { background: #ecfdf3; border-color: #2fa84f; color: #14532d; }
.woocommerce-info    { background: #eff1f2; border-color: #5e696e; color: #3b4247; }
.woocommerce-error   { background: #f9e7e9; border-color: #c42331; color: #7a271a; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { grid-column: 1; }
	.woocommerce-checkout #order_review { position: static; }
}

/* --- Pénztár: rendelés-összegzés termékei --- */
.woocommerce-checkout #order_review table.shop_table td.product-name {
	font-size: 13px;
	line-height: 1.45;
	color: #374151;
}

.woocommerce-checkout #order_review .product-quantity {
	font-weight: 700;
	color: #3b4247;
	white-space: nowrap;
}

.woocommerce-checkout #order_review table.shop_table td.product-total {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
	color: #3b4247;
}

.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: 11px;
	padding: 10px 0;
	background: transparent;
	border-bottom: 2px solid #e6e8ea;
}

/* A "Szállítás másik címre?" jelölőnégyzet ne csússzon el */
.woocommerce-checkout #ship-to-different-address {
	margin: 0 0 14px;
	font-size: 15px;
}

.woocommerce-checkout #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: #3b4247;
	cursor: pointer;
}

.woocommerce-checkout #ship-to-different-address input { width: 16px; height: 16px; }

/* Megjegyzés mező */
.woocommerce-checkout .woocommerce-additional-fields textarea {
	min-height: 96px;
	font-family: inherit;
}

/* =============================================================================
   PÉNZTÁR – vásárló típusa (magánszemély / cég)
   ========================================================================== */

.szd-buyer-type {
	padding: 14px 16px;
	margin-bottom: 20px !important;
	background: #f6f7f8;
	border: 1px solid #e6e8ea;
	border-radius: 6px;
}

.szd-buyer-type > label:first-child {
	margin-bottom: 10px !important;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #3b4247;
}

.szd-buyer-type input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 0 8px 0 0;
	accent-color: #5e696e;
	vertical-align: middle;
}

.szd-buyer-type label.radio {
	display: inline-flex;
	align-items: center;
	margin: 0 24px 0 0;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
}

/* Céges mezők – a JS rejti/mutatja */
.szd-company-field .description {
	margin-top: 4px;
	font-size: 12px;
	color: #6b7280;
}

.szd-company-field input {
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

/* =============================================================================
   KERESÉSI TALÁLATOK
   ========================================================================== */

.szd-search { padding-bottom: 40px; }

.szd-search__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	align-items: center;
	padding: 14px 18px;
	margin-bottom: 18px;
	background: #eff1f2;
	border: 1px solid #dcdfe2;
	border-radius: 6px;
}

.szd-search__count {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #3b4247;
}

.szd-search__legend { margin: 0; font-size: 13px; color: #4b5563; }
.szd-search__legend-mark { color: #2fa84f; }

/* --- Releváns kategóriák --- */
.szd-search__cats {
	padding: 16px 18px;
	margin-bottom: 22px;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	background: #fff;
}

.szd-search__cats-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #3b4247;
}

.szd-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.szd-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px 7px 14px;
	background: #5e696e;
	color: #fff;
	border-radius: 999px;
	font-size: 12.5px;
	text-decoration: none;
	transition: background .12s;
}

.szd-chip:hover { background: #4c565b; color: #fff; }

.szd-chip__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: rgba(255,255,255,.22);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

/* --- Készleten: zöld háttér (PS-paritás) --- */
.szd-search .szd-instock .szd-product-card,
.szd-search li.product.szd-instock {
	background: #f2fbf4;
	border-color: #cdeed6;
}

/* --- Nincs találat --- */
.szd-search__none,
.szd-search__empty {
	padding: 32px 0;
}

.szd-search__none h1,
.szd-search__empty h1 {
	margin: 0 0 14px;
	font-size: 24px;
	color: #3b4247;
}

.szd-search__none em { color: #c42331; font-style: normal; }

.szd-search__tips {
	margin: 0 0 24px;
	padding-left: 20px;
	color: #4b5563;
	font-size: 14px;
	line-height: 1.9;
}

.szd-search__suggest-title {
	margin: 34px 0 16px;
	padding-bottom: 10px;
	font-size: 16px;
	color: #3b4247;
	border-bottom: 2px solid #e6e8ea;
}

/* Lapozó */
.szd-search .navigation.pagination { margin-top: 28px; }

/* =============================================================================
   ÉLŐ RAKTÁRKÉSZLET (bolti nézet)
   -----------------------------------------------------------------------------
   Szándékosan feltűnő: az eladónak azonnal látnia kell, és nem szabad
   összekeverni a vevőnek szánt "Raktáron" felirattal.
   ========================================================================== */

.szd-live-stock {
	margin-top: 8px;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	text-align: center;
	letter-spacing: .02em;
}

.szd-live-stock.is-loading { background: #f1f3f5; color: #8c8f94; font-weight: 400; }
.szd-live-stock.is-in      { background: #e7f7ec; color: #146c2e; border: 1px solid #b7e4c4; }
.szd-live-stock.is-out     { background: #f9e7e9; color: #8a1c13; border: 1px solid #f3c2be; }
.szd-live-stock.is-unknown { background: #fff8e6; color: #7a5a00; border: 1px solid #f2dfa8; }
.szd-live-stock.is-error   { background: #f1f3f5; color: #6b7280; border: 1px dashed #cbd5e1; }

/* Termékoldalon nagyobb */
.single-product .summary .szd-live-stock {
	margin: 14px 0;
	padding: 12px;
	font-size: 15px;
}

/* Bolti nézet jelzése */
.szd-staff-badge {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9998;
	padding: 6px 14px;
	background: #7a5a00;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	border-top-right-radius: 4px;
}

/* =============================================================================
   BLOG
   ========================================================================== */

.szd-layout.szd-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
	padding-bottom: 44px;
}

.szd-blog-heading {
	margin: 0 0 22px;
	padding-bottom: 12px;
	font-size: 26px;
	color: #3b4247;
	border-bottom: 2px solid #e6e8ea;
}

.szd-blog-cat-desc { margin-bottom: 22px; color: #4b5563; font-size: 14px; }
.szd-blog-empty { padding: 30px; background: #f6f7f8; border-radius: 6px; text-align: center; }

/* --- Cikkoldal --- */
.szd-post { background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; padding: 26px 30px 30px; }

.szd-post__title { margin: 0 0 12px; font-size: 28px; line-height: 1.25; color: #3b4247; }

.szd-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	padding-bottom: 18px;
	border-bottom: 1px solid #eef1f5;
	font-size: 12.5px;
	color: #8b96a5;
}

.szd-post__meta a { color: #5e696e; text-decoration: none; }
.szd-post__sep { color: #cbd5e1; }

.szd-post__cover { margin: 22px 0; }
.szd-post__cover img { width: 100%; height: auto; border-radius: 4px; }

.szd-post__content { margin-top: 22px; font-size: 15px; line-height: 1.75; color: #333; }
.szd-post__content h2 { margin: 30px 0 12px; font-size: 21px; color: #3b4247; }
.szd-post__content h3 { margin: 24px 0 10px; font-size: 17px; color: #3b4247; }
.szd-post__content p { margin: 0 0 16px; }
.szd-post__content img { max-width: 100%; height: auto; border-radius: 4px; }
.szd-post__content a { color: #5e696e; }
.szd-post__content ul, .szd-post__content ol { margin: 0 0 16px; padding-left: 24px; }
.szd-post__content li { margin-bottom: 6px; }

.szd-post__content blockquote {
	margin: 20px 0;
	padding: 14px 20px;
	background: #f6f7f8;
	border-left: 4px solid #5e696e;
	border-radius: 0 4px 4px 0;
}

.szd-post__content table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.szd-post__content th, .szd-post__content td { padding: 9px 12px; border: 1px solid #e3e6ea; }
.szd-post__content th { background: #f6f7f8; color: #3b4247; }

.szd-post__share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid #eef1f5;
}

.szd-post__share-label { font-size: 13px; font-weight: 600; color: #6b7280; }

.szd-share {
	padding: 7px 14px;
	border-radius: 4px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
}

.szd-share--fb { background: #1877f2; }
.szd-share--fb:hover { background: #145fc4; color: #fff; }
.szd-share--mail { background: #6b7280; }
.szd-share--mail:hover { background: #4b5563; color: #fff; }

/* --- Előző / következő --- */
.szd-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 22px;
}

.szd-post-nav__link {
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	text-decoration: none;
}

.szd-post-nav__link:hover { border-color: #5e696e; }
.szd-post-nav__link--next { text-align: right; grid-column: 2; }

.szd-post-nav__dir { display: block; font-size: 11px; text-transform: uppercase; color: #8b96a5; letter-spacing: .04em; }
.szd-post-nav__title { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 600; color: #3b4247; line-height: 1.35; }

@media (max-width: 1024px) {
	.szd-layout.szd-blog-layout { grid-template-columns: 1fr; }
	.szd-blog-sidebar { flex-direction: row; flex-wrap: wrap; }
	.szd-blog-widget { flex: 1 1 280px; }
}

@media (max-width: 640px) {
	.szd-blog-card { grid-template-columns: 1fr; }
	.szd-blog-card__media img { max-height: 220px; }
	.szd-post { padding: 20px; }
	.szd-post__title { font-size: 22px; }
	.szd-post-nav { grid-template-columns: 1fr; }
	.szd-post-nav__link--next { grid-column: 1; text-align: left; }
}

/* =============================================================================
   BLOG LISTA – PrestaShop-paritás (kétoszlopos kártyarács)
   ========================================================================== */

.szd-bcount {
	padding: 10px 16px;
	margin-bottom: 16px;
	background: #f5f6f7;
	border: 1px solid #e3e6ea;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
}

.szd-blog-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
}

.szd-bcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 3px;
	overflow: hidden;
}

/* Sötét fejlécsáv a címmel */
.szd-bcard__head {
	margin: 0;
	padding: 13px 16px;
	background: #3b4247;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .01em;
	text-align: center;
}

.szd-bcard__head a { color: #fff; text-decoration: none; }
.szd-bcard__head a:hover { color: #9fc4ef; }

/* Kategóriasor mappa-ikonnal */
.szd-bcard__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	padding: 12px 16px 0;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.szd-bcard__icon { color: #6b7280; flex: 0 0 auto; }
.szd-bcard__comma { color: #9ca3af; }

.szd-bcard__cats a {
	color: #5e696e;
	font-weight: 600;
	text-decoration: underline;
}

.szd-bcard__cats a:hover { color: #4c565b; }

/* Kép balra, kivonat jobbra */
.szd-bcard__row {
	display: grid;
	grid-template-columns: 42% minmax(0, 1fr);
	gap: 14px;
	padding: 14px 16px;
	flex: 1;
}

.szd-bcard__photo { display: block; line-height: 0; }

.szd-bcard__photo img {
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.szd-bcard__body {
	font-size: 12.5px;
	font-style: italic;
	line-height: 1.6;
	color: #4b5563;
}

.szd-bcard__body.is-wide { grid-column: 1 / -1; }

.szd-bcard__more-link {
	display: inline;
	margin-left: 4px;
	color: #5e696e;
	font-style: normal;
	font-weight: 600;
	text-decoration: none;
}

.szd-bcard__more-link:hover { text-decoration: underline; }

/* "Elolvasom a cikket" gomb */
.szd-bcard__btn {
	align-self: flex-end;
	margin: 0 16px 14px;
	padding: 7px 16px;
	background: #3b4247;
	color: #fff;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: background .12s;
}

.szd-bcard__btn:hover { background: #5e696e; color: #fff; }

/* Lábléc: dátum + kommentszám */
.szd-bcard__infos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 16px;
	border-top: 1px solid #eef1f5;
	background: #fafbfc;
	font-size: 11.5px;
	color: #6b7280;
}

.szd-bcard__date,
.szd-bcard__comments {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.szd-bcard__comments { color: #6b7280; text-decoration: none; }
.szd-bcard__comments:hover { color: #5e696e; }

/* =============================================================================
   BLOG OLDALSÁV – PrestaShop-paritás
   ========================================================================== */

.szd-blog-sidebar { display: flex; flex-direction: column; gap: 18px; }

.szd-bwidget {
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 3px;
	overflow: hidden;
}

.szd-bwidget__title {
	margin: 0;
	padding: 12px 16px;
	background: #3b4247;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.szd-bwidget__body { padding: 14px 16px 16px; }

/* Kategóriák: egymás mellé futó linkek, nem lista */
.szd-bcats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-bottom: 14px;
}

.szd-bcats__link {
	color: #5e696e;
	font-size: 13px;
	text-decoration: underline;
}

.szd-bcats__link:hover { color: #4c565b; }
.szd-bcats__link.is-current { color: #3b4247; font-weight: 700; text-decoration: none; }

.szd-bcats__all {
	display: block;
	padding: 10px;
	background: #5e696e;
	color: #fff;
	border-radius: 3px;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.szd-bcats__all:hover { background: #4c565b; color: #fff; }

/* Legutóbbi posztok */
.szd-brecent { margin: 0; padding: 10px; list-style: none; }

.szd-brecent__item {
	display: flex;
	gap: 10px;
	padding: 8px;
	border-radius: 3px;
}

.szd-brecent__item:hover { background: #f6f7f8; }

.szd-brecent__thumb { flex: 0 0 62px; line-height: 0; }

.szd-brecent__thumb img {
	width: 62px;
	height: 50px;
	object-fit: cover;
	border-radius: 2px;
}

.szd-brecent__body { min-width: 0; }

.szd-brecent__title {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #3b4247;
	text-decoration: none;
}

.szd-brecent__title:hover { color: #5e696e; }

.szd-brecent__meta {
	display: flex;
	gap: 12px;
	margin-top: 5px;
	font-size: 11px;
	color: #8b96a5;
}

.szd-brecent__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Kommentek */
.szd-bcomments { margin: 0; padding: 10px; list-style: none; }
.szd-bcomments a { display: block; padding: 8px; border-radius: 3px; text-decoration: none; }
.szd-bcomments a:hover { background: #f6f7f8; }
.szd-bcomments strong { display: block; font-size: 12.5px; color: #3b4247; }
.szd-bcomments span { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; line-height: 1.4; }

@media (max-width: 1024px) {
	.szd-blog-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.szd-bcard__row { grid-template-columns: 1fr; }
}

/* =============================================================================
   KOSÁR TOAST
   ========================================================================== */

.szd-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.szd-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 320px;
	max-width: 420px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #cdeed6;
	border-left: 4px solid #2fa84f;
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(23, 51, 92, .16);
	transform: translateY(14px);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
	pointer-events: auto;
}

.szd-toast.is-visible { transform: translateY(0); opacity: 1; }

.szd-toast__icon { flex: 0 0 auto; color: #2fa84f; }
.szd-toast__body { flex: 1; min-width: 0; }

.szd-toast__title {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: #3b4247;
}

.szd-toast__name {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: #6b7280;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.szd-toast__action {
	flex: 0 0 auto;
	padding: 8px 14px;
	background: #5e696e;
	color: #fff;
	border-radius: 4px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.szd-toast__action:hover { background: #4c565b; color: #fff; }

.szd-toast__close {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #9ca3af;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.szd-toast__close:hover { color: #4b5563; }

@media (max-width: 560px) {
	.szd-toasts { right: 12px; left: 12px; bottom: 12px; }
	.szd-toast { min-width: 0; }
	.szd-toast__action { padding: 8px 10px; }
}

/* =============================================================================
   404
   ========================================================================== */

.szd-layout.szd-404-layout { grid-template-columns: minmax(0, 1fr); }

.szd-404 { padding: 20px 0 50px; }

.szd-404__hero {
	padding: 44px 30px;
	margin-bottom: 34px;
	background: linear-gradient(180deg, #f6f7f8 0%, #fff 100%);
	border: 1px solid #e6e8ea;
	border-radius: 8px;
	text-align: center;
}

.szd-404__code {
	font-size: 74px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: #e6e8ea;
}

.szd-404__title { margin: 10px 0 8px; font-size: 26px; color: #3b4247; }
.szd-404__lead { margin: 0 auto 22px; max-width: 520px; color: #4b5563; font-size: 14.5px; }

.szd-404__search {
	display: flex;
	gap: 0;
	max-width: 520px;
	margin: 0 auto 20px;
}

.szd-404__search input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #dcdfe2;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	font-size: 14px;
}

.szd-404__search input:focus { outline: 2px solid #5e696e; outline-offset: -2px; }

.szd-404__search button {
	height: 46px;
	padding: 0 22px;
	background: #c42331;
	color: #fff;
	border: 0;
	border-radius: 0 4px 4px 0;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.szd-404__search button:hover { background: #c42331; }

.szd-404__links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.szd-404__btn {
	padding: 11px 22px;
	background: #5e696e;
	color: #fff;
	border-radius: 4px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.szd-404__btn:hover { background: #4c565b; color: #fff; }

.szd-404__btn--ghost { background: transparent; color: #5e696e; border: 1px solid #5e696e; }
.szd-404__btn--ghost:hover { background: #eff1f2; color: #4c565b; }

.szd-404__section { margin-bottom: 34px; }

.szd-404__section-title {
	margin: 0 0 16px;
	padding-bottom: 10px;
	font-size: 17px;
	color: #3b4247;
	border-bottom: 2px solid #e6e8ea;
}

.szd-404__cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.szd-404__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 4px;
	color: #3b4247;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.szd-404__cats a:hover { border-color: #5e696e; color: #5e696e; }

.szd-404__cats em {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: #6b7280;
	background: #eef1f5;
	padding: 2px 8px;
	border-radius: 999px;
}

/* =============================================================================
   FIÓKOM
   ========================================================================== */

/*
 * ⚠️ A `.szd-layout` külső rácsa itt is hat. A Fiókom oldalnak nincs
 * `.szd-sidebar`-ja, így a `:not(:has())` szabály egy oszlopra állítja –
 * ez jó. De a BELSŐ rácsot külön kell kikényszeríteni, mert a WooCommerce
 * alap CSS-e float-okkal dolgozik (`nav { float: left; width: 30% }`),
 * és a float erősebb, mint egy nem alkalmazott grid.
 */
/*
 * ⚠️ A KÜLSŐ RÁCS KIKAPCSOLÁSA.
 *
 * A Fiókom oldalon a `.szd-layout__main` nincs jelen, ezért a cím, a
 * navigáció és a tartalom KÖZVETLEN grid-elemek lettek a `.szd-layout`
 * `260px 1fr` rácsában:
 *
 *     [ cím        ] [ navigáció ]
 *     [ tartalom   ]
 *
 * Innen a "nav jobbra, tartalom 260 px-en balra" kép. A megoldás nem
 * a belső rács erősítése, hanem a külső KIKAPCSOLÁSA: itt `block` kell.
 */
/*
 * ⚠️ A TELJES LÁNC (a fiokom.txt DOM-jából):
 *
 *     .szd-layout           <- header.php,  grid: 260px 1fr
 *       .szd-layout__main   <- EGYETLEN gyerek -> a 260 px-es oszlopba esik
 *         .szd-page         <- page.php
 *           article > .entry-content > div.woocommerce
 *
 * A külső rács kategórialaphoz készült (bal oldali kategóriafa). A statikus
 * oldalakon nincs oldalsáv, tehát ott BLOKK kell – különben a tartalom
 * beszorul az első, 260 pixeles oszlopba.
 */
.woocommerce-account .szd-layout,
.woocommerce-cart .szd-layout,
.woocommerce-checkout .szd-layout,
.page:not(.woocommerce-page) .szd-layout {
	display: block;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 0;
}

.woocommerce-account .szd-layout__main,
.woocommerce-cart .szd-layout__main,
.woocommerce-checkout .szd-layout__main,
.page:not(.woocommerce-page) .szd-layout__main {
	width: 100%;
	max-width: none;
}

.woocommerce-account .entry-content > div.woocommerce,
.woocommerce-account div.woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	padding: 16px 0 50px;
	max-width: 100%;
}

/* A `.szd-page` ne dupla-korlátozza a szélességet */
.woocommerce-account .szd-page,
.woocommerce-cart .szd-page,
.woocommerce-checkout .szd-page { max-width: none; padding-inline: 16px; }

/* Az üzenetek (pl. "Sikeres mentés") a rács fölött, teljes szélességben */
.woocommerce-account div.woocommerce > .woocommerce-message,
.woocommerce-account div.woocommerce > .woocommerce-error,
.woocommerce-account div.woocommerce > .woocommerce-notice,
.woocommerce-account div.woocommerce > .woocommerce-info {
	grid-column: 1 / -1;
	margin: 0 0 4px;
}

/* A WooCommerce float-jai kikapcsolva – a rács rendezi el őket. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* Bejelentkezés előtt egy oszlop (nincs navigáció) */
.woocommerce-account:not(.logged-in) div.woocommerce { grid-template-columns: minmax(0, 1fr); }

.woocommerce-account .woocommerce-MyAccount-navigation {
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid #eef1f5; }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 13px 18px;
	color: #374151;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .12s;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: #f6f7f8; color: #5e696e; }

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: #3b4247;
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	padding: 26px 28px;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: 0 0 16px;
	padding-bottom: 10px;
	font-size: 17px;
	color: #3b4247;
	border-bottom: 2px solid #e6e8ea;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	padding: 11px 12px;
	background: #f6f7f8;
	color: #3b4247;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-align: left;
	border-bottom: 2px solid #e6e8ea;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 12px;
	border-bottom: 1px solid #eef1f5;
	font-size: 13.5px;
}

/* Bejelentkező / regisztráló doboz */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	padding: 24px 26px;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button {
	background: #5e696e !important;
	color: #fff !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
}

.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-Button:hover { background: #4c565b !important; }

/* Az oldal címe teljes szélességben, a rács fölött */
.woocommerce-account .szd-page__title { margin: 24px 0 4px; }

@media (max-width: 900px) {
	.woocommerce-account div.woocommerce { grid-template-columns: 1fr; }
}


/*
 * Ugyanez a csapda a Kosár és a Pénztár oldalon: ott sincs `.szd-layout__main`,
 * tehát a külső 260px-es rács szétdobná a tartalmat.
 */
.woocommerce-page.woocommerce-order-received .szd-layout { display: block; }

/* =============================================================================
   STATIKUS OLDALAK KONTÉNERE
   -----------------------------------------------------------------------------
   A `page.php` korábban a `.site-main > .container` osztályokat használta,
   amikre nem volt szabályunk. Innen a Fiókom szétesett elrendezése.
   ========================================================================== */

.szd-page {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 16px 50px;
}

.szd-page__main { width: 100%; min-width: 0; }

.szd-page__title {
	margin: 26px 0 18px;
	font-size: 26px;
	line-height: 1.25;
	color: #3b4247;
}

.szd-page__title--wc { margin-bottom: 6px; }

.szd-page__content { font-size: 15px; line-height: 1.75; color: #333; }
.szd-page__content h2 { margin: 28px 0 12px; font-size: 20px; color: #3b4247; }
.szd-page__content h3 { margin: 22px 0 10px; font-size: 17px; color: #3b4247; }
.szd-page__content p { margin: 0 0 15px; }
.szd-page__content a { color: #5e696e; }
.szd-page__content img { max-width: 100%; height: auto; }
.szd-page__content ul, .szd-page__content ol { margin: 0 0 15px; padding-left: 24px; }
.szd-page__content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.szd-page__content th, .szd-page__content td { padding: 9px 12px; border: 1px solid #e3e6ea; }
.szd-page__content th { background: #f6f7f8; color: #3b4247; text-align: left; }

/* A régi váz-osztályok, ha valahol maradtak */
.site-main > .container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
}


/* --- Fiókom űrlapok: a WooCommerce `.clear` és a fél-széles mezők --- */

.woocommerce-account .woocommerce-MyAccount-content .clear { display: none; }

.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
	display: inline-block;
	width: calc(50% - 7px);
	vertical-align: top;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row-first { margin-right: 10px; }
.woocommerce-account .woocommerce-MyAccount-content .form-row-wide { width: 100%; }

.woocommerce-account .woocommerce-MyAccount-content label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #dcdfe2;
	border-radius: 4px;
	font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content .password-input { display: block; position: relative; }

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: 24px 0;
	padding: 18px 20px;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
}

.woocommerce-account .woocommerce-MyAccount-content legend {
	padding: 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #3b4247;
}

.woocommerce-account .woocommerce-MyAccount-content em {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #6b7280;
	font-style: normal;
}

/* =============================================================================
   FIÓKOM – SZERKEZETI SZELEKTOROK
   -----------------------------------------------------------------------------
   ⚠️ Az összes korábbi szabály a `body.woocommerce-account` osztályra épült.
   Ha az bármiért hiányzik (téma-támogatás, korai body_class hívás), egyik sem
   érvényesül – és pontosan ezt láttuk.

   Ezek a szabályok a DOM SZERKEZETÉRE hivatkoznak, amit a fiokom.txt mutat:

       .szd-page__content > .woocommerce
         ├── nav.woocommerce-MyAccount-navigation
         └── div.woocommerce-MyAccount-content

   Nem függenek semmilyen body osztálytól.
   ========================================================================== */

/* A külső rács blokk, ha statikus oldalt tartalmaz */
.szd-layout:has(> .szd-layout__main > .szd-page) {
	display: block;
	max-width: 1280px;
	margin-inline: auto;
}

/* Tartalék `:has()` nélküli böngészőkre */
.szd-layout__main:only-child { width: 100%; }

.szd-page { max-width: none; }

/* A Fiókom belső rácsa */
.szd-page__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	padding: 14px 0 50px;
}

/* A WooCommerce float-jai mindenképp ki */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* Navigáció */
.woocommerce-MyAccount-navigation {
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	overflow: hidden;
}

.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid #eef1f5; }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 13px 18px;
	color: #374151;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover { background: #f6f7f8; color: #5e696e; }
.woocommerce-MyAccount-navigation .is-active a { background: #3b4247; color: #fff; }

/* Tartalom */
.woocommerce-MyAccount-content {
	padding: 24px 26px !important;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
}

/* Űrlapok */
.woocommerce-MyAccount-content .clear { display: none; }

.woocommerce-MyAccount-content .form-row-first,
.woocommerce-MyAccount-content .form-row-last {
	display: inline-block;
	width: calc(50% - 7px);
	vertical-align: top;
	margin-bottom: 14px;
}

.woocommerce-MyAccount-content .form-row-first { margin-right: 10px; }
.woocommerce-MyAccount-content .form-row-wide { display: block; width: 100%; margin-bottom: 14px; }

.woocommerce-MyAccount-content label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.woocommerce-MyAccount-content .required { color: #c42331; }

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #dcdfe2;
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus { outline: 2px solid #5e696e; outline-offset: -2px; }

.woocommerce-MyAccount-content .password-input { display: block; position: relative; }

.woocommerce-MyAccount-content fieldset {
	margin: 22px 0;
	padding: 18px 20px;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
}

.woocommerce-MyAccount-content legend {
	padding: 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #3b4247;
}

.woocommerce-MyAccount-content em { display: block; margin-top: 4px; font-size: 12px; color: #6b7280; font-style: normal; }

.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button.button {
	padding: 11px 22px;
	background: #5e696e;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover { background: #4c565b; }

/* Táblázatok (rendelések, letöltések) */
.woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; }

.woocommerce-MyAccount-content table.shop_table th {
	padding: 11px 12px;
	background: #f6f7f8;
	color: #3b4247;
	font-size: 12px;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 2px solid #e6e8ea;
}

.woocommerce-MyAccount-content table.shop_table td {
	padding: 12px;
	border-bottom: 1px solid #eef1f5;
	font-size: 13.5px;
}

@media (max-width: 900px) {
	.szd-page__content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   FIÓKOM – VÉGLEGES ELRENDEZÉS
   -----------------------------------------------------------------------------
   A rács él, de az elemek rossz cellába kerülnek. Ahelyett, hogy a DOM
   sorrendjére bíznánk magunkat, EXPLICIT megmondjuk, melyik hova megy.
   ========================================================================== */

.woocommerce-account .szd-page__content .woocommerce {
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr) !important;
	grid-template-rows: auto !important;
	gap: 28px !important;
	align-items: start !important;
	padding: 14px 0 50px !important;
	width: 100% !important;
	max-width: 100% !important;
}

.woocommerce-account .szd-page__content .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1 !important;
	grid-row: 1 !important;
}

.woocommerce-account .szd-page__content .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2 !important;
	grid-row: 1 !important;
}

/* Az értesítések a rács fölött, teljes szélességben */
.woocommerce-account .szd-page__content .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .szd-page__content .woocommerce > .woocommerce-message,
.woocommerce-account .szd-page__content .woocommerce > .woocommerce-error {
	grid-column: 1 / -1 !important;
}

@media (max-width: 900px) {
	.woocommerce-account .szd-page__content .woocommerce {
		grid-template-columns: 1fr !important;
	}

	.woocommerce-account .szd-page__content .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account .szd-page__content .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}

/* =============================================================================
   MIGRÁLT VÁSÁRLÓ – első belépés
   ========================================================================== */

.szd-reset-link {
	display: inline-block;
	margin-top: 8px;
	padding: 8px 16px;
	background: #5e696e;
	color: #fff !important;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none !important;
}

.szd-reset-link:hover { background: #4c565b; }

/* A migrált-vásárló értesítés a bejelentkezési hibában */
.woocommerce-error li[data-id="szd_migrated_customer"],
.woocommerce-error .szd_migrated_customer {
	list-style: none;
}

.szd-migrated-notice {
	margin-bottom: 16px;
	padding: 12px 16px;
	background: #eff1f2;
	border: 1px solid #dcdfe2;
	border-left: 4px solid #5e696e;
	border-radius: 4px;
	font-size: 14px;
	color: #3b4247;
}

/* =============================================================================
   FŐOLDAL – a kétoszlopos rács visszakényszerítése
   -----------------------------------------------------------------------------
   A főoldalon VAN oldalsáv (a kategóriafa, `.szd-sidebar`), és mellette a
   `.szd-home` blokkok. A `:has()` alapú szabályok viszont – főleg a Fiókomhoz
   adott `display:block` – egyoszlopossá tehetik a rácsot, ilyenkor az
   oldalsáv kitölti a teljes szélességet, a home blokkok pedig alá csúsznak.

   A `body.home` osztályra explicit, `:has()`-tól független rácsot adunk.
   Ez felülír minden korábbi layout-szabályt a főoldalon.
   ========================================================================== */

body.home .szd-layout {
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr) !important;
	gap: 24px !important;
	align-items: start !important;
}

body.home .szd-layout > .szd-sidebar {
	grid-column: 1 !important;
}

body.home .szd-layout > .szd-layout__main {
	grid-column: 2 !important;
	min-width: 0 !important;
}

@media (max-width: 992px) {
	body.home .szd-layout {
		grid-template-columns: 1fr !important;
	}
	body.home .szd-layout > .szd-layout__main {
		grid-column: 1 !important;
	}

	/* ⚠️ A bal oldali kategóriafa (`.szd-sidebar`) mobilon REJTVE minden
	   oldalon: a kategóriák a hamburger MENÜ-ben vannak. A főoldalon ez
	   eddig a home blokkok alatt, a footer felett jelent meg – felesleges. */
	.szd-sidebar { display: none !important; }
}

/* =============================================================================
   MOBIL MENÜ – egyetlen "☰ MENÜ" panel (PrestaShop paritás)
   -----------------------------------------------------------------------------
   Asztali (>992px): hamburger + panel rejtve; a megamenü-trigger és a
   vízszintes menü látszik.
   Mobil (≤992px): CSAK a hamburger látszik. Kattintásra a panel nyílik, benne
   a kategóriafa (lenyitható +) ÉS a vízszintes menü pontjai.
   ========================================================================== */

/* Asztali: a mobil elemek rejtve */
.szd-topbar__hamburger { display: none; }
.szd-mobile-menu { display: none; }

@media (max-width: 992px) {

	/* Az asztali megamenü-trigger és a vízszintes menü mobilon REJTVE –
	   a tartalmuk a panelbe kerül. */
	.szd-topbar__trigger,
	.szd-topbar__nav {
		display: none !important;
	}

	.szd-topbar__inner {
		display: block;
		padding: 0;
	}

	/* A hamburger – teljes szélességű MENÜ sáv */
	.szd-topbar__hamburger {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 16px;
		background: #5e696e;
		color: #fff;
		border: 0;
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .03em;
		cursor: pointer;
	}

	.szd-topbar__hamburger-bars {
		position: relative;
		width: 24px;
		height: 2px;
		background: #fff;
		display: inline-block;
		flex: 0 0 auto;
	}

	.szd-topbar__hamburger-bars::before,
	.szd-topbar__hamburger-bars::after {
		content: '';
		position: absolute;
		left: 0;
		width: 24px;
		height: 2px;
		background: #fff;
		transition: transform .2s ease, top .2s ease;
	}

	.szd-topbar__hamburger-bars::before { top: -7px; }
	.szd-topbar__hamburger-bars::after { top: 7px; }

	.szd-topbar__hamburger.is-active .szd-topbar__hamburger-bars { background: transparent; }
	.szd-topbar__hamburger.is-active .szd-topbar__hamburger-bars::before { top: 0; transform: rotate(45deg); }
	.szd-topbar__hamburger.is-active .szd-topbar__hamburger-bars::after { top: 0; transform: rotate(-45deg); }

	/* ---- A PANEL ---- */
	.szd-mobile-menu {
		display: none;
		background: #fff;
		border-bottom: 1px solid #e6e8ea;
	}

	.szd-mobile-menu.is-open { display: block; }

	.szd-mobile-menu__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		background: #3b4247;
		color: #fff;
	}

	.szd-mobile-menu__title { font-size: 15px; font-weight: 700; text-transform: uppercase; }

	.szd-mobile-menu__close {
		background: transparent;
		border: 0;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	/* A kategóriafa a panelben */
	.szd-mobile-menu .szd-mega__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.szd-mobile-menu .szd-mega__item {
		position: relative;
		border-bottom: 1px solid #eef1f5;
	}

	.szd-mobile-menu .szd-mega__link {
		display: block;
		padding: 14px 46px 14px 16px;
		color: #3b4247;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
	}

	.szd-mobile-menu .szd-mega__link.is-not-clickable { cursor: default; }

	/* A ">" nyíl (asztali megamenő ::after) mobilon felesleges – csak a + kell */
	.szd-mobile-menu .szd-mega__item.has-panel > .szd-mega__link::after,
	.szd-mobile-menu .szd-mega__item.has-panel::after {
		display: none !important;
		content: none !important;
	}

	/* A + gomb (JS teszi be) */
	.szd-mobile-menu .szd-mega__toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 46px;
		height: 47px;
		background: transparent;
		border: 0;
		border-left: 1px solid #eef1f5;
		cursor: pointer;
	}

	.szd-mobile-menu .szd-mega__toggle::before,
	.szd-mobile-menu .szd-mega__toggle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 13px;
		height: 2px;
		background: #5e696e;
		transform: translate(-50%, -50%);
		transition: transform .2s ease;
	}

	.szd-mobile-menu .szd-mega__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

	/* Nyitott: a függőleges vonal eltűnik (mínuszt mutat) */
	.szd-mobile-menu .szd-mega__item.is-expanded > .szd-mega__toggle::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

	/* Az almenü alapból csukva, nyitáskor látszik */
	.szd-mobile-menu .szd-mega__panel { display: none; }
	.szd-mobile-menu .szd-mega__item.is-expanded > .szd-mega__panel { display: block; }

	/* ⚠️ Az asztali `.szd-mega__panel` max-height:70vh + overflow:auto ITT
	   belső görgetést okozna. Mobilon nincs korlát: az egész almenü látszik,
	   és a teljes panel görög egyben. */
	.szd-mobile-menu .szd-mega__panel {
		position: static !important;
		max-height: none !important;
		min-width: 0 !important;
		max-width: none !important;
		overflow: visible !important;
		box-shadow: none !important;
		border: 0 !important;
		padding: 0 !important;
	}

	.szd-mobile-menu .szd-mega__cols {
		display: block;
		padding: 0;
		background: transparent;
	}

	.szd-mobile-menu .szd-mega__col { padding: 4px 16px 4px 24px; }
	.szd-mobile-menu .szd-mega__col-title { margin: 8px 0 4px; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; }
	.szd-mobile-menu .szd-mega__col-title a { color: #5e696e; }

	.szd-mobile-menu .szd-mega__sublist { margin: 0 0 8px; padding: 0; list-style: none; }
	.szd-mobile-menu .szd-mega__sublink {
		display: block;
		padding: 9px 8px;
		color: #374151;
		font-size: 13.5px;
		text-decoration: none;
	}
	.szd-mobile-menu .szd-mega__sublink:hover { color: #5e696e; }

	/* Az almenü egészét egy bal oldali vonal jelzi, nem külön doboz */
	.szd-mobile-menu .szd-mega__item.is-expanded > .szd-mega__panel {
		border-left: 3px solid #e6e8ea;
		margin-left: 16px;
	}

	/* A vízszintes menü pontjai a panel alján */
	.szd-mobile-menu__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 3px solid #e6e8ea;
	}

	.szd-mobile-menu__list li { border-bottom: 1px solid #eef1f5; }

	.szd-mobile-menu__list a {
		display: block;
		padding: 14px 16px;
		color: #3b4247;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
	}

	.szd-mobile-menu__list a:hover { background: #f6f7f8; color: #5e696e; }

	/* ⚠️ A panel GÖRGETHETŐ legyen – ezért NEM tesszük a body-t overflow:hidden-re.
	   A panel maga kap max-magasságot és belső görgetést. */
	.szd-mobile-menu.is-open {
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* =============================================================================
   SZD DESIGN – KATEGÓRIA HERO + KÁRTYA (PS plugin megfelelője)
   -----------------------------------------------------------------------------
   A PrestaShop "szerszamdobozdesign" plugin vizuális logikája, a MOSTANI TÉMA
   kékjével (#5e696e / #3b4247) és ÉLES sarkokkal (nincs border-radius).
   ========================================================================== */

/* ---- KATEGÓRIA HERO ---- */
.szd-cat-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #14263f 0%, #3b4247 45%, #5e696e 100%);
	padding: 26px 30px 22px;
	margin: 0 0 24px;
	color: #fff;
}

.szd-cat-hero__bg {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	pointer-events: none;
}

.szd-cat-hero__bg--1 { top: -80px; right: -60px; width: 260px; height: 260px; }
.szd-cat-hero__bg--2 { bottom: -90px; left: -50px; width: 220px; height: 220px; background: rgba(255,255,255,.04); }

.szd-cat-hero__content { position: relative; z-index: 2; }

.szd-cat-hero__breadcrumb { font-size: 12px; margin-bottom: 8px; opacity: .85; }
.szd-cat-hero__breadcrumb a { color: #c8e0ff; text-decoration: none; font-weight: 600; }
.szd-cat-hero__breadcrumb a:hover { color: #fff; text-decoration: underline; }
.szd-cat-hero__sep { margin: 0 6px; opacity: .5; }
.szd-cat-hero__current { color: #fff; font-weight: 700; }

.szd-cat-hero__title {
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 10px;
	color: #fff;
}

.szd-cat-hero__pill {
	display: inline-block;
	background: rgba(255, 255, 255, .15);
	padding: 4px 14px;
	font-size: 12px;
	font-weight: 700;
}

/* ---- TERMÉKKÁRTYA (a te .product-miniature/.product osztályaidra) ---- */
.szd-layout ul.products li.product,
.szd-layout .products .product {
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	box-shadow: 0 4px 16px rgba(23, 51, 92, .08) !important;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
	position: relative;
}

.szd-layout ul.products li.product:hover,
.szd-layout .products .product:hover {
	box-shadow: 0 12px 32px rgba(23, 51, 92, .15) !important;
	transform: translateY(-4px) !important;
	border-color: #dcdfe2 !important;
}

/* Kép */
.szd-layout .products .product .thumbnail-container,
.szd-layout .products .product .product-thumbnail {
	display: block;
	background: #f5f7fa;
	overflow: hidden;
}

.szd-layout .products .product img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	display: block !important;
	padding: 0 !important;
	background: #fff;
	transition: transform .5s ease !important;
}

.szd-layout .products .product:hover img { transform: scale(1.06) !important; }

/* Cikkszám */
.szd-layout .products .product .szd-card-sku {
	font-size: 10px;
	color: #9ca3af;
	text-align: center;
	padding: 3px 8px;
	background: #f8f9fb;
}

/* Jobb oldal (szöveg + gombok) */
.szd-layout .products .product .product-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* Terméknév */
.szd-layout .products .product .product-title,
.szd-layout .products .product h2.woocommerce-loop-product__title {
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 10px 12px 6px !important;
	color: #1f2937 !important;
	text-align: center !important;
}

.szd-layout .products .product .product-title a { color: #1f2937; text-decoration: none; }
.szd-layout .products .product .product-title a:hover { color: #5e696e; }

/* Raktár státusz */
.szd-layout .products .product .szd-card-stock {
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	margin: 0 12px 4px;
}

.szd-layout .products .product .szd-card-stock.in-stock { color: #2e7d32; }
.szd-layout .products .product .szd-card-stock.out-of-stock { color: #9ca3af; }

/* Rövid leírás – max 3 sor */
.szd-layout .products .product .product-desc {
	font-size: 11px;
	color: #4b5563;
	line-height: 1.35;
	margin: 0 12px 6px;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Ár */
.szd-layout .products .product .product-price-and-shipping {
	margin: auto 0 8px;
	background: #f9e7e9;
	border-left: 4px solid #c42331;
}
.szd-layout .products .product .price,
.szd-layout .products .product .price .woocommerce-Price-amount,
.szd-layout .products .product .price ins,
.szd-layout .products .product .price bdi {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: #c42331 !important;
	text-align: center;
}
.szd-layout .products .product .price { display: block; }

.szd-layout .products .product .price del { color: #9ca3af; font-weight: 500; font-size: 12px; }
.szd-layout .products .product .price ins { text-decoration: none; }

/* Gombok */
.szd-layout .products .product .product-actions {
	display: flex;
	gap: 6px;
	padding: 0 10px 10px;
	margin-top: auto;
}

/* A gombok méretezése (a SZÍNT az eredeti .szd-btn--cart / --more adja:
   kék Kosárba tesz, halványkék Bővebben) */
.szd-layout .products .product .szd-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 10px 6px;
	font-size: 11.5px;
	line-height: 1.1;
	white-space: nowrap;
}



/* ---- TERMÉKOLDAL – éles sarkok, konzisztens színek ---- */
.single-product .szd-btn,
.single-product .single_add_to_cart_button,
.single-product .button {
	border-radius: 0 !important;
}

/* A csillagos értékelés maradéka is rejtve (a tab megszűnt) */
.single-product .woocommerce-product-rating { display: none !important; }

/* =============================================================================
   KÉSZLET-CÍMKE IKONOK
   -----------------------------------------------------------------------------
   Raktáron  → zöld kör, fehér pipa
   Rendelhető → kék kör, fehér "i" (infó)
   Az ikon CSS-sel készül (::before), így minden megjelenési helyen egyszerre
   érvényes – kártya és termékoldal is.
   ========================================================================== */

.availability-list-in-stock,
.availability-list-orderable {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.availability-list-in-stock { color: #2e7d32; }
.availability-list-orderable { color: #5e696e; }

/* A kis kör ikon */
.availability-list-in-stock::before,
.availability-list-orderable::before {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
}

/* Raktáron: zöld kör + fehér pipa */
.availability-list-in-stock::before {
	background-color: #2e7d32;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* Rendelhető: kék kör + fehér "i" */
.availability-list-orderable::before {
	background-color: #5e696e;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 7h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E");
}

/* A kártyán a címke középre igazított – az ikon is kövesse */
.szd-layout .products .product .szd-card-stock.availability-list-in-stock,
.szd-layout .products .product .szd-card-stock.availability-list-orderable {
	justify-content: center;
}
/* ==========================================================================
   whszerszam: akciógombok pirosban (#c42331)
   A kék->szürke leképezés után a gombok szürkék lennének; a valódi
   CTA/akciógombokat itt állítjuk vissza pirosra. A struktúra (topbar,
   linkek, fejlécek) szürke marad.
   ========================================================================== */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.szd-single-product .single_add_to_cart_button,
.szd-product-card .product-actions a.button,
.szd-home-cat__btn,
.szd-404__btn,
.szd-toast__action,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button.button,
.wc-proceed-to-checkout a.checkout-button,
#place_order {
	background: #c42331 !important;
	border-color: #c42331 !important;
	color: #fff !important;
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover,
.szd-single-product .single_add_to_cart_button:hover,
.szd-product-card .product-actions a.button:hover,
.szd-home-cat__btn:hover,
.szd-404__btn:hover,
.szd-toast__action:hover,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button.button:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
#place_order:hover {
	background: #a51d2a !important;
	border-color: #a51d2a !important;
	color: #fff !important;
}