/* Kolači – novi izgled recepta (prijedlog 2, "elegantno") */

.kr-recipe {
	--kr-ink: #2B2024;
	--kr-ink-2: #5C4C51;
	--kr-muted: #76666B;
	--kr-faint: #A3949A;
	--kr-line: #ECE3E0;
	--kr-line-2: #F1E9E7;
	--kr-blush: #F7F0EE;
	--kr-rose: #E3D6D3;
	--kr-cherry: #8E2B3F;
	--kr-cherry-dk: #6B1F2F;
	--kr-cherry-bg: #F7ECEE;
	--kr-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--kr-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	font-family: var(--kr-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	color: var(--kr-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.kr-recipe *, .kr-recipe *::before, .kr-recipe *::after { box-sizing: border-box; }
.kr-recipe a { color: var(--kr-cherry); text-decoration: none; }
.kr-recipe a:hover { color: var(--kr-cherry-dk); }
.kr-recipe img { max-width: 100%; height: auto; }
.kr-recipe p { margin: 0; }
.kr-recipe button { font-family: inherit; }
.kr-ico { flex-shrink: 0; }

/* Woodmart: sakrij stari naslovni banner, zadrži razmak za zaglavlje */
body.kr-recept .page-title { background: none !important; padding-bottom: 0 !important; min-height: 0 !important; }
body.kr-recept .page-title > .container { display: none !important; }
body.kr-recept .main-page-wrapper { padding-top: 0; }
body.kr-recept { overflow-x: hidden; }
body.kr-recept .kr-site-content { width: 100%; max-width: 100%; flex: 0 0 100%; padding-left: 0; padding-right: 0; }

/* Tipografske uloge */
.kr-recipe .kr-kicker, .kr-recipe .kr-label {
	font-family: var(--kr-sans); font-size: 11px; font-weight: 400;
	letter-spacing: 2.3px; text-transform: uppercase; line-height: 1.6;
}
.kr-recipe .kr-kicker { color: var(--kr-cherry); display: block; }
.kr-recipe .kr-kicker--light { color: #E2C3C8; }
.kr-recipe .kr-label { color: var(--kr-muted); display: inline-flex; align-items: center; gap: 8px; }
.kr-recipe .kr-h2 {
	font-family: var(--kr-serif); font-weight: 500; font-size: 40px; line-height: 1.1;
	letter-spacing: 0; text-transform: none; color: var(--kr-ink); margin: 4px 0 20px;
}
.kr-recipe .kr-h2--lg { font-size: 46px; }
.kr-recipe .kr-h3 {
	font-family: var(--kr-serif); font-style: italic; font-weight: 500; font-size: 25px; line-height: 1.2;
	letter-spacing: 0; text-transform: none; color: var(--kr-cherry); margin: 0 0 6px;
}

/* Naslov */
.kr-head { max-width: 860px; margin: 0 auto; padding: 56px 24px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.kr-crumbs { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--kr-muted); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.kr-recipe .kr-crumbs a { color: var(--kr-muted); }
.kr-recipe .kr-crumbs a.kr-accent { color: var(--kr-cherry); }
.kr-recipe .kr-title {
	margin: 0; font-family: var(--kr-serif); font-weight: 500; font-size: 84px; line-height: 1;
	letter-spacing: -1px; text-transform: none; color: var(--kr-ink);
}
.kr-recipe .kr-title em { font-style: italic; color: var(--kr-cherry); }
.kr-lead { font-family: var(--kr-serif); font-style: italic; font-size: 24px; line-height: 1.45; color: var(--kr-ink-2); max-width: 600px; }
.kr-byline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--kr-muted); letter-spacing: .4px; }
.kr-dot { width: 4px; height: 4px; border-radius: 2px; background: #D9C6C4; }

/* Fotografija */
.kr-hero { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.kr-recipe .kr-hero img { display: block; width: 100%; height: auto; max-height: 680px; object-fit: cover; border-radius: 28px; background: var(--kr-blush); }

/* Činjenice */
.kr-facts {
	max-width: 952px; margin: -44px auto 0; position: relative; z-index: 2;
	background: #fff; border: 1px solid var(--kr-line); border-radius: 22px;
	box-shadow: 0 20px 50px rgba(60, 30, 40, .07);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kr-facts--flat { margin-top: 0; }
.kr-fact { padding: 22px 26px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--kr-line-2); }
.kr-fact:first-child { border-left: 0; }
.kr-fact .kr-ico { color: var(--kr-cherry); }
.kr-fact-val { font-family: var(--kr-serif); font-size: 30px; font-weight: 500; line-height: 1.2; }
@media (max-width: 1000px) { .kr-facts { margin-left: 24px; margin-right: 24px; } }

/* Gumbi */
.kr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 28px 24px 8px; }
.kr-recipe .kr-btn {
	all: unset; box-sizing: border-box; cursor: pointer;
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
	border-radius: 24px; border: 1px solid var(--kr-rose); background: #fff; color: var(--kr-ink);
	font-family: var(--kr-sans); font-size: 13px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; line-height: 1;
	transition: background .2s, border-color .2s, color .2s;
}
.kr-recipe .kr-btn:hover { border-color: var(--kr-cherry); color: var(--kr-cherry); }
.kr-recipe .kr-btn--solid { background: var(--kr-cherry); border-color: var(--kr-cherry); color: #fff; padding: 0 26px; }
.kr-recipe .kr-btn--solid:hover { background: var(--kr-cherry-dk); border-color: var(--kr-cherry-dk); color: #fff; }
.kr-recipe .kr-btn:focus-visible, .kr-recipe button:focus-visible { outline: 2px solid var(--kr-cherry); outline-offset: 3px; }

/* Tijelo recepta */
.kr-body { max-width: 1200px; margin: 0 auto; padding: 64px 24px 24px; display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; scroll-margin-top: 90px; }

/* Sastojci */
.kr-ings { flex: 1 1 340px; min-width: 0; max-width: 420px; background: var(--kr-blush); border-radius: 26px; padding: 36px 32px; }
@media (min-width: 1000px) { .kr-ings { position: sticky; top: 100px; } }
.kr-scale { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.kr-scale-label { font-size: 13px; color: var(--kr-muted); }
.kr-seg { display: flex; gap: 4px; background: #fff; border-radius: 999px; padding: 4px; border: 1px solid #EADDDA; }
.kr-recipe .kr-seg-btn {
	all: unset; box-sizing: border-box; cursor: pointer; min-width: 52px; min-height: 40px; padding: 0 14px;
	border-radius: 999px; text-align: center; font-family: var(--kr-sans); font-size: 14px; color: var(--kr-ink); line-height: 40px;
}
.kr-recipe .kr-seg-btn.is-on { background: var(--kr-ink); color: #fff; }
.kr-group { margin-bottom: 26px; }
.kr-group:last-child { margin-bottom: 0; }
.kr-recipe .kr-list { list-style: none; margin: 0; padding: 0; }
.kr-recipe .kr-list li { border-bottom: 1px solid #EADDDA; margin: 0; padding: 0; list-style: none; }
.kr-recipe .kr-list li::before { display: none; }
.kr-recipe .kr-check {
	all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
	display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 0;
	font-family: var(--kr-sans); font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--kr-ink);
}
.kr-box {
	width: 20px; height: 20px; border-radius: 10px; border: 1px solid #C9B4B2; background: #fff;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: all .15s;
}
.kr-qty { font-weight: 500; }
.kr-check[aria-pressed="true"] { color: var(--kr-faint); }
.kr-check[aria-pressed="true"] .kr-ing { text-decoration: line-through; }
.kr-check[aria-pressed="true"] .kr-box { background: var(--kr-cherry); border-color: var(--kr-cherry); color: #fff; }

/* Koraci */
.kr-steps { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; }
.kr-steps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.kr-steps-head .kr-h2 { margin-bottom: 0; }
.kr-progress-txt { font-size: 13px; color: var(--kr-muted); }
.kr-progress { height: 2px; background: var(--kr-line-2); margin: 16px 0 8px; }
.kr-progress span { display: block; height: 2px; width: 0; background: var(--kr-cherry); transition: width .3s; }
.kr-phase { padding-top: 22px; }
.kr-recipe .kr-ol { list-style: none; margin: 0; padding: 0; }
.kr-recipe .kr-step { display: flex; gap: 22px; padding: 20px 0; align-items: flex-start; border-bottom: 1px solid var(--kr-line-2); margin: 0; list-style: none; }
.kr-recipe .kr-step::before { display: none; }
.kr-recipe .kr-step-n {
	all: unset; box-sizing: border-box; cursor: pointer; width: 48px; height: 48px; border-radius: 24px; flex-shrink: 0;
	border: 1px solid var(--kr-rose); background: #fff; color: var(--kr-ink);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--kr-serif); font-style: italic; font-size: 22px; line-height: 1;
}
.kr-step-ok { display: none; }
.kr-step.is-done .kr-step-n { background: var(--kr-cherry); border-color: var(--kr-cherry); color: #fff; }
.kr-step.is-done .kr-step-num { display: none; }
.kr-step.is-done .kr-step-ok { display: flex; }
.kr-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.kr-step-body p { font-size: 18px; line-height: 1.75; color: var(--kr-ink); transition: color .2s; }
.kr-step.is-done .kr-step-body p { color: var(--kr-faint); }
.kr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kr-cherry); background: var(--kr-cherry-bg); border-radius: 999px; padding: 3px 12px; font-weight: 400; }
.kr-tags { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kr-recipe .kr-tags a { font-size: 14px; color: var(--kr-ink); border: 1px solid var(--kr-rose); padding: 6px 14px; border-radius: 999px; }
.kr-recipe .kr-tags a:hover { border-color: var(--kr-cherry); color: var(--kr-cherry); }

/* Fotopostupak */
.kr-photos { max-width: 1200px; margin: 0 auto; padding: 56px 24px 0; }
.kr-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.kr-photo { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kr-photo-imgs { display: grid; grid-auto-flow: column; gap: 8px; }
.kr-recipe .kr-photo-imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
.kr-photo figcaption { font-size: 15px; line-height: 1.6; color: var(--kr-ink-2); display: flex; gap: 12px; }
.kr-photo-n { font-family: var(--kr-serif); font-style: italic; font-size: 26px; line-height: 1; color: var(--kr-cherry); flex-shrink: 0; }

/* Video */
.kr-video-wrap { max-width: 1200px; margin: 0 auto; padding: 56px 24px; scroll-margin-top: 90px; }
.kr-recipe .kr-video {
	all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
	display: flex; flex-wrap: wrap; align-items: stretch; background: var(--kr-ink); border-radius: 28px; overflow: hidden; color: #fff;
}
.kr-video-media { flex: 1 1 420px; min-width: 0; position: relative; min-height: 280px; display: block; }
.kr-recipe .kr-video-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; border-radius: 0; }
.kr-video-play {
	position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 38px;
	background: #fff; color: var(--kr-cherry); display: flex; align-items: center; justify-content: center; transition: transform .2s;
}
.kr-video:hover .kr-video-play { transform: scale(1.06); }
.kr-video-text { flex: 1 1 340px; padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.kr-video-title { font-family: var(--kr-serif); font-size: 40px; line-height: 1.1; font-weight: 500; }
.kr-video-title em { font-style: italic; }
.kr-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #000; }
.kr-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Povezani recepti – puna širina */
.kr-related { background: var(--kr-blush); width: 100vw; margin-left: calc(50% - 50vw); margin-top: 24px; }
.kr-related-in { max-width: 1200px; margin: 0 auto; padding: 72px 24px 80px; }
.kr-related-head { text-align: center; margin-bottom: 40px; }
.kr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; }
.kr-recipe .kr-card { display: flex; flex-direction: column; gap: 12px; color: var(--kr-ink); }
.kr-recipe .kr-card-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; background: #fff; transition: transform .3s; }
.kr-recipe .kr-card:hover .kr-card-img { transform: translateY(-3px); }
.kr-card-title { font-family: var(--kr-serif); font-size: 28px; line-height: 1.15; font-weight: 500; }
.kr-recipe .kr-card:hover .kr-card-title { color: var(--kr-cherry); }

/* Mobitel */
@media (max-width: 700px) {
	.kr-recipe { font-size: 16px; }
	.kr-head { padding-top: 32px; }
	.kr-recipe .kr-title { font-size: 52px; }
	.kr-lead { font-size: 20px; }
	.kr-recipe .kr-hero img { border-radius: 20px; }
	.kr-facts { margin-top: -28px; }
	.kr-fact { padding: 16px 18px; border-left: 0; border-top: 1px solid var(--kr-line-2); }
	.kr-fact:nth-child(-n+2) { border-top: 0; }
	.kr-fact:nth-child(even) { border-left: 1px solid var(--kr-line-2); }
	.kr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kr-fact-val { font-size: 24px; }
	.kr-body { padding-top: 40px; gap: 40px; }
	.kr-ings { padding: 28px 22px; max-width: none; }
	.kr-recipe .kr-h2 { font-size: 34px; }
	.kr-step { gap: 16px; }
	.kr-step-body p { font-size: 17px; }
	.kr-video-text { padding: 28px; }
	.kr-video-title { font-size: 32px; }
}

/* Ispis */
@media print {
	body.kr-recept .whb-header, body.kr-recept .footer-container, body.kr-recept .wd-prefooter,
	body.kr-recept .wd-toolbar, body.kr-recept #wpadminbar, body.kr-recept .scrollToTop,
	.kr-actions, .kr-video-wrap, .kr-related, .kr-scale, .kr-progress, .kr-progress-txt, .kr-tags { display: none !important; }
	.kr-recipe .kr-hero img { max-height: 320px; }
	.kr-facts { box-shadow: none; margin-top: 16px; }
	.kr-ings { position: static; background: none; border: 1px solid #ddd; }
	.kr-body { display: block; padding-top: 24px; }
	.kr-ings, .kr-steps { max-width: none; margin-bottom: 24px; }
	.kr-step-n { border-color: #999; }
	.kr-step { break-inside: avoid; }
}