/*
 * ACS header — klasican shop header po uzoru na postojeci sajt firme:
 * beli gornji red (logo lockup, pretraga, Kontakt telefon, korpa) + puna
 * plava traka navigacije ispod. Bez transparent-nad-herojem stanja (nema
 * heroja) i bez backdrop-filter blur-a (perf).
 *
 * UI plava za povrsine sa BELIM tekstom je var(--acs-link) (#0077B3, AA);
 * svetlija logo-plava (--acs-cyan #00AFF0) ostaje za brend akcente.
 *
 * Blocksy header se gasi (nasa traka ga zamenjuje). Mobilni: gornji red
 * (logo + korpa + hamburger) -> slide-in panel sa pretragom i menijem.
 */

/* ==================================================================
   Sakrij Blocksy header i njegov razmak
   ================================================================== */
#header.ct-header,
.ct-header[data-device],
.ct-header,
#header[data-device] {
	display: none !important;
}
/* Blocksy ponekad rezervise offset za sticky header preko var-a; nuliraj. */
:root {
	--header-height: 0px;
	--frame-size: 0px;
}
.ct-header-trans,
[data-header] {
	--header-height: 0px;
}

/* Ukupna visina fiksnog headera (gornji red; >=1024 + plava traka).
   Kasnije u kaskadi od _tokens.css -> ovo vazi. */
:root { --acs-header-h: 64px; }
@media (min-width: 1024px) {
	:root { --acs-header-h: 118px; }
}

/* ==================================================================
   Header — uvek solidan (beli u light temi)
   ================================================================== */
.acs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--acs-z-header, 100);
	background: var(--acs-surface, #FFFFFF);
	box-shadow: 0 1px 0 var(--acs-island-hairline, #DBE6EE);
	transition: box-shadow var(--acs-dur-ui, 240ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1));
}
.acs-header.is-scrolled {
	box-shadow: 0 1px 0 var(--acs-island-hairline, #DBE6EE), 0 10px 28px -18px rgba(12, 26, 36, .25);
}

.acs-header__inner {
	max-width: var(--acs-container-wide, 1440px);
	margin-inline: auto;
	padding-inline: var(--acs-gutter, clamp(1rem, .5rem + 2vw, 2rem));
	display: flex;
	align-items: center;
	gap: clamp(.9rem, .5rem + 1.4vw, 2rem);
}
.acs-header__top .acs-header__inner {
	min-height: 64px;
}
@media (min-width: 1024px) {
	.acs-header__top .acs-header__inner { min-height: 72px; }
}

/* ==================================================================
   Logo lockup — veran logotipu: ACS plavo, podnaslov sitno plavo,
   SHOP&SERVICE tamni serif.
   ================================================================== */
.acs-logo {
	display: grid;
	grid-template-columns: auto;
	justify-items: start;
	row-gap: 1px;
	flex-shrink: 0;
	text-decoration: none;
	line-height: 1;
}
.acs-logo:hover { text-decoration: none; }
.acs-logo__acs {
	color: var(--acs-cyan, #00AFF0);
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-weight: 800;
	font-style: italic;
	font-size: 1.7rem;
	letter-spacing: .02em;
}
.acs-logo__sub {
	color: var(--acs-cyan, #00AFF0);
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-size: .53rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.acs-logo__shop {
	color: var(--acs-ink, #2F2F2F);
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: .96rem;
	letter-spacing: .05em;
	white-space: nowrap;
}
.acs-logo__amp { color: var(--acs-cyan, #00AFF0); }

/* ==================================================================
   Pretraga u gornjem redu (desktop)
   ================================================================== */
.acs-header__search {
	flex: 1 1 auto;
	max-width: 540px;
	margin-inline: auto;
}
@media (max-width: 1023px) {
	.acs-header__search { display: none; } /* pretraga zivi u panelu */
}

/* ==================================================================
   Kontakt telefon — "Kontakt:" crveno + broj taman (kao stari sajt)
   ================================================================== */
.acs-header__contact {
	display: none;
	align-items: baseline;
	gap: .4rem;
	white-space: nowrap;
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
}
@media (min-width: 1200px) {
	.acs-header__contact { display: inline-flex; }
}
.acs-header__contact-label {
	color: var(--acs-red, #D42B2B);
	font-weight: 700;
	font-size: .9rem;
}
.acs-header__contact-tel {
	color: var(--acs-ink, #2F2F2F);
	font-weight: 700;
	font-size: .98rem;
	text-decoration: none;
}
.acs-header__contact-tel:hover { color: var(--acs-red, #D42B2B); text-decoration: none; }

/* ==================================================================
   Korpa — plavo dugme "Vasa korpa: X RSD"
   ================================================================== */
.acs-header__cart {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	min-height: 42px;
	padding: .45rem .95rem;
	background: var(--acs-link, #0077B3);
	color: #FFFFFF;
	border-radius: var(--acs-r-sm, 8px);
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-weight: 600;
	font-size: .92rem;
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--acs-dur-hover, 180ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1));
}
.acs-header__cart:hover {
	background: color-mix(in srgb, var(--acs-link, #0077B3) 85%, #000);
	color: #FFFFFF;
	text-decoration: none;
}
.acs-header__cart-ico { flex: none; }
.acs-header__cart .woocommerce-Price-amount { color: #FFFFFF; }
@media (max-width: 559px) {
	.acs-header__cart-total { display: none; } /* na najuzim samo "Vasa korpa" */
}

/* ==================================================================
   Plava traka navigacije (desktop) — puna sirina, beli linkovi
   ================================================================== */
.acs-nav-bar {
	background: var(--acs-link, #0077B3);
}
.acs-nav-bar .acs-header__inner {
	min-height: 46px;
	gap: 0;
}
@media (max-width: 1023px) {
	.acs-nav-bar { display: none; } /* meni zivi u panelu */
}
.acs-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: wrap;
}
.acs-nav__item { margin: 0; }
.acs-nav-bar .acs-nav__link,
.acs-nav-bar a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 clamp(.7rem, .4rem + .7vw, 1.15rem);
	color: #FFFFFF;
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--acs-dur-hover, 180ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1));
}
.acs-nav-bar .acs-nav__link:hover,
.acs-nav-bar .acs-nav__link:focus-visible,
.acs-nav-bar a:hover,
.acs-nav-bar a:focus-visible {
	background: rgba(0, 0, 0, .16);
	color: #FFFFFF;
	text-decoration: none;
	outline: none;
}
.acs-nav-bar .current-menu-item > a,
.acs-nav-bar a[aria-current="page"] {
	background: rgba(0, 0, 0, .22);
	color: #FFFFFF;
}

/* Skriven vizuelno, dostupan citacima ekrana. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ==================================================================
   Hamburger (mobilni)
   ================================================================== */
.acs-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: .25rem;
	padding: 0;
	background: var(--acs-bg-2, #E9F2F9);
	border: 1px solid var(--acs-island-hairline, #DBE6EE);
	border-radius: 10px;
	color: var(--acs-ink, #2F2F2F);
	cursor: pointer;
	transition:
		color var(--acs-dur-hover, 180ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1)),
		border-color var(--acs-dur-hover, 180ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1)),
		background var(--acs-dur-hover, 180ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1));
}
.acs-burger:hover {
	border-color: color-mix(in srgb, var(--acs-cyan, #00AFF0) 55%, transparent);
	background: color-mix(in srgb, var(--acs-cyan, #00AFF0) 12%, transparent);
}
.acs-burger__box {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}
.acs-burger__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--acs-dur-ui, 240ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1)),
		opacity var(--acs-dur-ui, 240ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1));
}
.acs-burger__line:nth-child(1) { top: 0; }
.acs-burger__line:nth-child(2) { top: 6px; }
.acs-burger__line:nth-child(3) { top: 12px; }

/* ==================================================================
   Slide-in panel + overlay (mobilni)
   ================================================================== */
.acs-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--acs-z-nav, 120);
	background: rgba(12, 26, 36, .5);
	opacity: 0;
	transition: opacity var(--acs-dur-ui, 240ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1));
}
.acs-nav-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: calc(var(--acs-z-nav, 120) + 1);
	width: min(88vw, 380px);
	display: flex;
	flex-direction: column;
	background: var(--acs-surface, #FFFFFF);
	border-left: 1px solid var(--acs-island-hairline, #DBE6EE);
	box-shadow: -24px 0 60px rgba(12, 26, 36, .25);
	transform: translateX(100%);
	transition: transform var(--acs-dur-ui, 240ms) var(--acs-ease, cubic-bezier(.22, .61, .36, 1));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.acs-nav-panel[hidden],
.acs-nav-overlay[hidden] { display: none; }

body.acs-nav-open { overflow: hidden; }
body.acs-nav-open .acs-nav-panel { transform: translateX(0); }
body.acs-nav-open .acs-nav-overlay { opacity: 1; }

/* Hamburger -> X kad je otvoreno */
body.acs-nav-open .acs-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.acs-nav-open .acs-burger__line:nth-child(2) { opacity: 0; }
body.acs-nav-open .acs-burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.acs-nav-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--acs-sp-4, 1rem) var(--acs-sp-6, 1.5rem);
	border-bottom: 1px solid var(--acs-island-hairline, #DBE6EE);
}
.acs-nav-panel__close {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	color: var(--acs-ink, #2F2F2F);
	cursor: pointer;
	border-radius: 10px;
}
.acs-nav-panel__close:hover { color: var(--acs-link, #0077B3); }

.acs-nav-panel__search {
	padding: var(--acs-sp-3, .75rem) var(--acs-sp-6, 1.5rem) 0;
}

.acs-nav-panel__nav {
	padding: var(--acs-sp-4, 1rem) var(--acs-sp-6, 1.5rem);
	flex: 1 1 auto;
}
.acs-nav__list--panel {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.acs-nav__list--panel .acs-nav__item,
.acs-nav-panel__nav li {
	border-bottom: 1px solid var(--acs-island-hairline, #DBE6EE);
}
.acs-nav__list--panel .acs-nav__link,
.acs-nav-panel__nav a {
	display: block;
	padding: .9rem .25rem;
	color: var(--acs-text, #0C1A24);
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}
.acs-nav__list--panel .acs-nav__link:hover,
.acs-nav-panel__nav a:hover { color: var(--acs-link, #0077B3); text-decoration: none; }

.acs-nav-panel__foot {
	padding: var(--acs-sp-6, 1.5rem);
	border-top: 1px solid var(--acs-island-hairline, #DBE6EE);
	display: flex;
	flex-direction: column;
	gap: var(--acs-sp-4, 1rem);
	padding-bottom: calc(var(--acs-sp-6, 1.5rem) + env(safe-area-inset-bottom));
}
.acs-nav-panel__cta {
	width: 100%;
	min-height: 50px;
}
.acs-nav-panel__tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: var(--acs-text, #0C1A24);
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
}
.acs-nav-panel__tel:hover { color: var(--acs-link, #0077B3); text-decoration: none; }
.acs-nav-panel__hours {
	margin: 0;
	text-align: center;
	color: var(--acs-text-mute, #5C7180);
	font-size: var(--acs-fs-sm, .9375rem);
}

/* ==================================================================
   Breakpoint: pod 1024 gornji red nosi logo + korpa + hamburger
   ================================================================== */
@media (max-width: 1023px) {
	.acs-burger { display: inline-flex; }
	.acs-header__top .acs-header__inner { justify-content: space-between; }
}
@media (min-width: 1024px) {
	.acs-nav-panel,
	.acs-nav-overlay {
		display: none !important;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.acs-header,
	.acs-nav-panel,
	.acs-nav-overlay,
	.acs-burger__line {
		transition: none;
	}
}

/* ==================================================================
   Polje pretrage (koristi se u headeru, panelu i filter fioci)
   ================================================================== */
.acs-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}
.acs-search__ico {
	position: absolute;
	left: .8rem;
	display: inline-grid;
	place-items: center;
	color: var(--acs-text-mute, #5C7180);
	pointer-events: none;
}
.acs-search__input {
	width: 100%;
	height: 44px;
	padding: 0 5.2rem 0 2.5rem;
	background: var(--acs-surface, #FFFFFF);
	border: 1px solid var(--acs-border, #C7DCEA);
	border-radius: var(--acs-r-sm, 8px);
	color: var(--acs-text, #0C1A24);
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-size: .95rem;
	transition: border-color var(--acs-dur-hover, 180ms), box-shadow var(--acs-dur-hover, 180ms);
	-webkit-appearance: none;
	appearance: none;
}
.acs-search__input::placeholder { color: var(--acs-text-mute, #5C7180); }
.acs-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.acs-search__input:focus {
	outline: none;
	border-color: var(--acs-cyan, #00AFF0);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--acs-cyan, #00AFF0) 22%, transparent);
}
.acs-search__submit {
	position: absolute;
	right: 5px;
	height: 34px;
	padding: 0 1rem;
	border: 0;
	border-radius: calc(var(--acs-r-sm, 8px) - 2px);
	background: var(--acs-link, #0077B3);
	color: #FFFFFF;
	font-family: var(--acs-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	font-weight: 700;
	font-size: .85rem;
	cursor: pointer;
	transition: background var(--acs-dur-hover, 180ms);
}
.acs-search__submit:hover { background: color-mix(in srgb, var(--acs-link, #0077B3) 85%, #000); }