/* Плитка вариантов товара (radio/checkbox с картинкой) — у части товаров
   («Radio» — год и номер выпуска, часы — циферблат и т.д.) вариантов бывает
   полсотни, списком в один столбец карточка товара растягивается на несколько
   экранов, а обложки видно только по одной за раз. Плиткой то же место
   компактнее, и все обложки на виду сразу.

   Только `#product` и ID-паттерн `input-option-*` из product.twig — те же
   классы `.form-check` использует чекаут и формы аккаунта, туда заезжать
   не нужно (плюс сам файл подключается только на route=product/product,
   см. extension/soviet/catalog/controller/common/menu.php::assets()).

   Без JS: подсветка выбранного варианта — через :checked ~ .form-check-label
   (input и label идут соседями в разметке ядра), обычный чекбокс/радио
   остаётся кликабельным, просто лежит поверх карточки, не внутри строки. */
#product div[id^="input-option-"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	gap: 8px;
}

/* Штамп вместо кнопки «В корзину» у товара без остатка — extension/soviet/
   catalog/controller/event/outofstock.php. `.sb-band`/`.sb-kicker`/
   `.sb-stamp` уже общие классы темы (та же плашка, что у пустой корзины),
   своего понадобилась только рамка блока и цвет заголовка на тёмном фоне. */
.sb-out-of-stock {
	margin-bottom: 20px;
	border: var(--sb-rule) solid var(--sb-line);
}

.sb-out-of-stock__title {
	margin: 6px 0 0;
	color: #fff;
	font-size: 17px;
	line-height: 1.35;
}

#product div[id^="input-option-"] .form-check {
	position: relative;
	min-height: 0;
	margin: 0;
	padding: 0;
}

#product div[id^="input-option-"] .form-check-input {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	float: none;
	margin: 0;
}

#product div[id^="input-option-"] .form-check-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 8px 8px 10px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
	color: var(--sb-ink);
	font-size: 12.5px;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: border-color .12s, box-shadow .12s;
}

#product div[id^="input-option-"] .form-check-label img {
	width: 100%;
	aspect-ratio: 1;
	margin: 0;
	border: var(--sb-rule) solid var(--sb-ink);
	object-fit: cover;
}

/* Без картинки (обычный текстовый вариант) — под неё оставляем место сверху,
   чтобы радио-кружок в углу не наезжал на первую строку названия. */
#product div[id^="input-option-"] .form-check-label:not(:has(img)) {
	padding-top: 22px;
}

#product div[id^="input-option-"] .form-check-label:hover {
	border-color: var(--sb-red);
}

#product div[id^="input-option-"] .form-check-input:focus-visible ~ .form-check-label {
	outline: 2px solid var(--sb-red);
	outline-offset: 2px;
}

#product div[id^="input-option-"] .form-check-input:checked ~ .form-check-label {
	border-color: var(--sb-red);
	box-shadow: inset 0 0 0 2px var(--sb-red);
}

@media (prefers-reduced-motion: reduce) {
	#product div[id^="input-option-"] .form-check-label {
		transition: none;
	}
}

/* Фото товара прикалывается к потолку на десктопе -----------------------------
   Плитка вариантов бывает выше самого фото (полсотни плиток — семь-восемь
   строк), а колонки в bootstrap-строке растягиваются по высоте вместе
   (align-items: stretch по умолчанию у .row). Без sticky фото просто уходит
   вверх вместе со страницей, пока покупатель листает варианты вниз — кликнув
   по дальней плитке (extension/soviet/catalog/controller/event/
   optiongallery.js меняет её), он не видит, что выбрал, потому что фото уже
   выше экрана (жалоба пользователя, 20.08.2026).

   Раньше `position: sticky` стояло на самой колонке (`.col-sm`) вместе
   с `align-self: flex-start`, чтобы снять растяжение колонки на всю высоту
   строки — иначе решили, что sticky «нечего прикалывать». На деле это
   оставляло галерею и карточку товара («Inventory card» рядом) разной
   высоты — у товара без длинного списка вариантов (большинство) галерея
   заканчивалась заметно раньше карточки, и вся правая колонка «плавала»
   ниже пустого места (жалоба пользователя 22.08.2026). Правильный приём —
   sticky не на колонке, а на самом блоке галереи (`.image.magnific-popup`)
   ВНУТРИ колонки: колонка растягивается вместе с соседней (обычное
   поведение bootstrap-`.row`, высоты равны), а блок галереи внутри нee
   остаётся с собственной, более короткой высотой — sticky «липнет»
   к потолку и едет вместе с прокруткой, пока не упрётся в низ уже
   растянутой колонки. Тот же эффект («фото не убегает, пока листаешь
   длинный список вариантов»), но обе колонки теперь всегда одной высоты.
   top учитывает липкую полосу меню (.sb-nav, измерено 51px) — иначе фото
   легло бы у неё под низом. Только там, где .col-sm вообще становится
   колонкой (bootstrap-брейкпоинт sm, 576px) — ниже колонки и так стоят
   одна под другой, sticky-фото держало бы четверть экрана поверх всего
   остального текста без всякой пользы. */
@media (min-width: 576px) {
	#product-info .row.mb-3 > .col-sm:has(> .image.magnific-popup) .image.magnific-popup {
		position: sticky;
		top: 63px;
	}
}

/* Современная галерея — лента превью слева от крупного фото ------------
   Жалоба пользователя 22.08.2026: «такая галерея не подходит, выглядит
   убожески, нужна современная как на ebay». Было: bootstrap `.img-thumbnail`
   даёт `max-width: 100%` без `width` — сжимает фото, если оно БОЛЬШЕ рамки,
   но никогда не растягивает, если МЕНЬШЕ (генерируемые превью — фикс.
   пиксели, напр. 500×500), а колонка на широком экране шире — оставалось
   пустое поле сбоку кадра, будто вёрстка сломана. `width: 100%` заставляет
   фото всегда заполнять рамку своей колонки.

   Превью снизу мелкой лентой на весь экран под большим фото — не то, что
   ожидаешь от современной карточки; крупные витрины (eBay и т.п.) держат
   превью узкой колонкой слева от фото. `row-reverse`, не переставленный
   HTML: главное фото остаётся первым в разметке (доступность, порядок
   чтения), переставляется только на экране. */
.sb-gallery-main img.img-thumbnail,
#product-info .sb-gallery-thumbs img.img-thumbnail {
	width: 100%;
}

/* Высота галереи — вровень с соседней «карточкой учёта» ------------------
   Колонки строки растягиваются вровень (theme.css, `#product-info .row.mb-3`)
   с 22.08.2026, но просто растянуть НЕВИДИМУЮ колонку мало — фото внутри
   держало свою обычную высоту, и под ним оставалась голая пустота фона
   страницы без рамки: с виду то же самое «плавает», только пустота
   переехала внутрь колонки (жалоба пользователя 22.08.2026, тот же вечер:
   «должны быть в одну высоту, чтобы не плавало» — уже после первой попытки
   через растяжение одной только колонки). Теперь высоту забирает сам кадр
   (`height: 100%` по цепочке .image.magnific-popup → .sb-gallery-main →
   слайд → img), `object-fit: contain` не растягивает саму фотографию —
   просто у неё, как и раньше, есть рамка/фон `.img-thumbnail` (bootstrap),
   и эта рамка теперь тянется на всю высоту, а не только по размеру фото.

   `max-height` — потолок на случай длинного списка вариантов (ради него
   когда-то и завели sticky, см. ниже): карточка описи там может быть
   в разы выше жёстко заданного разумного размера фото, и растягивать кадр
   до неё было бы абсурдно длинным фото. До потолка — растягиваемся вровень,
   после — включается sticky (тот же приём, что раньше). */
.image.magnific-popup {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	gap: 10px;
	height: 100%;
	max-height: 720px;
}

/* Колонка вокруг крупного фото — рамка растягивается вровень с карточкой
   (см. комментарий выше), а под фото освобождается место для панели
   «поделиться» (ниже) без нарушения этой высоты: сама колонка — flex-
   столбик той же общей высоты 100%, фото внутри отдаёт лишнее место
   панели (flex: 1 1 auto + min-height: 0, а не жёсткие 100%). */
.sb-gallery-col {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-width: 0;
}

.sb-gallery-main {
	flex: 1 1 auto;
	min-height: 0;
}

.sb-gallery-main__slide {
	height: 100%;
}

.sb-gallery-main img.img-thumbnail {
	height: 100%;
	object-fit: contain;
	object-position: 50% 0%;
}

/* Панель «поделиться» — заняла пустое поле под короткой галереей (жалоба
   пользователя 22.08.2026 в тот же вечер: «получается пустое место, что
   там разместить?»). Десктоп — ряд квадратных кнопок-иконок, тот же язык,
   что у плавающей корзины (.sb-floatcart) и штампов на стене поступлений:
   тёмная рамка, заливка при наведении красным. Кнопка «Copy link» —
   единственная без href, JS-обработчик ниже в product.twig; сама ссылка на
   товар (data-share-url) — уже готовое ядровое значение $data['share'].
   Кнопка «Share ↗» (Web Share API, системное меню телефона) лежит в той же
   разметке всегда, но видна только на телефоне (медиа-запрос ниже) —
   на десктопе у Web Share API часто вообще нет системного меню, ряд иконок
   там нагляднее и быстрее одного тапа. */
.sb-share {
	flex: 0 0 auto;
	padding: 12px 14px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

.sb-share__label {
	margin: 0 0 8px;
	color: var(--sb-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sb-share__row {
	display: flex;
	gap: 8px;
}

.sb-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-paper);
	color: var(--sb-ink);
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sb-share__link:hover,
.sb-share__link:focus-visible {
	background: var(--sb-red);
	color: var(--sb-paper);
}

.sb-share__copy.sb-share--copied {
	background: var(--sb-red);
	color: var(--sb-paper);
}

.sb-share__native {
	display: none;
}

#product-info .sb-gallery-thumbs {
	display: flex;
	flex: 0 0 84px;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	overflow-y: auto;
}

#product-info .sb-gallery-thumbs > a {
	flex: 0 0 auto;
	margin: 0;
}

#product-info .sb-gallery-thumbs img.img-thumbnail {
	aspect-ratio: 1;
	object-fit: cover;
}

/* Галерея пролистывается пальцем на телефоне -----------------------------
   Два ряда — главное фото (.sb-gallery-main) и мелкие превью под ним
   (.sb-gallery-thumbs) — на телефоне превращаются каждый в свою
   горизонтальную ленту, скроллящуюся пальцем: `overflow-x: auto` +
   `scroll-snap`, обычная браузерная прокрутка, без единой строки JS. Клик
   по любой картинке всё так же открывает лайтбокс (magnific-popup, ядро) —
   этого не трогаем. На десктопе оба блока выглядят и ведут себя ровно как
   раньше — одна большая фотография сверху, ряд мелких превью снизу.

   `touch-action: pan-x` сюда НЕ ставим — было, убрано: жёстко запрещает
   браузеру любую вертикальную прокрутку, если жест начался на галерее, а
   не только горизонтальную из него разрешает — палец на фото переставал
   листать страницу вверх/вниз вовсе (жалоба пользователя 21.08.2026, тем
   же вечером). Голого `overflow-x: auto` достаточно: браузер сам решает
   по направлению жеста, какой скролл-контейнер двигать — горизонтальный
   (у галереи) или вертикальный (у страницы, там, где у самой галереи
   overflow-y не задан вовсе). `-webkit-user-drag: none` — гасит нативное
   перетаскивание картинки (Safari/Chrome iOS иногда путает его со свайпом,
   начинает «тянуть» саму картинку вместо прокрутки ленты) — эта часть
   вертикали не касается, оставлена. */

/* Главное фото — на десктопе один слайд (.sb-gallery-main__extra спрятаны,
   выглядит как раньше), на телефоне вся лента полноразмерных фото едет
   вбок, по одному слайду на экран (scroll-snap: x mandatory, а не
   proximity, как у превью ниже, — тут разъезжаться в промежуточное
   положение не нужно, слайд должен вставать ровно). */
.sb-gallery-main__extra {
	display: none;
}

/* Значок лупы — увеличение уже работает (клик открывает лайтбокс,
   magnific-popup, ядро), но никак не подсказывало об этом (жалоба
   пользователя 22.08.2026: «в галерее должна быть функция увеличения»).
   Наведение вместо клика не годится само по себе — на телефоне наводить
   нечем, а второй, запасной способ для тача всё равно пришлось бы делать
   кликом/тапом, так что клик — не запасной вариант, а единственный,
   которому нужен только явный намёк. Значок decorative (pointer-events:
   none) — кликабельна вся картинка, не только уголок. */
.sb-gallery-main__slide {
	position: relative;
	cursor: zoom-in;
}

.sb-gallery-main__zoom {
	display: flex;
	position: absolute;
	z-index: 2;
	right: 14px;
	bottom: 14px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-paper);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-ink);
	pointer-events: none;
}

.sb-gallery-main__zoom::before {
	width: 17px;
	height: 17px;
	background: var(--sb-ink);
	content: '';
	-webkit-mask: var(--sb-i-search) center / contain no-repeat;
	mask: var(--sb-i-search) center / contain no-repeat;
}

/* Второе условие — телефон боком: ширина у него та же, что у планшета
   (запросто больше 575px), но высота остаётся телефонной. По одной только
   ширине лента не отличила бы повёрнутый телефон от планшета/маленького
   ноутбука и осталась бы в «десктопном» виде — жалоба пользователя
   21.08.2026: «перевернул телефон в горизонтальное положение — галерея
   не адаптируется». max-height: 500px отсекает планшеты (iPad landscape
   — 768px высоты) и ноутбуки, задевая только по-настоящему низкие
   экраны. */
@media (max-width: 575px), (max-width: 991px) and (max-height: 500px) {
	/* Сбрасываем ряд-с-лентой-слева (выше, десктопный вид) обратно
	   в столбик: большое фото сверху во всю ширину, лента превью под ним,
	   как и была на телефоне до этой правки — там ей самое место. */
	.image.magnific-popup {
		display: block;
		height: auto;
		max-height: none;
	}

	.sb-gallery-col {
		display: block;
		height: auto;
	}

	.sb-gallery-main {
		display: flex;
		height: auto;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.sb-gallery-main__slide {
		flex: 0 0 100%;
		height: auto;
		scroll-snap-align: start;
	}

	.sb-gallery-main__extra {
		display: flex;
	}

	.sb-gallery-main img.img-thumbnail {
		width: 100%;
		height: auto;
		object-fit: initial;
		object-position: initial;
		-webkit-user-drag: none;
		user-select: none;
	}

	#product-info .sb-gallery-thumbs {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		height: auto;
		max-height: none;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	#product-info .sb-gallery-thumbs > a {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	#product-info .sb-gallery-thumbs img.img-thumbnail {
		width: 84px;
		height: 84px;
		object-fit: cover;
		-webkit-user-drag: none;
		user-select: none;
	}

	/* На телефоне ряд иконок соцсетей тесно и мелко — пользователь прямым
	   текстом: «на мобильном лучше Share ↗ → системное меню телефона».
	   Одна кнопка на всю ширину зовёт navigator.share() (product.twig);
	   у ряда иконок и подписи-лейбла над ним смысла на телефоне нет —
	   Web Share уже сам предлагает Facebook/Telegram/копирование и т.д. */
	.sb-share {
		margin-top: 12px;
		padding: 10px 12px;
	}

	.sb-share__label,
	.sb-share__row {
		display: none;
	}

	.sb-share__native {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 10px;
		border: var(--sb-rule) solid var(--sb-ink);
		background: var(--sb-paper);
		color: var(--sb-ink);
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		cursor: pointer;
	}
}

/* Кнопка «В корзину» — наверх, под цену ---------------------------------
   Ядро печатает её последней строкой формы, ПОСЛЕ всех вариантов — при
   полусотне плиток покупатель долистывал вариант, а кнопку искал ещё
   полэкрана ниже (жалоба пользователя, 20.08.2026). #form-product становится
   flex-колонкой, у плашки с количеством и кнопкой (уникальна через
   :has(#button-cart), id одна на страницу) — order: -1, и она встаёт первой,
   сразу под ценой, до заголовка «Available options».

   Порядок — только визуальный (CSS order не трогает DOM/tab-order): с
   клавиатуры Tab по-прежнему идёт после вариантов, как в разметке ядра, —
   ту же кнопку всё равно видно и без вкладки, а переписывать порядок фокуса
   ради этого дороже, чем оно того стоит.

   Держать эту плашку ещё и на приколе (sticky) не понадобилось — за то же
   самое отвечает отдельная плавающая кнопка в углу экрана
   (addtocart-float.js, .sb-floatcart--add в theme.css), пристыкованная
   к плавающей корзине. */
#product #form-product {
	display: flex;
	flex-direction: column;
}

/* Полоса «В корзину»/«Перейти в корзину» на телефоне (theme.css,
   .sb-floatcart--add) прибита к низу экрана поверх страницы — без запаса
   снизу последняя строка подвала (copyright) пряталась бы под ней.
   Только этот файл и грузится лишь на route=product/product, где полоса
   вообще есть — безопасно вешать на body без доп. условий. */
@media (max-width: 767px) {
	body {
		padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
	}
}

#product #form-product > .mb-3:has(#button-cart) {
	order: -1;
	margin-bottom: 20px;
	padding: 12px 14px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

/* Отзывы (вкладка «Reviews») --------------------------------------------------
   Тот же язык, что и у карточки товара в списках/описи: чёрная шапка с именем
   и датой (.sb-card__head — тот же класс, что и у карточки-плитки товара),
   звёзды — существующая .rating/.fa-stack, её не трогаем. Ядро отдаёт список
   через отдельный route (product/review.list), сюда никто больше substr_replace
   не пишет — можно менять разметку шаблона напрямую, не только CSS. */
.sb-review + .sb-review {
	margin-top: 14px;
}

.sb-review {
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

.sb-review .sb-card__head {
	font-size: 12px;
}

.sb-review__author {
	overflow: hidden;
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sb-review__body {
	padding: 14px 18px 16px;
}

.sb-review__body .rating {
	margin-top: 0;
}

.sb-review__text {
	margin: 8px 0 0;
	color: var(--sb-ink);
	font-size: 14px;
	line-height: 1.6;
}

/* Виджет оценки звёздами (product/review.twig, модуль reviewsstore) переехал
   в theme.css — общий компонент, нужен и на главной, где product.css не
   грузится. Смотри там. */
/* Три раскрывающихся пункта — Shipping / Returns / Before You Buy — строки
   в том же списке, что и Brand/Product Code/Availability
   (#product-info .list-unstyled), тем же шрифтом: никакой отдельной
   плашки, только маленькая стрелка справа от текста показывает, что
   строка раскрывается. Закрыты по умолчанию (`open` в разметке нет). */

.sb-pinfo-item {
	list-style: none;
}

.sb-pinfo-item__head {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	touch-action: manipulation;
}

/* <summary> носит свой маркер (треугольник/точку) в Chrome и Firefox
   по-разному — глушим оба и рисуем свою стрелку одной и той же маской,
   что и остальные иконки темы (--sb-i-caret, theme.css). */
.sb-pinfo-item__head::marker,
.sb-pinfo-item__head::-webkit-details-marker {
	display: none;
	content: '';
}

.sb-pinfo-item__head:hover {
	color: var(--sb-red);
}

.sb-pinfo-item__arrow {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	background: var(--sb-muted);
	transition: rotate .15s, background-color .15s;
	-webkit-mask: var(--sb-i-caret) center / contain no-repeat;
	mask: var(--sb-i-caret) center / contain no-repeat;
}

.sb-pinfo-item__head:hover .sb-pinfo-item__arrow {
	background: var(--sb-red);
}

.sb-pinfo-item details[open] .sb-pinfo-item__arrow {
	rotate: 180deg;
}

.sb-pinfo-item__list {
	margin: 6px 0 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.sb-pinfo-item__list li {
	position: relative;
	margin-bottom: 6px;
	color: var(--sb-muted);
	font-size: 13px;
	line-height: 1.5;
}

.sb-pinfo-item__list li:last-child {
	margin-bottom: 0;
}

.sb-pinfo-item__list li::before {
	position: absolute;
	top: .4em;
	left: -14px;
	width: 7px;
	height: 7px;
	background: var(--sb-red);
	content: '';
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
	mask: var(--sb-i-star) center / contain no-repeat;
}

.sb-pinfo-item__list a {
	color: var(--sb-red);
	text-decoration: none;
}

.sb-pinfo-item__list a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.sb-pinfo-item__arrow {
		transition: none;
	}
}

/* Табы (Description/Specification/Reviews/Questions) переехали наверх,
   к хлебным крошкам (product.twig, 21.08.2026) — липнут к экрану вслед
   за липкой полосой меню (.sb-nav, menu.css), сразу под ней: top — её
   измеренная высота, z-index на единицу меньше (полоса меню должна лежать
   поверх, если обе окажутся видны разом при быстрой прокрутке). Фон
   обязателен — без него текст соседних вкладок и то, что уже проскроллило
   под планку, читались бы одной кашей.

   Высота меню разная по брейкпоинтам Bootstrap lg (992px) — на телефоне/
   планшете под звездой ещё строка с категориями, 96px вместо 51px
   (измерено, не вычислено — тем же способом, что и сама липкая планка
   поначалу, см. комментарий у sticky-фото выше).

   На телефоне вкладки не переносятся и не мельчают — если их четыре
   (есть Specification), строка едет вбок пальцем: `overflow-x: auto`,
   `flex-wrap: nowrap`. Обычная прокрутка без JS и без стрелок — тот же
   минимализм, что и у .sb-carousel в других местах темы, только тут
   даже своего скрипта не нужно, вкладок никогда не бывает много. */
#product-info .nav-tabs {
	position: sticky;
	z-index: 29;
	top: 51px;
	padding-top: 8px;
	background: var(--sb-paper);
}

@media (max-width: 991px) {
	#product-info .nav-tabs {
		top: 96px;
		padding-top: 6px;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#product-info .nav-tabs .nav-item {
		flex: 0 0 auto;
	}

	#product-info .nav-tabs .nav-link {
		white-space: nowrap;
	}
}