/* ==========================================================================
   Lager032 — main stylesheet
   Tokens taken from Figma "Home" (node 47:2419).
   ========================================================================== */

:root {
	--navy: #112955;
	--navy-2: #16306a;
	--red: #d60000;
	--red-dark: #b00000;
	--ink: #1c290d;          /* nav text */
	--white: #fff;
	--container: none;
	--gutter: 6.944vw; /* 100/1440 (Figma) — content holds the 1240/1440 proportion at any width */

	/* Redesign palette (Figma 2026-06-12) */
	--c-navy: #112955;
	--c-ink: #0F1C36;
	--c-red: #d60000;
	--c-red-dark: #b00000;
	--c-muted: #5A6A8A;
	--c-accent: #8EC5FF;
	--c-panel: #E4ECF8;
	--c-input: #EEF1F8;
	--c-line: #E6EAF2;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	line-height: 1.5;
	background: var(--white);
	/* Sticky footer: header + content + footer fill the viewport; footer never floats mid-page. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#content { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	width: 100%;
}

.skip-link {
	position: absolute;
	left: -9999px;
}
.screen-reader-text:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }

.icon { flex: none; }

/* ---- Utility (top) bar --------------------------------------------------- */
.topbar { background: var(--navy); color: var(--white); font-size: 13px; }

.topbar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	min-height: 50px;
	flex-wrap: wrap;
}

.topbar__contacts {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
}
.topbar__contacts li { display: flex; align-items: center; gap: 8px; }
.topbar__contacts a { color: var(--white); text-decoration: none; }
.topbar__contacts a:hover { text-decoration: underline; }
.topbar .icon { color: var(--white); }

.topbar__actions {
	position: absolute;
	right: var(--gutter);
	display: flex;
	gap: 18px;
}
.topbar__icon { color: var(--white); display: inline-flex; }

/* ---- Main header --------------------------------------------------------- */
.site-header { background: var(--white); }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 86px;
}

.site-branding { flex: none; }
.site-branding img,
.custom-logo { height: 56px; width: auto; }
.site-logo-text {
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -.01em;
	text-decoration: none;
}
.site-logo-text span { color: var(--navy); }
.site-logo-text strong { color: var(--red); }

.main-nav { margin-left: auto; }
.main-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 40px;
}
.main-nav__list a {
	text-decoration: none;
	color: var(--ink);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
}
.main-nav__list a:hover { color: var(--red); }

.btn {
	display: inline-block;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}
.btn--shop {
	background: var(--red);
	color: var(--white);
	text-transform: uppercase;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	padding: 16px 34px;
	border-radius: 6px;
}
.btn--shop:hover { background: var(--red-dark); }

.nav-toggle { display: none; }

/* ---- Hero ---------------------------------------------------------------- */
/* (old hero styles removed 2026-06-12 — superseded by the redesign hero block below) */

/* ---- Brand strip --------------------------------------------------------- */
.brand-strip { background: var(--navy); padding: 36px var(--gutter) 30px; }
.brand-strip__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	flex-wrap: wrap;
}
.brand-strip__logos img { height: 44px; width: auto; object-fit: contain; }
.brand-strip__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}
.brand-strip__dots span {
	width: 42px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255,255,255,.3);
}
.brand-strip__dots span.is-active { background: var(--red); }

/* ---- Ponuda / category grid --------------------------------------------- */
.ponuda { padding: 80px 0; background: var(--white); }
.ponuda__title {
	text-align: center;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
	color: var(--navy);
	margin: 0 0 48px;
}

.cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.cat-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 295 / 240;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	background: linear-gradient(145deg, #0c1c3a 0%, var(--navy-2) 60%, #0c1c3a 100%);
	transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}
.cat-card__label {
	position: relative;
	z-index: 2;
	padding: 20px;
	color: var(--white);
	font-family: 'Roboto Condensed', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17,41,85,.25); }

/* ---- Section placeholders (About / Contact — to be built next) ---------- */
.section-todo {
	margin: 0;
	padding: 60px var(--gutter);
	text-align: center;
	color: #8a93a3;
	font-style: italic;
	border-top: 1px dashed #e1e5ec;
}

/* ---- Footer (simple — full footer design pending) ----------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.85); font-size: 14px; }
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 64px;
	padding: 48px var(--gutter);
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h3 { color: var(--white); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	padding: 18px var(--gutter);
	font-size: 13px;
	color: rgba(255,255,255,.7);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.cat-grid { grid-template-columns: repeat(3, 1fr); }
	.hero__title { font-size: 40px; }
	.main-nav__list { gap: 26px; }
	.btn--shop { padding: 14px 24px; }
}

@media (max-width: 768px) {
	.main-nav, .btn--shop { display: none; }
	.nav-toggle {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-left: auto;
		background: none;
		border: 0;
		padding: 6px;
		cursor: pointer;
	}
	.nav-toggle span { width: 26px; height: 3px; background: var(--navy); border-radius: 2px; }
	.topbar__inner { justify-content: center; }
	.topbar__actions { position: static; }
	.topbar__contacts { font-size: 12px; gap: 14px; }
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.ponuda { padding: 56px 0; }
	.ponuda__title { font-size: 28px; margin-bottom: 32px; }
	.hero { min-height: 460px; padding: 90px var(--gutter) 64px; }
	.hero__title { font-size: 30px; }
}

@media (max-width: 480px) {
	.cat-grid { gap: 10px; }
	.brand-strip__logos { gap: 28px; }
	.brand-strip__logos img { height: 34px; }
}

/* ==========================================================================
   REDESIGN 2026-06-12 — Header (util bar · masthead · Svi proizvodi mega-dropdown)
   Figma nodes 106:3461 / 106:3506. New markup in header.php (util-bar / masthead).
   ========================================================================== */

/* Utility bar */
.util-bar { background: #112955; color: #fff; font-family: 'Montserrat', sans-serif; }
.util-bar__inner { display: flex; align-items: center; justify-content: flex-end; min-height: 50px; gap: 20px; }
.util-bar__contacts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
.util-bar__phones { display: inline-flex; align-items: center; gap: 9px; }
.util-bar__phones a { color: #fff; text-decoration: none; font-weight: 600; font-size: 11px; }
.util-bar__phones a:hover { text-decoration: underline; }
.util-bar__contacts a, .util-bar__addr { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-weight: 600; font-size: 11px; }
.util-bar__contacts a:hover { text-decoration: underline; }
.util-bar .icon { width: 14px; height: 14px; opacity: .9; flex: none; }
.util-bar__tools { display: flex; align-items: center; gap: 16px; flex: none; }

/* Sticky header wrapper (util-bar + masthead stick together on scroll) */
.siteheader { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 10px rgba(15,28,54,.07); }

/* Masthead */
.masthead { background: #fff; border-bottom: 1px solid var(--c-line); position: relative; z-index: 50; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 86px; position: relative; }

/* Logo */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand__img { height: 56px; width: auto; display: block; }
.brand__badge { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; background: var(--c-navy); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { color: var(--c-navy); font-weight: 700; font-size: 17px; }
.brand__sub { color: var(--c-muted); font-weight: 600; font-size: 10px; letter-spacing: .5px; margin-top: 3px; }

/* "Svi proizvodi" button + mega-dropdown */
.shopcats { position: relative; flex: none; }
.shopcats__btn {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
	background: #d60000; color: #fff; border: 0; border-radius: 4px;
	padding: 11px 24px; font: 700 12px/1 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .3px; text-decoration: none;
}
.shopcats__btn:hover { background: #b00000; }
.shopcats__btn .icon { width: 12px; height: 12px; }
.shopcats__btn .icon--chevron { transition: transform .18s ease; }
/* Scoped to the button's OWN chevron: a bare descendant selector also caught the
   category carets inside the dropdown, so opening the panel (which puts focus inside
   .shopcats) flipped Ležajevi/Remenje upside down. Those rotate via aria-expanded. */
.shopcats:hover > .shopcats__btn .icon--chevron,
.shopcats:focus-within > .shopcats__btn .icon--chevron { transform: rotate(180deg); }

.megamenu {
	position: absolute; top: calc(100% + 8px); right: 0; width: 540px; max-width: 92vw;
	background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(15,28,54,.18);
	border: 1px solid var(--c-line); overflow: visible;
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 60;
}
.shopcats:hover .megamenu,
.shopcats:focus-within .megamenu,
.megamenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.megamenu__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--c-panel); border-radius: 10px 10px 0 0; }
.megamenu__title { color: var(--c-navy); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.megamenu__all { display: inline-flex; align-items: center; gap: 5px; color: var(--c-red); font-weight: 600; font-size: 12px; text-decoration: none; }
.megamenu__all .icon { width: 11px; height: 11px; }
.megamenu__all:hover { text-decoration: underline; }

.megamenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 10px; }
.megacat, .megacat--has-sub > .megacat__main { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 4px; text-decoration: none; }
.megacat:hover, .megacat--has-sub > .megacat__main:hover { background: var(--c-input); }
.megacat__name { color: var(--c-ink); font-weight: 600; font-size: 14px; }
.megacat__sub { color: var(--c-muted); font-weight: 600; font-size: 12px; }

/* Categories with subcategories: caret + hover flyout to the right */
.megacat--has-sub { position: relative; padding: 0; }
.megacat--has-sub > .megacat__main { position: relative; padding-right: 22px; }
.megacat--has-sub > .megacat__main::after { content: '\203A'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--c-muted); font-weight: 700; font-size: 16px; line-height: 1; }
.submenu {
	position: absolute; left: 0; top: 100%; margin-top: 4px; display: none;
	grid-auto-flow: row; grid-template-rows: none; gap: 2px;
	min-width: 220px; background: #fff; border: 1px solid var(--c-line); border-radius: 8px;
	box-shadow: 0 18px 50px rgba(15,28,54,.18); padding: 10px; z-index: 70;
}
.megacat--has-sub:hover > .submenu, .megacat--has-sub:focus-within > .submenu { display: grid; }
/* Invisible bridge over the 4px margin gap: without it the pointer leaves .megacat--has-sub on the way
   down to the flyout, :hover drops and the flyout closes before it can be reached. */
.submenu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; }
/* Desktop: open only after the pointer rests ~200ms on the item, so passing over Ležajevi on the
   way to another category doesn't pop its flyout over the items below. Closing is quick (100ms). */
@media (min-width: 1024px) {
	.submenu { display: grid; visibility: hidden; opacity: 0; transition: opacity .1s ease, visibility 0s linear .1s; }
	.megacat--has-sub:hover > .submenu, .megacat--has-sub:focus-within > .submenu { visibility: visible; opacity: 1; transition-delay: .2s; }
}
/* Long lists span two columns at the parent dropdown's width; the "Svi: …" link stays full-width on top. */
.submenu--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; width: 540px; max-width: 92vw; }
.submenu--cols .submenu__all { grid-column: 1 / -1; }
.submenu__item, .submenu__all { display: block; padding: 6px 12px; border-radius: 4px; color: var(--c-ink); font-size: 13px; text-decoration: none; white-space: nowrap; }
.submenu__item:hover, .submenu__all:hover { background: var(--c-input); color: var(--c-navy); }
.submenu__all { color: var(--c-red); font-weight: 600; }

/* Below desktop, render the flyout inline (single column) instead of off-screen to the side. */
@media (max-width: 1023px) {
	.submenu { position: static; grid-auto-flow: row; grid-template-rows: none; min-width: 0; box-shadow: none; border: 0; padding: 2px 0 6px 14px; }
	.submenu--cols { grid-template-columns: 1fr; }
	.submenu::before { display: none; }
}

/* Primary nav */
.mainnav { flex: none; display: flex; align-items: center; gap: 10px; }
.mainnav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mainnav__list a { display: inline-block; padding: 8px 12px; border-radius: 4px; color: #112955; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .2px; text-decoration: none; }
.mainnav__list a:hover, .mainnav__list .current-menu-item > a { color: #d60000; }

/* Search */
.searchbar { position: relative; width: 249px; flex: none; }
.searchbar .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--c-muted); }
.searchbar input { width: 100%; height: 34px; border: 0; border-radius: 4px; background: #eef1f8; padding: 0 12px 0 34px; font: 400 14px/1 'Inter', sans-serif; color: var(--c-ink); }
.searchbar input:focus { outline: 2px solid rgba(214,0,0,.55); outline-offset: 0; }

/* Desktop (≥1200px): the [Svi proizvodi + nav] block sits in NORMAL FLOW and is centered
   in the free space between the logo (left) and the search/cart (right). In-flow (not
   absolute) means it can never overlap the search — the search shrinks before anything
   collides. Below 1200px the nav collapses to the hamburger (see the max-width:1199 block). */
@media (min-width: 1200px) {
	.searchbar { width: 280px; }
}

/* Cart */
.cartbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; color: #fff; text-decoration: none; }
.cartbtn:hover { opacity: .85; }
.cartbtn .icon { width: 23px; height: 23px; }

/* Mobile nav toggle (hidden on desktop) */
.navtoggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; cursor: pointer; }
.navtoggle span { width: 24px; height: 2px; background: var(--c-navy); border-radius: 2px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.megamenu { width: 480px; }
}
@media (max-width: 1100px) {
	.navtoggle { display: inline-flex; order: 5; }
	.mainnav { order: 10; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: 4px; }
	.masthead.is-open .mainnav { display: flex; }
	.mainnav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.masthead__inner { flex-wrap: wrap; row-gap: 10px; }
	.shopcats, .shopcats__btn { width: 100%; justify-content: center; }
	.megamenu { right: auto; left: 0; }
}
@media (max-width: 768px) {
	.util-bar__inner { flex-wrap: wrap; row-gap: 10px; }
	.util-bar__addr { display: none; }
	.util-bar__tools { flex: 1 1 100%; }
	.searchbar { flex: 1 1 auto; width: auto; }
}
@media (max-width: 560px) {
	.util-bar__contacts a span { display: none; }
	.megamenu { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; }
	.megamenu__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REDESIGN 2026-06-12 — Footer (Figma node 110:2027 footer)
   ========================================================================== */
.sitefoot { background: #fff; color: #94A3B8; box-shadow: 0 -5px 20px rgba(15,28,54,.08); }
.sitefoot__cols {
	display: grid;
	grid-template-columns: 1.7fr 0.8fr 1fr 1.2fr;
	gap: 40px;
	padding-top: 56px;
	padding-bottom: 44px;
}
.sitefoot__brand { width: 258px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.footbrand { display: block; width: 100%; text-decoration: none; }
.footbrand__logo { width: 100%; height: auto; display: block; }
.sitefoot__blurb { margin: 18px 0 0; color: #94A3B8; font-size: 13px; line-height: 1.6; }
.sitefoot__cert { display: block; margin: 24px 0 0; height: 92px; width: auto; align-self: center; }

.sitefoot__title { margin: 4px 0 18px; color: #112955; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.sitefoot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.sitefoot__list a { color: #94a3b8; text-decoration: none; font-weight: 600; font-size: 15px; }
.sitefoot__list a:hover { color: #112955; }
.sitefoot__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #94a3b8; }
.sitefoot__contact .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--c-red); flex: none; }

.sitefoot__legal-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 18px; }
.sitefoot__legal-inner::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 2px solid #112955; }
.sitefoot__legal p { margin: 0; color: #475569; font-size: 12px; }

@media (max-width: 900px) {
	.sitefoot__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
	.sitefoot__legal-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 520px) {
	.sitefoot__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REDESIGN 2026-06-12 — Homepage (Figma 110:2027)
   Hero · Kategorije · Proizvodi · O Nama · Brendovi · Kontakt
   ========================================================================== */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; padding: 12px 20px; font: 600 15px/1 'Inter', sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn .icon { width: 16px; height: 16px; }
.btn--red { background: var(--c-red); color: #fff; }
.btn--red:hover { background: var(--c-red-dark); }
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.16); }
.btn--navy { background: var(--c-navy); color: #fff; }
.btn--navy:hover { background: #16336a; }
.btn--sm { padding: 8px 12px; font-size: 13px; border-radius: 5px; }
.btn--block { width: 100%; }

/* Section heads */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.sec-eyebrow { display: inline-block; color: var(--c-red); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.sec-title { margin: 0; color: var(--c-navy); font-weight: 700; font-size: 32px; line-height: 1.2; }
.sec-sub { margin: 12px auto 0; max-width: 640px; color: var(--c-muted); font-size: 15px; }
.sec-link { display: inline-flex; align-items: center; gap: 6px; color: var(--c-red); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.sec-link .icon { width: 14px; height: 14px; }
.sec-link:hover { text-decoration: underline; }

/* Hero */
/* header (util-bar 36 + masthead 65) + hero + KPI band (~72) = 100vh */
/* Hero image fills the viewport below the header, with the KPI band sitting just
   under it (header 136px + hero + KPI band ~80px = 100vh). */
.hero { position: relative; min-height: calc(100vh - 136px - 80px); background-size: cover; background-position: center; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(27, 62, 122, 0.93) 7.74%, rgba(27, 62, 122, 0.8) 54.23%, rgba(10, 20, 50, 0.65) 92.26%); }
.hero__inner { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 56px; }
.hero__content { max-width: 760px; text-align: left; }
.hero__eyebrow { display: none; }
.hero__title { margin: 0; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.15; }
.hero__title span { display: block; }
.hero__lead { margin: 20px 0 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: #cdd6e6; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__cta-mobile { display: none; } /* shown instead of the catalogue button below 768px */
.hero__stats { background: #0f1c36; color: #fff; }
.hero__stats-inner { max-width: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.herostat { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.herostat .icon { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; background: #d60000; border-radius: 4px; color: #fff; flex: none; }
.herostat strong { display: block; font-size: 18px; line-height: 1.1; }
.herostat span { font-size: 12px; color: #aebbd2; }

/* Kategorije */
.cats { padding: 100px 0 72px; background: #fff; }
.cats .sec-head { margin-bottom: 64px; }
.cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 27px 20px; }
/* Cards show client banners whole (title + info baked in): square card, contain, dark backing. */
.catcard { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #0f1c36; border: 1px solid var(--c-line); text-decoration: none; }
.catcard img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s ease; }
.catcard:hover img { transform: scale(1.03); }

/* Proizvodi */
.catalog { padding: 72px 0; background: #F6F8FC; }
.catalog__filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.catalog__search { position: relative; }
.catalog__search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--c-muted); }
.catalog__search input { width: 100%; height: 44px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; padding: 0 14px 0 38px; font-size: 14px; color: var(--c-ink); }
.catalog__filters select { height: 44px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; padding: 0 12px; font-size: 14px; color: var(--c-ink); }
.catalog__search input:focus, .catalog__filters select:focus { outline: none; border-color: var(--c-navy); }
.catalog__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.catalog__empty { grid-column: 1 / -1; text-align: center; color: var(--c-muted); padding: 48px 0; font-size: 15px; }
.prodcard { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.prodcard__media { display: block; aspect-ratio: 4 / 3; background: var(--c-input); overflow: hidden; }
.prodcard__media img { width: 100%; height: 100%; object-fit: cover; }
.prodcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prodcard__tag { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .3px; }
.prodcard__name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.prodcard__name a { color: var(--c-ink); text-decoration: none; }
.prodcard__name a:hover { color: var(--c-navy); }
.prodcard__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 8px; }
.prodcard__price { display: flex; flex-direction: column; color: var(--c-navy); font-weight: 700; font-size: 16px; }
.prodcard__price small { font-weight: 400; font-size: 11px; color: var(--c-muted); }

/* O Nama */
.about { padding: 80px 0; background: #fff; }
/* Extra inset on top of the gutter scales with viewport: full 100px near 1920, ramping to 0 by ~1280,
   so the image isn't crowded on smaller laptops (~1500). */
.about__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding-inline: calc(var(--gutter) + clamp(0px, (100vw - 1280px) / 6.4, 100px)); }
.about__media { position: relative; }
.about__media img { display: block; width: 100%; aspect-ratio: 500 / 402; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.about__badge { position: absolute; right: -14px; bottom: -14px; background: var(--c-red); color: #fff; border-radius: 12px; padding: 14px 18px; text-align: center; box-shadow: 0 12px 24px rgba(200,0,29,.25); }
.about__badge strong { display: block; font-size: 26px; line-height: 1; }
.about__badge span { font-size: 12px; }
.about__lead { color: #44506a; font-size: 15px; line-height: 1.7; margin: 16px 0 24px; }
.about__features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feat { display: flex; gap: 12px; }
.feat .icon { width: 22px; height: 22px; color: var(--c-red); flex: none; margin-top: 2px; }
.feat strong { display: block; color: var(--c-navy); font-size: 15px; margin-bottom: 4px; }
.feat p { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.5; }
/* O-nama page: second About block has the image on the right. */
.about--reverse .about__inner { grid-template-columns: 1.1fr 1fr; }
.about--reverse .about__media { order: 2; }
.about--reverse .about__content { order: 1; }

/* Category guide page (cat_guide) */
.guidehero { position: relative; background-color: var(--c-navy); background-size: cover; background-position: center; padding: 72px 0; }
.guidehero__overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(17,41,85,.94) 8%, rgba(17,41,85,.82) 55%, rgba(10,20,50,.68) 96%); }
.guidehero__inner { position: relative; z-index: 1; }
.crumbs--light, .crumbs--light a { color: rgba(255,255,255,.75); }
.crumbs--light a:hover { color: #fff; }
.crumbs--light .crumbs__current { color: #fff; }
.guidehero__title { margin: 14px 0 0; color: #fff; font-size: 40px; font-weight: 700; line-height: 1.15; }
.guidehero__sub { margin: 14px 0 0; color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.6; max-width: 640px; }
.guidehero__cta { margin-top: 26px; }
.guide { padding: 56px 0 72px; background: #fff; }
.entry-content { color: var(--c-ink); font-size: 16px; line-height: 1.75; max-width: 1100px; }
.entry-content > * + * { margin-top: 18px; }
.entry-content h2 { color: var(--c-navy); font-size: 26px; font-weight: 700; line-height: 1.25; margin-top: 38px; }
.entry-content h3 { color: var(--c-navy); font-size: 20px; font-weight: 700; margin-top: 28px; }
.entry-content p { color: #44506a; }
.entry-content a { color: var(--c-red); text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 22px; color: #44506a; }
.entry-content li + li { margin-top: 6px; }
.entry-content h4 { color: var(--c-navy); font-size: 17px; font-weight: 700; margin-top: 24px; }
.entry-content strong { color: var(--c-ink); font-weight: 700; }
.entry-content img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.entry-content figure { margin: 26px 0; }
.entry-content figcaption, .entry-content .wp-caption-text { color: var(--c-muted); font-size: 13px; margin-top: 8px; text-align: center; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 6px 0 16px 24px; max-width: 50%; }
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content blockquote { margin: 26px 0; padding: 14px 20px; border-left: 4px solid var(--c-red); background: var(--c-input); border-radius: 0 8px 8px 0; }
.entry-content blockquote p { color: var(--c-ink); margin: 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14px; }
.entry-content th, .entry-content td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--c-input); color: var(--c-navy); font-weight: 600; }
.guide__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.guide__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.guide__foot { margin-top: 40px; }
@media (max-width: 680px) { .guidehero { padding: 48px 0; } .guidehero__title { font-size: 30px; } .guide__gallery { grid-template-columns: repeat(2, 1fr); } }

/* Katalog page (embedded PDF) */
.katalog { padding: 28px 0 64px; background: #fff; }
.katalog__head { display: flex; align-items: center; gap: 20px; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 12px; padding: 20px 24px; margin-bottom: 22px; }
.katalog__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--c-navy); color: #fff; }
.katalog__icon .icon { width: 26px; height: 26px; }
.katalog__headtext { flex: 1; min-width: 0; }
.katalog__title { margin: 0; color: var(--c-navy); font-size: 22px; font-weight: 700; }
.katalog__sub { margin: 4px 0 0; color: var(--c-muted); font-size: 14px; }
.katalog__btn { flex: none; }
.katalog__viewer { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; height: 85vh; min-height: 560px; background: var(--c-input); }
.katalog__viewer iframe { width: 100%; height: 100%; border: 0; display: block; }
.katalog__fallback { margin: 14px 0 0; color: var(--c-muted); font-size: 13px; text-align: center; }
.katalog__fallback a { color: var(--c-red); }
@media (max-width: 680px) {
	.katalog__head { flex-direction: column; align-items: flex-start; }
	.katalog__viewer { height: 70vh; min-height: 420px; }
}

/* Brendovi */
.brands { padding: 72px 0; background: #fff; }
.brands__slider { overflow: hidden; margin-top: 40px; }
.brands__track { display: flex; align-items: center; justify-content: center; transition: transform .45s ease; }
.brands__cell { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 22px; }
.brands__logo { max-height: 60px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.brands__dots { display: flex; justify-content: center; gap: 11px; margin-top: 36px; }
.brands__dot { width: 42px; height: 6px; border: 0; background: #112955; cursor: pointer; padding: 0; border-radius: 1px; }
.brands__dot.is-active { background: #d60000; }

/* Kontakt */
.contact { padding: 80px 0; background: #fff; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; margin-top: 60px; }
.cinfo { display: flex; gap: 14px; margin-bottom: 22px; }
.cinfo__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--c-navy); color: #fff; flex: none; }
.cinfo__ic .icon { width: 18px; height: 18px; }
.cinfo__label { display: block; color: var(--c-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cinfo__val { display: block; color: var(--c-ink); font-size: 15px; margin-top: 2px; }
.cinfo__val a { color: inherit; text-decoration: none; }
.cinfo__val a:hover { color: var(--c-navy); text-decoration: underline; }
.contact__note { background: var(--c-panel); border-radius: 10px; padding: 18px 20px; }
.contact__note strong { color: var(--c-navy); font-size: 15px; }
.contact__note p { margin: 6px 0 0; color: #44506a; font-size: 13px; line-height: 1.6; }
.contact__form-wrap { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 28px; box-shadow: 0 10px 30px rgba(15,28,54,.06); }
.contact__map { margin-top: 48px; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; height: 400px; }
.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }
.cform { display: flex; flex-direction: column; gap: 16px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.cform input, .cform textarea { border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-input); padding: 11px 13px; font: 400 14px/1.5 'Inter', sans-serif; color: var(--c-ink); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--c-navy); background: #fff; }
.cform textarea { resize: vertical; }
.formmsg { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin: 0 0 16px; }
.formmsg--ok { background: #e6f6ec; color: #1a7a3c; }
.formmsg--err { background: #fdeaec; color: #b00020; }

/* ---- Homepage responsive ---- */
@media (max-width: 1024px) {
	.cats__grid { grid-template-columns: repeat(3, 1fr); }
	.catalog__grid { grid-template-columns: repeat(3, 1fr); }
	.brands__grid { grid-template-columns: repeat(3, 1fr); }
	.hero__title { font-size: 42px; }
}
@media (max-width: 860px) {
	.about__inner, .about--reverse .about__inner { grid-template-columns: 1fr; gap: 32px; padding-inline: var(--gutter); }
	.about--reverse .about__media { order: 0; }
	.about--reverse .about__content { order: 0; }
	.about__badge { right: 16px; }
	.contact__grid { grid-template-columns: 1fr; }
	.catalog__filters { grid-template-columns: 1fr 1fr; }
	.catalog__search { grid-column: 1 / -1; }
	.hero__stats-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.cats__grid { grid-template-columns: repeat(2, 1fr); }
	.catalog__grid { grid-template-columns: repeat(2, 1fr); }
	.brands__grid { grid-template-columns: repeat(2, 1fr); }
	.sec-head { flex-direction: column; align-items: flex-start; }
	.hero__title { font-size: 34px; }
	.hero { min-height: 520px; }
	.about__features { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.cats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
	.cform__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REDESIGN 2026-06-12 — Product archive (faceted list, Figma 106:2027)
   ========================================================================== */
/* `section.archive` (NOT bare `.archive` — WordPress also puts `archive` on the <body>). */
section.archive { padding: 24px 0 48px; background: #F6F8FC; min-height: 60vh; }
.archive__head { margin-bottom: 24px; }
.archive__title { margin: 4px 0 0; color: var(--c-navy); font-size: 30px; font-weight: 700; }
.archive__layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
/* Per-category SEO text block (bottom of product_cat archive, first page only). */
.archive__seo { max-width: 760px; margin: 36px auto 0; padding-top: 28px; border-top: 1px solid var(--c-line); color: #44506a; font-size: 14px; line-height: 1.75; }
.archive__seo h2, .archive__seo h3 { color: var(--c-navy); font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.archive__seo p { margin: 0 0 14px; }
.archive__seo p:last-child { margin-bottom: 0; }
.archive__seo a { color: var(--c-navy); }
.archive__seo--inline { margin-top: 24px; padding-top: 20px; }

/* Filters sidebar */
.filters { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; --fl: rgba(27,62,122,.15); }
/* Filters card sits above the category list so search/facets are reachable without scrolling past it. */
.filters__form { order: 0; }
.catnav { order: 1; }
.filters__form { background: #fff; border: .8px solid var(--fl); border-radius: 10px; padding: 18px; overflow: hidden; }
.filters__top { display: flex; align-items: center; gap: 8px; margin: -18px -18px 14px; padding: 12px 16px 13px; background: var(--c-navy); color: #fff; font-family: 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; font-size: 14.4px; }
.filters__top .icon { width: 14px; height: 14px; }
.filters__search { position: relative; margin-bottom: 8px; }
.filters__search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--c-muted); }
.filters__search input { width: 100%; height: 32px; border: .8px solid var(--fl); border-radius: 4px; background: var(--c-input); padding: 0 12px 0 30px; font-size: 12px; }
.filters__search input::placeholder { color: rgba(15,28,54,.5); }
.filters__search input:focus { outline: none; border-color: var(--c-navy); background: #fff; }

/* Category navigation (links, not filters): persistent full list, collapsible parents */
.catnav { background: #fff; border: .8px solid var(--fl); border-radius: 10px; padding: 12px; }
.catnav__title { display: block; color: var(--c-navy); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; padding: 2px 4px 8px; }
.catnav__all { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--c-navy); font-weight: 700; font-size: 14px; text-decoration: none; }
.catnav__all .icon { width: 16px; height: 16px; }
.catnav__all:hover { background: var(--c-input); }
.catnav__all.is-active { background: var(--c-navy); color: #fff; }
.catnav__list { list-style: none; margin: 4px 0 0; padding: 0; }
.catnav__row { display: flex; align-items: center; gap: 2px; }
.catnav__item { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--c-ink); font-size: 14px; text-decoration: none; }
.catnav__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catnav__item:hover { background: var(--c-input); color: var(--c-navy); }
.catnav__item.is-active { background: var(--c-input); color: var(--c-navy); font-weight: 700; }
.catnav__item em, .catnav__sublink em { flex: none; color: var(--c-muted); font-style: normal; font-size: 12px; }
.catnav__toggle { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--c-muted); cursor: pointer; }
.catnav__toggle:hover { background: var(--c-input); color: var(--c-navy); }
.catnav__toggle .icon { width: 14px; height: 14px; transition: transform .15s; }
.catnav__group.is-open > .catnav__row .catnav__toggle .icon { transform: rotate(180deg); }
.catnav__sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 12px; border-left: 2px solid var(--c-line); display: none; }
.catnav__group.is-open > .catnav__sub { display: block; }
.catnav__sublink { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--c-muted); font-size: 13px; text-decoration: none; }
.catnav__sublink > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catnav__sublink:hover { background: var(--c-input); color: var(--c-ink); }
.catnav__sublink.is-active { color: var(--c-navy); font-weight: 700; }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13px; color: var(--c-muted); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-navy); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }
.crumbs__sep { color: var(--c-line); }

/* Active-filter chips */
.archive__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.archive__chips-label { color: var(--c-muted); font-size: 13px; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-input); color: var(--c-ink); font-size: 13px; text-decoration: none; }
.chip:hover { border-color: var(--c-navy); color: var(--c-navy); }
.chip__x { font-size: 15px; line-height: 1; color: var(--c-muted); }
.chip:hover .chip__x { color: var(--c-red); }
.chip--reset { background: transparent; border-style: dashed; color: var(--c-muted); }
.chip--reset:hover { color: var(--c-red); border-color: var(--c-red); }

.fsec { border-top: .8px solid var(--fl); padding: 12px 0; }
.fsec summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; color: var(--c-ink); font-weight: 600; font-size: 14px; }
.fsec summary::-webkit-details-marker { display: none; }
.fsec summary .icon { width: 14px; height: 14px; color: var(--c-muted); transition: transform .15s; }
.fsec[open] summary .icon { transform: rotate(180deg); }
.fopt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--c-ink); cursor: pointer; }
.fopt span { display: inline-flex; align-items: center; gap: 8px; }
.fopt input { accent-color: var(--c-navy); }
.fopt em { color: var(--c-muted); font-style: normal; font-weight: 600; font-size: 12px; }
/* Price range: dual-handle slider (real gross bounds) + Od/Do number inputs */
.prange { padding-top: 4px; }
.prange__slider { position: relative; height: 30px; }
.prange__rail { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%); background: var(--c-line); border-radius: 2px; }
.prange__fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: var(--c-navy); border-radius: 2px; }
.prange__range { position: absolute; top: 0; left: 0; width: 100%; height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.prange__range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--c-navy); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
.prange__range::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--c-navy); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
.prange__range::-webkit-slider-runnable-track { background: none; border: none; }
.prange__range::-moz-range-track { background: none; border: none; }
.prange__range:focus { outline: none; }
.prange__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(27,62,122,.25); }
.prange__fields { display: flex; gap: 10px; margin-top: 14px; }
.prange__field { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c-muted); }
.prange__num { width: 100%; height: 30px; border: .8px solid var(--fl); border-radius: 4px; background: var(--c-input); padding: 0 10px; font-size: 12px; color: var(--c-ink); }
.prange__num:focus { outline: none; border-color: var(--c-navy); }
.filters__apply { margin-top: 16px; }
.filters__reset { display: block; text-align: center; margin-top: 10px; color: var(--c-muted); font-size: 13px; text-decoration: none; }
.filters__reset:hover { color: var(--c-red); }

/* Results */
.results__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; background: #fff; border: .8px solid rgba(27,62,122,.15); border-radius: 10px; padding: 12px 16px; }
.results__count { color: var(--c-muted); font-size: 14px; }
.results__count strong { color: var(--c-ink); font-weight: 600; }
.results__sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--c-muted); }
.results__sort select { height: 34px; border: .8px solid rgba(27,62,122,.15); border-radius: 6px; background: #fff; padding: 0 10px; font-size: 13px; color: var(--c-ink); }
.results__empty { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 60px 24px; text-align: center; }
.results__empty p { margin: 0; color: var(--c-ink); font-size: 16px; }
.results__empty-sub { margin-top: 8px !important; color: var(--c-muted) !important; font-size: 14px !important; }

.plist { display: flex; flex-direction: column; gap: 12px; }
.prow { display: grid; grid-template-columns: 132px 1fr auto; align-items: stretch; background: #fff; border: .8px solid rgba(27,62,122,.15); border-radius: 10px; overflow: hidden; }
.prow__media { display: flex; align-items: center; justify-content: center; width: 132px; padding-left: 12px; box-sizing: border-box; background: #fff; }
.prow__media img { width: 100%; height: 100%; max-height: 145px; object-fit: contain; }
.prow__main { min-width: 0; padding: 14px 12px; display: flex; flex-direction: column; justify-content: center; }
.prow__meta { display: flex; align-items: center; gap: 8px; }
.prow__brand { background: var(--c-panel); color: var(--c-navy); font-weight: 600; font-size: 12px; line-height: 16px; padding: 2px 6px; border-radius: 4px; }
.prow__cat { color: #7B7B7B; font-size: 12px; }
.prow__name { margin: 8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.37; }
.prow__name a { color: var(--c-navy); text-decoration: none; }
.prow__name a:hover { color: var(--c-red); }
.prow__sku { margin-top: 6px; color: var(--c-navy); font-weight: 600; font-size: 12px; }
.prow__sku code { font-family: Consolas, ui-monospace, 'SF Mono', monospace; font-weight: 400; color: var(--c-muted); }
.prow__side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; min-width: 174px; padding: 14px 12px; }
.prow__price { color: var(--c-navy); font-family: 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; font-size: 21.6px; line-height: 1; }
.prow__pdv { margin-top: 3px; font-size: 12px; color: var(--c-muted); }
.prow__stock { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.prow__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.prow__stock.is-in { color: #15803d; }
.prow__stock.is-out { color: #b00020; }
.prow__buy { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; width: 150px; }
.prow__add { font-size: 12px; padding: 8px 12px; border-radius: 4px; }
.prow__add .icon { width: 13px; height: 13px; }
.prow__buyrow { display: flex; align-items: center; gap: 8px; }
.prow__buyrow .qtybox { flex: 1; }
.prow__buyrow .qtybox__btn { flex: none; }
.prow__buyrow .qtybox__input { flex: 1 1 0; width: auto; min-width: 0; }
.qtybox { display: inline-flex; align-items: center; border: .8px solid rgba(27,62,122,.15); border-radius: 4px; overflow: hidden; background: #fff; }
.qtybox__btn { width: 30px; height: 36px; border: 0; background: none; color: var(--c-navy); font-size: 18px; line-height: 1; cursor: pointer; }
.qtybox__btn:hover { background: var(--c-input); }
.qtybox__input { width: 42px; height: 36px; border: 0; border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); text-align: center; font-size: 14px; color: var(--c-ink); -moz-appearance: textfield; }
.qtybox__input::-webkit-outer-spin-button, .qtybox__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prow__add { white-space: nowrap; }
.prow__add.is-loading { opacity: .6; pointer-events: none; }
.prow__add.is-added { background: #1a7a3c; }

.archive__pager { margin-top: 28px; }
.archive__pager .page-numbers { list-style: none; display: flex; gap: 6px; justify-content: center; padding: 0; margin: 0; }
.archive__pager .page-numbers a, .archive__pager .page-numbers span { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: var(--c-ink); text-decoration: none; font-size: 14px; }
.archive__pager .page-numbers .current { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.archive__pager .page-numbers a:hover { border-color: var(--c-navy); }

@media (max-width: 980px) {
	.archive__layout { grid-template-columns: 1fr; }
	.filters { position: static; }
}
@media (max-width: 560px) {
	.prow { grid-template-columns: 96px 1fr; }
	.prow__media { width: 96px; }
	.prow__side { grid-column: 1 / -1; align-items: flex-start; text-align: left; border-top: .8px solid rgba(27,62,122,.15); padding-top: 12px; }
	.prow__buy { width: 100%; }
}

/* ==========================================================================
   REDESIGN 2026-06-12 — Single product (data-first, Figma 47:2291 adapted)
   ========================================================================== */
section.single { padding: 28px 0 64px; background: #fff; } /* section.single, not .single — <body> also has `single` */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--c-muted); font-size: 13px; margin-bottom: 24px; }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-navy); }
.crumbs__current { color: var(--c-ink); }

.single__top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.single__media { background: #fff; border: .8px solid rgba(27,62,122,.15); border-radius: 8px; padding: 24px; text-align: center; }
.single__media img { width: 100%; max-height: 470px; object-fit: contain; border-radius: 7px; }
.single__refnote { display: block; margin-top: 12px; color: var(--c-muted); font-size: 12px; }

.single__buy { padding-top: 6px; }
.single__title { margin: 0 0 14px; color: var(--c-navy); font-size: 36px; font-weight: 700; line-height: 1.18; }
.single__price { display: flex; align-items: baseline; gap: 10px; color: var(--c-red); font-family: 'Oxygen', system-ui, sans-serif; font-size: 28px; font-weight: 400; }
.single__price .price-pdv { color: var(--c-muted); font-family: 'Inter', sans-serif; font-size: 12px; }
.single__meta { margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 6px; }
.single__meta p { margin: 0; font-size: 12px; }
.single__meta-k { color: var(--c-navy); font-weight: 500; }
.single__meta-v { color: #7b7b7b; }
.single__meta-v.is-in { color: #15803d; font-weight: 600; }
.single__meta-v.is-out { color: #b00020; font-weight: 600; }

.addcart { display: flex; gap: 15px; align-items: stretch; margin-top: 36px; }
.qty { display: inline-flex; align-items: center; justify-content: center; gap: 16px; height: 49px; padding: 0 18px; border: 1px solid #d7d7d7; border-radius: 4px; background: #fff; }
.qty__btn { width: 24px; height: 24px; border: 0; background: none; color: var(--c-navy); font-size: 22px; line-height: 1; cursor: pointer; }
.qty input { width: 26px; height: 44px; border: 0; background: none; text-align: center; font-family: 'Oxygen', system-ui, sans-serif; font-weight: 700; font-size: 18px; color: var(--c-navy); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single__add { flex: 1; height: 49px; padding: 0 24px; border-radius: 4px; font-family: 'Oxygen', system-ui, sans-serif; font-weight: 700; font-size: 18px; }
.single__note { margin: 24px 0 0; color: #424242; font-size: 14px; }

.single__related { margin-top: 64px; }
.single__h2 { color: var(--c-navy); font-size: 30px; font-weight: 700; text-align: center; margin: 0 0 28px; }

.relgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.relcard { display: flex; flex-direction: column; background: #fff; border: .8px solid rgba(27,62,122,.15); border-radius: 10px; overflow: hidden; }
.relcard__media { position: relative; display: block; aspect-ratio: 295 / 200; background: #dde4f0; }
.relcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.relcard__badge { position: absolute; top: 7px; left: 7px; background: var(--c-navy); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .3px; }
.relcard__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; flex: 1; }
.relcard__name { color: var(--c-navy); font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relcard__name:hover { color: var(--c-red); }
.relcard__stock { align-self: flex-start; font-size: 12px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px; }
.relcard__stock.is-in { background: #dcfce7; color: #15803d; }
.relcard__stock.is-out { background: #fde2e2; color: #b00020; }
.relcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: .8px solid rgba(27,62,122,.15); }
.relcard__price { display: flex; flex-direction: column; color: var(--c-navy); font-family: 'Roboto Condensed', system-ui, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.2; }
.relcard__price .price-pdv { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; color: var(--c-muted); }
.relcard__add { flex: none; }

@media (max-width: 860px) {
	.single__top { grid-template-columns: 1fr; gap: 28px; }
	.relgrid { grid-template-columns: repeat(2, 1fr); }
	.spectable th { width: 150px; }
}
@media (max-width: 480px) {
	.relgrid { grid-template-columns: 1fr; }
	.single__title { font-size: 24px; }
}

/* ==========================================================================
   Live search dropdown + cart badge (2026-06-16)
   ========================================================================== */
.cartbtn { position: relative; }
.cartbtn__count { position: absolute; top: -7px; right: -9px; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--c-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--c-navy); }
.cartbtn__count[hidden] { display: none; }

.searchresults {
	position: absolute; top: calc(100% + 6px); right: 0; width: 640px; max-width: 92vw;
	background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
	box-shadow: 0 18px 50px rgba(15,28,54,.18); padding: 6px; z-index: 80; max-height: 70vh; overflow-y: auto;
}
.searchresults[hidden] { display: none; }
.sr-loading { padding: 18px; text-align: center; color: var(--c-muted); }
.sr-empty { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.sr-empty strong { color: var(--c-ink); font-size: 14px; }
.sr-empty span { color: var(--c-muted); font-size: 13px; }
.sr-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.sr-row.is-active, .sr-row:hover { background: var(--c-input); }
.sr-img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--c-input); }
.sr-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-catname { color: #7B7B7B; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-catname mark { background: #fff3bf; color: inherit; padding: 0 1px; border-radius: 2px; }
.sr-title { color: var(--c-ink); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-title mark { background: #fff3bf; color: inherit; padding: 0 1px; border-radius: 2px; }
.sr-meta { color: var(--c-muted); font-size: 12px; }
.sr-side { display: flex; align-items: center; gap: 10px; }
.sr-price { display: flex; flex-direction: column; align-items: flex-end; color: var(--c-navy); font-weight: 700; font-size: 14px; white-space: nowrap; }
.sr-price small { font-weight: 400; font-size: 10px; color: var(--c-muted); }
.sr-add { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: var(--c-navy); cursor: pointer; flex: none; }
.sr-add:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.sr-add.is-loading { opacity: .5; pointer-events: none; }
.sr-add.is-added { background: #1a7a3c; color: #fff; border-color: #1a7a3c; }
.sr-out { color: #b00020; font-size: 11px; font-weight: 600; white-space: nowrap; }
/* Sticky at the bottom of the scrolling box: with load-more the list can be hundreds of rows,
   so the link would otherwise never come into view. */
.sr-all { display: block; position: sticky; bottom: -6px; background: #fff; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--c-line); color: var(--c-red); font-weight: 600; font-size: 13px; text-decoration: none; }
.sr-all:hover { background: var(--c-input); }
.sr-cat { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--c-navy); font-size: 13px; font-weight: 600; }
.sr-cat svg { color: var(--c-muted); flex: none; }
.sr-cat span { flex: 1; }
.sr-cat em { color: var(--c-muted); font-style: normal; font-weight: 400; font-size: 12px; }
.sr-cat:hover { background: var(--c-input); }
.sr-sep { height: 1px; background: var(--c-line); margin: 5px 4px; }
.sr-head { padding: 9px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted); }
.sr-head + .sr-head, .sr-cat + .sr-head { border-top: 1px solid var(--c-line); margin-top: 4px; }

@media (max-width: 900px) {
	.searchresults { left: 0; right: 0; width: auto; }
}

/* In-cart reflection on the product list (2026-06-18) */
.prow--incart { border-color: var(--c-navy); box-shadow: inset 3px 0 0 var(--c-navy); }
.prow--incart .prow__add { background: #1a7a3c; border-color: #1a7a3c; }
.prow--incart .prow__add:hover { background: #166a33; border-color: #166a33; }
.prow__add.is-loading { opacity: .6; pointer-events: none; }
.prow__add.is-added { background: #1a7a3c; border-color: #1a7a3c; }
.prow__remove { display: none; }
.prow--incart .prow__remove { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: #b00020; cursor: pointer; }
.prow--incart .prow__remove:hover { background: #b00020; color: #fff; border-color: #b00020; }
.prow__remove.is-loading { opacity: .6; pointer-events: none; }
.prow__remove .icon { width: 16px; height: 16px; }
.single__add.is-incart { background: #1a7a3c; border-color: #1a7a3c; }
.single__add.is-incart:hover { background: #166a33; border-color: #166a33; }
.single__add.is-loading { opacity: .6; pointer-events: none; }
.single__remove { display: inline-grid; place-items: center; width: 46px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: #b00020; cursor: pointer; }
.single__remove[hidden] { display: none; }
.single__remove:hover { background: #b00020; color: #fff; border-color: #b00020; }
.single__remove .icon { width: 18px; height: 18px; }
.price-pdv { font-weight: 400; font-size: 11px; color: var(--c-muted); }

/* ==========================================================================
   Mini-cart drawer (2026-06-18)
   ========================================================================== */
.btn--line { background: #fff; color: var(--c-navy); border-color: var(--c-navy); }
.btn--line:hover { background: var(--c-input); }

.minicart-overlay { position: fixed; inset: 0; background: rgba(15,28,54,.45); z-index: 200; opacity: 0; transition: opacity .22s ease; }
.minicart-overlay.is-open { opacity: 1; }
.minicart-overlay[hidden] { display: none; }

.minicart { position: fixed; top: 0; right: 0; height: 100%; width: 390px; max-width: 92vw; background: #fff; z-index: 201; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; box-shadow: -12px 0 44px rgba(15,28,54,.18); }
.minicart.is-open { transform: translateX(0); }
.minicart[hidden] { display: none; }

.minicart__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--c-line); flex: none; }
.minicart__head strong { color: var(--c-navy); font-size: 17px; }
.minicart__close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--c-muted); cursor: pointer; padding: 0 4px; }
.minicart__close:hover { color: var(--c-ink); }

.minicart__body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.minicart__items { list-style: none; margin: 0; padding: 6px 14px; overflow-y: auto; flex: 1; }
.minicart__item { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.minicart__img { width: 54px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--c-input); display: block; }
.minicart__img img { width: 100%; height: 100%; object-fit: cover; }
.minicart__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.minicart__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.minicart__brand { background: var(--c-panel); color: var(--c-navy); font-weight: 600; font-size: 10px; line-height: 14px; padding: 1px 5px; border-radius: 4px; }
.minicart__cat { color: #7B7B7B; font-size: 11px; }
.minicart__name { color: var(--c-ink); font-weight: 600; font-size: 13px; line-height: 1.3; text-decoration: none; }
.minicart__name:hover { color: var(--c-navy); }
.minicart__qty { color: var(--c-muted); font-size: 12px; }
.minicart__unit { color: var(--c-muted); font-size: 12px; }
.minicart__controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.qtybox--mini { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: 6px; overflow: hidden; }
.qtybox--mini .qtybox__btn { width: 26px; height: 26px; padding: 0; border: 0; background: var(--c-input); color: var(--c-navy); font-size: 15px; line-height: 1; cursor: pointer; }
.qtybox--mini .qtybox__btn:hover { background: #dde6f3; }
.qtybox--mini .qtybox__btn[disabled] { opacity: .5; pointer-events: none; }
.qtybox--mini .qtybox__val { min-width: 30px; text-align: center; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.minicart__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.minicart__price { color: var(--c-navy); font-weight: 700; font-size: 13px; white-space: nowrap; }
.minicart__remove { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--c-muted); cursor: pointer; align-self: start; }
.minicart__remove:hover { color: #b00020; }
.minicart__remove[disabled] { opacity: .4; pointer-events: none; }
.minicart__empty { padding: 40px 24px; text-align: center; color: var(--c-muted); }
.minicart__empty .btn { margin-top: 16px; }

.minicart__foot { flex: none; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 10px; }
.minicart__subtotal { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--c-ink); margin-bottom: 4px; }
.minicart__subtotal strong { color: var(--c-navy); font-size: 18px; }
.minicart__clear { background: none; border: 0; margin: 2px auto 0; padding: 4px 8px; color: var(--c-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.minicart__clear:hover { color: #b00020; }
.minicart__clear[disabled] { opacity: .5; pointer-events: none; }

/* ============================================================
   One-page checkout (cart + checkout merged), custom — no Woo CSS
   ============================================================ */
.page-wrap { padding: 40px 0 64px; }
.page-wrap--checkout { padding: 24px 0 64px; max-width: 1180px; }
.lager-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: start; }
.lager-checkout__main, .lager-checkout__side { min-width: 0; }
.lager-checkout__side .lager-order-heading { margin-top: 0; }
.lager-checkout__side .lager-order-summary { margin: 16px 0 0; max-width: none; }
.lager-checkout__side #payment { margin: 20px 0 0; max-width: none; }
.page-title { color: var(--c-ink); font-size: 28px; margin: 0 0 22px; }
.woocommerce-cart .page-title, .woocommerce-checkout .page-title { display: none; }
.lager-checkout, .woocommerce-checkout .entry-content { color: var(--c-ink); }

/* Customer + delivery sections */
.lager-checkout-fields__title { color: var(--c-navy); font-size: 19px; margin: 22px 0 14px; }
.lager-checkout-fields__title:first-child { margin-top: 0; }
.lager-checkout-fields__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 18px; }
.lager-checkout .form-row { margin: 0; padding: 0; }
.lager-checkout .form-row-wide  { grid-column: span 6; }
.lager-checkout .form-row-first { grid-column: span 3; }
.lager-checkout .form-row-last  { grid-column: span 3; }
.lager-checkout .form-row-third { grid-column: span 2; }
#billing_country_field { display: none; }
.lager-checkout label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink); margin-bottom: 5px; }
.lager-checkout abbr.required { color: var(--c-red); border: 0; text-decoration: none; }
.lager-required-note .required { color: inherit; font-weight: 600; border: 0; text-decoration: none; } /* same grey as the note, like the label markers */
.lager-checkout .optional { display: none; } /* WooCommerce's "(optional)" suffix; required fields already carry * */
.lager-checkout .woocommerce-input-wrapper { display: block; }
.lager-checkout input.input-text,
.lager-checkout textarea,
.lager-checkout select {
	width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 13px;
	border: 1px solid var(--c-line); border-radius: 8px; background: #fff;
	font: 400 15px/1.3 'Inter', sans-serif; color: var(--c-ink);
}
.lager-checkout textarea { min-height: 84px; resize: vertical; }
.lager-checkout input.input-text:focus,
.lager-checkout textarea:focus,
.lager-checkout select:focus { outline: 0; border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(27,62,122,.12); }
.lager-checkout .woocommerce-invalid input.input-text { border-color: var(--c-red); }
.lager-required-note { font-size: 12px; color: var(--c-muted); margin: 12px 0 0; }

/* Order heading + table */
.lager-order-heading { color: var(--c-navy); font-size: 20px; margin: 30px 0 14px; }
.lager-order-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.lager-order-table thead th { border: 0; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--c-muted); padding: 10px 8px; background: var(--c-input); border-bottom: 1px solid var(--c-line); }
/* border: 0 first - the checkout sits inside .entry-content, whose generic th/td rule (line ~632)
   boxes every cell on all four sides; only the row divider is wanted. */
.lager-order-table th, .lager-order-table td { border: 0; }
.lager-order-table td { padding: 10px 8px; border-bottom: 1px solid var(--c-line); font-size: 13px; color: var(--c-ink); vertical-align: middle; }
.lager-order-table .lo-naziv { min-width: 90px; }
.lager-order-table .lo-img { width: 64px; }
.lo-thumb { display: block; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--c-input); border: 1px solid var(--c-line); }
.lo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lager-order-table .lo-kat { font-size: 12px; }
.lager-order-table .lo-cena, .lager-order-table .lo-uk { font-size: 13px; }
.lager-order-table tr:last-child td { border-bottom: 0; }
.lager-order-table .lo-sifra { color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lager-order-table .lo-kat { color: var(--c-muted); }
.lager-order-table .lo-naziv a { color: var(--c-ink); font-weight: 600; text-decoration: none; }
.lager-order-table .lo-naziv a:hover { color: var(--c-navy); }
.lager-order-table .lo-cena, .lager-order-table .lo-uk { white-space: nowrap; font-weight: 600; }
.lager-order-table .lo-uk { color: var(--c-navy); }
.lager-order-table .lo-x { width: 40px; text-align: center; }
.lager-order-table .lo-remove { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--c-muted); cursor: pointer; }
.lager-order-table .lo-remove:hover { color: var(--c-red); }
.lo-qty { margin: 0; }

/* Summary */
.lager-order-summary { margin: 18px 0 0 auto; max-width: 360px; }
.los-row { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 0; font-size: 15px; color: var(--c-ink); }
.los-total { border-top: 2px solid var(--c-line); margin-top: 6px; padding-top: 14px; font-weight: 700; }
.los-total span:last-child { color: var(--c-navy); font-size: 22px; }
.los-note { text-align: right; color: var(--c-muted); font-size: 13px; margin: 10px 0 0; }
.lager-order-table tfoot td.lo-summary-cell { padding: 4px 12px 14px; border: 0; background: transparent; }
.lo-summary-cell .lager-order-summary { max-width: 320px; margin: 6px 0 0 auto; }

/* Payment + place order (right aligned with the summary) */
#payment { background: var(--c-input); border-radius: 12px; margin: 22px 0 0 auto; max-width: 420px; }
#payment .payment_methods { list-style: none; margin: 0; padding: 16px 18px 6px; }
#payment .payment_methods > li { margin: 0 0 10px; padding: 13px 15px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
#payment .payment_methods > li:has(input:checked) { border-color: var(--c-navy); box-shadow: 0 0 0 2px rgba(27,62,122,.12); }
#payment .payment_methods > li > label { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--c-ink); cursor: pointer; }
#payment .payment_methods li input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-navy); cursor: pointer; }
#payment .payment_methods li img { max-height: 24px; vertical-align: middle; margin-left: 6px; }
#payment .payment_box { background: var(--c-input); border-radius: 8px; padding: 10px 12px; margin: 10px 0 2px; font-size: 13px; color: var(--c-muted); }
#payment .payment_box::before { display: none; }
#payment .place-order { padding: 8px 18px 18px; }
#payment .woocommerce-terms-and-conditions-wrapper { padding: 0 18px 8px; font-size: 13px; }
#payment #place_order {
	width: 100%; background: var(--c-navy); color: #fff; border: 0; border-radius: 8px;
	padding: 15px 20px; font: 600 16px/1 'Inter', sans-serif; cursor: pointer; transition: background .15s;
}
#payment #place_order:hover { background: #16336a; }

/* Hide coupon + login toggles (B2C, no coupons) */
.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle,
.checkout_coupon, .woocommerce-form-login { display: none !important; }

/* Notices */
.woocommerce-error, .woocommerce-message, .woocommerce-info, .cart-empty {
	list-style: none; border-radius: 8px; padding: 14px 16px; margin: 0 0 18px;
	font-size: 14px; color: var(--c-ink); border-left: 3px solid var(--c-navy); background: var(--c-input);
}
.woocommerce-error { border-left-color: var(--c-red); }
.woocommerce-message { border-left-color: #1a8a3c; }
.woocommerce-info a, .woocommerce-message a { color: var(--c-navy); font-weight: 600; }
.wc-empty-cart-message, .cart-empty { font-size: 16px; }
.return-to-shop { margin-top: 14px; }
.return-to-shop .button {
	display: inline-block; background: var(--c-navy); color: #fff; border-radius: 6px;
	padding: 12px 20px; font-weight: 600; text-decoration: none;
}

/* Processing overlay */
.woocommerce-checkout .blockUI.blockOverlay { border-radius: 12px; }

/* Responsive */
@media (max-width: 980px) {
	.lager-checkout__grid { grid-template-columns: 1fr; gap: 6px; }
	.lager-checkout__side .lager-order-heading { margin-top: 26px; }
}
@media (max-width: 680px) {
	.lager-checkout-fields__grid { grid-template-columns: 1fr; }
	.lager-checkout .form-row-wide,
	.lager-checkout .form-row-first,
	.lager-checkout .form-row-last,
	.lager-checkout .form-row-third { grid-column: 1 / -1; }
	.lager-order-summary, #payment { max-width: none; }
	.lager-order-table thead { display: none; }
	.lager-order-table, .lager-order-table tbody, .lager-order-table tr, .lager-order-table td { display: block; width: 100%; box-sizing: border-box; }
	.lager-order-table { border: 0; }
	.lager-order-table tr { border: 1px solid var(--c-line); border-radius: 10px; margin-bottom: 12px; padding: 6px 12px; background: #fff; position: relative; }
	.lager-order-table td { border-bottom: 1px solid var(--c-line); padding: 9px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
	/* Stacked cells keep their divider even in the last (or only) row; the desktop
	   tr:last-child rule would strip them all. The quantity row ends the card. */
	.lager-order-table tr:last-child td { border-bottom: 1px solid var(--c-line); }
	.lager-order-table tr td.lo-uk, .lager-order-table tr td.lo-kol, .lager-order-table tr td.lo-x { border-bottom: 0; }
	.lager-order-table td::before { content: attr(data-label); color: var(--c-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
	.lager-order-table .lo-x { position: absolute; top: 4px; right: 6px; padding: 0; }
	.lager-order-table .lo-x::before { display: none; }
	/* Image gets its own block with no label; other cells keep the label-left layout. */
	.lager-order-table .lo-img { width: 100%; justify-content: center; } /* width: the desktop 64px column rule outranks the generic td width */
	.lager-order-table .lo-img::before { display: none; }
}

/* ---- Thank-you / order-received ---- */
.thankyou { padding: 32px 0 64px; background: #F6F8FC; }
.thankyou__inner { max-width: 900px; }
.thankyou__head { text-align: center; margin-bottom: 24px; }
.thankyou__check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1a7a3c; color: #fff; margin-bottom: 12px; }
.thankyou__check .icon { width: 30px; height: 30px; }
.thankyou__title { color: var(--c-navy); font-size: 28px; font-weight: 700; margin: 0 0 6px; }
.thankyou__lead { color: var(--c-muted); margin: 0; }
.thankyou__meta { list-style: none; margin: 0 0 20px; padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; }
.thankyou__meta li { display: flex; flex-direction: column; gap: 2px; }
.thankyou__meta span { font-size: 12px; color: var(--c-muted); }
.thankyou__meta strong { color: var(--c-ink); font-size: 14px; }
.thankyou__pay { background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-navy); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
.thankyou__pay h2 { margin: 0 0 12px; font-size: 16px; color: var(--c-navy); }
.thankyou__bank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.thankyou__bank li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--c-line); padding-bottom: 8px; }
.thankyou__bank li:last-child { border-bottom: 0; padding-bottom: 0; }
.thankyou__bank span { color: var(--c-muted); font-size: 13px; }
.thankyou__bank strong { color: var(--c-ink); font-size: 14px; text-align: right; }
.thankyou__paynote { margin: 12px 0 0; color: var(--c-muted); font-size: 13px; }
.thankyou__items { margin-bottom: 20px; }
.thankyou__items h2 { font-size: 16px; color: var(--c-navy); margin: 0 0 12px; }
.thankyou__img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--c-line); border-radius: 6px; background: #fff; flex: none; }
.ty-prod { display: flex; align-items: center; gap: 10px; text-align: left; }
.ty-prodinfo { display: flex; flex-direction: column; gap: 1px; }
.ty-name { color: var(--c-ink); font-weight: 600; }
.ty-cat { color: var(--c-muted); font-size: 12px; }
.thankyou__details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.thankyou__card { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 16px 18px; }
.thankyou__card h3 { margin: 0 0 8px; font-size: 14px; color: var(--c-navy); }
.thankyou__card p { margin: 0; color: var(--c-ink); font-size: 14px; line-height: 1.6; }
.thankyou__actions { text-align: center; }
@media (max-width: 600px) { .thankyou__details { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOBILE PASS 2026-08-19 — phone-width usability (no Figma; sensible defaults).
   Appended last so it overrides the desktop rules above.
   ========================================================================== */

@media (max-width: 767px) {
	/* iOS Safari zooms into any field whose text is under 16px — keep them all at 16px. */
	input, select, textarea { font-size: 16px; }
	/* 6.944vw gutters cost 54px of a 390px screen; a flat 16px gives that back to content. */
	:root { --gutter: 16px; }
}

/* ---- Header ---------------------------------------------------------------
   Design handoff (Lager Mobile export): one 56px white bar - hamburger left, logo
   centred, search + cart right. The navy util bar's contacts move into the drawer;
   its search field is revealed by the search button rather than duplicated, so the
   live-search typeahead keeps working. Theme navy/red kept (not the export's palette).
   -------------------------------------------------------------------------- */
.mobtools { display: none; }
@media (max-width: 1100px) {
	.util-bar { display: none; }
	.siteheader.is-searching .util-bar { display: block; }
	/* The typeahead dropdown lives in the util bar; the masthead below it is z-index 120, so
	   without this the top of the dropdown slides under the white bar. */
	.siteheader.is-searching .util-bar { position: relative; z-index: 130; }
	.util-bar__inner { min-height: 0; padding-block: 8px; }
	.util-bar__contacts { display: none; }
	.util-bar .cartbtn { display: none; }
	.util-bar__tools { flex: 1 1 100%; }
	.searchbar { flex: 1 1 auto; width: auto; }
	.searchbar input { height: 40px; }

	.masthead__inner { min-height: 56px; justify-content: flex-start; gap: 0; }
	.brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
	.brand__img { height: 34px; }
	.navtoggle { order: -1; display: inline-flex; padding: 9px 8px; margin-left: -8px; }
	.navtoggle span { width: 22px; height: 2.2px; }

	.mobtools { order: 1; margin-left: auto; display: flex; align-items: center; gap: 2px; }
	.mobtools__btn {
		position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px;
		padding: 0; border: 0; background: none; color: var(--c-navy); cursor: pointer; text-decoration: none;
	}
	.mobtools__btn .icon { width: 21px; height: 21px; }
	/* The search button turns into a close button while the field is open. */
	.mobsearch .icon--close { display: none; }
	.siteheader.is-searching .mobsearch .icon--search { display: none; }
	.siteheader.is-searching .mobsearch .icon--close { display: block; }
	/* The badge ring matches whatever it sits on - navy bar on desktop, white here. */
	.mobtools .cartbtn__count { box-shadow: 0 0 0 2px #fff; }
	.mobtools .cartbtn__count { top: 2px; right: 2px; }
}

/* ---- Mobile menu: off-canvas drawer (design handoff) ---- */
/* Mobile-only controls: hidden by default, switched on in the <=1100px block below.
   The carets are touch affordances - desktop opens the dropdowns on hover, and the
   button keeps its own inline chevron. */
.mainnav__head, .mainnav__contact, .megamenu__back, .megamenu__close,
.shopcats__caret, .megacat__caret { display: none; }
@media (max-width: 1100px) {
	/* .mainnav lives inside .masthead, so the drawer's z-index is scoped to the masthead's
	   stacking context - the masthead itself has to outrank the scrim, or the scrim washes
	   over the open drawer and swallows its taps. */
	.masthead { z-index: 120; }
	.navscrim { position: fixed; inset: 0; z-index: 110; background: rgba(15,28,54,.5); }
	.navscrim[hidden] { display: none; }

	.mainnav {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
		width: 310px; max-width: 85%; max-height: none; padding: 0; gap: 0;
		display: flex; flex-direction: column; align-items: stretch;
		background: #fff; box-shadow: 0 0 40px rgba(15,28,54,.25);
		overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(-100%); visibility: hidden;
		transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s;
	}
	.masthead.is-open .mainnav { display: flex; transform: none; visibility: visible; }

	.mainnav__head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--c-line); }
	.mainnav__logo { height: 26px; width: auto; }
	.mainnav__close, .megamenu__close, .megamenu__back {
		display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
		padding: 0; border: 0; background: none; color: var(--c-navy); cursor: pointer;
	}
	.mainnav__close .icon, .megamenu__close .icon, .megamenu__back .icon { width: 20px; height: 20px; }

	.mainnav__list { flex: none; padding: 8px 0 12px; }
	.mainnav__list a { display: flex; align-items: center; min-height: 44px; padding: 13px 20px; border: 0; border-radius: 0; font-size: 14px; font-weight: 700; letter-spacing: .4px; }
	/* margin, not padding, so .shopcats' box matches the button exactly - the caret is
	   positioned against it and must line up with the button's right edge. */
	.shopcats { margin: 10px 20px 0; padding: 0; width: auto; flex: none; }
	.shopcats__btn { min-height: 44px; width: 100%; }

	.mainnav__contact { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding: 20px; border-top: 1px solid var(--c-line); background: #F6F8FC; }
	.mainnav__contact-title { color: var(--c-navy); font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
	.mainnav__contact a, .mainnav__contact > span { display: flex; align-items: center; gap: 10px; color: #334155; font-size: 14px; text-decoration: none; }
	.mainnav__contact .icon { width: 19px; height: 19px; color: var(--c-red); flex: none; }

	/* ---- Category panel: a second drawer sliding over the first ---- */
	.megamenu {
		position: fixed; top: 0; left: 0; bottom: 0; right: auto; z-index: 130;
		width: 310px; max-width: 85%; margin: 0; padding: 0;
		display: flex; flex-direction: column; opacity: 1;
		background: #fff; border: 0; border-radius: 0; box-shadow: 0 0 40px rgba(15,28,54,.25);
		overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(-100%); visibility: hidden;
		transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s;
	}
	.shopcats:hover > .megamenu, .shopcats:focus-within > .megamenu { transform: translateX(-100%); visibility: hidden; }
	.shopcats .megamenu.is-open { display: flex; transform: none; visibility: visible; }

	.megamenu__head { flex: none; flex-wrap: wrap; gap: 10px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--c-line); border-radius: 0; }
	.megamenu__back { order: 0; margin-left: -8px; }
	.megamenu__title { order: 1; flex: 1; font-size: 12px; letter-spacing: 1px; }
	.megamenu__close { order: 2; margin-right: -8px; }
	.megamenu__all { order: 3; flex: 1 0 100%; justify-content: flex-end; margin: 14px -16px -14px; padding: 11px 20px; background: var(--c-panel); }

	.megamenu__grid { grid-template-columns: 1fr; gap: 0; padding: 6px 0 14px; }
	.megacat, .megacat--has-sub > .megacat__main { min-height: 44px; justify-content: center; padding: 10px 20px; border: 0; border-radius: 0; }
	.megacat__name { font-size: 14px; font-weight: 700; }
	.megacat__sub { font-size: 11px; }

	/* Categories with subcategories keep the split: label -> the category page, caret -> its list. */
	/* padding: 0 - .megacat--has-sub also matches .megacat above, and its own padding would
	   stack with the label's, indenting these rows past the plain ones. */
	.megacat--has-sub { display: grid; grid-template-columns: 1fr 52px; padding: 0; border: 0; }
	.megacat--has-sub > .megacat__main { grid-column: 1; padding-right: 12px; }
	.megacat--has-sub > .megacat__main::after { display: none; }
	.megacat__caret { grid-column: 2; grid-row: 1; }
	.megacat--has-sub.is-open > .megacat__main, .megacat--has-sub.is-open > .megacat__caret { background: #EEF3FB; }
	.submenu {
		position: static; display: none; grid-column: 1 / -1; min-width: 0;
		margin: 2px 14px 8px; padding: 6px 0;
		background: #fff; border: 1px solid var(--c-line); border-radius: 8px;
		box-shadow: 0 10px 24px -10px rgba(15,28,54,.25);
	}
	.submenu--cols { grid-template-columns: 1fr; width: auto; }
	.megacat--has-sub:hover > .submenu, .megacat--has-sub:focus-within > .submenu { display: none; }
	.megacat--has-sub.is-open > .submenu { display: grid; }
	.submenu__item, .submenu__all { min-height: 40px; display: flex; align-items: center; padding: 9px 16px; font-size: 13px; white-space: normal; }

	/* Shared caret control - a tap zone beside the label, never over it. */
	.shopcats__caret, .megacat__caret {
		display: inline-grid; place-items: center; width: 52px; padding: 0;
		background: none; border: 0; cursor: pointer; color: inherit;
	}
	.shopcats { position: relative; }
	.shopcats__btn { padding-left: 60px; padding-right: 60px; }
	.shopcats__btn > .icon--chevron { display: none; }
	.shopcats__caret { position: absolute; top: 0; right: 0; height: 100%; border-left: 1px solid rgba(255,255,255,.35); color: #fff; }
	.megacat__caret { border-left: 1px solid var(--c-line); color: var(--c-muted); }
	.shopcats__caret .icon, .megacat__caret .icon { width: 14px; height: 14px; transition: transform .18s ease; }
	.shopcats__caret[aria-expanded="true"] .icon, .megacat__caret[aria-expanded="true"] .icon { transform: rotate(180deg); }

	/* Drawer open -> the page behind must not scroll. */
	body.nav-open { overflow: hidden; }
}

/* ---- Shop / category archive (design handoff) -----------------------------
   Filters collapse behind one bar and open as a floating card, so the product
   list stays put instead of being pushed 1600px down the page.
   -------------------------------------------------------------------------- */
.filtersbar { display: none; }
/* display:contents keeps the wrapper out of the desktop sidebar grid entirely. */
.filtersdrop { display: contents; }

@media (max-width: 980px) {
	/* Sticky toolbar under the 57px header: filter button + sort (moved here by main.js) stay
	   reachable while the list scrolls. Same background as the section so rows slide under it. */
	.filtersdrop { display: flex; align-items: center; gap: 8px; position: sticky; top: 57px; z-index: 30; grid-column: 1 / -1; margin-bottom: 8px; padding: 6px 0 10px; background: #F6F8FC; }
	.filtersbar { flex: 1 1 auto; }
	.filtersdrop .results__sort { flex: none; gap: 0; }
	.filtersdrop .results__sort-label { display: none; }
	.filtersdrop .results__sort select { height: 48px; border-radius: 10px; padding: 0 10px; }
	.archive__head { margin-bottom: 12px; }
	.archive__title { font-size: 22px; }

	.filtersbar {
		position: relative; display: flex; align-items: center; justify-content: center; gap: 9px;
		width: 100%; min-height: 48px; padding: 14px 44px 14px 16px; cursor: pointer; /* right pad = room for the absolute caret */
		background: var(--c-navy); color: #fff; border: 0; border-radius: 10px;
		font: 600 15px 'Inter', system-ui, sans-serif; text-align: center;
	}
	.filtersbar .icon { width: 16px; height: 16px; }
	/* Open state reads as a close control: X icon + "Zatvori filtere". */
	.filtersbar .icon--close, .filtersbar__close { display: none; }
	.filtersbar[aria-expanded="true"] .icon--grid, .filtersbar[aria-expanded="true"] .filtersbar__open { display: none; }
	.filtersbar[aria-expanded="true"] .icon--close, .filtersbar[aria-expanded="true"] .filtersbar__close { display: inline; }
	.filtersbar[aria-expanded="true"] .icon--close { display: block; }
	.filtersbar .icon--chevron { position: absolute; right: 16px; transition: transform .15s; }
	.filtersbar[aria-expanded="true"] .icon--chevron { transform: rotate(180deg); }

	/* The panel floats over the results rather than pushing them down. */
	.filters {
		position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
		display: none; gap: 10px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; /* max-height refined by main.js to the visible viewport */
		padding: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
		box-shadow: 0 18px 40px -8px rgba(15,28,54,.35);
	}
	.filters.is-open { display: flex; }
	.filters__top { display: none; } /* the bar above replaces the panel's own header */
	.filters__form { padding: 0; border: 0; border-radius: 0; overflow: visible; }
	.filters__search { margin-bottom: 18px; }
	.filters__search input { height: 40px; border-radius: 7px; background: #fff; }

	/* Each filter group reads as a bordered facet: grey head, bordered body. */
	.fsec { margin-top: 10px; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; }
	.fsec:first-of-type { margin-top: 0; }
	.fsec > summary { padding: 12px 14px; background: #F6F8FC; font-size: 14px; font-weight: 600; }
	.fsec[open] > summary { border-bottom: 1px solid var(--c-line); }
	.fsec > *:not(summary) { padding-left: 14px; padding-right: 14px; }
	.fsec > *:nth-child(2) { padding-top: 12px; }
	.fsec > *:last-child { padding-bottom: 12px; }

	/* Availability reads as a switch, matching the design. */
	.fopt:has(input[name="instock"]) { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 10px; }
	.fopt input[name="instock"] {
		position: relative; flex: none; appearance: none; -webkit-appearance: none; margin: 0;
		width: 38px; height: 22px; border: 0; border-radius: 11px; background: #cbd5e1;
		cursor: pointer; transition: background .2s;
	}
	.fopt input[name="instock"]::after {
		content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
		border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s;
	}
	.fopt input[name="instock"]:checked { background: var(--c-navy); }
	.fopt input[name="instock"]:checked::after { transform: translateX(16px); }

	.filters__apply { min-height: 44px; margin-top: 14px; border-radius: 7px; background: var(--c-red); border-color: var(--c-red); font-size: 14px; }
	.filters__apply:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }

	/* Category rail becomes the panel's last facet, capped and scrollable. */
	/* flex:none - .catnav sets overflow:hidden, so its automatic minimum size is 0 and the
	   capped panel would shrink it away to nothing. */
	.catnav { flex: none; border: 1px solid var(--c-line); border-radius: 8px; padding: 0; overflow: hidden; }
	.catnav__title { padding: 12px 14px; background: #F6F8FC; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--c-line); }
	.catnav__all { margin: 8px 8px 0; padding: 7px 10px; font-size: 13px; }
	/* No nested scroll: the panel is the single scroll container, so the list shows in full. */
	.catnav__list { max-height: none; overflow: visible; margin: 2px 8px 8px; }
	.catnav__item { padding: 6px 10px; font-size: 13px; }
	.catnav__sublink { padding: 5px 10px; }

	/* Results bar: plain line of text, not a card. */
	.results__bar { flex-wrap: wrap; row-gap: 10px; margin: 2px 2px 14px; padding: 0; background: none; border: 0; font-size: 13px; }
	.results__sort select { height: 36px; }
}

/* ---- Product rows -> the design's compact cards ---- */
@media (max-width: 560px) {
	.prow { grid-template-columns: 104px 1fr; border-radius: 10px; }
	.prow__media { grid-row: 1 / span 2; width: 104px; padding: 8px; }
	.prow__media img { max-height: none; }
	.prow__main { grid-column: 2; padding: 11px 12px 0; }
	.prow__meta { gap: 7px; }
	.prow__brand { font-size: 10px; }
	.prow__cat { font-size: 10.5px; }
	.prow__name { margin-top: 5px; font-size: 13px; line-height: 1.25; }
	.prow__sku { margin-top: 5px; font-size: 10.5px; }

	/* Stock bottom-left, "sa PDV-om" stacked over the price on the right, buy row below. */
	.prow__side {
		grid-column: 2; display: grid; grid-template-columns: 1fr auto; align-items: end;
		column-gap: 10px; padding: 0 12px 11px; text-align: left; min-width: 0; border: 0;
	}
	.prow__stock { grid-column: 1; grid-row: 2; margin: 9px 0 0; font-size: 11px; }
	.prow__pdv { grid-column: 2; grid-row: 1; margin: 9px 0 0; font-size: 10px; text-align: right; }
	.prow__price { grid-column: 2; grid-row: 2; font-size: 18px; text-align: right; }
	.prow__buy { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; gap: 8px; width: 100%; margin-top: 11px; }
	.prow__buyrow { order: -1; flex: none; width: 96px; }
	.prow__buyrow .qtybox__btn { width: 28px; height: 32px; }
	.prow__buyrow .qtybox__input { height: 32px; font-size: 12px; }
	/* Scoped to .prow__buy: .relcard__add on the single-product page shares .prow__add. */
	.prow__buy .prow__add { flex: 1 1 auto; min-height: 34px; padding: 0 10px; border-radius: 5px; font-size: 12px; }
	.prow__remove { flex: none; }

	/* Never wider than the screen: wrap, compact cells, dots without a box. */
	.archive__pager { max-width: 100%; }
	.archive__pager .page-numbers { flex-wrap: wrap; gap: 6px; }
	.archive__pager .page-numbers a, .archive__pager .page-numbers span { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 6px; font-size: 13px; }
	.archive__pager .page-numbers .dots { min-width: 0; padding: 0 2px; border: 0; background: none; }
}

/* Below ~380px the stepper and the (nowrap) add button can't share a line - the button
   would be squeezed to ~56px and overflow the card. Stack them instead. */
@media (max-width: 380px) {
	.prow__buy { flex-wrap: wrap; }
	.prow__buyrow { width: 100%; }
	.prow__buy .prow__add { flex: 1 0 100%; }
	/* Same squeeze on the single-product buy box. */
	.addcart { flex-wrap: wrap; }
	.addcart .qty { width: 100%; justify-content: space-between; }
	.single__add { flex: 1 0 100%; }
	.archive__pager .page-numbers a, .archive__pager .page-numbers span { min-width: 34px; height: 34px; border-radius: 6px; font-size: 13px; font-weight: 600; }
}

/* ---- Single product: keep "Dodaj u korpu" on one line next to the stepper ---- */
@media (max-width: 480px) {
	.addcart { gap: 10px; margin-top: 26px; }
	.qty { gap: 8px; padding: 0 12px; }
	.qty input { width: 24px; }
	.single__add { padding: 0 12px; font-size: 16px; white-space: nowrap; }
}

/* ---- Homepage (design handoff) --------------------------------------------
   Section rhythm, hero and tile sizes taken from the Lager Mobile export; the
   theme's own navy/red tokens are kept, so this is spacing and scale only.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Hero - 400px tall, tighter type than the desktop 40px title. */
	.hero { min-height: 400px; }
	.hero__inner { padding-top: 56px; padding-bottom: 26px; }
	.hero__title { font-size: 29px; line-height: 1.12; letter-spacing: -.3px; }
	.hero__lead { max-width: 320px; margin-top: 16px; font-size: 14px; line-height: 1.5; }
	.hero__cta { gap: 10px; margin-top: 22px; }
	.hero__cta .btn { height: 44px; padding: 0 20px; font-size: 14px; }
	.hero__cta-desktop { display: none; }
	.hero__cta-mobile { display: inline-flex; }

	/* Stats band - 2x2 under a red rule. */
	.hero__stats { border-top: 3px solid var(--c-red); }
	.hero__stats-inner { grid-template-columns: 1fr 1fr; gap: 16px 12px; padding-top: 18px; padding-bottom: 18px; }
	.herostat { gap: 11px; }
	.herostat .icon { width: 38px; height: 38px; padding: 8px; border-radius: 5px; }
	.herostat strong { font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 19px; }
	.herostat span { font-size: 11px; color: #8EC5FF; }

	/* Section rhythm - the desktop 72-100px paddings are far too airy on a phone. */
	.cats { padding: 36px 0 8px; }
	.cats .sec-head { margin-bottom: 20px; }
	.about { padding: 36px 0; }
	.brands { padding: 36px 0; }
	.contact { padding: 36px 0; }
	.sec-head { margin-bottom: 20px; }
	.sec-title { font-size: 24px; }
	.sec-sub { font-size: 14px; }

	/* Category tiles - two per row (12 tiles: ~1100px instead of ~4300px of scrolling).
	   Kept SQUARE, unlike the export's 171x124: the artwork is 1000x1000 with the category
	   name baked into it, so any wide crop slices the title off. */
	.cats__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.catcard { border-radius: 10px; }

	/* O nama - photo, then the four features two-up as icon tiles. */
	.about__inner { gap: 22px; }
	/* Anchor the crop to the top: the photo's headline sits there, products at the bottom can go. */
	.about__media img { aspect-ratio: auto; height: 210px; border-radius: 14px; object-position: top center; }
	.about__lead { margin: 14px 0 22px; font-size: 13.5px; line-height: 1.65; }
	.about__features { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
	.feat { flex-direction: column; align-items: flex-start; gap: 10px; }
	.feat .icon { width: 46px; height: 46px; margin-top: 0; padding: 12px; border-radius: 8px; background: var(--c-panel); color: var(--c-navy); }
	.feat strong { font-size: 14px; }
	.feat p { font-size: 12px; line-height: 1.55; }

	/* Brendovi - bordered logo cells, three across. */
	.brands__slider { margin-top: 20px; }
	.brands__cell { padding: 0 5px; }
	.brands__cell > * { width: 100%; height: 58px; padding: 8px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; box-sizing: border-box; }
	.brands__logo { max-height: 100%; max-width: 100%; margin: 0 auto; object-fit: contain; }
	.brands__dots { gap: 8px; margin-top: 20px; }
	.brands__dot { width: 30px; height: 5px; }

	/* Kontakt */
	.contact__grid { gap: 24px; margin-top: 24px; }
	.cinfo { gap: 12px; margin-bottom: 16px; }
	.cinfo__ic { width: 38px; height: 38px; border-radius: 6px; }
	.cinfo__val { font-size: 13.5px; }
	.contact__note { padding: 14px; border-left: 3px solid var(--c-navy); border-radius: 8px; }
	.contact__form-wrap { padding: 18px; border-radius: 12px; }
	.contact__map { height: 220px; margin-top: 24px; border-radius: 12px; }
}

/* ---- Footer (design handoff) ----------------------------------------------
   Brand block full width, the two link lists side by side, contact full width
   again, then the legal line. Same content as desktop - layout and scale only.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.sitefoot { border-top: 3px solid var(--c-red); box-shadow: none; }
	.sitefoot__cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; padding-top: 32px; padding-bottom: 22px; }
	/* Brand and Kontakt span the row; Navigacija and Kategorije share it. */
	.sitefoot__cols > :first-child, .sitefoot__cols > :last-child { grid-column: 1 / -1; }

	.sitefoot__brand { width: auto; }
	/* The desktop logo is width:100% of a 258px column - unconstrained on a phone. */
	.footbrand { width: auto; }
	.footbrand__logo { height: 34px; width: auto; }
	.sitefoot__blurb { max-width: 300px; margin-top: 16px; font-size: 13px; line-height: 1.6; }
	.sitefoot__cert { align-self: flex-start; height: auto; margin-top: 16px; padding: 8px; border: 1px solid var(--c-line); border-radius: 6px; background: #fff; }
	.sitefoot__cert { max-height: 96px; }

	.sitefoot__title { margin-bottom: 12px; font-size: 11px; letter-spacing: 1px; }
	.sitefoot__list { gap: 11px; }
	.sitefoot__list a { font-size: 13.5px; color: #334155; }
	.sitefoot__contact li { gap: 9px; font-size: 13px; color: #334155; }
	.sitefoot__contact .icon { width: 14px; height: 14px; margin-top: 2px; }

	.sitefoot__legal-inner { padding-top: 16px; padding-bottom: 16px; gap: 6px; }
	.sitefoot__legal-inner::before { border-top-width: 1px; border-top-color: var(--c-line); }
	.sitefoot__legal p { font-size: 11px; }
	.sitefoot__legal-id { color: var(--c-muted); }
}

/* ---- Single product ---------------------------------------------------------
   No single-product screen in the design export, so this follows the language the
   rest of the pass established (card scale, muted meta, compact media).
   -------------------------------------------------------------------------- */
/* Both category labels were unstyled, so they inherited body --ink (#1c290d, olive)
   plus the default underline. Not mobile-specific — fixed everywhere. */
.single__cat, .relcard__cat { color: var(--c-muted); font-size: 12px; text-decoration: none; }
.single__cat:hover { color: var(--c-red); }

@media (max-width: 767px) {
	section.single { padding: 16px 0 36px; }
	.crumbs { margin-bottom: 16px; font-size: 12px; }
	/* The illustrative visual was 308px tall — half the first screen before the price. */
	.single__media img { max-height: 240px; object-fit: contain; }
	.single__title { font-size: 24px; }
	.single__price { font-size: 26px; }
	.single__meta { margin-top: 16px; padding-top: 16px; }
	.single__note { margin-top: 18px; font-size: 13px; }

	/* Related products: 4 cards at ~600px each buried the rest of the page. */
	.single__related { margin-top: 36px; }
	.single__h2 { margin-bottom: 18px; font-size: 24px; }
	.relgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.relcard { border-radius: 10px; }
	.relcard__media { aspect-ratio: 4 / 3; }
	.relcard__body { padding: 10px; gap: 6px; }
	.relcard__name { font-size: 13px; }
	.relcard__stock { font-size: 11px; }
	.relcard__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
	.relcard__price { font-size: 16px; }
	.relcard__add { width: 100%; min-height: 34px; font-size: 12px; }
}

/* ---- Katalog (design handoff) ----------------------------------------------
   The light info panel becomes a full-bleed gradient hero; theme navy, not the
   export's #1B3E7A.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.katalog { padding: 0 0 36px; }
	.katalog__head {
		flex-direction: column; align-items: center; text-align: center; gap: 14px;
		margin: 0 calc(var(--gutter) * -1) 18px; /* full bleed out of .container */
		padding: 40px 24px; border: 0; border-radius: 0;
		background: linear-gradient(150deg, var(--c-navy), #0F1C36);
	}
	.katalog__icon { background: rgba(255,255,255,.14); }
	.katalog__title { color: #fff; font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 28px; line-height: 1.15; }
	.katalog__sub { margin-top: 12px; color: #DBEAFE; font-size: 13.5px; line-height: 1.55; }
	.katalog__viewer { height: 460px; min-height: 0; border-radius: 10px; }
	.katalog__fallback { font-size: 12px; }
}

/* ---- Kontakt (design handoff) ----------------------------------------------
   The rest of this page already comes from the homepage .contact rules; only the
   form panel differs: the design tints the card and leaves the fields white.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.contact__form-wrap { background: var(--c-input); box-shadow: none; }
	.cform input, .cform textarea { background: #fff; }
}

/* ---- Cart drawer + cart page (design handoff) ------------------------------
   The side drawer becomes the design's full-screen sheet: coloured head, larger
   line thumbs, and a total + red checkout CTA pinned to the bottom.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.minicart { width: 100%; max-width: none; box-shadow: none; }

	.minicart__head { padding: 18px; background: var(--c-navy); border-bottom: 0; }
	.minicart__head strong { color: #fff; font-size: 20px; }
	.minicart__close { color: rgba(255,255,255,.8); }
	.minicart__close:hover { color: #fff; }

	.minicart__items { padding: 6px 16px; }
	/* 4 columns: the remove button is the item's 4th child, so with 3 columns it wrapped
	   onto its own row under the thumbnail. */
	.minicart__item { grid-template-columns: 64px 1fr auto auto; }
	.minicart__img { width: 64px; height: 64px; padding: 6px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
	.minicart__img img { object-fit: contain; }
	.minicart__price { font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 15px; }

	.minicart__foot { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
	.minicart__subtotal { align-items: baseline; font-size: 14px; color: var(--c-muted); }
	.minicart__subtotal strong { font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 22px; }
	/* Design gives the cart's primary CTA red, to separate it from every navy control. */
	.minicart__foot .btn--navy { min-height: 48px; background: var(--c-red); border-color: var(--c-red); font-size: 15px; }
	.minicart__foot .btn--navy:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }

	.minicart__empty { padding: 48px 24px; }

	/* Cart / checkout page: match the section rhythm used everywhere else. */
	.lager-checkout h2, .lager-checkout h3 { font-size: 20px; }
	.lager-order-summary, #payment { border-radius: 12px; }
	/* .lo-summary-cell .lager-order-summary pins it to 320px and outranks the max-width:none
	   above, leaving the total label butted against the amount. */
	/* The <=680 block-conversion of the order table lists tbody/tr/td but not tfoot, so the
	   summary stayed inside a real table footer (265px) and squeezed its total row. */
	.lager-order-table tfoot, .lager-order-table tfoot tr, .lager-order-table tfoot td { display: block; width: 100%; padding-left: 0; padding-right: 0; }
	.lo-summary-cell .lager-order-summary { max-width: none; margin: 6px 0 0; }
	#place_order { min-height: 48px; font-size: 15px; }
}

/* ---- Checkout + order-received (not in the design export) -------------------
   .page-wrap's `padding: 40px 0 64px` shorthand resets .container's horizontal
   padding to 0, so on a phone the checkout form ran edge-to-edge. Restored here
   only for mobile: on desktop the 1180px max-width + auto margins carry it.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.page-wrap { padding-inline: var(--gutter); }

	/* Checkout */
	.lager-checkout__grid { gap: 20px; }
	#customer_details { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 16px; }
	.lager-checkout-fields__title { margin: 20px 0 12px; font-size: 18px; }
	.lager-checkout-fields__grid { gap: 12px 14px; }
	.lager-checkout label { font-size: 13px; }
	.lager-checkout input[type="text"],
	.lager-checkout input[type="email"],
	.lager-checkout input[type="tel"],
	.lager-checkout textarea { min-height: 44px; }

	/* Order received */
	.thankyou__title { font-size: 24px; }
	.thankyou__lead { font-size: 14px; }
	.thankyou__pay, .thankyou__card { padding: 16px; }
	/* Account numbers are long — label over value beats a squeezed two-column row. */
	.thankyou__bank li { flex-direction: column; align-items: flex-start; gap: 2px; }
	.thankyou__bank strong { text-align: left; }
	.thankyou__actions .btn { width: 100%; }
}

/* Cart drawer close control — SVG icon rather than a text × glyph. */
.minicart__close .icon { width: 20px; height: 20px; }

/* ---- Legal / long-form pages (Uslovi korišćenja) ---------------------------
   Generic page.php content. Scoped away from the checkout, which shares the
   template but has its own layout.
   -------------------------------------------------------------------------- */
/* Centred measure: the column sits mid-page, text stays left-aligned (centred body
   copy is unreadable at this length). The title shares the measure so it lines up. */
.page-wrap:not(.page-wrap--checkout) .entry-content { max-width: 820px; margin-inline: auto; color: #44506a; font-size: 15px; line-height: 1.75; }
.page-wrap:not(.page-wrap--checkout) .page-title { max-width: 820px; margin-inline: auto; }
.page-wrap:not(.page-wrap--checkout) .entry-content h2 { margin: 40px 0 12px; color: var(--c-navy); font-size: 22px; font-weight: 700; line-height: 1.25; }
.page-wrap:not(.page-wrap--checkout) .entry-content h3 { margin: 28px 0 8px; color: var(--c-ink); font-size: 17px; font-weight: 700; }
.page-wrap:not(.page-wrap--checkout) .entry-content h2:first-child,
.page-wrap:not(.page-wrap--checkout) .entry-content h3:first-child { margin-top: 0; }
.page-wrap:not(.page-wrap--checkout) .entry-content p { margin: 0 0 14px; }
.page-wrap:not(.page-wrap--checkout) .entry-content ul,
.page-wrap:not(.page-wrap--checkout) .entry-content ol { margin: 0 0 16px; padding-left: 22px; }
.page-wrap:not(.page-wrap--checkout) .entry-content li { margin-bottom: 7px; }
.page-wrap:not(.page-wrap--checkout) .entry-content a { color: var(--c-navy); text-decoration: underline; }
.page-wrap:not(.page-wrap--checkout) .entry-content a:hover { color: var(--c-red); }
.legal__lead { padding: 16px 18px; background: var(--c-panel); border-radius: 10px; color: var(--c-ink); }

/* Footer legal link */
.sitefoot__legal-links a { color: var(--c-muted); font-size: 12px; text-decoration: none; }
.sitefoot__legal-links a:hover { color: var(--c-navy); text-decoration: underline; }

@media (max-width: 767px) {
	.page-title { font-size: 26px; }
	.page-wrap:not(.page-wrap--checkout) .entry-content { font-size: 14px; line-height: 1.7; }
	.page-wrap:not(.page-wrap--checkout) .entry-content h2 { margin-top: 30px; font-size: 19px; }
	.page-wrap:not(.page-wrap--checkout) .entry-content h3 { margin-top: 22px; font-size: 16px; }
}

/* Contact-form honeypot: off-screen rather than display:none — some bots skip
   hidden fields, and this one is meant to be filled. */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Single payment method → the radio is a choice of one, so hide it and let the row
   read as a statement. Uses :only-child, so re-enabling a second gateway in
   WooCommerce → Settings → Payments brings the toggle back automatically. */
#payment .payment_methods > li:only-child input[type="radio"] { display: none; }
#payment .payment_methods > li:only-child { border-color: var(--c-navy); box-shadow: none; }

/* Checkout: WooCommerce blocks only the form while the order is placed, so the header,
   summary and everything outside it stay clickable mid-submit. Promote the blockUI
   overlay to the full viewport. blockUI writes inline position/width/height, hence
   the !important. */
.woocommerce-checkout .blockUI.blockOverlay {
	position: fixed !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	opacity: .7 !important;
	z-index: 9999 !important;
}