/*
 * Motuzka — верстка магазину.
 * Ми вимкнули woocommerce-layout.css і woocommerce-smallscreen.css,
 * тому сітка, колонки й мобільна версія описані тут. Mobile first.
 */

:root {
	--mtz-border: var(--wp--preset--color--border, #e5e5e5);
	--mtz-muted: var(--wp--preset--color--muted, #6b6b6b);
	--mtz-accent: var(--wp--preset--color--accent, #1f5c4a);
	--mtz-contrast: var(--wp--preset--color--contrast, #1a1a1a);
	--mtz-surface: var(--wp--preset--color--surface, #f7f7f7);
}

/* --------------------------------------- Clearfix WooCommerce проти CSS Grid
 * Стилі WooCommerce додають ::before/::after для clearfix флоатів.
 * У grid-контейнері ці псевдоелементи стають повноцінними комірками
 * і зсувають першу картку товару. Прибираємо їх скрізь, де в нас grid. */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.woocommerce div.product::before,
.woocommerce div.product::after,
.woocommerce .woocommerce-product-gallery__wrapper::before,
.woocommerce .woocommerce-product-gallery__wrapper::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce form.checkout::before,
.woocommerce form.checkout::after,
.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after,
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after,
.mtz-filters__row::before,
.mtz-filters__row::after {
	content: none;
	display: none;
}

/* -------------------------------------------------- Кнопки WooCommerce */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--mtz-accent);
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: 0.875rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	transition: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--mtz-contrast);
	color: #fff;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--mtz-border);
	color: var(--mtz-muted);
	opacity: 1;
}

/* Другорядні кнопки (напр. «Оновити кошик») */
.woocommerce button.button[name="update_cart"],
.woocommerce .cart .button[name="update_cart"] {
	background: #fff;
	color: var(--mtz-contrast);
	box-shadow: inset 0 0 0 1px var(--mtz-border);
}

/* -------------------------------------------------- Поля форм */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select,
.woocommerce table.cart td.actions .coupon .input-text,
.mtz-filters input,
.mtz-filters select,
.woocommerce .quantity input.qty {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	font: inherit;
	font-size: 1rem; /* 16px — iOS не зумить сторінку при фокусі */
	color: var(--mtz-contrast);
	background: #fff;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form .form-row textarea {
	min-height: 5rem;
}

.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select,
.mtz-filters select {
	background-image: linear-gradient(45deg, transparent 50%, var(--mtz-contrast) 50%), linear-gradient(135deg, var(--mtz-contrast) 50%, transparent 50%);
	background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.25rem;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	color: var(--mtz-muted);
}

.woocommerce form .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce form .form-row .required {
	color: var(--mtz-accent);
	text-decoration: none;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #b3261e;
}

/* -------------------------------------------------- Панель фільтрів */

.mtz-filters {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 1rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	background: #fff;
}

.mtz-filters__row {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

.mtz-filters__field,
.mtz-filters__actions {
	margin: 0;
}

.mtz-filters label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	color: var(--mtz-muted);
}

.mtz-filters__price {
	display: flex;
	gap: 0.5rem;
}

.mtz-filters__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mtz-filters__actions .button {
	width: 100%;
}

.mtz-filters__reset {
	white-space: nowrap;
	font-size: 0.875rem;
	color: var(--mtz-muted);
}

@media (min-width: 700px) {
	.mtz-filters__row {
		grid-template-columns: 2fr 1.4fr 1.4fr auto;
		align-items: end;
	}

	.mtz-filters__actions .button {
		width: auto;
	}
}

/* -------------------------------------------------- Заголовок каталогу */

.woocommerce-products-header {
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.woocommerce-products-header__title {
	margin: 0 0 0.5rem;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 0.875rem;
	color: var(--mtz-muted);
	margin: 0 0 1rem;
}

.woocommerce .woocommerce-ordering select {
	max-width: 100%;
}

@media (min-width: 700px) {
	.woocommerce .woocommerce-result-count {
		float: left;
	}

	.woocommerce .woocommerce-ordering {
		float: right;
	}

	.woocommerce .woocommerce-ordering select {
		width: auto;
	}

	.woocommerce ul.products {
		clear: both;
	}
}

/* -------------------------------------------------- Сітка товарів */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem) 1rem;
	margin: 0 0 var(--wp--preset--spacing--50, 2.5rem);
	padding: 0;
	list-style: none;
}

/* Картка — колонка на всю висоту комірки, тому кнопки «Купити»
   стоять на одній лінії навіть при назвах різної довжини. */
.woocommerce ul.products li.product,
ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	list-style: none;
}


.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 0.75rem;
	background: var(--mtz-surface);
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.35;
	margin: 0 0 0.35rem;
	padding: 0;
}

/* Посилання картки (фото, назва) успадковують колір тексту, але кнопку
   «Купити» це чіпати не повинно — вона вже пофарбована як кнопка. */
.woocommerce ul.products li.product a:not(.button) {
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product a:not(.button):hover .woocommerce-loop-product__title {
	text-decoration: underline;
}

.woocommerce ul.products li.product .price {
	display: block;
	/* auto згори притискає ціну донизу — в ряді картки з назвою у два
	   й у три рядки все одно мають ціну й кнопку на одній лінії. */
	margin: auto 0 0.75rem;
	color: var(--mtz-contrast);
	font-size: 1.125rem;
	font-weight: 600;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del {
	color: var(--mtz-muted);
	font-weight: 400;
	font-size: 0.9375rem;
	margin-right: 0.35rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 0;
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	min-width: auto;
	min-height: auto;
	margin: 0;
	padding: 0.2rem 0.5rem;
	border-radius: 2px;
	background: var(--mtz-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce ul.products li.product {
	position: relative;
}

@media (min-width: 700px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50, 2.5rem) var(--wp--preset--spacing--40, 1.5rem);
	}

	.woocommerce ul.products.columns-4,
	ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.woocommerce ul.products.columns-5,
	ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Сітка категорій на головній */
.woocommerce ul.products li.product-category a img {
	aspect-ratio: 3 / 2;
}

.woocommerce ul.products li.product-category h2 {
	font-size: 1.0625rem;
	font-weight: 600;
}

.woocommerce ul.products li.product-category mark {
	background: none;
	color: var(--mtz-muted);
	font-weight: 400;
}

/* -------------------------------------------------- Пагінація */

.woocommerce nav.woocommerce-pagination {
	margin: var(--wp--preset--spacing--40, 1.5rem) 0;
	text-align: left;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	border: 0;
	margin: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: block;
	min-width: 2.5rem;
	padding: 0.6rem 0.5rem;
	text-align: center;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	text-decoration: none;
	color: var(--mtz-contrast);
	background: #fff;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--mtz-contrast);
	border-color: var(--mtz-contrast);
	color: #fff;
}

/* -------------------------------------------------- Сторінка товару */

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

.woocommerce div.product .woocommerce-breadcrumb {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.875rem;
	color: var(--mtz-muted);
}

.woocommerce div.product .woocommerce-breadcrumb a {
	color: var(--mtz-muted);
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .mtz-description,
.woocommerce div.product .related {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce div.product .mtz-description,
.woocommerce div.product .related,
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
}

.woocommerce div.product div.images img {
	display: block;
	width: 100%;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	background: var(--mtz-surface);
}

/* Галерея без JS: WooCommerce ставить opacity:0 і чекає на flexslider,
   якого ми не вантажимо. Усі фото просто лежать сіткою:
   перше — на всю ширину, решта — мініатюрами під ним (клік відкриває оригінал). */
.woocommerce div.product div.images.woocommerce-product-gallery {
	opacity: 1 !important;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper > * {
	grid-column: span 1;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper > *:first-child {
	grid-column: 1 / -1;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: none;
}

.woocommerce div.product .product_title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.2;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 0.5rem;
	color: var(--mtz-contrast);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product p.price del {
	color: var(--mtz-muted);
	font-size: 1.125rem;
	font-weight: 400;
}

.woocommerce div.product p.price ins {
	text-decoration: none;
}

.mtz-stock {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

/* Свою наявність показуємо під ціною (motuzka_stock_status),
   стандартну від WooCommerce ховаємо, щоб не дублювалась. */
.woocommerce div.product p.stock {
	display: none;
}

.mtz-stock--in {
	color: var(--mtz-accent);
}

.mtz-stock--out {
	color: #b3261e;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 1.25rem;
	color: var(--mtz-contrast);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

/* Поле кількості плюс одиниця («100 м») в один рядок: без одиниці сотня
   метрів читається як сто штук товару. */
.woocommerce div.product form.cart .quantity {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.woocommerce div.product form.cart .quantity input.qty {
	/* 4.5rem вистачало рівно на «100»: чотиризначний метраж уже обрізався.
	   Бічні відступи теж зменшені — вони з'їдали більше половини поля. */
	flex: 0 0 6rem;
	width: 6rem;
	min-width: 0;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* Стрілки лічильника з'їдають ще ~16 px ширини, а поруч є кнопки
   готового метражу й саме поле — без них зручніше. */
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity input.qty {
	text-align: center;
	height: 100%;
	min-height: 3rem;
}

.woocommerce div.product form.cart .button {
	flex: 1 1 12rem;
	min-height: 3rem;
	font-size: 1.0625rem;
}

.woocommerce div.product form.cart .variations {
	flex: 1 1 100%;
}

.woocommerce div.product .product_meta {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--mtz-muted);
}

.woocommerce div.product .product_meta a {
	color: var(--mtz-muted);
}

/* Блок «Доставка й оплата» (motuzka-core) + характеристики */
.mtz-delivery-box,
.mtz-attributes {
	margin: 0 0 1.25rem;
	padding: 1rem 1.125rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	background: #fff;
}

.mtz-delivery-box__title,
.mtz-attributes__title {
	margin: 0 0 0.625rem;
	font-size: 1rem;
	font-weight: 600;
}

.mtz-delivery-box ul {
	margin: 0;
	padding: 0 0 0 1.1rem;
	font-size: 0.9375rem;
}

.mtz-delivery-box li {
	margin: 0 0 0.35rem;
}

.mtz-delivery-box__note {
	margin: 0.625rem 0 0;
	font-size: 0.875rem;
	color: var(--mtz-muted);
}

.woocommerce .mtz-attributes table.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce .mtz-attributes table.shop_attributes tr {
	border-bottom: 1px solid var(--mtz-border);
}

.woocommerce .mtz-attributes table.shop_attributes tr:last-child {
	border-bottom: 0;
}

.woocommerce .mtz-attributes table.shop_attributes th,
.woocommerce .mtz-attributes table.shop_attributes td,
.woocommerce .mtz-attributes table.shop_attributes tr:nth-child(even) th,
.woocommerce .mtz-attributes table.shop_attributes tr:nth-child(even) td {
	border: 0;
	padding: 0.5rem 0;
	font-style: normal;
	text-align: left;
	background: none;
}

.woocommerce .mtz-attributes table.shop_attributes th {
	width: 45%;
	padding-right: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtz-muted);
}

.woocommerce .mtz-attributes table.shop_attributes td,
.woocommerce .mtz-attributes table.shop_attributes td p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
}

.woocommerce .mtz-attributes table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

.mtz-description__title,
.related > h2,
.up-sells > h2 {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.mtz-description {
	padding-top: var(--wp--preset--spacing--30, 1rem);
	border-top: 1px solid var(--mtz-border);
}

.related {
	padding-top: var(--wp--preset--spacing--40, 1.5rem);
	border-top: 1px solid var(--mtz-border);
}

@media (min-width: 782px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50, 2.5rem);
	}

}

/* -------------------------------------------------- Кошик */

.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	font-size: 0.9375rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--mtz-border);
	padding: 0.75rem 0.5rem;
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mtz-muted);
}

.woocommerce table.cart img,
.woocommerce table.shop_table img {
	width: 64px;
	height: auto;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
}

.woocommerce table.cart td.product-remove a.remove,
.woocommerce a.remove {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.4;
	text-align: center;
	color: var(--mtz-muted) !important;
	font-size: 1.25rem;
	text-decoration: none;
	border-radius: 2px;
}

.woocommerce a.remove:hover {
	background: none;
	color: #b3261e !important;
}

.woocommerce table.cart td.actions {
	padding: 1rem 0;
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 1rem;
}

.woocommerce table.cart td.actions .coupon .input-text {
	flex: 1 1 10rem;
	max-width: 16rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	font-size: 1rem;
}

/* Мобільна таблиця кошика: рядок = картка */
@media (max-width: 767px) {
	.woocommerce table.shop_table_responsive thead,
	.woocommerce table.shop_table_responsive tbody th {
		display: none;
	}

	.woocommerce table.shop_table_responsive tr {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--mtz-border);
	}

	.woocommerce table.shop_table_responsive tr td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		border: 0;
		padding: 0.25rem 0;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tr td::before {
		content: attr(data-title) ": ";
		font-size: 0.8125rem;
		color: var(--mtz-muted);
		text-align: left;
	}

	.woocommerce table.shop_table_responsive tr td.product-remove::before,
	.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
	.woocommerce table.shop_table_responsive tr td.actions::before {
		content: "";
	}

	.woocommerce table.shop_table_responsive tr td.actions,
	.woocommerce table.shop_table_responsive tr td.product-name {
		display: block;
		text-align: left;
	}

	.woocommerce table.shop_table_responsive tr td.product-name::before {
		display: block;
		margin-bottom: 0.15rem;
	}

	.woocommerce table.shop_table_responsive tr td.actions .button {
		width: 100%;
		margin-top: 0.5rem;
	}

	.woocommerce table.cart td.product-quantity .quantity {
		max-width: 6rem;
	}
}

.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
	width: 100%;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

.woocommerce .cart_totals h2 {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.woocommerce .cart_totals table.shop_table th {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9375rem;
	color: var(--mtz-contrast);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	font-size: 1.125rem;
	font-weight: 600;
}

.woocommerce .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.0625rem;
}

@media (min-width: 782px) {
	.woocommerce .cart-collaterals {
		display: flex;
		justify-content: flex-end;
	}

	.woocommerce .cart-collaterals .cart_totals {
		max-width: 28rem;
	}
}

/* -------------------------------------------------- Оформлення замовлення */

.woocommerce .woocommerce-checkout .col2-set,
.woocommerce-page .woocommerce-checkout .col2-set,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	float: none;
	width: auto;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-size: 1.25rem;
	margin: 0 0 0.875rem;
}

.woocommerce-billing-fields,
.woocommerce-additional-fields {
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

/* Поля йдуть сіткою: form-row-first / form-row-last стають половинками,
   form-row-wide займає весь рядок. Ніяких float — нічого не з’їжджає. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 1rem;
}

.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-additional-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
}

@media (min-width: 600px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.woocommerce-billing-fields__field-wrapper > .form-row-first,
	.woocommerce-shipping-fields__field-wrapper > .form-row-first {
		grid-column: 1;
	}

	.woocommerce-billing-fields__field-wrapper > .form-row-last,
	.woocommerce-shipping-fields__field-wrapper > .form-row-last {
		grid-column: 2;
	}
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce form .form-row-wide {
	float: none;
	width: auto;
}

.woocommerce form.checkout_coupon {
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	padding: 1rem;
	margin: 0 0 1.5rem;
}

.woocommerce form.checkout_coupon .form-row {
	display: inline-block;
	width: auto;
	vertical-align: top;
}

.woocommerce-checkout #order_review {
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	padding: 1rem;
	background: #fff;
}

.woocommerce-checkout #order_review table.shop_table {
	margin-bottom: 1rem;
}

.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
	padding: 0.6rem 0;
}

.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 0.5rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--mtz-contrast);
}

/* Радіокнопка, іконка й назва — три колонки в один рядок, опис під ними.
   Інакше довга назва переносилась, а іконка опинялася сама на новому рядку. */
.woocommerce-checkout #payment ul.payment_methods li {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.625rem;
	align-items: start;
}

.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
	grid-column: 1;
	margin: 0.2rem 0 0;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	grid-column: 2;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li label img {
	/* Іконка попереду назви, а не в кінці абзацу. */
	order: -1;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	/* вирівнюємо по першому рядку назви, а не по центру двох */
	margin: 0.15rem 0 0;
	opacity: 0.55;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box {
	grid-column: 1 / -1;
}

.woocommerce-checkout #payment ul.payment_methods li img {
	display: inline-block;
	width: 22px;
	height: 22px;
	max-height: 22px;
	margin: 0 0.5rem -0.3rem 0;
	vertical-align: baseline;
	border: 0;
	float: none;
}

.woocommerce-checkout #payment div.payment_box {
	position: static;
	width: auto;
	margin: 0.75rem 0 0;
	padding: 0.875rem 1rem;
	background: var(--mtz-surface);
	border-radius: 2px;
	color: var(--mtz-contrast);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after {
	display: none;
}

.woocommerce-checkout #payment div.payment_box p:first-child {
	margin-top: 0;
}

.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 1rem 0 0;
	margin: 0;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	display: block;
	width: 100%;
	float: none;
	font-size: 1.0625rem;
	min-height: 3.25rem;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

/* Праву колонку (замовлення + оплата) тема загортає у власний блок
   через хуки WooCommerce — див. motuzka_checkout_review_wrapper_*. */
@media (min-width: 900px) {
	.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50, 2.5rem);
		align-items: start;
	}

	.checkout.woocommerce-checkout > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------- Подяка / замовлення */

.woocommerce .woocommerce-order {
	max-width: 46rem;
}

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 1rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	list-style: none;
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mtz-muted);
	list-style: none;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mtz-contrast);
}

.mtz-payment-details {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 1rem 1.125rem;
	border: 1px solid var(--mtz-contrast);
	border-radius: 2px;
}

.mtz-payment-details__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.mtz-payment-details__requisites {
	margin: 0.5rem 0;
	padding: 0.75rem;
	background: var(--mtz-surface);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 1rem;
	word-break: break-word;
	white-space: pre-line;
}

.mtz-payment-details p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------- Повідомлення */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	padding: 0.875rem 1rem;
	background: var(--mtz-surface);
	border-top: 0;
	border-left: 3px solid var(--mtz-accent);
	border-radius: 2px;
	color: var(--mtz-contrast);
	font-size: 0.9375rem;
	list-style: none;
}

.woocommerce-error {
	border-left-color: #b3261e;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-left: 1rem;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
}

@media (max-width: 599px) {
	.woocommerce-message .button,
	.woocommerce-info .button {
		display: block;
		float: none;
		margin: 0.75rem 0 0;
		text-align: center;
	}
}

/* -------------------------------------------------- Кошик у шапці */

.mtz-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	white-space: nowrap;
}

.mtz-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.35rem;
	box-sizing: border-box;
	border: 1px solid var(--mtz-border);
	border-radius: 999px;
	font-size: 0.8125rem;
	line-height: 1;
}

.mtz-cart-count.is-filled {
	background: var(--mtz-contrast);
	border-color: var(--mtz-contrast);
	color: #fff;
}

/* -------------------------------------------------- Дрібне */

.woocommerce .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.woocommerce-form__label-for-checkbox input {
	margin-top: 0.25rem;
}

.woocommerce .blockUI.blockOverlay {
	opacity: 0.4 !important;
}

/* -------------------------------------------------- Бейджі наявності */

.mtz-badge {
	display: inline-block;
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
}

.mtz-badge--ready,
.mtz-badge--instock {
	color: #2e7d4f;
}

.mtz-badge--backorder {
	color: var(--mtz-muted);
}

.mtz-badge--outofstock {
	color: #a33a28;
}

.mtz-badge--ready::before,
.mtz-badge--instock::before,
.mtz-badge--backorder::before,
.mtz-badge--outofstock::before {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	margin-right: 0.4rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 0.05em;
}

.woocommerce div.product .mtz-stock {
	margin: 0 0 1rem;
}

.woocommerce div.product .mtz-stock .mtz-badge {
	font-size: 0.8125rem;
	margin: 0;
}

/* -------------------------------------------------- Одиниця продажу */

.mtz-unit {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8em;
	font-weight: 400;
	color: var(--mtz-muted);
	letter-spacing: 0;
}

.woocommerce div.product p.price .mtz-unit {
	font-size: 0.5em;
}

.mtz-min-qty {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--mtz-muted);
}

/* -------------------------------------------------- Липка кнопка на мобільному */

@media (max-width: 781px) {
	.single-product div.product form.cart:not(.variations_form) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		margin: 0;
		padding: 0.625rem 16px calc(0.625rem + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--mtz-border);
		box-shadow: 0 -2px 14px rgba(23, 24, 26, 0.07);
	}

	.single-product div.product form.cart .button {
		min-height: 3rem;
	}

	/* щоб липка панель не перекривала кінець сторінки */
	.single-product .mtz-shop {
		padding-bottom: 5.5rem;
	}
}

/* -------------------------------------------------- Верхня смужка */

.mtz-topbar {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--mtz-muted);
}

.mtz-topbar a {
	color: var(--mtz-muted);
	text-decoration: none;
}

.mtz-topbar a:hover {
	color: var(--mtz-contrast);
}

/* -------------------------------------------------- Дрібні підписи в мono */

.woocommerce .woocommerce-result-count,
.woocommerce div.product .product_meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.mtz-filters label,
.woocommerce form .form-row label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* На вузькому екрані у верхній смужці лишаємо тільки телефон:
   графік роботи однаково є в підвалі й на сторінці «Контакти». */
@media (max-width: 599px) {
	/* Саме перший абзац верхньої смужки (графік) — не телефон у вкладеній групі. */
	.mtz-topbar > .wp-block-group > p:first-child {
		display: none;
	}

	.mtz-topbar > .wp-block-group {
		justify-content: flex-end;
	}
}

/* -------------------------------------------------- Шапка: кабінет і розкладка */

.mtz-account-link {
	text-decoration: none;
	white-space: nowrap;
}

/* На широкому екрані меню й інструменти тримаються правого краю,
   логотип — лівого. Селектори з .wp-block-group — щоб перебити
   службові стилі розкладки блоків, які WordPress друкує окремо. */
.wp-block-group.mtz-header-row > .mtz-nav {
	margin-left: auto;
}

/* Планшет: меню ще влазить у рядок, але разом з логотипом і кошиком — ні.
   Тому два рядки: логотип і кнопки зверху, меню під ними.
   Нижня межа — 600px: з неї вмикається гамбургер (див. блок нижче),
   і саме таку точку використовує блок навігації WordPress. */
@media (min-width: 600px) and (max-width: 781px) {
	/* Відступи шапки задані інлайн у part'і, тому тут потрібен !important. */
	.mtz-header-main {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}

	.wp-block-group.mtz-header-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		row-gap: 0.75rem;
		column-gap: 0.75rem;
	}

	.wp-block-group.mtz-header-row > .mtz-brand {
		grid-column: 1;
		grid-row: 1;
	}

	.wp-block-group.mtz-header-row > .mtz-tools {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		gap: 0.875rem;
	}

	.wp-block-group.mtz-header-row > .mtz-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-left: 0;
	}
}

/* -------------------------------------------------- Фільтри: згортання на мобільному */

.mtz-filters__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtz-muted);
}

.mtz-filters__toggle::-webkit-details-marker {
	display: none;
}

.mtz-filters__toggle::after {
	content: "";
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.mtz-filters[open] > .mtz-filters__toggle {
	margin-bottom: 0.875rem;
}

.mtz-filters[open] > .mtz-filters__toggle::after {
	transform: rotate(-135deg);
}

@media (min-width: 700px) {
	/* На широкому екрані панель завжди розгорнута — перемикач не потрібен. */
	.mtz-filters__toggle {
		display: none;
	}
}

@media (max-width: 699px) {
	.mtz-filters {
		padding: 0.75rem 0.875rem;
	}

	.mtz-filters__row {
		grid-template-columns: 1fr 1fr;
		gap: 0.625rem;
	}

	.mtz-filters__field--search,
	.mtz-filters__actions {
		grid-column: 1 / -1;
	}

	.mtz-filters label {
		margin-bottom: 0.25rem;
	}
}

/* -------------------------------------------------- Відгуки в картці товару */

.woocommerce #reviews #comments > h2 {
	margin: 0 0 1rem;
	font-size: 1.125rem;
}

.woocommerce #reviews #comments ol.commentlist {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.woocommerce #reviews #comments ol.commentlist li {
	margin: 0;
	padding: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	gap: 0.875rem;
	padding: 1rem 1.125rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	background: #fff;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 999px;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce #reviews .comment-text .meta {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
}

.woocommerce #reviews .comment-text .woocommerce-review__author {
	font-weight: 600;
}

.woocommerce #reviews .comment-text .woocommerce-review__published-date,
.woocommerce #reviews .comment-text .woocommerce-review__dash {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--mtz-muted);
}

.woocommerce #reviews .comment-text .woocommerce-review__verified {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mtz-accent);
}

.woocommerce #reviews .comment-text p:last-child {
	margin-bottom: 0;
}

/* Форма відгуку */

.woocommerce #review_form_wrapper {
	margin-top: 0;
	padding: 1rem 1.125rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	background: var(--mtz-surface, #f5f3ef);
}

/* Заголовок форми — це span#reply-title, а не h3. */
.woocommerce #review_form #respond .comment-reply-title {
	display: block;
	margin: 0 0 0.875rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.woocommerce #review_form #respond .comment-notes,
.woocommerce #review_form #respond .must-log-in {
	margin: 0 0 0.875rem;
	font-size: 0.9375rem;
	color: var(--mtz-muted);
}

.woocommerce #review_form #respond .comment-form-rating label,
.woocommerce #review_form #respond .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtz-muted);
}

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
	width: 100%;
	box-sizing: border-box;
}

.woocommerce #review_form #respond .form-submit {
	margin-bottom: 0;
}

.woocommerce #review_form #respond p.stars {
	margin: 0 0 0.875rem;
	font-size: 1.125rem;
}

.woocommerce #reviews .woocommerce-noreviews {
	margin: 0 0 1rem;
	color: var(--mtz-muted);
}

@media (max-width: 599px) {
	.woocommerce #reviews #comments ol.commentlist li .comment_container {
		gap: 0.75rem;
		padding: 0.875rem;
	}

	.woocommerce #reviews #comments ol.commentlist li img.avatar {
		width: 32px;
		height: 32px;
	}
}

/* -------------------------------------------------- Кабінет покупця */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	text-decoration: none;
	color: var(--mtz-contrast);
	font-size: 0.9375rem;
	white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
	border-color: var(--mtz-contrast);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--mtz-contrast);
	border-color: var(--mtz-contrast);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* «Вийти» — не розділ кабінету, тому не кнопка, а звичайне посилання. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	border-color: transparent;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	color: var(--mtz-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	border-color: transparent;
	color: var(--mtz-contrast);
}

/* Головний екран кабінету */

.mtz-account-hello {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	color: var(--mtz-muted);
}

.mtz-account-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.mtz-account-card {
	display: block;
	padding: 1rem 1.125rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	text-decoration: none;
	color: inherit;
}

.mtz-account-card:hover,
.mtz-account-card:focus {
	border-color: var(--mtz-contrast);
}

.mtz-account-card__title {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: 600;
}

.mtz-account-card__text {
	display: block;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--mtz-muted);
}

.mtz-account-foot {
	margin: 0;
	font-size: 0.875rem;
}

.mtz-account-foot__sep {
	margin: 0 0.4rem;
	color: var(--mtz-border);
}

/* Адреси */

.woocommerce-account .woocommerce-Address {
	padding: 1rem 1.125rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.625rem;
}

.woocommerce-account .woocommerce-Address-title h2 {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1rem;
	text-align: left;
}

.woocommerce-account .woocommerce-Address-title .edit {
	flex: none;
	font-size: 0.875rem;
	white-space: nowrap;
}

.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
	color: var(--mtz-muted);
}

/* Таблиця замовлень */

.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--mtz-border);
	text-align: left;
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtz-muted);
}

@media (min-width: 600px) {
	.mtz-account-cards {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

/* Вхід і реєстрація — двома колонками там, де є місце. */
.woocommerce-account .u-columns > div {
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.woocommerce-account .u-columns h2 {
	margin: 0 0 0.875rem;
	font-size: 1.125rem;
}

@media (min-width: 782px) {
	/* Коли покупець увійшов, .woocommerce містить меню й вміст —
	   розводимо їх у дві колонки. На сторінці входу дитина одна,
	   і flex нічого не змінює. */
	.woocommerce-account .woocommerce {
		display: flex;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--50, 2.5rem);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 0 0 210px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: block;
		margin-bottom: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li + li {
		margin-top: 0.375rem;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.woocommerce-account .u-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50, 2.5rem);
		width: 100%;
	}

	.woocommerce-account .u-columns > div {
		margin-bottom: 0;
	}
}

/* -------------------------------------------------- Шапка на телефоні */

/* До 600px блок навігації WordPress сам ховає меню під кнопку-гамбургер
   і відкриває його накладкою на весь екран. Нам лишається поставити кнопку
   праворуч від кошика й привести накладку до вигляду сайту. */
@media (max-width: 599px) {
	.mtz-header-main {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}

	.wp-block-group.mtz-header-row {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.wp-block-group.mtz-header-row > .mtz-brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Гамбургер — крайній справа, після кабінету й кошика. */
	.wp-block-group.mtz-header-row > .mtz-tools {
		order: 2;
		flex: 0 0 auto;
		gap: 0.875rem;
	}

	.wp-block-group.mtz-header-row > .mtz-nav {
		order: 3;
		flex: 0 0 auto;
		margin-left: 0;
	}

	.mtz-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		padding: 0.25rem;
		color: var(--mtz-contrast);
	}

	/* Накладка меню: папір, тонкі лінії, крупні пункти під палець. */
	.mtz-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.25rem 16px 2rem;
		background: var(--wp--preset--color--base, #fff);
	}

	.mtz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 2.5rem;
	}

	.mtz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0;
		width: 100%;
	}

	.mtz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid var(--mtz-border);
	}

	.mtz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.9rem 0;
		font-size: 1.125rem;
	}

	.mtz-nav .wp-block-navigation__responsive-container-close {
		padding: 0.25rem;
		color: var(--mtz-contrast);
	}
}

/* -------------------------------------------------- Повідомлення WooCommerce */

/* Блокові банери (кошик, кабінет) приходять із синьою рамкою й великою
   іконкою — зводимо їх до того ж вигляду, що й решта карток на сайті. */
.woocommerce .wc-block-components-notice-banner,
.wc-block-components-notice-banner {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--mtz-border);
	border-left: 3px solid var(--mtz-accent);
	border-radius: 2px;
	background: var(--mtz-surface);
	color: var(--mtz-contrast);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.woocommerce .wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: #b3261e;
}

.woocommerce .wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner > svg {
	display: none;
}

.woocommerce .wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner .wc-forward {
	white-space: nowrap;
}

/* -------------------------------------------------- Кнопка «показати пароль» */

/* WooCommerce малює це око своїм іконковим шрифтом. Шрифтів, крім наших,
   ми не вантажимо, тому малюємо око SVG-маскою — колір бере з тексту. */
.woocommerce form .form-row .password-input,
.woocommerce-page form .form-row .password-input {
	position: relative;
	display: block;
}

.woocommerce form .form-row .password-input input,
.woocommerce-page form .form-row .password-input input {
	padding-right: 2.75rem;
}

.woocommerce form .form-row .show-password-input,
.woocommerce-page form .form-row .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mtz-muted);
	cursor: pointer;
}

.woocommerce form .form-row .show-password-input:hover,
.woocommerce-page form .form-row .show-password-input:hover {
	color: var(--mtz-contrast);
}

.woocommerce form .form-row .show-password-input::after,
.woocommerce-page form .form-row .show-password-input::after {
	content: "";
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: var(--mtz-eye) center / contain no-repeat;
	mask: var(--mtz-eye) center / contain no-repeat;
}

.woocommerce form .form-row .show-password-input.display-password::after,
.woocommerce-page form .form-row .show-password-input.display-password::after {
	-webkit-mask-image: var(--mtz-eye-off);
	mask-image: var(--mtz-eye-off);
}

:root {
	--mtz-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5C6.5 5 2.7 9.2 1.5 11.3c-.2.4-.2.9 0 1.3C2.7 14.8 6.5 19 12 19s9.3-4.2 10.5-6.3c.2-.4.2-.9 0-1.3C21.3 9.2 17.5 5 12 5zm0 12c-4.1 0-7.3-3-8.5-5 1.2-2 4.4-5 8.5-5s7.3 3 8.5 5c-1.2 2-4.4 5-8.5 5zm0-8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/></svg>');
	--mtz-eye-off: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.8 1.7 1.4 3.1l3 3C2.6 7.6 1.4 9.3.8 10.4c-.2.4-.2.9 0 1.3C2 13.8 5.8 18 11.3 18c1.7 0 3.2-.4 4.5-1l3.4 3.4 1.4-1.4L2.8 1.7zM11.3 16c-4.1 0-7.3-3-8.5-5 .6-1 1.7-2.3 3.2-3.4l2 2a3.5 3.5 0 004.8 4.8l1.5 1.5c-.9.1-1.9.1-3 .1zm0-10c4.1 0 7.3 3 8.5 5-.5.8-1.3 1.8-2.4 2.8l1.4 1.4c1.4-1.3 2.4-2.7 2.9-3.5.2-.4.2-.9 0-1.3C20.6 8.2 16.8 4 11.3 4c-1.1 0-2.1.2-3 .4l1.6 1.6c.5 0 .9 0 1.4 0z"/></svg>');
}

/* -------------------------------------------------- Оформлення на телефоні */

@media (max-width: 599px) {
	/* Підсумок замовлення — це таблиця у дві колонки. На телефоні назва товару
	   стискається в вузький стовпчик і ламається на три рядки, а варіанти
	   доставки тиснуться в половину ширини. Розкладаємо рядки в стовпчик:
	   підпис зверху, значення під ним. */
	.woocommerce-checkout #order_review table.shop_table,
	.woocommerce-checkout #order_review table.shop_table tbody,
	.woocommerce-checkout #order_review table.shop_table tfoot,
	.woocommerce-checkout #order_review table.shop_table tr,
	.woocommerce-checkout #order_review table.shop_table th,
	.woocommerce-checkout #order_review table.shop_table td {
		display: block;
		width: auto;
		text-align: left;
	}

	.woocommerce-checkout #order_review table.shop_table thead {
		display: none;
	}

	.woocommerce-checkout #order_review table.shop_table tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--mtz-border);
	}

	.woocommerce-checkout #order_review table.shop_table tr:last-child {
		border-bottom: 0;
	}

	.woocommerce-checkout #order_review table.shop_table th {
		padding: 0 0 0.25rem;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.6875rem;
		font-weight: 400;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--mtz-muted);
	}

	.woocommerce-checkout #order_review table.shop_table td {
		padding: 0;
	}

	.woocommerce-checkout #order_review table.shop_table .cart-subtotal td,
	.woocommerce-checkout #order_review table.shop_table .order-total td {
		font-size: 1.0625rem;
		font-weight: 600;
	}

	/* Рядок товару: назва й сума — в один рядок, ціна праворуч. */
	.woocommerce-checkout #order_review table.shop_table .cart_item td.product-name {
		font-weight: 600;
	}

	.woocommerce-checkout #order_review table.shop_table .cart_item td.product-total {
		margin-top: 0.25rem;
		color: var(--mtz-muted);
	}

	.woocommerce-checkout #order_review ul#shipping_method {
		margin: 0;
		padding: 0;
	}

	.woocommerce-checkout #order_review {
		padding: 0.875rem;
	}

	/* Повідомлення над формою займають перший екран — робимо їх компактнішими. */
	.woocommerce-checkout .woocommerce-form-login-toggle .wc-block-components-notice-banner,
	.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
		padding: 0.625rem 0.875rem;
		font-size: 0.875rem;
	}
}

/* «(необов'язково)» біля міста й відділення Нової Пошти вводить в оману:
   коли обрано Нову Пошту, ці поля обов'язкові — це перевіряється при
   підтвердженні замовлення. На інших полях підпис лишається: там він правдивий. */
.woocommerce-checkout .mtz-np-field .optional {
	display: none;
}

/* -------------------------------------------------- Підсумки кошика на телефоні */

@media (max-width: 599px) {
	/* Та сама проблема, що й на оформленні: таблиця у дві колонки. Рядок
	   «Відправлення» з варіантами доставки й калькулятором не вміщається
	   і виштовхує сторінку за екран. Розкладаємо в стовпчик. */
	.woocommerce .cart_totals table.shop_table,
	.woocommerce .cart_totals table.shop_table tbody,
	.woocommerce .cart_totals table.shop_table tr,
	.woocommerce .cart_totals table.shop_table th,
	.woocommerce .cart_totals table.shop_table td {
		display: block;
		width: auto;
		text-align: left;
	}

	.woocommerce .cart_totals table.shop_table tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--mtz-border);
	}

	.woocommerce .cart_totals table.shop_table tr:last-child {
		border-bottom: 0;
	}

	.woocommerce .cart_totals table.shop_table th {
		padding: 0 0 0.25rem;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.6875rem;
		font-weight: 400;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--mtz-muted);
	}

	.woocommerce .cart_totals table.shop_table td {
		padding: 0;
	}

	/* WooCommerce на вузькому екрані сам дописує підпис у td::before.
	   У нас підпис уже є в th — другий зайвий. */
	.woocommerce .cart_totals table.shop_table td::before {
		content: none;
	}

	.woocommerce .cart_totals ul#shipping_method {
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.woocommerce .cart_totals ul#shipping_method li {
		margin: 0 0 0.5rem;
		text-align: left;
	}

	.woocommerce .cart_totals .woocommerce-shipping-destination,
	.woocommerce .cart_totals .woocommerce-shipping-calculator {
		display: block;
		margin-top: 0.5rem;
		text-align: left;
	}
}

/* Рядок «Доставка до 30.» показує код області й нічого не пояснює: вартість
   доставки в нас не залежить від адреси — це тариф перевізника, який покупець
   платить при отриманні. Місто й відділення він вказує в оформленні. */
.woocommerce .cart_totals .woocommerce-shipping-destination {
	display: none;
}

/* -------------------------------------------------- <mark> у замовленнях */

/* WooCommerce виділяє номер, дату й статус замовлення тегом <mark>, а браузер
   малює йому жовтий фон маркера. На сторінці «Замовлення №…» це виглядало як
   випадково підсвічений текст. Лишаємо просто акцент напівжирним. */
.woocommerce mark,
.woocommerce-page mark,
.woocommerce-account mark {
	background: none;
	color: var(--mtz-contrast);
	font-weight: 600;
}

/* -------------------------------------------------- Одиниця біля кількості */

.mtz-qty-unit {
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--mtz-muted);
}

/* -------------------------------------------------- Готовий метраж */

.mtz-lengths {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
}

.mtz-lengths[hidden] {
	display: none;
}

.mtz-lengths__label {
	display: block;
	margin-bottom: 0.45rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtz-muted);
}

.mtz-lengths__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mtz-length {
	min-height: 44px;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--mtz-border);
	border-radius: 2px;
	background: #fff;
	color: var(--mtz-contrast);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
}

.mtz-length:hover,
.mtz-length:focus-visible {
	border-color: var(--mtz-contrast);
}

.mtz-length.is-active {
	background: var(--mtz-contrast);
	border-color: var(--mtz-contrast);
	color: #fff;
}

.mtz-length--custom {
	color: var(--mtz-muted);
	border-style: dashed;
}

.mtz-length--custom:hover,
.mtz-length--custom:focus-visible {
	color: var(--mtz-contrast);
}