/* ============================================================================
   Страница товара — редизайн. Figma: Mobile "Tošn Mobile Product Page"
   (Verzija 2.2, node 101:308), Desktop — node 50:7406.

   ОГРАНИЧЕНИЯ, ПРОВЕРЕННЫЕ НА ЭТОМ ПРОЕКТЕ (см. .claude/CLAUDE.md):
   1. Никаких CSS custom properties - оптимизатор Lightning их молча теряет.
      Только литеральные значения.
   2. Никаких сбросов по тегу внутри контейнера (.pr button {...}) - такой
      селектор перебивает одиночные классы и ломает конкретные элементы.
      Свойства дублируются в каждом классе.
   3. line-height задаётся ЯВНО везде: тема назначает его прямыми правилами
      на p/a/span, и унаследованное значение против них не работает.
   4. :hover / :focus объявляются явно для каждого интерактивного элемента -
      иначе тема подставит своё (a:hover { color: #06bec7 }).
   5. Заливка иконок: тема задаёт svg { fill: #878787 }, поэтому контурные
      иконки переобъявляют fill: none через селектор с классом.
   ========================================================================= */

/* .pr-below (Mnenja kupcev + Podobni izdelki) is a plain SIBLING of .pr
   since 17.09.2026 (see the twig comment where .pr closes, and the sticky
   fix note above .pr-below in the desktop media query) - it used to be a
   grid child of .pr and inherited font-family/color/the svg[fill=none]
   reset below for free. Both base rules are duplicated onto .pr-below here
   so reviews/similar text and chevron icons don't silently fall back to
   the theme's own font/color/svg{fill:#878787}. */
.pr,
.pr-below {
	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	color: #222222;
	background: #ffffff;
}
.pr svg[fill="none"],
.pr svg[fill="none"] path,
.pr svg[fill="none"] circle,
.pr svg[fill="none"] rect,
.pr svg[fill="none"] line,
.pr svg[fill="none"] polyline,
.pr-below svg[fill="none"],
.pr-below svg[fill="none"] path,
.pr-below svg[fill="none"] circle,
.pr-below svg[fill="none"] rect,
.pr-below svg[fill="none"] line,
.pr-below svg[fill="none"] polyline {
	fill: none;
}
.pr svg[fill="none"] path[fill="currentColor"],
.pr svg[fill="none"] circle[fill="currentColor"],
.pr-below svg[fill="none"] path[fill="currentColor"],
.pr-below svg[fill="none"] circle[fill="currentColor"] {
	fill: currentColor;
}

/* ---------- Хлебные крошки (Figma 101:401) ---------- */
.pr-breadcrumb {
	padding: 8px 20px;
	background: #ffffff;
}
.pr-breadcrumb__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 18px;
	color: #878787;
}
.pr-breadcrumb__link {
	color: #878787;
	font-size: 12px;
	line-height: 18px;
	text-decoration: none;
}
.pr-breadcrumb__link:hover,
.pr-breadcrumb__link:focus {
	color: #222222;
	text-decoration: none;
}
.pr-breadcrumb__sep {
	color: #c4c4c4;
	font-size: 12px;
	line-height: 18px;
}
.pr-breadcrumb__current {
	color: #222222;
	font-size: 12px;
	line-height: 18px;
}

/* ---------- Галерея (Figma 101:410) ---------- */
.pr-gallery {
	position: relative;
	width: 100%;
	aspect-ratio: 430 / 447;
	background: #f0f0f0;
	overflow: hidden;
}
.pr-gallery__viewport {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pr-gallery__viewport::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}
.pr-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Круглые стрелки: 40x40 белые, по центру высоты (Figma 101:422 / 101:425) */
.pr-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #535353;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.pr-gallery__nav:hover,
.pr-gallery__nav:focus {
	background: #ffffff;
	color: #222222;
}
.pr-gallery__nav svg {
	width: 16px;
	height: 16px;
	display: block;
}
.pr-gallery__nav--prev { left: 15px; }
.pr-gallery__nav--next { right: 14px; }

/* Автоплей-превью видео товара - нижний левый угол над главным фото,
   показывается только если у товара задано видео (см.
   product_redesign_gallery.twig). Аспект окна берётся из РЕАЛЬНЫХ пропорций ролика
   (inline style, посчитан в os_theme_update.ocmod.xml через Vimeo
   oEmbed) - 9/16 здесь только запасное значение на случай, если oEmbed
   не ответил или PHP-часть ещё не прошла через Modifications → Refresh
   (клиентские ролики почти все портретные, судя по Figma и реальным
   образцам, поэтому 9/16 - разумный дефолт, а не 640x360 от
   vumbnail.com, который для портретных видео был грубым горизонтальным
   кропом кадра, а не превью). .pr-gallery__video-iframe лежит поверх
   постера absolute-позиционированием на inset:0. */
.pr-gallery__video {
	position: absolute;
	left: 19px;
	bottom: 26px;
	width: 113px;
	padding: 4.3px;
	border-radius: 7px;
	background: rgba(26,26,26,.17);
	z-index: 2;
}
.pr-gallery__video-frame {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 1.6px;
	overflow: hidden;
	background: #1a1a1a;
}
.pr-gallery__video-poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pr-gallery__video-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.pr-gallery__video-expand {
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 28.75px;
	height: 28.75px;
	padding: 0;
	margin: 0;
	border: .82px solid rgba(0,0,0,.19);
	border-radius: 50%;
	background: #ffffff;
	color: #3b3b3b;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.pr-gallery__video-expand:hover,
.pr-gallery__video-expand:focus {
	background: #ffffff;
	color: #222222;
}
.pr-gallery__video-expand svg {
	width: 11.5px;
	height: 11.5px;
	display: block;
}

/* Свернуть/развернуть автоплей-превью (не из Figma, добавлено по просьбе
   пользователя 17.09.2026 - вечно играющее видео поверх фото мешает их
   разглядывать). На десктопе (есть hover) кнопка появляется только по
   наведению на превью; на тач-устройствах hover нет, поэтому она видна
   всегда - иначе на телефоне до неё было бы не добраться. */
.pr-gallery__video-toggle {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	opacity: 0;
	transition: opacity .15s ease;
}
.pr-gallery__video:hover .pr-gallery__video-toggle,
.pr-gallery__video:focus-within .pr-gallery__video-toggle {
	opacity: 1;
}
@media (hover: none) {
	.pr-gallery__video-toggle {
		opacity: 1;
	}
}
.pr-gallery__video-toggle-icon {
	display: block;
}
.pr-gallery__video-toggle-icon--minimize {
	width: 12px;
	height: 12px;
}
.pr-gallery__video-toggle-icon--restore {
	display: none;
}

/* Свёрнутое состояние: вместо превью остаётся только эта же кнопка (уже
   как "развернуть") в том же углу поверх фото - позиция самого
   .pr-gallery__video не меняется, меняется только его содержимое. */
.pr-gallery__video.is-minimized {
	padding: 0;
	background: none;
	width: auto;
}
.pr-gallery__video.is-minimized .pr-gallery__video-frame,
.pr-gallery__video.is-minimized .pr-gallery__video-expand {
	display: none;
}
.pr-gallery__video.is-minimized .pr-gallery__video-toggle {
	position: static;
	opacity: 1;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: #06bec7;
}
.pr-gallery__video.is-minimized .pr-gallery__video-toggle-icon--minimize {
	display: none;
}
.pr-gallery__video.is-minimized .pr-gallery__video-toggle-icon--restore {
	display: block;
	width: 28px;
	height: 28px;
}

/* На десктопе сцена галереи заметно шире (~576px против 430 на mobile) -
   превью видео в тех же 113px терялось в углу. Ширина/позиция/иконка
   пропорционально увеличены; высота по-прежнему не фиксирована - её
   всё так же считает постер (см. правило .pr-gallery__video-frame выше). */
@media (min-width: 992px) {
	.pr-gallery__video {
		left: 24px;
		bottom: 32px;
		width: 150px;
	}
	.pr-gallery__video-expand {
		left: 14px;
		bottom: 14px;
		width: 36px;
		height: 36px;
	}
	.pr-gallery__video-expand svg {
		width: 14px;
		height: 14px;
	}
	.pr-gallery__video-toggle {
		top: 8px;
		right: 8px;
		width: 26px;
		height: 26px;
	}
	.pr-gallery__video-toggle-icon--minimize {
		width: 14px;
		height: 14px;
	}
	.pr-gallery__video.is-minimized .pr-gallery__video-toggle {
		width: 52px;
		height: 52px;
	}
	.pr-gallery__video.is-minimized .pr-gallery__video-toggle-icon--restore {
		width: 32px;
		height: 32px;
	}
}

/* Индикатор прокрутки под галереей (п.16 ТЗ) */
.pr-gallery__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: #e2e2e2;
	z-index: 2;
}
.pr-gallery__progress-fill {
	height: 100%;
	width: 0;
	background: #06bec7;
	transition: width .18s ease-out;
}

/* ---------- Заголовочный блок (Figma 101:428 / 101:429) ---------- */
.pr-head {
	padding: 23px 20px 0;
	background: #ffffff;
}
.pr-head__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 20px;
}
.pr-rating {
	display: flex;
	align-items: center;
	gap: 6px;
}
.pr-rating__stars {
	display: flex;
	align-items: center;
	gap: 0;
	color: #fb5133;
}
.pr-rating__star {
	width: 16.1px;
	height: 16.1px;
	display: block;
	margin-right: -1.5px;
}
.pr-rating__text {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #585858;
}
.pr-sku {
	display: flex;
	align-items: center;
	gap: 4.5px;
	white-space: nowrap;
}
.pr-sku__label {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	color: #585858;
}
.pr-sku__value {
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: #585858;
	text-transform: uppercase;
}
.pr-title {
	margin: 13px 0 0;
	padding-top: 4px;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: #222222;
	text-transform: uppercase;
}
.pr-short {
	margin-top: 13px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	color: #595959;
}
.pr-short p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 22.4px;
	color: #595959;
}
.pr-short p:last-child { margin-bottom: 0; }

/* Строка "Dimenzije: ..." (Figma 101:428) — отдельной строкой под коротким
   описанием, тем же начертанием. */
.pr-dimensions {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	color: #595959;
}

/* ---------- Свотчи цвета (Figma: mobile 101:2146, desktop 50:7529) ----------
   Мобильный макет: активный кружок 34 (внутренний 28, обводка #b9b9b9),
   неактивные 39 (внутренний 33.8, обводка #404040), зазоры 9.5 / 15 / 7.
   Десктопный: все кружки 36 (внутренний 30, обводка #b9b9b9), зазоры 10/12/8
   — переопределены ниже в @media (min-width: 992px). */
/* Активный цвет остаётся в общем ряду на своём месте (порядок задаёт
   sort_order в админке) - не выносится вперёд отдельным блоком, только
   рисуется крупнее с галочкой и подписью имени. */
.pr-colors {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 13px;
	padding: 10px 0;
}
.pr-colors__current {
	display: flex;
	align-items: center;
	gap: 9.5px;
}
.pr-colors__swatch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 39px;
	height: 39px;
	flex: 0 0 auto;
	padding: 0;
	border: 1.3px solid #404040;
	border-radius: 50%;
	background: #ffffff;
	text-decoration: none;
}
.pr-colors__swatch--active {
	width: 34px;
	height: 34px;
	border-color: #b9b9b9;
}
/* Размер внутреннего кружка задан явно, а не через padding: браузер
   округляет рамку 1.3px до 1px, и на padding-схеме кружок выходил
   на 0.6px больше макета. */
.pr-colors__dot {
	display: block;
	width: 33.8px;
	height: 33.8px;
	border-radius: 50%;
}
.pr-colors__swatch--active .pr-colors__dot {
	width: 28px;
	height: 28px;
}
.pr-colors__check {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 14px;
	margin: -7px 0 0 -8px;
}
.pr-colors__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 23.6px;
	color: #222222;
}

/* ---------- Преимущества (Figma mobile 101:496, desktop 50:7550) ----------
   Один и тот же статический набор 4 иконок для всех товаров (временно -
   привязку к админке сделаем отдельным шагом). Ширины колонок и зазор
   вертикальный/шрифт разные на mobile и desktop - это два разных экрана в
   макете, не растянутая копия друг друга. Разделители - реальные элементы
   (не border), поэтому justify-content: space-between сам считает
   зазоры по ширине контента, как в auto-layout Figma. */
.pr-features {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 35px 0 0;
	padding: 0 20px;
	background: #ffffff;
}
.pr-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 13.5px;
	text-align: center;
}
/* Column widths follow the icon, not the slot: the row is built from the
   product's own data, so a given icon can land in any position. Values are
   the Figma column widths of the matching icon; "special" and unknown icons
   (raster fallback) get an in-between width. */
.pr-features__item { width: 64px; }
.pr-features__item--papercash { width: 68px; }
.pr-features__item--coins { width: 55px; }
.pr-features__item--cards { width: 60px; }
.pr-features__item--rfid { width: 73px; }
.pr-features__divider {
	align-self: stretch;
	width: 1px;
	flex-shrink: 0;
	background: #e2e2e2;
}
.pr-features__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
}
.pr-features__icon svg {
	display: block;
	height: 42px;
	width: auto;
}
/* Тема правилом svg { fill: #878787 } перебивает fill="#585858" в
   разметке (та же ловушка, что у звёзд рейтинга и стрелок галереи выше). */
.pr .pr-features__icon svg path {
	fill: #585858;
}
/* Raster fallback for icons without a Figma vector (old "special" etc.). */
.pr-features__icon img {
	display: block;
	height: 42px;
	width: auto;
	max-width: 100%;
}
.pr-features__label {
	font-size: 12px;
	font-weight: 500;
	line-height: 15.6px;
	color: #585858;
}

/* ---------- Блок покупки (Figma 101:525) ----------
   Замеры сняты с рендера макета: сам блок 430x341 при полях 20px, внутри
   три горизонтальные полосы - основная #222222 (0..241), гарантии #1b1b1b
   (242..295) и способы оплаты #000000 (297..341). Поэтому боковые поля
   живут во внутреннем .pr-buy__main, а полосы идут во всю ширину. */
.pr-buy {
	margin-top: 32px;
	padding: 0;
	background: #222222;
}
.pr-buy__main {
	padding: 20px;
}
.pr-buy__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.pr-buy__price {
	font-size: 28px;
	font-weight: 600;
	line-height: 36.4px;
	color: #ffffff;
}
.pr-buy__price-old {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #6f6f6f;
	text-decoration: line-through;
}
/* "Najnižja cena zadnjih 30 dni" - mobile 101:531: 11/17.6 #898989,
   1.5 below the price. */
.pr-buy__lowest {
	margin-top: 1.5px;
	font-size: 11px;
	font-weight: 400;
	line-height: 17.6px;
	color: #898989;
}
.pr-buy__stock-col {
	text-align: right;
}
.pr-buy__stock {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 17px;
	color: #5fee63;
	text-transform: uppercase;
}
.pr-buy__stock svg {
	width: 15px;
	height: 15px;
	display: block;
}
.pr-buy__delivery {
	margin-top: 9px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #ffffff;
}

/* Кнопка и счётчик: в макете обе высотой 48, счётчик 130 широкий,
   между ними 14px, вся строка начинается в 29px под ценой. */
.pr-buy__actions {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin-top: 32px;
}
.pr-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	width: 130px;
	height: 50px;
	padding: 0 12px;
	border: 1px solid #343434;
	border-radius: 6px;
	background: #222222;
}
.pr-qty__btn {
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #ffffff;
	font-size: 18px;
	line-height: 28px;
	cursor: pointer;
}
.pr-qty__btn:hover,
.pr-qty__btn:focus {
	background: rgba(255,255,255,.12);
	color: #ffffff;
}
.pr-qty__input {
	width: 40px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	line-height: 28px;
	text-align: center;
	box-shadow: none;
}
.pr-buy__cart {
	flex: 1 1 auto;
	height: 50px;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background: #06bec7;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 48px;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
}
.pr-buy__cart:hover,
.pr-buy__cart:focus {
	background: #05a8b0;
	color: #ffffff;
}

/* Промо-плашка: 390x60 при радиусе 30, кружок 35px в 9px от левого края. */
.pr-promo {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 60px;
	margin-top: 15px;
	padding: 9px 16px 9px 9px;
	border-radius: 30px;
	background: #fb5133;
}
.pr-promo__badge {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: #ffffff;
	color: #fb5133;
	font-size: 13px;
	font-weight: 700;
	line-height: 35px;
	text-align: center;
}
.pr-promo__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.pr-promo__title {
	font-size: 12px;
	font-weight: 700;
	line-height: 15px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pr-promo__subtitle {
	font-size: 13px;
	font-weight: 400;
	line-height: 17px;
	color: #ffffff;
}

/* Полоса гарантий: своя, чуть более тёмная подложка, высота 54. */
.pr-buy__guarantees {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 54px;
	padding: 0 20px;
	background: #1b1b1b;
}
.pr-buy__guarantee {
	font-size: 13px;
	font-weight: 500;
	line-height: 17px;
	color: #dadada;
}
.pr-buy__guarantee-sep {
	width: 1px;
	height: 16px;
	background: #4a4a4a;
}

/* Способы оплаты: чёрная полоса высотой 44 в самом низу блока. */
.pr-buy__payments {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	height: 44px;
	padding: 0 16px;
	background: #000000;
}
.pr-buy__payment {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	line-height: 15px;
	color: #b6b6b6;
	white-space: nowrap;
}
.pr-buy__payment svg {
	width: 14px;
	height: 14px;
	display: block;
}
.pr-buy__payment--word {
	font-size: 12px;
	font-weight: 700;
	line-height: 15px;
	color: #dcdcdc;
	letter-spacing: .04em;
}
.pr-buy__payment-sep {
	width: 1px;
	height: 14px;
	background: #3a3a3a;
}
.pr-buy__payment--mastercard {
	display: flex;
	align-items: center;
	gap: 0;
}
.pr-buy__payment--mastercard span {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	display: block;
}
.pr-buy__payment--mastercard span:first-child {
	background: #eb001b;
}
.pr-buy__payment--mastercard span:last-child {
	background: #f79e1b;
	margin-left: -5px;
}

/* ---------- Десктоп: галерея слева, карточка справа ----------
   Замеры сняты с рендера десктопного макета (node 50:7406, 1920px):
   контент 336..1584 = 1248 шириной по центру, правая колонка 1040..1584 =
   545, промежуток 40; главное фото 716 высотой. Слева от фото в макете
   есть вертикальная лента миниатюр - её пока нет, поэтому галерея занимает
   всю левую колонку; появится вместе с остальной десктопной доводкой. */
@media (min-width: 992px) {
	.pr {
		max-width: 1248px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 545px;
		grid-column-gap: 40px;
		align-items: start;
	}
	/* Theme-wide #wrap-main (stylesheet.css) sets `overflow: hidden` on the
	   body's top-level wrapper (every page, not just product) - probably to
	   clip stray horizontal overflow. Any non-"visible" overflow on ANY
	   ancestor silently kills `position: sticky` for descendants, which is
	   exactly why the gallery below never stuck (confirmed via Playwright:
	   gallery moved 1:1 with scroll, no ancestor transform, plenty of grid
	   height for it to stick within - overflow was the only culprit).
	   First attempt used `overflow-x: hidden; overflow-y: visible` - didn't
	   work: per the CSS Overflow spec, mixing a non-visible overflow-x with
	   a visible overflow-y forces the browser to compute overflow-y as
	   `auto` instead, which STILL makes #wrap-main a scroll container -
	   just one that never actually scrolls (real scrolling happens on the
	   document), so sticky's offset relative to it never changes and it
	   sits static (confirmed via Playwright: still moved 1:1 with scroll).
	   `overflow: clip` fixes this properly - unlike hidden/auto/scroll, clip
	   does NOT establish a scroll container per spec, so sticky looks past
	   #wrap-main to the real (document) scroll container instead, while
	   content is still visually clipped exactly like `hidden` would. Both
	   axes must use the same clip/visible-class value to avoid the same
	   x/y coercion problem that broke the first attempt.
	   Overridden here instead of in stylesheet.css itself because this file
	   only loads on redesigned product pages (product_type==7) - the rest
	   of the site keeps the original `overflow: hidden` untouched. */
	#wrap-main {
		overflow: clip;
	}
	/* Только галерея ПЕРВОГО экрана участвует в двухколоночной сетке и
	   липнет при прокрутке. Вторая галерея живёт внутри .pr-hero-repeat,
	   и общий селектор .pr-gallery схлопывал её в нулевую колонку. */
	/* Span must equal the number of .pr > .pr-* elements actually rendered
	   below (right column): head, features, options, buy, cross,
	   description = 6 right now (.pr-bundle is hidden, see
	   pr_bundle_enabled in product_redesign.twig). Bump to 7 if that flag
	   is ever turned back on. Figma's own right column runs all the way from the title down
	   through the description - the sticky gallery only lets go once the
	   full-width similar-products/reviews section starts (checked via
	   REST API, 17.09.2026), so description must stay grid-column: 2 too. */
	.pr > .pr-gallery {
		grid-column: 1;
		grid-row: 1 / span 6;
		position: sticky;
		top: 24px;
		aspect-ratio: 560 / 716;
		border-radius: 8px;
	}
	.pr > .pr-head,
	.pr > .pr-features,
	.pr > .pr-options,
	.pr > .pr-buy,
	.pr > .pr-bundle,
	.pr > .pr-cross,
	.pr > .pr-description {
		grid-column: 2;
		padding-left: 0;
		padding-right: 0;
	}
	/* .pr-below is a plain sibling AFTER .pr now (moved out of the grid
	   17.09.2026 - see the twig comment by .pr's new closing tag for why:
	   a sticky grid item's release point turned out to be bound by the
	   WHOLE grid container, not just its own row span, so keeping
	   .pr-below inside .pr made the sticky gallery stick through reviews
	   and similar-products too instead of releasing after the
	   description). It just needs the same centered width .pr uses. */
	.pr-below {
		max-width: 1248px;
		margin: 0 auto;
	}
	.pr-head { padding-top: 0; }
	/* Свотчи цвета: в десктопном макете (50:7529) кружки одного размера
	   36px с обводкой #b9b9b9, а сам блок стоит ПОСЛЕ короткого описания
	   (module-title: Frame 96 → color-variants), поэтому переставляем
	   порядок через flex, не трогая разметку. */
	.pr-head {
		display: flex;
		flex-direction: column;
	}
	.pr-head__top { order: 1; }
	.pr-title { order: 2; }
	.pr-short { order: 3; }
	.pr-dimensions { order: 3; }
	.pr-colors {
		order: 4;
		gap: 8px;
		margin-top: 31px;
		padding: 0;
	}
	.pr-colors__current { gap: 10px; }
	.pr-colors__swatch,
	.pr-colors__swatch--active {
		width: 36px;
		height: 36px;
		border-color: #b9b9b9;
	}
	.pr-colors__dot,
	.pr-colors__swatch--active .pr-colors__dot {
		width: 30px;
		height: 30px;
	}
	.pr-colors__name { line-height: 24px; }
	/* Desktop features (Figma 50:7550): bigger icons/type than mobile,
	   own column widths and vertical gap - a distinct layout, not a
	   stretched copy of the mobile one. */
	.pr-features {
		margin-top: 37.5px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.pr-features__item { gap: 14px; }
	.pr-features__item { width: 70px; }
	.pr-features__item--papercash { width: 74px; }
	.pr-features__item--coins { width: 60px; }
	.pr-features__item--cards { width: 58px; }
	.pr-features__item--rfid { width: 79px; }
	.pr-features__icon,
	.pr-features__icon svg,
	.pr-features__icon img {
		height: 50px;
	}
	.pr-features__label {
		font-size: 13px;
		line-height: 16.9px;
	}
	.pr-buy {
		border-radius: 10px;
		overflow: hidden;
	}
	.pr-buy__main { padding: 24px; }
	.pr-buy__guarantees,
	.pr-buy__payments { padding-left: 24px; padding-right: 24px; }
}

/* ---------------------------------------------------------------------------
   Переопределения глобальных стилей темы. Дописаны в конец файла намеренно:
   при равной специфичности побеждает правило, объявленное позже.
   --------------------------------------------------------------------------- */

/* Поле количества: тема красит все input в белый фон с рамкой, из-за чего
   в тёмном блоке покупки получался белый прямоугольник. */
.pr .pr-qty .pr-qty__input,
.pr .pr-qty input[type="text"] {
	background: transparent;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: #ffffff;
	width: 44px;
	height: 30px;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 30px;
	text-align: center;
}
.pr .pr-qty .pr-qty__input:focus {
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
	color: #ffffff;
}

/* Кнопка добавления в корзину - теперь <button> с иконкой (в макете тележка
   слева от надписи). */
.pr .pr-buy__cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	line-height: 20px;
}
.pr .pr-buy__cart svg {
	width: 20px;
	height: 20px;
	display: block;
	flex: 0 0 auto;
}
.pr .pr-buy__cart-label {
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	color: #ffffff;
	text-transform: uppercase;
}

/* Короткое описание приходит из основного описания товара, где тема красит
   текст в свой цвет - возвращаем макетный. */
.pr .pr-short,
.pr .pr-short p,
.pr .pr-short span,
.pr .pr-dimensions {
	color: #595959;
	font-size: 14px;
	line-height: 22.4px;
}

/* ---------------------------------------------------------------------------
   Ширина страницы. Тема кладёт содержимое в .col-md-12.center-column с
   боковыми полями 10+10px, из-за чего вся страница ужималась до 375px, тогда
   как макет построен на полной ширине экрана 430 с полями 20 внутри блоков.
   Возвращаем блоку полную ширину отрицательными полями - ровно на те 20px,
   которые добавляет тема. На десктопе (>=992px) отменяем: там своя сетка.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.pr {
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* Заголовок: тема задаёт h1 более специфичным правилом (padding 10px,
   margin 0), поэтому переобъявляем с селектором по двум классам. */
.pr .pr-title {
	margin: 13px 0 0;
	padding: 4px 0 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: #222222;
	text-transform: uppercase;
}

/* Звёзды рейтинга (Figma 101:433): одна группа 71x13 - четыре целых звезды
   и пятая, закрашенная частично под оценку 4,8. Цвета переобъявляем в CSS,
   потому что тема правилом svg { fill: #878787 } перебивает атрибуты
   разметки; незакрашенная часть в макете кремовая #faf1e4. */
.pr .pr-rating__stars {
	width: 74px;
	height: 13px;
	display: flex;
	align-items: center;
	color: #fb5133;
}
.pr .pr-rating__stars svg {
	width: 71px;
	height: 13px;
	display: block;
	overflow: visible;
}
.pr .pr-rating__stars svg path,
.pr .pr-rating__stars svg rect {
	fill: #fb5133;
}
.pr .pr-rating__stars svg rect.pr-rating__star-empty {
	fill: #faf1e4;
}

/* Стрелки галереи (Figma 101:424): залитый шеврон 9x16 цвета #535353.
   Стрелка "назад" - тот же путь, отражённый по горизонтали. */
.pr .pr-gallery__nav svg {
	width: 9px;
	height: 16px;
	display: block;
}
.pr .pr-gallery__nav--prev svg {
	transform: scaleX(-1);
}

/* Ширина контента на десктопе. Бутстраповский .container темы ограничивает
   страницу 1140px, а десктопный макет построен на 1248 (контент 336..1584
   в сетке 1920). Расширяем только там, где 1248 гарантированно помещается
   с полями - ниже 1360px окна остаётся штатные 1140, без вылетов и
   горизонтальной прокрутки. */
@media (min-width: 1360px) {
	.pr,
	.pr-below {
		width: 1248px;
		max-width: none;
		margin-left: calc(50% - 624px);
		margin-right: calc(50% - 624px);
	}
	/* Reviews/similar scrollers bleed to the real right edge of the browser
	   window, matching how Figma leaves clipping off on these rows (they
	   sit in a centered box but the overflow cards are visible beyond it,
	   signalling "more, scroll me"). Left edge is untouched (still flush
	   with .pr-below's own left edge, 0 padding on .pr-reviews/.pr-similar
	   at this breakpoint) - only width grows rightward.
	   .pr-below is centered on document.documentElement.clientWidth (D),
	   not on raw 100vw - vw includes the scrollbar gutter, clientWidth
	   doesn't (measured 15px gap on this project's dev Chrome, see the
	   445-vs-430 mobile note in .claude/CLAUDE.md). So the target right
	   edge is D, not 100vw: width = D/2 + 624px, and D ≈ 100vw - 15px,
	   giving 50vw + 616.5px; trimmed to 615px for a couple px of safety
	   margin against rounding so this never tips the page into an extra
	   horizontal scrollbar. */
	.pr-reviews__list,
	.pr-similar__grid {
		width: calc(50vw + 615px);
	}
}

/* ---------- Лента миниатюр слева от фото (десктопный макет 50:7406) ----------
   На мобильном её в макете нет, поэтому там она скрыта, а сцена занимает всю
   ширину галереи. Пропорция миниатюры повторяет кадр: 583/750. */
.pr-gallery__thumbs {
	display: none;
}
.pr-gallery__stage {
	position: relative;
	width: 100%;
	height: 100%;
}
@media (min-width: 992px) {
	.pr-gallery {
		display: flex;
		align-items: stretch;
		gap: 13px;
		background: transparent;
		aspect-ratio: auto;
	}
	.pr-gallery__thumbs {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 74px;
		flex: 0 0 74px;
		overflow-y: auto;
		max-height: 716px;
		scrollbar-width: none;
	}
	.pr-gallery__thumbs::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}
	.pr-gallery__thumb {
		width: 74px;
		height: 95px;
		padding: 0;
		margin: 0;
		border: 1px solid #e2e2e2;
		border-radius: 4px;
		background: #f0f0f0;
		cursor: pointer;
		overflow: hidden;
		flex: 0 0 auto;
	}
	.pr-gallery__thumb:hover,
	.pr-gallery__thumb:focus {
		border-color: #b8b8b8;
		background: #f0f0f0;
	}
	.pr-gallery__thumb.is-active {
		border-color: #06bec7;
		background: #f0f0f0;
	}
	.pr-gallery__thumb img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}
	.pr-gallery__stage {
		flex: 1 1 auto;
		aspect-ratio: 560 / 716;
		background: #f0f0f0;
		border-radius: 8px;
		overflow: hidden;
	}
}

/* ===========================================================================
   Секции, добавленные при сверке с макетом 03.09.2026. Все размеры сняты
   с рендера мобильного макета (430px): контент 390 при полях 20.
   =========================================================================== */

/* ---------- Бейдж NOVO на галерее (53x22, right 19, bottom 21) ---------- */
.pr-gallery__badge {
	position: absolute;
	right: 19px;
	bottom: 21px;
	display: inline-block;
	min-width: 53px;
	height: 22px;
	padding: 0 8px;
	background: #000000;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 0.5px;
	text-align: center;
	text-transform: uppercase;
	z-index: 3;
}

/* ---------- Хвостик промо-плашки (11x7, указывает на кнопку корзины) -------
   Левый край считаем от разметки блока покупки: счётчик 130 + зазор 14,
   дальше кнопка занимает остаток строки, и хвостик встаёт по её центру. */
.pr-promo {
	position: relative;
}
.pr-promo:before {
	content: "";
	position: absolute;
	top: -7px;
	left: calc(144px + (100% - 144px) / 2);
	margin-left: -5.5px;
	width: 0;
	height: 0;
	border-left: 5.5px solid transparent;
	border-right: 5.5px solid transparent;
	border-bottom: 7px solid #fb5133;
}

/* ---------- Pulse of the promo banner (Figma "30 Popust pulsing") ----------
   Prototype: variant 27:112 -> 27:151 after 1.5s, smart-animate 2s with
   cubic-bezier(.27,0,.1,1), then back - an endless loop. The only change
   between the variants is a #ff907c circle behind the white "30%" badge
   that grows from the badge size to ~446px and fades out. It is clipped by
   the pill (Frame 25 clips, radius 36.5) and passes under the text.
   A separate clipping layer is needed because .pr-promo itself must not
   clip - its pointer tail (:before) sits above the pill. */
.pr-promo__ripple {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}
.pr-promo__ripple:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 9px;
	width: 35px;
	height: 35px;
	margin-top: -17.5px;
	border-radius: 50%;
	background: #ff907c;
	animation: pr-promo-pulse 3.5s infinite;
}
.pr-promo__badge,
.pr-promo__text {
	position: relative;
	z-index: 1;
}
@keyframes pr-promo-pulse {
	0%,
	42.857% {
		transform: scale(1);
		opacity: 1;
		animation-timing-function: cubic-bezier(.27, 0, .1, 1);
	}
	100% {
		transform: scale(12.5);
		opacity: 0;
	}
}
/* ---------- Nudge of the mobile cart button (Figma "V košarico button") ----
   Mobile prototype only (101:550 hero, 101:763 repeat, 103:2866 sticky
   bar); the desktop add-to-cart is a plain frame without it, but the
   owner asked for it on desktop too (04.10.2026). Loop of the component
   variants 23:153 -> 23:155 -> 23:161 -> 23:153: wait 2s, then
   x 0 -> -7 (0.3s), -7 -> +7 (0.2s), +7 -> 0 (0.3s), each smart-animate
   with its own bezier. 2.8s cycle; percentages are of that cycle. */
.pr .pr-buy__cart,
.pr-sticky-bar__cart {
	animation: pr-cart-nudge 2.8s infinite;
}
@keyframes pr-cart-nudge {
	0%,
	71.429% {
		transform: translateX(0);
		animation-timing-function: cubic-bezier(.79, 0, .63, 1);
	}
	82.143% {
		transform: translateX(-7px);
		animation-timing-function: cubic-bezier(.42, .02, .22, 1);
	}
	89.286% {
		transform: translateX(7px);
		animation-timing-function: cubic-bezier(.64, 0, .16, 1);
	}
	100% {
		transform: translateX(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.pr-promo__ripple:before,
	.pr .pr-buy__cart,
	.pr-sticky-bar__cart {
		animation: none;
	}
}

/* ---------- Kombiniraj in prihrani 30% (Figma 122:3108) ----------
   Mobile header: padding 27/20/31; title row = teal lock 24 + 7 gap +
   20/26 -0.2; 18 down to the pill banner (28 high, radius 36.5, 12/15.6
   700 +0.72 uppercase); 23.5 down to the list. */
.pr-bundle {
	padding: 27px 20px 31px;
	background: #ffffff;
}
.pr .pr-bundle__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 18px;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #222222;
}
.pr-bundle__title-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: #06bec7;
}
.pr-bundle__title-icon svg {
	width: 24px;
	height: 24px;
}
.pr .pr-bundle__title-icon svg path {
	fill: currentColor;
}
.pr-bundle__note {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	margin: 0 0 23.5px;
	padding: 6px 9px;
	border-radius: 36.5px;
	background: #fb5133;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 15.6px;
	letter-spacing: 0.72px;
	text-align: center;
	text-transform: uppercase;
}
.pr-bundle__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pr-bundle__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 80px;
	padding: 8px 19px 8px 18px;
	border-radius: 8px;
	background: #f0f0f0;
}
.pr-bundle__info {
	flex: 1 1 auto;
	min-width: 0;
}
.pr-bundle__name {
	display: block;
	overflow: hidden;
	margin: 0 0 4px;
	color: #222222;
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pr-bundle__name:hover,
.pr-bundle__name:focus {
	color: #222222;
	text-decoration: none;
}
.pr-bundle__prices {
	display: flex;
	align-items: baseline;
	gap: 7px;
}
.pr-bundle__price-old {
	color: #fb5133;
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: line-through;
}
.pr-bundle__price {
	color: #222222;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
}
.pr-bundle__image {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 64px;
	height: 64px;
	text-decoration: none;
}
.pr-bundle__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pr-bundle__zoom {
	position: absolute;
	top: -2px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28.75px;
	height: 28.75px;
	border-radius: 50%;
	background: #ffffff;
	color: #3b3b3b;
}
.pr-bundle__zoom svg {
	width: 11.5px;
	height: 11.5px;
}
/* Spinner shown while the quickview popup fragment is being fetched (see
   initQuickview() in product-redesign.js) - the icon is a flex container
   already, so the spinner (a ::after flex item) centers on its own. */
.pr-bundle__zoom.is-loading svg {
	display: none;
}
.pr-bundle__zoom.is-loading::after {
	content: "";
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 2px solid #e2e2e2;
	border-top-color: #06bec7;
	animation: pr-zoom-spin .7s linear infinite;
}
@keyframes pr-zoom-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Broken-image fallback (see initImageFallback() in product-redesign.js) -
   shared by the bundle/cross-sell card thumbnail and the "Podobni izdelki"
   card image, both of which already have position:relative + a light
   background suited to a centered icon. */
.pr-bundle__image.is-img-fallback img,
.pr-similar__image.is-img-fallback img {
	display: none;
}
.pr-img-fallback-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b8b8b8;
}
.pr-bundle__image .pr-img-fallback-icon svg {
	width: 28px;
	height: 28px;
}
.pr-similar__image .pr-img-fallback-icon svg {
	width: 40px;
	height: 40px;
}
.pr-bundle__add {
	flex: 0 0 auto;
	width: 108px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #06bec7;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 46px;
	letter-spacing: 0.3px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}
.pr-bundle__add:hover,
.pr-bundle__add:focus {
	background: #05a8b0;
	color: #ffffff;
}

/* ---------- "Pogosto izbrano skupaj" — category-level cross-sell ----------
   Cards reuse .pr-bundle__item and the neighbouring classes above (the
   same "Smol item" from Figma) — the wrapper/title/list need their own
   markup only (no discount banner, see product_redesign.twig). */
.pr-cross {
	/* Mobile frame 122:3108: padding 27/20/31, 23.5 from heading to list. */
	padding: 27px 20px 31px;
	background: #ffffff;
}
.pr .pr-cross__title {
	margin: 0 0 23.5px;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #222222;
	text-transform: none;
}
.pr-cross__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ---------- Описание товара (Figma 101:606) ---------- */
.pr-description {
	margin-top: 16px;
	padding: 24px 20px 28px;
	border-top: 1px solid #e8e8e8;
	background: #f3f3f3;
}
.pr-description__title {
	margin: 0 0 14px;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: #222222;
}
.pr-description__body {
	font-size: 14px;
	line-height: 22.4px;
	color: #3a3a3a;
}
.pr-description__body p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 22.4px;
	color: #3a3a3a;
}
.pr-description__body img {
	max-width: 100%;
	height: auto;
}

/* ---------- Mnenja kupcev (Figma mobile 101:616, desktop 50:7715) ----------
   Карточка отзыва на mobile и desktop - две разные раскладки в Figma (не
   растянутая копия), поэтому desktop-константы дублируются в
   @media (min-width: 992px) ниже вместо пересчёта пропорций. */
.pr-reviews {
	padding: 29px 0 34px;
	background: #ffffff;
}
/* Селектор с префиксом .pr - иначе тема бьёт font-size правилом
   .center-column h1..h6{font-size:20px} (класс+тег весомее одного класса,
   тот же класс ловушки, что и с uppercase ниже по файлу). */
.pr-below .pr-reviews__title {
	margin: 0 0 11px;
	padding: 0 20px;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #222222;
}
.pr-reviews__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 20px;
	margin-bottom: 26px;
}
/* Общий рейтинг магазина (5 звёзд, пятая частично закрашена под 4,8) -
   точный экспорт путей из Figma (node 101:620), не Unicode-символы:
   только так совпадают форма звезды, скругление углов и частичная заливка. */
.pr-reviews__stars {
	display: block;
	width: 74px;
	height: 16.135px;
}
.pr-reviews__stars svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.pr-reviews__rating-text {
	color: #585858;
	font-size: 12px;
	line-height: 15.6px;
}
.pr-reviews__rating-text strong {
	font-weight: 700;
}
.pr-reviews__list {
	display: flex;
	gap: 8.5px;
	overflow-x: auto;
	padding: 0 20px 4px;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 20px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pr-reviews__list::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}
/* Вся карточка - рамка/фон/радиус на самом элементе (в макете это карточка
   241x398 #f3f3f3 с обводкой #d0d0d0, а не просто фото с подписью поверх
   прозрачного фона, как было раньше). */
.pr-reviews__item {
	flex: 0 0 auto;
	width: 241px;
	height: 398px;
	background: #f3f3f3;
	border: 1px solid #d0d0d0;
	border-radius: 10px;
	overflow: hidden;
	scroll-snap-align: start;
}
.pr-reviews__photo {
	position: relative;
	width: 241px;
	height: 170px;
	background: #f0f0f0;
}
.pr-reviews__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
}
.pr-reviews__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 12px 0 18.5px;
	background: rgba(34, 34, 34, .72);
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	line-height: 22.4px;
}
.pr-reviews__caption svg {
	flex: 0 0 auto;
	width: 6px;
	height: 10px;
	color: #ffffff;
}
/* The caption links to the reviewed product (real reviews, 04.10.2026).
   The theme's a:hover turns links #06bec7 - keep it white. */
a.pr-reviews__caption,
a.pr-reviews__caption:hover,
a.pr-reviews__caption:focus {
	color: #ffffff;
	text-decoration: none;
}
a.pr-reviews__caption:hover {
	background: rgba(34, 34, 34, .85);
}
/* Отступы контента внутри карточки сняты с макета как есть: слева 18,
   справа 25 - не опечатка, в Figma этот блок не по центру карточки. */
.pr-reviews__content {
	padding: 21.5px 25px 18.5px 18px;
}
.pr-reviews__rating-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 13px;
}
/* Пять полных звёзд (все отзывы 5/5) - тот же точный экспорт путей
   (node 101:636), отдельный от общего рейтинга магазина размер/вьюбокс. */
.pr-reviews__stars--item {
	display: block;
	width: 79px;
	height: 17.9545px;
}
.pr-reviews__stars--item svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.pr-below .pr-reviews__stars svg path,
.pr-below .pr-reviews__stars svg rect,
.pr-below .pr-reviews__stars--item svg path,
.pr-below .pr-reviews__stars--item svg rect {
	fill: #fb5133;
}
.pr-below .pr-reviews__stars svg rect.pr-reviews__star-empty {
	fill: #faf1e4;
}
.pr-below .pr-reviews__item-title {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 23.6px;
	color: #222222;
}
.pr-reviews__text {
	margin: 0 0 13px;
	font-size: 13px;
	font-weight: 400;
	line-height: 22.4px;
	color: #595959;
}
.pr-reviews__author {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 22.4px;
	color: #595959;
}

/* ---------- Повтор HERO в конце страницы (Figma 101:719) ---------- */
.pr-hero-repeat {
	margin-top: 8px;
}

/* ---------- Podobni izdelki (Figma mobile 101:804, desktop 50:7920) ----------
   Разные раскладки, не растянутая копия: mobile - статичная сетка 2
   колонки (в Figma layoutWrap: WRAP на 390px), desktop - лента без
   переноса (layoutWrap: NO_WRAP, контент шире рамки 1271px, тот же
   паттерн, что у «Kombiniraj» и «Mnenja kupcev»), и в карточке цена с
   наличием стоят в один ряд, а не друг под другом. */
.pr-similar {
	padding: 22px 20px 27px;
	background: #ffffff;
}
.pr-similar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 11px;
	margin-bottom: 25px;
}
/* Префикс .pr - тема бьёт font-size одиночного класса правилом
   .center-column h1..h6{font-size:20px} (см. ловушку у pr-reviews__title). */
.pr-below .pr-similar__title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: -0.2px;
	color: #222222;
}
.pr-similar__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #00838a;
	font-size: 13px;
	font-weight: 500;
	line-height: 16.9px;
	text-decoration: underline;
	text-transform: uppercase;
	white-space: nowrap;
}
.pr-similar__link:hover,
.pr-similar__link:focus {
	color: #026870;
	text-decoration: underline;
}
.pr-similar__link svg {
	display: block;
	width: 10px;
	height: 12px;
	flex: 0 0 auto;
}
.pr-below .pr-similar__link svg path {
	fill: #00838a;
}
.pr-similar__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 20px;
}
.pr-similar__item {
	display: flex;
	flex-direction: column;
}
.pr-similar__image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 185 / 239;
	margin-bottom: 15.5px;
	border-radius: 10.5px;
	background: #f0f0f0;
	overflow: hidden;
	text-decoration: none;
}
.pr-similar__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pr-similar__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 9px;
	color: #000000;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	text-decoration: none;
}
.pr-similar__name:hover,
.pr-similar__name:focus {
	color: #06bec7;
	text-decoration: none;
}
/* Наличие и цена - в Figma друг под другом на mobile (gap 9) и в один
   ряд на desktop (gap 15, цена первая) - обёртка нужна, чтобы поменять
   и направление, и порядок между брейкпоинтами одним правилом. */
.pr-similar__meta {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: auto;
}
.pr-similar__stock {
	order: 1;
	display: inline-flex;
	align-items: center;
	gap: 3.5px;
	color: #2a872d;
	font-size: 12px;
	font-weight: 600;
	line-height: 15.6px;
	text-transform: uppercase;
}
.pr-similar__stock svg {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.pr-below .pr-similar__stock svg path {
	fill: #2a872d;
}
.pr-similar__prices {
	order: 2;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.pr-similar__price {
	color: #000000;
	font-size: 16px;
	font-weight: 600;
	line-height: 25.6px;
}
.pr-similar__price-old {
	color: #878787;
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: line-through;
}

/* ---------- Десктоп: новые секции внутри колонки контента ---------- */
@media (min-width: 992px) {
	.pr-description,
	.pr-reviews,
	.pr-similar {
		padding-left: 0;
		padding-right: 0;
	}
	.pr-reviews__title,
	.pr-reviews__rating,
	.pr-reviews__list {
		padding-left: 0;
		padding-right: 0;
	}
	.pr-reviews__list {
		scroll-padding-left: 0;
		gap: 14px;
	}
	/* Desktop card (Figma 50:7715/50:7730): bigger type, no border, own
	   card size/gaps - a distinct layout from mobile, not a stretched copy. */
	.pr-below .pr-reviews__title {
		/* padding обязан стоять именно тут: базовое правило тоже идёт с
		   префиксом `.pr-below` (0,2,0) и перебивает сброс по одному классу
		   в общем списке выше - из-за этого заголовок на десктопе оставался
		   сдвинутым на 20px вправо относительно ленты карточек. */
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 21px;
		font-size: 28px;
		line-height: 36.4px;
		letter-spacing: -0.28px;
	}
	.pr-reviews__rating {
		gap: 8px;
		margin-bottom: 28.5px;
	}
	.pr-reviews__stars {
		width: 93.8px;
		height: 20.4px;
	}
	.pr-reviews__rating-text {
		font-size: 15px;
		line-height: 19.5px;
	}
	.pr-reviews__item {
		width: 327px;
		height: 440px;
		border: none;
	}
	.pr-reviews__photo {
		width: 327px;
		height: 209.8px;
	}
	.pr-reviews__caption {
		padding-left: 22px;
		font-size: 12px;
		line-height: 22px;
	}
	.pr-reviews__content {
		padding: 25.8px 23px 0;
	}
	.pr-reviews__rating-row {
		gap: 8px;
		margin-bottom: 18.5px;
	}
	.pr-reviews__stars--item {
		width: 77px;
		height: 17px;
	}
	.pr-below .pr-reviews__item-title {
		font-size: 18px;
		line-height: 22px;
	}
	.pr-reviews__text {
		margin-bottom: 23.5px;
		font-size: 15px;
		line-height: 22px;
	}
	.pr-reviews__author {
		font-size: 15px;
		line-height: 22px;
	}
	/* Desktop (Figma 50:7706): no fill/border at all - transparent, unlike
	   the mobile #f3f3f3 card. A plain 1px #e2e2e2 line (node 50:7705) sits
	   32px above and below it instead of a background block. Own type scale,
	   not a stretched mobile copy (24/31.2 title, 15/23 body, 20px gaps via
	   flex gap instead of per-paragraph margin - matches desc-body's own
	   auto-layout gap in Figma). */
	.pr-description {
		padding: 32px 0 0;
		margin-top: 32px;
		border-top: 1px solid #e2e2e2;
		background: none;
		border-radius: 0;
	}
	.pr .pr-description__title {
		margin: 0 0 20px;
		font-size: 24px;
		line-height: 31.2px;
		letter-spacing: -0.24px;
	}
	.pr-description__body {
		display: flex;
		flex-direction: column;
		gap: 20px;
		font-size: 15px;
		line-height: 23px;
		color: #585858;
	}
	.pr-description__body p {
		margin: 0;
		font-size: 15px;
		line-height: 23px;
		color: #585858;
	}
	/* .pr-bundle__note/.pr-bundle__list used to get desktop overrides here
	   (banner shrunk to inline-flex, list forced into a 2-column grid) —
	   that compensated for the block's wrong full-width placement. Now that
	   .pr-bundle lives in the right column (548px, see above), the base
	   mobile rules (full-width banner, flex-column list with an 8px gap)
	   already match the Figma "crosssell" 1:1, no override needed. */
	/* Desktop (Figma 50:7920): products-row в макете НЕ грид - у него
	   layoutWrap: NO_WRAP и контент шире рамки 1271px, тот же принцип
	   горизонтальной ленты, что у соседних секций. Карточка тоже другая:
	   квадратное фото 302x302 (не 185/239), и цена с наличием в один
	   ряд, а не друг под другом - см. .pr-similar__meta ниже. */
	.pr-below .pr-similar__title {
		font-size: 28px;
		line-height: 36.4px;
		letter-spacing: -0.28px;
	}
	.pr-similar__head {
		margin-bottom: 32px;
	}
	.pr-similar__link {
		gap: 6px;
		font-size: 15px;
		line-height: 19.5px;
	}
	.pr-similar__link svg {
		width: 12px;
		height: 15px;
	}
	.pr-similar__grid {
		display: flex;
		gap: 28px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.pr-similar__grid::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}
	.pr-similar__item {
		flex: 0 0 302px;
		width: 302px;
		scroll-snap-align: start;
	}
	.pr-similar__image {
		aspect-ratio: 1 / 1;
		margin-bottom: 16px;
		border-radius: 10px;
	}
	.pr-similar__name {
		-webkit-line-clamp: 1;
		margin-bottom: 14.5px;
		color: #222222;
		font-size: 16px;
		line-height: 24px;
	}
	/* Цена и наличие - в один ряд, цена первая (в Figma Frame104: цена,
	   потом стоk) - обратный порядок относительно mobile. */
	.pr-similar__meta {
		flex-direction: row;
		align-items: center;
		gap: 15px;
		margin-top: 0;
	}
	.pr-similar__stock {
		order: 2;
		gap: 6px;
		font-size: 15px;
		line-height: 19.5px;
	}
	.pr-similar__stock svg {
		width: 18px;
		height: 18px;
	}
	.pr-similar__prices {
		order: 1;
	}
	.pr-similar__price {
		color: #222222;
		font-size: 18px;
		line-height: 26px;
	}
	.pr-hero-repeat {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 545px;
		gap: 40px;
		align-items: start;
		margin-top: 40px;
	}
}

/* Тема применяет к заголовкам text-transform: uppercase прямым правилом на
   тег (h2/h3), а в макете эти заголовки набраны обычным регистром. Класс с
   одним селектором тема перебивает, поэтому переобъявляем явно. */
.pr .pr-bundle__title,
.pr .pr-description__title,
.pr-below .pr-reviews__title,
.pr-below .pr-reviews__item-title,
.pr-below .pr-similar__title {
	text-transform: none;
}

/* Свотчи цвета. Голое правило темы svg { fill: #878787 } перебивает атрибут
   fill в разметке (у атрибута нулевая специфичность), поэтому цвет галочки
   задаём селектором по классу. Кружок-ссылка не должен ловить общий
   a:hover { color: #06bec7 } и подчёркивание темы. */
.pr .pr-colors__check path {
	fill: #ffffff;
}
.pr .pr-colors__check--dark path {
	fill: #222222;
}
.pr a.pr-colors__swatch,
.pr a.pr-colors__swatch:hover,
.pr a.pr-colors__swatch:focus {
	text-decoration: none;
}
.pr a.pr-colors__swatch:hover {
	border-color: #06bec7;
}
.pr .pr-colors__name {
	line-height: 23.6px;
}

/* Десктопные значения свотчей дублируются здесь с двумя классами: правила
   выше (один класс) перебиваются копией стилей, которую инлайнит Lightning
   в конец страницы, поэтому нужна более высокая специфичность. */
@media (min-width: 992px) {
	.pr .pr-colors__name {
		line-height: 24px;
	}
	.pr .pr-features {
		margin-top: 37.5px;
	}
}

/* ============================================================================
   Quickview overlay (Figma "Crosssell overlay", node 50:8249, file
   O8TuOWqkk1GVyllpLbRHiM) - opened by the zoom icon on a bundle/cross-sell
   card. Appended to <body> by JS (js/product-redesign.js, initQuickview()),
   so it lives OUTSIDE .pr - every selector here is scoped under
   .pr-quickview on its own, including its own svg fill reset (see the
   file header notes on that gotcha).
   ========================================================================= */
.pr-quickview {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0,0,0,.75);
}
.pr-quickview svg[fill="none"],
.pr-quickview svg[fill="none"] path {
	fill: none;
}
.pr-quickview__card {
	position: relative;
	display: flex;
	width: 860px;
	max-width: 100%;
	max-height: calc(100vh - 40px);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 16px 40px rgba(0,0,0,.149);
}
.pr-quickview__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-quickview__close:hover,
.pr-quickview__close:focus {
	color: #ffffff;
	opacity: .8;
}
.pr-quickview__close svg {
	width: 24px;
	height: 24px;
}
.pr-quickview__media {
	position: relative;
	flex: 0 0 380px;
	width: 380px;
	background: #f0f0f0;
	border-radius: 12px 0 0 12px;
	overflow: hidden;
}
.pr-quickview .pr-gallery,
.pr-quickview .pr-gallery__stage {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	background: transparent;
	gap: 0;
}
.pr-quickview .pr-gallery__nav--prev { left: 20px; }
.pr-quickview .pr-gallery__nav--next { right: 20px; }
/* The exported chevron already points left; mirror it for "next"
   (product_redesign_gallery.twig's own chevron points the other way, so
   there the mirror is on "prev" instead - see the CSS notes above it). */
.pr-quickview .pr-gallery__nav--next svg {
	transform: scaleX(-1);
}
.pr-quickview .pr-gallery__progress {
	background: rgba(0,0,0,.06);
}
.pr-quickview__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 32px;
	padding: 48px;
	overflow-y: auto;
}
.pr-quickview__header {
	display: flex;
	flex-direction: column;
	gap: 18.5px;
}
.pr-quickview__sku {
	display: flex;
	align-items: center;
	gap: 4.5px;
}
.pr-quickview__sku-label {
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #585858;
}
.pr-quickview__sku-value {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: #585858;
	text-transform: uppercase;
}
.pr-quickview__title {
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 36.4px;
	color: #222222;
	text-transform: uppercase;
}
.pr-quickview__badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 24px;
	background: #fb5133;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 18.2px;
	letter-spacing: .84px;
}
.pr-quickview__badge-dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ffffff;
}
.pr-quickview__desc {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: #595959;
}
.pr-quickview__pricing {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pr-quickview__prices {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.pr-quickview__price-old {
	font-size: 19px;
	font-weight: 400;
	line-height: 24.7px;
	color: #fb5133;
	text-decoration: line-through;
}
.pr-quickview__price {
	font-size: 19px;
	font-weight: 700;
	line-height: 24.7px;
	color: #222222;
}
.pr-quickview__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 3.5px;
	background: #06bec7;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 20.8px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}
.pr-quickview__cta:hover,
.pr-quickview__cta:focus {
	background: #05a8b0;
	color: #ffffff;
}

@media (max-width: 767px) {
	.pr-quickview {
		padding: 16px;
		align-items: flex-end;
	}
	.pr-quickview__card {
		flex-direction: column;
		width: 100%;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
	.pr-quickview__close {
		top: -40px;
	}
	.pr-quickview__media {
		flex: 0 0 auto;
		width: 100%;
		height: 260px;
		border-radius: 12px 12px 0 0;
	}
	.pr-quickview__info {
		padding: 24px;
		gap: 24px;
	}
	.pr-quickview__title {
		font-size: 22px;
		line-height: 28.6px;
	}
}

/* ============================================================================
   Video lightbox - opened from the expand icon on the gallery video preview
   (.pr-gallery__video-expand, see product_redesign_gallery.twig and
   initGalleryVideoLightbox() in js/product-redesign.js). Built in JS
   directly, no AJAX round trip needed (the video id is already in the
   page's data-attribute) - unlike .pr-quickview, which fetches its markup
   from the server. Appended to <body>, so it lives outside .pr - same
   fill="none" svg reset as .pr-quickview (see that section's header note).
   ========================================================================= */
.pr-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0,0,0,.85);
}
.pr-video-lightbox svg[fill="none"],
.pr-video-lightbox svg[fill="none"] path {
	fill: none;
}
/* Аспект карточки, как и у маленького превью в галерее, берётся из
   РЕАЛЬНЫХ пропорций ролика (inline style, JS передаёт те же
   data-pr-gallery-video-width/height, что уже посчитаны на сервере) -
   9/16 тут только запасное значение, см. комментарий у
   .pr-gallery__video-frame выше. iframe ложится поверх постера
   абсолютным позиционированием на inset:0. card обрезает по
   border-radius и на всякий случай ограничивает высоту, если у
   какого-то конкретного ролика пропорции окажутся аномально вытянутыми
   для высоты экрана. */
.pr-video-lightbox__card {
	position: relative;
	width: 420px;
	max-width: 100%;
	max-height: calc(100vh - 40px);
	overflow: hidden;
	border-radius: 12px;
}
.pr-video-lightbox__frame {
	position: relative;
	aspect-ratio: 9 / 16;
	background: #000000;
}
.pr-video-lightbox__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pr-video-lightbox__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.pr-video-lightbox__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-video-lightbox__close:hover,
.pr-video-lightbox__close:focus {
	color: #ffffff;
	opacity: .8;
}
.pr-video-lightbox__close svg {
	width: 24px;
	height: 24px;
}

/* ===========================================================================
   Повтор HERO в конце страницы (Figma mobile 101:719, desktop 50:9034).
   Блок несёт класс .pr, поэтому базовая вёрстка героя (сетка, кнопка,
   счётчик, галерея) достаётся ему даром - тут только отличия повтора.
   Правила стоят в конце файла намеренно: часть из них переопределяет
   `.pr > .pr-gallery` с той же специфичностью, а при равной побеждает
   объявленное позже.
   =========================================================================== */
.pr-hero-repeat {
	margin-top: 8px;
}
/* Mobile-макет повтора (101:719) - только галерея и блок покупки. */
.pr-hero-repeat__head {
	display: none;
}
.pr-hero-repeat .pr-features {
	display: none;
}

@media (min-width: 992px) {
	.pr-hero-repeat {
		margin-top: 56px;
	}
	/* Правая колонка повтора (50:9057): бейдж, название, преимущества,
	   блок покупки. Липкости у этой галереи нет - в отличие от первого
	   экрана, прокручивать рядом с ней нечего. */
	.pr-hero-repeat > .pr-gallery {
		grid-column: 1;
		grid-row: 1;
		position: static;
		/* Без сброса пропорция 560/716 с первого экрана растягивает кадр
		   на всю высоту колонки: там она нужна липкой галерее, тут нет. */
		aspect-ratio: auto;
	}
	.pr-hero-repeat > .pr-hero-repeat__col {
		grid-column: 2;
		grid-row: 1;
	}
	.pr-hero-repeat__head {
		display: block;
		padding-top: 40px;
	}
	.pr-hero-repeat .pr-features {
		display: flex;
		margin-top: 37.5px;
	}
	.pr-hero-repeat .pr-buy {
		margin-top: 72px;
	}
	/* Бейдж NOVO в повторе стоит над названием (50:9062), а не на фото -
	   поэтому галерейный экземпляр тут скрыт, чтобы не было двух сразу. */
	.pr-hero-repeat .pr-gallery__badge {
		display: none;
	}
	.pr-hero-repeat__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 52px;
		height: 24.7px;
		padding: 0 10px;
		background: #000000;
		color: #ffffff;
		font-size: 12px;
		font-weight: 600;
		line-height: 24.7px;
		letter-spacing: .5px;
		text-transform: uppercase;
	}
	.pr .pr-hero-repeat__title {
		margin: 18px 0 0;
		padding: 0;
		font-size: 32px;
		line-height: 38px;
	}
}

/* Белое затухание у правого края лент — подсказка «тут ещё есть контент».
   Маска применяется к самому скролл-контейнеру, а не абсолютным оверлеем:
   она считается от его border-box и потому не уезжает вместе с прокруткой
   содержимого. Класс вешает JS (initScrollFade) — только когда ленте
   действительно есть куда прокручиваться и она не домотана до конца,
   иначе затухание съедало бы край последней карточки просто так. */
.pr-reviews__list.is-scroll-fade,
.pr-similar__grid.is-scroll-fade {
	-webkit-mask-image: linear-gradient(to right, #000000 calc(100% - 120px), transparent 100%);
	mask-image: linear-gradient(to right, #000000 calc(100% - 120px), transparent 100%);
}

/* ===========================================================================
   Опции товара: упаковка и гравировка
   (Figma mobile 101:475 "Frame 59", desktop 50:7578 "togglers").
   Как и у остальных секций, mobile и desktop - два отдельных фрейма с
   разными размерами, а не растянутая копия: карточка 390x79 с обводкой
   против 548x82 без неё, свои отступы и кегли.
   =========================================================================== */
.pr-options {
	display: flex;
	flex-direction: column;
	gap: 9.5px;
	margin-top: 35px;
	padding: 0 20px;
}
.pr-option {
	display: flex;
	align-items: center;
	height: 79px;
	/* Отступы уменьшены на 1px рамки: в макете иконка (i) стоит в 17.5 от
	   края карточки, а рамка в 1px входит внутрь этой же границы. */
	padding: 0 21px 0 16.5px;
	background: #f3f3f3;
	border: 1px solid #d0d0d0;
	border-radius: 10px;
	box-sizing: border-box;
}
.pr-option__info {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-option__info svg {
	display: block;
	width: 21px;
	height: 21px;
}
.pr-option__image {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 12.5px;
	width: 72px;
	height: 50px;
}
.pr-option__image img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}
/* Add-on photos (e.g. an engraving sample) get the rounded frame the
   engraving card had in Figma; transparent product shots are unaffected. */
.pr-option__image img {
	border-radius: 7.9px;
}
.pr-option__text {
	display: flex;
	flex-direction: column;
	margin-left: 21px;
	min-width: 0;
	flex: 1 1 auto;
}
.pr-option__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 23.6px;
	color: #222222;
}
.pr-option__price {
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	color: #585858;
}
.pr-option__switch {
	flex: 0 0 auto;
	position: relative;
	display: block;
	width: 46px;
	height: 27.4px;
	margin: 0;
	cursor: pointer;
}
/* Сам чекбокс не прячем display:none - так он выпадает из
   последовательности фокуса и перестаёт работать с клавиатуры. */
.pr-option__checkbox {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.pr-option__track {
	position: absolute;
	inset: 0;
	border-radius: 26.63px;
	background: #c9c9c9;
	transition: background .18s ease;
	pointer-events: none;
}
.pr-option__track::after {
	content: "";
	position: absolute;
	top: 2.4px;
	left: 2.4px;
	width: 22.6px;
	height: 22.6px;
	border-radius: 50%;
	background: #ffffff;
	transition: transform .18s ease;
}
.pr-option__checkbox:checked + .pr-option__track {
	background: #06bec7;
}
.pr-option__checkbox:checked + .pr-option__track::after {
	transform: translateX(18.6px);
}
.pr-option__checkbox:focus-visible + .pr-option__track {
	outline: 2px solid #06bec7;
	outline-offset: 2px;
}
/* Подпись нужна только программам чтения с экрана - в макете у тумблера
   видимой подписи нет, её роль играет название опции слева. */
.pr-option__switch-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 992px) {
	.pr-options {
		gap: 12px;
		margin-top: 32px;
		padding: 0;
	}
	.pr-option {
		height: 82px;
		padding: 0 20px 0 22.5px;
		border: 0;
	}
	.pr-option__image {
		margin-left: 20.5px;
	}
	.pr-option__image img {
		border-radius: 5px;
	}
	.pr-option__text {
		margin-left: 19px;
	}
	.pr-option__title,
	.pr-option__price {
		font-size: 15px;
		line-height: 24px;
	}
}

/* ===========================================================================
   Десктоп: доводка до точных цифр макета (18.09.2026).
   Прошлые десктопные размеры снимались с рендера в масштабе 0.25 (REST API
   тогда держал лимит) и были приблизительными - тут они заменены на числа
   из дерева нод: div.d-flex 50:7483 (галерея 622 = миниатюры 68 + 12 +
   кадр 542x713), div.col-info 50:7502 (колонка 548), module-title 50:7504.
   Блок в конце файла намеренно: часть правил переопределяет объявленные
   выше с той же специфичностью.
   =========================================================================== */
@media (min-width: 992px) {
	.pr {
		grid-template-columns: minmax(0, 1fr) 548px;
		grid-column-gap: 78px;
	}
	/* Пропорция живёт на самом кадре, а не на всей галерее: в галерее ещё
	   лента миниатюр, и аспект на контейнере растягивал кадр (тот же баг
	   чинили в повторе HERO). */
	.pr > .pr-gallery {
		aspect-ratio: auto;
	}
	.pr-gallery {
		gap: 12px;
	}
	.pr-gallery__stage {
		aspect-ratio: 542 / 713;
	}
	.pr-gallery__thumbs {
		width: 68px;
		flex: 0 0 68px;
		gap: 8px;
		max-height: 713px;
	}
	.pr-gallery__thumb {
		width: 68px;
		height: 85.3px;
		border: 0;
	}
	.pr-gallery__thumb:hover,
	.pr-gallery__thumb:focus {
		border: 0;
	}
	/* В макете обводка есть только у активной миниатюры, и она 2px. */
	.pr-gallery__thumb.is-active {
		border: 2px solid #06bec7;
	}

	/* Шапка (module-title 50:7504): свои кегли, не увеличенные мобильные. */
	.pr-head__top {
		margin-bottom: 25px;
	}
	.pr .pr-rating__stars {
		/* Ширина ряда звёзд — как в макете (90.3). Высота считается от
		   пропорций нашего SVG: в десктопном фрейме Figma звёзды стоят
		   теснее (шаг 17.7 при размере 19.6), в нашем общем с мобильным
		   SVG шаг шире, поэтому при точной ширине звезда выходит 16.5
		   вместо 19.6 — сознательный компромисс, чтобы не держать два
		   разных SVG в разметке. */
		width: 90.3px;
		height: 16.5px;
	}
	.pr .pr-rating__text {
		font-size: 15px;
		line-height: 19.5px;
	}
	.pr-sku__label,
	.pr-sku__value {
		font-size: 15px;
		line-height: 20px;
	}
	.pr-sku {
		gap: 6px;
	}
	.pr-head__badge {
		/* order 1, как у строки рейтинга: при равном order порядок решает
		   разметка, а там бейдж идёт сразу после неё (в самом .pr-head
		   элементы переставлены через order, см. блок выше). */
		order: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: flex-start;
		min-width: 52px;
		height: 24.7px;
		padding: 0 6.5px;
		background: #000000;
		color: #ffffff;
		margin-bottom: 18px;
		font-size: 14.3px;
		font-weight: 700;
		line-height: 24.7px;
		text-transform: uppercase;
	}
	/* Бейдж в макете десктопа стоит над названием, а не на фото. */
	.pr > .pr-gallery .pr-gallery__badge {
		display: none;
	}
	.pr .pr-title {
		/* Отступ перед названием даёт предыдущий элемент: 25 от строки
		   рейтинга, 18 от бейджа NOVO (в макете 50:7521 это два разных
		   зазора, а бейдж есть не у каждого товара). */
		margin: 0;
		padding: 0;
		font-size: 32px;
		line-height: 38px;
	}
	.pr .pr-short,
	.pr .pr-short p,
	.pr .pr-short span,
	.pr .pr-dimensions {
		font-size: 15px;
		line-height: 24px;
		color: #595959;
	}
	.pr .pr-short {
		margin-top: 25px;
	}
	/* Paragraphs of the admin short description: the "Dimenzije" paragraph
	   sits 10px below the text on desktop (Figma 50:7517). */
	.pr .pr-short p {
		margin: 0 0 10px;
	}
	.pr .pr-short p:last-child {
		margin-bottom: 0;
	}
	.pr .pr-dimensions {
		margin-top: 10px;
	}
}

/* Бейдж NOVO в шапке - только десктоп: в мобильном макете он лежит на
   фото галереи (101:410), а не над названием. Скрываем именно
   max-width-запросом: правило стоит в конце файла, и обычный класс
   перебил бы десктопное display: inline-flex выше. */
@media (max-width: 991px) {
	.pr-head__badge {
		display: none;
	}
}

/* Блок покупки на десктопе (Figma 50:7597 Frame 97). Отличается от
   мобильного не только кеглем: счётчик - «таблетка» 140x54, кнопка ниже
   радиусом, полоса гарантий выше, а платёжная строка вообще не часть
   тёмной карточки - она стоит под ней на белом фоне, правым краем. */
@media (min-width: 992px) {
	.pr-buy {
		overflow: visible;
		border-radius: 0;
		/* Фон переезжает на сами полосы: платёжная строка в макете лежит
		   уже НЕ на тёмной карточке, а на белом фоне страницы. */
		background: transparent;
	}
	.pr-buy__main {
		padding: 24px 28px 28px;
		/* Тёмный фон был на .pr-buy целиком, но там же теперь лежит
		   платёжная строка на белом - поэтому фон переехал сюда. */
		background: #222222;
		border-radius: 10px 10px 0 0;
	}
	.pr-buy__price {
		font-size: 32px;
		line-height: 52px;
	}
	/* Desktop 50:7603: 14/18 #898989, 4 below the price. */
	.pr-buy__lowest {
		margin-top: 4px;
		font-size: 14px;
		line-height: 18px;
	}
	.pr-buy__row {
		margin-bottom: 40px;
	}
	.pr .pr-qty {
		width: 140px;
		height: 54px;
		border-radius: 50px;
		border-color: #464646;
	}
	.pr .pr-buy__cart {
		height: 54px;
		border-radius: 3.5px;
	}
	.pr-buy__guarantees {
		height: 56px;
		padding: 16px 24px;
		border-radius: 0 0 10px 10px;
	}
	.pr-buy__guarantee {
		font-size: 14px;
		line-height: 22px;
	}
	.pr-buy__guarantee-sep {
		height: 24px;
		background: #424242;
	}
	.pr-buy__payments {
		height: 34px;
		margin-top: 15px;
		padding: 6px 0;
		justify-content: flex-end;
		gap: 14px;
		background: transparent;
	}
	.pr-buy__payment {
		font-size: 13px;
		line-height: 22px;
		font-weight: 600;
		color: #838383;
	}
	.pr-buy__payment svg {
		color: #838383;
	}
	.pr-buy__payment-sep {
		height: 16px;
		background: #e2e2e2;
	}
	/* В макете платёжные логотипы монохромные под цвет строки. */
	.pr-buy__payment--mastercard span:first-child {
		background: #838383;
	}
	.pr-buy__payment--mastercard span:last-child {
		background: #9d9d9d;
	}
}

/* ===========================================================================
   Pixel pass 22.09.2026 - both breakpoints re-checked against the Figma
   NODE TREE (mobile 101:308, desktop 50:7406), not against a render.
   Appended at the end on purpose: several rules here override earlier
   declarations of the same specificity. Mobile values are wrapped in
   max-width: 991px so they cannot leak into the desktop block above - the
   trap this file has hit more than once.
   =========================================================================== */

/* ---------- Payment row: real logos exported from the mockup ----------
   Every glyph carries fill="currentColor" on its paths: the theme's bare
   `svg { fill: #878787 }` only targets the svg element, and the sweeping
   `svg[fill="none"] path { fill: none }` reset at the top of this file
   would blank a filled logo out - so the root <svg> deliberately has no
   fill="none" attribute. */
.pr .pr-buy__payment-icon,
.pr .pr-buy__payment-logo {
	display: block;
	flex: 0 0 auto;
	fill: currentColor;
}
.pr .pr-buy__payment-logo path,
.pr .pr-buy__payment-icon path {
	fill: currentColor;
}
.pr-buy__payment--logo {
	gap: 0;
}
/* Courier badges next to the delivery date (Figma 50:7611 posta / 50:7612 dpd). */
.pr-buy__delivery {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.pr-buy__courier {
	flex: 0 0 auto;
	display: block;
}
.pr-buy__guarantee strong {
	font-weight: 700;
}

/* ---------------------------- MOBILE (101:308) ---------------------------- */
@media (max-width: 991px) {
	.pr .pr-rating__text {
		line-height: 15.6px;
	}
	.pr .pr-title {
		line-height: 23.6px;
	}
	/* Dark card: 16.5/20/27/20 padding, 24.5 between the price row and the
	   cart row (Figma 101:527). The old 20px/32px pair happened to land the
	   cart row at the same y only because this shop has no price history,
	   so the "Najnižja cena zadnjih 30 dni" line under the price is absent. */
	.pr-buy {
		background: transparent;
	}
	.pr-buy__main {
		padding: 16.5px 20px 27px;
		background: #222222;
	}
	.pr-buy__actions {
		margin-top: 24.5px;
	}
	.pr-buy__stock {
		gap: 5px;
		font-size: 13px;
		line-height: 16.9px;
	}
	.pr-buy__stock svg {
		width: 16px;
		height: 16px;
	}
	.pr-buy__delivery {
		gap: 7px;
		margin-top: 10.5px;
		font-size: 12px;
		font-weight: 500;
		line-height: 15.6px;
	}
	.pr-buy__courier {
		width: 18.4px;
		height: 18.4px;
	}
	.pr .pr-qty,
	.pr .pr-buy__cart {
		border-radius: 3.5px;
	}
	.pr-buy__guarantees {
		gap: 16.5px;
		height: 55px;
		padding: 0 24px;
	}
	.pr-buy__guarantee {
		font-size: 13px;
		font-weight: 400;
		line-height: 22.4px;
	}
	.pr-buy__guarantee-sep {
		height: 23px;
		background: #424242;
	}
	/* Payment row sits on the white page below the dark card, not inside it
	   (Figma 101:557 has no fill) - the same correction desktop already got
	   on 18.09, mobile had been left on the old black strip. */
	.pr-buy__payments {
		gap: 12px;
		height: 35px;
		padding: 6px 19.5px;
		background: transparent;
	}
	.pr-buy__payment {
		font-size: 13px;
		font-weight: 600;
		line-height: 22.4px;
		color: #838383;
	}
	.pr-buy__payment-sep {
		height: 16px;
		background: #e2e2e2;
	}
	.pr-buy__payment .pr-buy__payment-icon--bank {
		width: 15px;
		height: 15px;
	}
	.pr-buy__payment .pr-buy__payment-icon--cash {
		width: 14px;
		height: 14px;
	}
	.pr-buy__payment .pr-buy__payment-logo--paypal {
		width: 45px;
		height: 15px;
	}
	.pr-buy__payment .pr-buy__payment-logo--visa {
		width: 37px;
		height: 11px;
	}
	.pr-buy__payment .pr-buy__payment-logo--mc {
		width: 24px;
		height: 14.8px;
	}
	/* Description (Figma 101:606): 29/20/34/20, 23.5 under the heading,
	   body 14/21.7 #585858 with 20.9 between paragraphs. */
	.pr-description {
		margin-top: 0;
		padding: 29px 20px 34px;
		border-top-color: #e2e2e2;
	}
	.pr .pr-description__title {
		margin-bottom: 23.5px;
		letter-spacing: -0.2px;
	}
	.pr-description__body {
		display: flex;
		flex-direction: column;
		gap: 20.9px;
		font-size: 14px;
		line-height: 21.7px;
		color: #585858;
	}
	.pr-description__body p {
		margin: 0;
		font-size: 14px;
		line-height: 21.7px;
		color: #585858;
	}
}

/* ---------------------------- DESKTOP (50:7406) --------------------------- */
@media (min-width: 992px) {
	/* Row 50:7480: gallery content 622 (x 335..957) + 80 + info content 548
	   (x 1037..1585) = 1250. The grid was 78/1248 - two pixels short. */
	.pr {
		max-width: 1250px;
		grid-column-gap: 80px;
	}
	.pr-below {
		max-width: 1250px;
	}
	/* Feature dividers are 110 tall inside the 116 content box (50:7558 et
	   al.), not stretched to the full row height. */
	.pr-features__divider {
		height: 110px;
		align-self: center;
	}
	/* Policy strip is left-aligned on desktop (50:7628 policy-row starts at
	   24+3 from the card edge, gap 20) - only the mobile one is centered. */
	.pr-buy__guarantees {
		justify-content: flex-start;
		gap: 20px;
		padding: 16px 27px;
	}
	.pr-buy__stock {
		gap: 6px;
		font-size: 15px;
		line-height: 19.5px;
	}
	.pr-buy__stock svg {
		width: 18px;
		height: 18px;
	}
	.pr-buy__delivery {
		gap: 8px;
		margin-top: 10px;
		font-size: 15px;
		font-weight: 500;
		line-height: 19.5px;
	}
	.pr-buy__courier {
		width: 20px;
		height: 20px;
	}
	.pr-buy__payment .pr-buy__payment-icon--bank {
		width: 16px;
		height: 16px;
	}
	.pr-buy__payment .pr-buy__payment-icon--cash {
		width: 15px;
		height: 15px;
	}
	.pr-buy__payment .pr-buy__payment-logo--paypal {
		width: 48px;
		height: 16px;
	}
	.pr-buy__payment .pr-buy__payment-logo--visa {
		width: 40px;
		height: 12px;
	}
	.pr-buy__payment .pr-buy__payment-logo--mc {
		width: 26px;
		height: 16px;
	}
	/* Cross-sell (50:7666): no border - its #f0f0f0 stroke is hidden in
	   Figma (visible: false). In the column it sits between two #e2e2e2
	   lines (50:7665 / 50:7705) with 32 on each side; the top line is drawn
	   here, the bottom one is .pr-description's border-top. 11.5 bottom
	   padding, heading 24/31.2, 34.5 down to the first item. Applies to
	   both lists that reuse the component. */
	.pr-cross,
	.pr-bundle {
		margin-top: 32px;
		padding: 32px 0 11.5px;
		border: 0;
		border-top: 1px solid #e2e2e2;
		border-radius: 0;
		background: #ffffff;
	}
	/* Desktop header (50:7667): no lock icon, title 24/31.2 -0.24, 16 down
	   to the banner (padding 9/12, 15/19.5 700 +0.9), 34.5 to the list. */
	.pr .pr-cross__title,
	.pr .pr-bundle__title {
		margin: 0 0 34.5px;
		font-size: 24px;
		line-height: 31.2px;
		letter-spacing: -0.24px;
	}
	.pr .pr-bundle__title {
		margin-bottom: 16px;
	}
	.pr-bundle__title-icon {
		display: none;
	}
	.pr-bundle__note {
		min-height: 33px;
		margin-bottom: 34.5px;
		padding: 6.75px 12px;
		font-size: 15px;
		line-height: 19.5px;
		letter-spacing: 0.9px;
	}
}

@media (min-width: 1360px) {
	.pr,
	.pr-below {
		width: 1250px;
		margin-left: calc(50% - 625px);
		margin-right: calc(50% - 625px);
	}
	/* Same bleed target as before, re-based on the 1250 column: right edge
	   should land on documentElement.clientWidth (D = 100vw - scrollbar),
	   width = D/2 + 625 = 50vw + 617.5, trimmed by ~1.5px for rounding. */
	.pr-reviews__list,
	.pr-similar__grid {
		width: calc(50vw + 616px);
	}
}

/* ---------- "Smol item" cross-sell card (mobile 122:3120, desktop 173:7820)
   Both breakpoints use the SAME card component, only the type scale differs.
   The earlier numbers (r8, 64x64 image, 28.75 zoom, 46 button) came off a
   render; the node tree gives r5, a 76x80 photo flush with the card edges,
   a 35px zoom bubble with a hairline border and a 45px button. */
.pr-bundle__item {
	gap: 10.1px;
	padding: 0 18.9px;
	border-radius: 5px;
}
.pr-bundle__name {
	margin: 0 0 2.5px;
	color: #353535;
	font-size: 14px;
	line-height: 22.4px;
}
.pr-bundle__name:hover,
.pr-bundle__name:focus {
	color: #353535;
}
.pr-bundle__price-old {
	font-size: 14px;
	font-weight: 500;
	line-height: 22.4px;
}
.pr-bundle__price {
	color: #353535;
	font-size: 14px;
	font-weight: 500;
	line-height: 22.4px;
}
.pr-bundle__image {
	width: 76px;
	height: 80px;
	border-radius: 6.5px;
	overflow: hidden;
}
/* Deliberate deviation: the mockup's demo photo fills the box edge to edge,
   but this shop's product shots are square on white, so `cover` would crop
   them - `contain` keeps the whole product visible inside the same box. */
.pr-bundle__image img {
	object-fit: contain;
}
.pr-bundle__zoom {
	top: 9.5px;
	right: 7px;
	width: 35px;
	height: 35px;
	border: 1px solid rgba(0,0,0,.19);
}
.pr-bundle__add {
	height: 45px;
	border-radius: 3.5px;
}

@media (min-width: 992px) {
	.pr-bundle__name,
	.pr-bundle__price-old,
	.pr-bundle__price {
		font-size: 15px;
		line-height: 22.4px;
	}
}

/* Brand name in the store-rating line is bold in both mockups
   (101:442 / 50:7517 carry a 700 override on the first 7 characters). */
.pr-rating__text strong {
	font-weight: 700;
	color: inherit;
}

/* ---------- Section order + vertical rhythm of the tail sections ----------
   The two mockups order these differently: desktop 50:7714 runs reviews →
   similar → hero repeat, mobile 101:308 runs reviews → hero repeat →
   similar. All three are now children of the same flex column (.pr-below),
   so the order is a breakpoint switch instead of duplicated markup. */
.pr-below {
	display: flex;
	flex-direction: column;
}
.pr-below .pr-reviews { order: 1; }
.pr-below .pr-hero-repeat { order: 2; }
.pr-below .pr-similar { order: 3; }

@media (min-width: 992px) {
	.pr-below .pr-similar { order: 2; }
	.pr-below .pr-hero-repeat { order: 3; }
	/* similar-products frame 50:7714: 56 above the reviews heading, 74
	   between the three blocks, 83.5 below the hero repeat. */
	.pr-below .pr-reviews {
		padding: 56px 0 0;
	}
	.pr-below .pr-similar {
		padding: 74px 0 0;
	}
	.pr-below .pr-hero-repeat {
		margin-top: 74px;
		margin-bottom: 83.5px;
	}
}

@media (max-width: 991px) {
	/* Mobile frame 101:719 carries 12 top / 19.5 bottom padding of its own
	   and sits flush against the neighbouring sections. */
	/* .pr-below needs the same -20px breakout .pr has: the theme column
	   carries 20px side padding, while the mobile mockup is built on the
	   full 430 and every section inside (reviews, similar) brings its own
	   20px padding. Without it everything here was inset twice - the
	   similar-products columns came out 165 wide instead of 185 and the
	   white section backgrounds stopped short of the screen edges. The
	   breakout was lost on 17.09.2026, when .pr-below was moved out of
	   .pr's grid to fix the sticky gallery's release point. */
	.pr-below {
		margin: 0 -20px;
	}
	.pr-below .pr-hero-repeat {
		margin: 0;
		padding: 12px 0 19.5px;
	}
}

/* ---------- Mobile sticky bar (Figma 103:2864) ----------
   430x66 #222 with 8/21.5 padding: a 246x50 CTA on the left and the
   stock/delivery pair on the right. Mobile only - the desktop keeps the
   theme's own floating mini-card (ТЗ, product page item 11).
   z-index stays BELOW the cart sidecar (backdrop 99998 / panel 99999 in
   cart-sidecar.css) so the panel covers the bar when it slides in. */
.pr-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99997;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 66px;
	padding: 8px 21.5px;
	background: #222222;
	/* Visible drop shadow of the frame: 0/-12/22.9 rgba(23,54,55,.04)
	   (the second effect on 103:2864 - the first one is switched off). */
	box-shadow: 0 -12px 22.9px rgba(23,54,55,.04);
	/* Hidden by default in CSS, not by an attribute: `visibility` also
	   takes the button out of the tab order while the bar is off screen. */
	visibility: hidden;
	transform: translateY(100%);
	transition: transform .22s ease, visibility .22s ease;
}
.pr-sticky-bar.is-visible {
	visibility: visible;
	transform: none;
}
.pr-sticky-bar__cart {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6.5px;
	width: 246px;
	height: 50px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 3.5px;
	background: #06bec7;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 18.2px;
	text-transform: uppercase;
	cursor: pointer;
}
.pr-sticky-bar__cart:hover,
.pr-sticky-bar__cart:focus {
	background: #05a8b0;
	color: #ffffff;
}
.pr-sticky-bar__cart svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	display: block;
	fill: none;
}
/* The bar sits outside .pr / .pr-below, so the fill resets at the top of
   this file do not reach it - the theme's bare `svg { fill: #878787 }`
   would otherwise blob these outline icons in. */
.pr-sticky-bar svg[fill="none"],
.pr-sticky-bar svg[fill="none"] path,
.pr-sticky-bar svg[fill="none"] circle {
	fill: none;
}
.pr-sticky-bar__meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	padding: 4px 0;
}
.pr-sticky-bar__stock {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #5fee63;
	font-size: 13px;
	font-weight: 600;
	line-height: 16.9px;
	text-transform: uppercase;
}
.pr-sticky-bar__stock svg {
	width: 16px;
	height: 16px;
	display: block;
}
.pr-sticky-bar__delivery {
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	line-height: 15.6px;
}
@media (min-width: 992px) {
	.pr-sticky-bar {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
   Prev/next arrows for the "Podobni izdelki" and "Mnenja kupcev" strips
   (24.09.2026, not in Figma). Same chevron as the gallery arrows, but
   outlined so they read on white: 44px circles with a #e2e2e2 hairline,
   dark fill on hover, faded when the strip is at that end. Desktop only -
   on mobile both sections follow Figma without them. In "Podobni izdelki"
   they sit on the strip (05.10.2026), see .pr-similar__strip below.
--------------------------------------------------------------------------- */
.pr-scroll-nav {
	display: none;
}
@media (min-width: 992px) {
	.pr-scroll-nav {
		display: flex;
		gap: 10px;
	}
	.pr-scroll-nav[hidden] {
		display: none;
	}
}
.pr-below .pr-scroll-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid #e2e2e2;
	border-radius: 50%;
	background: #ffffff;
	color: #222222;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.pr-below .pr-scroll-nav__btn:hover {
	border-color: #222222;
	background: #222222;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.pr-below .pr-scroll-nav__btn:focus {
	outline: none;
}
.pr-below .pr-scroll-nav__btn:focus-visible {
	outline: 2px solid #06bec7;
	outline-offset: 2px;
}
.pr-below .pr-scroll-nav__btn:disabled,
.pr-below .pr-scroll-nav__btn:disabled:hover {
	border-color: #e2e2e2;
	background: #ffffff;
	color: #222222;
	box-shadow: none;
	opacity: 0.35;
	cursor: default;
}
/* Theme rule svg { fill: #878787 } beats the attribute, so repeat it here. */
.pr-below .pr-scroll-nav__btn svg {
	display: block;
	width: 8px;
	height: 14px;
}
.pr-below .pr-scroll-nav__btn svg path {
	fill: currentColor;
}
.pr-below .pr-scroll-nav__btn--prev svg {
	transform: scaleX(-1);
}


/* ============================================================================
   Add-on configurator popup (engraving) - Figma desktop 50:8223 / 173:8264,
   mobile 148:5479. Built on the quickview overlay (.pr-quickview*: dark
   backdrop, close button above the card, 380px gallery on the left, 48px
   padded white panel with a 32px gap, 56px CTA), plus its own form parts.
   Rendered hidden inside the options block and moved to <body> by JS on
   first open (initAddonOptions() in js/product-redesign.js), so every
   selector is scoped under .pr-addon-modal and beats the theme's tag rules
   (label/input/textarea/h2) on specificity.
   ========================================================================= */
.pr-addon-modal[hidden] {
	display: none;
}
/* 380 gallery + 24.5 gap + 540 panel (modal-card 50:8224). */
.pr-addon-modal .pr-addon-modal__card {
	width: 944px;
	gap: 24.5px;
	background: transparent;
	box-shadow: none;
}
.pr-addon-modal .pr-quickview__media {
	border-radius: 12px;
	align-self: stretch;
	min-height: 421px;
}
.pr-addon-modal .pr-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pr-addon-modal .pr-addon-modal__info {
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 16px 40px rgba(0,0,0,.149);
}
.pr-addon-modal .pr-addon-modal__head {
	display: flex;
	flex-direction: column;
	gap: 3.7px;
}
.pr-addon-modal .pr-addon-modal__subtitle {
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #585858;
}
.pr-addon-modal .pr-addon-modal__title {
	margin: 0;
	padding: 0;
	font-size: 21.5px;
	font-weight: 700;
	line-height: 27.9px;
	color: #222222;
	text-transform: uppercase;
}
.pr-addon-modal .pr-addon-modal__fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pr-addon-modal .pr-addon-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Section label with the hairline after it (summary 173:8446: 14/20 500,
   line #cecece, gap 17.7). */
.pr-addon-modal .pr-addon-field__label {
	display: flex;
	align-items: center;
	gap: 17.7px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #222222;
}
.pr-addon-modal .pr-addon-field__label::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: #cecece;
}
.pr-addon-modal .pr-addon-field__required {
	margin-left: 2px;
	color: #fb5133;
}
/* Text field (Gravura tekst 22:2273: 45px, #f0f0f0, r8, 13/20). */
.pr-addon-modal .pr-addon-field__input {
	display: block;
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #f0f0f0;
	box-shadow: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	color: #222222;
	outline: none;
}
.pr-addon-modal .pr-addon-field__input--area {
	height: auto;
	min-height: 90px;
	padding: 12px 16px;
	resize: vertical;
}
.pr-addon-modal .pr-addon-field__input::placeholder {
	color: #585858;
	opacity: 1;
}
.pr-addon-modal .pr-addon-field__input:focus {
	border-color: #06bec7;
	background: #ffffff;
}
.pr-addon-modal .pr-addon-field.has-error .pr-addon-field__input,
.pr-addon-modal .pr-addon-field.has-error .pr-addon-tile {
	border-color: #fb5133;
}
/* Choice tiles (position tiles 173:8453: 147x65, #f0f0f0, r6.6, selected
   stroke #06bec7 2.5, text 11/12.9 600). */
.pr-addon-modal .pr-addon-field__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 5.5px;
}
.pr-addon-modal .pr-addon-tile {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 147px;
	min-height: 65px;
	margin: 0;
	padding: 8px 12px;
	border: 2.5px solid transparent;
	border-radius: 6.6px;
	background: #f0f0f0;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease;
}
.pr-addon-modal .pr-addon-tile:hover {
	border-color: #bfeff1;
}
.pr-addon-modal .pr-addon-tile__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.pr-addon-modal .pr-addon-tile:has(.pr-addon-tile__input:checked) {
	border-color: #06bec7;
}
.pr-addon-modal .pr-addon-tile:has(.pr-addon-tile__input:focus-visible) {
	outline: 2px solid #06bec7;
	outline-offset: 2px;
}
.pr-addon-modal .pr-addon-tile__name {
	font-size: 11px;
	font-weight: 600;
	line-height: 12.9px;
	color: #222222;
}
.pr-addon-modal .pr-addon-tile__price {
	font-size: 11px;
	font-weight: 400;
	line-height: 12.9px;
	color: #585858;
}
.pr-addon-modal .pr-addon-field__error {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #fb5133;
}
.pr-addon-modal .pr-addon-field__error[hidden] {
	display: none;
}
/* Consent (Frame 43 173:8430: 23px box, hairline rgba(0,0,0,.19), r2.8,
   gap 11, text 12/20). */
.pr-addon-modal .pr-addon-consent-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pr-addon-modal .pr-addon-consent {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}
.pr-addon-modal .pr-addon-consent__input {
	position: absolute;
	width: 23px;
	height: 23px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.pr-addon-modal .pr-addon-consent__box {
	display: flex;
	flex: 0 0 23px;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border: 1.3px solid rgba(0,0,0,.19);
	border-radius: 2.8px;
	background: #ffffff;
	color: transparent;
}
.pr-addon-modal .pr-addon-consent__box svg {
	width: 15px;
	height: 15px;
}
.pr-addon-modal .pr-addon-consent__input:checked + .pr-addon-consent__box {
	border-color: #06bec7;
	background: #06bec7;
	color: #ffffff;
}
.pr-addon-modal .pr-addon-consent__input:focus-visible + .pr-addon-consent__box {
	outline: 2px solid #06bec7;
	outline-offset: 2px;
}
.pr-addon-modal .pr-addon-consent__text {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	color: #222222;
}

/* Select-type option as a dropdown (same field look as the text input) with
   the gallery chevron turned down; the native arrow is hidden. */
.pr-addon-modal .pr-addon-field__select-wrap {
	position: relative;
	display: block;
}
.pr-addon-modal .pr-addon-field__select {
	padding-right: 44px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}
.pr-addon-modal .pr-addon-field__select-wrap::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid #535353;
	border-bottom: 2px solid #535353;
	transform: rotate(45deg);
	pointer-events: none;
}
.pr-addon-modal .pr-addon-field.has-error .pr-addon-field__select {
	border-color: #fb5133;
}

/* Card on the product page once the popup is confirmed: what was entered +
   an "Uredi" link that reopens the popup. */
.pr-option__summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin-top: 2px;
	font-size: 12px;
	line-height: 16px;
	color: #585858;
}
.pr-option__summary[hidden] {
	display: none;
}
.pr-option__summary-text {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pr .pr-option__edit {
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: #00838a;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 767px) {
	/* Mobile (148:5479): one white card, photo on top, panel below. */
	/* The card scrolls on mobile (overflow-y: auto), which clips the close
	   button placed above it - pin the button to the screen corner instead
	   and keep a strip free for it above the card. */
	.pr-addon-modal {
		padding-top: 56px;
	}
	.pr-addon-modal .pr-quickview__close {
		position: fixed;
		top: 12px;
		right: 16px;
		z-index: 1;
	}
	.pr-addon-modal .pr-addon-modal__card {
		gap: 0;
		max-height: calc(100vh - 72px);
		border-radius: 10px;
		background: #ffffff;
	}
	.pr-addon-modal .pr-quickview__media {
		min-height: 0;
		height: 260px;
		border-radius: 10px 10px 0 0;
	}
	.pr-addon-modal .pr-addon-modal__info {
		border-radius: 0 0 10px 10px;
		box-shadow: none;
		overflow: visible;
	}
	.pr-addon-modal .pr-addon-modal__subtitle {
		font-size: 12px;
		line-height: 20px;
	}
	.pr-addon-modal .pr-addon-modal__title {
		font-size: 20px;
		font-weight: 600;
		line-height: 23.6px;
	}
	.pr-addon-modal .pr-addon-tile {
		flex: 1 1 calc(50% - 5.5px);
		min-width: 0;
	}
}

/* ===========================================================================
   Client fixes 01.10.2026 (mail "Re: tons redesign", 28.09).
   =========================================================================== */
/* 1. HERO gap. Frame 50:7500 (product-image-right) is 542 wide with
   padding-left 10, but its image 50:7501 is 554x713 and overflows the frame
   to the right (clipsContent off). Rendered: thumbs 68, gap 22, image 554,
   gap 58 to the info column, total still 1250. We used the frame bounds
   (12 / 542 / 80), so the gap looked too wide next to the prototype. */
@media (min-width: 992px) {
	.pr {
		grid-column-gap: 58px;
	}
	.pr-gallery {
		gap: 22px;
	}
	.pr-gallery__stage {
		aspect-ratio: 554 / 713;
	}
}

/* ---------------------------------------------------------------------------
   "Mnenja kupcev" head: title + the same prev/next arrows as "Podobni
   izdelki" (04.10.2026, not in Figma). The head takes over the title's
   bottom margin (11 mobile / 21 desktop) so the spacing to the rating row
   stays as in Figma; the arrows are desktop only (.pr-scroll-nav).
--------------------------------------------------------------------------- */
.pr-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 11px;
}
.pr-below .pr-reviews__head .pr-reviews__title {
	margin: 0;
}
@media (min-width: 992px) {
	.pr-reviews__head {
		margin-bottom: 21px;
	}
}
/* The 44px arrows are taller than the 36.4px desktop title - pull them
   out of the flow height so the title-to-rating gap stays 21. */
.pr-reviews__head .pr-scroll-nav {
	margin: -3.8px 0;
}
/* 4-star review card: the fifth star turns into the empty tone, the same
   #faf1e4 as the unfilled part of the shop rating above. */
.pr-below .pr-reviews__stars--item svg rect.pr-reviews__star-empty {
	fill: #faf1e4;
}


/* ---------------------------------------------------------------------------
   "Podobni izdelki" (client feedback 28.09, item 5; 05.10.2026).
   The head is as in Figma - title left, category link flush right
   (50:7921 SPACE_BETWEEN) - so the prev/next arrows moved off the head
   onto the strip: one on each side, centred on the 302px desktop photo.
   "prev" is inset 16px; "next" ends on the right edge of the main 1250
   column, level with the "Mnenja kupcev" arrows, not at the window edge
   where the full-bleed strip ends. The arrows are a sibling of the
   scroller, so the fade mask does not touch them. At either end the button disappears instead of fading.
   Mobile: Figma 101:811 is a 2x3 grid, so only the first 6 cards show
   (the controller sends up to 10 for the desktop strip).
--------------------------------------------------------------------------- */
.pr-similar__strip {
	position: relative;
}
@media (max-width: 991px) {
	.pr-similar__item:nth-child(n+7) {
		display: none;
	}
}
@media (min-width: 992px) {
	.pr-similar__strip .pr-scroll-nav {
		position: absolute;
		top: 129px;
		left: 16px;
		right: 0;
		z-index: 2;
		justify-content: space-between;
		gap: 0;
		pointer-events: none;
	}
	.pr-below .pr-similar__strip .pr-scroll-nav__btn {
		pointer-events: auto;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	}
	.pr-below .pr-similar__strip .pr-scroll-nav__btn:disabled,
	.pr-below .pr-similar__strip .pr-scroll-nav__btn:disabled:hover {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	/* "prev" stays on the left even when it is the only one shown. */
	.pr-similar__strip .pr-scroll-nav__btn--next {
		margin-left: auto;
	}
}
/* The full-bleed strip is wider than the column: size the arrow row to
   the 1250 column (minus the 16px left inset) instead of the strip. */
@media (min-width: 1360px) {
	/* Only here the strip is wider than the column (explicit full-bleed
	   width), so let the wrapper follow it. Below 1360 fit-content would
	   grow the wrapper to the strip's max-content and kill the scroll. */
	.pr-similar__strip {
		width: -webkit-fit-content;
		width: fit-content;
	}
	.pr-similar__strip .pr-scroll-nav {
		right: auto;
		width: 1234px;
	}
}

/* ============================================================================
   Add-on popups, 08.10.2026 (client mail 28.09, item 6): info popup (gift
   box, Figma 50:8278 / mobile 101:287) and the engraving configurator with
   places + summary (Figma 50:8223 -> 173:8264, mobile 148:5341 -> 148:5399).
   Markup: product_redesign_options.twig, logic: initAddonOptions().
   =========================================================================== */

/* The (i) on the option cards was invisible: its svg has fill="none" and the
   path's own fill attribute loses to `.pr svg[fill="none"] path`. */
.pr .pr-option__info svg path {
	fill: #585858;
}

/* Engraving fonts (Figma font tiles 159:3676..3682). Loaded by JS from Google
   Fonts when a configurator opens. */
.pr-addon-modal .pr-font-1,
.pr-addon-modal .pr-zone-tile__name.pr-font-1 {
	font-family: 'Judson', Georgia, serif;
	font-size: 20.7px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.pr-addon-modal .pr-font-2,
.pr-addon-modal .pr-zone-tile__name.pr-font-2 {
	font-family: 'Karla', Arial, sans-serif;
	font-size: 19.4px;
	font-weight: 700;
	letter-spacing: -.97px;
	text-transform: none;
}
.pr-addon-modal .pr-font-3,
.pr-addon-modal .pr-zone-tile__name.pr-font-3 {
	font-family: 'Lexend Tera', Arial, sans-serif;
	font-size: 13.8px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}
.pr-addon-modal .pr-font-4,
.pr-addon-modal .pr-zone-tile__name.pr-font-4 {
	font-family: 'Lobster', cursive;
	font-size: 20.7px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ---- Places (zones) ---- */
.pr-addon-modal .pr-zones {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* Switch row (Frame 61: 38 tall, toggle 47x28 r27, knob 23.1, gap 17). */
.pr-addon-modal .pr-zone__switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 17px;
	min-height: 38px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}
.pr-addon-modal .pr-zone__toggle {
	position: absolute;
	left: 0;
	top: 50%;
	width: 47px;
	height: 28px;
	margin: -14px 0 0;
	opacity: 0;
	cursor: pointer;
}
.pr-addon-modal .pr-zone__track {
	position: relative;
	flex: 0 0 47px;
	width: 47px;
	height: 28px;
	border-radius: 27.2px;
	background: #c9c9c9;
	transition: background .18s ease;
	pointer-events: none;
}
.pr-addon-modal .pr-zone__track::after {
	content: "";
	position: absolute;
	top: 2.45px;
	left: 2.5px;
	width: 23.1px;
	height: 23.1px;
	border-radius: 50%;
	background: #ffffff;
	transition: transform .18s ease;
}
.pr-addon-modal .pr-zone__toggle:checked + .pr-zone__track {
	background: #06bec7;
}
.pr-addon-modal .pr-zone__toggle:checked + .pr-zone__track::after {
	transform: translateX(18.9px);
}
.pr-addon-modal .pr-zone__toggle:focus-visible + .pr-zone__track {
	outline: 2px solid #06bec7;
	outline-offset: 2px;
}
.pr-addon-modal .pr-zone__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.pr-addon-modal .pr-zone__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	color: #222222;
}
.pr-addon-modal .pr-zone__hint {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	color: #585858;
}
/* Body (Frame 117: 16 below the switch, fields 21.2 apart). */
.pr-addon-modal .pr-zone__body {
	display: flex;
	flex-direction: column;
	gap: 21.2px;
	max-width: 300px;
	margin-top: 16px;
}
.pr-addon-modal .pr-zone__body[hidden] {
	display: none;
}
.pr-addon-modal .pr-zone-field {
	display: flex;
	flex-direction: column;
	gap: 8.9px;
}
.pr-addon-modal .pr-zone-field--position {
	gap: 9.9px;
}
.pr-addon-modal .pr-zone-field__label {
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: #222222;
}
.pr-addon-modal .pr-zone-field__tiles {
	display: grid;
	grid-template-columns: repeat(2, 146px);
	gap: 6.06px;
}
/* Position tiles (Frame 105: 94x106, #f0f0f0, r6.6, scheme 49.8x41.5 at 14.7
   from the top, name 11/12.9 600, selected stroke 2.5 #06bec7). */
.pr-addon-modal .pr-zone-field--position .pr-zone-field__tiles {
	grid-template-columns: repeat(3, 94.5px);
	gap: 7.74px;
}
.pr-addon-modal .pr-zone-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45.5px;
	margin: 0;
	padding: 0 8px;
	border: 2px solid transparent;
	border-radius: 5.75px;
	background: #f0f0f0;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease;
}
.pr-addon-modal .pr-zone-field--position .pr-zone-tile {
	flex-direction: column;
	justify-content: flex-start;
	gap: 6px;
	height: 106px;
	padding: 12.2px 6px 0;
	border-width: 2.5px;
	border-radius: 6.64px;
}
.pr-addon-modal .pr-zone-tile:hover {
	border-color: #bfeff1;
}
.pr-addon-modal .pr-zone-tile:has(.pr-addon-tile__input:checked) {
	border-color: #06bec7;
}
.pr-addon-modal .pr-zone-tile:has(.pr-addon-tile__input:focus-visible) {
	outline: 2px solid #06bec7;
	outline-offset: 2px;
}
.pr-addon-modal .pr-zone-tile__icon {
	display: block;
	width: auto;
	max-width: 58px;
	height: auto;
	max-height: 41.5px;
	margin: 0 auto;
}
.pr-addon-modal .pr-zone-tile__name {
	font-size: 11px;
	font-weight: 600;
	line-height: 12.9px;
	color: #222222;
	white-space: normal;
}
.pr-addon-modal .pr-zone-field--position .pr-zone-tile__name {
	max-width: 58px;
}
.pr-addon-modal .pr-zone-field--font .pr-zone-tile__name {
	line-height: 22.6px;
	white-space: nowrap;
}
.pr-addon-modal .pr-zone-field .pr-addon-field__input {
	width: 295px;
	max-width: 100%;
	font-weight: 500;
}
.pr-addon-modal .pr-zone-field.has-error .pr-zone-tile {
	border-color: #fb5133;
}
.pr-addon-modal .pr-zone-field.has-error .pr-addon-field__input {
	border-color: #fb5133;
}

/* ---- Summary (Figma 148:5415 / 173:8445) ---- */
.pr-addon-modal .pr-zones-step[hidden] {
	display: none;
}
.pr-addon-modal .pr-summary__kicker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.pr-addon-modal .pr-summary__last {
	display: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: #222222;
}
.pr-addon-modal .pr-summary__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
/* Step progress (3 dots 12.5 on a 3.3 line, all done) - mobile only. */
.pr-addon-modal .pr-summary__dots {
	position: relative;
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 98px;
	height: 12.5px;
}
.pr-addon-modal .pr-summary__dots::before {
	content: "";
	position: absolute;
	left: 4.5px;
	right: 4.5px;
	top: 4.6px;
	height: 3.3px;
	background: #06bec7;
}
.pr-addon-modal .pr-summary__dots i {
	position: relative;
	width: 12.5px;
	height: 12.5px;
	border-radius: 50%;
	background: #06bec7;
}
.pr-addon-modal .pr-summary__list {
	display: flex;
	flex-direction: column;
	gap: 21px;
	max-width: 299px;
}
.pr-addon-modal .pr-summary__zone {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pr-addon-modal .pr-summary__zone-head {
	display: flex;
	align-items: center;
	gap: 5.3px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #222222;
}
.pr-addon-modal .pr-summary__zone-head svg {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}
.pr-addon-modal .pr-summary__zone-head::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	margin-left: 12.4px;
	background: #cecece;
}
.pr-addon-modal .pr-summary__row {
	display: flex;
	gap: 5.5px;
}
.pr-addon-modal .pr-summary__tile {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 65px;
	padding: 0 8px;
	border: 2.5px solid #06bec7;
	border-radius: 6.64px;
	background: #f0f0f0;
	color: #222222;
	text-align: center;
	overflow: hidden;
	overflow-wrap: anywhere;
	line-height: 22.6px;
}
.pr-addon-modal .pr-summary__tile--position {
	gap: 10px;
	padding: 0 14px;
	font-size: 11px;
	font-weight: 600;
	line-height: 12.9px;
	text-align: left;
}
.pr-addon-modal .pr-summary__tile--position img {
	flex: 0 0 auto;
	width: auto;
	max-width: 57px;
	height: auto;
	max-height: 41.5px;
}
.pr-addon-modal .pr-summary__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pr-addon-modal .pr-summary__back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	padding: 0 23.5px;
	border: 1px solid #464646;
	border-radius: 3.5px;
	background: #ffffff;
	color: #222222;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.2px;
	text-transform: uppercase;
	cursor: pointer;
}
.pr-addon-modal .pr-summary__back:hover,
.pr-addon-modal .pr-summary__back:focus {
	background: #f0f0f0;
	color: #222222;
}

/* ---- Info popup (gift box) ---- */
.pr-addon-modal--info .pr-addon-info__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
}
.pr-addon-modal--info .pr-addon-info__media img {
	display: block;
	width: 282px;
	max-width: 80%;
	height: auto;
}
.pr-addon-modal--info .pr-addon-info__text {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.pr-addon-modal--info .pr-addon-info__head {
	gap: 8px;
}
.pr-addon-modal--info .pr-addon-info__sku strong {
	font-weight: 600;
}
.pr-addon-modal--info .pr-addon-info__desc {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
	color: #595959;
}

@media (min-width: 768px) {
	/* Configurator panel 540 wide, 48 padding, 32 gap (50:8235). */
	.pr-addon-modal--zones .pr-addon-modal__info {
		flex: 0 0 540px;
		width: 540px;
	}
	.pr-addon-modal--zones .pr-quickview__media {
		align-self: flex-start;
		height: 421.7px;
		min-height: 0;
	}
	.pr-addon-modal--zones .pr-quickview__cta {
		flex: 0 0 auto;
	}
	/* Desktop summary has no "last step" note and no dots (173:8280). */
	.pr-addon-modal .pr-summary__kicker {
		justify-content: flex-start;
	}

	/* Info popup: one white card 860, image panel 380 + text 480 (50:8279). */
	.pr-addon-modal--info .pr-addon-modal__card {
		width: 860px;
		gap: 0;
		background: #ffffff;
		box-shadow: 0 16px 40px rgba(0,0,0,.149);
	}
	.pr-addon-modal--info .pr-quickview__media {
		min-height: 373.5px;
		border-radius: 12px 0 0 12px;
	}
	.pr-addon-modal--info .pr-addon-modal__info {
		flex: 0 0 480px;
		width: 480px;
		justify-content: space-between;
		gap: 47.5px;
		box-shadow: none;
	}
	.pr-addon-modal--info .pr-addon-info__kicker {
		display: none;
	}
	.pr-addon-modal--info .pr-addon-info__title {
		font-size: 28px;
		line-height: 36.4px;
	}
}

@media (max-width: 767px) {
	/* Mobile card 339 (148:5341): photo 309 on top, panel padding 21/20,
	   head -> places 26, places 20 apart, button 50. */
	.pr-addon-modal--zones .pr-addon-modal__card,
	.pr-addon-modal--info .pr-addon-modal__card {
		width: 339px;
		max-width: 100%;
	}
	.pr-addon-modal--zones .pr-quickview__media {
		flex: 0 0 auto;
		height: 309px;
	}
	.pr-addon-modal--zones .pr-addon-modal__info {
		gap: 26px;
		padding: 21px 20px 22px;
	}
	.pr-addon-modal--zones .pr-addon-modal__head {
		gap: 5.3px;
	}
	.pr-addon-modal--zones .pr-addon-modal__title {
		font-size: 16.2px;
		font-weight: 600;
		line-height: 21.2px;
	}
	.pr-addon-modal .pr-quickview__cta {
		height: 50px;
		font-size: 14px;
		line-height: 18.2px;
	}
	/* Summary (148:5399): no photo, "Zadnji korak" + dots, title 18. */
	.pr-addon-modal--zones.is-summary .pr-quickview__media {
		display: none;
	}
	.pr-addon-modal--zones.is-summary .pr-addon-modal__info {
		gap: 30px;
		padding-top: 19px;
		border-radius: 10px;
	}
	.pr-addon-modal .pr-summary__last {
		display: inline;
	}
	.pr-addon-modal .pr-summary__dots {
		display: flex;
	}
	.pr-addon-modal--zones.is-summary .pr-addon-modal__title {
		font-size: 18px;
		line-height: 23.6px;
	}
	.pr-addon-modal .pr-summary__list {
		max-width: none;
	}

	/* Info popup mobile (101:287): photo 307 on grey, kicker 12/20, title
	   20/23.6 600, description 14/22.4, no code line. */
	.pr-addon-modal--info .pr-quickview__media {
		flex: 0 0 auto;
		height: 307px;
		border-radius: 10px 10px 0 0;
	}
	.pr-addon-modal--info .pr-addon-modal__info {
		gap: 40px;
		padding: 20px 22px 22px;
	}
	.pr-addon-modal--info .pr-addon-info__text {
		gap: 20px;
	}
	.pr-addon-modal--info .pr-addon-info__head {
		gap: 9px;
	}
	.pr-addon-modal--info .pr-addon-info__sku {
		display: none;
	}
	.pr-addon-modal--info .pr-addon-info__desc {
		font-size: 14px;
		line-height: 22.4px;
	}
}

/* Engraving popup as ONE card (Figma 162:7460 modal-card 860x492: white,
   r12, photo panel 380 flush on the left, 480 panel with 48 padding).
   Replaces the two separate blocks (photo + panel with a 24.5 gap) above.
   The card itself does not clip (the close button sits above it), so the
   photo panel gets the left corners. Photo slides cover the panel; arrows
   40px 20 from the edges, 4px progress line (track rgba(0,0,0,.29)). */
.pr-addon-modal .pr-gallery__progress {
	height: 4px;
	background: rgba(0,0,0,.29);
}
.pr-addon-modal .pr-gallery__progress-fill {
	background: #06bec7;
}
@media (min-width: 768px) {
	.pr-addon-modal--zones .pr-addon-modal__card {
		width: 860px;
		gap: 0;
		border-radius: 12px;
		background: #ffffff;
		box-shadow: 0 16px 40px rgba(0,0,0,.149);
	}
	/* The photo keeps its 380x492 frame; when the panel grows (places
	   switched on, summary) the card gets taller and stays white below the
	   photo, as in Figma 173:8264 - stretching would zoom the photo in. */
	.pr-addon-modal--zones .pr-quickview__media {
		flex: 0 0 380px;
		align-self: flex-start;
		height: 492px;
		min-height: 0;
		border-radius: 12px 0 0 12px;
	}
	.pr-addon-modal--zones .pr-addon-modal__info {
		flex: 0 0 480px;
		width: 480px;
		border-radius: 0 12px 12px 0;
		box-shadow: none;
	}
}

/* ---------- Add-to-cart busy state (initCartBusy in product-redesign.js) ----
   While checkout/cart/add is in flight the button is disabled: the cart
   icon turns into a spinner, the label reads "Adding ...", and the nudge
   animation stops so the button does not invite another tap. */
.pr .pr-buy__cart.is-busy,
.pr-sticky-bar__cart.is-busy {
	animation: none;
	cursor: progress;
	opacity: .85;
}
.pr .pr-buy__cart.is-busy svg,
.pr-sticky-bar__cart.is-busy svg {
	display: none;
}
.pr .pr-buy__cart.is-busy:before,
.pr-sticky-bar__cart.is-busy:before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: pr-cart-spin .7s linear infinite;
}
@keyframes pr-cart-spin {
	to {
		transform: rotate(360deg);
	}
}