/* ==========================================================================
   Szundifény téma – OpenCart 3.0.x (az alap Bootstrap 3 sablon fölé)
   A színek és betűk itt, a :root változókban állíthatók.
   ========================================================================== */
:root {
	--sz-night: #16203F;      /* éjkék: fejléc, hero, lábléc */
	--sz-night-2: #1F2B52;    /* hero kép háttere */
	--sz-night-3: #26335F;    /* gombok sötét háttéren */
	--sz-line-dark: #5A669A;
	--sz-glow: #F4B860;       /* kiemelőszín: fő gombok, hold */
	--sz-ground: #F7F5FB;     /* oldal háttere */
	--sz-card: #FFFFFF;
	--sz-ink: #1B2240;        /* szöveg */
	--sz-muted: #4E5675;      /* másodlagos szöveg */
	--sz-on-dark: #F3F1FA;
	--sz-on-dark-muted: #C9CDE3;
	--sz-line: #CFCDE0;
	--sz-line-soft: #ECEAF3;
	--sz-accent: #6A4A9E;     /* címkék */
	--sz-lilac: #EDE8F7;
	--sz-blue: #E3E9F8;
	--sz-peach: #FBEEDD;
	--sz-ok: #22603F;
	--sz-radius: 22px;
	--sz-shadow: 0 6px 24px rgba(22, 32, 63, 0.08);
	--sz-font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
	--sz-font-body: 'Nunito Sans', 'Segoe UI', sans-serif;
}

/* ---------- Alap ---------- */
html { scroll-behavior: smooth; }
body.sz-body {
	margin: 0;
	background: var(--sz-ground);
	color: var(--sz-ink);
	font-family: var(--sz-font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.sz-body h1, .sz-body h2, .sz-body h3, .sz-body h4 {
	font-family: var(--sz-font-display);
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-body a { color: var(--sz-ink); }
.sz-body a:hover, .sz-body a:focus { color: #3A4680; }
.sz-body :focus-visible { outline: 3px solid var(--sz-glow); outline-offset: 2px; }
[hidden] { display: none !important; }

.sz-skip {
	position: absolute; left: 16px; top: -60px; z-index: 1000;
	background: var(--sz-glow); color: var(--sz-night) !important;
	padding: 10px 16px; border-radius: 12px; font-weight: 700;
}
.sz-skip:focus { top: 12px; }

.sz-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sz-wrap--narrow { max-width: 820px; }
.sz-muted { color: var(--sz-muted); }
.sz-h2 { margin: 0 0 24px; font-size: 40px; line-height: 1.1; }
.sz-h3 { margin: 0 0 14px; font-size: 24px; }
.sz-section { padding-top: 80px; }
.sz-main { padding-bottom: 88px; }
.sz-main--home { padding-bottom: 88px; }

/* A nem saját sablonú oldalak (kosár, pénztár, fiók) is illeszkedjenek */
.sz-body > .container { padding-top: 28px; padding-bottom: 72px; }
.sz-body .breadcrumb { background: transparent; padding: 0; margin: 0 0 20px; font-size: 14px; }
.sz-body .btn { border-radius: 999px; font-weight: 700; padding: 10px 22px; }
.sz-body .btn-primary { background: var(--sz-night); border-color: var(--sz-night); color: var(--sz-on-dark); }
.sz-body .btn-primary:hover, .sz-body .btn-primary:focus { background: #26335F; border-color: #26335F; color: var(--sz-on-dark); }
.sz-body .form-control { border-radius: 12px; min-height: 44px; border-color: var(--sz-line); box-shadow: none; font-size: 16px; }
.sz-body .form-control:focus { border-color: var(--sz-accent); box-shadow: 0 0 0 3px rgba(106, 74, 158, 0.18); }
.sz-body .panel { border-radius: 16px; border-color: var(--sz-line-soft); box-shadow: none; }
.sz-body .panel-heading { border-radius: 16px 16px 0 0; }
.sz-body .alert { border-radius: 14px; }

/* ---------- Gombok ---------- */
.sz-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
	font: 700 15px/1 var(--sz-font-body); text-decoration: none !important;
	cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.sz-btn:active { transform: translateY(1px); }
.sz-btn--lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.sz-btn--glow { background: var(--sz-glow); color: var(--sz-night) !important; }
.sz-btn--glow:hover { background: #F7C67F; }
.sz-btn--dark { background: var(--sz-night); color: var(--sz-on-dark) !important; }
.sz-btn--dark:hover { background: #26335F; }
.sz-btn--ghost { background: transparent; border: 1.5px solid var(--sz-line-dark); color: var(--sz-on-dark) !important; }
.sz-btn--ghost:hover { border-color: var(--sz-on-dark); }
.sz-btn--ghost-dark { background: transparent; border: 1.5px solid var(--sz-line); color: var(--sz-ink) !important; }
.sz-btn.is-loading { opacity: .6; cursor: progress; }

/* ---------- Fejléc ---------- */
.sz-header { background: var(--sz-night); color: var(--sz-on-dark); position: relative; z-index: 50; }
.sz-header__in { display: flex; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.sz-logo { display: flex; align-items: center; gap: 10px; color: var(--sz-on-dark) !important; text-decoration: none !important; margin-right: auto; }
.sz-logo__moon { color: var(--sz-glow); }
.sz-logo__text { font-family: var(--sz-font-display); font-weight: 600; font-size: 26px; letter-spacing: .2px; }
.sz-logo__img { max-height: 44px; width: auto; }
.sz-nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 15px; }
.sz-nav a { color: var(--sz-on-dark) !important; text-decoration: none; padding: 10px 0; }
.sz-nav a:hover { color: var(--sz-glow) !important; }
.sz-menu-toggle {
	display: none; width: 44px; height: 44px; border: 0; border-radius: 22px;
	background: var(--sz-night-3); color: var(--sz-on-dark); align-items: center; justify-content: center;
}

/* Kosár a fejlécben */
.sz-cart.btn-group { display: block; }
.sz-cart__btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
	border: 0; border-radius: 22px; background: var(--sz-night-3); color: var(--sz-on-dark);
	font: 700 14px var(--sz-font-body); white-space: nowrap;
}
.sz-cart__btn:hover, .sz-cart.open .sz-cart__btn { background: #313F72; }
.sz-cart__btn .fa { color: var(--sz-glow); font-size: 16px; }
.sz-cart__menu.dropdown-menu {
	min-width: 360px; padding: 12px; border: 0; border-radius: 18px;
	box-shadow: 0 18px 48px rgba(22, 32, 63, 0.22); color: var(--sz-ink);
}
.sz-cart__menu .table { margin-bottom: 8px; }
.sz-cart__menu .table > tbody > tr > td { border-top: 1px solid var(--sz-line-soft); vertical-align: middle; font-size: 14px; }
.sz-cart__thumb { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: #fff; }
.sz-cart__remove { width: 32px; height: 32px; border: 0; border-radius: 16px; background: var(--sz-lilac); color: var(--sz-ink); }
.sz-cart__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sz-cart__empty { margin: 16px 0; color: var(--sz-muted); }

/* ---------- Hero ---------- */
.sz-hero { background: var(--sz-night); color: var(--sz-on-dark); padding: 40px 0 96px; }
.sz-hero__in { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.sz-hero__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sz-eyebrow { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sz-glow); }
.sz-eyebrow--dark { color: var(--sz-accent); }
.sz-hero__title { margin: 0; font-size: 60px; line-height: 1.05; color: var(--sz-on-dark) !important; }
.sz-hero__text { margin: 0; font-size: 19px; line-height: 1.55; color: var(--sz-on-dark-muted); max-width: 540px; }
.sz-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sz-badges { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--sz-on-dark-muted); }
.sz-badges li::before { content: "✓"; color: var(--sz-glow); font-weight: 700; margin-right: 6px; }
.sz-hero__media {
	flex: 1 1 420px; min-width: 0; position: relative; height: 440px;
	border-radius: 28px; background: var(--sz-night-2); overflow: hidden;
}
.sz-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sz-hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.sz-glow { fill: var(--sz-glow); }
.sz-glow--1 { opacity: .08; }
.sz-glow--2 { opacity: .12; }
.sz-moon { fill: var(--sz-glow); opacity: .9; }
.sz-stars circle { fill: var(--sz-on-dark); opacity: .85; }

/* ---------- Előnyök ---------- */
.sz-usps {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
	margin-top: -52px; position: relative;
}
.sz-usp { background: var(--sz-card); border-radius: 20px; padding: 22px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--sz-shadow); }
.sz-usp__num {
	flex: none; width: 42px; height: 42px; border-radius: 21px; background: var(--sz-peach); color: #8A5310;
	display: flex; align-items: center; justify-content: center; font: 600 18px var(--sz-font-display);
}
.sz-usp strong { display: block; font-size: 16px; margin-bottom: 2px; }
.sz-usp span { font-size: 14px; line-height: 1.45; color: var(--sz-muted); }

/* ---------- Termékrács ---------- */
.sz-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.sz-section__head .sz-h2 { margin-bottom: 6px; }
.sz-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sz-pill {
	min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1.5px solid var(--sz-line);
	background: var(--sz-card); color: var(--sz-ink); font: 700 15px var(--sz-font-body); cursor: pointer;
}
.sz-pill:hover { border-color: var(--sz-ink); }
.sz-pill.is-active { background: var(--sz-night); border-color: var(--sz-night); color: var(--sz-on-dark); }

.sz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.sz-card { background: var(--sz-card); border-radius: var(--sz-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(22, 32, 63, 0.06); transition: transform .2s ease, box-shadow .2s ease; }
.sz-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(22, 32, 63, 0.12); }
.sz-card__img { display: block; aspect-ratio: 1 / 1; background: #fff; }
.sz-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sz-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sz-tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sz-accent); }
.sz-card__name { font-family: var(--sz-font-display); font-weight: 500; font-size: 20px; line-height: 1.2; text-decoration: none !important; color: var(--sz-ink) !important; }
.sz-card__line { font-size: 14px; line-height: 1.45; color: var(--sz-muted); }
.sz-card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sz-price { font-size: 20px; font-weight: 700; }
.sz-price__new { color: #A1352B; }
.sz-price__old { color: var(--sz-muted); font-size: .75em; font-weight: 600; }

/* ---------- Választó ---------- */
.sz-chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.sz-choice { border-radius: var(--sz-radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.sz-choice strong { font: 600 22px var(--sz-font-display); }
.sz-choice span { line-height: 1.55; color: #3B4366; }
.sz-choice__link { margin-top: 6px; font-weight: 700; }
.sz-choice--lilac { background: var(--sz-lilac); }
.sz-choice--blue { background: var(--sz-blue); }
.sz-choice--peach { background: var(--sz-peach); }

/* ---------- GYIK ---------- */
.sz-faq { display: flex; flex-direction: column; gap: 12px; }
.sz-faq__item { background: var(--sz-card); border-radius: 18px; }
.sz-faq__item summary {
	list-style: none; cursor: pointer; min-height: 60px; padding: 18px 56px 18px 22px; position: relative;
	font-weight: 700; font-size: 17px;
}
.sz-faq__item summary::-webkit-details-marker { display: none; }
.sz-faq__item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--sz-accent); }
.sz-faq__item[open] summary::after { content: "−"; }
.sz-faq__item p { margin: 0; padding: 0 22px 20px; color: var(--sz-muted); }

/* ---------- Terméklap ---------- */
.sz-crumbs { list-style: none; margin: 0; padding: 28px 0 20px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--sz-muted); }
.sz-crumbs li + li::before { content: "›"; margin-right: 6px; }
.sz-crumbs a { color: var(--sz-muted) !important; }
.sz-product { display: flex; flex-wrap: wrap; gap: 48px; }
.sz-gallery { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sz-gallery__main { display: block; aspect-ratio: 1 / 1; border-radius: 26px; background: #fff; overflow: hidden; cursor: zoom-in; }
.sz-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sz-gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sz-gallery__thumb { aspect-ratio: 1 / 1; padding: 0; border-radius: 14px; border: 1.5px solid var(--sz-line); background: #fff; overflow: hidden; cursor: pointer; }
.sz-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sz-gallery__thumb.is-active { border: 2.5px solid var(--sz-night); }

.sz-buy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sz-product__title { margin: 0; font-size: 42px; line-height: 1.1; }
.sz-rating { display: inline-flex; align-items: center; gap: 4px; color: #B7791F !important; text-decoration: none !important; font-size: 15px; }
.sz-rating span { color: var(--sz-muted); margin-left: 6px; }
.sz-product__price strong { font-size: 34px; }
.sz-discounts { list-style: none; padding: 0; margin: 0; color: var(--sz-muted); font-size: 14px; }
.sz-stock { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sz-ok); }
.sz-stock__dot { width: 10px; height: 10px; border-radius: 5px; background: #2E8B57; }
.sz-options .form-group { margin-bottom: 12px; }
.sz-buy__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sz-buy__cta { flex: 1 1 220px; }
.sz-qty { display: flex; align-items: center; border: 1.5px solid var(--sz-line); border-radius: 26px; background: #fff; }
.sz-qty__btn { width: 52px; height: 52px; border: 0; background: transparent; font-size: 22px; color: var(--sz-ink); cursor: pointer; border-radius: 26px; }
.sz-qty__input { width: 44px; border: 0; text-align: center; font-weight: 700; font-size: 17px; background: transparent; color: var(--sz-ink); }
.sz-perks { list-style: none; margin: 6px 0 0; padding: 18px 20px; background: var(--sz-card); border-radius: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.sz-perks li::before { content: "✓"; color: var(--sz-ok); font-weight: 700; margin-right: 8px; }

.sz-product__info { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 64px; }
.sz-desc { flex: 1 1 560px; min-width: 0; font-size: 17px; }
.sz-attributes { flex: 1 1 360px; min-width: 0; }
.sz-desc p { color: #3B4366; }
.sz-desc h2, .sz-desc h3 { font-size: 26px; margin: 36px 0 14px; }
.sz-desc ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sz-desc ul li { position: relative; padding-left: 30px; color: #3B4366; }
.sz-desc ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 12px; border-radius: 6px; background: var(--sz-glow); }
.sz-desc table, .sz-spec { width: 100%; border-collapse: collapse; background: var(--sz-card); border-radius: 18px; overflow: hidden; font-size: 15px; border: 0 !important; }
.sz-desc table td, .sz-desc table th, .sz-spec th, .sz-spec td { padding: 12px 18px !important; border: 0 !important; border-bottom: 1px solid var(--sz-line-soft) !important; text-align: left; vertical-align: top; }
.sz-desc table tr td:first-child, .sz-spec th { width: 46%; color: var(--sz-muted); font-weight: 600; }
.sz-desc table tr:last-child td, .sz-spec tr:last-child th, .sz-spec tr:last-child td { border-bottom: 0 !important; }
.sz-desc img { max-width: 100%; height: auto; border-radius: 16px; }

.sz-reviews, .sz-related { margin-top: 72px; }
.sz-reviews #review .table { background: var(--sz-card); border-radius: 16px; }
.sz-review-form { background: var(--sz-card); border-radius: 20px; padding: 24px; margin-top: 16px; max-width: 720px; }
.sz-grid--related { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sz-tags { margin-top: 32px; color: var(--sz-muted); font-size: 14px; }

/* ---------- Lábléc ---------- */
.sz-footer { background: var(--sz-night); color: var(--sz-on-dark-muted); padding: 44px 0; }
.sz-footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.sz-footer__name { font-size: 14px; }
.sz-footer__nav { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 14px; }
.sz-footer__nav a { color: var(--sz-on-dark-muted) !important; }
.sz-footer__nav a:hover { color: var(--sz-on-dark) !important; }

/* ---------- Értesítés (kosárba tétel) ---------- */
.sz-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 1100; transform: translate(-50%, 20px);
	max-width: calc(100% - 32px); width: 520px; padding: 16px 20px; border-radius: 16px;
	background: var(--sz-night); color: var(--sz-on-dark); box-shadow: 0 18px 48px rgba(22, 32, 63, 0.3);
	opacity: 0; transition: opacity .25s ease, transform .25s ease; font-size: 15px;
}
.sz-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sz-toast a { color: var(--sz-glow) !important; font-weight: 700; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
	.sz-menu-toggle { display: inline-flex; order: -1; }
	.sz-logo { margin-right: auto; }
	.sz-logo__text { font-size: 22px; }
	.sz-header__in { gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
	.sz-nav { display: none; order: 10; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; border-top: 1px solid var(--sz-night-3); }
	.sz-nav.is-open { display: flex; }
	.sz-nav a { padding: 14px 4px; font-size: 17px; }
	.sz-cart__btn #cart-total { font-size: 13px; }
	.sz-cart__menu.dropdown-menu { min-width: 300px; right: -8px; }
}
@media (max-width: 640px) {
	.sz-wrap { padding-left: 16px; padding-right: 16px; }
	.sz-hero { padding: 20px 0 72px; }
	.sz-hero__in { gap: 20px; flex-direction: column-reverse; align-items: stretch; }
	.sz-hero__copy, .sz-hero__media { flex: none; }
	.sz-hero__media { height: 220px; border-radius: 22px; }
	.sz-hero__title { font-size: 38px; }
	.sz-hero__text { font-size: 16px; }
	.sz-hero__actions .sz-btn { flex: 1 1 100%; }
	.sz-usps { grid-template-columns: 1fr; margin-top: -40px; }
	.sz-h2 { font-size: 30px; }
	.sz-section { padding-top: 56px; }
	.sz-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; width: calc(100% + 32px); }
	.sz-pill { flex: none; font-size: 14px; }
	.sz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.sz-card { border-radius: 18px; }
	.sz-card__body { padding: 12px; gap: 6px; }
	.sz-card__name { font-size: 16px; }
	.sz-card__line { display: none; }
	.sz-price { font-size: 16px; }
	.sz-card__foot .sz-btn { width: 100%; min-height: 44px; padding: 0 10px; font-size: 14px; }
	.sz-product { gap: 24px; }
	.sz-product__title { font-size: 30px; }
	.sz-product__price strong { font-size: 28px; }
	.sz-product__info { margin-top: 40px; gap: 32px; }
	.sz-desc { font-size: 16px; }
	.sz-cart__btn #cart-total { font-size: 0; }
	.sz-cart__btn #cart-total .fa { font-size: 18px; }
}