/*
 * Д3. UI-кит printort.
 *
 * Компоненты, которые повторяются больше чем на одной странице. Всё, что
 * встречается ровно один раз, живёт в стилях своей страницы, а не здесь.
 *
 * Значения берутся только из tokens.css. Родительскую Woodmart не правим:
 * если у темы есть штатный элемент — используем его; здесь только то, чего
 * у темы нет или что противоречит палитре проекта.
 *
 * Витрина всех компонентов во всех состояниях — шорткод [printort_ui_kit],
 * см. inc/ui-kit.php.
 */

/* ==========================================================================
   Кнопки

   Цвета берутся из переменных кнопок Woodmart, а не из палитры напрямую:
   тогда наша кнопка и штатная кнопка темы всегда одного цвета, а владелец
   меняет обе разом в Theme Settings.
   ========================================================================== */

.printort-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--printort-space-2);
	min-height: var(--printort-tap);
	padding: var(--printort-space-3) var(--printort-space-6);
	border: 1px solid transparent;
	border-radius: var(--printort-radius-sm);
	font-family: var(--printort-font);
	font-size: var(--printort-fs-base);
	font-weight: var(--printort-fw-semibold);
	line-height: var(--printort-lh-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--printort-transition), border-color var(--printort-transition);
}

.printort-btn:focus-visible {
	outline: 2px solid var(--printort-ink);
	outline-offset: 2px;
}

/* Главное действие: купить, найти, оформить. */
.printort-btn--accent {
	background-color: var(--btn-accented-bgcolor, #EC64C6);
	color: var(--btn-accented-color, #fff);
}

.printort-btn--accent:hover,
.printort-btn--accent:focus {
	background-color: var(--btn-accented-bgcolor-hover, #CB0049);
	color: var(--btn-accented-color-hover, #fff);
}

/* Второстепенное действие рядом с главным. */
.printort-btn--ghost {
	background-color: var(--printort-surface);
	border-color: var(--printort-ink);
	color: var(--printort-ink);
}

.printort-btn--ghost:hover,
.printort-btn--ghost:focus {
	background-color: var(--printort-subtle);
	color: var(--printort-ink);
}

/* Третьестепенное: ссылка, которой нужен размер кнопки. */
.printort-btn--link {
	min-height: auto;
	padding: var(--printort-space-1) 0;
	background: none;
	color: var(--printort-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.printort-btn--wide {
	width: 100%;
}

.printort-btn[disabled],
.printort-btn--disabled {
	opacity: .45;
	pointer-events: none;
}

/* ==========================================================================
   Бейджи
   ========================================================================== */

.printort-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--printort-space-1);
	padding: var(--printort-space-1) var(--printort-space-2);
	border: 1px solid var(--printort-border);
	border-radius: var(--printort-radius-pill);
	background-color: var(--printort-subtle);
	color: var(--printort-ink);
	font-size: var(--printort-fs-xs);
	font-weight: var(--printort-fw-medium);
	line-height: var(--printort-lh-tight);
	white-space: nowrap;
}

/* Заливка малиновым, а не розовым: белый текст на розовом даёт 2,8:1. */
.printort-badge--accent {
	background-color: var(--printort-brand);
	border-color: var(--printort-brand);
	color: #fff;
}

.printort-badge--stock {
	background-color: var(--printort-surface);
	border-color: currentColor;
	color: var(--printort-success);
}

.printort-badge--out {
	color: var(--printort-text-muted);
}

/* ==========================================================================
   Поверхность: белая карточка с рамкой
   ========================================================================== */

.printort-card {
	padding: var(--printort-space-4);
	border: 1px solid var(--printort-border);
	border-radius: var(--printort-radius-md);
	background-color: var(--printort-surface);
}

.printort-card--raised {
	border: 0;
	box-shadow: var(--printort-shadow);
}

/* ==========================================================================
   Секция страницы
   ========================================================================== */

.printort-section {
	margin: 0 auto;
	padding: var(--printort-space-8) var(--printort-space-4);
	max-width: var(--printort-container);
}

.printort-section__title {
	margin: 0 0 var(--printort-space-4);
	font-family: var(--printort-font);
	font-size: var(--printort-fs-xl);
	font-weight: var(--printort-fw-bold);
	line-height: var(--printort-lh-tight);
	color: var(--printort-ink);
}

.printort-section__lead {
	margin: 0 0 var(--printort-space-6);
	max-width: 60ch;
	font-size: var(--printort-fs-md);
	line-height: var(--printort-lh-base);
	color: var(--printort-text-muted);
}

@media (min-width: 1025px) {
	.printort-section {
		padding: var(--printort-space-12) var(--printort-space-6);
	}

	.printort-section__title {
		font-size: var(--printort-fs-2xl);
	}
}

/* ==========================================================================
   Плитка повода и категории

   Второй способ найти макет — для того, кто не знает, что искать.
   Медиа строго квадратная: единый кроп 1:1 по всему каталогу и держит вид.
   ========================================================================== */

.printort-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--printort-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.printort-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--printort-space-4);
	}
}

@media (min-width: 1025px) {
	.printort-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.printort-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--printort-border);
	border-radius: var(--printort-radius-md);
	background-color: var(--printort-surface);
	color: var(--printort-ink);
	text-decoration: none;
	transition: border-color var(--printort-transition);
}

.printort-tile:hover,
.printort-tile:focus-visible {
	border-color: var(--printort-brand);
	color: var(--printort-ink);
}

.printort-tile__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--printort-subtle);
}

.printort-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.printort-tile__body {
	display: flex;
	flex-direction: column;
	gap: var(--printort-space-1);
	padding: var(--printort-space-3);
}

.printort-tile__title {
	font-size: var(--printort-fs-base);
	font-weight: var(--printort-fw-semibold);
	line-height: var(--printort-lh-tight);
}

.printort-tile__meta {
	font-size: var(--printort-fs-sm);
	color: var(--printort-text-muted);
}

/* ==========================================================================
   Поле поиска

   Открытая строка на всех разрешениях, включая мобильное (ФТ-2.8).
   ========================================================================== */

.printort-search {
	display: flex;
	gap: var(--printort-space-2);
	width: 100%;
}

.printort-search__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--printort-tap);
	padding: var(--printort-space-3) var(--printort-space-4);
	border: 1px solid var(--printort-border-strong);
	border-radius: var(--printort-radius-sm);
	background-color: var(--printort-surface);
	font-family: var(--printort-font);
	font-size: var(--printort-fs-md);
	color: var(--printort-ink);
}

.printort-search__field::placeholder {
	color: var(--printort-text-muted);
}

.printort-search__field:focus {
	outline: 2px solid var(--printort-ink);
	outline-offset: 1px;
	border-color: var(--printort-ink);
}

.printort-search__hints {
	display: flex;
	flex-wrap: wrap;
	gap: var(--printort-space-2);
	margin: var(--printort-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.printort-search__hint {
	display: inline-block;
	padding: var(--printort-space-1) var(--printort-space-3);
	border: 1px solid var(--printort-border);
	border-radius: var(--printort-radius-pill);
	background-color: var(--printort-surface);
	color: var(--printort-ink);
	font-size: var(--printort-fs-sm);
	text-decoration: none;
}

.printort-search__hint:hover,
.printort-search__hint:focus-visible {
	border-color: var(--printort-brand);
	background-color: var(--printort-brand-tint);
	color: var(--printort-ink);
}

/* ==========================================================================
   Прогресс-бар порога бесплатной доставки (ФТ-3.1)

   Значение порога приходит из printort_free_shipping_threshold, не отсюда.
   ========================================================================== */

.printort-progress {
	display: flex;
	flex-direction: column;
	gap: var(--printort-space-2);
}

.printort-progress__text {
	font-size: var(--printort-fs-sm);
	line-height: var(--printort-lh-base);
	color: var(--printort-ink);
}

.printort-progress__track {
	overflow: hidden;
	height: var(--printort-space-2);
	border-radius: var(--printort-radius-pill);
	background-color: var(--printort-border);
}

.printort-progress__bar {
	display: block;
	height: 100%;
	border-radius: var(--printort-radius-pill);
	background-color: var(--printort-brand);
	transition: width var(--printort-transition);
}

.printort-progress--done .printort-progress__bar {
	background-color: var(--printort-success);
}

.printort-progress--done .printort-progress__text {
	color: var(--printort-success);
	font-weight: var(--printort-fw-semibold);
}

/* ==========================================================================
   Полоса доверия (блок 6 главной)
   ========================================================================== */

.printort-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--printort-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.printort-trust {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--printort-space-4);
	}
}

.printort-trust__item {
	display: flex;
	flex-direction: column;
	gap: var(--printort-space-1);
	padding: var(--printort-space-4);
	border: 1px solid var(--printort-border);
	border-radius: var(--printort-radius-md);
	background-color: var(--printort-surface);
}

.printort-trust__title {
	font-size: var(--printort-fs-base);
	font-weight: var(--printort-fw-semibold);
	color: var(--printort-ink);
}

.printort-trust__text {
	font-size: var(--printort-fs-sm);
	line-height: var(--printort-lh-base);
	color: var(--printort-text-muted);
}

/* ==========================================================================
   Полоса опта (блок 5 главной)
   ========================================================================== */

.printort-wholesale {
	display: flex;
	flex-direction: column;
	gap: var(--printort-space-4);
	padding: var(--printort-space-6);
	border-radius: var(--printort-radius-md);
	background-color: var(--printort-brand-soft);
	color: var(--printort-ink);
}

.printort-wholesale__title {
	margin: 0;
	font-size: var(--printort-fs-lg);
	font-weight: var(--printort-fw-bold);
	line-height: var(--printort-lh-tight);
}

.printort-wholesale__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--printort-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.printort-wholesale__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--printort-tap);
	padding: var(--printort-space-2) var(--printort-space-4);
	border-radius: var(--printort-radius-sm);
	background-color: var(--printort-surface);
	color: var(--printort-ink);
	font-size: var(--printort-fs-base);
	font-weight: var(--printort-fw-medium);
	text-decoration: none;
}

.printort-wholesale__link:hover,
.printort-wholesale__link:focus-visible {
	background-color: var(--printort-subtle);
	color: var(--printort-ink);
}

/* ==========================================================================
   Список ссылок внутри вкладок главной

   Поводы и бренды выводятся ссылками в содержимом вкладок Woodmart.
   По умолчанию это маркированный список в одну колонку — на пятидесяти
   четырёх поводах он растягивается на два экрана. Здесь он становится
   плашками, которые заполняют ширину и держат тач-цель.
   ========================================================================== */

.printort-occ {
	display: flex;
	flex-wrap: wrap;
	gap: var(--printort-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.printort-occ li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.printort-occ a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--printort-space-2);
	min-height: 38px;
	padding: var(--printort-space-2) var(--printort-space-3);
	border: 1px solid var(--printort-border);
	border-radius: var(--printort-radius-pill);
	background: var(--printort-surface);
	color: var(--printort-ink);
	font-size: var(--printort-fs-sm);
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--printort-transition), background-color var(--printort-transition);
}

.printort-occ a:hover,
.printort-occ a:focus-visible {
	border-color: var(--printort-brand);
	background: var(--printort-brand-tint);
	color: var(--printort-ink);
}

/* Счётчик товаров: подсказка, а не часть названия. */
.printort-occ span {
	color: var(--printort-text-muted);
	font-size: var(--printort-fs-xs);
	font-variant-numeric: tabular-nums;
}