/* ==========================================================================
   Blok tamban/proizvod-kupovina (slika 01, srednja kolona): naziv, cena, karakteristike,
   varijacije, količina, korpa, prednosti, deljenje, donja traka na telefonu i sticky traka
   sa delovima stranice (A-011, A-012).
   Oznake (.tb-badge) i zvezdice (.tb-stars) dolaze iz kartice.css.
   ========================================================================== */

/* --- Ikone iz ugovora tamban_proizvod_* (putanja važi i iz assets/css i iz bloka) --- */
.tb-ico--layers { --tb-icon: url("../../assets/icons/layers.svg"); }
.tb-ico--ruler { --tb-icon: url("../../assets/icons/ruler.svg"); }
.tb-ico--repeat { --tb-icon: url("../../assets/icons/repeat.svg"); }
.tb-ico--droplet { --tb-icon: url("../../assets/icons/droplet.svg"); }
.tb-ico--sun { --tb-icon: url("../../assets/icons/sun.svg"); }
.tb-ico--scissors { --tb-icon: url("../../assets/icons/scissors.svg"); }
.tb-ico--globe { --tb-icon: url("../../assets/icons/globe.svg"); }
.tb-ico--truck { --tb-icon: url("../../assets/icons/truck.svg"); }
.tb-ico--palette { --tb-icon: url("../../assets/icons/palette.svg"); }
.tb-ico--tag { --tb-icon: url("../../assets/icons/tag.svg"); }
.tb-ico--award { --tb-icon: url("../../assets/icons/award.svg"); }
.tb-ico--check { --tb-icon: url("../../assets/icons/check.svg"); }
.tb-ico--shield { --tb-icon: url("../../assets/icons/shield.svg"); }
.tb-ico--return { --tb-icon: url("../../assets/icons/return.svg"); }
.tb-ico--store { --tb-icon: url("../../assets/icons/store.svg"); }
.tb-ico--star { --tb-icon: url("../../assets/icons/star.svg"); }
.tb-ico--phone { --tb-icon: url("../../assets/icons/phone.svg"); }
.tb-ico--help { --tb-icon: url("../../assets/icons/help.svg"); }
.tb-ico--pin { --tb-icon: url("../../assets/icons/pin.svg"); }
.tb-ico--sparkles { --tb-icon: url("../../assets/icons/sparkles.svg"); }
.tb-ico--fast { --tb-icon: url("../../assets/icons/fast.svg"); }
.tb-ico--cart { --tb-icon: url("../../assets/icons/cart.svg"); }
.tb-ico--roller { --tb-icon: url("../../assets/icons/roller.svg"); }
.tb-ico--clock { --tb-icon: url("../../assets/icons/clock.svg"); }

/* --------------------------------------------------------------------------
   Osnova
   -------------------------------------------------------------------------- */
.tb-buy {
	--tb-ok: #2f7a4f;
	--tb-wait: #b7791f;
	--tb-off: #8a8f8b;
	min-width: 0;
	color: var(--tb-ink);
	font-size: 0.9375rem;
}

.tb-buy *,
.tb-buy *::before,
.tb-buy *::after {
	box-sizing: border-box;
}

.tb-buy [hidden] {
	display: none !important;
}

.tb-buy > * + * {
	margin-block-start: 0.85rem;
}

.tb-buy p {
	margin: 0;
}

.tb-buy--placeholder {
	padding: 1.25rem;
	border: 1px dashed var(--tb-line);
	border-radius: var(--tb-radius);
	background: var(--tb-paper);
	color: var(--tb-muted);
	font-size: 0.875rem;
}

/* Oznake: „Akcija -20%“ crveno, „Novo“ tamnozeleno (slika 01) */
.tb-buy__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tb-buy__badges .tb-badge--novo {
	background: var(--tb-forest);
	box-shadow: none;
	color: #fff;
}

.tb-buy__badges + .tb-buy__title {
	margin-block-start: 0.6rem;
}

.tb-buy__title {
	margin: 0;
	color: var(--tb-ink);
	font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.tb-buy .tb-buy__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	margin-block-start: 0.5rem;
	/* Razdvojnik „|“ stoji levo od svake stavke; traka je pomerena ulevo i odsečena, pa se razdvojnik na početku
	   reda (prva stavka i stavka koja pređe u novi red, npr. brend uz dugu šifru na telefonu) ne vidi. */
	margin-inline-start: -1.3rem;
	clip-path: inset(-0.5rem -0.5rem -0.5rem 1.3rem);
	color: var(--tb-muted);
	font-size: 0.8125rem;
}

.tb-buy__meta-item {
	position: relative;
	margin-inline-start: 1.3rem;
}

.tb-buy__meta-item::before {
	content: "|";
	position: absolute;
	inset-inline-start: -0.95rem;
	color: var(--tb-line);
}

.tb-buy__sku,
.tb-buy__meta a {
	color: var(--tb-ink);
	font-weight: 500;
}

.tb-buy__meta a {
	text-decoration: none;
}

.tb-buy__meta a:hover {
	text-decoration: underline;
}

.tb-buy .tb-buy__rating {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-start: 0.45rem;
	font-size: 0.8125rem;
}

.tb-buy__rating .tb-stars {
	font-size: 0.95rem;
}

.tb-buy__rating a {
	color: var(--tb-ink);
	text-decoration: none;
}

.tb-buy__rating a:hover {
	text-decoration: underline;
}

.tb-buy__rating--empty a {
	color: var(--tb-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tb-buy__rating--empty a:hover {
	color: var(--tb-forest);
}

/* --------------------------------------------------------------------------
   Cena
   -------------------------------------------------------------------------- */
.tb-buy__price {
	margin-block-start: 1rem;
}

.tb-buy__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	font-variant-numeric: tabular-nums;
}

.tb-buy__now {
	color: var(--tb-ink);
	font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.tb-buy__now.is-sale,
.tb-buy__now ins {
	color: var(--tb-sale);
	text-decoration: none;
}

/* Varijabilni proizvod na akciji sa jednom cenom: WooCommerce daje <del> i <ins> */
.tb-buy__now del {
	margin-inline-end: 0.4rem;
	color: var(--tb-muted);
	font-size: 0.55em;
	font-weight: 400;
}

.tb-buy__unit {
	color: var(--tb-ink);
	font-size: 1rem;
	font-weight: 600;
}

.tb-buy__old {
	margin-inline-start: 0.6rem;
	color: var(--tb-muted);
	font-size: 1rem;
}

/* Napomena o PDV-u uz cenu („sa PDV-om“; dodatak, Korpa\Pdv) */
.tb-buy__pdv {
	color: var(--tb-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	font-variant-numeric: normal; /* tabular-nums reda cene širi crticu u „PDV-om“ */
}

.tb-buy .tb-buy__saving {
	margin-block-start: 0.2rem;
	color: var(--tb-sale);
	font-size: 0.875rem;
	font-weight: 600;
}

.tb-buy__excerpt {
	margin-block-start: 1rem;
	color: #3f4a45;
	font-size: 0.9rem;
	line-height: 1.65;
}

.tb-buy__excerpt > * {
	margin: 0;
}

.tb-buy__excerpt > * + * {
	margin-block-start: 0.5rem;
}

/* --------------------------------------------------------------------------
   Karakteristike, dostupnost, isporuka (dve kolone sa ikonicama)
   -------------------------------------------------------------------------- */
.tb-buy__specs {
	display: grid;
	grid-template-columns: minmax(8.5rem, 44%) minmax(0, 1fr);
	gap: 0.45rem 1rem;
	margin-block: 1.1rem 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--tb-line);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.tb-buy__spec {
	display: contents;
}

.tb-buy__spec dt {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--tb-muted);
}

.tb-buy__spec dt .tb-ico {
	margin-block-start: 0.05rem;
	color: var(--tb-ink);
}

.tb-buy__spec dt .tb-ico::before {
	inline-size: 1rem;
	block-size: 1rem;
}

.tb-buy__spec dd {
	margin: 0;
	color: var(--tb-ink);
	overflow-wrap: anywhere;
}

.tb-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 500;
}

.tb-stock::before {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 999px;
	background: var(--tb-ok);
	box-shadow: 0 0 0 3px rgba(47, 122, 79, 0.16);
}

.tb-stock--onbackorder::before {
	background: var(--tb-wait);
	box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.18);
}

.tb-stock--outofstock::before {
	background: var(--tb-off);
	box-shadow: 0 0 0 3px rgba(138, 143, 139, 0.18);
}

/* --------------------------------------------------------------------------
   Varijacije: radio grupe kao „pilule“
   -------------------------------------------------------------------------- */
.tb-buy__form {
	margin-block-start: 1.25rem;
}

.tb-buy__variations {
	display: grid;
	gap: 1rem;
	margin-block-end: 1.1rem;
}

.tb-var {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
}

.tb-var__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-block-end: 0.55rem;
	padding: 0;
	font-size: 0.8125rem;
}

.tb-var__name {
	color: var(--tb-muted);
	font-weight: 500;
}

.tb-var__chosen {
	color: var(--tb-ink);
	font-weight: 600;
}

.tb-var__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* .tb-var ispred: WooCommerce ima „.woocommerce-page label { margin-bottom }“ */
.tb-var .tb-var__option {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

/* Pravi radio ostaje u stablu pristupačnosti i prima tastaturu (strelice), a vidi se pilula. */
.tb-var__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.tb-var__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-block-size: 2.5rem;
	padding: 0.45rem 0.95rem;
	border: 1px solid #cfcbc1;
	border-radius: 999px;
	background: #fff;
	color: var(--tb-ink);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	transition: border-color var(--tb-ease), background-color var(--tb-ease), box-shadow var(--tb-ease);
}

.tb-var__option:hover .tb-var__pill {
	border-color: var(--tb-forest);
}

.tb-var__input:checked + .tb-var__pill {
	border-color: var(--tb-forest);
	background: rgba(13, 53, 45, 0.06);
	box-shadow: inset 0 0 0 1px var(--tb-forest);
	font-weight: 600;
}

.tb-var__input:focus-visible + .tb-var__pill {
	outline: 2px solid var(--tb-focus, #9c7a3c);
	outline-offset: 2px;
}

.tb-var__dot {
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	border-radius: 999px;
	background: var(--tb-dot, #ccc);
	box-shadow: inset 0 0 0 1px rgba(23, 35, 31, 0.22);
}

.tb-var--colors .tb-var__pill {
	padding-inline-start: 0.45rem;
}

/* Rasprodato: može da se izabere, ali se vidi da nije na stanju */
.tb-var__option.is-out .tb-var__label {
	color: var(--tb-muted);
	text-decoration: line-through;
}

/* Kombinacija ne postoji uz ostale izabrane vrednosti */
.tb-var__input:disabled,
.tb-var__input:disabled + .tb-var__pill {
	cursor: not-allowed;
}

.tb-var__input:disabled + .tb-var__pill {
	border-style: dashed;
	background: var(--tb-paper);
	color: #767d78;
}

.tb-var__option:has(.tb-var__input:disabled):hover .tb-var__pill {
	border-color: #cfcbc1;
}

/* Nedostaje izbor (klik na korpu bez varijacije) */
.tb-var.is-missing .tb-var__pill {
	border-color: var(--tb-sale);
}

.tb-var.is-missing .tb-var__name {
	color: var(--tb-sale);
}

.tb-var.is-flash {
	animation: tb-var-flash 1.1s ease-out;
}

@keyframes tb-var-flash {
	0% { box-shadow: 0 0 0 0 rgba(201, 58, 41, 0.35); background: rgba(201, 58, 41, 0.06); }
	100% { box-shadow: 0 0 0 14px rgba(201, 58, 41, 0); background: transparent; }
}

.tb-buy__reset-row {
	margin: -0.35rem 0 0;
}

.tb-buy__reset {
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--tb-muted);
	font: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.tb-buy__reset:hover {
	color: var(--tb-ink);
}

.tb-buy.is-loading-variation .tb-buy__price {
	opacity: 0.55;
	transition: opacity 160ms ease;
}

/* --------------------------------------------------------------------------
   Količina, korpa, lista želja
   -------------------------------------------------------------------------- */
.tb-buy__actions {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 0.625rem;
}

/* Prodaje se samo jedan komad (bez polja za količinu): dugme zauzima i to mesto */
.tb-buy__actions:not(:has(.tb-qty input.qty:not([type="hidden"]))) {
	grid-template-columns: minmax(0, 1fr) auto;
}

.tb-qty {
	display: flex;
	flex: none;
	align-items: stretch;
	inline-size: 7.75rem;
	block-size: 3.125rem;
	overflow: hidden;
	border: 1px solid #cfcbc1;
	border-radius: 10px;
	background: #fff;
}

.tb-qty:focus-within {
	border-color: var(--tb-forest);
}

.tb-qty .quantity {
	display: flex;
	flex: 1;
	min-width: 0;
	margin: 0;
}

.tb-qty .qty {
	inline-size: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 0.25rem;
	border: 0;
	background: transparent;
	color: var(--tb-ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.tb-qty .qty::-webkit-outer-spin-button,
.tb-qty .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.tb-qty .qty:focus-visible {
	outline: 2px solid var(--tb-focus, #9c7a3c);
	outline-offset: -3px;
	border-radius: 6px;
}

/* Prodaje se samo jedan komad: WooCommerce daje skriveno polje, pa se okvir ne prikazuje */
.tb-qty:not(:has(input.qty:not([type="hidden"]))) {
	display: none;
}

.tb-qty__btn {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 2.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tb-ink);
	cursor: pointer;
	transition: background-color var(--tb-ease);
}

.tb-qty__btn:hover {
	background: var(--tb-paper);
}

.tb-qty__btn:focus-visible {
	outline-offset: -3px;
}

.tb-qty__btn[aria-disabled="true"] {
	color: #a7aca8;
	cursor: default;
}

.tb-qty__btn[aria-disabled="true"]:hover {
	background: none;
}

.tb-buy__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-width: 0;
	min-block-size: var(--tb-control-h); /* Isto kao .tb-btn (dizajn sistem, stranica /stil/). */
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: var(--tb-radius);
	background: var(--tb-forest);
	color: var(--tb-white);
	font: inherit;
	font-size: var(--tb-fs-xs);
	font-weight: 600;
	letter-spacing: var(--tb-ls-caps);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--tb-ease), transform var(--tb-ease);
}

/* Telefon: kraće polje za količinu i zbijeniji tekst, da „Dodaj u korpu“ stane u jedan red */
@media (max-width: 479px) {
	.tb-buy__actions {
		gap: 0.5rem;
	}

	.tb-qty {
		inline-size: 7rem;
	}

	.tb-qty__btn {
		inline-size: 2.25rem;
	}

	.tb-buy__add {
		gap: 0.45rem;
		padding-inline: 0.75rem;
		font-size: 0.8125rem;
		letter-spacing: 0.03em;
	}
}

/* Uzak telefon (320-379px): dugme bez ikonice */
@media (max-width: 379px) {
	.tb-qty {
		inline-size: 6.25rem;
	}

	.tb-qty__btn {
		inline-size: 2rem;
	}

	.tb-buy__add {
		padding-inline: 0.5rem;
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}

	.tb-buy__add > .tb-ico {
		display: none;
	}

	.tb-buy__wish {
		inline-size: 2.75rem;
	}
}

.tb-buy__add:hover {
	background: var(--wp--preset--color--forest-2);
}

.tb-buy__add:active {
	transform: translateY(1px);
}

.tb-buy__add.is-disabled {
	background: #8a918d;
	cursor: not-allowed;
}

.tb-buy__add.is-added,
.tb-buy__bar-add.is-added {
	background: var(--tb-ok);
}

.tb-buy__add.is-added .tb-ico,
.tb-buy__bar-add.is-added .tb-ico {
	--tb-icon: url("../../assets/icons/check.svg");
}

.tb-buy__add.is-loading,
.tb-buy__bar-add.is-loading {
	cursor: progress;
}

.tb-buy__add.is-loading .tb-ico::before,
.tb-buy__bar-add.is-loading .tb-ico::before {
	-webkit-mask: none;
	mask: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 999px;
	background: none;
	animation: tb-spin 700ms linear infinite;
}

@keyframes tb-spin {
	to { transform: rotate(360deg); }
}

.tb-buy__wish {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3.125rem;
	block-size: 3.125rem;
	padding: 0;
	border: 1px solid #cfcbc1;
	border-radius: 10px;
	background: #fff;
	color: var(--tb-ink);
	cursor: pointer;
	transition: border-color var(--tb-ease), color var(--tb-ease);
}

.tb-buy__wish:hover {
	border-color: var(--tb-forest);
}

.tb-buy__wish[aria-pressed="true"] {
	border-color: var(--tb-sale);
	color: var(--tb-sale);
}

.tb-buy__wish[aria-pressed="true"] svg path {
	fill: currentColor;
}

.tb-buy__wish.is-popping {
	animation: tb-pop 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tb-pop {
	40% { transform: scale(1.12); }
}

.tb-buy .tb-buy__error {
	margin-block-start: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-left: 3px solid var(--tb-sale);
	border-radius: 6px;
	background: #fcefed;
	color: #9e2a1c;
	font-size: 0.875rem;
	font-weight: 500;
}

.tb-buy .tb-buy__error:empty {
	margin: 0;
	padding: 0;
	border: 0;
}

.tb-buy__unavailable {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--tb-line);
	border-radius: 10px;
	background: var(--tb-paper);
	color: var(--tb-muted);
	font-size: 0.9rem;
}

/* Stranica proizvoda usluge (pregled za urednika): napomena umesto obrasca za korpu. */
.tb-buy__service-note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-block-start: 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--tb-line);
	border-radius: 10px;
	background: var(--tb-paper);
	color: var(--tb-ink);
	font-size: 0.9rem;
	line-height: 1.5;
}

.tb-buy__service-note > .tb-ico {
	flex: none;
	margin-block-start: 0.1rem;
	color: var(--tb-forest);
}

.tb-buy__service-note-text {
	min-width: 0;
}

.tb-buy .tb-buy__service-note p {
	margin: 0;
}

.tb-buy .tb-buy__service-note p + p {
	margin-block-start: 0.35rem;
	color: var(--tb-muted);
}

.tb-buy__service-note a {
	color: var(--tb-ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tb-buy__service-note a:focus-visible {
	outline: 2px solid var(--tb-focus, #9c7a3c);
	outline-offset: 2px;
	border-radius: 2px;
}

/* WooCommerce (woocommerce.css) stilizuje „.woocommerce div.product form.cart …“ jakim selektorima,
   a WooCommerce omotava šablon u div.product; blok zadržava svoj raspored. */
.tb-buy__form.cart {
	margin-bottom: 0 !important;
}

.tb-buy__actions .tb-buy__add {
	display: inline-flex !important;
	margin: 0 !important;
	vertical-align: middle;
}

.tb-qty .quantity {
	float: none !important;
	margin: 0 !important;
}

.tb-qty .quantity .qty {
	width: 100% !important;
	/* Jače od „.woocommerce-page .input-text“ (woocommerce-blocktheme.css, 13 px): 16 px, da iOS ne zumira pri fokusu. */
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Usluga ispod dugmeta „Dodaj u korpu“ (pozicija „ispod-dugmeta“): sažeta kutija.
   HTML iz preporuke.php (ikonica, naslov, tekst, dugmad, napomene); raspored daje grid.
   Dugme je obrubljeno, da glavno dugme „Dodaj u korpu“ ostane prvo po važnosti.
   -------------------------------------------------------------------------- */
.tb-buy .tb-buy-service {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	grid-template-rows: minmax(2.5rem, auto);
	grid-template-areas:
		"icon title"
		"icon text"
		"icon actions"
		"icon notes";
	align-items: start;
	column-gap: 0.85rem;
	margin-block-start: 1.1rem;
	padding: 1rem 1.1rem 1.05rem;
	border: 1px solid var(--tb-line);
	border-radius: 10px;
	background: var(--tb-paper);
}

.tb-buy-service__icon {
	display: grid;
	grid-area: icon;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 1px solid var(--tb-line);
	border-radius: 50%;
	background: #fff;
	color: var(--tb-forest);
}

.tb-buy-service__icon .tb-ico::before {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.tb-buy .tb-buy-service__title {
	grid-area: title;
	align-self: center;
	margin: 0;
	color: var(--tb-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.tb-buy .tb-buy-service__text {
	grid-area: text;
	margin-block-start: 0.2rem;
	color: #3f4a45;
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Dugme i „Saznaj više“ jedno ispod drugog: kada skripta usluge promeni tekst dugmeta („Dodato u korpu“), ništa ne skače. */
.tb-buy-service__actions {
	display: grid;
	grid-area: actions;
	justify-items: start;
	gap: 0.2rem;
	margin-block-start: 0.75rem;
}

.tb-buy-service__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: 0.45rem 1rem;
	border: 1.5px solid var(--tb-forest);
	border-radius: 10px;
	background: #fff;
	color: var(--tb-forest);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--tb-ease), color var(--tb-ease);
}

.tb-buy-service__btn:hover {
	background: var(--tb-forest);
	color: #fff;
	text-decoration: none;
}

/* Stanja dugmeta usluge: „u korpi“ (server ili skripta usluge) i dodavanje u toku. */
.tb-buy-service__btn.is-added,
.tb-buy-service__btn.is-added:hover {
	border-color: var(--tb-ok);
	background: #fff;
	color: var(--tb-ok);
}

.tb-buy-service__btn.is-loading,
.tb-buy-service__btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.8;
}

.tb-buy-service__btn[aria-disabled="true"] {
	cursor: default;
}

/* Greška skripte usluge (p.tb-usluga-greska odmah posle dugmeta). */
.tb-buy-service__actions > .tb-usluga-greska {
	margin: 0;
	font-size: 0.8125rem;
}

.tb-buy-service__btn:focus-visible,
.tb-buy-service__more:focus-visible {
	outline: 2px solid var(--tb-focus, #9c7a3c);
	outline-offset: 2px;
}

.tb-buy-service__more {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.25rem;
	color: var(--tb-forest);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tb-buy-service__notes {
	display: grid;
	grid-area: notes;
	gap: 0.15rem;
	margin-block-start: 0.6rem;
}

.tb-buy .tb-buy-service__note {
	color: #5c635e;
	font-size: 0.75rem;
	line-height: 1.45;
}

/* Telefon: tekst, dugme i napomene ispod reda sa ikonicom i naslovom; dugme preko cele širine. */
@media (max-width: 479px) {
	.tb-buy .tb-buy-service {
		grid-template-areas:
			"icon title"
			"text text"
			"actions actions"
			"notes notes";
		padding: 0.9rem 1rem 1rem;
	}

	.tb-buy .tb-buy-service__text {
		margin-block-start: 0.5rem;
	}

	.tb-buy-service__actions {
		justify-items: center;
		gap: 0.15rem;
	}

	.tb-buy-service__btn {
		justify-self: stretch;
	}
}

/* --------------------------------------------------------------------------
   Prednosti (dostava, isporuka, povrat, sigurnost)
   -------------------------------------------------------------------------- */
.tb-buy .tb-buy__trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 1rem;
	margin: 1.35rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--tb-line);
	list-style: none;
}

/* Četiri u redu samo kada je blok širok (600-899px: kolone su jedna ispod druge); u uskoj koloni 2 x 2 */
@media (min-width: 600px) and (max-width: 899px) {
	.tb-buy .tb-buy__trust {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tb-buy__trust-item {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	min-width: 0;
}

.tb-buy__trust-item .tb-ico {
	color: var(--tb-forest);
}

.tb-buy__trust-item .tb-ico::before {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.tb-buy__trust-text {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
	font-size: 0.75rem;
	line-height: 1.35;
}

.tb-buy__trust-text strong {
	color: var(--tb-ink);
	font-weight: 600;
}

.tb-buy__trust-text span {
	color: var(--tb-muted);
}

/* Prednost sa linkom (roba po meri: Reklamacije i povrat) */
.tb-buy__trust-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tb-buy__trust-text a:hover {
	color: var(--tb-forest);
}

/* --------------------------------------------------------------------------
   Deljenje
   -------------------------------------------------------------------------- */
.tb-buy__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-block-start: 1.1rem;
	font-size: 0.8125rem;
}

.tb-buy__share-label {
	margin-inline-end: 0.15rem;
	color: var(--tb-muted);
	font-weight: 500;
}

.tb-share {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-block-size: 2rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--tb-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tb-ink);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--tb-ease), background-color var(--tb-ease);
}

.tb-share svg {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
}

.tb-share:hover {
	border-color: var(--tb-forest);
	color: var(--tb-ink);
	text-decoration: none;
}

.tb-share.is-done {
	border-color: var(--tb-ok);
	background: rgba(47, 122, 79, 0.08);
}

/* --------------------------------------------------------------------------
   Donja traka za kupovinu (telefon): iznad donje trake sajta (62px), nikad preko nje
   -------------------------------------------------------------------------- */
.tb-buy__bar {
	display: none;
}

@media (max-width: 767px) {
	.tb-buy__bar {
		position: fixed;
		right: 0;
		bottom: var(--tb-tabbar-h, calc(63px + var(--tb-sa-b)));
		left: 0;
		z-index: 94;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.7rem;
		padding: 0.55rem max(1rem, var(--tb-sa-r)) 0.55rem max(1rem, var(--tb-sa-l));
		border-top: 1px solid var(--tb-line);
		background: #fff;
		box-shadow: 0 -10px 30px rgba(16, 33, 28, 0.1);
		visibility: hidden;
		transform: translateY(calc(100% + var(--tb-tabbar-h, 63px)));
		transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 260ms;
	}

	.tb-buy__bar.is-visible {
		visibility: visible;
		transform: none;
		transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
	}

	.tb-buy__bar-img {
		inline-size: 44px;
		block-size: 44px;
		border-radius: 8px;
		object-fit: cover;
		background: var(--tb-paper);
	}

	.tb-buy__bar-info {
		min-width: 0;
	}

	.tb-buy .tb-buy__bar-name {
		overflow: hidden;
		color: var(--tb-ink);
		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tb-buy .tb-buy__bar-price {
		display: flex;
		align-items: baseline;
		gap: 0.3rem;
		min-width: 0;
		overflow: hidden;
		font-size: 0.75rem;
		line-height: 1.35;
		white-space: nowrap;
	}

	/* Cena se ne skraćuje; kada nema mesta, skraćuju se jedinica i varijanta. */
	.tb-buy__bar-now {
		flex: none;
		color: var(--tb-ink);
		font-size: 0.9375rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.tb-buy__bar-now.is-sale,
	.tb-buy__bar-now ins {
		color: var(--tb-sale);
		text-decoration: none;
	}

	.tb-buy__bar-now del {
		display: none;
	}

	.tb-buy__bar-unit {
		color: var(--tb-muted);
	}

	.tb-buy__bar-var {
		overflow: hidden;
		color: var(--tb-muted);
		text-overflow: ellipsis;
	}

	.tb-buy__bar-var:not(:empty)::before {
		content: "· ";
	}

	.tb-buy__bar-add {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		min-block-size: 2.75rem;
		padding: 0 1rem;
		border: 0;
		border-radius: 10px;
		background: var(--tb-forest);
		color: #fff;
		font: inherit;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
	}

	/* Mesto za traku na dnu stranice i za element u fokusu */
	body.tb-has-buybar {
		padding-bottom: calc(var(--tb-tabbar-h, 63px) + var(--tb-buybar-h, 62px));
	}

	html:has(body.tb-has-buybar) {
		scroll-padding-bottom: calc(var(--tb-tabbar-h, 63px) + var(--tb-buybar-h, 62px) + 1rem);
	}

	body.tb-buybar-on .tb-toast {
		bottom: calc(var(--tb-tabbar-h, 63px) + var(--tb-buybar-h, 62px) + 0.75rem);
	}
}

/* Uzan telefon (320): izabrana varijacija ide u svoj red, da se ne izgubi u „…“ */
@media (max-width: 359px) {
	.tb-buy .tb-buy__bar-price {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.tb-buy__bar-var {
		flex: 1 0 100%;
		min-width: 0;
		white-space: nowrap;
	}

	.tb-buy__bar-var:not(:empty)::before {
		content: none;
	}
}

/* --------------------------------------------------------------------------
   Sticky traka sa delovima stranice (A-011, A-012). Prikaz i položaj vodi view.js:
   - od 768px (računar i tablet): jedna traka, levo linkovi, desno cena i „Dodaj u korpu“; pojavljuje se kada
     glavno dugme ode iznad ekrana, stoji ispod zaglavlja dok je vidljivo, a na vrhu kada se zaglavlje sakrije;
   - telefon: samo linkovi (kupovina je u donjoj traci), vodoravni skrol, pri skrolu nagore ispod zaglavlja;
   - visina prozora ispod 500px (veliko uvećanje): bez trake.
   --tb-snav-y je donja ivica zaglavlja (ili vrh ekrana) u px; neprozirna pozadina, ispod zaglavlja (z 100).
   -------------------------------------------------------------------------- */
.tb-snav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 93;
	margin: 0; /* .tb-buy > * + * daje razmak, a fiksnu traku bi pomerio nadole */
	border-bottom: 1px solid var(--tb-line);
	background: #fff;
	box-shadow: 0 6px 24px rgba(16, 33, 28, 0.08);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(calc(var(--tb-snav-y, 0px) - 100% - 24px));
	transition: transform 260ms ease, visibility 0s linear 260ms, opacity 0s linear 260ms;
}

.tb-snav[hidden] {
	display: none;
}

/* Tastatura (view.js, posle tastera Tab): skrivena traka ostaje providna iznad ekrana, ali u redosledu
   fokusa, i pojavljuje se čim fokus uđe u nju (kao link za preskakanje). */
.tb-snav.is-kbd {
	visibility: visible;
	transition: transform 260ms ease, opacity 0s linear 260ms; /* odmah u redosledu fokusa, već za taj Tab */
}

.tb-snav.is-visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	/* Sakriveno zaglavlje: traka je na vrhu ekrana, ali ispod statusne trake (sigurna zona). */
	transform: translateY(max(var(--tb-snav-y, 0px), var(--tb-sa-t)));
	transition: transform 260ms ease, visibility 0s, opacity 0s;
}

.tb-snav__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	box-sizing: content-box;
	max-width: var(--wp--style--global--content-size, 1280px);
	min-block-size: 3.5rem;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1rem) var(--wp--style--root--padding-right, 1rem);
}

.tb-snav__nav {
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
}

.tb-buy .tb-snav__list {
	position: relative;
	display: flex;
	gap: clamp(1.25rem, 2.6vw, 2.5rem);
	block-size: 100%;
	margin: 0;
	padding: 0 2px;
	overflow-x: auto;
	list-style: none;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.tb-snav__list::-webkit-scrollbar {
	display: none;
}

/* Ima još linkova levo ili desno (view.js): ivica se blago gasi, da se vidi da traka može da se pomeri. */
.tb-buy .tb-snav__list.is-more-end {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.tb-buy .tb-snav__list.is-more-start {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

.tb-buy .tb-snav__list.is-more-start.is-more-end {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.tb-snav__item {
	display: flex;
	flex: none;
	margin: 0;
}

.tb-snav__item[hidden] {
	display: none;
}

.tb-snav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding: 0 0.3rem;
	color: var(--tb-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--tb-ease);
}

.tb-snav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--tb-forest);
	transform: scaleX(0);
	transition: transform 220ms ease;
}

.tb-snav__link:hover,
.tb-snav__link[aria-current="true"] {
	color: var(--tb-ink);
	text-decoration: none;
}

.tb-snav__link[aria-current="true"]::after {
	transform: scaleX(1);
}

/* Traka ima overflow, pa okvir fokusa ide unutra da se ne odseče (kao tabovi detalja). */
.tb-snav__link:focus-visible {
	outline: 2px solid var(--tb-focus, #9c7a3c);
	outline-offset: -2px;
	border-radius: 6px;
}

.tb-snav__buy {
	display: flex;
	flex: none;
	align-items: center;
	gap: 1rem;
}

.tb-buy .tb-snav__price {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0;
	line-height: 1.2;
	white-space: nowrap;
}

.tb-snav__now {
	color: var(--tb-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tb-snav__now.is-sale,
.tb-snav__now ins {
	color: var(--tb-sale);
	text-decoration: none;
}

.tb-snav__now del {
	display: none;
}

.tb-snav__unit {
	color: var(--tb-muted);
	font-size: 0.8125rem;
}

.tb-snav__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 2.625rem;
	padding: 0 1.1rem;
	border: 0;
	border-radius: 10px;
	background: var(--tb-forest);
	color: #fff;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--tb-ease);
}

.tb-snav__add:hover {
	background: var(--wp--preset--color--forest-2);
}

.tb-snav__add.is-added {
	background: var(--tb-ok);
}

.tb-snav__add.is-added .tb-ico {
	--tb-icon: url("../../assets/icons/check.svg");
}

.tb-snav__add.is-loading {
	cursor: progress;
}

.tb-snav__add.is-loading .tb-ico::before {
	-webkit-mask: none;
	mask: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 999px;
	background: none;
	animation: tb-spin 700ms linear infinite;
}

/* Tablet (768-1023px): isti raspored kao računar, zbijeniji; linkovi se pomeraju vodoravno ako ne staju. */
@media (max-width: 1023px) {
	.tb-snav__inner {
		gap: 1rem;
		min-block-size: 3.25rem;
	}

	.tb-buy .tb-snav__list {
		gap: 1.25rem;
	}

	.tb-snav__link {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}

	.tb-snav__buy {
		gap: 0.75rem;
	}

	.tb-snav__add {
		padding-inline: 0.9rem;
	}
}

/* Telefon: samo linkovi, traka od ivice do ivice, 40px (meta i dalje veća od 24 x 24px), da fiksni delovi
   ekrana ostanu mali (zaglavlje i linkovi se vide samo pri skrolu nagore). */
@media (max-width: 767px) {
	.tb-snav__buy {
		display: none;
	}

	.tb-snav__inner {
		min-block-size: 2.5rem;
		padding-inline: 0;
	}

	.tb-snav__link {
		min-block-size: 2.5rem;
		letter-spacing: 0.04em;
	}

	.tb-buy .tb-snav__list {
		gap: 1rem;
		padding-inline: 0.75rem;
		scroll-padding-inline: 0.75rem;
	}
}

/* Veliko uvećanje ili nizak prozor: bez sticky trake (sadržaj ostaje dostupan skrolom). */
@media (max-height: 499px) {
	.tb-snav {
		display: none;
	}
}

@media print {
	.tb-snav {
		display: none;
	}
}

/* Režim visokog kontrasta: aktivna stavka je podvučena (pozadina linije se tu ne vidi). */
@media (forced-colors: active) {
	.tb-snav {
		border-bottom-color: CanvasText;
	}

	.tb-snav__link[aria-current="true"] {
		text-decoration: underline;
		text-decoration-thickness: 3px;
		text-underline-offset: 6px;
	}
}

/* --------------------------------------------------------------------------
   Obaveštenje „Dodato u korpu“: osnovni izgled je zajednički (theme.css, odeljak 8); ovde samo greška.
   -------------------------------------------------------------------------- */
.tb-toast--error {
	background: #9e2a1c;
}

/* Unutar trake i elementi bez sopstvenog prelaza: opšte pravilo teme (transition-duration 0.01ms na *) bi
   nasleđenu vidljivost menjalo tek u sledećem kadru, pa bi prvi Tab preskočio linkove trake. */
@media (prefers-reduced-motion: reduce) {
	.tb-buy__bar,
	.tb-buy__bar.is-visible,
	.tb-snav,
	.tb-snav.is-visible,
	.tb-snav *,
	.tb-snav__link::after,
	.tb-toast,
	.tb-var__pill {
		transition: none !important;
	}

	.tb-var.is-flash,
	.tb-buy__wish.is-popping {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Upoređivanje: dugme „Uporedi“ ispod dugmadi za korpu i listu želja (izbor i traku vodi dodatak).
   Sekundarno i nisko, da ne konkuriše dugmetu „Dodaj u korpu“; izabrano je tamnozeleno sa kvačicom.
   -------------------------------------------------------------------------- */
.tb-buy > .tb-buy__cmp {
	margin-block-start: 0.75rem;
}

.tb-buy__cmp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: var(--tb-control-h-sm, 44px);
	padding: 0 1rem 0 0.85rem;
	border: 1px solid #cfcbc1;
	border-radius: 10px;
	background: #fff;
	color: var(--tb-ink);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color var(--tb-ease), background-color var(--tb-ease), color var(--tb-ease);
}

.tb-buy__cmp:hover {
	border-color: var(--tb-forest);
	color: var(--tb-forest);
}

.tb-buy__cmp[aria-pressed="true"] {
	border-color: var(--tb-forest);
	background: var(--tb-forest);
	color: #fff;
}

/* Izabrano: kvačica umesto ikonice */
.tb-buy__cmp[aria-pressed="true"] svg {
	display: none;
}

.tb-buy__cmp[aria-pressed="true"] .tb-buy__cmp-text::before {
	content: "✓ ";
	content: "✓ " / ""; /* čitač ekrana ne čita znak; stanje daje aria-pressed */
}

.tb-buy__cmp.is-popping {
	animation: tb-pop 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tb-buy__cmp.is-denied {
	animation: tb-cmp-no 420ms ease;
}

@keyframes tb-cmp-no {
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

@media (scripting: none) {
	.tb-buy__cmp {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tb-buy__cmp.is-popping,
	.tb-buy__cmp.is-denied {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   „Obavesti me kada stigne“ (dodatak, Obavestenja\Forma; filter tamban_proizvod_obavesti).
   - Jednostavan proizvod koji nije na stanju: dugme ispod poruke „nije na stanju“, obrazac ispod dugmeta; koren
     bloka ima is-rasprodato od servera, pa obe trake nude samo „Obavesti me“.
   - Varijabilan proizvod: kada je izabrana rasprodata varijanta (view.js: is-rasprodato), dugme stoji umesto
     količine i „Dodaj u korpu“, a u trakama „Obavesti me“ umesto „Dodaj u korpu“ / „U korpu“.
   - Bez JavaScript-a dugme je sakriveno, a obrazac otvoren (za varijabilan proizvod sa izborom varijante).
   -------------------------------------------------------------------------- */
.tb-obavesti-dugme {
	inline-size: 100%;
	gap: 0.6rem;
}

.tb-obavesti-dugme__tekst--prijavljeno,
.tb-obavesti-dugme.is-prijavljeno .tb-obavesti-dugme__tekst {
	display: none;
}

.tb-obavesti-dugme.is-prijavljeno .tb-obavesti-dugme__tekst--prijavljeno {
	display: inline;
}

.tb-obavesti-dugme.is-prijavljeno .tb-ico {
	--tb-icon: url("../../assets/icons/check.svg");
}

/* U redu sa dugmadima (varijacije): samo za rasprodatu izabranu varijantu, na mestu količine i „Dodaj u korpu“. */
.tb-buy__actions .tb-obavesti-dugme {
	display: none;
	grid-column: 1 / -2;
	min-block-size: 3.125rem;
}

.tb-buy--obavesti.is-rasprodato .tb-buy__actions {
	grid-template-columns: minmax(0, 1fr) auto;
}

.tb-buy--obavesti.is-rasprodato .tb-buy__actions .tb-obavesti-dugme {
	display: inline-flex;
}

.tb-buy--obavesti.is-rasprodato .tb-buy__actions :is([data-tb-qty], [data-tb-add]),
.tb-buy--obavesti.is-rasprodato :is([data-tb-snav-add], [data-tb-bar-add]) {
	display: none !important;
}

/* Dugmad u trakama: sekundarna (obrub), da se razlikuju od kupovine. */
.tb-snav__obavesti,
.tb-buy__bar-obavesti {
	display: none;
}

.tb-buy--obavesti.is-rasprodato .tb-snav__obavesti {
	display: inline-flex;
	border: 1.5px solid var(--tb-forest);
	background: #fff;
	color: var(--tb-forest);
}

.tb-buy--obavesti.is-rasprodato .tb-snav__obavesti:hover {
	background: var(--tb-forest);
	color: #fff;
}

@media (max-width: 767px) {
	.tb-buy--obavesti.is-rasprodato .tb-buy__bar-obavesti {
		display: inline-flex;
		border: 1.5px solid var(--tb-forest);
		background: #fff;
		color: var(--tb-forest);
	}

}

/* Uzan telefon (do 374 px): „Obavesti“ bez „me“ i uži razmak, da cena stane cela (ceo naziv je u aria-label). */
@media (max-width: 374px) {
	.tb-buy__bar-me {
		display: none;
	}

	.tb-buy--obavesti.is-rasprodato .tb-buy__bar-obavesti {
		gap: 0.35rem;
		padding-inline: 0.75rem;
	}
}

/* Jednostavan proizvod: dugme i obrazac ispod poruke „Proizvod trenutno nije na stanju“. */
.tb-buy .tb-buy__obavesti {
	display: grid;
	gap: 0.75rem;
}

/* Obrazac */
.tb-obavesti__panel {
	container-type: inline-size;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--tb-line);
	border-radius: 10px;
	background: var(--tb-paper);
}

.tb-obavesti .tb-obavesti__naslov {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Sa skriptom naslov ponavlja dugme iznad obrasca: ostaje samo za čitače ekrana. */
.tb-obavesti.is-js .tb-obavesti__naslov {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.tb-obavesti__forma {
	display: grid;
	gap: 0.85rem;
	margin: 0;
}

.tb-buy .tb-obavesti__uvod,
.tb-buy .tb-obavesti__obavezno,
.tb-buy .tb-obavesti__privatnost {
	color: var(--tb-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.tb-buy .tb-obavesti__obavezno {
	margin-block-start: -0.35rem;
	font-size: 0.8125rem;
}

.tb-buy .tb-obavesti__varijanta {
	color: var(--tb-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.tb-obavesti__polja {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.85rem;
}

@container (min-width: 30rem) {
	.tb-obavesti__polja {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.tb-obavesti__polje--varijacija {
		grid-column: 1 / -1;
	}
}

.tb-obavesti__polje {
	min-width: 0;
}

.tb-obavesti .tb-input[readonly] {
	border-color: var(--tb-line);
	background: var(--tb-paper);
	color: var(--tb-muted);
}

.tb-obavesti .tb-obavesti__greska:empty {
	display: none;
}

/* Ikona greške ostaje uz prvi red kada tekst pređe u drugi. */
.tb-obavesti .tb-obavesti__greska.tb-ico {
	align-items: flex-start;
}

.tb-obavesti .tb-obavesti__greska.tb-ico::before {
	margin-top: 0.1em;
}

.tb-buy .tb-obavesti__privatnost a,
.tb-buy .tb-obavesti__prijavljeno a,
.tb-buy .tb-obavesti__status a {
	color: var(--tb-ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tb-buy .tb-obavesti__akcije {
	margin: 0;
}

.tb-obavesti__posalji {
	inline-size: 100%;
	gap: 0.6rem;
}

.tb-obavesti__posalji[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.7;
}

/* Skriveno polje za robote: van ekrana, ne i display:none (neki roboti ga tada preskaču). */
.tb-obavesti__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Poruke (region role="status" postoji od učitavanja, prazan se ne vidi) */
.tb-obavesti__status {
	margin: 0 0 0.85rem;
	padding: 0.75rem 0.9rem;
	border-left: 3px solid var(--tb-forest);
	border-radius: 6px;
	background: color-mix(in srgb, var(--tb-success, #2f7a4f) 9%, #fff);
	font-size: 0.875rem;
	line-height: 1.5;
}

.tb-obavesti__status:empty {
	margin: 0;
	padding: 0;
	border: 0;
}

.tb-obavesti__status.is-error {
	border-left-color: var(--tb-sale);
	background: #fcefed;
}

.tb-obavesti__status:focus {
	outline: none;
}

.tb-obavesti__status:focus-visible {
	outline: 2px solid var(--tb-focus, #9c7a3c);
	outline-offset: 2px;
}

.tb-buy .tb-obavesti__status p + p {
	margin-block-start: 0.3rem;
}

.tb-buy .tb-obavesti__status-naslov {
	font-weight: 600;
}

.tb-obavesti__zbir {
	margin: 0.4rem 0 0;
	padding-left: 1.25rem;
}

.tb-obavesti__prijavljeno {
	display: grid;
	gap: 0.3rem;
	font-size: 0.875rem;
}

/* Prijava sa naloga čeka potvrdu e-mailom: napomena iznad obrasca (obrazac ostaje za ponovno slanje). */
.tb-obavesti__ceka {
	margin: 0 0 0.85rem;
	padding: 0.75rem 0.9rem;
	border-left: 3px solid var(--tb-gold-dark, #9c7a3c);
	border-radius: 6px;
	background: #fff;
	font-size: 0.875rem;
	line-height: 1.5;
}

.tb-buy .tb-obavesti__ceka p {
	margin: 0;
}

.tb-obavesti__prijavljeno:focus,
.tb-obavesti__ceka:focus {
	outline: none;
}

.tb-obavesti__prijavljeno:focus-visible,
.tb-obavesti__ceka:focus-visible {
	outline: 2px solid var(--tb-focus, #9c7a3c);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.tb-obavesti__panel,
	.tb-obavesti__status {
		border: 1px solid CanvasText;
	}
}

/* --------------------------------------------------------------------------
   Prst (pointer: coarse): dugmad i polja najmanje 44 x 44 px (README, Pristupačnost). Računar ostaje isti.
   - količina: „-“ i „+“ su široki 44 px, polje između njih je visoko 50 px (uže je od 44 px samo po širini,
     da „Dodaj u korpu“ i srce staju u red i na 320 px);
   - „Poništi izbor“ i deljenje: 44 px visine, a razmak oko njih ostaje isti (negativna margina);
   - „Dodaj u korpu“ u gornjoj traci (tablet) 44 px.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
	.tb-qty {
		inline-size: auto;
	}

	.tb-qty .quantity {
		flex: none;
		inline-size: 2.5rem;
	}

	.tb-qty__btn {
		inline-size: 44px;
	}

	.tb-buy__reset {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
		margin-block: -7px;
	}

	.tb-buy__share {
		row-gap: 0.25rem;
	}

	.tb-share {
		min-block-size: 44px;
		padding-inline: 0.75rem;
	}

	.tb-snav__add {
		min-block-size: 44px;
	}
}

@media (pointer: coarse) and (max-width: 379px) {
	.tb-qty .quantity {
		inline-size: 2.25rem;
	}

	.tb-buy__actions {
		gap: 0.375rem;
	}
}

/*
 * 320-359 px na dodir: „Dodaj u korpu“ ostaje u jednom redu i uz „-“ i „+“ od 44 px (tekst je oko 101 px, a dugmetu
 * bi ostalo 100 px sa razmakom): uže polje količine (24 px, dovoljno za dve cifre od 16 px), manji razmaci i
 * unutrašnji razmak dugmeta, bez razmaka slova. Dugme i dalje 50 px visine, srce 44 px.
 */
@media (pointer: coarse) and (max-width: 359px) {
	.tb-qty .quantity {
		inline-size: 2rem;
	}

	.tb-buy__actions {
		gap: 0.25rem;
	}

	.tb-buy__add {
		padding-inline: 0.25rem;
		letter-spacing: 0;
	}
}