/* =====================================================================
   CCS — base.css  ·  vizualne smjernice v2.0
   Boje, tipografija i razmaci dolaze iz theme.json kao --wp--preset--*.
   Ovdje su samo pravila koja theme.json ne moze izraziti: oblici, ritam
   sekcija, hero ploca, interakcije.
   ===================================================================== */

/* Bez ovoga padding i rub rastu preko zadane sirine - ploca je na
   390px viewportu ispadala 411px siroka. WP ovo ne postavlja globalno. */
*, *::before, *::after { box-sizing: border-box; }


:root {
	/* Oblici — potpisni sloj v2.0 */
	--ccs-r-btn: 100px;                                   /* pill */
	--ccs-r-card: 18px;
	--ccs-r-arch: 999px 999px var(--ccs-r-card) var(--ccs-r-card);
	--ccs-r-square: 7px;                                  /* samo kockice cokolade */

	--ccs-gap: 1.5rem;
	--ccs-max: 1280px;
	--ccs-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);

	--ccs-line: 1px solid var(--wp--preset--color--sand, #e8ddd0);
	--ccs-shadow: 0 1px 2px rgba(42, 26, 18, .06);

	--ccs-ease: cubic-bezier(.22, .61, .36, 1);
	--ccs-dur: 200ms;
	--ccs-stroke: 1.5;

	--ccs-header-h: 74px;
}

@media (max-width: 781px) {
	:root { --ccs-gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Sigurnosna brava protiv horizontalnog scrolla. "clip" (za razliku od
   "hidden") ne stvara scroll kontejner pa position:sticky header i
   galerija i dalje rade. */
html, body { overflow-x: clip; }

img { max-inline-size: 100%; block-size: auto; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* sidra ne smiju zavrsiti ispod sticky headera */
[id] { scroll-margin-top: calc(var(--ccs-header-h) + 1.5rem); }

::selection { background: var(--wp--preset--color--cacao); color: var(--wp--preset--color--cream); }
.ccs-dark ::selection,
.ccs-footer ::selection { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--cacao); }

/* --- Fokus -------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--copper);
	outline-offset: 2px;
	border-radius: 2px;
}

/* na tamnim podlogama bakar se gubi — zlatni prsten
   (hero je od bez verzije svijetli pa vise nije ovdje) */
.ccs-dark :focus-visible,
.ccs-footer :focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

.ccs-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: 999;
}

.ccs-skip-link:focus {
	inset-inline-start: var(--wp--preset--spacing--30);
	inset-block-start: var(--wp--preset--spacing--20);
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--cream);
	border-radius: var(--ccs-r-btn);
}

/* --- Tipografski pomocnici ---------------------------------------- */

/* .em — jedna kurzivna naglasena fraza po naslovu */
.ccs-em,
h1 em, h2 em, h3 em {
	font-style: italic;
	color: var(--wp--preset--color--copper);
}

.ccs-dark .ccs-em,
.ccs-dark h2 em { color: var(--wp--preset--color--gold); }
.ccs-gold .ccs-em,
.ccs-gold h2 em { color: var(--wp--preset--color--red); }

/* eyebrow — crveni na svijetlom, zlatni na tamnom */
.ccs-eyebrow {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin-block-end: var(--wp--preset--spacing--10);
}

.ccs-dark .ccs-eyebrow { color: var(--wp--preset--color--gold); }
/* Crvena na zlatnoj je 3.31:1 - dovoljno za velike naslove, premalo za
   13px eyebrow. Ondje ide tinta (7.7:1); crvena ostaje u .em naslovu. */
.ccs-gold .ccs-eyebrow { color: var(--wp--preset--color--ink); }

.ccs-lede {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--muted);
	max-inline-size: 55ch;
}

/* --- Ritam sekcija ------------------------------------------------- */

.ccs-section { padding-block: var(--ccs-section); }
.ccs-alt { background: var(--wp--preset--color--paper); border-block: var(--ccs-line); }
.ccs-dark { background: var(--wp--preset--color--cacao); color: var(--wp--preset--color--cream); }
.ccs-dark :is(h1, h2, h3, h4) { color: var(--wp--preset--color--cream); }
.ccs-dark p { color: rgba(250, 246, 240, .78); }
.ccs-gold { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--cacao); }
.ccs-gold :is(h2, h3) { color: var(--wp--preset--color--ink); }
.ccs-gold p { color: rgba(42, 26, 18, .85); }

/* zaglavlje sekcije: shop lijevo, galerija centrirano */
.ccs-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
}

.ccs-sec-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--20);
}

/* --- Gumbi --------------------------------------------------------- */

.wp-block-button__link,
.ccs-btn {
	border-radius: var(--ccs-r-btn);
	padding: .95rem 2rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	display: inline-block;
	transition: background-color var(--ccs-dur) var(--ccs-ease),
		color var(--ccs-dur) var(--ccs-ease),
		border-color var(--ccs-dur) var(--ccs-ease);
}

/* invertirani gumb na tamnom: krem -> zlatna
   (bez hero koristi standardni kakao gumb, pa vise nije u selektorima) */
.ccs-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--cacao);
}

.ccs-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.ccs-dark .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--cream);
	border-color: rgba(250, 246, 240, .45);
}

.ccs-dark .is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}

/* zlatna B2B sekcija: kakao gumb -> tinta sa zlatnim tekstom */
.ccs-gold .wp-block-button__link { background: var(--wp--preset--color--cacao); color: var(--wp--preset--color--cream); }
.ccs-gold .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold); }

/* tekstualni link sa strelicom koja klizne */
.ccs-btn-text {
	color: var(--wp--preset--color--copper);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	white-space: nowrap;
}

.ccs-btn-text::after {
	content: " →";
	display: inline-block;
	transition: transform var(--ccs-dur) var(--ccs-ease);
}

.ccs-btn-text:hover::after { transform: translateX(4px); }
.ccs-dark .ccs-btn-text { color: var(--wp--preset--color--gold); }

/* --- Tagovi i mikro-elementi --------------------------------------- */

.ccs-tag {
	display: inline-block;
	inline-size: fit-content;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .05em;
	padding: .25rem .7rem;
	border-radius: 100px;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--cacao);
}

.ccs-dark .ccs-tag { background: rgba(250, 246, 240, .1); color: var(--wp--preset--color--gold); }

.ccs-spice { display: inline-flex; gap: .25rem; vertical-align: middle; margin-inline-start: .4rem; }
.ccs-spice i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--wp--preset--color--red); display: inline-block; }
.ccs-spice i.is-off { background: var(--wp--preset--color--sand); }

/* --- Oblik: LUK ---------------------------------------------------- */

.ccs-arch { border-radius: var(--ccs-r-arch); overflow: hidden; }

@media (max-width: 560px) {
	.ccs-arch { border-radius: 48% 48% var(--ccs-r-card) var(--ccs-r-card); }
}

/* --- Kartice ------------------------------------------------------- */

.ccs-card {
	background: var(--wp--preset--color--paper);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	overflow: hidden;
	transition: transform var(--ccs-dur) var(--ccs-ease), border-color var(--ccs-dur) var(--ccs-ease);
}

.ccs-card:hover { transform: translateY(-4px); border-color: #d9c0a0; }

/* --- Kategorije: asimetricni grid ---------------------------------- */

/* Redovi su fiksni, a slika apsolutna - inace prirodna visina slike
   napuse redove i sekcija naraste na ~1200px (kartica ~980px). */
.ccs-cat-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	grid-auto-rows: clamp(200px, 21vw, 250px);
	gap: var(--ccs-gap);
}

.ccs-cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ccs-r-card);
	text-decoration: none;
	background: linear-gradient(160deg, #8a5a3b, #3e2417 70%);
}

.ccs-cat-card--big { grid-row: 1 / 3; border-radius: var(--ccs-r-arch); }

.ccs-cat-card img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: filter .3s var(--ccs-ease);
}
.ccs-cat-card:hover img { filter: brightness(.76) saturate(1.06); }

.ccs-cat-card__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--60);
	background: linear-gradient(180deg, rgba(20,16,14,0) 0%, rgba(20,16,14,.55) 42%, rgba(20,16,14,.94) 100%);
	color: var(--wp--preset--color--cream);
	transition: transform .3s var(--ccs-ease);
}

.ccs-cat-card:hover .ccs-cat-card__label { transform: translateY(-5px); }
.ccs-cat-card__label h3 { color: var(--wp--preset--color--cream); position: relative; inline-size: fit-content; padding-block-end: 4px; }
.ccs-cat-card--big .ccs-cat-card__label h3 { font-size: var(--wp--preset--font-size--xxl); }

.ccs-cat-card__label h3::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	block-size: 2px;
	inline-size: 0;
	background: var(--wp--preset--color--gold);
	transition: width .3s var(--ccs-ease);
}

.ccs-cat-card:hover .ccs-cat-card__label h3::before { inline-size: 100%; }
.ccs-cat-card__label span { font-size: var(--wp--preset--font-size--sm); color: rgba(250, 246, 240, .85); display: block; }

.ccs-cat-card__count {
	margin-block-start: .5rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

@media (hover: hover) {
	.ccs-cat-card__label > span:not(.ccs-cat-card__count) {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .25s var(--ccs-ease), transform .25s var(--ccs-ease);
	}
	.ccs-cat-card:hover .ccs-cat-card__label > span:not(.ccs-cat-card__count) { opacity: 1; transform: none; }
}

@media (max-width: 800px) {
	.ccs-cat-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.ccs-cat-card { aspect-ratio: 16 / 9; }
	.ccs-cat-card--big { grid-row: auto; }
}

/* --- Gridovi ------------------------------------------------------- */

.ccs-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ccs-gap); }
.ccs-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ccs-gap); }

@media (max-width: 1000px) { .ccs-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ccs-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .ccs-grid-4 { grid-template-columns: 1fr; } }

/* --- USP traka ----------------------------------------------------- */

.ccs-usp {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ccs-gap);
	padding-block: var(--wp--preset--spacing--40);
}

.ccs-usp > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .7rem;
	font-size: var(--wp--preset--font-size--sm);
}

.ccs-usp svg {
	inline-size: 52px;
	block-size: 52px;
	padding: 13px;
	background: var(--wp--preset--color--cream);
	border: var(--ccs-line);
	border-radius: 100px;
	color: var(--wp--preset--color--copper);
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ccs-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ccs-usp span { max-inline-size: 16ch; line-height: 1.4; }

@media (max-width: 900px) { .ccs-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ccs-usp { grid-template-columns: 1fr; } }

/* --- Editorial split: kako nastaje --------------------------------- */

.ccs-craft { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--wp--preset--spacing--50); align-items: center; }
.ccs-craft__media { aspect-ratio: 4 / 5; border-radius: var(--ccs-r-arch); overflow: hidden; background: linear-gradient(150deg, #8a5a3b, #2a1a12); }
.ccs-craft__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.ccs-steps { list-style: none; padding: 0; margin: 0; }

.ccs-steps li {
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: var(--ccs-line);
}

.ccs-steps__num {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--copper);
	line-height: 1;
}

.ccs-steps h3 { font-size: var(--wp--preset--font-size--lg); margin-block-end: .3rem; }
.ccs-steps p { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }

.ccs-craft__credit {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--ccs-line);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-inline-size: 54ch;
}

@media (max-width: 900px) { .ccs-craft { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); } }

/* --- Recenzije ----------------------------------------------------- */

.ccs-review {
	background: var(--wp--preset--color--paper);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.ccs-review__stars { color: var(--wp--preset--color--copper); letter-spacing: .25em; font-size: var(--wp--preset--font-size--sm); }

.ccs-review blockquote {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.3;
	letter-spacing: -.01em;
	border: 0;
	padding: 0;
	margin: 0;
}

.ccs-review figcaption { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); margin-block-start: auto; }
.ccs-review figcaption b { color: var(--wp--preset--color--cacao); font-weight: 600; display: block; }

/* --- FAQ: uvod lijevo (sticky), numerirana pitanja desno ------------ */

.ccs-faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.ccs-faq-intro {
	position: sticky;
	inset-block-start: calc(var(--ccs-header-h, 74px) + 2rem);
}

.ccs-faq-intro .ccs-lede {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
}

/* dva CTA-a jedan ispod drugog - u istom retku se stisnu */
.ccs-faq-intro .ccs-btn-text {
	display: block;
}

.ccs-faq-intro__contact {
	margin-block-start: .6rem;
	color: var(--ccs-muted-ink, #6c5d53) !important;
}

@media (max-width: 900px) {
	.ccs-faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); }
	.ccs-faq-intro { position: static; }
}

.ccs-faq details { border-block-end: var(--ccs-line); }
.ccs-faq details:first-child { border-block-start: var(--ccs-line); }

.ccs-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -.01em;
}

.ccs-faq__num {
	flex: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--ccs-copper-ink, #956f2d);
}

.ccs-faq__q { flex: 1; }

/* odgovor sjeda u ravninu pitanja, ne ispod broja */
.ccs-faq details > p {
	margin-inline-start: calc(1.6rem + var(--wp--preset--spacing--20));
}

.ccs-faq summary::-webkit-details-marker { display: none; }

.ccs-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	color: var(--wp--preset--color--copper);
	transition: transform var(--ccs-dur) var(--ccs-ease);
}

.ccs-faq details[open] summary::after { transform: rotate(45deg); }
.ccs-faq summary:hover { color: var(--wp--preset--color--red); }
.ccs-faq details > p { padding-block-end: var(--wp--preset--spacing--30); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); max-inline-size: 62ch; }

/* --- Traka napretka scrolla ---------------------------------------- */

.ccs-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 3px;
	inline-size: 0;
	z-index: 60;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--copper));
	border-radius: 0 100px 100px 0;
	pointer-events: none;
}

.ccs-progress::after {
	content: "";
	position: absolute;
	inset-inline-end: -2px;
	inset-block-start: 0;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

/* --- Scroll reveal ------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.ccs-rv { opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ccs-ease), transform .55s var(--ccs-ease); }
	.ccs-rv.is-vis { opacity: 1; transform: none; }
}

/* --- Ikone --------------------------------------------------------- */

.ccs-icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ccs-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/* --- Akordeon deklaracije ------------------------------------------ */

.ccs-accordion > details { border-block-end: var(--ccs-line); }

/* Sekcija "Povezani proizvodi" nosi vlastitu gornju crtu, pa je zadnja
   crta akordeona bila druga linija 64px iznad nje. Kad iza akordeona
   nesto slijedi, njegova zavrsna crta ide van; ako je akordeon zadnji,
   crta ostaje da zatvori popis. */
.ccs-accordion:not(:last-child) > details:last-of-type {
	border-block-end: 0;
}

.ccs-accordion summary {
	cursor: pointer;
	padding-block: var(--wp--preset--spacing--30);
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.ccs-accordion summary::-webkit-details-marker { display: none; }

.ccs-accordion summary::after {
	content: "";
	inline-size: .625rem;
	block-size: .625rem;
	border-inline-end: var(--ccs-stroke) solid currentColor;
	border-block-end: var(--ccs-stroke) solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--ccs-dur) var(--ccs-ease);
	flex: none;
}

.ccs-accordion details[open] summary::after { transform: rotate(-135deg); }

/* Sadrzaj otvorene sekcije: manji razmak od naslova, veci prema rubu,
   da se linije sekcija ne stapaju s rubovima tablica unutra. */
.ccs-accordion details > *:not(summary) {
	padding-block: 0 var(--wp--preset--spacing--30);
	margin-block-start: calc(-1 * var(--wp--preset--spacing--10));
}

/* zadnji element sadrzaja ne dodaje jos jednu prazninu */
.ccs-accordion details > *:not(summary) > *:last-child {
	margin-block-end: 0;
}
.ccs-allergens { font-weight: 700; }

/* =====================================================================
   ZAGLAVLJE — prozirno preko heroja, krem nakon scrolla
   ===================================================================== */

/* FSE header zivi u <div class="wp-block-template-part"> koji je visok
   tocno koliko i sadrzaj. Sticky se lijepi samo unutar roditelja, pa je
   header nestajao nakon ~40px scrolla. display:contents mice omotac iz
   layouta i header dobiva cijelu stranicu kao okvir lijepljenja. */
.wp-site-blocks > .wp-block-template-part:has(> .ccs-header) {
	display: contents;
}

.ccs-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: transparent;
	border-block-end: 1px solid transparent;
	backdrop-filter: none;
	transition: background-color .25s var(--ccs-ease), border-color .25s var(--ccs-ease);
}

/* Root blockGap daje <main>-u i footer template-partu gornju marginu;
   uz hero proviri kao krem pukotina ispod top bara, a iznad podnozja
   kao krem pruga izmedu zlatne B2B sekcije i tamnog footera. Predlosci
   ionako nose vlastiti padding, pa razmake na spojevima drze sekcije. */
.wp-site-blocks > main,
.wp-block-template-part + main,
.wp-site-blocks > .wp-block-template-part,
main + .wp-block-template-part {
	margin-block-start: 0;
}

/* Isti blockGap curi i IZMEDU sekcija naslovnice (main je flow group):
   24px krem pruga na svakom spoju podloga. Sekcije ritam drze vlastitim
   paddingom (--ccs-section), pa je razmak medu njima uvijek 0. */
.ccs-front main.wp-block-group > * + * {
	margin-block-start: 0;
}

/* naslovnica: hero ide POD header da prozirnost ima na cemu stajati */
.ccs-front .ccs-header { margin-block-end: calc(-1 * var(--ccs-header-h)); }
.ccs-front .ccs-hero { padding-block-start: var(--ccs-header-h); }

/* Hero je bez (svijetli), pa i prozirni header na naslovnici nosi
   standardne kakao linkove - posebna krem varijanta vise ne treba. */
.ccs-front .ccs-header :is(.wp-block-site-title a, .ccs-icon-btn, .wp-block-navigation a, .wp-block-navigation button) {
	color: var(--wp--preset--color--cacao);
}

.ccs-front .ccs-header .wp-block-navigation a:hover { color: var(--wp--preset--color--copper); }

.ccs-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	border-block-end-color: var(--wp--preset--color--sand);
	backdrop-filter: blur(8px);
}

.ccs-header.is-scrolled :is(.wp-block-site-title a, .ccs-icon-btn, .wp-block-navigation a, .wp-block-navigation button) {
	color: var(--wp--preset--color--cacao);
}

.ccs-header.is-scrolled .wp-block-navigation a:hover { color: var(--wp--preset--color--copper); }

/* Mobilna ladica je position:fixed;inset:0, ali backdrop-filter na
   zaglavlju stvara containing block za fixed potomke — ladica je zato
   dobivala visinu zaglavlja (146px) umjesto cijelog ekrana, pa su se
   vidjela samo prva dva retka. Dok je ladica otvorena, efekt se gasi.
   (Na naslovnici je zaglavlje prozirno pa se kvar nije vidio.) */
.ccs-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: transparent;
}

/* na unutarnjim stranicama header je odmah papirnat - bijela ploha
   se odvaja od krem podloge stranice, krem se stapala u "rupu" */
body:not(.ccs-front) .ccs-header {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	border-block-end-color: var(--wp--preset--color--sand);
	backdrop-filter: blur(8px);
}

.ccs-actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }

.ccs-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--wp--preset--color--cacao);
	border-radius: var(--ccs-r-btn);
	position: relative;
	transition: color .15s var(--ccs-ease);
	text-decoration: none;
}

.ccs-icon-btn:hover { color: var(--wp--preset--color--copper); }

.ccs-cart-count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	block-size: 18px;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--cream);
	font-size: .7rem;
	font-weight: 700;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.ccs-cart-count.is-pump { animation: ccs-pump .45s var(--ccs-ease); }
	@keyframes ccs-pump { 40% { transform: scale(1.4); } }
}

/* announcement bar */
.ccs-announce {
	background: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--cream);
	text-align: center;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .04em;
	padding: .55rem var(--wp--preset--spacing--30);
}

/* =====================================================================
   LADICA KOSARICE + MOBILNI STICKY CTA
   ===================================================================== */

.ccs-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(420px, 92vw);
	z-index: 101;
	background: var(--wp--preset--color--cream);
	border-inline-start: var(--ccs-line);
	transform: translateX(100%);
	transition: transform .22s var(--ccs-ease);
	display: flex;
	flex-direction: column;
}

.ccs-drawer[data-open="true"] { transform: translateX(0); }

.ccs-drawer__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 14, .45);
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--ccs-ease);
}

.ccs-drawer__backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.ccs-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--wp--preset--spacing--30); border-block-end: var(--ccs-line); }
.ccs-drawer__head h2 { font-size: var(--wp--preset--font-size--lg); }
.ccs-drawer__body { flex: 1; overflow-y: auto; padding: var(--wp--preset--spacing--30); }
.ccs-drawer__empty { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); text-align: center; padding-block: var(--wp--preset--spacing--50); }
.ccs-drawer__foot { padding: var(--wp--preset--spacing--30); border-block-start: var(--ccs-line); }
.ccs-drawer__foot .ccs-btn, .ccs-drawer__foot .wp-block-button__link { inline-size: 100%; text-align: center; }

/* --- Ispis -----------------------------------------------------------
   Kupci najcesce printaju potvrdu narudzbe i pravne stranice: sajt-krom
   (zaglavlje, podnozje, ladice, banneri) ne ide na papir. */

@media print {
	.ccs-announce,
	.ccs-progress,
	.ccs-header,
	.ccs-footer,
	.ccs-drawer,
	.ccs-drawer__backdrop,
	.ccs-search,
	.ccs-search__backdrop,
	.ccs-consent,
	.ccs-sticky-atc,
	.ccs-mob-cta,
	.ccs-filters,
	.ccs-load-more,
	.woocommerce-pagination,
	.wp-block-template-part,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	main {
		padding: 0 !important;
	}

	a {
		color: #000 !important;
		text-decoration: none;
	}

	/* kartice potvrde narudzbe bez sjena, tanki sivi rubovi */
	.wc-block-order-confirmation-summary-list,
	.wc-block-order-confirmation-address-wrapper address,
	.woocommerce .cart_totals,
	.woocommerce-checkout #order_review {
		box-shadow: none !important;
		border: 1px solid #bbb !important;
		background: #fff !important;
	}

	/* plus/krizic oznake akordeona nemaju smisla na papiru */
	details > summary::after {
		content: none !important;
	}
}

/* --- Putanja (breadcrumbs) ------------------------------------------ */

.ccs-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--30);
}

.ccs-crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ccs-crumbs a:hover {
	color: var(--ccs-copper-ink, #956f2d);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ccs-crumbs__sep {
	opacity: .5;
}

.ccs-crumbs [aria-current="page"] {
	color: var(--wp--preset--color--cacao);
	font-weight: 500;
}

/* --- Kontakt stranica ----------------------------------------------- */

.ccs-contact-lede { margin-block-end: var(--wp--preset--spacing--50); }

.ccs-contact-grid { gap: var(--wp--preset--spacing--50); }

/* obrazac */
.ccs-contact-form .ccs-form-row {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-block-end: var(--wp--preset--spacing--20);
}

.ccs-contact-form label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .02em;
}

.ccs-contact-form input,
.ccs-contact-form textarea,
.ccs-contact-form select {
	inline-size: 100%;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--cacao);
	background-color: var(--wp--preset--color--paper);
	border: var(--ccs-line);
	border-radius: 10px;
	padding: .8rem 1rem;
	transition: border-color var(--ccs-dur) var(--ccs-ease);
}

.ccs-contact-form input:focus,
.ccs-contact-form textarea:focus,
.ccs-contact-form select:focus {
	border-color: var(--wp--preset--color--copper);
	outline: none;
}

.ccs-contact-form textarea { resize: vertical; min-block-size: 8rem; }

.ccs-contact-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232A1A12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right .85rem center;
	background-size: 14px;
	padding-inline-end: 2.4rem;
	cursor: pointer;
}

.ccs-contact-form .ccs-form-privacy {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-block: var(--wp--preset--spacing--20);
}

/* honeypot - skriven ljudima, ne i botovima */
.ccs-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ccs-form-note {
	padding: .9rem 1.1rem;
	border-radius: var(--ccs-r-card);
	border: var(--ccs-line);
	background: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--sm);
	margin-block-end: var(--wp--preset--spacing--30);
}

.ccs-form-note--ok { border-inline-start: 3px solid var(--wp--preset--color--sage); }
.ccs-form-note--err { border-inline-start: 3px solid var(--wp--preset--color--red); }

/* =====================================================================
   KOLAČIĆI — tablice na /kolacici/
   ===================================================================== */

.ccs-cookies + .ccs-cookies { margin-block-start: var(--wp--preset--spacing--40); }

.ccs-cookies > h2 { margin-block-end: var(--wp--preset--spacing--10); }

.ccs-cookies > p {
	color: var(--wp--preset--color--muted);
	max-inline-size: 62ch;
}

/* široka tablica se pomiče unutar vlastitog okvira, stranica ostaje mirna */
.ccs-cookies__scroll {
	overflow-x: auto;
	margin-block-start: var(--wp--preset--spacing--20);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	background: var(--wp--preset--color--paper);
}

.ccs-cookies__table {
	inline-size: 100%;
	min-inline-size: 36rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--xs);
}

.ccs-cookies__table th,
.ccs-cookies__table td {
	text-align: start;
	padding: .75rem 1rem;
	vertical-align: top;
	border-block-end: var(--ccs-line);
}

.ccs-cookies__table thead th {
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--cream);
	white-space: nowrap;
}

.ccs-cookies__table tbody tr:last-child :is(th, td) { border-block-end: 0; }

.ccs-cookies__table code {
	font-size: .95em;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--cacao);
}

.ccs-cookies__table td:nth-child(2) { min-inline-size: 16rem; }

.ccs-cookies__choice {
	margin-block-start: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	background: var(--wp--preset--color--paper);
}

.ccs-cookies__status {
	font-weight: 600;
	color: var(--wp--preset--color--cacao);
}

.ccs-cookies__note {
	font-size: var(--wp--preset--font-size--xs);
	margin-block-end: 0;
}

/* --- Contact Form 7 -------------------------------------------------
   Forma nosi klasu .ccs-contact-form (filter u inc/contact-form.php) pa
   polja nasljeduju stil odozgo. Ovdje su samo CF7-ove dodatne omotnice,
   poruke o gresci i checkbox privole. */

.ccs-contact-form .wpcf7-form-control-wrap { display: block; }

/* CF7 sam ubacuje <br> i prazne <p>-ove kad autop nije iskljucen */
.ccs-contact-form .ccs-form-row br { display: none; }

.ccs-contact-form .wpcf7-not-valid { border-color: var(--wp--preset--color--red); }

.ccs-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: .35rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--wp--preset--color--red);
}

/* zbirna poruka iznad/ispod obrasca - isti jezik kao .ccs-form-note */
.ccs-contact-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: .9rem 1.1rem;
	border: var(--ccs-line);
	border-inline-start: 3px solid var(--wp--preset--color--muted);
	border-radius: var(--ccs-r-card);
	background: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--sm);
}

.ccs-contact-form.sent .wpcf7-response-output { border-inline-start-color: var(--wp--preset--color--sage); }

.ccs-contact-form.invalid .wpcf7-response-output,
.ccs-contact-form.failed .wpcf7-response-output,
.ccs-contact-form.spam .wpcf7-response-output { border-inline-start-color: var(--wp--preset--color--red); }

/* privola: kvacica lijevo, tekst do nje, a ne stupac kao ostala polja */
.ccs-contact-form .ccs-form-privacy .wpcf7-list-item { margin: 0; }

.ccs-contact-form .ccs-form-privacy label {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.ccs-contact-form .ccs-form-privacy input[type="checkbox"] {
	inline-size: 1.05rem;
	flex: none;
	block-size: 1.05rem;
	margin-block-start: .15rem;
	padding: 0;
	accent-color: var(--wp--preset--color--copper);
}

.ccs-contact-form .ccs-form-send { display: flex; align-items: center; gap: .75rem; }

.ccs-contact-form .wpcf7-submit { inline-size: auto; cursor: pointer; }

.ccs-contact-form .wpcf7-spinner { margin: 0; }

/* kartica s podacima */
.ccs-contact-card {
	background: var(--wp--preset--color--paper);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	padding: var(--wp--preset--spacing--30);
}

.ccs-contact-card h2 {
	font-size: var(--wp--preset--font-size--lg);
	margin-block: 0 var(--wp--preset--spacing--20);
}

.ccs-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.ccs-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
}

.ccs-contact-list .ccs-icon {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
	margin-block-start: .15rem;
	color: var(--wp--preset--color--copper);
}

.ccs-contact-list a {
	color: var(--ccs-copper-ink, #956f2d);
	text-decoration: none;
}

.ccs-contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ccs-contact-social {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: var(--ccs-line);
}

.ccs-contact-social a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem 1.1rem;
	border: var(--ccs-line);
	border-radius: var(--ccs-r-btn);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--cacao);
	text-decoration: none;
	transition: border-color .15s var(--ccs-ease), color .15s var(--ccs-ease);
}

.ccs-contact-social a:hover {
	border-color: var(--wp--preset--color--copper);
	color: var(--ccs-copper-ink, #956f2d);
	text-decoration: none;
}

/* karta */
.ccs-contact-map {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ccs-contact-map h2 {
	font-size: var(--wp--preset--font-size--xl);
	margin-block-end: var(--wp--preset--spacing--30);
}

.ccs-contact-map iframe {
	inline-size: 100%;
	block-size: clamp(280px, 38vw, 440px);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	display: block;
}

.ccs-contact-map__link { margin-block-start: var(--wp--preset--spacing--20); }

@media (max-width: 900px) {
	.ccs-contact-grid { flex-direction: column; }
	.ccs-contact-grid .wp-block-column { flex-basis: 100% !important; }
}

/* --- Stranica "Naša priča" ------------------------------------------ */

.ccs-about-lede {
	margin-block-end: var(--wp--preset--spacing--40);
}

.ccs-about-hero img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ccs-about-split,
.ccs-about-award {
	margin-block: var(--wp--preset--spacing--60);
}

.ccs-about-award {
	padding-block: var(--wp--preset--spacing--50);
	border-block: var(--ccs-line);
}

.ccs-about-split img,
.ccs-about-award img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ccs-about-split p,
.ccs-about-award p {
	color: var(--wp--preset--color--muted);
	max-inline-size: 48ch;
}

.ccs-about-split .ccs-btn-text,
.ccs-about-award .ccs-btn-text {
	color: var(--ccs-copper-ink, #956f2d);
}

.ccs-about-cta {
	margin-block-start: var(--wp--preset--spacing--60);
	text-align: center;
}

.ccs-about-cta p {
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--30);
}

@media (max-width: 900px) {
	.ccs-about-split .wp-block-columns,
	.ccs-about-award .wp-block-columns {
		flex-direction: column;
	}
	.ccs-about-split .wp-block-column,
	.ccs-about-award .wp-block-column {
		flex-basis: 100% !important;
	}
	/* na uskom ekranu slika ide ISPOD teksta u sekciji nagrade */
	.ccs-about-award .wp-block-column:last-child {
		order: 2;
	}
}

/* --- Blog arhiva ---------------------------------------------------- */

.ccs-blog-head {
	margin-block-end: var(--wp--preset--spacing--50);
}

.ccs-blog-head .ccs-lede {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* istaknuti zapis */
.ccs-blog-feature {
	padding-block-end: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
	border-block-end: var(--ccs-line);
}

.ccs-blog-feature img {
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

.ccs-blog-feature .wp-block-post-title {
	margin-block: .35rem .75rem;
}

.ccs-blog-feature .wp-block-post-title a,
.ccs-blog-grid .wp-block-post-title a {
	color: var(--wp--preset--color--cacao);
	text-decoration: none;
}

.ccs-blog-feature .wp-block-post-title a:hover,
.ccs-blog-grid .wp-block-post-title a:hover {
	color: var(--ccs-copper-ink, #956f2d);
	text-decoration: none;
}

.ccs-blog-feature .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--muted);
	max-inline-size: 46ch;
}

.ccs-blog-feature .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-block-start: .6rem;
	color: var(--ccs-copper-ink, #956f2d);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.ccs-blog-feature .wp-block-post-excerpt__more-link::after {
	content: " →";
	display: inline-block;
	transition: transform var(--ccs-dur) var(--ccs-ease);
}

.ccs-blog-feature .wp-block-post-excerpt__more-link:hover::after {
	transform: translateX(4px);
}

/* mreza ostalih zapisa */
.ccs-blog-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--40) var(--ccs-gap);
}

.ccs-blog-grid li {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.ccs-blog-grid img {
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

.ccs-blog-grid .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

/* zapis bez istaknute slike ne smije ostaviti rupu */
.ccs-blog-grid .wp-block-post-featured-image:empty,
.ccs-blog-feature .wp-block-post-featured-image:empty {
	display: none;
}

@media (max-width: 900px) {
	.ccs-blog-feature .wp-block-columns {
		flex-direction: column;
	}
	.ccs-blog-feature .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- "Jos s bloga": carousel ---------------------------------------- */

.ccs-post-carousel {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--ccs-line);
}

.ccs-post-carousel .wp-block-post-template {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(80% - var(--ccs-gap) * 0.5);
	gap: var(--ccs-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: .75rem;
	margin: 0;
	list-style: none;
}

@media (min-width: 601px) {
	.ccs-post-carousel .wp-block-post-template {
		grid-auto-columns: calc(50% - var(--ccs-gap) * 0.5);
	}
}

@media (min-width: 901px) {
	.ccs-post-carousel .wp-block-post-template {
		grid-auto-columns: calc(33.333% - var(--ccs-gap) * 0.67);
	}
}

.ccs-post-carousel li {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.ccs-post-carousel img {
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

.ccs-post-carousel .wp-block-post-title a {
	color: var(--wp--preset--color--cacao);
	text-decoration: none;
}

.ccs-post-carousel .wp-block-post-title a:hover {
	color: var(--ccs-copper-ink, #956f2d);
}

/* --- Blog: prev/next navigacija ------------------------------------- */

.ccs-post-nav .wp-block-post-navigation-link {
	max-inline-size: 42%;
	font-size: var(--wp--preset--font-size--sm);
}

/* labela ("Prethodni zapis") iznad naslova, tiho */
.ccs-post-nav .wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-block-end: .3rem;
}

.ccs-post-nav .wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--wp--preset--color--cacao);
	text-decoration: none;
}

.ccs-post-nav .wp-block-post-navigation-link a:hover {
	color: var(--ccs-copper-ink, #956f2d);
	text-decoration: none;
}

.ccs-post-nav .post-navigation-link-next {
	text-align: end;
	margin-inline-start: auto;
}

.ccs-post-nav__back {
	text-align: center;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --- 404: brze staze ------------------------------------------------ */

.ccs-404-links {
	text-align: center;
	margin-block-start: var(--wp--preset--spacing--40);
}

.ccs-404-links__label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-block-end: .8rem;
}

.ccs-404-links nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem;
}

.ccs-404-links a {
	display: inline-block;
	padding: .45rem 1.1rem;
	border: var(--ccs-line);
	border-radius: var(--ccs-r-btn);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--cacao);
	text-decoration: none;
	transition: border-color .15s var(--ccs-ease), color .15s var(--ccs-ease), background-color .15s var(--ccs-ease);
}

.ccs-404-links a:hover {
	border-color: var(--wp--preset--color--copper);
	color: var(--ccs-copper-ink, #956f2d);
	background: var(--wp--preset--color--paper);
	text-decoration: none;
}

/* --- Privola za kolacice -------------------------------------------- */

.ccs-consent {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--30);
	inset-inline-start: var(--wp--preset--spacing--30);
	z-index: 95;
	inline-size: min(420px, calc(100vw - 2 * var(--wp--preset--spacing--30)));
	background: var(--wp--preset--color--paper);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	box-shadow: 0 18px 48px rgba(20, 16, 14, .16);
	padding: var(--wp--preset--spacing--30);
}

.ccs-consent p {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--cacao);
}

.ccs-consent p a {
	color: var(--ccs-copper-ink, #956f2d);
	white-space: nowrap;
}

.ccs-consent__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
}

.ccs-consent__actions .wp-block-button__link {
	padding-block: .7rem;
	cursor: pointer;
	border: 0;
}

.ccs-consent__necessary {
	background: none;
	border: 0;
	padding: .7rem .25rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ccs-consent__necessary:hover {
	color: var(--wp--preset--color--cacao);
}

@media (max-width: 480px) {
	.ccs-consent {
		inset-inline: var(--wp--preset--spacing--20);
		inset-block-end: var(--wp--preset--spacing--20);
		inline-size: auto;
	}
}

/* --- Modal trazilica ------------------------------------------------ */

.ccs-search__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 14, .45);
	backdrop-filter: blur(3px);
	z-index: 110;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--ccs-ease);
}

.ccs-search__backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.ccs-search {
	position: fixed;
	inset-inline: 0;
	inset-block-start: clamp(1rem, 10vh, 6rem);
	margin-inline: auto;
	inline-size: min(680px, calc(100vw - 2rem));
	z-index: 111;
	background: var(--wp--preset--color--paper);
	border: var(--ccs-line);
	border-radius: var(--ccs-r-card);
	box-shadow: 0 24px 64px rgba(20, 16, 14, .22);
	padding: var(--wp--preset--spacing--30);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s var(--ccs-ease), transform .2s var(--ccs-ease), visibility .2s;
}

.ccs-search[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

body.ccs-search-open { overflow: hidden; }

.ccs-search__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--20);
}

.ccs-search__head h2 {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0;
}

.ccs-search__field {
	display: flex;
	align-items: center;
	gap: .65rem;
	border: var(--ccs-line);
	border-radius: var(--ccs-r-btn);
	padding: .35rem .5rem .35rem 1.1rem;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--muted);
	transition: border-color var(--ccs-dur) var(--ccs-ease);
}

.ccs-search__field:focus-within {
	border-color: var(--wp--preset--color--copper);
}

.ccs-search__field input {
	flex: 1;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--cacao);
	padding: .55rem 0;
	outline: none;
	min-inline-size: 0;
}

.ccs-search__field input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ccs-search__cats {
	border: 0;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ccs-search__cats legend {
	inline-size: 100%;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-block-end: .35rem;
	padding: 0;
}

.ccs-search__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ccs-search__pill span {
	display: inline-block;
	padding: .45rem 1rem;
	border: var(--ccs-line);
	border-radius: var(--ccs-r-btn);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--cacao);
	cursor: pointer;
	transition: background-color .12s var(--ccs-ease), border-color .12s var(--ccs-ease), color .12s var(--ccs-ease);
}

.ccs-search__pill:hover span {
	border-color: var(--wp--preset--color--copper);
	color: var(--wp--preset--color--copper);
}

.ccs-search__pill input:checked + span {
	background: var(--wp--preset--color--cacao);
	border-color: var(--wp--preset--color--cacao);
	color: var(--wp--preset--color--cream);
}

.ccs-search__pill input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--copper);
	outline-offset: 2px;
}

.ccs-search__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
}

.ccs-search__sale {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	position: relative;
}

.ccs-search__sale input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ccs-search__sale input:checked ~ .ccs-filters__box {
	background: var(--wp--preset--color--cacao);
	border-color: var(--wp--preset--color--cacao);
}

.ccs-search__sale input:checked ~ .ccs-filters__box::before {
	content: "";
	inline-size: .55rem;
	block-size: .3rem;
	border-inline-start: 2px solid var(--wp--preset--color--cream);
	border-block-end: 2px solid var(--wp--preset--color--cream);
	transform: rotate(-45deg) translateY(-1px);
}

.ccs-search__sale input:focus-visible ~ .ccs-filters__box {
	outline: 2px solid var(--wp--preset--color--copper);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.ccs-search {
		inset-block-start: .75rem;
		max-block-size: calc(100svh - 1.5rem);
		overflow-y: auto;
	}
	.ccs-search__foot {
		flex-direction: column;
		align-items: stretch;
	}
	.ccs-search__foot .wp-block-button__link {
		text-align: center;
	}
}

.ccs-mob-cta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: .7rem var(--wp--preset--spacing--30);
	padding-block-end: calc(.7rem + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--wp--preset--color--cream) 96%, transparent);
	backdrop-filter: blur(8px);
	border-block-start: var(--ccs-line);
	transform: translateY(105%);
	transition: transform .25s var(--ccs-ease);
}

.ccs-mob-cta strong { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: var(--wp--preset--font-size--md); }

@media (max-width: 900px) {
	.ccs-mob-cta { display: flex; }
	.ccs-mob-cta.is-show { transform: none; }
	body.ccs-drawer-open .ccs-mob-cta { transform: translateY(105%); }
}

/* --- Unutarnji kontejner sekcija -----------------------------------
   Sekcije naslovnice su vlastiti HTML unutar wp:html, pa ih WP-ov
   layout engine ne obraduje: klasa .alignwide na njima nema ucinka.
   Sirinu zato drzi ovo pravilo.
   ------------------------------------------------------------------- */

.ccs-hero > .wp-block-group,
.ccs-section > .wp-block-group,
.ccs-alt > .wp-block-group,
.ccs-wrap {
	max-inline-size: var(--ccs-max);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	inline-size: 100%;
}

/* (FAQ je od redizajna dvokolonski .ccs-faq-grid unutar alignwide
   grupe - stari 760px cap vise ne treba) */

/* Prazan badge kosarice ne smije crtati crveni krug. */
.ccs-cart-count:empty { display: none; }

/* --- Zaglavlje: naslov i visina ------------------------------------
   Naslov se lomio u dva retka i time dizao zaglavlje s 74 na 96px,
   pa je negativna margina bila prekratka i ostavljala krem procjep
   iznad heroja. Naslov sada ne lomi, a stvarnu visinu mjeri JS i
   upisuje je u --ccs-header-h.
   ------------------------------------------------------------------- */

.ccs-header .wp-block-site-title { white-space: nowrap; margin: 0; }

.ccs-header .wp-block-site-title a {
	text-decoration: none;
	display: inline-block;
	transition: color var(--ccs-dur) var(--ccs-ease), transform var(--ccs-dur) var(--ccs-ease);
}

/* logo na hover: bakar + jedva primjetan pomak (isti jezik kao kartice) */
.ccs-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--copper) !important;
	transform: translateY(-1px);
	text-decoration: none;
}

.ccs-foot-logo {
	transition: color var(--ccs-dur) var(--ccs-ease);
}

.ccs-foot-logo:hover {
	color: var(--wp--preset--color--gold) !important;
}

.ccs-foot-logo:hover small {
	color: var(--wp--preset--color--cream);
}

/* Navigacija ne prati uvecanu tekstualnu skalu (sm = 18.75px) - sa 6
   stavki bi zaglavlje trazilo preko 1200px. 16px je citljivo, a menu
   stane od 1024px navise. */
.ccs-header .wp-block-navigation { flex: 0 1 auto; min-inline-size: 0; font-size: 1rem; }
.ccs-header .wp-block-navigation__container { flex-wrap: nowrap; }

@media (max-width: 1100px) {
	.ccs-header .wp-block-site-title { font-size: 1rem; }
}

/* 375px: naslov (nowrap) + hamburger + 3 ikone ne stanu s punim
   razmacima - ikone se stisnu, naslov malo smanji */
/* Mobilno zaglavlje: naziv trgovine (160px) + hamburger + tri ikone
   nisu stali u 327px reda — zadnja ikona je izlazila iz okvira. Zato
   klasičan mobilni raspored: hamburger lijevo, naziv u sredini,
   košarica desno. Pretraga i račun sele u ladicu izbornika. */
@media (max-width: 600px) {
	.ccs-actions { gap: 0; }

	.ccs-header .wp-block-group.alignwide { gap: .25rem; }

	.ccs-header nav.wp-block-navigation { order: 1; flex: 0 0 auto; }

	.ccs-header .wp-block-site-title {
		order: 2;
		flex: 1 1 auto;
		text-align: center;
		font-size: 1rem;
	}

	.ccs-actions { order: 3; flex: 0 0 auto; }

	.ccs-icon-btn--search,
	.ccs-icon-btn--account { display: none; }

	/* traka obavijesti u jednom retku umjesto dva */
	.ccs-announce__sub { display: none; }
}

/* WP-ov prag za hamburger je 600px, ali naslov + 5 stavki + 3 ikone
   realno stanu tek od ~1024px - izmedu se navigacija prelijevala PREKO
   naslova i ikona. U tom rasponu vracamo hamburger i overlay. Selektori
   moraju nadjacati WP-ova inline pravila (nav.wp-block-navigation). */
/* Prag je 1120px: sa 6 stavki u 16px navigacija ispod toga vise ne
   stane uz naslov i ikone, pa se lomi u dva reda. */
@media (min-width: 600px) and (max-width: 1119px) {
	.ccs-header nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.ccs-header nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* sticky header ne smije kliznuti pod fiksni admin bar prijavljenog
   urednika (32px, na uskim ekranima 46px) */
body.admin-bar .ccs-header {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

/* --- Aktivna stavka navigacije -------------------------------------
   Tanki potez ispod aktivne stavke; boja prati stanje zaglavlja. */

.ccs-header .wp-block-navigation .current-menu-item > a,
.ccs-header .wp-block-navigation a[aria-current="page"] {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 7px;
	text-decoration-color: var(--wp--preset--color--copper);
}

/* (bez hero: aktivna stavka i na naslovnici nosi bakreni potez,
   posebno zlatno pravilo za prozirni header vise ne treba) */

/* roditelj aktivne podstavke: samo tezina, bez poteza - tiho */
.ccs-header .wp-block-navigation .current-menu-ancestor > a {
	font-weight: 600;
}

/* --- Dropdown podizbornika -----------------------------------------
   WP default je bijela ploha bez radiusa i sjene - ovdje dobiva jezik
   teme: papirnata kartica, tihi rub, mekana sjena, stavke kao pilule.
   Mehaniku otvaranja (visibility/opacity na hover i focus-within) drzi
   WP - tema dodaje samo izgled i klizni ulaz. -------------------------- */

.ccs-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--cacao);
	border: var(--ccs-line);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(20, 16, 14, .14);
	padding: .5rem;
	min-inline-size: 280px;
	margin-block-start: .55rem;
	transform: translateY(6px);
	/* visibility namjerno NIJE u tranziciji: dok traje, panel ostaje u
	   starom stanju, pa se otvaranje na klik zna "zaglaviti" zatvoreno.
	   Opacity i pomak nose animaciju, vidljivost se prebacuje odmah. */
	transition:
		opacity .18s var(--ccs-ease),
		transform .18s var(--ccs-ease);
}

/* razmak od stavke ne smije stvoriti "rupu" za mis - nevidljivi most */
.ccs-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -.6rem;
	block-size: .6rem;
}

.ccs-header .wp-block-navigation .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
	transform: translateY(0);
}

/* Klik na strelicu postavlja aria-expanded="true", ali panel je ostajao
   skriven — WP-ovo pravilo koje na to reagira ovdje ne dolazi do izrazaja.
   Bez ovoga se na dodirnim uredajima (gdje hovera nema) podizbornik NIKAD
   ne otvori, pa su vidljive samo stavke prve razine. */
.ccs-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	block-size: auto;
	inline-size: auto;
	min-inline-size: 280px;
	overflow: visible;
	transform: translateY(0);
}

/* linkovi u panelu su UVIJEK kakao, i kad je header prozircan preko
   heroja (pravilo za krem linkove inace pobjeduje i tekst nestane) */
.ccs-front .ccs-header .wp-block-navigation .wp-block-navigation__submenu-container a,
.ccs-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	color: var(--wp--preset--color--cacao);
	border-radius: 9px;
	font-size: var(--wp--preset--font-size--sm);
	transition: background-color .12s var(--ccs-ease), color .12s var(--ccs-ease);
}

/* padding treba 5 klasa - WP-ov selektor za stavke panela ima 4 i
   ispisuje se nakon base.css */
.ccs-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > a {
	padding: .6rem 1rem;
}

.ccs-front .ccs-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.ccs-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--copper);
	text-decoration: none;
}

.ccs-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > a {
	color: var(--wp--preset--color--copper);
	text-decoration: none;
	font-weight: 600;
}

/* --- Mobilni overlay izbornik --------------------------------------
   Krem ploha je vec postavljena; ovdje ritam i tipografija: glavne
   stavke u display pismu, podstavke tise, sve dovoljno velike za prst. */

.ccs-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--ccs-header-h, 74px) + .5rem) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	overflow: hidden auto;
}

/* vodeni zig kao u podnozju - isti potez, ista tisina */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "Choco";
	position: fixed;
	inset-block-end: -.18em;
	inset-inline-end: -.06em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(7rem, 32vw, 13rem);
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1;
	color: rgba(209, 170, 103, .08);
	pointer-events: none;
	user-select: none;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: var(--wp--preset--spacing--30);
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.1;
	padding-block: .3rem;
}

/* zlatni redni broj prije svake glavne stavke - editorial potpis */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
	counter-reset: ccsnav;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	counter-increment: ccsnav;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a::before {
	content: counter(ccsnav, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--wp--preset--color--gold);
	margin-inline-end: .8rem;
	vertical-align: .55em;
}

/* postupni ulaz stavki - jedna za drugom, odozdo */
@media (prefers-reduced-motion: no-preference) {
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation: ccs-nav-in .5s var(--ccs-ease) backwards;
	}
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: .05s; }
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: .11s; }
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: .17s; }
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: .23s; }
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: .29s; }
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: .35s; }

	@keyframes ccs-nav-in {
		from { opacity: 0; transform: translateY(16px); }
	}
}

/* u overlayu je podizbornik staticna lista - kartica s desktopa
   (sjena, rub, pomak) ovdje se ponistava; zlatni sav slijeva */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	min-inline-size: 0;
	margin: .35rem 0 0 .15rem;
	transform: none;
	padding: 0 0 .35rem 1rem;
	gap: .3rem;
	/* !important: core u overlayu postavlja border-color currentColor */
	border-inline-start: 1px solid rgba(209, 170, 103, .35) !important;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
	content: none;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: var(--wp--preset--font-size--md);
	color: rgba(250, 246, 240, .68) !important;
	padding-block: .25rem;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover,
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .current-menu-item > a {
	color: var(--wp--preset--color--gold) !important;
}

/* --- Zbijanje ladice: 23 stavke moraju stati bez skrolanja ----------
   Editorial mjerilo (xxl naslovi, veliki razmaci) trazilo je 1600px
   visine. Ovdje se sve suzava, a podizbornici idu u dva stupca — to
   sami po sebi prepolove visinu popisa. Ritam i zlatni brojevi ostaju. */

/* ladica pokriva i zaglavlje, pa gornji odmak ne mora biti visok kao
   ono — dovoljno je da gumb za zatvaranje ima zraka */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-block: 3rem .4rem;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: .35rem;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .2rem;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
	font-size: clamp(1.15rem, 5.4vw, 1.4rem);
	padding-block: .06rem;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a::before {
	margin-inline-end: .55rem;
	vertical-align: .35em;
}

/* Podstavke jedna ispod druge — u dva stupca su se lomile neravnomjerno
   i popis je izgledao neuredno. Selektor mora biti dublji od jezgrinog
   pravila za overlay (…responsive-container-content .has-child …). */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: .2rem 0 0 .1rem;
	padding: 0 0 .2rem .75rem;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
	flex: 0 0 auto;
	inline-size: 100%;
}

/* Cijeli popis lijevo poravnat. Navigacija je u zaglavlju centrirana
   (items-justified-center), pa je u ladici svaka stavka "plivala" prema
   svojoj sirini — zato se selektor mora hvatati i za tu klasu. */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-center {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: start;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item {
	align-self: flex-start;
	inline-size: 100%;
}

/* Jezgra centrira i sam sadrzaj ladice (align-items:center) i svaku
   stavku, pa je lijevi rub "plivao" po sirini teksta. Oboje se gasi. */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	inline-size: 100%;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: flex-start;
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a {
	justify-content: flex-start;
	text-align: start;
}

/* Niski ekrani: kontakti iz ladice odlaze (isti su u podnozju stranice
   i na Kontaktu), a naslovi skupina se jos malo stisnu — tako i na
   telefonu od ~650px cijeli izbornik stane bez skrolanja. */
@media (max-height: 800px) {
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .ccs-mobnav-foot {
		display: none;
	}

	.ccs-header .wp-block-navigation__responsive-container.is-menu-open {
		padding-block-start: 2.5rem;
	}
}

@media (max-height: 700px) {
	.ccs-header .wp-block-navigation__responsive-container.is-menu-open {
		padding-block-start: 2.2rem;
	}

	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
		font-size: .95rem;
		padding-block: 0;
	}

	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
		padding-inline-start: .6rem;
	}

	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: .05rem;
	}

	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container a {
		font-size: .78rem;
		line-height: 1.2;
		padding: .05rem 0;
	}

	.ccs-header .wp-block-navigation__responsive-container.is-menu-open .ccs-mobnav-top {
		margin-block-end: .4rem;
		padding-block-end: .3rem;
	}

	.ccs-mobnav-top a { padding-block: .15rem; }
}

/* Jezgra podstavkama daje padding .6em 1em — 36px po retku i sirok
   razmak. Selektor mora ici preko …container-content da nadjaca njeno
   pravilo, i mora postaviti cijeli padding, ne samo okomiti. */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container a {
	font-size: .88rem;
	line-height: 1.3;
	padding: .22rem 0;
}


/* aktivna glavna stavka: zlatni potez */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.ccs-header .wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 8px;
	text-decoration-color: var(--wp--preset--color--gold);
}

/* kontakt red na dnu overlaya - gradi ga main.js. Isti kontejner na
   desktopu prikazuje inline navigaciju, pa je red vidljiv ISKLJUCIVO
   u otvorenom overlayu - inace raste u zaglavlje. */
/* Pretraga i račun na vrhu ladice — ono što je maknuto iz zaglavlja */
.ccs-mobnav-top { display: none; }

/* jedan uz drugi, ne jedan pod drugim — dva retka manje */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .ccs-mobnav-top {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 1.35rem;
	margin-block-end: .6rem;
	padding-block-end: .45rem;
	border-block-end: var(--ccs-line);
}

.ccs-mobnav-top a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-block: .25rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-decoration: none;
	color: inherit;
}

.ccs-mobnav-top .ccs-icon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	flex: none;
}

.ccs-mobnav-foot {
	display: none;
}

/* kontakti u jednom redu ispod naziva — cetiri retka postaju dva */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .ccs-mobnav-foot {
	margin-block-start: auto;
	padding-block-start: .8rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .9rem;
	font-size: var(--wp--preset--font-size--xs);
}

.ccs-mobnav-foot__label {
	flex: 1 0 100%;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.ccs-mobnav-foot a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: rgba(250, 246, 240, .85) !important;
	text-decoration: none;
}

/* mora nadjacati opce is-menu-open pravilo za linkove (0,3,1) */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open .ccs-mobnav-foot a:hover {
	color: var(--wp--preset--color--gold) !important;
}

.ccs-mobnav-foot .ccs-icon {
	inline-size: 16px;
	block-size: 16px;
}

/* =====================================================================
   KAKO NASTAJE — tri koraka  (prototip 8)
   ===================================================================== */

.ccs-proc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
	margin: 0;
}

.ccs-proc-step {
	position: relative;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--wp--preset--color--sand);
}

/* crvena crtica preko sivog ruba - identitetski naglasak */
.ccs-proc-step::before {
	content: "";
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: 0;
	inline-size: 3rem;
	block-size: 2px;
	background: var(--wp--preset--color--red);
}

.ccs-proc-num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xxl);
	color: var(--wp--preset--color--copper);
	line-height: 1;
	margin-block-end: var(--wp--preset--spacing--20);
}

.ccs-proc-step h3 { font-size: var(--wp--preset--font-size--lg); margin-block-end: var(--wp--preset--spacing--10); }
.ccs-proc-step p { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }

@media (max-width: 800px) {
	.ccs-proc-grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
}

/* =====================================================================
   CHOCO PROJEKTI — pravokutne kartice na tamnom  (prototip 8)
   ===================================================================== */

.ccs-proj-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ccs-gap);
}

.ccs-proj-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #33200F;
	border: 1px solid rgba(250, 246, 240, .14);
	border-radius: var(--ccs-r-card);
	overflow: hidden;
	transition: transform var(--ccs-dur) var(--ccs-ease), border-color var(--ccs-dur) var(--ccs-ease);
}

.ccs-proj-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--gold); }

.ccs-proj-card__img {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: linear-gradient(140deg, #5A3B26, #2A1A12 75%);
}

.ccs-proj-card__img img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: filter .3s var(--ccs-ease);
}

.ccs-proj-card:hover .ccs-proj-card__img img { filter: brightness(.85); }

.ccs-proj-card__body {
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}

.ccs-proj-card__body h3 { color: var(--wp--preset--color--cream); font-size: var(--wp--preset--font-size--lg); }
.ccs-proj-card__body p { color: rgba(250, 246, 240, .72); font-size: var(--wp--preset--font-size--sm); }
.ccs-proj-card__body .ccs-tag { margin-block-start: auto; }

@media (max-width: 1000px) { .ccs-proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ccs-proj-grid { grid-template-columns: 1fr; } }

/* obrisani gumb na tamnoj podlozi */
.is-ccs-outline {
	background: transparent !important;
	color: var(--wp--preset--color--cream) !important;
	border: 1px solid rgba(250, 246, 240, .45);
}

.is-ccs-outline:hover {
	color: var(--wp--preset--color--gold) !important;
	border-color: var(--wp--preset--color--gold);
}

/* =====================================================================
   HIIIBRAND NAGRADA — vlastita sekcija  (prototip 8)
   ===================================================================== */

.ccs-award {
	background: #F3EBDF;
	border-block: var(--ccs-line);
	padding-block: var(--ccs-section);
}

.ccs-award__wrap {
	max-inline-size: 640px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding-inline: var(--wp--preset--spacing--30);
}

.ccs-award__medal { color: var(--wp--preset--color--copper); margin-block-end: var(--wp--preset--spacing--20); }
.ccs-award h2 { font-size: var(--wp--preset--font-size--xl); }
.ccs-award__wrap > p { font-size: var(--wp--preset--font-size--sm); }

.ccs-award__stats {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	justify-content: center;
}

.ccs-award__stats b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1;
	color: var(--wp--preset--color--copper);
}

.ccs-award__stats span { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); letter-spacing: .04em; }

@media (max-width: 560px) { .ccs-award__stats { gap: var(--wp--preset--spacing--30); } }

/* =====================================================================
   KONTRAST — ciljani ispravci prema WCAG AA
   Izmjereno u pregledniku, ne procijenjeno.
   ===================================================================== */

:root {
	/* Bakar #956F2D na krem daje 4.25:1 — dovoljno za UI i tekst >=18px,
	   premalo za sitni tekst (treba 4.5). Smjernice v2.0 to same navode u
	   tablici kontrasta, ali bakar koriste i za linkove koji su 15px.
	   Ova tamnija varijanta sluzi iskljucivo sitnom tekstu: 4.86:1. */
	--ccs-copper-ink: #8A6629;

	/* Prigusena #7A6B60 prolazi na krem (4.76) i papir (5.12), ali pada
	   na pijesku sekcije nagrade (4.33). Tamnija varijanta: 5.34:1. */
	--ccs-muted-ink: #6C5D53;
}

/* sitni tekstualni linkovi */
.ccs-btn-text,
.ccs-faq details > p a,
.ccs-craft__credit a,
p a,
li a {
	color: var(--ccs-copper-ink);
}

/* na tamnim podlogama vrijedi zlatna, ne bakar
   (bez hero je svijetli - linkovi u njemu ostaju bakreni) */
.ccs-dark :is(.ccs-btn-text, p a, li a) {
	color: var(--wp--preset--color--gold);
}


/* sekcija nagrade stoji na pijesku */
.ccs-award p,
.ccs-award__stats span {
	color: var(--ccs-muted-ink);
}

/* WordPressov skip-link nosi vlastite boje koje ne prolaze AA */
.skip-link.screen-reader-text:focus,
.ccs-skip-link:focus {
	background: var(--wp--preset--color--cacao) !important;
	color: var(--wp--preset--color--cream) !important;
	border-radius: var(--ccs-r-btn) !important;
	padding: .75rem 1.25rem !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Gumb mobilnog izbornika: WP ga renderira 24x24, ostale ikone teme su
   44x44. Ujednaceno radi dodirne mete. Bez "display" - WP-ovo pravilo
   iste specificnosti skriva gumb na >=600px, a tema se ucitava kasnije
   pa bi ga display ovdje opet prikazao i slomio zaglavlje u dva reda. */
.ccs-header .wp-block-navigation__responsive-container-open,
.ccs-header .wp-block-navigation__responsive-container-close {
	inline-size: 44px;
	block-size: 44px;
	align-items: center;
	justify-content: center;
}

.ccs-header .wp-block-navigation__responsive-container-open svg,
.ccs-header .wp-block-navigation__responsive-container-close svg {
	inline-size: 24px;
	block-size: 24px;
}

/* otvoreni mobilni izbornik: tamna kakao ploha kao hero i podnozje -
   isti radijalni jezik, krem linkovi, zlatni detalji.
   WP-ov selektor za bijeli default glasi
   .wp-block-navigation:not(.has-background) ... .is-menu-open (4 klase)
   i ispisuje se NAKON base.css - zato ovdje 5 klasa. */
.ccs-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.ccs-header .wp-block-navigation__responsive-container.is-menu-open {
	background:
		radial-gradient(120% 90% at 12% 0%, #3A2415 0%, transparent 55%),
		linear-gradient(180deg, #2E1D14 0%, var(--wp--preset--color--cacao) 45%, #1D110A 100%);
	color: var(--wp--preset--color--cream);
}

.ccs-header .wp-block-navigation__responsive-container.is-menu-open :is(a, button) {
	color: var(--wp--preset--color--cream) !important;
}

/* fokus na tamnoj plohi - zlatni prsten kao na heroju */
.ccs-header .wp-block-navigation__responsive-container.is-menu-open :focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* WP-ov selektor za gumb izbornika je specificniji od jednostavnog
   .ccs-header .wp-block-navigation__responsive-container-open, pa je
   sirina ostajala 24px dok je visina bila 44px. */
.ccs-header nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown),
.ccs-header nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
	inline-size: 44px;
	block-size: 44px;
	padding: 10px;
}


/* Mobilni sticky CTA je fiksiran uz dno i prekrivao je donji red podnozja.
   Prostor mu se rezervira samo na naslovnici, gdje se jedino i pojavljuje. */
@media (max-width: 900px) {
	.ccs-front .ccs-footer {
		/* stvarnu visinu CTA-a mjeri JS i upisuje u --ccs-mobcta-h */
		padding-block-end: calc(var(--ccs-mobcta-h, 4.5rem) + 1rem);
	}
}

/* =====================================================================
   PODNOZJE
   Struktura je iz prototipa (grid 2fr 1fr 1fr 1.4fr), a dubina i detalji
   iz istog jezika kao hero: radijalni gradijent, zlatni sav, vodeni zig.
   ===================================================================== */

.ccs-footer {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--cream);
	margin-block-start: 0;
	background:
		radial-gradient(120% 90% at 12% 0%, #3A2415 0%, transparent 55%),
		linear-gradient(180deg, #2E1D14 0%, var(--wp--preset--color--cacao) 45%, #1D110A 100%);
	/* zlatni sav prema zlatnoj B2B sekciji iznad */
	border-block-start: 1px solid rgba(209, 170, 103, .38);
}

/* vodeni zig — isti potez kao logo u heroju */
.ccs-foot-mark {
	position: absolute;
	inset-inline-end: -2%;
	inset-block-end: -18%;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(9rem, 22vw, 20rem);
	line-height: .8;
	color: rgba(250, 246, 240, .035);
	letter-spacing: -.04em;
}

.ccs-foot-grid,
.ccs-foot-bottom,
.ccs-foot-pay {
	position: relative;
	z-index: 1;
	max-inline-size: var(--ccs-max);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.ccs-foot-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.4fr;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	align-items: start;
}

/* zlatna crtica iznad naslova stupca — isti potez kao crvena u koracima */
.ccs-foot-grid h2 {
	position: relative;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* vise zraka od hairlinea, tisje prema listi linkova */
	padding-block-start: var(--wp--preset--spacing--30);
	margin-block-end: .6rem;
	border-block-start: 1px solid rgba(250, 246, 240, .14);
}

.ccs-foot-grid h2::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	inline-size: 2.2rem;
	block-size: 1px;
	background: var(--wp--preset--color--gold);
}

/* Brend stupac krece s istom linijom (hairline + zlatna crtica + padding)
   kao naslovi ostalih stupaca, pa su vrhovi sva cetiri stupca poravnati.
   Ispod 520px stupci se sklapaju u harmoniku i linija bi bila visak. */
@media (min-width: 521px) {
	.ccs-foot-brand {
		position: relative;
		padding-block-start: var(--wp--preset--spacing--20);
		border-block-start: 1px solid rgba(250, 246, 240, .14);
	}

	.ccs-foot-brand::before {
		content: "";
		position: absolute;
		inset-block-start: -1px;
		inset-inline-start: 0;
		inline-size: 2.2rem;
		block-size: 1px;
		background: var(--wp--preset--color--gold);
	}
}

.ccs-foot-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	/* tisi prored linkova - stupci kompaktniji */
	gap: .3rem;
}

/* Sam <li> nasljeduje prored tijela (1.65 x 21px = 35px) pa je redak
   visok i kad je link 20px - visina se postavlja na li, ne na link. */
.ccs-foot-grid ul li {
	font-size: .9375rem;
	line-height: 1.35;
}

/* Podnozje ne prati uvecanu tekstualnu skalu - popis od 8 linkova u
   18.75px razvuce stupce; drzi se na 15px s tijesnim proredom. */
.ccs-foot-grid ul a {
	color: rgba(250, 246, 240, .82);
	text-decoration: none;
	font-size: .9375rem;
	line-height: 1.35;
	transition: color .15s var(--ccs-ease), padding-inline-start .15s var(--ccs-ease);
	display: inline-block;
}

.ccs-foot-grid ul a:hover {
	color: var(--wp--preset--color--gold);
	padding-inline-start: 6px;
	text-decoration: none;
}

/* --- Brend --- */

.ccs-foot-logo {
	/* Bez veće specificnosti od .ccs-foot-grid a ostaje na 15px. */
	display: block;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 1.6rem !important;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--cream) !important;
	text-decoration: none;
	max-inline-size: 12ch;
}

.ccs-foot-logo small {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-block-start: .4rem;
}

.ccs-foot-brand p {
	color: rgba(250, 246, 240, .72);
	font-size: .9375rem;
	line-height: 1.5;
	max-inline-size: 34ch;
	margin-block-start: var(--wp--preset--spacing--30);
}

/* social kao pill gumbi — isti oblik kao CTA-ovi */
.ccs-foot-social {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--30);
}

.ccs-foot-social a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem 1.1rem;
	border: 1px solid rgba(250, 246, 240, .22);
	border-radius: var(--ccs-r-btn);
	color: rgba(250, 246, 240, .82) !important;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	transition: color .18s var(--ccs-ease), border-color .18s var(--ccs-ease), background-color .18s var(--ccs-ease);
}

.ccs-foot-social a:hover {
	color: var(--wp--preset--color--gold) !important;
	border-color: var(--wp--preset--color--gold);
	background: rgba(209, 170, 103, .08);
}

.ccs-foot-note {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-block-start: var(--wp--preset--spacing--30) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	color: rgba(250, 246, 240, .6) !important;
}

.ccs-foot-note .ccs-icon { color: var(--wp--preset--color--gold); inline-size: 1rem; block-size: 1rem; margin-block-start: .15rem; }

/* zig ne smije prolaziti iza donjih redova gdje je tekst najsitniji */
.ccs-foot-mark { inset-block-end: 18%; }

/* --- Kontakt --- */

.ccs-foot-contact address {
	font-style: normal;
	color: rgba(250, 246, 240, .78);
	font-size: .9375rem;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ccs-foot-cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--wp--preset--color--gold) !important;
	text-decoration: none;
	font-weight: 600;
	transition: gap .18s var(--ccs-ease);
	inline-size: fit-content;
}

.ccs-foot-cta:hover { gap: .75rem; text-decoration: underline; }
.ccs-foot-cta .ccs-icon { inline-size: 1rem; block-size: 1rem; flex: none; }

/* --- Nacini placanja --- */

.ccs-foot-pay {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid rgba(250, 246, 240, .12);
	font-size: var(--wp--preset--font-size--xs);
}

.ccs-foot-pay__label {
	color: rgba(250, 246, 240, .55);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
}

.ccs-foot-pay__list { display: flex; gap: .5rem; flex-wrap: wrap; }

.ccs-foot-pay__list span {
	padding: .3rem .8rem;
	border: 1px solid rgba(250, 246, 240, .18);
	border-radius: var(--ccs-r-btn);
	color: rgba(250, 246, 240, .78);
	letter-spacing: .03em;
}

.ccs-pay-lock {
	display: inline-flex;
	gap: .4rem;
	align-items: center;
	color: rgba(250, 246, 240, .6);
	margin-inline-start: auto;
}

.ccs-pay-lock svg { color: var(--wp--preset--color--gold); flex: none; }

/* --- Donji red --- */

.ccs-foot-bottom {
	border-block-start: 1px solid rgba(250, 246, 240, .12);
	padding-block: var(--wp--preset--spacing--30);
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--xs);
	color: rgba(250, 246, 240, .6);
}

.ccs-credit a { color: var(--wp--preset--color--gold); text-decoration: none; }
.ccs-credit a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.ccs-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); }
	.ccs-foot-brand { grid-column: 1 / -1; }
	.ccs-pay-lock { margin-inline-start: 0; }
}

@media (max-width: 520px) {
	.ccs-foot-grid { grid-template-columns: 1fr; }
	.ccs-foot-mark { font-size: 7rem; inset-block-end: -8%; }
}

/* --- Stupci podnozja kao akordeon na mobitelu ----------------------
   Iznad 520px <details> se ponasa kao obican stupac: strelica skrivena,
   sadrzaj uvijek vidljiv bez obzira na "open". Ispod 520px vrijedi
   nativno sklapanje, sto krati podnozje s preko 1300px na oko 500.
   ------------------------------------------------------------------- */

.ccs-foot-acc summary {
	list-style: none;
	cursor: default;
	/* razmak naslova od liste - h2 unutra ima margin:0 */
	margin-block-end: .6rem;
}

.ccs-foot-acc summary::-webkit-details-marker { display: none; }
.ccs-foot-acc summary h2 { margin: 0; }

@media (min-width: 521px) {
	/* sadrzaj se prikazuje i kad details nije otvoren; lista mora biti
	   flex (a ne block iz pravila ispod) da bi gap/prored radio */
	.ccs-foot-acc > *:not(summary) { display: block !important; }
	.ccs-foot-acc > ul { display: flex !important; }
	.ccs-foot-contact > address { display: flex !important; }
}

@media (max-width: 520px) {
	.ccs-foot-acc { border-block-end: 1px solid rgba(250, 246, 240, .12); }
	/* 44px dodirna meta */
	.ccs-foot-acc summary {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-block-size: 44px;
		padding-block: .5rem;
	}
	.ccs-foot-acc summary h2 { border-block-start: 0; padding-block-start: 0; margin-block-end: 0; }
	.ccs-foot-acc summary h2::before { content: none; }

	.ccs-foot-acc summary::after {
		content: "+";
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--lg);
		line-height: 1;
		color: var(--wp--preset--color--gold);
		transition: transform var(--ccs-dur) var(--ccs-ease);
		flex: none;
	}

	.ccs-foot-acc[open] summary::after { transform: rotate(45deg); }

	/* Eksplicitni display na .ccs-foot-grid ul ponistava nativno skrivanje
	   zatvorenog <details> u Chromiumu, pa se mora zatvoriti rucno. */
	.ccs-foot-acc:not([open]) > *:not(summary) { display: none !important; }
	.ccs-foot-acc > *:not(summary) { padding-block: .25rem var(--wp--preset--spacing--30); }
	.ccs-foot-grid { gap: 0; }
	.ccs-foot-brand { margin-block-end: var(--wp--preset--spacing--40); }
}