:root {
	--green: #1f7a3a;
	--green-dark: #145528;
	--yellow: #f0c400;
	--ink: #142018;
	--muted: #4d5b52;
	--paper: #eef3ef;
	--white: #fff;
	--surface: #ffffff;
	--surface-soft: #f4f7f4;
	--line: rgba(20, 32, 24, 0.12);
	--shadow: 0 12px 28px rgba(20, 32, 24, 0.1);
	--header-h: 84px;
	--hours-bar-h: 58px;
	--font-display: 'Syne', sans-serif;
	--font-body: 'Manrope', sans-serif;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--reveal-duration: 0.65s;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
	background:
		radial-gradient(ellipse 70% 40% at 8% -10%, rgba(240, 196, 0, 0.1), transparent 55%),
		radial-gradient(ellipse 50% 30% at 100% 20%, rgba(31, 122, 58, 0.06), transparent 50%),
		linear-gradient(180deg, #f7faf7 0%, var(--paper) 100%);
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-dark); text-decoration: none; }
a:hover, a:focus { color: var(--green); outline: 0; text-decoration: none; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
}

.container-wide {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(31, 122, 58, 0.16);
	box-shadow: 0 6px 18px rgba(20, 32, 24, 0.06);
	overflow-anchor: none;
}

.site-header.is-scrolled {
	border-bottom-color: rgba(31, 122, 58, 0.22);
	box-shadow: 0 10px 24px rgba(20, 32, 24, 0.1);
}

.header-inner {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #fff;
	box-shadow: inset 0 1px 0 rgba(31, 122, 58, 0.05);
}

.hours-bar {
	border-bottom: none;
	background: linear-gradient(180deg, #e7f2ea 0%, #eef5f0 55%, #f7faf8 100%);
}

.hours-bar-inner {
	width: min(1180px, calc(100% - 24px));
	margin: 0 auto;
	min-height: var(--hours-bar-h);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding: 8px 0;
}

.hours-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: 8px;
	background: rgba(255,255,255,.72);
	border: 1px solid rgba(31, 122, 58, 0.14);
}

.hours-chip-main {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	color: inherit;
	flex: 1 1 auto;
}

.hours-chip-main:hover { color: inherit; }

.hours-status,
.store-hours-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 28px;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.1;
	background: var(--green);
	color: #fff;
}

.hours-status.is-closed,
.store-hours-status.is-closed {
	background: #5b6760;
}

.hours-status.is-soon,
.store-hours-status.is-soon {
	background: #c47a00;
}

.hours-status.is-lunch,
.store-hours-status.is-lunch {
	background: #2f6f9f;
}

.hours-chip-text {
	display: grid;
	gap: 1px;
	min-width: 0;
	align-content: center;
}

.hours-chip-text strong {
	font-size: 13px;
	line-height: 1.2;
}

.hours-chip-text span,
.hours-chip [data-hours-note] {
	font-size: 11px;
	color: var(--muted);
	line-height: 1.25;
	white-space: normal;
	min-height: 2.5em;
}

.hours-chip-call {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 800;
	color: var(--green-dark);
	padding: 6px 8px;
	background: #fff;
	border: 1px solid rgba(31, 122, 58, 0.18);
	white-space: nowrap;
}

.hours-chip-call i {
	color: var(--yellow);
	font-size: 13px;
}

.hours-chip-call:hover {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--ink);
}

.hours-chip-call:hover i {
	color: var(--ink);
}

.brand-lockup {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.brand img { height: 64px; width: auto; display: block; }

.brand-soas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex: 0 0 auto;
	background: transparent;
}

.brand-soas img {
	height: 46px;
	width: auto;
	display: block;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 6px 16px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.main-nav a {
	font-size: 14px;
	font-weight: 700;
	color: var(--green-dark);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a.is-active {
	color: var(--green);
	border-bottom-color: var(--yellow);
}

.main-nav .nav-cta {
	padding: 10px 14px;
	background: var(--green);
	color: #fff;
	transition: background .2s ease, transform .2s var(--ease-out);
}

.main-nav .nav-cta:hover {
	background: var(--green-dark);
	color: #fff;
	transform: translateY(-1px);
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	margin: 5px auto;
	background: var(--ink);
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
	position: relative;
	min-height: calc(100vh - var(--header-h));
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
}

.hero-media,
.hero-overlay { position: absolute; inset: 0; }

.hero-media {
	overflow: hidden;
}

.hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform-origin: 58% 42%;
	transition: opacity 1.1s ease;
	will-change: opacity, transform;
	animation: none;
}

.hero-media img.is-active {
	opacity: 1;
	z-index: 1;
	animation: heroKenBurns 28s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
	0% {
		transform: scale(1.08) translate3d(-1.2%, 0.6%, 0);
	}
	50% {
		transform: scale(1.14) translate3d(1.1%, -0.8%, 0);
	}
	100% {
		transform: scale(1.1) translate3d(-0.4%, 0.4%, 0);
	}
}

.hero-overlay {
	background:
		linear-gradient(90deg, rgba(8, 22, 14, 0.88) 0%, rgba(8, 22, 14, 0.72) 38%, rgba(8, 22, 14, 0.38) 68%, rgba(8, 22, 14, 0.18) 100%),
		linear-gradient(0deg, rgba(8, 22, 14, 0.72) 0%, rgba(8, 22, 14, 0.28) 42%, transparent 70%);
	pointer-events: none;
}

.hero-overlay::after {
	content: "";
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(ellipse 50% 40% at 22% 70%, rgba(0, 0, 0, 0.28), transparent 62%),
		radial-gradient(ellipse 40% 30% at 75% 55%, rgba(240, 196, 0, 0.06), transparent 55%);
	animation: heroLightDrift 18s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes heroLightDrift {
	from { transform: translate3d(-3%, 2%, 0) scale(1); opacity: 0.55; }
	to { transform: translate3d(4%, -3%, 0) scale(1.08); opacity: 0.9; }
}

.hero-content {
	position: relative;
	z-index: 2;
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
	padding: 0 0 9vh;
	max-width: 760px;
	animation: heroIn 0.9s var(--ease-out) 0.15s both;
}

@keyframes heroIn {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

.hero-rotator {
	position: relative;
	min-height: 9.5em;
	margin-bottom: 24px;
}

.hero-slide {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.hero-slide.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	position: relative;
}

.hero-lead {
	margin: 0 0 12px;
	font-size: clamp(26px, 4vw, 42px);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.12;
	max-width: 15em;
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-sub {
	margin: 0;
	max-width: 36em;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.95);
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.5),
		0 2px 14px rgba(0, 0, 0, 0.4);
}

.hero-cities {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 4px 6px 0;
	vertical-align: middle;
}

.hero-city {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ink);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-shadow: none;
	border: 1px solid rgba(31, 122, 58, 0.18);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.hero-city i {
	color: #ea4335;
	font-size: 16px;
	line-height: 1;
}

.hero-city:hover,
.hero-city:focus {
	background: var(--yellow);
	color: var(--ink);
	border-color: var(--yellow);
}

.hero-city:hover i,
.hero-city:focus i {
	color: #c5221f;
}

.hero-sub-rest {
	display: inline;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Advice / technology */
.advice-section {
	background: #fff;
}

.advice-intro {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 18px;
	margin-bottom: 22px;
	align-items: stretch;
}

.advice-intro-copy {
	background: linear-gradient(160deg, #163824, #1f7a3a);
	color: #fff;
	padding: 28px;
	box-shadow: var(--shadow);
}

.advice-intro-copy h3 {
	color: #fff;
	font-size: 28px;
	margin-bottom: 16px;
}

.advice-steps {
	margin: 0 0 22px;
	padding-left: 20px;
	display: grid;
	gap: 10px;
}

.advice-steps li {
	padding-left: 4px;
	font-size: 15px;
	line-height: 1.45;
}

.advice-intro-media {
	margin: 0;
	overflow: hidden;
	box-shadow: var(--shadow);
	min-height: 280px;
}

.advice-intro-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.advice-guides {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.guide-card {
	background: var(--surface-soft);
	border: 1px solid var(--line);
	padding: 22px;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	transition: border-color .25s ease, transform .25s var(--ease-out), box-shadow .25s ease;
}

.guide-card:hover {
	border-color: rgba(31, 122, 58, 0.35);
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(20, 32, 24, 0.12);
}

.guide-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.guide-brand img {
	height: 34px;
	width: auto;
	max-width: 90px;
	object-fit: contain;
}

.guide-brand span {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	line-height: 1.3;
}

.guide-card h3 {
	font-size: 22px;
	margin-bottom: 10px;
}

.guide-lead {
	margin: 0 0 12px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
}

.guide-points {
	margin: 0 0 14px;
	padding-left: 18px;
	display: grid;
	gap: 8px;
}

.guide-points li {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.4;
}

.guide-points strong { color: var(--ink); }

.guide-help {
	margin: auto 0 12px;
	font-size: 14px;
	color: var(--green-dark);
	font-weight: 600;
}

.advice-cta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px 22px;
	background: linear-gradient(135deg, #12301c 0%, var(--green-dark) 55%, #1a6b34 100%);
	color: #fff;
}

.advice-cta-bar strong {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	margin-bottom: 4px;
}

.advice-cta-bar span {
	color: rgba(255,255,255,.8);
	font-size: 14px;
}

.advice-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 20px;
	border: 0;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: transform .22s var(--ease-out), background .22s ease, color .22s ease, box-shadow .22s ease;
}

.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: #ffd84a; color: var(--ink); transform: translateY(-2px); }
.btn-secondary { background: var(--green); color: #fff; }
.btn-secondary:hover { background: var(--green-dark); color: #fff; }
.btn-ghost {
	background: rgba(8, 22, 14, 0.35);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.75);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.btn-ghost:hover {
	background: rgba(8, 22, 14, 0.55);
	color: #fff;
}

/* Sections */
.section { padding: 78px 0; }

.section-kicker {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.section-kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--yellow);
	flex-shrink: 0;
}

.section-title {
	font-size: clamp(28px, 4vw, 42px);
	margin-bottom: 12px;
	letter-spacing: -0.02em;
}

.section-lead {
	max-width: 680px;
	margin: 0 0 32px;
	color: var(--muted);
	font-size: 17px;
	line-height: 1.6;
}

.section-foot {
	margin: 28px 0 0;
	text-align: center;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-weight: 700;
	color: var(--green-dark);
	transition: color .2s ease, gap .2s ease;
}

.text-link:hover {
	color: var(--green);
	gap: 10px;
}

/* Why us */
.why-section {
	background:
		linear-gradient(180deg, rgba(232, 241, 234, 0.72) 0%, rgba(238, 243, 239, 0.55) 100%);
}

.why-about {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	margin: 0 0 28px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 241, 234, 0.95) 100%);
	border: 1px solid rgba(31, 122, 58, 0.14);
	border-left: 4px solid var(--green);
	box-shadow: var(--shadow);
}

.why-about-col {
	padding: 24px 26px;
	border-right: 1px solid rgba(31, 122, 58, 0.1);
}

.why-about-col:last-child { border-right: 0; }

.why-about-col h3 {
	margin: 0 0 10px;
	font-size: 18px;
	color: var(--green-dark);
}

.why-about-col p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.65;
}

.why-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
	gap: 14px;
	align-items: stretch;
}

.why-card {
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	padding: 22px;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color .25s ease, transform .25s var(--ease-out);
}

.why-card:hover {
	border-color: rgba(31, 122, 58, 0.3);
	transform: translateY(-2px);
}

.why-card h3 {
	font-size: 22px;
	margin-bottom: 8px;
}

.why-card p {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}

.why-card .text-link {
	margin-top: auto;
}

.why-icon,
.service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	background: #e8f1ea;
	color: var(--green-dark);
	font-size: 18px;
	border: 1px solid rgba(31, 122, 58, 0.12);
}

.why-card-photo {
	padding: 0;
	overflow: hidden;
}

.why-card-photo img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	flex: 0 0 auto;
}

.why-card-photo > div {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.why-soas-logo {
	display: inline-flex;
	align-items: center;
	margin-bottom: 14px;
	line-height: 0;
	max-width: 168px;
}

.why-soas-logo img {
	width: 100%;
	height: auto;
	display: block;
}

.why-store-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.why-store-list a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: #f7faf7;
	color: var(--ink);
	transition: border-color .2s ease, background .2s ease, transform .2s var(--ease-out);
}

.why-store-list a:hover {
	border-color: rgba(31, 122, 58, 0.35);
	background: #eef6f0;
	color: var(--green-dark);
	transform: translateX(2px);
}

.why-store-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	background: #e8f1ea;
	color: var(--green);
	font-size: 14px;
}

.why-store-list strong {
	display: block;
	font-size: 14px;
	line-height: 1.3;
}

.why-store-list small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
}

.why-store-list a:hover small {
	color: inherit;
}

/* Brands */
.assortment-section {
	background: #fff;
}

.brand-logo-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.brand-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 8px 18px rgba(20, 32, 24, 0.04);
	transition: transform .2s ease, box-shadow .2s ease;
}

.brand-logo-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.brand-logo-item img {
	max-width: 100%;
	max-height: 50px;
	object-fit: contain;
}

/* Privátna rada – čistý katalóg */
.private-brand-section {
	background: #f5f7f5;
	color: var(--ink);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.private-brand-section .section-kicker { color: var(--green); }
.private-brand-section .section-title,
.private-brand-section .product-detail-title,
.private-brand-section h3 { color: var(--ink); }

.private-brand-section .section-lead,
.private-brand-section .empty-note,
.private-brand-section .product-detail-short,
.private-brand-section .product-detail-text,
.private-brand-section .product-detail-note,
.private-brand-section .product-card-body p {
	color: var(--muted);
}

.privatna-nav { margin-bottom: 16px; }

.text-back {
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	padding: 10px 14px;
}

.text-back:hover {
	border-color: var(--green);
	color: var(--green-dark);
}

.private-brand-grid,
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.private-brand-card,
.product-card {
	display: flex;
	flex-direction: column;
	text-align: left;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(20, 32, 24, 0.05);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.private-brand-card:hover,
.product-card:hover {
	border-color: rgba(31, 122, 58, 0.45);
	box-shadow: var(--shadow);
}

.private-brand-media,
.product-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 22px;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.private-brand-media img,
.product-card-media img {
	max-height: 150px;
	width: auto;
	object-fit: contain;
}

.private-brand-body,
.product-card-body {
	padding: 16px 18px 18px;
}

.private-brand-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--ink);
}

.product-card-body h3 {
	font-size: 18px;
	margin-bottom: 8px;
	color: var(--ink);
}

.product-card-body p {
	margin: 0 0 12px;
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-cta {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--green-dark);
}

.product-detail {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 20px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--line);
	padding: 18px;
	box-shadow: var(--shadow);
}

.product-detail-media {
	background: #fff;
	border: 1px solid var(--line);
	padding: 28px;
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-detail-media img {
	max-height: 400px;
	width: auto;
	object-fit: contain;
}

.product-detail-title {
	font-size: clamp(26px, 3.5vw, 36px);
	margin: 8px 0 12px;
}

.product-detail-short {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 14px;
	color: var(--ink);
}

.product-detail-text {
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 14px;
}

.product-detail-note {
	font-size: 14px;
	margin: 0 0 18px;
}

.product-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.product-detail .section-kicker {
	color: var(--green);
}

/* Referencie */
.refs-section {
	background: #fff;
}

.refs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
	overflow-anchor: none;
}

.ref-card {
	margin: 0;
	padding: 22px;
	background: var(--surface);
	border-left: 4px solid var(--yellow);
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
	transition: transform .25s var(--ease-out);
}

.ref-card:hover {
	transform: translateY(-2px);
}

.ref-card p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
}

.ref-stars {
	margin: 0 0 8px !important;
	color: var(--yellow);
	letter-spacing: 0.08em;
	font-size: 15px !important;
	line-height: 1 !important;
}

.refs-rotator {
	position: relative;
}

.refs-grid .ref-card[hidden] {
	display: none !important;
}

.refs-grid .ref-card.is-active {
	animation: refFade 0.45s ease both;
}

@keyframes refFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.refs-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.refs-nav {
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: var(--shadow);
	transition: background .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}

.refs-nav:hover {
	background: var(--yellow);
	border-color: var(--yellow);
	transform: translateY(-1px);
}

.refs-dots {
	display: flex;
	gap: 8px;
}

.refs-dots button {
	width: 9px;
	height: 9px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: #c5d0c8;
	cursor: pointer;
}

.refs-dots button.is-active {
	background: var(--green);
}

.refs-source {
	margin: 18px 0 0;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
}

.refs-source a {
	font-weight: 700;
	color: var(--green-dark);
}

.refs-source a:hover { color: var(--green); }

.ref-card footer {
	display: grid;
	gap: 2px;
}

.ref-card strong {
	font-size: 14px;
	color: var(--ink);
}

.ref-card span {
	font-size: 13px;
	color: var(--muted);
}

/* Materials – secondary */
.materials-section {
	background: rgba(255,255,255,.35);
}

/* Wall diagram with per-layer leader lines */
.wall-diagram {
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	margin-bottom: 18px;
	overflow: hidden;
}

.wall-diagram-head {
	padding: 22px 24px 10px;
	border-bottom: 1px solid var(--line);
}

.wall-diagram-head h3 {
	font-size: 28px;
	margin-bottom: 6px;
}

.wall-diagram-head p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

.wall-diagram-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(240px, 46%) 1fr;
	min-height: 560px;
	background: #f7f8f7;
}

.wall-layers {
	display: flex;
	align-items: stretch;
	height: 100%;
	min-height: 560px;
	padding: 18px 0 18px 18px;
	box-sizing: border-box;
}

.wall-layer {
	position: relative;
	height: 100%;
	border-right: 1px solid rgba(0,0,0,.08);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

.wall-layer.l-render { flex: 0.05; background: linear-gradient(90deg, #d8c3a0, #cbb088); }
.wall-layer.l-mesh {
	flex: 0.035;
	background:
		repeating-linear-gradient(0deg, rgba(60,60,60,.35) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(90deg, rgba(60,60,60,.35) 0 1px, transparent 1px 7px),
		#cfcfcf;
}
.wall-layer.l-glue { flex: 0.045; background: linear-gradient(90deg, #b9b3a6, #a8a193); }
.wall-layer.l-eps {
	flex: 0.30;
	background:
		radial-gradient(circle at 20% 20%, rgba(255,255,255,.55) 0 2px, transparent 3px),
		radial-gradient(circle at 70% 40%, rgba(255,255,255,.45) 0 2px, transparent 3px),
		radial-gradient(circle at 40% 75%, rgba(255,255,255,.4) 0 2px, transparent 3px),
		linear-gradient(90deg, #7ec8e0, #5bb4d2);
}
.wall-layer.l-brick {
	flex: 0.38;
	background:
		linear-gradient(#0000 20%, rgba(0,0,0,.12) 20% 22%, #0000 22% 48%, rgba(0,0,0,.12) 48% 50%, #0000 50% 78%, rgba(0,0,0,.12) 78% 80%, #0000 80%),
		linear-gradient(90deg, #0000 46%, rgba(0,0,0,.15) 46% 48%, #0000 48%),
		linear-gradient(90deg, #b44a32, #9d3d28);
}
.wall-layer.l-plaster { flex: 0.10; background: linear-gradient(90deg, #ebe4d4, #ddd4c0); }
.wall-layer.l-finish { flex: 0.05; background: linear-gradient(90deg, #f6f6f4, #efefec); border-right: 0; }

.wall-leaders {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.wall-leaders line {
	stroke: #222;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.wall-leaders circle {
	fill: #111;
	stroke: #fff;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.wall-callouts {
	list-style: none;
	margin: 0;
	padding: 18px 22px 18px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	z-index: 3;
}

.wall-callouts li {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 10px;
	align-items: start;
}

.wall-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	margin-top: 2px;
}

.wall-callouts strong {
	display: block;
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.1;
	margin-bottom: 2px;
}

.wall-callouts em {
	display: block;
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	color: var(--green-dark);
	margin-bottom: 2px;
}

.wall-callouts span {
	display: block;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.35;
}

.wall-diagram-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 22px 20px;
	border-top: 1px solid var(--line);
	background: #fff;
}

.wall-diagram-foot p {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.materials-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.material-panel {
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.material-panel img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.material-panel > div { padding: 16px 18px 20px; }
.material-panel h3 { font-size: 22px; margin-bottom: 6px; }
.material-panel p { margin: 0; color: var(--muted); font-size: 15px; }

/* Services */
.services-section {
	background: linear-gradient(180deg, #f3f7f3 0%, #e8efe9 100%);
}

.soas-services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.soas-service-item {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 18px 16px 16px;
	display: grid;
	gap: 8px;
	align-content: start;
	box-shadow: var(--shadow);
	transition: border-color .25s ease, transform .25s var(--ease-out);
}

.soas-service-item:hover {
	border-color: rgba(31, 122, 58, 0.3);
	transform: translateY(-2px);
}

.soas-service-item h3 {
	margin: 0;
	font-size: 17px;
	line-height: 1.25;
}

.soas-service-item p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

.soas-service-item .text-link {
	margin-top: 0;
	font-size: 14px;
}

.soas-service-item .service-icon {
	margin-bottom: 2px;
}

.services-feature {
	display: grid;
	grid-template-columns: minmax(280px, 0.95fr) 1.2fr;
	gap: 14px;
	align-items: stretch;
}

.services-grid-side {
	grid-template-columns: 1fr 1fr;
}

.service-hero-card {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 28px 26px 26px;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.service-tag,
.calc-label,
.ticket-label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green);
}

.service-hero-card h3 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.15;
	margin: 0;
}

.service-hero-card > p {
	margin: 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.55;
}

.service-checklist {
	list-style: none;
	margin: 4px 0 8px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.service-checklist li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.service-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--green);
	border-radius: 50%;
	background:
		linear-gradient(var(--green), var(--green)) center / 8px 2px no-repeat,
		linear-gradient(var(--green), var(--green)) center / 2px 8px no-repeat;
}

.service-hero-card .btn {
	align-self: flex-start;
	margin-top: auto;
}

.services-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.service-item {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 18px 16px 16px;
	display: grid;
	gap: 8px;
	align-content: start;
	transition: border-color .25s ease, transform .25s var(--ease-out);
}

.service-item:hover {
	border-color: rgba(31, 122, 58, 0.3);
	transform: translateY(-2px);
}

.service-item .service-icon {
	margin-bottom: 2px;
}

.service-item h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
}

.service-item p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

/* Calculators */
.calc-section {
	scroll-margin-top: calc(var(--header-h) + var(--hours-bar-h) + 16px);
}

.advice-calcs {
	margin-top: 0;
	padding: 24px;
	background: var(--surface-soft);
	border: 1px solid var(--line);
}

.advice-calcs-intro {
	margin-bottom: 14px;
	max-width: 720px;
}

.advice-calcs-intro h3 {
	font-family: var(--font-display);
	font-size: clamp(26px, 3vw, 34px);
	margin: 4px 0 8px;
}

.advice-calcs-intro p:last-child {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

.calc-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.calc-card {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 22px;
	display: grid;
	gap: 12px;
	box-shadow: var(--shadow);
}

.calc-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #cfd8d2;
}

.calc-card h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 26px;
}

.calc-card label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #44554b;
}

.calc-card input,
.calc-card select {
	width: 100%;
	border: 1px solid #c9d4cc;
	background: #fff;
	padding: 11px 12px;
	font: inherit;
	color: var(--ink);
}

.calc-card input:focus,
.calc-card select:focus {
	outline: 2px solid rgba(46, 125, 50, .25);
	border-color: var(--green);
}

.calc-result {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 12px;
	animation: resultIn 0.45s var(--ease-out) both;
}

@keyframes resultIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.calc-result ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.calc-result li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--line);
	font-size: 15px;
}

.calc-result li strong {
	font-weight: 700;
	color: var(--green-dark);
	white-space: nowrap;
}

.calc-note {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.45;
}

.calc-result .btn {
	justify-self: start;
}

/* Forms / CTA */
.forms-section {
	background: #e7eee8;
}

.forms-layout-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phone-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.phone-strip a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
	font-weight: 600;
	box-shadow: var(--shadow);
	transition: border-color .22s ease, transform .22s var(--ease-out), color .22s ease;
}

.phone-strip a:hover {
	border-color: var(--green);
	color: var(--green-dark);
	transform: translateY(-2px);
}

.phone-strip i { color: var(--green); }
.phone-strip strong { font-size: 16px; }

.forms-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.ticket-form {
	--ticket-accent: var(--green);
	--ticket-accent-soft: #e8f1ea;
	--ticket-accent-ink: var(--green-dark);
	--ticket-line: rgba(31, 122, 58, 0.22);
	--ticket-focus: rgba(31, 122, 58, 0.28);
	--ticket-field-bg: #fff;
	background: var(--ticket-accent-soft);
	border: 1px solid var(--ticket-line);
	border-top: 5px solid var(--ticket-accent);
	padding: 0 22px 22px;
	display: grid;
	gap: 12px;
	box-shadow: var(--shadow);
	transition: border-color .25s ease, transform .25s var(--ease-out), box-shadow .25s ease;
}

.ticket-form:focus-within {
	border-color: var(--ticket-accent);
	box-shadow: 0 14px 30px rgba(20, 32, 24, 0.12);
}

.ticket-form--quote {
	--ticket-accent: #1f7a3a;
	--ticket-accent-soft: #dff0e4;
	--ticket-accent-ink: #145528;
	--ticket-line: rgba(31, 122, 58, 0.28);
	--ticket-focus: rgba(31, 122, 58, 0.28);
	--ticket-field-bg: #f7fcf8;
}

.ticket-form--stock {
	--ticket-accent: #d4a000;
	--ticket-accent-soft: #fff3c4;
	--ticket-accent-ink: #7a5a00;
	--ticket-line: rgba(212, 160, 0, 0.35);
	--ticket-focus: rgba(212, 160, 0, 0.3);
	--ticket-field-bg: #fffdf4;
}

.ticket-form--service {
	--ticket-accent: #2f6f9f;
	--ticket-accent-soft: #dcecf7;
	--ticket-accent-ink: #1d4d73;
	--ticket-line: rgba(47, 111, 159, 0.3);
	--ticket-focus: rgba(47, 111, 159, 0.3);
	--ticket-field-bg: #f5fafd;
}

.ticket-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0 -22px;
	padding: 16px 22px 14px;
	background: rgba(255, 255, 255, 0.55);
	border-bottom: 1px solid var(--ticket-line);
}

.ticket-top strong {
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--ticket-accent-ink);
}

.ticket-form .ticket-label {
	color: var(--ticket-accent-ink);
	background: #fff;
	border: 1px solid var(--ticket-line);
	padding: 4px 8px;
	letter-spacing: .08em;
}

.ticket-form label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #44554b;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea {
	width: 100%;
	border: 1px solid var(--ticket-line);
	background: var(--ticket-field-bg);
	padding: 11px 12px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
}

.ticket-form input:focus,
.ticket-form select:focus,
.ticket-form textarea:focus {
	outline: 2px solid var(--ticket-focus);
	border-color: var(--ticket-accent);
}

.ticket-form textarea { resize: vertical; min-height: 100px; }
.ticket-form .btn { width: 100%; margin-top: 4px; }

.ticket-form--quote .btn-primary {
	background: #1f7a3a;
}

.ticket-form--quote .btn-primary:hover {
	background: #145528;
}

.ticket-form--stock .btn-secondary {
	background: #f0c400;
	border-color: #f0c400;
	color: #142018;
}

.ticket-form--stock .btn-secondary:hover {
	background: #d4a000;
	border-color: #d4a000;
	color: #142018;
}

.ticket-form--service .btn-primary {
	background: #2f6f9f;
}

.ticket-form--service .btn-primary:hover {
	background: #1d4d73;
}

.form-note { margin: 0; font-size: 14px; font-weight: 600; }
.form-note.is-ok { color: var(--green-dark); }
.form-note.is-err { color: #a10f0f; }

.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Stores */
.stores-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.store-hours-panel {
	margin: 0 0 14px;
	padding: 14px;
	background: linear-gradient(135deg, #e8f1ea 0%, #f7faf7 100%);
	border: 1px solid rgba(31, 122, 58, 0.16);
}

.store-hours-status {
	min-height: 42px;
	padding: 10px 14px;
	font-size: 18px;
	margin-bottom: 8px;
}

.store-hours-note {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.store-hours-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	gap: 4px;
}

.store-hours-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: var(--muted);
	padding: 4px 0;
	border-bottom: 1px solid rgba(20, 32, 24, 0.06);
}

.store-hours-list li.is-today {
	color: var(--ink);
	font-weight: 700;
}

.store-hours-list li span:last-child {
	font-variant-numeric: tabular-nums;
}

.store-hours-saturday {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--green-dark);
	line-height: 1.4;
}

.store-item {
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	scroll-margin-top: calc(var(--header-h) + var(--hours-bar-h) + 16px);
	transition: border-color .25s ease, transform .25s var(--ease-out);
}

.store-item:hover {
	border-color: rgba(31, 122, 58, 0.3);
	transform: translateY(-2px);
}

.store-item:target {
	outline: 2px solid rgba(31, 122, 58, 0.35);
	outline-offset: 4px;
}

.store-gallery {
	display: grid;
	gap: 8px;
}

.store-gallery-stage {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #dfe7e1;
}

.store-gallery-stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .35s ease, transform .45s var(--ease-out);
}

.store-gallery-stage.is-switching img {
	opacity: 0.35;
	transform: scale(1.02);
}

.store-gallery-tag {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 6px 10px;
	background: rgba(20, 32, 24, 0.78);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.store-gallery-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border: 0;
	background: rgba(255,255,255,.92);
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 6px 16px rgba(20, 32, 24, 0.18);
	transition: background .2s ease, color .2s ease;
}

.store-gallery-nav:hover {
	background: var(--yellow);
	color: var(--ink);
}

.store-gallery-nav.is-prev { left: 10px; }
.store-gallery-nav.is-next { right: 10px; }

.store-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	padding: 0 8px;
}

.store-gallery-thumbs button {
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	background: #dfe7e1;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .2s ease, transform .2s var(--ease-out);
}

.store-gallery-thumbs button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.store-gallery-thumbs button:hover {
	transform: translateY(-1px);
}

.store-gallery-thumbs button.is-active {
	border-color: var(--green);
}

.store-info {
	padding: 16px 18px 8px;
}

.store-name { font-size: 24px; margin-bottom: 10px; }

.store-address,
.store-email,
.store-phone {
	margin: 8px 0;
	color: var(--muted);
	font-size: 15px;
}

.store-address i,
.store-email i {
	margin-right: 8px;
	color: var(--green);
}

.store-email a {
	color: var(--ink);
	border-bottom: 1px solid rgba(31,122,58,.3);
}

.store-call-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	font-weight: 700;
	border-bottom: 1px solid rgba(31,122,58,.3);
}

.store-call-btn i { color: var(--green); }

.store-call-label { display: none; }

.store-gmap-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 10px 0 4px;
}

.store-gmap-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--green-dark);
	border-bottom: 1px solid rgba(31, 122, 58, 0.28);
}

.store-gmap-links a:hover {
	color: var(--green);
	border-bottom-color: var(--yellow);
}

.store-gmap-links i {
	color: var(--yellow);
	font-size: 13px;
}

.store-map {
	margin: auto 18px 18px;
	overflow: hidden;
	border: 1px solid var(--line);
}

.store-map iframe {
	display: block;
	width: 100%;
	height: 180px;
	border: 0;
}

.soas-footer-box {
	margin-top: 28px;
	display: flex;
	justify-content: center;
}

.soas-partner-badge {
	display: grid;
	justify-items: center;
	gap: 12px;
	max-width: 360px;
	padding: 18px 20px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	color: var(--ink);
	text-align: center;
	transition: border-color .22s ease, transform .22s var(--ease-out), box-shadow .22s ease;
}

.soas-partner-badge:hover {
	border-color: rgba(227, 30, 36, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(20, 32, 24, 0.12);
	color: var(--ink);
}

.soas-partner-logo {
	display: block;
	width: min(100%, 300px);
	height: auto;
	max-height: none;
	background: transparent;
}

.soas-partner-note {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	line-height: 1.4;
}

.form-consent {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted);
	font-weight: 500 !important;
}

.form-consent input {
	width: 18px !important;
	height: 18px;
	margin-top: 2px;
	flex: 0 0 auto;
}

.form-consent a {
	font-weight: 700;
	text-decoration: underline;
}

.site-footer {
	border-top: 1px solid rgba(31, 122, 58, 0.16);
	padding: 42px 0 34px;
	background: linear-gradient(180deg, #eef5ef 0%, #e4eee6 100%);
	color: var(--ink);
}

.footer-wrap {
	display: grid;
	gap: 22px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 24px;
}

.footer-brand img { margin-bottom: 12px; }

.footer-brand p {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
	max-width: 34ch;
}

.footer-soas {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 16px 20px;
	background: rgba(255,255,255,.78);
	border: 1px solid rgba(31, 122, 58, 0.14);
	color: var(--ink);
	line-height: 1.4;
	transition: border-color .2s ease, background .2s ease;
}

.footer-soas:hover {
	border-color: rgba(227, 30, 36, 0.35);
	background: #fff;
	color: var(--ink);
}

.footer-soas img {
	height: 72px;
	width: auto;
	flex: 0 0 auto;
	display: block;
}

.footer-soas-text {
	font-size: 15px;
	color: var(--muted);
	max-width: 54ch;
}

.footer-soas-text strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--green-dark);
	line-height: 1.2;
}

.footer-grid h3 {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--green-dark);
}

.footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 14px;
}

.footer-list a {
	font-weight: 700;
	color: var(--ink);
}

.footer-list a:hover { color: var(--green); }

.footer-link-btn {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	text-align: left;
}

.footer-link-btn:hover { color: var(--green); }

.footer-copy {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.cookie-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1200;
	max-width: 920px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid rgba(31, 122, 58, 0.2);
	box-shadow: 0 16px 40px rgba(20, 32, 24, 0.18);
}

.cookie-banner[hidden] { display: none !important; }

.cookie-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
}

.cookie-banner-copy strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
}

.cookie-banner-copy p {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.45;
}

.cookie-banner-actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.legal-header .header-inner {
	width: min(900px, calc(100% - 32px));
}

.legal-page {
	padding: 40px 0 60px;
}

.legal-wrap { width: min(900px, calc(100% - 40px)); }

.legal-card {
	margin: 0 0 16px;
	padding: 20px 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--green);
	box-shadow: var(--shadow);
}

.legal-card h2 {
	margin: 0 0 10px;
	font-size: 22px;
}

.legal-card p,
.legal-card li {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.6;
}

.legal-card ul {
	margin: 0;
	padding-left: 18px;
}

.scroll-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	display: none;
	z-index: 1100;
	cursor: pointer;
	box-shadow: var(--shadow);
}

.mobile-call {
	display: none;
	position: fixed;
	left: 14px;
	bottom: 14px;
	z-index: 1100;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: min(280px, calc(100vw - 28px));
}

.mobile-call-panel {
	display: none;
	flex-direction: column;
	gap: 8px;
}

.mobile-call-panel.is-open { display: flex; }

.mobile-call-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
	background: var(--green);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	box-shadow: var(--shadow);
}

.mobile-call-option:hover,
.mobile-call-option:focus {
	background: var(--green-dark);
	color: #fff;
}

.mobile-call-option-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mobile-call-option-num {
	font-size: 12px;
	font-weight: 700;
	opacity: 0.92;
}

.mobile-call-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 0;
	background: var(--green);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: var(--shadow);
}

.mobile-call-btn:hover,
.mobile-call-btn:focus,
.mobile-call-btn.is-open {
	background: var(--green-dark);
	color: #fff;
}

.mobile-call-caret {
	margin-left: 2px;
	font-size: 14px;
	line-height: 1;
}

.mobile-call-btn.is-open .mobile-call-caret {
	transform: rotate(180deg);
	display: inline-block;
}

body.nav-open .mobile-call { display: none !important; }

body:has(.cookie-banner:not([hidden])) .mobile-call,
body:has(.cookie-banner:not([hidden])) .scroll-to-top {
	bottom: 118px;
}

.empty-note { margin: 0; padding: 12px 0; }

@media (max-width: 1100px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.why-about { grid-template-columns: 1fr; }
	.why-about-col {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.why-about-col:last-child { border-bottom: 0; }
	.why-grid { grid-template-columns: 1fr 1fr; }
	.why-card-photo { grid-column: span 2; }
	.services-feature,
	.forms-layout-3,
	.calc-layout {
		grid-template-columns: 1fr;
	}
	.services-grid,
	.services-grid-side,
	.soas-services-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 981px) {
	.brand-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.product-detail,
	.forms-layout,
	.phone-strip,
	.stores-container,
	.private-brand-grid,
	.product-grid,
	.materials-grid,
	.refs-grid {
		grid-template-columns: 1fr 1fr;
	}
	.product-detail,
	.forms-layout,
	.wall-diagram-stage,
	.advice-intro,
	.advice-guides {
		grid-template-columns: 1fr;
	}
	.wall-layers {
		min-height: 220px;
		height: 220px;
		padding: 14px;
	}
	.wall-diagram-stage { min-height: 0; }
	.wall-leaders { display: none; }
	.wall-callouts {
		padding: 16px;
		gap: 12px;
		justify-content: flex-start;
	}
	.wall-callouts li {
		padding: 10px 0;
		border-top: 1px solid var(--line);
	}
}

@media (max-width: 980px) {
	.hours-bar {
		overflow: hidden;
	}
	.hours-bar-inner {
		display: flex;
		grid-template-columns: none;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding: 8px 12px;
		scrollbar-width: thin;
	}
	.hours-chip {
		flex: 0 0 min(78vw, 280px);
		scroll-snap-align: start;
		align-items: flex-start;
	}
	.hours-status { margin-top: 1px; }
	.hours-chip-call {
		font-size: 12px;
		align-self: center;
	}
	.advice-cta-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.advice-cta-actions .btn { width: 100%; }
}

@media (max-width: 860px) {
	.hours-bar { display: none !important; }
	:root { --hours-bar-h: 0px; }
	.site-header { position: sticky; }
	.header-inner { position: relative; }
	.nav-toggle { display: inline-block; }
	.mobile-call { display: flex; }
	.main-nav a.is-active {
		border-bottom-color: transparent;
		background: linear-gradient(90deg, rgba(31, 122, 58, 0.1), transparent);
		padding-left: 8px;
	}
	.store-call-number { display: none; }
	.store-call-label { display: inline; }
	.store-call-btn {
		display: inline-flex;
		justify-content: center;
		width: 100%;
		min-height: 46px;
		padding: 12px 16px;
		background: var(--green);
		color: #fff;
		border: 0;
		border-bottom: 0;
		font-size: 15px;
		font-weight: 800;
	}
	.store-call-btn i { color: #fff; }
	.store-call-btn:hover,
	.store-call-btn:focus {
		background: var(--green-dark);
		color: #fff;
	}
	.main-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		padding: 10px 18px 18px;
		border-bottom: 1px solid rgba(31, 122, 58, 0.16);
		box-shadow: var(--shadow);
		max-height: min(70vh, 520px);
		overflow-y: auto;
	}
	.main-nav.is-open { display: flex; }
	.main-nav a {
		padding: 12px 0;
		border-bottom: 1px solid var(--line);
		color: var(--green-dark);
	}
	.brand img { height: 46px; }
	.brand-soas img { height: 34px; }
	.brand-lockup { gap: 8px; }
	.hero {
		min-height: 70vh;
		padding-top: 28px;
	}
	.hero-lead { font-size: clamp(28px, 8vw, 40px); }
	.hero-actions { width: 100%; }
	.hero-actions .btn { width: 100%; }
	.section { padding: 48px 0; }
	.container-wide { width: min(100% - 28px, 1180px); }
	.hours-chip-text span { white-space: normal; }
	.refs-controls { margin-top: 12px; }
}

@media (max-width: 640px) {
	.footer-grid { grid-template-columns: 1fr; }
	.footer-soas {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer-soas img { height: 64px; }
	.footer-soas-text { max-width: none; }
	.cookie-banner {
		left: 10px;
		right: 10px;
		bottom: 10px;
	}
	.cookie-banner-inner {
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
		gap: 12px;
	}
	.cookie-banner-copy p { font-size: 12px; }
	.cookie-banner-actions {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.cookie-banner-actions .btn {
		width: 100%;
		min-height: 44px;
		padding: 10px 12px;
		font-size: 13px;
	}
	.hours-chip {
		flex-basis: min(88vw, 300px);
		padding: 6px;
	}
	.hours-chip-call {
		padding: 6px 7px;
		font-size: 11px;
	}
	.why-grid,
	.brand-logo-grid,
	.private-brand-grid,
	.product-grid,
	.materials-grid,
	.refs-grid,
	.phone-strip,
	.stores-container,
	.services-grid,
	.services-grid-side,
	.soas-services-grid,
	.forms-layout-3,
	.forms-layout,
	.calc-layout {
		grid-template-columns: 1fr;
	}
	.brand-logo-grid { grid-template-columns: 1fr 1fr; }
	.why-card-photo { grid-column: auto; }
	.materials-grid { grid-template-columns: 1fr; }
	.wall-diagram-foot { flex-direction: column; align-items: stretch; }
	.wall-diagram-foot .btn { width: 100%; }
	.soas-partner-badge { max-width: 100%; }
	.soas-partner-logo { width: min(100%, 280px); }
	.store-hours-status { font-size: 15px; min-height: 36px; }
	.scroll-to-top {
		right: 14px;
		bottom: 14px;
	}
}

@media (hover: none) {
	.btn-primary:hover,
	.brand-logo-item:hover,
	.private-brand-card:hover,
	.product-card:hover,
	.guide-card:hover,
	.why-card:hover,
	.service-item:hover,
	.soas-service-item:hover,
	.ref-card:hover,
	.store-item:hover,
	.store-gallery-thumbs button:hover,
	.phone-strip a:hover { transform: none; }
}

/* Progressive reveal – len opacity, bez posunu (žiadne cukanie pri čítaní) */
.reveal {
	opacity: 0;
	transition: opacity var(--reveal-duration) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
	opacity: 1;
}

.brand-logo-grid .reveal {
	opacity: 0;
}

.brand-logo-grid .reveal.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal,
	.reveal.is-visible,
	.hero-content,
	.hero-overlay::after,
	.hero-slide,
	.calc-result {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.hero-media img {
		animation: none !important;
		transition: none !important;
		opacity: 0 !important;
		transform: scale(1.04) !important;
	}
	.hero-media img.is-active { opacity: 1 !important; }
	.reveal { opacity: 1; }
}