/*
 * OptiReview: stran izdelka.
 * Galerija in nakupni okvir, nato pasovi: mnenje, črna plošča lastnosti, koraki, primerjava,
 * vprašanja, sorodni izdelki, poziv. Črne plošče so zaobljene kot kartica sama.
 */

.site-main--product {
	padding-block: 0;
}

.site-main--product > .woocommerce-notices-wrapper {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 16px auto 0;
	padding-inline: var(--gutter);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0;
	padding: 14px 18px;
	border-radius: var(--radius);
	background: var(--sky);
	color: var(--ink);
	font-weight: 500;
	list-style: none;
}

.woocommerce-error {
	background: #fdecec;
	color: #8f1d1d;
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	min-height: 40px;
	padding: 0 16px;
	font-size: 0.875rem;
}

/* Galerija in nakupni okvir */

.pdp-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4.5vw, 72px);
	align-items: start;
	padding-bottom: clamp(48px, 6vw, 88px);
}

.pdp-gallery {
	position: relative;
	min-width: 0;
}

@media (min-width: 901px) {
	.pdp-gallery {
		position: sticky;
		top: calc(var(--header-h) + 24px);
	}

	.admin-bar .pdp-gallery {
		top: calc(var(--header-h) + 56px);
	}
}

.woocommerce-product-gallery {
	position: relative;
	margin: 0;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child,
.no-js .woocommerce-product-gallery__image {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--sky);
}

.woocommerce-product-gallery__image a {
	display: block;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(11, 12, 15, 0.12);
	transition: transform 0.2s var(--ease-out);
}

.woocommerce-product-gallery__trigger:hover {
	transform: scale(1.06);
}

.woocommerce-product-gallery__trigger span {
	display: none;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: var(--sky);
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.2s, border-color 0.2s;
}

.flex-control-thumbs li img:hover {
	opacity: 1;
}

.flex-control-thumbs li img.flex-active {
	border-color: var(--ink);
	opacity: 1;
}

.onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.pdp-summary {
	min-width: 0;
	padding-top: 4px;
}

.pdp-summary .product_title {
	margin-bottom: 16px;
	font-size: clamp(1.625rem, 1.25rem + 0.9vw, 2.125rem);
	letter-spacing: -0.02em;
	line-height: 1.08;
}

.pdp-summary .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-bottom: 20px;
	color: var(--ink);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.price del {
	color: var(--muted);
	font-size: 0.65em;
	font-weight: 500;
}

.price ins {
	text-decoration: none;
}

.woocommerce-product-details__short-description {
	margin-bottom: 28px;
	color: var(--muted);
}

.woocommerce-product-details__short-description ul {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-details__short-description li {
	position: relative;
	padding-left: 32px;
	color: var(--ink);
	font-weight: 500;
}

.woocommerce-product-details__short-description li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Obrazec za nakup */

.pdp-summary form.cart {
	margin: 0;
}

.pdp-summary table.variations {
	width: 100%;
	margin: 0 0 20px;
	border: 0;
	border-collapse: collapse;
}

.pdp-summary table.variations th.label {
	display: none;
}

.pdp-summary table.variations td {
	display: block;
	padding: 0;
}

.js .pdp-summary table.variations select {
	display: none;
}

.pdp-summary table.variations select {
	width: 100%;
	height: 52px;
	padding: 0 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	font: 500 1rem var(--font);
}

.choice {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.choice__legend {
	margin-bottom: 12px;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.no-js .choice,
html:not(.js) .choice {
	display: none;
}

.choice__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 14px 18px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.choice__row + .choice__row {
	margin-top: 10px;
}

.choice__row:hover {
	border-color: #c3cad6;
}

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

.choice__radio {
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid #b4bccb;
	border-radius: 999px;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.choice__text {
	font-weight: 600;
}

.choice__row:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.choice__row:has(input:checked) .choice__radio {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--accent);
}

.choice__row:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.single_variation_wrap .woocommerce-variation:empty,
.single_variation_wrap .woocommerce-variation-price:empty,
.single_variation_wrap .woocommerce-variation-availability:empty,
.single_variation_wrap .woocommerce-variation-description:empty {
	display: none;
}

.single_variation_wrap .woocommerce-variation-price .price {
	margin-bottom: 12px;
	font-size: 1.25rem;
}

.woocommerce-variation-add-to-cart,
.pdp-summary form.cart:not(.variations_form) {
	display: flex;
	gap: 12px;
}

.quantity {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 56px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

.quantity .qty {
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: 600 1.0625rem var(--font);
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.qty-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s;
}

.qty-btn:hover {
	background: var(--sky-soft);
}

html:not(.js) .qty-btn {
	display: none;
}

.single_add_to_cart_button {
	position: relative;
	flex: 1;
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font: 600 1.0625rem var(--font);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s var(--ease-out), opacity 0.2s;
}

.single_add_to_cart_button:hover {
	background: var(--accent-hover);
}

.single_add_to_cart_button:active {
	transform: translateY(1px);
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Cena na gumbu: v vrstici za napisom, v ozki vrstici (telefon, ozek stolpec) pod njim. */
.woocommerce-variation-add-to-cart,
.pdp-summary form.cart:not(.variations_form) {
	container-type: inline-size;
}

.atc-price {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.atc-price[hidden] {
	display: none;
}

/* Razmik pred piko da gap gumba (.button v main.css), za njo ta rob. */
.atc-price::before {
	content: "·";
	content: "·" / "";
	margin-right: 10px;
	opacity: 0.7;
}

@container (max-width: 470px) {
	.single_add_to_cart_button {
		flex-direction: column;
		gap: 2px;
		padding-inline: 16px;
		line-height: 1.25;
	}

	.atc-price {
		font-size: 0.875rem;
		font-weight: 500;
		opacity: 0.9;
	}

	.atc-price::before {
		content: none;
	}
}

/* Povezavo "Prikaži košarico", ki jo WooCommerce doda za gumb po dodajanju, nadomesti predal s košarico. */
.pdp-summary .added_to_cart {
	display: none;
}

.single_add_to_cart_button.is-loading,
.buybar__btn.is-loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.single_add_to_cart_button.is-loading::after,
.buybar__btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
	margin: auto;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 999px;
	animation: spin 0.7s linear infinite;
}

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

.stock.out-of-stock {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #f3f4f6;
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.pdp-delivery {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	color: var(--muted);
	font-size: 0.875rem;
}

.pdp-delivery strong {
	color: var(--ink);
	font-weight: 600;
}

.pdp-delivery__dot {
	position: relative;
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--ok);
}

/* Utrip: obroč se razširi in zbledi, pika ostane mirna. */
.pdp-delivery__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ok);
	animation: pdp-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pdp-pulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}

	80%,
	100% {
		transform: scale(2.8);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdp-delivery__dot::after {
		animation: none;
		opacity: 0;
	}
}

/* Enak razmik kot nad vrstico zaloge, da ta stoji na sredini med gumbom in kartico. */
.pdp-linked {
	margin-top: 22px;
	padding: 18px;
	border-radius: var(--radius-lg);
	background: var(--sky);
	color: var(--muted-on-sky);
	font-size: 0.875rem;
}

.pdp-linked p {
	margin: 0;
}

.pdp-linked__title {
	margin-bottom: 2px !important;
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Harmonike (nakupni okvir in vprašanja) */

.pdp-accordions {
	margin-top: 24px;
	border-top: 1px solid var(--line);
}

.acc {
	border-bottom: 1px solid var(--line);
}

.acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.acc summary:hover {
	color: var(--accent);
}

.acc__chevron {
	color: var(--muted);
	transition: transform 0.3s var(--ease-out);
}

.acc[open] .acc__chevron {
	transform: rotate(180deg);
}

.acc::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
}

.acc[open]::details-content {
	block-size: auto;
}

.acc__body {
	padding-bottom: 18px;
	color: var(--muted);
	font-size: 0.9375rem;
}

.acc__body ul {
	margin: 0 0 12px;
	padding-left: 18px;
}

.acc__body li + li {
	margin-top: 6px;
}

.acc__body p:last-child {
	margin-bottom: 0;
}

.acc__body--size img {
	width: 100%;
	max-width: 360px;
	height: auto;
	margin: 0 auto 12px;
	border-radius: var(--radius);
	background: var(--sky);
}

.acc__body--size p {
	text-align: left !important;
}

/* Pasovi */

.band {
	padding-block: var(--band-y);
}

.band__title {
	margin-bottom: 16px;
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.75rem);
	letter-spacing: -0.022em;
	line-height: 1.08;
}

.band__head {
	max-width: 660px;
	margin: 0 auto clamp(32px, 4vw, 56px);
	text-align: center;
}

.band__head p {
	margin: 0;
	color: var(--muted);
	font-size: 1.0625rem;
}

/* Mnenje */

.band--quote {
	background: #f4f4f6;
	padding-block: clamp(56px, 7vw, 96px);
}

.quote {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.quote__photo {
	width: 88px;
	height: 88px;
	margin: 0 auto 24px;
	border: 4px solid #fff;
	border-radius: 999px;
	object-fit: cover;
}

.quote__text {
	margin: 0;
}

.quote__text p {
	margin: 0;
	font-size: clamp(1.375rem, 1rem + 1.35vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
	text-wrap: balance;
}

.quote__text mark {
	padding: 0 0.1em;
	background: linear-gradient(transparent 60%, rgba(74, 74, 216, 0.24) 60%);
	color: inherit;
}

.quote__author {
	margin-top: 20px;
	color: var(--muted);
	font-size: 0.9375rem;
}

/* Temne plošče (lastnosti, primerjava): material .panel iz main.css */

.slab {
	padding: clamp(24px, 4vw, 56px);
}

.features {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.features__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--sky);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.65);
}

.features__media img,
.features__media video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.features__toggle {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(11, 12, 15, 0.6);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s;
}

.features__toggle:hover {
	background: rgba(11, 12, 15, 0.82);
}

.features__toggle[hidden],
.features__toggle .icon--play,
.features__toggle.is-paused .icon--pause {
	display: none;
}

.features__toggle.is-paused .icon--play {
	display: block;
}

.features__toggle .icon {
	fill: currentColor;
	stroke: none;
}

.features .band__title {
	margin-bottom: clamp(24px, 3vw, 40px);
	color: #fff;
}

.features__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.features__list .icon {
	color: var(--accent-on-ink);
}

.features__list h3 {
	margin: 14px 0 6px;
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.features__list p {
	margin: 0;
	color: var(--muted-on-ink);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/*
 * Kako deluje: ponazoritev v HTML in koraki ob njej.
 * Zanka traja --howto-t in ima tri enake faze: dotik (pri nalepki skeniranje), obrazec z objavo, nova ocena na seznamu.
 * Aktivni korak in njegova črta napredka tečeta v istem ritmu kot prizor. Barve v telefonu posnemajo Googlov obrazec
 * in niso žetoni sistema. Brez gibanja je viden izpolnjen obrazec, vsi koraki so enakovredni.
 */

/* Kako deluje stoji takoj pod mnenjem (sivi pas); črn pas z lastnostmi pod njim nima zgornjega odmika. */
.band--steps + .band--ink {
	padding-top: 0;
}

.howto {
	--howto-t: 9s;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.howto__stage {
	position: relative;
}

.howto__scene {
	position: relative;
	aspect-ratio: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-slab);
	background:
		radial-gradient(52% 48% at 70% 44%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%),
		var(--sky);
}

.howto__obj {
	position: absolute;
	top: 27%;
	left: 9%;
	width: 27%;
	height: auto;
	filter: drop-shadow(0 18px 22px rgba(11, 20, 40, 0.3));
}

.howto--card .howto__obj {
	z-index: 2;
	transform: rotate(-8deg);
}

.howto--qr .howto__obj {
	top: 25%;
}

/* Ploščica je prilepljena na podboj vrat; nanjo pride telefon. */
.howto__jamb {
	position: absolute;
	top: 0;
	left: 0;
	width: 54%;
	height: 100%;
}

.howto--plate .howto__obj {
	top: 21.4%;
	left: 10.3%;
	width: 36%;
	filter: drop-shadow(0 6px 10px rgba(11, 20, 40, 0.22));
}

/* Val dotika: trije obroči na mestu stika. */
.howto__waves {
	position: absolute;
	top: 36%;
	left: 60%;
	z-index: 3;
	width: 30%;
	aspect-ratio: 1;
	translate: -50% -50%;
	pointer-events: none;
}

.howto--plate .howto__waves {
	top: 38%;
	left: 33%;
}

.howto__waves i {
	position: absolute;
	inset: 0;
	border: 2px solid rgba(255, 255, 255, 0.95);
	border-radius: 999px;
	box-shadow: 0 0 0 1.5px rgba(74, 74, 216, 0.35);
	opacity: 0;
}

/* Telefon: velikosti v njem so v enotah cqw (širina zaslona). */
.howto__phone {
	position: absolute;
	top: 8%;
	left: 51%;
	z-index: 1;
	width: 39%;
	aspect-ratio: 9 / 19;
	padding: 1.5%;
	border-radius: 15% / 7.2%;
	background: #0a0a0c;
	box-shadow: inset 0 0 0 1.5px #3a3a42, 0 30px 60px -28px rgba(19, 19, 22, 0.5);
	container-type: inline-size;
}

.howto__screen {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: 12.5cqw;
	background: #fff;
}

.howto__screen::before {
	content: "";
	position: absolute;
	top: 3.2cqw;
	left: 50%;
	z-index: 6;
	width: 30cqw;
	height: 8.4cqw;
	border-radius: 999px;
	background: #0a0a0c;
	translate: -50% 0;
}

.howto__lock,
.howto__cam,
.howto__form,
.howto__list {
	position: absolute;
	inset: 0;
}

.howto__lock {
	z-index: 1;
	display: flex;
	justify-content: center;
	padding-top: 36cqw;
	background: #1c0006;
	color: #fff;
	opacity: 0;
}

.howto__lock::after {
	content: "";
	position: absolute;
	bottom: 4cqw;
	left: 50%;
	width: 36cqw;
	height: 1.6cqw;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	translate: -50% 0;
}

.howto__wall {
	position: absolute;
	inset: -8%;
	width: 116%;
	height: 116%;
	filter: blur(2.2cqw);
}

.howto__time {
	position: relative;
	font: 600 22cqw/1 var(--font);
	letter-spacing: -0.03em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* Fotoaparat: nalepka v kameri je enako velika kot resnična, zato se ob stiku pokrijeta. */
.howto__cam {
	z-index: 1;
	display: grid;
	place-items: center;
	background: var(--sky);
	opacity: 0;
}

.howto__cam-img {
	width: 75cqw;
	height: auto;
	filter: drop-shadow(0 18px 22px rgba(11, 20, 40, 0.3));
}

.howto__frame {
	position: absolute;
	top: 64%;
	left: 50%;
	width: 50cqw;
	aspect-ratio: 1;
	translate: -50% -50%;
	opacity: 0;
}

.howto__frame i {
	position: absolute;
	width: 12cqw;
	height: 12cqw;
	border: 0 solid #ffd60a;
}

.howto__frame i:nth-child(1) { top: 0; left: 0; border-width: 1.4cqw 0 0 1.4cqw; border-top-left-radius: 3cqw; }
.howto__frame i:nth-child(2) { top: 0; right: 0; border-width: 1.4cqw 1.4cqw 0 0; border-top-right-radius: 3cqw; }
.howto__frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.4cqw 1.4cqw; border-bottom-left-radius: 3cqw; }
.howto__frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.4cqw 1.4cqw 0; border-bottom-right-radius: 3cqw; }

.howto__shutter {
	position: absolute;
	bottom: 7cqw;
	left: 50%;
	width: 15cqw;
	height: 15cqw;
	border: 1.2cqw solid #fff;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.2cqw rgba(0, 0, 0, 0.25);
	background: #fff;
	background-clip: content-box;
	translate: -50% 0;
}

/* Obvestilo: pri NFC pasica na vrhu, pri QR rumena povezava v kameri. */
.howto__notice {
	position: absolute;
	top: 14cqw;
	right: 4cqw;
	left: 4cqw;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 3cqw;
	padding: 3.4cqw 4cqw;
	border-radius: 6cqw;
	background: rgba(246, 246, 248, 0.96);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	color: #1d1d1f;
	font-size: 3.9cqw;
	line-height: 1.25;
	opacity: 0;
}

.howto__notice strong,
.howto__notice small {
	display: block;
}

.howto__notice strong {
	font-weight: 600;
}

.howto__notice small {
	color: #3c3c43;
	font-size: 3.6cqw;
}

.howto__notice-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 9cqw;
	height: 9cqw;
	border-radius: 2.4cqw;
	background: #1d1d1f;
	color: #fff;
}

.howto__notice .icon {
	width: 5cqw;
	height: 5cqw;
}

.howto__notice--pill {
	top: auto;
	right: auto;
	bottom: 30cqw;
	left: 50%;
	gap: 1.8cqw;
	padding: 2.6cqw 4.4cqw;
	border-radius: 999px;
	background: #ffd60a;
	font-size: 4.2cqw;
	font-weight: 600;
	white-space: nowrap;
	translate: -50% 0;
}

.howto__form {
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 20cqw 7cqw 8cqw;
	background: #fff;
	color: #202124;
}

.howto__form p {
	margin: 0;
}

.howto__biz {
	font: 600 7.4cqw/1.2 var(--font);
	letter-spacing: -0.01em;
}

.howto__sub {
	margin: 1.4cqw 0 7cqw !important;
	color: #5f6368;
	font-size: 4.4cqw;
	line-height: 1.3;
}

.howto__stars {
	display: flex;
	gap: 2.2cqw;
	margin-bottom: 7cqw;
	color: #fbbc04;
}

.howto__stars span {
	display: flex;
}

.howto__stars .icon {
	width: 11cqw;
	height: 11cqw;
	fill: currentColor;
	stroke: none;
}

.howto__text {
	min-height: 30cqw;
	padding: 4cqw 4.4cqw;
	border: 1px solid #dadce0;
	border-radius: 3.6cqw;
	font-size: 4.6cqw;
	line-height: 1.4;
}

.howto__text span {
	display: inline-block;
	white-space: nowrap;
}

.howto__photos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2cqw;
	margin-top: 4cqw;
	padding: 5cqw;
	border: 1px dashed #bdc1c6;
	border-radius: 3.6cqw;
	color: #1a73e8;
	font-size: 4.2cqw;
	font-weight: 500;
}

.howto__photos .icon {
	width: 5cqw;
	height: 5cqw;
}

.howto__post {
	align-self: flex-end;
	margin-top: auto;
	padding: 3.2cqw 7.5cqw;
	border-radius: 999px;
	background: #1a73e8;
	color: #fff;
	font: 600 4.8cqw/1 var(--font);
}

.howto__toast {
	position: absolute;
	right: 6cqw;
	bottom: 7cqw;
	left: 6cqw;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 2.6cqw;
	padding: 3.6cqw 4.4cqw;
	border-radius: 3.6cqw;
	background: #202124;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	color: #fff;
	font-size: 4.4cqw;
	font-weight: 500;
	opacity: 0;
}

.howto__toast .icon {
	width: 5cqw;
	height: 5cqw;
	color: #81c995;
}

/* Seznam ocen podjetja: nova ocena pride na vrh, ostale se pomaknejo navzdol. */
.howto__list {
	z-index: 3;
	padding: 19cqw 5cqw 6cqw;
	background: #fff;
	color: #202124;
	opacity: 0;
}

.howto__head {
	margin: 0 0 3cqw;
	padding: 0 1.5cqw 4cqw;
	border-bottom: 1px solid #e8eaed;
}

.howto__head strong,
.howto__head span {
	display: block;
}

.howto__head strong {
	font: 600 6.6cqw/1.2 var(--font);
	letter-spacing: -0.01em;
}

.howto__head span {
	margin-top: 1cqw;
	color: #5f6368;
	font-size: 3.8cqw;
}

.howto__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.howto__row {
	--row: 31cqw;
	display: grid;
	grid-template-columns: 9cqw minmax(0, 1fr);
	align-content: start;
	column-gap: 3cqw;
	height: var(--row);
	padding: 2.6cqw 1.5cqw;
	border-radius: 3cqw;
	font-size: 3.8cqw;
	line-height: 1.35;
}

.howto__avatar {
	grid-row: 1 / span 2;
	width: 9cqw;
	height: 9cqw;
	border-radius: 999px;
	object-fit: cover;
}

span.howto__avatar {
	display: grid;
	place-items: center;
	background: var(--accent);
	color: #fff;
	font-size: 4.2cqw;
	font-weight: 600;
}

.howto__who strong,
.howto__who small {
	display: block;
}

.howto__who strong {
	font-size: 4cqw;
	font-weight: 600;
}

.howto__who small {
	color: #5f6368;
	font-size: 3.3cqw;
}

.howto__rate {
	grid-column: 2;
	display: flex;
	gap: 0.6cqw;
	margin-top: 1.2cqw;
	color: #fbbc04;
}

.howto__rate .icon {
	width: 3.6cqw;
	height: 3.6cqw;
	fill: currentColor;
	stroke: none;
}

.howto__say {
	grid-column: 2;
	display: -webkit-box;
	margin-top: 1cqw;
	overflow: hidden;
	color: #3c4043;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.howto__toggle {
	right: auto;
	left: 14px;
	z-index: 7;
}

/* Koraki */
.howto__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.howto__step {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: 18px;
	padding: 26px 0;
	border-top: 1px solid var(--line);
}

.howto__step:last-child {
	padding-bottom: 0;
}

/* Črta napredka aktivnega koraka leži na zgornji črti. */
.howto__step::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
}

.howto__num {
	grid-row: 1 / span 2;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.howto__step h3 {
	margin: 2px 0 6px;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.howto__go {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
}

.js .howto__go {
	cursor: pointer;
}

/* Cel korak je gumb za skok v fazo prizora. */
.js .howto__go::after {
	content: "";
	position: absolute;
	inset: 0;
}

.howto__go:hover {
	color: var(--accent);
}

.howto__step p {
	grid-column: 2;
	margin: 0;
	color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
	.howto *,
	.howto *::before {
		animation-duration: var(--howto-t);
		animation-timing-function: ease;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
	}

	.howto.is-paused *,
	.howto.is-paused *::before {
		animation-play-state: paused;
	}

	.howto--card .howto__obj {
		animation-name: howto-card;
		animation-timing-function: var(--ease-out);
	}

	.howto--plate .howto__phone {
		animation-name: howto-plate;
		animation-timing-function: var(--ease-out);
	}

	.howto--qr .howto__phone {
		animation-name: howto-qr;
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}

	.howto__waves i {
		animation-name: howto-wave;
		animation-timing-function: ease-out;
	}

	.howto__waves i:nth-child(2) { animation-delay: 0.17s; }
	.howto__waves i:nth-child(3) { animation-delay: 0.33s; }

	.howto__lock,
	.howto__cam {
		animation-name: howto-start;
	}

	.howto__cam-img {
		animation-name: howto-focus;
	}

	.howto__frame {
		animation-name: howto-frame;
		animation-timing-function: var(--ease-out);
	}

	.howto__notice {
		animation-name: howto-notice;
	}

	.howto__notice--pill {
		animation-name: howto-pill;
	}

	.howto__form {
		animation-name: howto-form;
		animation-timing-function: var(--ease-out);
	}

	.howto__stars span {
		animation-name: howto-star;
		animation-timing-function: ease-out;
	}

	.howto__stars span:nth-child(2) { animation-delay: 0.12s; }
	.howto__stars span:nth-child(3) { animation-delay: 0.24s; }
	.howto__stars span:nth-child(4) { animation-delay: 0.36s; }
	.howto__stars span:nth-child(5) { animation-delay: 0.48s; }

	.howto__text span {
		animation-name: howto-type;
		animation-timing-function: linear;
	}

	.howto__post {
		animation-name: howto-post;
	}

	.howto__toast {
		animation-name: howto-toast;
		animation-timing-function: var(--ease-out);
	}

	.howto__list {
		animation-name: howto-list;
		animation-timing-function: var(--ease-out);
	}

	.howto__row {
		animation-name: howto-row;
		animation-timing-function: var(--ease-out);
	}

	.howto__row--new {
		animation-name: howto-row-new;
	}

	/* Koraki: ista zanka, zamaknjena za tretjino na korak. */
	.howto__step {
		animation-name: howto-step;
	}

	.howto__num {
		animation-name: howto-num;
	}

	.howto__step::before {
		animation-name: howto-fill;
		animation-timing-function: linear;
	}

	.howto__step:nth-child(2),
	.howto__step:nth-child(2) > *,
	.howto__step:nth-child(2)::before {
		animation-delay: calc(var(--howto-t) * -2 / 3);
	}

	.howto__step:nth-child(3),
	.howto__step:nth-child(3) > *,
	.howto__step:nth-child(3)::before {
		animation-delay: calc(var(--howto-t) * -1 / 3);
	}
}

@keyframes howto-card {
	0%, 5% { transform: rotate(-8deg); }
	14%, 21% { transform: translate(118%, -23%) rotate(-2deg); }
	30%, 100% { transform: rotate(-8deg); }
}

@keyframes howto-plate {
	0%, 5% { transform: none; }
	14%, 21% { transform: translate(-74%, 8.5%) rotate(-5deg); }
	30%, 100% { transform: none; }
}

@keyframes howto-qr {
	0%, 4% { transform: none; }
	14%, 24% { transform: translate(-123%, -2.7%); }
	32%, 100% { transform: none; }
}

@keyframes howto-wave {
	0%, 14% { opacity: 0; transform: scale(0.3); }
	15% { opacity: 1; }
	25%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes howto-start {
	0%, 25% { opacity: 1; }
	28%, 96% { opacity: 0; }
	99%, 100% { opacity: 1; }
}

@keyframes howto-focus {
	0%, 7% { opacity: 0.5; filter: blur(6px) drop-shadow(0 18px 22px rgba(11, 20, 40, 0)); transform: scale(1.12); }
	14%, 100% { opacity: 1; filter: blur(0) drop-shadow(0 18px 22px rgba(11, 20, 40, 0.3)); transform: none; }
}

@keyframes howto-frame {
	0%, 14% { opacity: 0; transform: scale(1.3); }
	16.5%, 26% { opacity: 1; transform: none; }
	29%, 100% { opacity: 0; transform: none; }
}

@keyframes howto-notice {
	0%, 17% { opacity: 0; transform: translateY(-40%) scale(0.96); }
	19.5%, 25% { opacity: 1; transform: none; }
	26% { opacity: 1; transform: scale(0.95); }
	27.5% { opacity: 1; transform: none; }
	30%, 100% { opacity: 0; transform: none; }
}

@keyframes howto-pill {
	0%, 17% { opacity: 0; transform: translateY(40%) scale(0.9); }
	19.5%, 25% { opacity: 1; transform: none; }
	26% { opacity: 1; transform: scale(0.92); }
	27.5% { opacity: 1; transform: none; }
	30%, 100% { opacity: 0; transform: none; }
}

@keyframes howto-form {
	0%, 27% { opacity: 0; transform: translateY(8%); }
	31%, 72% { opacity: 1; transform: none; }
	76%, 100% { opacity: 0; transform: none; }
}

@keyframes howto-star {
	0%, 36% { color: #dadce0; transform: scale(1); }
	38% { color: #fbbc04; transform: scale(1.25); }
	41%, 100% { color: #fbbc04; transform: scale(1); }
}

@keyframes howto-type {
	0%, 44% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(20, end); }
	54%, 100% { clip-path: inset(0); }
}

@keyframes howto-post {
	0%, 58% { transform: none; filter: none; }
	60% { transform: scale(0.92); filter: brightness(0.88); }
	62%, 100% { transform: none; filter: none; }
}

@keyframes howto-toast {
	0%, 61% { opacity: 0; transform: translateY(30%); }
	63.5%, 72% { opacity: 1; transform: none; }
	75%, 100% { opacity: 0; transform: translateY(30%); }
}

@keyframes howto-list {
	0%, 69% { opacity: 0; transform: translateY(6%); }
	72.5%, 96% { opacity: 1; transform: none; }
	99.5%, 100% { opacity: 0; transform: none; }
}

@keyframes howto-row {
	0%, 76% { transform: translateY(calc(-1 * var(--row))); }
	81%, 100% { transform: none; }
}

@keyframes howto-row-new {
	0%, 77% { opacity: 0; transform: translateY(-30%) scale(0.97); background-color: rgba(232, 240, 254, 0); }
	81%, 90% { opacity: 1; transform: none; background-color: #e8f0fe; }
	97%, 100% { opacity: 1; transform: none; background-color: rgba(232, 240, 254, 0); }
}

@keyframes howto-step {
	0%, 31.5% { opacity: 1; }
	34%, 98% { opacity: 0.42; }
	100% { opacity: 1; }
}

@keyframes howto-num {
	0%, 31.5% { background-color: var(--accent); color: #fff; }
	34%, 98% { background-color: var(--line); color: var(--text); }
	100% { background-color: var(--accent); color: #fff; }
}

@keyframes howto-fill {
	0% { opacity: 1; transform: scaleX(0); }
	33.3% { opacity: 1; transform: scaleX(1); }
	35%, 100% { opacity: 0; transform: scaleX(1); }
}

@media (max-width: 900px) {
	.howto {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.howto__stage,
	.howto__steps {
		width: 100%;
		max-width: 540px;
		margin-inline: auto;
	}
}

@media (max-width: 640px) {
	.howto__step {
		column-gap: 14px;
		padding: 20px 0;
	}

	.howto__step:last-child {
		padding-bottom: 0;
	}

	.howto__step h3 {
		font-size: 1.125rem;
	}
}

/* Vprašanja */

.band--faq {
	padding-top: 0;
}

.faq {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	max-width: 760px;
}

.faq__head {
	text-align: center;
}

.faq__head .band__title {
	margin-bottom: 10px;
}

.faq__head p {
	margin: 0;
	color: var(--muted);
}

.faq__list {
	border-top: 1px solid var(--line);
}

.faq__list .acc summary {
	padding-block: 22px;
	font-size: 1.0625rem;
}

.faq__list .acc__body {
	max-width: 62ch;
	font-size: 1rem;
}

/* Sorodni izdelki */

.band--related {
	background: var(--sky-soft);
}

.related > h2 {
	margin-bottom: clamp(24px, 3vw, 40px);
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.75rem);
	letter-spacing: -0.03em;
}

.related ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.related ul.products::before,
.related ul.products::after {
	display: none;
}

.related li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	float: none;
}

.related li.product a.woocommerce-LoopProduct-link {
	color: var(--ink);
	text-decoration: none;
}

.related li.product img {
	width: 100%;
	margin: 0;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-lg);
	background: var(--sky);
	transition: transform 0.6s var(--ease-out);
}

.related li.product:hover img {
	transform: scale(1.02);
}

.related .woocommerce-loop-product__title {
	margin: 16px 0 4px;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.related li.product .price {
	display: block;
	margin-bottom: 14px;
	color: var(--ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.related li.product .button {
	align-self: flex-start;
	min-height: 44px;
	margin-top: auto;
	padding: 0 18px;
	border-color: var(--ink);
	background: transparent;
	color: var(--ink);
	font-size: 0.9375rem;
}

.related li.product .button:hover {
	background: var(--ink);
	color: #fff;
}

.related .onsale {
	top: 12px;
	left: 12px;
}

.related .stock,
.related .added_to_cart {
	font-size: 0.875rem;
}

/* Poziv */

.band--cta {
	background: var(--ink);
	color: #fff;
}

.cta {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}

.cta .band__title {
	color: #fff;
	font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
}

.cta p {
	max-width: 46ch;
	margin-bottom: 32px;
	color: var(--muted-on-ink);
	font-size: 1.125rem;
}

.cta__media {
	overflow: hidden;
	border-radius: var(--radius-slab);
	background: var(--sky);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.cta__media {
	container-type: inline-size;
}

/* Ponazoritev »Prehitite konkurenco«: iskanje na Googlu, vaše podjetje se povzpne na prvo mesto (main.js). */

.race {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0;
	padding: 8cqw;
}

.race__panel {
	padding: 6cqw 5cqw 4cqw;
	border-radius: 4cqw;
	background: #f3f6fb;
	box-shadow: 0 1px 2px rgba(19, 19, 22, 0.06);
}

.race__search {
	display: flex;
	align-items: center;
	gap: 4cqw;
	margin-bottom: 7cqw;
}

.race__g {
	flex: none;
	width: 7cqw;
	height: 7cqw;
}

.race__query {
	flex: 1;
	min-width: 0;
	padding: 2.4cqw 4cqw;
	border: 1px solid #d6dbe4;
	border-radius: 999px;
	background: #fff;
	color: var(--muted-on-sky);
	font-size: 3.3cqw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.race__list {
	--row: 21cqw;
	position: relative;
	height: calc(3 * var(--row) - 3cqw);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity 0.35s ease;
}

.race.is-fading .race__list {
	opacity: 0;
}

.race__row {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.4cqw;
	height: calc(var(--row) - 3cqw);
	padding: 0 4cqw;
	border-radius: 3cqw;
	transform: translateY(calc(var(--pos) * var(--row)));
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.race.is-reset .race__row {
	transition: none;
}

.race__row--you {
	right: -3cqw;
	left: -3cqw;
	z-index: 1;
	padding: 0 6cqw;
	background: #fff;
	box-shadow: 0 10cqw 14cqw -9cqw rgba(19, 19, 22, 0.3);
}

.race__name {
	color: var(--text);
	font-size: 3.4cqw;
	font-weight: 600;
}

.race__row--you .race__name {
	font-size: 4.2cqw;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.race__line {
	display: flex;
	align-items: center;
	gap: 2cqw;
	font-size: 3.6cqw;
}

.race__row--you .race__line {
	font-size: 3.9cqw;
}

.race__score {
	min-width: 1.9em;
	color: #f0a500;
	font-variant-numeric: tabular-nums;
}

.race__stars {
	position: relative;
	display: inline-flex;
	color: #cfd3dc;
}

.race__stars-base,
.race__stars-fill {
	display: inline-flex;
	gap: 0.6cqw;
}

.race__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--fill, 100%);
	overflow: hidden;
	color: #fbbc04;
}

.race__stars .icon {
	flex: none;
	width: 4.6cqw;
	height: 4.6cqw;
	fill: currentColor;
	stroke: none;
}

.race__row--you .race__stars .icon {
	width: 5cqw;
	height: 5cqw;
}

.race__count {
	color: var(--muted-on-sky);
	font-variant-numeric: tabular-nums;
}

.race__gain {
	display: inline-block;
	margin-left: auto;
	color: var(--ok);
	font-size: 2.9cqw;
	font-weight: 500;
	white-space: nowrap;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.race__row--you:not(.is-gaining) .race__gain {
	opacity: 0;
	transform: translateX(1.5cqw);
}

.race__up {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 1.2cqw;
	vertical-align: 0.1em;
	border-right: 1.5cqw solid transparent;
	border-bottom: 2.4cqw solid currentColor;
	border-left: 1.5cqw solid transparent;
}

/* Lepljiva vrstica za nakup */

.buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: #fff;
	box-shadow: var(--shadow-up);
	transform: translateY(110%);
	transition: transform 0.45s var(--ease-out);
}

.buybar.is-visible {
	transform: translateY(0);
}

.buybar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding-block: 12px;
}

.buybar__img {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: var(--sky);
	object-fit: cover;
}

.buybar__info {
	min-width: 0;
	flex: 1;
}

.buybar__info p {
	margin: 0;
}

.buybar__name {
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.buybar__meta {
	display: flex;
	gap: 8px;
	color: var(--muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

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

.buybar__choice:not(:empty)::before {
	content: "·";
	margin-right: 8px;
}

.buybar__btn {
	flex: none;
	min-height: 52px;
}

/* Cena na gumbu samo na telefonu; na širšem zaslonu je levo ob sliki. */
.buybar__btn .atc-price {
	display: none;
}

body.has-buybar .site-footer {
	padding-bottom: 76px;
}

/* Odzivnost */

@media (max-width: 1100px) {
	.features {
		grid-template-columns: 1fr;
	}

	.features__media {
		max-width: 360px;
	}

	.cta {
		grid-template-columns: 1fr;
	}

	.cta__media {
		max-width: 480px;
	}
}

@media (max-width: 900px) {
	.pdp-hero {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.woocommerce-breadcrumb {
		padding-block: 12px;
	}
}

@media (max-width: 640px) {
	.pdp-summary .product_title {
		font-size: 1.625rem;
	}

	.pdp-summary .price {
		font-size: 1.5rem;
	}

	/* Na telefonu glavni gumb brez cene (cena je nad izbiro); lepljiva vrstica jo ohrani. */
	.pdp-summary .atc-price {
		display: none;
	}

	.flex-control-thumbs {
		gap: 8px;
	}

	.slab {
		margin-inline: calc(-1 * var(--gutter) + 8px);
		padding-inline: 20px;
	}

	.features__list {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.features__list li {
		display: grid;
		grid-template-columns: 24px 1fr;
		column-gap: 16px;
	}

	.features__list li .icon {
		grid-row: span 2;
		margin-top: 2px;
	}

	.features__list h3 {
		margin-top: 0;
	}

	.related ul.products {
		display: flex;
		gap: 14px;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.related ul.products > li {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	/* Na telefonu samo gumb s ceno čez vso širino; različica je izbrana na strani (privzeto slovenski napis). */
	.buybar__img,
	.buybar__info {
		display: none;
	}

	.buybar__inner {
		min-height: 0;
		padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.buybar__btn {
		flex: 1;
		padding: 0 18px;
	}

	.buybar__btn .atc-price:not([hidden]) {
		display: inline;
	}
}

@media (max-width: 380px) {
	.buybar__btn .icon {
		display: none;
	}
}