/* Страницы магазина: корзина, оформление, личный кабинет.
   Приводим формы и таблицы Woo к языку темы: прямые углы, золотая волосинка,
   песочная полоса. Подключается только на страницах Woo. */

.shop h1 { margin-bottom: clamp(24px, 3vw, 40px); }
.shop__body > * + * { margin-top: 22px; }

/* — таблицы — */
.shop table { width: 100%; border-collapse: collapse; }
.shop table th,
.shop table td {
	padding: 16px 12px;
	border-bottom: 1px solid rgba(20, 36, 42, .14);
	text-align: start;
	vertical-align: middle;
}
.shop table th { font-weight: 700; color: var(--ink); }
.shop .product-thumbnail img { width: 64px; height: auto; border-radius: 4px; }

/* — поля — - высота 48px: норма проекта по зоне нажатия */
.shop input[type="text"],
.shop input[type="email"],
.shop input[type="tel"],
.shop input[type="number"],
.shop input[type="password"],
.shop select,
.shop textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid rgba(20, 36, 42, .26);
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	box-sizing: border-box;
}
.shop textarea { min-height: 120px; }
.shop input:focus,
.shop select:focus,
.shop textarea:focus {
	outline: 2px solid var(--gold-text);
	outline-offset: 2px;
	border-color: var(--gold-text);
}
.shop label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink-soft); }

/* — кнопки Woo под язык темы — */
.shop .button,
.shop button[type="submit"],
.woocommerce-message .button,
.woocommerce-info .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 30px;
	border: 1px solid var(--petrol);
	border-radius: 999px;
	background: var(--petrol);
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}
.shop .button:hover,
.shop button[type="submit"]:hover { background: #255A68; border-color: #255A68; }

/* — сообщения — */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 0;
	border-inline-start: 3px solid var(--gold-text);
	border-radius: 4px;
	background: rgba(204, 164, 105, .14);
	color: var(--ink);
	list-style: none;
}
.woocommerce-error { border-inline-start-color: #A32E5E; background: rgba(163, 46, 94, .10); }

/* — итоги заказа — */
.shop .cart_totals,
.shop #order_review {
	padding: clamp(20px, 2.4vw, 30px);
	background: #fff;
	border: 1px solid rgba(20, 36, 42, .14);
	border-radius: 6px;
}
.shop .order-total .amount { font-size: 22px; font-weight: 800; color: var(--ink); }

@media (min-width: 900px) {
	.woocommerce-checkout .shop form.checkout { display: grid; gap: clamp(26px, 3vw, 46px); grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
	/* Данные покупателя — на обе строки сетки, иначе итог заказа встаёт во вторую
	   строку, то есть ниже всех полей, и сбоку остаётся пустая колонка. */
	.woocommerce-checkout .shop #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout .shop #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
	.woocommerce-checkout .shop #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 100px; }
	.woocommerce-checkout .shop form.checkout { grid-template-rows: auto 1fr; }
}

/* Кнопки Woo грузятся своим набором стилей позже нашего, поэтому поднимаем
   специфичность, а не порядок подключения. */
.shop .woocommerce a.button,
.shop .woocommerce button.button,
.shop .woocommerce input.button,
.shop a.button,
.shop button.button,
.shop input.button,
.woocommerce .shop a.button {
	min-height: 48px;
	padding: 12px 30px;
	border-radius: 999px;
	background: var(--petrol);
	color: #fff;
	font-weight: 700;
	line-height: 24px;
}
.shop .woocommerce a.button:hover,
.shop .woocommerce button.button:hover,
.shop a.button:hover,
.shop button.button:hover { background: #255A68; color: #fff; }

/* Адрес обязателен при доставке курьером, но формально поле необязательное:
   иначе самовывоз не пропустит пустой адрес. Подпись «необязательно» тут
   врала бы, звёздочку ставит inc/shop.php. */
.tohar-ship-only .optional { display: none; }

/* Данные покупателя Woo делит на два плавающих столбца (.col-1 — поля,
   .col-2 — примечание к заказу). Внутри нашей двухколоночной сетки это
   давало три узкие колонки. Складываем их в одну: поля, под ними примечание. */
.woocommerce-checkout .shop .col2-set .col-1,
.woocommerce-checkout .shop .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
}
.woocommerce-checkout .shop .col2-set .col-2 { margin-top: 12px; }
.woocommerce-checkout .shop .woocommerce-billing-fields h3,
.woocommerce-checkout .shop #order_review_heading { font-size: clamp(22px, 1.9vw, 27px); margin-bottom: 18px; }
.woocommerce-checkout .shop .form-row { margin-bottom: 16px; padding: 0; }