/*!
 * Кораци – сајт: основа дизајна (Фаза R1).
 * Учитава се после Astra и WooCommerce стилова, а пре осталих наших стилова.
 * Боје: тамна #17191E, златна #E8B53A (за текст #85600E), папир #F2F2EE, картица #FAFAF8,
 *       линија #DCDAD2, текст #4A4C55, пригушен текст #5E6068.
 * Фонтови: EB Garamond (наслови), IBM Plex Sans (текст) – самостално хостовани, видети fontovi.css.
 */

/* ==========================================================================
   1. Променљиве
   ========================================================================== */
:root {
	--k-ink: #17191E;
	--k-dark: #17191E;
	--k-gold: #E8B53A;
	--k-gold-hover: #F0C456;
	--k-gold-text: #85600E;
	--k-gold-dark: #85600E;
	--k-paper: #F2F2EE;
	--k-card: #FAFAF8;
	--k-line: #DCDAD2;
	--k-text: #4A4C55;
	--k-muted: #5E6068;
	--k-field: #9C9A93;
	--k-ok: #2B6A3B;
	--k-err: #A12D2D;

	--k-display: "EB Garamond", Georgia, "Times New Roman", serif;
	--k-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--k-r-s: 10px;
	--k-r-m: 14px;
	--k-r-pill: 999px;

	/* Једна скала величина слова (мобилни -> рачунар). */
	--k-fs-body: 1rem;
	--k-fs-h1: clamp(2rem, 1.55rem + 1.9vw, 3rem);
	--k-fs-h2: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
	--k-fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
	--k-fs-h4: 1.25rem;
	--k-fs-h5: 1.0625rem;
	--k-fs-h6: .8125rem;
	--k-fs-mala: .875rem;

	--k-razmak: clamp(20px, 3vw, 40px);
	--k-visina-zaglavlja: 64px;
}

@media (min-width: 922px) {
	:root {
		--k-fs-body: 1.0625rem;
		--k-visina-zaglavlja: 108px;
	}
}

/* ==========================================================================
   2. Основа
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 92px;
}

:target {
	scroll-margin-top: 92px;
}

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
	font-family: var(--k-sans);
}

body {
	font-size: var(--k-fs-body);
	line-height: 1.6;
	color: var(--k-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background-color: #fff;
}

::selection {
	background: var(--k-gold);
	color: var(--k-ink);
}

img {
	height: auto;
}

/* Страна не сме да добије хоризонтални скрол. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

/* ==========================================================================
   3. Наслови (један ред величина)
   ========================================================================== */
:is(body, .entry-content) :is(h1, h2, h3, h4, h5, h6),
.entry-title,
.page-title,
.widget-title,
.woocommerce-products-header__title {
	font-family: var(--k-display);
	font-weight: 600;
	color: var(--k-ink);
	letter-spacing: -.005em;
	text-wrap: balance;
}

:is(body, .entry-content) h1 {
	font-size: var(--k-fs-h1);
	line-height: 1.12;
}

:is(body, .entry-content) h2 {
	font-size: var(--k-fs-h2);
	line-height: 1.18;
}

:is(body, .entry-content) h3 {
	font-size: var(--k-fs-h3);
	line-height: 1.25;
}

:is(body, .entry-content) h4 {
	font-size: var(--k-fs-h4);
	line-height: 1.3;
}

:is(body, .entry-content) h5 {
	font-family: var(--k-sans);
	font-size: var(--k-fs-h5);
	line-height: 1.35;
}

:is(body, .entry-content) h6 {
	font-family: var(--k-sans);
	font-size: var(--k-fs-h6);
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Наслови странице и чланка: исти ред величине као H1. */
.ast-single-post .entry-title,
.page .entry-title,
.page-title,
.ast-archive-title,
.woocommerce-products-header__title.page-title {
	font-size: var(--k-fs-h1);
	line-height: 1.12;
}

.widget-title {
	font-size: var(--k-fs-h4);
	line-height: 1.3;
}

/* Наслов књиге на страни производа (R3 прави коначни распоред). */
.product_title.entry-title,
.woocommerce div.product .product_title {
	font-size: var(--k-fs-h2);
	line-height: 1.15;
}

/* Мали наслови у картицама остају у основном фонту. */
.woocommerce-loop-product__title,
.woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--k-sans);
	font-weight: 600;
	color: var(--k-ink);
	letter-spacing: 0;
}

strong,
b {
	font-weight: 600;
}

/* ==========================================================================
   4. Везе
   ========================================================================== */
a {
	color: var(--k-gold-text);
	text-decoration: none;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus {
	color: var(--k-ink);
	text-decoration: underline;
}

/* Везе унутар текста су подвучене (не само обојене). */
.entry-content p a:not(.button):not(.k-dugme):not(.wp-block-button__link),
.entry-content .wp-block-list a,
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel a:not(.button) {
	text-decoration: underline;
}

.entry-content p a:not(.button):not(.k-dugme):hover {
	text-decoration-thickness: 2px;
}

/* Мрвице, ознаке, мета-подаци: чиста контрастна боја. */
.woocommerce-breadcrumb,
.ast-breadcrumbs,
.ast-breadcrumbs-wrapper,
.woocommerce-result-count,
.entry-meta,
.posted_in,
.tagged_as,
.sku_wrapper,
.woocommerce-product-rating .woocommerce-review-link,
small,
.wc-block-components-product-metadata,
.ast-woo-product-category {
	color: var(--k-muted);
}

.woocommerce-breadcrumb a,
.ast-breadcrumbs a,
.entry-meta a,
.posted_in a,
.tagged_as a,
.ast-woo-product-category a,
.ast-woo-product-category {
	color: var(--k-gold-text);
}

.entry-meta a:hover,
.woocommerce-breadcrumb a:hover,
.ast-breadcrumbs a:hover {
	color: var(--k-ink);
}

body .woocommerce .woocommerce-breadcrumb a,
body .woocommerce-page .woocommerce-breadcrumb a,
body nav.woocommerce-breadcrumb a,
body.woocommerce-js .woocommerce-breadcrumb a {
	color: var(--k-gold-text);
}

body.woocommerce-js .woocommerce-breadcrumb,
body nav.woocommerce-breadcrumb {
	color: var(--k-muted);
}

/* Табови на страни производа (опис / додатне информације). */
body .woocommerce div.product .woocommerce-tabs ul.tabs li a,
body.woocommerce-js div.product .woocommerce-tabs ul.tabs li a {
	color: var(--k-muted);
	font-weight: 600;
}

html body.woocommerce.sptpro-smart-tabs .woocommerce-tabs ul.wc-tabs li:not(.active) a {
	color: var(--k-muted) !important;
}

body .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
body.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--k-ink);
}

/* Залиха: зелена са довољним контрастом. */
.woocommerce div.product p.stock,
.woocommerce div.product .stock,
.woocommerce .in-stock,
p.stock.in-stock {
	color: var(--k-ok);
}

.woocommerce .out-of-stock,
p.stock.out-of-stock {
	color: var(--k-err);
}

.price del,
.woocommerce .price del {
	color: var(--k-muted);
	opacity: 1;
}

.price ins,
.woocommerce .price ins {
	background: none;
	text-decoration: none;
}

/* ==========================================================================
   5. Дугмад
   Главно: златна позадина, тамно слово, пилула. Споредно: оквир.
   ========================================================================== */
.k-dugme,
body .button,
body .ast-button,
body .ast-custom-button,
body .wp-block-button__link,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt,
body .woocommerce #respond input#submit.alt,
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body .woocommerce-page a.button,
body .woocommerce-page button.button,
body .woocommerce-page input.button,
body .woocommerce-js a.button,
body .woocommerce-js button.button,
body .woocommerce-js input.button,
body input[type="submit"],
body input[type="button"],
body input[type="reset"],
body button[type="submit"],
body .sow-contact-form input[type="submit"],
body .ow-button-base a,
body .ow-button-base a.ow-button-hover,
body .sow-button-base a,
body .woocommerce ul.products li.product .button,
body .woocommerce-page ul.products li.product .button,
body .wc-block-components-button:not(.is-link),
body .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 26px;
	border: 2px solid var(--k-gold);
	border-radius: var(--k-r-pill);
	background: var(--k-gold);
	color: var(--k-ink);
	font-family: var(--k-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.k-dugme:hover,
body .button:hover,
body .ast-button:hover,
body .ast-custom-button:hover,
body .wp-block-button__link:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce #respond input#submit:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce input.button.alt:hover,
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page input.button:hover,
body .woocommerce-js a.button:hover,
body .woocommerce-js button.button:hover,
body .woocommerce-js input.button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body input[type="reset"]:hover,
body button[type="submit"]:hover,
body .sow-contact-form input[type="submit"]:hover,
body .ow-button-base a:hover,
body .ow-button-base a.ow-button-hover:hover,
body .sow-button-base a:hover,
body .woocommerce ul.products li.product .button:hover,
body .wc-block-components-button:not(.is-link):hover,
body .wp-block-search__button:hover {
	border-color: var(--k-gold-hover);
	background: var(--k-gold-hover);
	color: var(--k-ink);
	text-decoration: none;
}

/* SiteOrigin: подешавања виџета имају велику специфичност, па овде мора !important. */
body .ow-button-base a,
body .ow-button-base a.ow-button-hover,
body div[class*="so-widget-sow-button"] .ow-button-base a.sowb-button,
body .sow-button-base a {
	background: var(--k-gold) !important;
	border: 2px solid var(--k-gold) !important;
	border-radius: var(--k-r-pill) !important;
	color: var(--k-ink) !important;
	font-family: var(--k-sans) !important;
	font-weight: 600 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

body .ow-button-base a:hover,
body .ow-button-base a.ow-button-hover:hover,
body div[class*="so-widget-sow-button"] .ow-button-base a.sowb-button:hover,
body .sow-button-base a:hover {
	background: var(--k-gold-hover) !important;
	border-color: var(--k-gold-hover) !important;
	color: var(--k-ink) !important;
}

body .ow-button-base a .sow-icon-fontawesome,
body .ow-button-base a [class^="sow-icon-"] {
	color: inherit !important;
}

/* Споредно дугме: оквир. */
.k-dugme--okvir,
body .button.k-dugme--okvir,
body .button.is-outline,
body .woocommerce button[name="update_cart"],
body .woocommerce button[name="apply_coupon"],
body .woocommerce a.button.wc-backward,
body .wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--k-ink);
	background: transparent;
	color: var(--k-ink);
}

.k-dugme--okvir:hover,
body .button.k-dugme--okvir:hover,
body .button.is-outline:hover,
body .woocommerce button[name="update_cart"]:hover,
body .woocommerce button[name="apply_coupon"]:hover,
body .woocommerce a.button.wc-backward:hover,
body .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--k-ink);
	background: var(--k-ink);
	color: #fff;
}

/* Неактивно дугме. */
body .button:disabled,
body .button.disabled,
body .woocommerce button.button:disabled,
body .woocommerce button.button:disabled[disabled],
body .woocommerce button.button.disabled,
body input[type="submit"]:disabled,
body button[type="submit"]:disabled {
	opacity: .5;
	cursor: not-allowed;
	background: var(--k-paper);
	border-color: var(--k-line);
	color: var(--k-muted);
}

.k-dugme--mali {
	min-height: 38px;
	padding: 6px 18px;
	font-size: .9375rem;
}

/* На тамној подлози оквир је светао (заглавље, подножје, тамне траке). */
.koraci-zaglavlje .k-dugme--okvir,
.koraci-podnozje .k-dugme--okvir,
.koraci-band--tamna .k-dugme--okvir {
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.koraci-zaglavlje .k-dugme--okvir:hover,
.koraci-podnozje .k-dugme--okvir:hover,
.koraci-band--tamna .k-dugme--okvir:hover {
	border-color: var(--k-gold);
	background: var(--k-gold);
	color: var(--k-ink);
}

/* Постојеће дугме из насловне и клуба: пилула као и остала дугмад. */
.koraci-blok .koraci-dugme {
	border-radius: var(--k-r-pill);
}

/* ==========================================================================
   6. Поља формулара
   ========================================================================== */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="password"],
body input[type="search"],
body input[type="number"],
body input[type="date"],
body input[type="time"],
body input[type="datetime-local"],
body textarea,
body select,
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .woocommerce-page form .form-row input.input-text,
body .woocommerce-page form .form-row textarea,
body .woocommerce .quantity .qty,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple,
body .sow-contact-form input[type="text"],
body .sow-contact-form input[type="email"],
body .sow-contact-form textarea {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--k-field);
	border-radius: var(--k-r-s);
	background-color: #fff;
	color: var(--k-ink);
	font-family: var(--k-sans);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body textarea,
body .woocommerce form .form-row textarea {
	min-height: 120px;
}

body .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	padding: 0 14px;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--k-ink);
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	height: 100%;
}

::placeholder {
	color: var(--k-muted);
	opacity: 1;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="time"]:focus,
body input[type="datetime-local"]:focus,
body textarea:focus,
body select:focus,
body .woocommerce form .form-row input.input-text:focus,
body .woocommerce form .form-row textarea:focus,
body .woocommerce .quantity .qty:focus,
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single,
body .sow-contact-form input:focus,
body .sow-contact-form textarea:focus {
	border-color: var(--k-ink);
	outline: none;
	box-shadow: 0 0 0 3px var(--k-gold);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--k-ink);
	width: 1.15em;
	height: 1.15em;
}

label {
	color: var(--k-ink);
	font-weight: 500;
}

body .woocommerce form .form-row label,
body .woocommerce-page form .form-row label {
	line-height: 1.4;
}

/* Неисправно поље. */
body .woocommerce form .form-row.woocommerce-invalid input.input-text,
body .woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--k-err);
}

/* ==========================================================================
   7. Фокус (таставура) – увек видљив
   ========================================================================== */
:focus-visible {
	outline: 3px solid var(--k-ink);
	outline-offset: 2px;
}

/* Специфичност је намерно виша од Astra правила „a:focus“ и „button:focus“ (она су гасила или тањила обрис). */
html body :focus-visible:not(input):not(textarea):not(select) {
	outline: 3px solid var(--k-ink) !important;
	outline-offset: 2px;
}

html body .koraci-zaglavlje :focus-visible,
html body .koraci-podnozje :focus-visible,
html body .koraci-band--tamna :focus-visible {
	outline-color: var(--k-gold) !important;
}

html body input:focus-visible,
html body textarea:focus-visible,
html body select:focus-visible {
	outline: none;
}

/* Слајдер на насловној: тамна слика – златни обрис унутра са тамним ободом, видљив и на светлим и на тамним кадровима. */
html body .n2-section-smartslider :focus-visible,
html body .n2-section-smartslider .n2-ss-slider a.n2-ow.n2-ow:focus-visible,
html body .n2-section-smartslider .n2-ss-slider .n2-ow-all a:focus-visible {
	outline: 3px solid var(--k-gold) !important;
	outline-offset: -6px !important;
	box-shadow: inset 0 0 0 6px var(--k-ink) !important;
}

/* Астра је на неким местима гасила outline; враћамо га само за таставуру. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

.skip-link:focus,
.skip-link.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 20px;
	border-radius: var(--k-r-s);
	background: var(--k-ink);
	color: var(--k-gold);
	font-weight: 600;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* ==========================================================================
   8. Простор испод/изнад заглавља, пагинација, дугме „на врх“
   ========================================================================== */
/* Наслов странице никада не лепи уз заглавље. */
body:not(.home) .site-content > .ast-container {
	padding-top: clamp(24px, 3vw, 32px);
}

body.home .site-content > .ast-container {
	padding-top: 0;
}

/* Пагинација: активна страна у тамној, не у плавој. */
body .woocommerce nav.woocommerce-pagination ul li a,
body .woocommerce nav.woocommerce-pagination ul li span,
body .ast-pagination .page-numbers,
body .navigation.pagination .page-numbers {
	min-width: 42px;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--k-r-pill);
	color: var(--k-ink);
	font-weight: 500;
}

body.woocommerce-js nav.woocommerce-pagination ul li span.current,
body.woocommerce-js nav.woocommerce-pagination ul li a:hover,
body.woocommerce-js nav.woocommerce-pagination ul li a:focus,
body .woocommerce nav.woocommerce-pagination ul li span.current,
body .woocommerce nav.woocommerce-pagination ul li a:hover,
body .woocommerce nav.woocommerce-pagination ul li a:focus,
body .ast-pagination .page-numbers.current,
body .ast-pagination .page-numbers:hover,
body .navigation.pagination .page-numbers.current {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: #fff;
}

body .woocommerce nav.woocommerce-pagination ul,
body .woocommerce nav.woocommerce-pagination ul li {
	border-color: transparent;
}

/* Дугме „на врх странице“. */
#ast-scroll-top.ast-scroll-top-icon {
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--k-gold);
	color: var(--k-ink);
	box-shadow: 0 4px 14px rgba(23, 25, 30, .25);
}

#ast-scroll-top.ast-scroll-top-icon svg,
#ast-scroll-top.ast-scroll-top-icon .ast-icon {
	fill: var(--k-ink);
}

/* ==========================================================================
   9. Контраст на уграђеним виџетима (SiteOrigin, Smart Slider)
   Њихова подешавања имају велику специфичност, па је овде потребан !important.
   ========================================================================== */
/* Дугме у слајдеру: златно са тамним словом (било је бело на #BF8500 = 3,2:1). */
body div[id^="n2-ss-"] .n2-ss-button-container a[class*="n2-style-"] {
	background: var(--k-gold) !important;
	border-radius: var(--k-r-pill) !important;
	color: var(--k-ink) !important;
	font-family: var(--k-sans) !important;
	font-weight: 600 !important;
	text-shadow: none !important;
}

body div[id^="n2-ss-"] .n2-ss-button-container a[class*="n2-style-"] * {
	color: var(--k-ink) !important;
}

body div[id^="n2-ss-"] .n2-ss-button-container a[class*="n2-style-"]:hover {
	background: var(--k-gold-hover) !important;
}

/* SiteOrigin дугмад: и унутрашњи елементи (span, икона) носе боју дугмета. */
body .ow-button-base a *,
body .sow-button-base a * {
	color: inherit !important;
}

/* SiteOrigin формулар за контакт. */
body .sow-contact-form .sow-submit,
body .sow-contact-form button.sow-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 26px !important;
	border: 2px solid var(--k-gold) !important;
	border-radius: var(--k-r-pill) !important;
	background: var(--k-gold) !important;
	color: var(--k-ink) !important;
	font-family: var(--k-sans) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

body .sow-contact-form .sow-submit:hover {
	background: var(--k-gold-hover) !important;
	border-color: var(--k-gold-hover) !important;
}

/* SiteOrigin акордеон: бели наслов на тамној подлози (био је на #828282 = 3,8:1). */
body .sow-accordion .sow-accordion-panel .sow-accordion-panel-header {
	background-color: var(--k-text) !important;
}

/* WP Tabs: неактивни табови (били су златни #BF8500 на сивом = 2,75:1). */
body .sp-tab__nav-link:not(.sp-tab__active) .sp-tab__tab_title {
	color: var(--k-gold-text) !important;
}

/* Обавезно поље: звездица у црвеној са довољним контрастом. */
body abbr.required,
body span.required,
body .woocommerce form .form-row .required {
	color: var(--k-err);
	text-decoration: none;
}

/* Страна „Контакт“ (Фаза R6): тамни блокови су замењени светлим картицама, видети strane.css. */

/* ==========================================================================
   10. Смањено кретање
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}