/*
Theme Name: Arystan
Description: Блочная тема аккумуляторного центра «Арыстан» на основе Twenty Twenty-Five. Scaffolded by Studio Code. Дизайн-токены — в DESIGN.md в корне сайта.
Author: Arystan
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arystan
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, e-commerce, custom-colors, custom-logo, editor-style
*/

/* ---------- Base ---------- */

/* Sections own their vertical rhythm via padding. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Templates WooCommerce renders on its own still clear the header and footer. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.wp-site-blocks main.is-flush {
	padding-block: 0;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:where(.wp-site-blocks *:focus-visible) {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--wp--preset--color--primary);
}

/* ---------- Block styles: buttons ---------- */

.is-style-whatsapp .wp-element-button,
.is-style-phone .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 24px;
	font-size: var(--wp--preset--font-size--body);
}

.is-style-whatsapp .wp-element-button::before,
.is-style-phone .wp-element-button::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: var(--arystan-icon) center / contain no-repeat;
	mask: var(--arystan-icon) center / contain no-repeat;
}

.is-style-whatsapp .wp-element-button {
	--arystan-icon: url(assets/icons/whatsapp.svg);
	background-color: var(--wp--preset--color--whatsapp);
}

.is-style-whatsapp .wp-element-button:hover,
.is-style-whatsapp .wp-element-button:focus {
	background-color: var(--wp--preset--color--whatsapp-hover);
}

.is-style-phone .wp-element-button {
	--arystan-icon: url(assets/icons/phone.svg);
}

/* ---------- Block styles: groups ---------- */

.is-style-card {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.2s ease;
}

.is-style-card:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.is-style-card-soft {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
}

.is-style-card-gray {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-gray);
}

.is-style-notice {
	padding: var(--wp--preset--spacing--40);
	border: 3px dashed var(--wp--preset--color--danger);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--danger);
	text-align: center;
}

/* ---------- Header: top bar ---------- */

.arystan-topbar {
	font-size: 13px;
	line-height: 19px;
}

.arystan-topbar > .wp-block-group {
	min-height: 36px;
	gap: 20px;
}

.arystan-topbar__address {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.arystan-topbar__address::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(assets/icons/address.svg) center / contain no-repeat;
	mask: url(assets/icons/address.svg) center / contain no-repeat;
}

/* ---------- Header: main bar ---------- */

.arystan-header {
	position: relative;
	z-index: 20;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.07);
}

.arystan-header__bar {
	position: relative;
	min-height: 100px;
	gap: 20px;
}

.arystan-header__logo {
	flex: none;
}

.arystan-header__logo img {
	width: 240px;
	height: auto;
}

.arystan-header__contacts {
	gap: 0;
	color: #333;
}

.arystan-header__hours {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
}

.arystan-header__phone {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.arystan-header__phone a {
	color: inherit;
	text-decoration: none;
}

/* Mini cart: icon with a round counter — in the dark top bar on desktop (parts/header.html,
   .arystan-cart--desktop; owner, 2026-10-18), next to the menu button on tablets and phones. */
.arystan-cart {
	flex: none;
}

.arystan-cart .wc-block-mini-cart__button {
	padding: 6px;
	color: inherit;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.arystan-header .arystan-cart .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--primary);
}

.arystan-cart .wc-block-mini-cart__icon {
	width: 26px;
	height: 26px;
}

/* Top bar (36px): a white 22px icon that keeps the bar's height. */
.arystan-topbar .arystan-cart .wc-block-mini-cart__button {
	padding: 4px;
}

.arystan-topbar .arystan-cart .wc-block-mini-cart__button:hover {
	opacity: 0.75;
}

.arystan-topbar .arystan-cart .wc-block-mini-cart__icon {
	width: 22px;
	height: 22px;
}

/* WooCommerce 11 paints the badge with an inline style from the interactivity store; only !important wins. */
.arystan-cart .wc-block-mini-cart__badge {
	min-width: 18px;
	height: 18px;
	border: 0;
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	font-size: 11px;
	font-weight: 600;
}

/* Mini-cart drawer: no «Стоимость доставки рассчитывается при оформлении заказа» under «Подытог».
   WooCommerce hides it on phones and brings it back from 480px with this selector — repeated one class longer. */
.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description.wc-block-components-totals-item__description {
	display: none;
}

/* Drawer close «×» — just the mark (owner, 2026-10-19). It is a `wp-element-button`, so it got the theme's
   button shadow, a stronger one on hover and WooCommerce's blue ring on focus (the drawer focuses it on
   opening) — the shadow seemed to come and go. A ring only for keyboard focus. */
.wc-block-components-drawer .wc-block-components-drawer__close.wc-block-components-button,
.wc-block-components-drawer .wc-block-components-drawer__close.wc-block-components-button:is(:hover, :focus, :active) {
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	outline: none;
}

.wc-block-components-drawer .wc-block-components-drawer__close.wc-block-components-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -8px;
}

/* Mini-cart drawer title: «Корзина» and, under it, «2 позиции» (functions.php, assets/js/mini-cart.js). */
.wc-block-mini-cart__title .arystan-mini-cart-count {
	display: block;
	margin-top: 4px;
	color: var(--wp--preset--color--secondary);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* Mini-cart drawer items — the cart page cards (Cart, ≤768px): photo | name, price, option; × in the corner;
   under a line the «− 1 +» stepper and «Подытог» with the line total. The product cell and its wrappers
   are flattened (display: contents) so the stepper and the total share one row across the card. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table table.wc-block-cart-items,
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table table.wc-block-cart-items > tbody {
	display: block;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table table.wc-block-cart-items > thead {
	display: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table table.wc-block-cart-items .wc-block-cart-items__row:not([hidden]) {
	position: relative;
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"img name name"
		"img price price"
		"img meta meta"
		"qty qty total";
	column-gap: 0;
	margin: 0 0 12px;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
}

/* The line between the item and its stepper / total. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table table.wc-block-cart-items .wc-block-cart-items__row:not([hidden])::before {
	content: "";
	grid-column: 1 / -1;
	grid-row: 4;
	align-self: start;
	margin-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row :is(.wc-block-cart-item__product, .wc-block-cart-item__wrap, .wc-block-cart-item__quantity) {
	display: contents;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row td.wc-block-cart-item__image {
	grid-area: img;
	width: auto;
	padding: 0 14px 0 0;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row .wc-block-cart-item__image img {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row .wc-block-components-product-name {
	grid-area: name;
	max-width: none;
	padding-right: 30px;
	color: var(--wp--preset--color--heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
	text-decoration: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row a.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--primary);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row .wc-block-components-product-backorder-badge {
	grid-column: 2 / -1;
	justify-self: start;
	margin-top: 6px;
}

/* Price per piece, small and grey (the old price struck through when the option gives a discount). */
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row .wc-block-cart-item__prices {
	grid-area: price;
	align-self: start;
	margin-top: 6px;
	color: var(--wp--preset--color--secondary);
	font-size: 14px;
	line-height: 20px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__prices del {
	color: var(--wp--preset--color--muted);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted {
	margin-left: 0;
}

/* Chosen option («Сдать старый АКБ за скидку») without the question-like attribute name; the variation
   description («Вы получите скидку…») is left out, as in the cart. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row .wc-block-components-product-metadata {
	grid-area: meta;
	align-self: start;
	margin-top: 2px;
	color: var(--wp--preset--color--secondary);
	font-size: 13px;
	line-height: 18px;
}

.wc-block-mini-cart__drawer .wc-block-components-product-metadata :is(.wc-block-components-product-metadata__description, .wc-block-components-product-details__name) {
	display: none;
}

.wc-block-mini-cart__drawer .wc-block-components-product-metadata .wc-block-components-product-details.wc-block-components-product-details {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
}

/* × in the top right corner, as in the cart (WooCommerce draws a bin next to the stepper). */
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row .wc-block-cart-item__remove-link:not([hidden]) {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--secondary);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row .wc-block-cart-item__remove-link:hover {
	background-color: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--base);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg {
	display: none;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link::before {
	content: "×";
}

/* Stepper «− 1 +» — the one in the cart and the variation card, but as tall as «Оформить заказ» below
   (46px, owner): square 46px buttons. */
.wc-block-mini-cart__drawer .wc-block-cart-items__row .wc-block-components-quantity-selector:not([hidden]) {
	display: inline-flex;
	grid-area: qty;
	align-self: start;
	justify-self: start;
	box-sizing: border-box;
	height: 46px;
	min-width: 0;
	margin-top: 28px;
	overflow: hidden;
	border: 1px solid rgba(51, 51, 51, 0.15);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	flex: none;
	width: 46px;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	min-width: 46px;
	border-radius: 0;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--heading);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	opacity: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
	touch-action: manipulation;
}

/* Only with a mouse: on a phone :hover sticks to the last tapped button. */
@media (hover: hover) {
	.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector :is(input, button):focus {
	box-shadow: none;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector :is(input, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Line total: small grey «Подытог» (functions.php) over a bold sum, right of the stepper. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table .wc-block-cart-items__row td.wc-block-cart-item__total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	grid-area: total;
	margin-top: 28px;
	padding-left: 12px;
	color: var(--wp--preset--color--heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-align: right;
}

/* «Оформить заказ» — the only footer button (functions.php drops «В корзину»): full width, 46px. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 18px;
}

.wc-block-mini-cart__drawer .arystan-line-total-label {
	color: var(--wp--preset--color--secondary);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-sale-badge {
	display: none;
}

/* Float Button (WhatsApp) writes z-index: 99999 inline; keep it under the WooCommerce drawers
   (mini-cart, catalog filters — 9999) so an open drawer covers it. */
.flbtn-container {
	z-index: 9990 !important;
}

.arystan-header .arystan-cart {
	color: #333;
}

/* ---------- Header: desktop navigation and mega menu ---------- */

.arystan-nav-desktop {
	position: static;
	align-self: stretch;
	font-size: 16px;
}

.arystan-nav-desktop .wp-block-navigation__container {
	align-self: stretch;
	align-items: stretch;
	gap: 0 24px;
}

.arystan-nav-desktop .wp-block-navigation__container > .wp-block-navigation-item {
	position: static;
	display: flex;
	align-items: center;
}

.arystan-nav-desktop .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding: 4px;
	color: #333;
	line-height: 21px;
}

.arystan-nav-desktop .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: -2px;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.arystan-nav-desktop .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.arystan-nav-desktop .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.arystan-nav-desktop .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.arystan-nav-desktop .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after {
	opacity: 1;
	transform: none;
}

/* The submenu arrow is hidden (submenus open on hover) but stays reachable from the keyboard — the way
   to open «Каталог» without a mouse (its label is a link to the shop). */
.arystan-nav-desktop .wp-block-navigation__submenu-icon {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.arystan-nav-desktop .wp-block-navigation__submenu-icon:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin-left: 2px;
	overflow: visible;
	clip-path: none;
}

.arystan-nav-desktop .has-child > a.wp-block-navigation-item__content:not([href]) {
	cursor: default;
}

.arystan-nav-desktop .has-child > .wp-block-navigation__submenu-container {
	top: 100%;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start;
	padding: 20px 10px;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
	font-size: 14px;
}

/* «Каталог» (one item since 2026-10-18): categories with descriptions on the left, then the brands in stock
   in four columns (the brand group is added by arystan_nav_catalog_brands() in functions.php). */
.arystan-nav-desktop .arystan-nav-catalog > .wp-block-navigation__submenu-container {
	grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
	row-gap: 8px;
	padding: 22px 20px 24px;
}

.arystan-nav-desktop .arystan-nav-catalog > .wp-block-navigation__submenu-container > :not(.arystan-nav-catalog__brands) {
	grid-column: 1;
}

.arystan-nav-desktop .arystan-nav-catalog__brands {
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: stretch;
	margin-left: 24px;
	padding-left: 24px;
	border-left: 1px solid var(--wp--preset--color--line);
}

/* Categories as tiles (owner, 2026-10-19: plain titles with descriptions did not read as links): outlined
   card (same light grey border as the brand chips) with an arrow on the right; under the pointer — blue
   border, light blue fill, the arrow moves. */
.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	display: block;
	width: 100%;
}

.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 11px 39px 11px 13px;
	border: 1px solid #dcdde3;
	border-radius: var(--wp--custom--radius--md);
	background-color: transparent;
	color: #333;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	color: var(--wp--preset--color--muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease, color 0.15s ease;
}

.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .current-menu-item > .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--primary);
	background-color: #f3f6fe;
}

.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .current-menu-item > .wp-block-navigation-item__content::after {
	color: var(--wp--preset--color--primary);
	transform: translateX(3px) rotate(45deg);
}

.arystan-header .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
	color: var(--wp--preset--color--primary);
}

/* Category descriptions: exactly two lines each, so the three read as equals (texts in parts/header.html
   are written to fit; a longer one is cut with an ellipsis). */
.arystan-nav-desktop .arystan-nav-catalog .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: -webkit-box;
	min-height: calc(2 * 17px);
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.arystan-nav-catalog__head {
	display: block;
	padding: 0 0 6px;
	color: var(--wp--preset--color--secondary);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Brands as chips (owner, 2026-10-18; outlined since 2026-10-19): white pills with a light grey border,
   blue border and text with a light blue fill under the pointer and for the current brand. */
.arystan-nav-catalog__brand-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arystan-nav-desktop .arystan-nav-catalog__brand-list {
	padding: 4px 0 0;
}

/* Two classes more than the submenu link rules above and the mobile overlay rules. */
.arystan-header .arystan-nav-catalog__brand-list > .wp-block-navigation-item {
	display: block;
}

.arystan-header .arystan-nav-catalog__brand-list > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	flex: none;
	padding: 5px 13px;
	border: 1px solid #dcdde3;
	border-radius: 999px;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.arystan-header .arystan-nav-catalog__brand-list .wp-block-navigation-item__label {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.arystan-header .arystan-nav-catalog__brand-list > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.arystan-header .arystan-nav-catalog__brand-list > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.arystan-header .arystan-nav-catalog__brand-list > .current-menu-item > .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--primary);
	background-color: #f3f6fe;
	color: var(--wp--preset--color--primary);
}

.arystan-header .arystan-nav-catalog__brand-list > .wp-block-navigation-item > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.arystan-header .arystan-nav-catalog__brand-list > .current-menu-item .wp-block-navigation-item__label {
	color: inherit;
}

/* Core centres navigation items vertically — in the grid that put brand names at different heights. */
.arystan-nav-desktop .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	align-items: flex-start;
	align-self: start;
}

.arystan-nav-desktop .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 9px 10px;
	color: #333;
}

.arystan-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-weight: 600;
	line-height: 22px;
}

.arystan-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 17px;
	color: #333;
	opacity: 0.8;
}

.arystan-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__label,
.arystan-nav-desktop .wp-block-navigation__submenu-container .current-menu-item .wp-block-navigation-item__label {
	color: var(--wp--preset--color--primary);
}

/* ---------- Header: mobile ---------- */

.arystan-header__mobile {
	gap: 18px;
}

.arystan-nav-mobile .wp-block-navigation__responsive-container-open {
	color: #333;
}

.arystan-nav-mobile .wp-block-navigation__responsive-container-open svg {
	width: 30px;
	height: 30px;
}

/* Doubled class beats core's `body .is-layout-flex { display: flex }`.
   The desktop header starts at 1200px (The7 switched at 1070px, but «Каталог», «Наши бренды» and
   three pages do not fit next to the logo and the phone below 1200px). */
@media (min-width: 1200px) {
	.arystan-header__mobile.arystan-header__mobile {
		display: none;
	}

	/* The7 kept a 50px inner padding inside the 1300px header container. */
	.arystan-header__bar {
		padding-inline: 50px;
	}

	.arystan-topbar > .wp-block-group {
		padding-inline: 50px 55px;
	}
}

/* 1200–1399px: the menu fits in one line with a smaller logo, font, gap and phone. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.arystan-header__logo img {
		width: 200px;
	}

	.arystan-nav-desktop {
		font-size: 15px;
	}

	.arystan-nav-desktop .wp-block-navigation__container {
		gap: 0 14px;
	}

	.arystan-header__phone {
		font-size: 21px;
	}
}

/* The header stays on screen (owner, 2026-10-20; phones and tablets too — the same day). z-index over the
   page and the WhatsApp button (9990), under the WooCommerce drawers of the page (filters, 9999); the
   mini-cart drawer and the mobile menu open from inside the header, so they rise with it (the open menu
   lifts the whole header, see «Mobile menu overlay»). Phones and tablets: the 60px bar as it is. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 9995;
}

/* Up to 600px WordPress's admin bar scrolls away with the page (position: absolute). */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

@media (max-width: 1199.98px) {
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 60px);
	}
}

/* Desktop: the dark bar with the cart as it is, the white bar narrower once the page is scrolled
   (assets/js/header.js: html.arystan-header-compact past 80px). The white bar loses 36px (100 → 64); the
   header gets the same 36px as a bottom margin, so the page under it keeps its place and nothing jumps. */
@media (min-width: 1200px) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: margin-bottom 0.25s ease;
	}

	.arystan-header__bar {
		transition: min-height 0.25s ease;
	}

	.arystan-header__logo img {
		transition: width 0.25s ease;
	}

	.arystan-header__phone {
		transition: font-size 0.25s ease;
	}

	.arystan-header-compact .wp-site-blocks > header.wp-block-template-part {
		margin-bottom: 36px;
	}

	.arystan-header-compact .arystan-header__bar {
		min-height: 64px;
	}

	.arystan-header-compact .arystan-header__logo img {
		width: 180px;
	}

	.arystan-header-compact .arystan-header__phone {
		font-size: 20px;
	}

	/* In-page anchors land under the header, not behind it (36 + 64). */
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 100px);
	}
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part,
	.arystan-header__bar,
	.arystan-header__logo img,
	.arystan-header__phone {
		transition: none;
	}
}

@media (max-width: 1199.98px) {
	.arystan-topbar.arystan-topbar,
	.arystan-nav-desktop.arystan-nav-desktop,
	.arystan-header__contacts.arystan-header__contacts {
		display: none;
	}

	.arystan-header__bar {
		min-height: 60px;
	}

	.arystan-header__logo img {
		width: 166px;
	}
}

/* ---------- Mobile menu overlay (parts/navigation-overlay.html) ---------- */

/* The header (z-index 20, inside the sticky header part, 9995) is the menu's stacking context: lift both
   over the WhatsApp button (9990) and the WooCommerce drawers while the menu is open. */
.arystan-header:has(.arystan-nav-mobile .is-menu-open),
.wp-site-blocks > header.wp-block-template-part:has(.arystan-nav-mobile .is-menu-open) {
	z-index: 100000;
}

/* Opens: backdrop fades in, the panel slides in from the right. Closes the same way back
   (`is-arystan-closing`, set by assets/js/navigation.js for the 0.25s before core closes it).
   Only these two animations run — core's own fade-and-rise of the container is replaced. */
.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background-color: rgba(0, 0, 0, 0.5);
	animation: arystan-backdrop-in 0.3s ease-out;
}

.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open.is-arystan-closing {
	animation: arystan-backdrop-out 0.25s ease-in forwards;
}

.arystan-nav-mobile .is-arystan-closing .arystan-overlay {
	animation: arystan-slide-out 0.25s cubic-bezier(0.55, 0, 0.75, 0.2) forwards;
}

/* While the menu is open core sets `overflow: hidden` on <html>: the scrollbar went away mid-animation,
   the page got 15px wider and the sliding panel jumped by as much. Keep the scrollbar's place. */
html {
	scrollbar-gutter: stable;
}

/* Core focuses the first menu item on open, while the panel is still off-screen to the right: the browser
   scrolled the menu sideways to show it and the panel popped in. Nothing outside the panel can scroll now
   (`clip`), the panel scrolls itself when the menu is taller than the screen. */
.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	overflow: clip;
}

@keyframes arystan-backdrop-in {
	from {
		background-color: rgba(0, 0, 0, 0);
	}
}

@keyframes arystan-backdrop-out {
	to {
		background-color: rgba(0, 0, 0, 0);
	}
}

@keyframes arystan-slide-out {
	to {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open,
	.arystan-nav-mobile .arystan-overlay {
		animation: none !important;
	}
}

.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.arystan-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container {
	height: 100%;
	margin: 0;
	padding: 0;
}

.arystan-overlay {
	position: relative;
	box-sizing: border-box;
	width: min(340px, 90vw); /* Was min(300px, 85vw) — a little wider (owner, 2026-10-18). */
	height: 100%;
	margin-left: auto;
	padding: 60px 30px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: #333;
	animation: arystan-slide-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Tablets (the mobile header shows up to 1200px): a little wider. */
@media (min-width: 600px) {
	.arystan-overlay {
		width: 400px;
	}
}

@keyframes arystan-slide-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

/* Close «×» — just the mark on the white panel, like the mini-cart drawer's (owner, 2026-10-20; was a blue
   square). Core focuses it when the menu opens: a ring only for keyboard focus. */
.arystan-overlay__close,
.arystan-overlay__close:is(:hover, :focus, :active) {
	position: absolute;
	top: 20px;
	right: 10px;
	padding: 8px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	outline: none;
}

.arystan-overlay__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.arystan-nav-overlay {
	width: 100%;
	font-size: 16px;
	font-weight: 600;
}

.arystan-nav-overlay .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

.arystan-nav-overlay .wp-block-navigation__container > .wp-block-navigation-item {
	flex-wrap: wrap;
	width: 100%;
	border-bottom: 1px solid rgba(51, 51, 51, 0.12);
}

.arystan-nav-overlay .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.arystan-nav-overlay .wp-block-navigation-item__content {
	flex: 1;
	padding: 16px 0;
	color: #333;
}

/* «Наши бренды» has no page: the label opens the list (assets/js/navigation.js). */
.arystan-nav-overlay .has-child > a.wp-block-navigation-item__content:not([href]) {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.arystan-nav-overlay .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.arystan-nav-overlay .has-child > .wp-block-navigation__submenu-container {
	position: static;
	flex-basis: 100%;
	padding: 0 0 10px 12px;
	border: 0;
	box-shadow: none;
	font-size: 14px;
	font-weight: 400;
}

.arystan-nav-overlay .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 6px 0;
}

/* «Каталог»: captions «Категории» / «Бренды», the brands as chips (arystan_nav_catalog_brands()). */
.arystan-nav-overlay .arystan-nav-catalog__head {
	padding: 10px 0 2px;
	font-size: 11px;
}

.arystan-nav-overlay .arystan-nav-catalog__brands {
	width: 100%;
	margin-top: 6px;
}

/* Category tiles in the drawer: smaller padding, a gap between them (the tile itself — see the desktop rules). */
.arystan-nav-overlay .arystan-nav-catalog > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	margin-bottom: 6px;
	padding: 9px 35px 9px 11px;
}

.arystan-nav-overlay .arystan-nav-catalog__brand-list {
	gap: 6px;
	padding: 6px 0 4px;
}

/* Over the overlay's own link rules (padding 6px 0, flex: 1). */
.arystan-nav-overlay .arystan-nav-catalog .arystan-nav-catalog__brand-list > .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex: none;
	padding: 5px 12px;
}

.arystan-nav-overlay .arystan-nav-catalog .arystan-nav-catalog__brand-list .wp-block-navigation-item__label {
	font-size: 13px;
}

/* Core opens every submenu inside an open overlay; assets/js/navigation.js collapses «Каталог». */
.arystan-nav-overlay.is-collapsible .has-child:not(.is-arystan-open) > .wp-block-navigation__submenu-container {
	display: none;
}

.arystan-nav-overlay .wp-block-navigation__submenu-icon svg {
	transition: transform 0.2s ease;
}

.arystan-nav-overlay .is-arystan-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Core turns the arrow by aria-expanded, which it keeps "true" for every submenu in an open overlay —
   a collapsed submenu keeps its arrow pointing down. */
.arystan-nav-overlay.is-collapsible .has-child:not(.is-arystan-open) > .wp-block-navigation-submenu__toggle svg {
	transform: none;
}

.arystan-nav-overlay .wp-block-navigation-item__description {
	display: none;
}

.arystan-nav-overlay .wp-block-navigation-submenu__toggle {
	align-self: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 9px;
	color: rgba(51, 51, 51, 0.4);
}

.arystan-nav-overlay .wp-block-navigation-submenu__toggle svg {
	width: 14px;
	height: 14px;
	margin: 0;
}

/* «Есть вопросы?»: heading, text and buttons centred (owner, 2026-10-18; the buttons are centred by the
   block layout in parts/navigation-overlay.html). */
.arystan-overlay__contacts {
	margin-top: 50px;
	text-align: center;
}

.arystan-overlay__contacts .wp-block-buttons {
	gap: 16px;
}

/* Both buttons one width, centred under the text. */
.arystan-overlay__contacts .wp-block-button {
	width: 100%;
	max-width: 260px;
}

.arystan-overlay__contacts .wp-element-button {
	box-sizing: border-box;
	justify-content: center;
	width: 100%;
	padding: 13px 20px;
	font-size: 15px;
	white-space: nowrap;
}

/* ---------- Pattern: help CTA card (patterns/help-cta.php) ---------- */

.arystan-help > * {
	margin-block: 0;
}

.arystan-help > * + * {
	margin-block-start: 12px;
}

.arystan-help__title {
	line-height: 26px;
}

.arystan-help__phone {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.arystan-help__phone a {
	color: #333;
	text-decoration: none;
}

.arystan-help .is-style-whatsapp .wp-element-button {
	padding: 10px 20px;
	box-shadow: var(--wp--preset--shadow--button);
}

/* ---------- Pattern: advantages and branches grids ---------- */

.arystan-advantages.arystan-advantages {
	gap: 10px;
}

.arystan-advantages .is-style-card-soft > .wp-block-heading {
	margin-block-start: 15px;
}

.arystan-branches.arystan-branches {
	gap: 15px;
}

.arystan-branch {
	padding: 15px;
	border-radius: var(--wp--custom--radius--md);
}

.arystan-branch > * {
	margin-block: 0;
}

.arystan-branch > * + * {
	margin-block-start: 10px;
}

.arystan-branch .wp-block-heading {
	font-size: 18px;
}

.arystan-branch__note {
	color: #999;
	font-size: var(--wp--preset--font-size--small);
}

/* «Открыть в 2ГИС» (owner, 2026-10-20): at the bottom of the card, so the links of a row line up. */
.arystan-branch {
	display: flex;
	flex-direction: column;
}

.arystan-branch > .arystan-branch__map {
	margin-block-start: auto;
	padding-top: 12px;
}

/* The same link in the contacts page cards. Plain inline text with the pin as its first «letter»: in a
   narrow card (two per row on phones) the text wraps, and the pin stays right next to «Открыть». */
:is(.arystan-branch__map, .arystan-contact__map) a {
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

:is(.arystan-branch__map, .arystan-contact__map) a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Phones, two branch cards per row (130px of text at 375): one line down to 360px — 13px, and the link
   may use 8px of the card's side padding. Narrower still, «в 2ГИС» wraps together (&nbsp; in the content). */
@media (max-width: 599.98px) {
	.arystan-branch > .arystan-branch__map {
		margin-inline: -8px;
	}

	.arystan-branch__map a {
		font-size: 13px;
	}

	.arystan-branch__map a::before {
		width: 14px;
		height: 14px;
		margin-right: 4px;
		vertical-align: -2px;
	}
}

:is(.arystan-branch__map, .arystan-contact__map) a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--primary-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
	.arystan-advantages.arystan-advantages,
	.arystan-branches.arystan-branches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Pattern: dark CTA (patterns/dark-cta.php) ---------- */

.arystan-dark-cta {
	padding-block: 77px;
}

@media (max-width: 778px) {
	.arystan-dark-cta {
		padding-block: var(--wp--preset--spacing--50);
	}
}

.arystan-dark-cta > * {
	margin-block: 0;
}

.arystan-dark-cta > * + * {
	margin-block-start: 10px;
}

.arystan-dark-cta__phone {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
}

.arystan-dark-cta a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Sidebars ---------- */

.arystan-sidebar > * + * {
	margin-block-start: 40px;
}

.arystan-sidebar__title {
	margin-block-end: 15px;
	line-height: 26px;
}

.arystan-sidebar__posts {
	padding: 0;
	list-style: none;
}

.arystan-sidebar__posts li + li {
	margin-top: 10px;
}

.arystan-sidebar__posts a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.arystan-sidebar__posts a:hover {
	color: var(--wp--preset--color--primary);
}

.arystan-sidebar__posts .wp-block-latest-posts__post-date {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Footer ---------- */

.arystan-footer__bar {
	min-height: 77px;
	gap: 10px 30px;
	padding-right: 25px;
}

.arystan-footer__bar p {
	margin: 0;
	line-height: 18px;
}

.arystan-footer__brand {
	gap: 15px;
}

.arystan-footer__logo {
	flex: none;
	margin: 0;
}

.arystan-footer a {
	color: inherit;
	text-decoration: none;
}

.arystan-footer a:hover {
	text-decoration: underline;
}

@media (max-width: 989.98px) {
	.arystan-footer__bar,
	.arystan-footer__brand {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.arystan-footer__bar {
		padding: 15px 0;
		gap: 5px;
	}

	.arystan-footer__brand {
		gap: 10px;
	}
}

/* ---------- Page title band (title + breadcrumbs, The7 «page-title») ---------- */

.arystan-page-title {
	padding-top: 50px;
}

.arystan-page-title > * {
	margin-block: 0;
}

.arystan-page-title h1 {
	color: #333;
	font-size: 30px;
	font-weight: 800;
	line-height: 40px;
}

.arystan-page-title .wp-block-woocommerce-breadcrumbs {
	margin-top: 8px;
}

.arystan-page-title .woocommerce-breadcrumb {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	line-height: 23px;
}

.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

.arystan-breadcrumbs__sep {
	margin-inline: 8px;
	opacity: 0.5;
}

@media (max-width: 778px) {
	.arystan-page-title h1 {
		font-size: 24px;
		line-height: 34px;
	}

	.arystan-page-title .wp-block-woocommerce-breadcrumbs {
		display: none;
	}
}

/* ---------- Main area and right sidebar ---------- */

.arystan-main {
	padding-block: 70px;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 23px;
}

/* The7 kept 70px free on the right of the 1300px content box (desktop header widths only). */
@media (min-width: 1070px) {
	.arystan-main > *,
	.arystan-home__section > *,
	.arystan-hero > .wp-block-cover__inner-container > *,
	.arystan-dark-cta > * {
		box-sizing: border-box;
		padding-right: 70px;
	}
}

/* Full-width page sections (template «Страница без заголовка») touch each other. */
.is-flush > .wp-block-post-content > * {
	margin-block-start: 0;
}

.arystan-page-title + .arystan-main,
.arystan-main__content > :first-child {
	margin-block-start: 0;
}

/* Sections of the content column set their own spacing (The7 values). */
.arystan-with-sidebar__content > * {
	margin-block: 0;
}

.arystan-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 256px;
	column-gap: 85px;
	align-items: start;
}

.arystan-with-sidebar > * {
	margin-block: 0;
}

.arystan-with-sidebar__aside {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body);
	line-height: 20px;
}

/* Help card bleeds into the sidebar gutter, like the The7 widget. */
.arystan-with-sidebar__aside .arystan-help {
	margin-inline: -23px;
}

@media (max-width: 990px) {
	.arystan-with-sidebar {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 50px;
	}

	/* Under the content the card is as wide as the page: everything centred, as the phone and button already were. */
	.arystan-with-sidebar__aside .arystan-help {
		margin-inline: 0;
		text-align: center;
	}
}

/* ---------- Form fields (The7: 48px, #fdfdfd, light border) ---------- */

.arystan-main select,
.arystan-main input[type="text"],
.arystan-main input[type="email"],
.arystan-main input[type="tel"],
.arystan-main input[type="password"],
.arystan-main input[type="number"],
.arystan-main input[type="search"],
.arystan-main textarea,
.arystan-search .wp-block-search__input {
	box-sizing: border-box;
	min-height: 48px;
	padding: 5px 15px;
	border: 1px solid rgba(51, 51, 51, 0.12);
	border-radius: var(--wp--custom--radius--sm);
	background-color: #fdfdfd;
	color: #8b8d94;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
}

.arystan-main textarea {
	padding-block: 13px;
}

.arystan-main select {
	padding-right: 30px;
	color: var(--wp--preset--color--secondary);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2385868c' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}

.arystan-main :is(select, input, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	outline: 0;
}

/* Sidebar search: input with a magnifier inside. */
.arystan-search .wp-block-search__inside-wrapper {
	position: relative;
	padding: 0;
	border: 0;
}

.arystan-search .wp-block-search__input {
	width: 100%;
	padding-right: 44px;
}

.arystan-search .wp-block-search__button {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	margin: 0;
	padding: 0 14px;
	border: 0;
	background: none;
	box-shadow: none;
	color: #8b8d94;
}

.arystan-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--primary);
	box-shadow: none;
}

.arystan-search .wp-block-search__button svg {
	width: 18px;
	height: 18px;
}

/* iOS (Safari, and Chrome on the same engine) zooms the page in when a text field under 16px gets focus and
   never zooms back out: after filling in a form (home hero, contacts, checkout) the page stays enlarged and
   pans sideways. Text fields are 16px there only — Android and desktop keep the design sizes. The feature
   query is true on iOS/iPadOS WebKit only. !important: the field sizes are set by many longer selectors
   (CF7, WooCommerce checkout, filters, stepper) and this has to win over each of them. */
@supports (-webkit-touch-callout: none) {
	:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="file"], [type="image"], [type="range"], [type="color"]), select, textarea) {
		font-size: 16px !important;
	}
}

/* ---------- Catalog: description, toolbar, grid, pagination ---------- */

.arystan-term-description {
	margin-bottom: 50px;
}

.arystan-catalog-toolbar {
	gap: 10px 20px;
	margin-block: 10px 30px;
}

/* «Фильтр» on the left, sorting on the right — one row on phones too. */
.arystan-catalog-toolbar.arystan-catalog-toolbar {
	flex-wrap: nowrap;
}

.arystan-catalog-toolbar .arystan-filters {
	flex: none;
}

.arystan-catalog-toolbar .wp-block-woocommerce-catalog-sorting {
	flex: 0 1 270px;
	min-width: 0;
}

.arystan-catalog-toolbar .woocommerce-ordering {
	margin: 0;
}

.arystan-catalog-toolbar .woocommerce-ordering select {
	width: 100%;
}

/* As many 240px+ columns as fit: 3 on desktop, 2 on tablets (the sidebar takes room up to 990px), 1 on phones. */
.arystan-products .wc-block-product-template.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 20px;
	margin: 0;
}

.arystan-products .wc-block-product-template > li {
	width: auto;
	margin: 0;
}

/* Compact product card — catalog (3 columns), home «Хиты продаж» and category carousels alike. */
.arystan-product-card.arystan-product-card {
	padding: 20px;
}

.arystan-product-card .arystan-product-card__title {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
}

.arystan-product-card .arystan-product-card__title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.arystan-product-card .arystan-product-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

.arystan-product-card .arystan-product-card__price.arystan-product-card__price {
	margin-top: 8px;
	font-size: 18px;
	line-height: 24px;
}

/* Stars on the left, under the price — also in the home page cards, whose blocks still say «center». */
.arystan-product-card .arystan-product-card__rating.arystan-product-card__rating {
	margin-top: 8px;
	text-align: left;
}

.arystan-product-card .arystan-product-card__rating :is(.wc-block-components-product-rating__stars, .star-rating) {
	font-size: 13px;
}

.arystan-product-card .arystan-product-card__specs.arystan-product-card__specs {
	padding-top: 14px;
	font-size: 13px;
	line-height: 20px;
}

/* Product card. */
.arystan-product-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.2s ease;
}

.arystan-product-card:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.arystan-product-card > * {
	margin-block: 0;
}

.arystan-product-card__image img {
	width: 100%;
}

.arystan-product-card__title {
	margin-top: 15px;
	font-size: 16px;
	font-weight: 800;
	line-height: 26px;
}

.arystan-product-card__price,
.arystan-product__price,
.arystan-mini-product__price {
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	line-height: 26px;
}

/* One weight for every price, old (del) and new (ins) included — WooCommerce sets its own on ins/del. */
:is(.arystan-product-card__price, .arystan-product__price, .arystan-mini-product__price, .arystan-product__cart .woocommerce-variation-price) :is(.price, .amount, ins, del, bdi) {
	font-weight: 700;
}

.arystan-product-card__price {
	margin-top: 5px;
}

.arystan-product-card__rating {
	margin-top: 10px;
}

.arystan-product-card__specs {
	padding-top: 25px;
}

/* Short description: «Емкость (A*ч): 75» lines (wp arystan migrate-content). */
.arystan-product-card__specs,
.arystan-product__specs {
	font-size: var(--wp--preset--font-size--body);
	line-height: 24px;
}

.arystan-product-card__specs p,
.arystan-product__specs p {
	margin: 0;
}

/* Rating stars: blue, as in The7. */
.wc-block-components-product-rating__stars,
.star-rating {
	color: var(--wp--preset--color--primary);
}

.wc-block-components-product-rating__stars::before,
.star-rating::before {
	color: rgba(7, 7, 10, 0.2);
	opacity: 1;
}

/* Numbered pagination (catalog). */
.arystan-pagination {
	gap: 0;
	margin-top: 50px;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 23px;
}

.arystan-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	position: relative;
	margin: 0 6px;
	padding: 1px 8px;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.arystan-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	color: var(--wp--preset--color--primary);
}

.arystan-pagination .page-numbers.current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
}

.arystan-pagination .wp-block-query-pagination-numbers {
	display: flex;
}

/* ---------- Catalog filters (WooCommerce Product Filters) ---------- */

.arystan-filters .wc-block-product-filters {
	--wc-product-filter-block-spacing: 22px;
}

/* Group titles: the rows below carry 8px of their own padding, so the gap reads as 12px. */
.arystan-filter__title {
	margin: 0 0 4px;
	color: var(--wp--preset--color--heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
}

/* Available values: dark text and a white box with a visible border; selected — blue box with a white tick.
   Unavailable ones (below) stay faint, so the two read apart at a glance. */
.arystan-filters .wc-block-product-filters {
	--wc-product-filter-checkbox-list-option-element: var(--wp--preset--color--base);
	--wc-product-filter-checkbox-list-option-element-border: #a9adb4;
	--wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--base);
}

/* Finger-sized rows (owner, 2026-10-19: on iPhone the 14px boxes and text were hard to hit): 20px box,
   16px text, the whole ~40px row is the label. WooCommerce sizes the box at 1em of the label and the
   text at .875em — both set explicitly. A two-line value keeps its box at the first line. */
.arystan-filters .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 0;
	color: var(--wp--preset--color--heading);
	font-size: 20px;
	line-height: 22px;
}

.arystan-filters .wc-block-product-filter-checkbox-list__input-wrapper {
	flex: none;
	margin-top: 1px;
}

.arystan-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	border-radius: 4px;
}

.arystan-filters .wc-block-product-filter-checkbox-list__text-wrapper {
	font-size: 16px;
	line-height: 22px;
}

.arystan-filters .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

.arystan-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
}

.arystan-filters .wc-block-product-filter-checkbox-list__label:not(:has(input:disabled)):hover {
	color: var(--wp--preset--color--primary);
}

.arystan-filters .wc-block-product-filter-checkbox-list__label:not(:has(input:disabled)):hover input {
	border-color: var(--wp--preset--color--primary);
}

/* Values with no products for the current selection: shown, but grey and not clickable
   (arystan_filter_disable_empty() in functions.php). Counts are only needed for that — hidden. */
.arystan-filters .wc-block-product-filter-checkbox-list__count {
	display: none;
}

.arystan-filters .wc-block-product-filter-checkbox-list__item:has(input:disabled),
.arystan-filters .wc-block-product-filter-checkbox-list__item.is-disabled {
	opacity: 0.45;
}

.arystan-filters .wc-block-product-filter-checkbox-list__item:has(input:disabled) :is(label, input) {
	cursor: not-allowed;
}

.arystan-filters .wc-block-product-filter-checkbox-list__item:has(input:disabled) .wc-block-product-filter-checkbox-list__label,
.arystan-filters .wc-block-product-filter-checkbox-list__item.is-disabled .wc-block-product-filter-checkbox-list__label {
	color: var(--wp--preset--color--secondary);
}

.arystan-filters .wc-block-product-filter-checkbox-list__show-more {
	padding: 6px 0;
	color: var(--wp--preset--color--primary);
	font-size: 15px;
}

/* Active filters in the drawer: compact grey chips and «Сбросить фильтры» as a small link on the same
   line (owner, 2026-10-18: WooCommerce's bordered chips and the big button pushed the list down hard).
   A new chip fades in; the groups below slide to their new place (assets/js/filters-apply.js). */
.arystan-filters .wp-block-woocommerce-product-filter-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.arystan-filters .wp-block-woocommerce-product-filter-active[hidden] {
	display: none;
}

/* Chips only as wide as they need, so the link follows them on the same line while it fits. */
.arystan-filters .wp-block-woocommerce-product-filter-active > *,
.arystan-filters .wp-block-woocommerce-product-filter-clear-button .wp-block-buttons {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.arystan-filters .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__items {
	width: auto; /* WooCommerce: 100% in the horizontal layout. */
	gap: 6px;
}

.arystan-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
	gap: 2px;
	padding: 4px 4px 4px 12px;
	border: 0;
	border-radius: 999px;
	background-color: #ffd60a; /* Bright yellow (owner, 2026-10-19): the chosen values stand out; dark text — contrast 14:1. */
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	animation: arystan-chip-in 0.25s ease both;
}

.arystan-filters .wc-block-product-filter-removable-chips__remove {
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #4d4100;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.arystan-filters .wc-block-product-filter-removable-chips__remove:hover,
.arystan-filters .wc-block-product-filter-removable-chips__remove:focus-visible {
	background-color: rgba(0, 0, 0, 0.12);
	color: var(--wp--preset--color--heading);
}

.arystan-filters .wc-block-product-filter-removable-chips__remove-icon {
	width: 16px;
	height: 16px;
}

@keyframes arystan-chip-in {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
}

/* Five classes: the core outline style is `.wp-block-button.is-style-outline > .wp-block-button__link:not(…)`. */
.arystan-filters .wp-block-button.arystan-filter__clear.is-style-outline > .wp-element-button {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

.arystan-filters .wp-block-button.arystan-filter__clear.is-style-outline > .wp-element-button:hover {
	background: none;
	color: var(--wp--preset--color--primary-hover, var(--wp--preset--color--primary));
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.arystan-filters .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
		animation: none;
	}
}

/* «Фильтр» button left of the sorting; the filters open in a drawer from the left
   (overlayMode "always"; label, counter and drawer title — arystan_filters_toggle()). */
.arystan-filters .wc-block-product-filters__open-overlay {
	box-sizing: border-box;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid rgba(51, 51, 51, 0.12);
	border-radius: var(--wp--custom--radius--sm);
	background-color: #fdfdfd;
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.arystan-filters .wc-block-product-filters__open-overlay:hover,
.arystan-filters .wc-block-product-filters__open-overlay.has-active-filters {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.arystan-filters .wc-block-product-filters__open-overlay span {
	padding: 0;
}

.arystan-filters-toggle__count {
	display: none;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.has-active-filters .arystan-filters-toggle__count {
	display: inline-block;
}

.arystan-filters .wc-block-product-filters__overlay-dialog {
	width: min(100%, 380px);
	box-shadow: var(--wp--preset--shadow--soft);
}

.arystan-filters .wc-block-product-filters__overlay-header {
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 20px var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.arystan-filters__drawer-title {
	margin: 0;
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 800;
	line-height: 22px;
	text-transform: uppercase;
}

.arystan-filters .wc-block-product-filters__close-overlay {
	cursor: pointer;
}

.arystan-filters .wc-block-product-filters__overlay-content {
	padding: 20px var(--wp--preset--spacing--40);
	overflow-y: auto;
}

.arystan-filters .wc-block-product-filters__overlay-footer {
	padding: 15px var(--wp--preset--spacing--40);
}

.arystan-filters .wc-block-product-filters__apply {
	min-height: 48px;
	border-radius: var(--wp--custom--radius--sm);
}

@media (max-width: 990px) {
	/* The7 hid the catalog sidebar on phones and tablets («mobile-hide-sidebar»). */
	.arystan-with-sidebar__aside.is-mobile-hidden {
		display: none;
	}
}

/* ---------- Sidebar: recently viewed products ---------- */

/* Filled in the browser (arystan-core view.js); hidden while empty. */
.wp-block-arystan-recently-viewed[hidden] {
	display: none;
}

.arystan-recently-viewed__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.arystan-recently-viewed__item {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.arystan-recently-viewed__item + .arystan-recently-viewed__item {
	margin-top: 15px;
}

.arystan-recently-viewed__image {
	flex: none;
}

.arystan-recently-viewed__image img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.arystan-recently-viewed__text {
	display: flex;
	flex-direction: column;
}

.arystan-recently-viewed__name {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.arystan-recently-viewed__name:hover {
	color: var(--wp--preset--color--primary);
}

.arystan-recently-viewed__placeholder {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Single product ---------- */

.arystan-product {
	display: grid;
	grid-template-columns: 50% minmax(0, 1fr);
	column-gap: 60px;
	align-items: start;
	margin-bottom: 30px;
}

.arystan-product > *,
.arystan-product__summary > * {
	margin-block: 0;
}

.arystan-product__gallery .woocommerce-product-gallery {
	position: relative;
	margin: 0;
}

.arystan-product__gallery .woocommerce-product-gallery__trigger {
	display: none;
}

.arystan-product__rating.arystan-product__rating {
	margin: -5px 0 20px;
}

.arystan-product__rating :is(.wc-block-components-product-rating__link, .woocommerce-review-link) {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body-large);
}

.arystan-product__price {
	position: relative;
	margin-bottom: 35px;
	padding-bottom: 15px;
}

.arystan-product__price::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 3px;
	background-color: var(--wp--preset--color--primary);
}

.arystan-product__price .wc-block-components-product-price {
	font-size: inherit;
}

.arystan-product__specs {
	margin-bottom: 20px;
	padding-top: 10px;
}

/* Variation form card «Хотите получить скидку?». The block lays the form out as a 3-column grid. */
.arystan-product__cart.arystan-product__cart form.variations_form {
	display: block;
}

.arystan-product__cart form.cart {
	margin: 0 0 30px;
	padding: 28px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Doubled class: WooCommerce styles the classic form with long selectors. */
.arystan-product__cart.arystan-product__cart table.variations {
	width: 100%;
	table-layout: fixed;
	margin: 0 0 10px;
	border: 0;
	border-collapse: collapse;
}

.arystan-product__cart.arystan-product__cart table.variations :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	line-height: 20px;
	text-align: left;
}

.arystan-product__cart.arystan-product__cart table.variations label {
	display: block;
	margin: 0 0 7px;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 20px;
}

/* Triple class: WooCommerce sets min-width 75% and margin-right 1em with a 4-class selector. */
.arystan-product__cart.arystan-product__cart.arystan-product__cart table.variations :is(tbody, tr) {
	display: block;
}

.arystan-product__cart.arystan-product__cart.arystan-product__cart table.variations select {
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0 0 10px;
	padding: 5px 30px 5px 15px;
	font-size: 14px;
}

/* «В корзину» before a variation is chosen (assets/js/add-to-cart-drawer.js; instead of WooCommerce's
   browser alert): the empty select gets a bright yellow border, under it a bright yellow notice with black
   text and a warning icon (owner, 2026-10-19; the yellow of the active filter chips). The notice opens and
   closes smoothly — its height (grid row 0fr → 1fr) and opacity — so the button below slides down instead
   of jumping. */
.arystan-product__cart.arystan-product__cart.arystan-product__cart table.variations select.arystan-is-invalid {
	border-color: #ffd60a;
	box-shadow: 0 0 0 2px #ffd60a;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.arystan-variation-notice {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, opacity 0.3s ease;
}

/* 18px under the select and above the stepper — about the space between the stepper and «В корзину»
   (19px): up over the space below the select (its margin 10, the hidden «Очистить» 13, the table's
   margin 15 — 38px). Animated with the height, so nothing jumps. */
.arystan-variation-notice.is-shown {
	grid-template-rows: 1fr;
	margin-top: -20px;
	opacity: 1;
}

.arystan-variation-notice__inner {
	min-height: 0;
	overflow: hidden;
}

.arystan-variation-notice__box {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 11px 14px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: #ffd60a;
	color: #000;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	transform: translateY(-6px);
	transition: transform 0.35s ease;
}

.arystan-variation-notice.is-shown .arystan-variation-notice__box {
	transform: none;
}

.arystan-variation-notice__box::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A repeated click while the notice is shown: a soft pulse instead of opening again. */
.arystan-variation-notice__box.is-pulsing {
	animation: arystan-variation-pulse 0.45s ease;
}

@keyframes arystan-variation-pulse {
	40% {
		transform: scale(1.03);
		box-shadow: 0 4px 14px rgba(255, 214, 10, 0.55);
	}
}

@media (prefers-reduced-motion: reduce) {
	.arystan-variation-notice,
	.arystan-variation-notice__box {
		transition: none;
	}

	.arystan-variation-notice__box.is-pulsing {
		animation: none;
	}
}

.arystan-product__cart.arystan-product__cart .reset_variations {
	display: block;
	margin: -5px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px;
}

.arystan-product__cart .woocommerce-variation-price {
	margin-bottom: 15px;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
}

.arystan-product__cart :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Stepper on the left, the button takes the rest of the row — content spans the card evenly. */
.arystan-product__cart .single_add_to_cart_button {
	flex: 1 1 160px;
	min-height: 48px;
	padding: 13px 24px;
	font-size: 20px;
	line-height: 22px;
}

/* While the item is being added (assets/js/add-to-cart-drawer.js): the label gives way to a white spinner,
   the button keeps its size; then the cart drawer opens with the item. Over WooCommerce's `.loading`
   (icon font after the label, opacity .25). */
.arystan-product__cart.arystan-product__cart .single_add_to_cart_button.loading {
	position: relative;
	color: transparent;
	opacity: 1;
	pointer-events: none;
}

.arystan-product__cart.arystan-product__cart .single_add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--wp--preset--color--base);
	border-radius: 50%;
	font-family: inherit;
	animation: arystan-spin 0.7s linear infinite;
}

.arystan-product__cart.arystan-product__cart .single_add_to_cart_button.disabled {
	opacity: 1;
	cursor: not-allowed;
}

/* Quantity stepper «− 1 +»: one 48px control with square, easy-to-hit buttons. */
.arystan-product__cart.arystan-product__cart.arystan-product__cart .quantity {
	display: inline-flex;
	flex: none;
	align-items: stretch;
	box-sizing: border-box;
	width: auto;
	height: 48px;
	min-height: 48px;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(51, 51, 51, 0.15);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	box-shadow: none;
}

/* Beats WooCommerce's «div.wc-block-add-to-cart-form--stepper … input[type=number]». */
div.arystan-product__cart.wc-block-add-to-cart-form .wc-block-components-quantity-selector input.qty[type="number"] {
	box-sizing: border-box;
	flex: none;
	width: 48px;
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.arystan-product__cart .quantity .qty::-webkit-inner-spin-button,
.arystan-product__cart .quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.arystan-product__cart.arystan-product__cart .quantity button {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 46px;
	min-width: 46px;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--surface-alt);
	box-shadow: none;
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.arystan-product__cart.arystan-product__cart .quantity button:hover:not(:disabled) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.arystan-product__cart.arystan-product__cart .quantity button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.arystan-product__cart.arystan-product__cart .quantity button:disabled {
	color: var(--wp--preset--color--muted);
	cursor: default;
}

/* Categories and SKU. */
.arystan-product__meta {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px;
}

.arystan-product__meta > * {
	margin: 0;
}

.arystan-product__meta > * + * {
	margin-top: 5px;
}

.arystan-product__meta a {
	color: inherit;
	text-decoration: none;
}

.arystan-product__meta a:hover {
	color: var(--wp--preset--color--primary);
}

.arystan-product__meta .wc-block-components-product-sku {
	font-size: inherit;
	text-transform: none;
}

.arystan-product__meta .wc-block-components-product-sku strong {
	font-weight: 400;
}

@media (max-width: 778px) {
	.arystan-product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}
}

/* Tabs «Описание / Отзывы». Five classes: woocommerce.css styles them with «.woocommerce div.product …». */
.arystan-product-tabs.arystan-product-tabs {
	margin: 0;
	padding-top: 30px;
}

.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	list-style: none;
}

.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs::before,
.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs li::before,
.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs li::after {
	display: none;
}

.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs li {
	position: relative;
	margin: 0;
	padding: 10px 0 12px;
	border: 0;
	border-radius: 0; /* WooCommerce rounds the tab's top corners — the line followed them. */
	background: none;
}

/* Active tab: a straight blue line under the label (owner, 2026-10-19; The7 had it above).
   Side by side on phones too (owner, 2026-10-19; The7 stacked them under 778px without the line). */
.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs li.active {
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--primary);
}

.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs li a {
	padding: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 500; /* Owner, 2026-10-19: a little bolder than the text (400). */
	line-height: 23px;
	text-decoration: none;
}

.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.arystan-main .arystan-product-tabs .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	color: var(--wp--preset--color--heading);
}

.arystan-product-tabs .woocommerce-Tabs-panel {
	margin: 0;
	padding: 0;
}

.arystan-product-tabs .woocommerce-Tabs-panel > h2:first-child {
	margin-top: 0;
}

/* «Добавить отзыв»: gray card, labels above the fields, Имя + Email in one row. */
.arystan-product-tabs #review_form_wrapper {
	margin-top: 40px;
}

.arystan-product-tabs #review_form #respond {
	padding: 30px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-gray);
}

.arystan-product-tabs #review_form .comment-reply-title {
	display: block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--heading);
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;
}

.arystan-product-tabs #review_form #commentform {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.arystan-product-tabs #review_form #commentform > * {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}

.arystan-product-tabs #review_form #commentform > :is(.comment-form-author, .comment-form-email) {
	grid-column: auto;
}

.arystan-product-tabs #review_form .comment-notes {
	margin-top: -12px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 20px;
}

.arystan-product-tabs #review_form :is(.comment-form-rating, .comment-form-comment, .comment-form-author, .comment-form-email) > label {
	display: block;
	margin: 0 0 6px;
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.arystan-product-tabs #review_form .required {
	color: var(--wp--preset--color--danger);
}

.arystan-product-tabs #review_form :is(input[type="text"], input[type="email"], textarea) {
	display: block;
	width: 100%;
	margin: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.arystan-product-tabs #review_form textarea {
	height: 130px;
	resize: vertical;
}

.arystan-product-tabs #review_form :is(input, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	outline: 0;
}

.arystan-product-tabs #review_form .stars {
	margin: 0;
	font-size: 20px;
	line-height: 1;
}

.arystan-product-tabs #review_form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--wp--preset--color--secondary);
	font-size: 13px;
	line-height: 20px;
}

.arystan-product-tabs #review_form .comment-form-cookies-consent input {
	flex: none;
	margin: 3px 0 0;
}

.arystan-product-tabs #review_form .form-submit .submit {
	padding: 14px 28px;
	font-size: 16px;
	line-height: 20px;
}

@media (max-width: 599.98px) {
	.arystan-product-tabs #review_form #respond {
		padding: 20px;
	}

	.arystan-product-tabs #review_form #commentform > :is(.comment-form-author, .comment-form-email) {
		grid-column: 1 / -1;
	}
}

/* Advantages cards under the description (functions.php: arystan_description_tab_advantages). */
.arystan-advantages h4 {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.arystan-product-advantages {
	margin-top: 30px;
}

.arystan-product-advantages .arystan-advantages .is-style-card-soft {
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-gray);
}

/* ---------- «Похожие» (products) and «Похожие записи» (posts) ---------- */

.arystan-related {
	margin-top: 60px;
	padding-top: 50px;
}

.arystan-related__title {
	margin: 0 0 30px;
	line-height: 32px;
}

.arystan-related .wc-block-product-template.wc-block-product-template,
.arystan-related-posts__list.arystan-related-posts__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 50px;
	margin: 0;
}

.arystan-related .wc-block-product-template > li {
	width: auto;
	margin: 0;
}

.arystan-mini-product,
.arystan-mini-post {
	gap: 20px;
	padding-bottom: 25px;
}

.arystan-mini-product > *,
.arystan-mini-post > *,
.arystan-mini-product__text > *,
.arystan-mini-post__text > * {
	margin: 0;
}

/* Compact list: lighter title, smaller price and stars, the country as a small tag instead of the corner. */
.arystan-mini-product {
	gap: 18px;
	padding-bottom: 22px;
}

/* Empty store-notices container WooCommerce puts in every card — it took a flex gap. */
.arystan-mini-product > .wc-block-components-notices {
	display: none;
}

.arystan-mini-product__image.arystan-mini-product__image {
	flex: 0 0 90px;
	width: 90px;
}

.arystan-mini-product__image img {
	width: 90px;
	height: 90px;
	object-fit: contain;
}

.arystan-mini-product__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
}

.arystan-mini-product__title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.arystan-mini-product__title a:hover {
	color: var(--wp--preset--color--primary);
}

.arystan-mini-product__price,
.arystan-mini-product__rating {
	margin-top: 6px;
}

.arystan-mini-product__price.arystan-mini-product__price {
	font-size: 16px;
	line-height: 22px;
}

.arystan-mini-product__rating.arystan-mini-product__rating {
	margin-top: 8px;
	line-height: 1;
}

/* The stars clip to their own box (partial ratings): leave room for the lower points of the glyph. */
.arystan-mini-product__rating :is(.wc-block-components-product-rating__container, .wc-block-components-product-rating__stars, .star-rating) {
	height: 1.3em;
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
}

/* Country tag (arystan-core badges.css) — tighter in the 90px photo. */
.arystan-mini-product__image .arystan-badge--origin {
	top: 0;
	right: 0;
	padding: 0 5px;
	border-radius: 3px;
	font-size: 10px;
}

.arystan-mini-post__image {
	flex: none;
}

.arystan-mini-post__image img {
	object-fit: cover;
}

.arystan-mini-post__title {
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 400;
	line-height: 23px;
}

.arystan-mini-post__date {
	margin-top: 5px;
	color: rgba(36, 39, 43, 0.5);
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px;
}

@media (max-width: 778px) {
	.arystan-related .wc-block-product-template.wc-block-product-template,
	.arystan-related-posts__list.arystan-related-posts__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Blog: post cards and «Загрузить ещё» ---------- */

.arystan-posts.arystan-posts {
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
	gap: 25px 40px;
}

.arystan-post-card {
	height: 100%;
}

.arystan-post-card > *,
.arystan-post-card__body > * {
	margin: 0;
}

.arystan-post-card__image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.arystan-post-card__image img {
	display: block;
	transition: transform 0.3s ease;
}

.arystan-post-card__image:hover img {
	transform: scale(1.03);
}

.arystan-post-card__body {
	position: relative;
	margin-top: -12px;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

.arystan-post-card__title {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 23px;
}

.arystan-post-card__meta {
	gap: 0;
	padding-bottom: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px;
}

.arystan-post-card__meta > * {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: inherit;
}

.arystan-post-card__meta a {
	color: inherit;
	text-decoration: none;
}

.arystan-post-card__meta > * + *::before {
	content: "•";
	margin-inline: 5px;
}

.arystan-post-card__excerpt p {
	margin: 0;
}

.arystan-load-more {
	margin-top: 50px;
}

.arystan-load-more .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid rgba(51, 51, 51, 0.12);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--button);
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.arystan-load-more .wp-block-query-pagination-next:hover {
	box-shadow: var(--wp--preset--shadow--button-hover);
}

/* Loading (assets/js/load-more.js): the button hides — keeping its place, so the page does not jump —
   and the Contact Form 7 spinner (dark circle, white dot going round) shows in its middle. */
.arystan-load-more {
	position: relative;
}

.arystan-load-more.is-loading .wp-block-query-pagination-next {
	visibility: hidden;
	pointer-events: none;
}

.arystan-load-more.is-loading::before,
.arystan-load-more.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
}

.arystan-load-more.is-loading::before {
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	background-color: #23282d;
	opacity: 0.75;
}

.arystan-load-more.is-loading::after {
	width: 6px;
	height: 6px;
	margin: -8px 0 0 -8px;
	background-color: #fbfbfc;
	transform-origin: 8px 8px;
	animation: arystan-spin 1s linear infinite;
}

@keyframes arystan-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.arystan-load-more.is-loading::after {
		animation-duration: 4s;
	}
}

/* Catalog filters applying (assets/js/filters-apply.js, html.arystan-filtering): the old list is dimmed
   and can't be clicked, a white card with a spinner sits in the middle of the screen until the new list
   is in. Owner, 2026-10-18: the drawer closed and the old list stayed for 2–3 s as if nothing happened. */
.wp-block-woocommerce-product-collection {
	transition: opacity 0.2s ease;
}

html.arystan-filtering .wp-block-woocommerce-product-collection {
	opacity: 0.35;
	pointer-events: none;
}

.arystan-filter-loader {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9000;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	border-radius: var(--radius--md, 10px);
	background-color: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--line, #e3e3e8);
	box-shadow: 0 8px 28px rgba(7, 7, 10, 0.16); /* Above the white page — the card shadow is too faint here. */
	color: var(--wp--preset--color--contrast, #07070a);
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

html.arystan-filtering .arystan-filter-loader {
	display: flex;
	animation: arystan-filter-loader-in 0.2s ease;
}

.arystan-filter-loader__spinner {
	flex: none;
	width: 26px;
	height: 26px;
	border: 3px solid var(--wp--preset--color--line, #e5e6ea);
	border-top-color: var(--wp--preset--color--primary, #2440b3);
	border-radius: 50%;
	animation: arystan-spin 0.8s linear infinite;
}

@keyframes arystan-filter-loader-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-collection {
		transition: none;
	}

	html.arystan-filtering .arystan-filter-loader {
		animation: none;
	}

	.arystan-filter-loader__spinner {
		animation-duration: 2.4s;
	}
}

/* ---------- Single post ---------- */

.arystan-post-media {
	position: relative;
	margin-bottom: 45px;
}

.arystan-post-media > * {
	margin: 0;
}

.arystan-post-media__category {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 0;
}

.arystan-post-media__category a {
	display: inline-block;
	padding: 2px 9px 1px;
	background-color: rgba(0, 0, 0, 0.75);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 22px;
	text-decoration: none;
}

.arystan-post-media__category .wp-block-post-terms__separator {
	display: none;
}

.arystan-post-category {
	margin: 50px 0 55px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px;
}

.arystan-post-category a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

/* ---------- Cart and checkout (classic shortcodes, The7 layout: content left, gray card right) ---------- */

/* woocommerce-blocktheme.css narrows classic pages to 1000px. */
.arystan-main .wp-block-post-content > .woocommerce {
	max-width: none;
}

.arystan-main .woocommerce:has(> .woocommerce-cart-form),
.arystan-main form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 492px;
	column-gap: 60px;
	align-items: start;
}

.arystan-main .woocommerce:has(> .woocommerce-cart-form) > :not(.woocommerce-cart-form, .cart-collaterals),
.arystan-main form.checkout > :not(#customer_details, #order_review_heading, #order_review) {
	grid-column: 1 / -1;
}

.arystan-main .woocommerce-cart-form,
.arystan-main form.checkout #customer_details {
	grid-column: 1;
}

.arystan-main .woocommerce .cart-collaterals {
	grid-column: 2;
	box-sizing: border-box;
	width: auto;
	padding: 30px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: #f7f7f7;
}

.arystan-main .woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: auto;
}

/* Checkout: heading and review form one gray card in the right column. */
.arystan-main form.checkout #order_review_heading,
.arystan-main form.checkout #order_review {
	grid-column: 2;
	box-sizing: border-box;
	margin: 0;
	background-color: #f7f7f7;
}

.arystan-main form.checkout #order_review_heading {
	grid-row: 1;
	padding: 30px 30px 10px;
	border-radius: var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0 0;
}

.arystan-main form.checkout #order_review {
	grid-row: 2;
	padding: 0 30px 30px;
	border-radius: 0 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm);
	box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.1);
}

.arystan-main form.checkout #customer_details {
	grid-row: 1 / span 3;
}

.arystan-main .cart_totals h2,
.arystan-main #order_review_heading {
	margin: 0 0 10px;
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 23px;
}

/* Tables: no borders, small gray headings. */
.arystan-main .woocommerce table.shop_table {
	margin: 0 0 10px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--body);
	line-height: 20px;
}

.arystan-main .woocommerce table.shop_table :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
}

/* Doubled class: beats woocommerce-smallscreen.css «tr:nth-child(2n) td» (grey every second row ≤768px). */
.arystan-main .woocommerce table.shop_table.shop_table :is(th, td) {
	background: none;
}

.arystan-main .woocommerce-cart-form table.shop_table thead th {
	padding-bottom: 10px;
	color: var(--wp--preset--color--secondary);
	font-weight: 400;
}

.arystan-main .woocommerce-cart-form table.shop_table tbody td {
	padding: 25px 10px 25px 0;
	vertical-align: middle;
}

.arystan-main .woocommerce-cart-form td.product-thumbnail img {
	width: 70px;
	height: 70px;
	object-fit: contain;
}

.arystan-main .woocommerce-cart-form td.product-name a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.arystan-main .woocommerce-cart-form td.product-subtotal {
	color: var(--wp--preset--color--heading);
}

.arystan-main .woocommerce-cart-form :is(td.product-price, td.product-subtotal) {
	white-space: nowrap;
}

/* Quantity stepper «− 1 +» — the variation card's stepper (Single product). Buttons: functions.php,
   behaviour: assets/js/cart-autoupdate.js; without JavaScript only the field is shown. */
.arystan-main .woocommerce-cart-form .quantity {
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	height: 48px;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(51, 51, 51, 0.15);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	vertical-align: middle;
}

.arystan-main .woocommerce-cart-form .quantity:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.arystan-main .woocommerce-cart-form .quantity input.qty.qty {
	flex: none;
	width: 48px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.arystan-main .woocommerce-cart-form .quantity .qty::-webkit-inner-spin-button,
.arystan-main .woocommerce-cart-form .quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.arystan-main .woocommerce-cart-form .quantity .arystan-qty-button {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--surface-alt);
	box-shadow: none;
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	touch-action: manipulation;
}

/* Only with a mouse: on a phone :hover sticks to the last tapped button. */
@media (hover: hover) {
	.arystan-main .woocommerce-cart-form .quantity .arystan-qty-button:hover:not(:disabled) {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}
}

.arystan-main .woocommerce-cart-form .quantity .arystan-qty-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.arystan-main .woocommerce-cart-form .quantity .arystan-qty-button:disabled {
	color: var(--wp--preset--color--muted);
	cursor: default;
}

/* No script — plain field; sold individually (hidden / read-only field) — no buttons. */
html:not(.arystan-cart-autoupdate) .arystan-main .woocommerce-cart-form .arystan-qty-button,
.arystan-main .woocommerce-cart-form .quantity:has(.qty[type="hidden"], .qty[readonly]) .arystan-qty-button {
	display: none;
}

.arystan-main .woocommerce a.remove {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.15);
	color: var(--wp--preset--color--base) !important;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
}

.arystan-main .woocommerce a.remove:hover {
	background-color: var(--wp--preset--color--danger);
}

.arystan-main .woocommerce-cart-form td.actions {
	padding: 45px 0 25px;
	text-align: left;
}

.arystan-main .woocommerce-cart-form td.actions .button[name="update_cart"] {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--secondary);
	font-size: 13px;
}

.arystan-main .woocommerce-cart-form td.actions .button[name="update_cart"]:not(:disabled):hover {
	color: var(--wp--preset--color--primary);
}

/* assets/js/cart-autoupdate.js recalculates on its own — hide the button (and the row, when no coupon field). */
.arystan-cart-autoupdate .arystan-main .woocommerce-cart-form td.actions .button[name="update_cart"] {
	display: none;
}

.arystan-cart-autoupdate .arystan-main .woocommerce-cart-form tr:has(> td.actions):not(:has(.coupon)) {
	display: none;
}

/* WooCommerce notices: «Продолжить покупки» / «Просмотр корзины» as a plain blue link, not a button. */
/* WooCommerce sets the link colour with !important (#2f2f2f); only !important wins. */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-forward.wc-forward {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--primary) !important;
	font-size: inherit;
	font-weight: 600;
	text-decoration: none;
	opacity: 1;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-forward.wc-forward:hover {
	background: none;
	color: var(--wp--preset--color--primary-hover) !important;
	text-decoration: none;
}

/* Totals: rows stacked, label above value. #order_review by its class — with the id the cart's own
   (phone) rules below could not override these. */
.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) table.shop_table :is(tr, th, td) {
	display: block;
	width: auto;
	text-align: left;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) table.shop_table thead {
	display: none;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) table.shop_table tr + tr {
	margin-top: 15px;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) table.shop_table th {
	color: var(--wp--preset--color--secondary);
	font-weight: 400;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) table.shop_table td {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 23px;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) .order-total :is(td, strong) {
	color: var(--wp--preset--color--heading);
	font-weight: 700;
}

.arystan-main .woocommerce ul#shipping_method {
	margin: 0;
	padding: 0;
}

.arystan-main .woocommerce ul#shipping_method li {
	margin: 0;
	text-indent: 0;
}

.arystan-main .woocommerce-shipping-destination,
.arystan-main .woocommerce-shipping-calculator {
	margin: 5px 0 0;
	font-size: var(--wp--preset--font-size--body);
}

/* Cart and checkout («Ваш заказ»), shipping options: a list of whole-row buttons — radio on the left, 48px tall,
   chosen one outlined blue. */
.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) ul#shipping_method li {
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 20px;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) ul#shipping_method li + li {
	margin-top: 8px;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) ul#shipping_method li input.shipping_method {
	position: absolute;
	top: 50%;
	left: 15px;
	width: 18px;
	height: 18px;
	margin: -9px 0 0;
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) ul#shipping_method li label {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 12px 15px 12px 45px;
	border: 1px solid rgba(51, 51, 51, 0.12);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	font-weight: 400;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) ul#shipping_method li label:hover {
	border-color: rgba(51, 51, 51, 0.3);
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) ul#shipping_method li:has(input:checked) label {
	border-color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
}

.arystan-main :is(.cart_totals, .woocommerce-checkout-review-order) ul#shipping_method li:has(input:focus-visible) label {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.arystan-main .cart_totals .woocommerce-shipping-destination {
	margin: 10px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 18px;
	text-align: left;
}

.arystan-main .woocommerce .wc-proceed-to-checkout {
	padding: 30px 0 0;
}

.arystan-main .woocommerce :is(.checkout-button, #place_order) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 16px 24px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--button);
	color: var(--wp--preset--color--base);
	font-size: 20px;
	font-weight: 400;
	line-height: 22px;
	text-align: center;
}

.arystan-main .woocommerce :is(.checkout-button, #place_order):hover {
	background-color: var(--wp--preset--color--primary-hover);
	box-shadow: var(--wp--preset--shadow--button-hover);
}

/* Checkout fields: two per row for first/last name and email/phone. */
.arystan-main form.checkout .col2-set :is(.col-1, .col-2) {
	float: none;
	width: auto;
}

.arystan-main form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 30px;
}

.arystan-main form.checkout .form-row {
	float: none;
	width: auto;
	margin: 0 0 20px;
	padding: 0;
}

.arystan-main form.checkout .form-row-wide,
.arystan-main form.checkout .notes {
	grid-column: 1 / -1;
}

.arystan-main form.checkout .woocommerce-billing-fields > h3,
.arystan-main form.checkout .woocommerce-additional-fields > h3 {
	display: none;
}

/* Labels and text as in the other forms of the site (review form, CF7); WooCommerce sets 12px. */
.arystan-main .woocommerce form .form-row label {
	margin: 0 0 8px;
	color: var(--wp--preset--color--heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.arystan-main .woocommerce form .form-row label .optional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.arystan-main .woocommerce form .form-row :is(input.input-text, textarea, select) {
	width: 100%;
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	line-height: 22px;
}

.arystan-main .woocommerce form .form-row :is(input.input-text, textarea)::placeholder {
	color: #8b8d94;
	opacity: 1;
}

.arystan-main .woocommerce form .form-row textarea {
	min-height: 100px;
	height: 100px;
	resize: vertical;
}

/* Payment: grey «Оплата» label (arystan-payment-title, functions.php) as «Доставка» / «Итого» above,
   the method bold as the shipping options, its description smaller and grey under it. */
.arystan-main #order_review .arystan-payment-title {
	margin: 15px 0 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body);
	line-height: 23px;
}

.arystan-main #order_review #payment {
	border-radius: 0;
	background: none;
}

.arystan-main #order_review #payment :is(ul.payment_methods, .form-row) {
	margin: 0;
	padding: 0;
	border: 0;
}

.arystan-main #order_review #payment ul.payment_methods li {
	margin: 0;
	line-height: 23px;
}

.arystan-main #order_review #payment ul.payment_methods label {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 700;
}

.arystan-main #order_review #payment div.payment_box {
	margin: 4px 0 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body);
	line-height: 20px;
}

.arystan-main #order_review #payment div.payment_box p {
	margin: 0;
}

.arystan-main #order_review #payment div.payment_box::before {
	display: none;
}

/* Legal note: small print under a thin line, apart from the order itself. */
.arystan-main #order_review .woocommerce-privacy-policy-text {
	margin: 25px 0 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 19px;
}

.arystan-main #order_review .woocommerce-privacy-policy-text p {
	margin: 0;
}

@media (max-width: 990px) {
	.arystan-main .woocommerce:has(> .woocommerce-cart-form),
	.arystan-main form.checkout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}

	.arystan-main .woocommerce .cart-collaterals,
	.arystan-main form.checkout :is(#order_review_heading, #order_review) {
		grid-column: 1;
	}

	.arystan-main form.checkout #customer_details {
		grid-row: auto;
	}

	.arystan-main form.checkout #order_review_heading {
		grid-row: auto;
		margin-top: 0;
	}

	.arystan-main form.checkout #order_review {
		grid-row: auto;
		margin-top: -30px;
	}
}

@media (max-width: 599.98px) {
	.arystan-main form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cart on phones and small tablets — the width where woocommerce-smallscreen.css turns the table into
   «Подпись: значение» rows (and hides the photo). Each item becomes one card instead:
   photo | name (× in the corner) / price, then a line, the stepper and the item subtotal.
   WooCommerce sets «text-align: right !important» on every cell there — only !important wins.
   The same cards on a narrow desktop (991–1399px): the table stands next to the 492px totals card there and
   gets 350–640px — too little for six columns with the stepper (the name column shrank to ~100px). */
@media (max-width: 768px), (min-width: 991px) and (max-width: 1399.98px) {
	.arystan-main .woocommerce-cart-form table.shop_table,
	.arystan-main .woocommerce-cart-form table.shop_table tbody {
		display: block;
	}

	.arystan-main .woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 86px minmax(0, 1fr) auto;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"thumb name name"
			"thumb price price"
			"qty qty subtotal";
		margin: 0 0 12px;
		padding: 16px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--md);
		background: var(--wp--preset--color--base);
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td {
		display: block;
		width: auto;
		padding: 0;
		background: none;
		text-align: left !important;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td::before {
		content: none;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-remove {
		position: absolute;
		top: 8px;
		right: 8px;
	}

	.arystan-main .woocommerce-cart-form tr.cart_item td.product-remove a.remove {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background-color: var(--wp--preset--color--surface-alt);
		color: var(--wp--preset--color--secondary) !important;
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
	}

	.arystan-main .woocommerce-cart-form tr.cart_item td.product-remove a.remove:hover {
		background-color: var(--wp--preset--color--danger);
		color: var(--wp--preset--color--base) !important;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail {
		display: block;
		grid-area: thumb;
		padding-right: 14px;
	}

	.arystan-main .woocommerce-cart-form tr.cart_item td.product-thumbnail img {
		display: block;
		width: 72px;
		height: 72px;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-name {
		grid-area: name;
		padding-right: 30px;
		font-size: 15px;
		font-weight: 600;
		line-height: 21px;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-name :is(dl, p) {
		margin: 4px 0 0;
		font-size: 13px;
		font-weight: 400;
	}

	/* «Цена: 68 000 ₸» — per piece, smaller and grey: the item total is below. */
	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-price {
		grid-area: price;
		align-self: start;
		margin-top: 6px;
		color: var(--wp--preset--color--secondary);
		font-size: 14px;
		line-height: 20px;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-price::before {
		content: attr(data-title) ": ";
		float: none;
		font-weight: 400;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item :is(td.product-quantity, td.product-subtotal) {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-quantity {
		grid-area: qty;
	}

	/* Item total: small grey «Подытог» over a bold sum, at the right of the stepper. */
	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-subtotal {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		grid-area: subtotal;
		padding-left: 12px;
		color: var(--wp--preset--color--heading);
		font-size: 18px;
		font-weight: 700;
		line-height: 24px;
		text-align: right !important;
	}

	.arystan-main .woocommerce-cart-form table.shop_table tr.cart_item td.product-subtotal::before {
		content: attr(data-title);
		float: none;
		color: var(--wp--preset--color--secondary);
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
	}
}

@media (max-width: 768px) {
	.arystan-main .woocommerce .cart-collaterals {
		padding: 24px 20px;
	}

	/* Totals: one label per row (WooCommerce adds «Подытог:» from data-title on top of the row heading),
	   label left and sum right; shipping options under their label across the card. */
	.arystan-main .cart_totals table.shop_table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		column-gap: 12px;
	}

	.arystan-main .cart_totals table.shop_table tr td::before {
		content: none;
	}

	.arystan-main .cart_totals table.shop_table tr.shipping td {
		flex: 1 0 100%;
		margin-top: 8px;
		text-align: left !important;
	}

	.arystan-main .cart_totals table.shop_table tr.order-total {
		margin-top: 18px;
		padding-top: 16px;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.arystan-main .cart_totals table.shop_table tr.order-total th {
		color: var(--wp--preset--color--heading);
		font-weight: 700;
	}

	.arystan-main .cart_totals table.shop_table tr.order-total td {
		font-size: 18px;
	}
}

/* ---------- «Заказ принят» (templates/order-confirmation.html): order card + contacts card ---------- */

.arystan-order {
	padding-top: 60px;
}

.arystan-order__card {
	box-sizing: border-box;
	margin: 0 0 25px;
	padding: 35px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

.arystan-order__card > :first-child {
	margin-top: 0;
}

/* Status: green check + «Заказ принят» + «Ваш заказ принят. Благодарим вас.» */
.arystan-order__status {
	position: relative;
	margin: 0 0 25px;
	padding-left: 60px;
}

.arystan-order__status::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.arystan-order__status h1 {
	margin: 0 0 4px;
	color: var(--wp--preset--color--heading);
	font-size: 26px;
	font-weight: 800;
	line-height: 32px;
}

.arystan-order__status p {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: 16px;
	line-height: 24px;
}

/* Number · date · total in one row. */
.arystan-order__summary .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 15px;
	margin: 0 0 30px;
	padding: 20px 0;
	border-block: 1px solid var(--wp--preset--color--line);
	list-style: none;
}

.arystan-order__summary .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
}

.arystan-order__summary .wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
}

.arystan-order__summary .wc-block-order-confirmation-summary-list-item__value {
	color: var(--wp--preset--color--heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}

.arystan-order__title {
	margin: 0 0 15px;
	color: var(--wp--preset--color--heading);
	font-weight: 800;
	line-height: 22px;
}

/* Items, delivery, total. */
.arystan-order__totals .wc-block-order-confirmation-totals__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 22px;
}

.arystan-order__totals .wc-block-order-confirmation-totals__table :is(th, td) {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

.arystan-order__totals .wc-block-order-confirmation-totals__table :is(th, td):last-child {
	padding-left: 20px;
	text-align: right;
	white-space: nowrap;
}

.arystan-order__totals .wc-block-order-confirmation-totals__table thead th {
	padding-top: 0;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 18px;
}

.arystan-order__totals .wc-block-order-confirmation-totals__table a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.arystan-order__totals .wc-block-order-confirmation-totals__table a:hover {
	color: var(--wp--preset--color--primary);
}

.arystan-order__totals .wc-block-order-confirmation-totals__table tfoot th {
	color: var(--wp--preset--color--secondary);
}

.arystan-order__totals .wc-block-order-confirmation-totals__table tfoot tr:last-child :is(th, td) {
	border-bottom: 0;
	color: var(--wp--preset--color--heading);
	font-size: 18px;
	font-weight: 700;
}

.arystan-order__totals .wc-block-order-confirmation-order-note {
	margin-top: 15px;
	padding: 12px 15px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-gray);
	font-size: 14px;
	line-height: 21px;
}

.arystan-order__totals .wc-block-order-confirmation-order-note p {
	margin: 0;
}

.arystan-order__totals .wc-block-order-confirmation-order-note__label {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

/* «Контактная информация»: label column + value (WooCommerce frames the address block — dropped). */
.arystan-order__contact.arystan-order__contact {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.arystan-order__row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 4px 20px;
	font-size: 15px;
	line-height: 22px;
}

.arystan-order__row dt {
	color: var(--wp--preset--color--muted);
}

.arystan-order__row dd {
	margin: 0;
	color: var(--wp--preset--color--heading);
	font-weight: 600;
}

@media (max-width: 599.98px) {
	.arystan-order {
		padding-top: 30px;
	}

	.arystan-order__card {
		padding: 22px 20px;
	}

	.arystan-order__status {
		padding-left: 0;
		padding-top: 56px;
	}

	.arystan-order__status h1 {
		font-size: 22px;
		line-height: 28px;
	}

	.arystan-order__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Contact Form 7 ---------- */

.wpcf7 form > p,
.wpcf7 form > div > p {
	margin: 0 0 10px;
}

.wpcf7 .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.wpcf7 :is(input:not([type="submit"], [type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 5px 15px;
	border: 1px solid rgba(51, 51, 51, 0.12);
	border-radius: var(--wp--custom--radius--sm);
	background-color: #fdfdfd;
	color: #8b8d94;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
}

.wpcf7 textarea {
	height: 211px;
	padding-block: 13px;
}

.wpcf7 :is(input, textarea, select):focus {
	border-color: var(--wp--preset--color--primary);
	outline: 0;
}

.wpcf7 .wpcf7-submit {
	padding: 12px 18px;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--button);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 16px;
	line-height: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--primary-hover);
	box-shadow: var(--wp--preset--shadow--button-hover);
}

.wpcf7 .wpcf7-spinner {
	vertical-align: middle;
}

/* Form status: solid colored card with an icon. Colors are darker than the palette
   accents so white text stays readable (contrast >= 4.5:1). */
.wpcf7 {
	--arystan-cf7-success: #15803d;
	--arystan-cf7-warning: #b45309;
	--arystan-cf7-error: #c62828;
}

/* Over the gap under the field (20–23px), so a validation message never makes the form taller. */
.wpcf7 .wpcf7-not-valid-tip {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 2px;
	overflow: hidden;
	color: var(--arystan-cf7-error);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wpcf7 .wpcf7-not-valid:is(input, select, textarea) {
	border-color: var(--arystan-cf7-error);
}

/* The status pops up over the page right under the form instead of stretching it (the home hero
   used to jump). assets/js/cf7-notice.js hides it after a few seconds or on click. */
.wpcf7 form.wpcf7-form {
	position: relative;
}

.wpcf7 form.wpcf7-form .wpcf7-response-output {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 40px 14px 18px;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	color: var(--wp--preset--color--base);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	animation: arystan-cf7-notice 0.3s ease-out;
}

/* Close mark: the whole notice is clickable. */
.wpcf7 form.wpcf7-form .wpcf7-response-output::after {
	content: "\00d7";
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	opacity: 0.8;
}

.wpcf7 form.wpcf7-form .wpcf7-response-output.is-dismissed {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

.wpcf7 form.wpcf7-form .wpcf7-response-output::before {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask: var(--arystan-cf7-icon) center / contain no-repeat;
	mask: var(--arystan-cf7-icon) center / contain no-repeat;
	/* Info "i" by default. */
	--arystan-cf7-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

.wpcf7 form.wpcf7-form:is(.init, .resetting, .submitting) .wpcf7-response-output {
	display: none;
}

.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	background-color: var(--arystan-cf7-success);
}

.wpcf7 form.wpcf7-form.sent .wpcf7-response-output::before {
	--arystan-cf7-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}

/* Not filled in / consent not given: the visitor can fix it. */
.wpcf7 form.wpcf7-form:is(.invalid, .unaccepted, .payment-required) .wpcf7-response-output {
	background-color: var(--arystan-cf7-warning);
}

.wpcf7 form.wpcf7-form:is(.invalid, .unaccepted, .payment-required) .wpcf7-response-output::before {
	--arystan-cf7-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* Sending failed or was blocked. */
.wpcf7 form.wpcf7-form:is(.failed, .aborted, .spam) .wpcf7-response-output {
	background-color: var(--arystan-cf7-error);
}

.wpcf7 form.wpcf7-form:is(.failed, .aborted, .spam) .wpcf7-response-output::before {
	--arystan-cf7-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

@keyframes arystan-cf7-notice {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7 form.wpcf7-form .wpcf7-response-output {
		animation: none;
	}
}

/* ---------- Contacts page (arystan-core/migrations/pages/209.html) ---------- */

.arystan-contacts.arystan-contacts {
	gap: 30px 15px;
}

/* 2/3 + 1/3 like the WPBakery row; grid, because the form column carries padding. */
@media (min-width: 782px) {
	.arystan-contacts.arystan-contacts {
		display: grid;
		grid-template-columns: minmax(0, 810fr) minmax(0, 420fr);
		align-items: start;
	}
}

.arystan-contacts__info > *,
.arystan-contact > * {
	margin-block: 0;
}

.arystan-contacts__info > * + * {
	margin-block-start: 10px;
}

.arystan-contacts__info h1 {
	font-size: var(--wp--preset--font-size--heading-1);
	line-height: 42px;
}

.arystan-contacts__company {
	font-size: 16px;
}

.arystan-contacts__company + * {
	margin-block-start: 20px;
}

.arystan-contact__note {
	color: #999;
	font-size: var(--wp--preset--font-size--small);
	line-height: 23px;
}

/* Branches: outlined cards like the categories in the «Каталог» mega menu, two per row (owner, 2026-10-19);
   one column on phones. The card itself is not a link (no hover); «Открыть в 2ГИС» sits at its bottom.
   Cards in a row are as tall as the tallest one. */
.arystan-contacts__branches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
}

/* Company, hours right under it (owner, 2026-10-19), then the branch cards. */
.arystan-contacts__info > .arystan-contacts__company + .arystan-contacts__hours {
	margin-block-start: 6px;
}

.arystan-contacts__info > .arystan-contacts__hours + .arystan-contacts__branches {
	margin-block-start: 20px;
}

.arystan-contacts__branches .arystan-contact {
	box-sizing: border-box;
	margin: 0; /* The flow layout's top margin between blocks would shift every card after the first. */
	padding: 16px 20px 18px;
	border: 1px solid #dcdde3;
	border-radius: var(--wp--custom--radius--md);
}

.arystan-contacts__branches .arystan-contact > p:first-child {
	color: var(--wp--preset--color--heading);
	font-size: 16px;
	line-height: 22px;
}

.arystan-contacts__branches .arystan-contact__note {
	margin-block: 2px 8px;
}

.arystan-contacts__branches .arystan-contact {
	display: flex;
	flex-direction: column;
}

.arystan-contacts__branches .arystan-contact > .arystan-contact__map {
	margin-block-start: auto;
	padding-top: 10px;
}

@media (max-width: 599px) {
	.arystan-contacts__branches {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

.arystan-contacts__form.arystan-contacts__form {
	align-self: flex-start;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-gray);
}

.arystan-contacts__form > * {
	margin-block: 0;
}

.arystan-contacts__form > h3 {
	margin-bottom: 10px;
}

.arystan-contacts__form > p {
	margin-bottom: 35px;
}

/* ---------- About page (arystan-core/migrations/pages/1798.html) ---------- */

.arystan-about h1 {
	line-height: 42px;
}

.arystan-about .arystan-about__text {
	gap: 30px 40px;
	margin-block-start: 35px;
}

.arystan-about__text p {
	margin-block: 0 10px;
}

.arystan-about__text .wp-block-column > * {
	margin-block-start: 0;
}

.arystan-about .arystan-stats {
	gap: 10px;
	margin-block-start: 50px;
}

.arystan-about .arystan-stat {
	box-sizing: border-box;
	min-height: 211px;
}

.arystan-stat > * {
	margin-block: 0;
}

.arystan-stat__value.arystan-stat__value {
	align-items: baseline;
	gap: 8px;
	margin-block: 0 35px;
}

.arystan-stat__value > * {
	margin: 0;
}

.arystan-stat__number {
	font-size: 62px;
	font-weight: 500;
	line-height: 72px;
	white-space: nowrap;
}

.arystan-stat__affix {
	font-size: 23px;
	line-height: 32px;
}

/* Tablets: three cards of ~300px, «140 000» at 62px did not fit. The number scales with its card. */
@media (min-width: 600px) and (max-width: 1279.98px) {
	.arystan-about .arystan-stat {
		container-type: inline-size;
	}

	/* «140 000» is ~4 em wide: 20cqi keeps it at ~80% of the card's inner width. */
	.arystan-stat__number {
		font-size: min(62px, 20cqi);
		line-height: 1.16;
	}

	.arystan-stat__affix {
		font-size: min(23px, 8cqi);
	}
}

.arystan-about .arystan-about__partners-title {
	margin-block: 37px 35px;
	line-height: 38px;
}

.arystan-about .arystan-logos.arystan-logos {
	--wp--style--unstable-gallery-gap: 20px;
	gap: 20px;
	align-items: flex-start;
}

.arystan-logos .wp-block-image img {
	width: 100%;
	height: auto;
}

/* Core gallery stretches the last row; the old grid kept every logo in its cell. */
.arystan-about .arystan-logos.arystan-logos figure.wp-block-image {
	flex-grow: 0;
}

/* Core galleries stop at 8 columns; the old logo grid had 10 on desktop. */
@media (min-width: 1070px) {
	.arystan-about .arystan-logos.columns-8 figure.wp-block-image:not(#individual-image) {
		width: calc(10% - var(--wp--style--unstable-gallery-gap) * 9 / 10);
	}
}

@media (max-width: 599.98px) {
	.arystan-about .arystan-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.arystan-about .arystan-logos.columns-8 figure.wp-block-image:not(#individual-image) {
		width: calc(33.33% - var(--wp--style--unstable-gallery-gap) * 2 / 3);
	}
}

/* ---------- Sliders (assets/js/slider.js) ---------- */

.arystan-slider__host {
	position: relative;
}

/* The scrolling track clips whatever leaves its box, card shadows included: give it 16px of room on
   every side and pull it back with negative margins, so cards stay where they were. */
.arystan-slider .wc-block-product-template.wc-block-product-template,
.wp-block-group.arystan-slider__track {
	--arystan-per-view: 4;
	--arystan-gap: 30px;
	--arystan-bleed: 16px;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--arystan-gap);
	box-sizing: border-box;
	width: calc(100% + 2 * var(--arystan-bleed)); /* WooCommerce fixes the list at 100% — the right margin would do nothing */
	max-width: none;
	margin: calc(-1 * var(--arystan-bleed));
	padding: var(--arystan-bleed);
	overflow-x: auto;
	scroll-padding-inline: var(--arystan-bleed);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

/* Product carousels: the same 20px between cards as «Хиты продаж» and the catalog grid. */
.arystan-slider .wc-block-product-template.wc-block-product-template {
	--arystan-gap: 20px;
}

.arystan-slider .wc-block-product-template::-webkit-scrollbar,
.arystan-slider__track::-webkit-scrollbar {
	display: none;
}

.arystan-slider .wc-block-product-template > li,
.wp-block-group.arystan-slider__track > * {
	flex: 0 0 calc((100% - var(--arystan-gap) * (var(--arystan-per-view) - 1)) / var(--arystan-per-view));
	width: auto;
	max-width: none;
	margin: 0;
	scroll-snap-align: start;
}

.arystan-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.arystan-slider__arrow::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.4 1.6a.5.5 0 0 1 0 .7L5.7 8l5.7 5.6a.5.5 0 0 1-.7.7l-6-6a.5.5 0 0 1 0-.7l6-6a.5.5 0 0 1 .7 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.4 1.6a.5.5 0 0 1 0 .7L5.7 8l5.7 5.6a.5.5 0 0 1-.7.7l-6-6a.5.5 0 0 1 0-.7l6-6a.5.5 0 0 1 .7 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Arrows get their own lanes: the cards sit 8px clear of them, the same on both sides. */
.arystan-slider__host:has(> .arystan-slider__arrow) {
	padding-inline: 44px;
}

.arystan-slider__arrow.is-prev {
	left: 0;
}

.arystan-slider__arrow.is-next {
	right: 0;
}

.arystan-slider__arrow.is-next::before {
	transform: scaleX(-1);
}

.arystan-slider__dots {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 12px;
}

.arystan-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #dedfdf;
	cursor: pointer;
}

.arystan-slider__dot.is-active {
	background-color: transparent;
	box-shadow: 0 0 0 2px #ccc;
}

@media (max-width: 1100px) {
	.arystan-slider .wc-block-product-template.wc-block-product-template {
		--arystan-per-view: 3;
	}
}

@media (max-width: 599.98px) {
	.arystan-slider .wc-block-product-template.wc-block-product-template {
		--arystan-per-view: 1.4;
		--arystan-gap: 15px;
	}

	.arystan-slider__arrow {
		display: none;
	}

	.arystan-slider__host:has(> .arystan-slider__arrow) {
		padding-inline: 0;
	}
}

/* ---------- Home page (arystan-core/migrations/pages/2.html) ---------- */

.arystan-home__inner > * {
	margin-block: 0;
}

.arystan-home__inner > .wp-block-heading {
	line-height: 38px;
}

/* Hero: photo, title, form card with «В розницу / Оптом» tabs. */
.arystan-hero.arystan-hero {
	min-height: 0;
	padding-block: 55px 108px;
}

/* WordPress forces `align-items: normal` on columns; the text column sits in the middle like in The7. */
.arystan-hero__text.arystan-hero__text {
	align-self: center;
}

.arystan-hero .wp-block-cover__inner-container {
	color: inherit;
}

.arystan-hero__columns.arystan-hero__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 413px;
	gap: 30px 10px;
	align-items: center;
	margin: 0;
}

.arystan-hero__text > * {
	margin-block: 0;
}

.arystan-hero__text .arystan-hero__title {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.25;
}

.arystan-hero__text .arystan-hero__lead {
	margin-top: 31px;
	color: var(--wp--preset--color--base);
	font-size: 20px;
	line-height: 23px;
}

.arystan-hero__text .arystan-hero__kaspi {
	margin-top: 60px;
}

.arystan-hero__form.arystan-hero__form {
	padding: 28px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--strong);
	color: var(--wp--preset--color--contrast);
}

.arystan-hero__form > * {
	margin-block: 0;
}

.arystan-hero__form > h3 {
	margin-bottom: 12px;
}

.arystan-hero__tabs .wp-block-tab-list {
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 5px;
	border: 0;
}

/* Tabs as plain buttons: the active one blue, the other grey — no shadows, no underline. */
.arystan-hero__tabs .wp-block-tab-list button {
	margin: 0;
	padding: 9px 15px;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: #ececee;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 23px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.arystan-hero__tabs .wp-block-tab-list button:hover {
	background-color: #e1e2e6;
}

.arystan-hero__tabs .wp-block-tab-list button[aria-selected="true"] {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Core underlines the selected tab with a 2px line in the text colour — white on the blue button. */
.arystan-hero__tabs .wp-block-tab-list button[aria-selected="true"]::before {
	content: none;
}

/* Focus ring for the keyboard only: clicking a tab no longer leaves a dark frame around it. */
.arystan-hero__tabs .wp-block-tab-list button:focus {
	outline: none;
}

.arystan-hero__tabs .wp-block-tab-list button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.arystan-hero__tabs .wp-block-tab-panel {
	padding: 0;
	border: 0;
}

.arystan-hero__tabs .wp-block-tab-panel > * {
	margin-block: 0;
}

.arystan-hero__tabs .wp-block-tab-panel > p:first-child {
	margin-bottom: 22px;
}

.arystan-hero__tabs .wp-block-tab-panel > .arystan-hero__phone {
	margin-bottom: 35px;
}

.arystan-hero__tabs .wpcf7 form > p:last-of-type {
	margin: 23px 0 0;
}

.arystan-hero__phone.arystan-hero__phone {
	margin-top: 10px;
}

.arystan-hero__phone strong {
	font-size: 18px;
}

/* Prices notice. */
.arystan-home__notice {
	padding-top: 50px;
}

.arystan-home__notice .is-style-notice {
	padding: 35px 23px;
}

.arystan-home__notice .is-style-notice p {
	margin: 0;
	font-size: 20px;
	line-height: 23px;
}

/* Consultation / delivery / installation. */
.arystan-home__features {
	padding-block: 40px 5px;
}

.arystan-features.arystan-features {
	gap: 10px;
}

.arystan-feature.arystan-feature {
	padding: 23px 23px 0;
	min-height: 137px;
	box-sizing: border-box;
}

.arystan-feature > * {
	margin-block: 0;
}

.arystan-feature .arystan-feature__icon {
	margin: 0 30px 23px 0;
}

.arystan-feature h4 {
	margin-bottom: 10px;
}

/* Text keeps its own column next to the floated icon instead of running under it. */
.arystan-feature > :not(.arystan-feature__icon) {
	overflow: hidden;
}

/* Vacancy banner: as wide as the «Бесплатная …» cards above it (the 1300px content box, without The7's
   70px on the right from 1070px), rounded like the other home cards. The block stays «full width» in the
   page content — only the theme narrows it. */
.arystan-vacancy.arystan-vacancy.alignfull {
	box-sizing: border-box;
	width: auto;
	max-width: min(1300px, 100%);
	min-height: 344px;
	margin-block-start: 40px; /* Air under the three «Бесплатная …» cards. */
	margin-inline: max(0px, (100% - 1300px) / 2) auto;
	padding: 50px 40px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

@media (min-width: 1070px) {
	.arystan-vacancy.arystan-vacancy.alignfull {
		max-width: calc(min(1300px, 100%) - 70px);
	}
}

@media (max-width: 599px) {
	.arystan-vacancy.arystan-vacancy.alignfull {
		padding-inline: 20px;
	}
}

.arystan-vacancy .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.arystan-vacancy__text.arystan-vacancy__text {
	color: var(--wp--preset--color--base);
	font-size: 23px;
	line-height: 1.4;
}

.arystan-vacancy__note.arystan-vacancy__note {
	margin-top: 36px;
	color: var(--wp--preset--color--base);
	font-size: 18px;
}

.arystan-vacancy .wp-block-buttons {
	margin-top: 34px;
}

.arystan-vacancy .is-style-phone .wp-element-button {
	padding: 16px 23px;
	background-color: var(--wp--preset--color--primary);
	font-size: 18px;
}

.arystan-vacancy .is-style-phone .wp-element-button:hover {
	background-color: var(--wp--preset--color--primary-hover);
}

/* Popular brands. */
.arystan-home__brands {
	padding-block: 85px 11px;
}

.arystan-brands.arystan-brands {
	gap: 22px;
	margin-top: 61px;
}

.arystan-brand {
	padding: 35px 15px 58px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.2s ease;
}

.arystan-brand:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.arystan-brand > * {
	margin: 0;
}

.arystan-brand img {
	width: 100%;
	max-width: 160px;
	height: auto;
}

/* Best sellers. */
.arystan-home__hits {
	padding-block: 50px 100px;
}

.arystan-home__hits .arystan-home__products.arystan-home__products {
	margin-top: 50px;
}

/* «Хиты продаж»: 4 compact cards in a row, as the catalog; 2 rows of 8. */
.arystan-home__products .wc-block-product-template.wc-block-product-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.arystan-home__hits .wp-block-buttons {
	margin-top: 70px;
}

.arystan-home__catalog-link .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 24px;
	font-size: 20px;
	line-height: 22px;
}

.arystan-home__catalog-link .wp-element-button::after {
	content: "→";
}

/* 8 cards: 4 + 4, then 2 per row (3 would leave 3 + 3 + 2). */
@media (max-width: 1100px) {
	.arystan-home__products .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.arystan-home__products .wc-block-product-template.wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Category carousels. */
.arystan-home__carousel + .arystan-home__carousel {
	padding-top: 70px;
}

.arystan-home__carousel .arystan-carousel {
	margin-top: 44px;
}

.arystan-carousel .arystan-product-card__image img {
	max-height: 227px;
}

/* Advantages, FAQ, facts, posts. */
.arystan-home__info {
	padding-block: 70px 120px;
}

.arystan-home__info .arystan-home__inner > .arystan-advantages {
	margin-top: 55px;
}

/* WPBakery added 35px under every text block inside the cards. */
.arystan-home__info .arystan-advantages .is-style-card-soft {
	padding-bottom: 58px;
}

.arystan-home__info .arystan-home__faq-title {
	margin-top: 105px;
}

.arystan-faq.arystan-faq {
	margin-top: 50px;
}

/* FAQ: rows with a round +/× toggle; the open one sits on a soft gray card. All questions start
   closed; an opened one is scrolled into view (assets/js/faq.js). */
.arystan-faq .wp-block-accordion-item {
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color 0.2s ease;
}

.arystan-faq .wp-block-accordion-item + .wp-block-accordion-item {
	margin-top: 6px;
}

/* Mouse only: on touch screens :hover sticks to the last tapped row. */
@media (hover: hover) {
	.arystan-faq .wp-block-accordion-item:hover {
		background-color: var(--wp--preset--color--surface);
	}
}

.arystan-faq .wp-block-accordion-item.is-open {
	background-color: var(--wp--preset--color--surface-alt);
}

.arystan-faq .wp-block-accordion-heading {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 23px;
}

/* The +/× circle in the top right corner, level with the first line of the question — centred on a
   long (4–5 line) question it hung in the middle of the text (owner, 2026-10-20). */
.arystan-faq .wp-block-accordion-heading__toggle {
	align-items: flex-start;
	gap: 16px;
	padding: 16px 20px;
	color: var(--wp--preset--color--heading);
}

/* No blue / underline on hover (core underlines the title) — the row background already reacts. */
.arystan-faq .wp-block-accordion-heading__toggle:is(:hover, :focus) {
	color: var(--wp--preset--color--heading);
}

.arystan-faq .wp-block-accordion-heading__toggle:is(:hover, :focus) .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.arystan-faq .wp-block-accordion-heading__toggle-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-block: -3.5px; /* (23px line − 30px circle) / 2: centred on the first line. */
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.arystan-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: rotate(45deg);
}

.arystan-faq .wp-block-accordion-panel {
	padding: 0 66px 10px 20px;
	color: var(--wp--preset--color--secondary);
}

.arystan-faq .wp-block-accordion-panel > * {
	margin-block: 0 10px;
}

@media (max-width: 599.98px) {
	.arystan-faq .wp-block-accordion-heading__toggle {
		padding: 14px 15px;
	}

	.arystan-faq .wp-block-accordion-panel {
		padding: 0 15px 8px;
	}
}

.arystan-home__info .arystan-home__facts-title {
	margin-top: 70px;
}

.arystan-facts,
.arystan-home__inner > .arystan-slider__host:has(.arystan-facts) {
	margin-top: 35px;
}

.wp-block-group.arystan-facts.arystan-slider__track {
	--arystan-per-view: 2;
}

.arystan-fact {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
}

.arystan-fact > * {
	margin: 0;
}

@media (max-width: 767.98px) {
	.wp-block-group.arystan-facts.arystan-slider__track {
		--arystan-per-view: 1;
	}
}

.arystan-home__posts {
	margin-top: 50px;
}

.arystan-home-posts.arystan-home-posts {
	gap: 30px;
}

.arystan-home-post > * {
	margin: 0;
}

/* Rounded like the blog cards: photo 10px, white plate 10px. */
.arystan-home-post__image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.arystan-home-post__image img {
	display: block;
	border-radius: var(--wp--custom--radius--md);
	transition: transform 0.3s ease;
}

.arystan-home-post__image:hover img {
	transform: scale(1.03);
}

.arystan-home-post__body.arystan-home-post__body {
	position: relative;
	width: 85%;
	margin: -100px auto 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.arystan-home-post__body > * {
	margin: 0;
}

.arystan-home-post__title {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 23px;
}

.arystan-home-post__excerpt {
	font-size: var(--wp--preset--font-size--body);
	line-height: 20px;
}

.arystan-home-post__excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 10px;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Branches, about text, 2GIS + map. */
.arystan-home__branches {
	padding-block: 85px 50px;
	background-color: var(--wp--preset--color--surface);
}

.arystan-home__branches .arystan-branches {
	grid-auto-rows: 1fr; /* every row as tall as the tallest card, also when they wrap into two columns */
	margin-top: 39px;
}

.arystan-home__branches .arystan-home__about {
	margin-top: 7px;
	padding-top: 23px;
}

.arystan-home__maps.arystan-home__maps {
	gap: 15px;
	margin-top: 35px;
}

/* Same padding top and bottom; the grid stretches every card to the tallest one. */
.arystan-home__branches .arystan-branch {
	box-sizing: border-box;
	padding: 22px 15px;
}

/* Tablets: five in a row left ~190px per card, words stacked one per line. Three in a row instead,
   the other two centred under them (six tracks, two per card). */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.arystan-home__branches .arystan-branches.arystan-branches {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 20px;
	}

	.arystan-home__branches .arystan-branch {
		grid-column: span 2;
		padding: 25px 20px;
	}

	.arystan-home__branches .arystan-branch:nth-child(4) {
		grid-column: 2 / span 2;
	}
}

.arystan-home__2gis.arystan-home__2gis {
	padding: 35px 15px 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: #009b26;
}

.arystan-home__2gis > * {
	margin: 0;
}

.arystan-home__map.arystan-home__map {
	padding: 35px 15px 32px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-alt);
}

@media (max-width: 781.98px) {
	.arystan-hero__columns.arystan-hero__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.arystan-hero__text .arystan-hero__title {
		font-size: 30px;
		line-height: 38px;
	}

	.arystan-features.arystan-features,
	.arystan-brands.arystan-brands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.arystan-brand {
		padding: 15px;
	}

	.arystan-home-posts.arystan-home-posts {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599.98px) {
	.arystan-features.arystan-features {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 404 ---------- */

.arystan-404 > * + * {
	margin-block-start: 20px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}