/* Staubedenyek.hu – components rendered by the plugin shortcodes. Page-level styles live in the Elementor kit. */

.sb-nev { margin: 0; font-family: var(--sb-serif); font-weight: 450; font-size: 21px; line-height: 1.2; letter-spacing: -0.005em; color: var(--sb-vas); }
.sb-nev a { color: inherit; text-decoration: none; }
.sb-nev a:hover { color: var(--sb-granat); }
.sb-brand { font-family: var(--sb-sans); font-weight: 600; font-size: .62em; letter-spacing: .02em; color: var(--sb-grafit); vertical-align: .18em; margin-right: .1em; }
.sb-meret { margin: 0; font-size: 15px; line-height: 1.45; color: var(--sb-grafit); }

.sb-cim { margin: 0; font-family: var(--sb-serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.015em; color: var(--sb-vas); text-wrap: balance; }
.sb-cim-sub { margin: 10px 0 0; font-size: 17px; color: var(--sb-grafit); }

/* Enamel swatches: the one signature element. */
.sb-szinek { display: flex; flex-direction: column; gap: 10px; }
.sb-sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sb-sw {
	--size: 18px;
	width: var(--size); height: var(--size); border-radius: 50%; display: inline-block; flex: 0 0 auto;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.45) 0 10%, rgba(255,255,255,0) 42%), var(--sw);
	box-shadow: inset 0 0 0 1px rgba(30,31,33,.16);
	outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .15s ease;
}
.sb-sw:hover { outline-color: rgba(30,31,33,.45); }
.sb-sw.is-current { outline: 1.5px solid var(--sb-vas); }
.sb-sw-more { font-size: 13px; color: var(--sb-grafit); margin-left: 2px; }
.sb-szinek--nagy .sb-sw { --size: 34px; }
.sb-szinek--nagy .sb-sw-row { gap: 12px; }
.sb-sw-label { margin: 0; font-size: 15px; color: var(--sb-grafit); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sb-sw-label strong { color: var(--sb-vas); font-weight: 600; }
.sb-sw-label span { margin-left: auto; font-size: 14px; }

.sb-chip {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 4px;
	border: 1px solid rgba(30,31,33,.22); color: var(--sb-vas); font-size: 15px; text-decoration: none; background: #fff;
}
.sb-chip:hover { border-color: var(--sb-vas); color: var(--sb-vas); }
.sb-chip.is-current { background: var(--sb-vas); border-color: var(--sb-vas); color: #fff; }
.sb-meretek .sb-chip { min-height: 30px; padding: 0 10px; font-size: 14px; }
.sb-szinek--nagy.sb-meretek .sb-chip, .elementor-widget-shortcode .sb-meretek--nagy .sb-chip { min-height: 40px; }

.sb-megtakaritas { margin: 0; font-size: 15px; font-weight: 600; color: var(--sb-granat); }

.sb-keszlet { margin: 0; font-size: 15px; display: flex; gap: 10px; align-items: baseline; color: var(--sb-vas); }
.sb-keszlet .sb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-bazsalikom); flex: 0 0 auto; transform: translateY(-1px); }
.sb-keszlet.is-out .sb-dot { background: var(--sb-grafit); }
.sb-keszlet a { color: var(--sb-vas); }

.sb-szallitas { font-size: 15px; color: var(--sb-vas); }
.sb-szallitas p { margin: 0; }
.sb-szallitas.is-free strong { color: var(--sb-bazsalikom); }
.sb-bar { display: block; height: 4px; background: var(--sb-ko); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.sb-bar i { display: block; height: 100%; background: var(--sb-bazsalikom); }

.sb-bizalom { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(30,31,33,.12); display: grid; gap: 10px; }
.sb-bizalom li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--sb-vas); margin: 0; }
.sb-bizalom svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--sb-grafit); }
.sb-bizalom a { color: var(--sb-vas); font-weight: 600; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(30,31,33,.35); }

.sb-fozolap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(30,31,33,.14); border-radius: 2px; }
.sb-fozolap li { margin: 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(30,31,33,.14); }
.sb-fozolap li:first-child { border-left: 0; }
.sb-fozolap span { font-size: 14px; color: var(--sb-grafit); }
.sb-fozolap em { font-style: normal; font-family: var(--sb-serif); font-size: 21px; color: var(--sb-vas); }
.sb-fozolap .is-no em { color: var(--sb-grafit); }

.sb-specs { margin: 0; display: grid; }
.sb-specs > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(30,31,33,.12); }
.sb-specs > div:first-child { border-top: 1px solid rgba(30,31,33,.12); }
.sb-specs dt { color: var(--sb-grafit); font-size: 15px; }
.sb-specs dd { margin: 0; color: var(--sb-vas); font-size: 16px; }

.sb-katok { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-kat {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 40px;
	border: 1px solid rgba(30,31,33,.2); color: var(--sb-vas); text-decoration: none; font-size: 15px; font-weight: 500; background: transparent;
}
.sb-kat:hover { border-color: var(--sb-vas); color: var(--sb-vas); }
.sb-kat.is-current { background: var(--sb-vas); color: #fff; border-color: var(--sb-vas); }
@media (max-width: 767px) {
	.sb-katok { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
	.sb-katok::-webkit-scrollbar { display: none; }
	.sb-kat { flex: 0 0 auto; }
	.sb-fozolap { grid-template-columns: repeat(2, 1fr); }
	.sb-fozolap li:nth-child(3) { border-left: 0; }
	.sb-fozolap li:nth-child(n+3) { border-top: 1px solid rgba(30,31,33,.14); }
}

/* Sticky add to cart on phones */
.sb-mobil-kosar { display: none; }
@media (max-width: 767px) {
	.sb-mobil-kosar:not([hidden]) {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; gap: 12px; align-items: center;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(30,31,33,.12);
		transform: translateY(0); transition: transform .2s ease;
	}
	.sb-mobil-kosar.is-away { transform: translateY(110%); }
	.sb-mk-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
	.sb-mk-nev { font-size: 14px; color: var(--sb-grafit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sb-mk-ar { font-weight: 600; color: var(--sb-vas); font-size: 17px; }
	.sb-mk-ar del { font-weight: 400; color: var(--sb-grafit); font-size: 14px; margin-right: 6px; }
	.sb-mk-ar ins { text-decoration: none; color: var(--sb-granat); }
	.sb-mk-btn {
		flex: 0 0 auto; border: 0 !important; border-radius: 4px !important; background: var(--sb-granat) !important; color: #fff !important; font: 600 16px/1 var(--sb-sans) !important;
		padding: 15px 22px; cursor: pointer;
	}
	body.sb-has-mk { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .sb-mobil-kosar { transition: none; } }

.sb-akcio-jel { display: inline-block; background: var(--sb-granat); color: #fff; font: 600 13px/1 var(--sb-sans); padding: 6px 8px; border-radius: 2px; }
.sb-kosarba-ki { opacity: .6; }
.sb-rendezes .woocommerce-ordering { margin: 0; }
.sb-rendezes select { border: 1px solid rgba(30,31,33,.25); border-radius: 4px; background-color: #fff; padding: 10px 36px 10px 14px; font: 500 15px var(--sb-sans); color: var(--sb-vas); min-height: 44px; }
.sb-talalatok { margin: 0; font-size: 15px; color: var(--sb-grafit); }
.sb-meret-db { margin: 0; font-size: 14px; color: var(--sb-grafit); }

/* Brand as a quiet line above the product name on cards */
.sb-nev .sb-brand { display: block; font-size: 12px; letter-spacing: .04em; vertical-align: 0; margin: 0 0 2px; }
@media (max-width: 767px) {
	.sb-nev { font-size: 18px; }
	.sb-card .sb-sw { --size: 15px; }
	.sb-card .sb-sw-row { gap: 6px; }
}

/* Accessibility: 24px touch target for swatches (visible dot stays 18px), readable struck-through prices, underlined breadcrumb links */
.sb-sw { box-sizing: content-box; padding: 3px; background-clip: content-box; margin: -3px; }
.sb-card .sb-sw-row, .sb-sw-row { gap: 8px; }
.sb-szinek--nagy .sb-sw-row { gap: 16px; }
.sb-sw.is-current { outline-offset: -1px; }
body .price del, body .price del .amount, body .price del bdi { opacity: 1 !important; color: var(--sb-grafit) !important; }
.sb-crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(30,31,33,.3); }