/* ==========================================================================
   Underscores base (normalize, базовые стили) — раньше жили в style.css и
   грузились отдельным блокирующим запросом. Порядок сохранён: они идут
   первыми, как и раньше.
   ========================================================================== */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

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

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
/* Цвета ссылок задаются компонентами. Дефолты стартовой темы
   (синий #4169e1, фиолетовый :visited) убраны: селектор a:visited
   специфичнее, чем .btn или .mobile-cta, и перекрашивал текст
   посещённых ссылок-кнопок — на тёмном фоне он выглядел чёрным.
   Точечные заплатки вроде .btn--orange:visited росли отсюда же. */
a {
	color: inherit;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*
 * maryjoy — design implementation (desktop, ~1920px)
 * Built on top of the _s base styles in style.css
 */

/* <picture> — обёртка для WebP (inc/webp.php), но вёрстка писалась под
   голый <img>: правила вида «.x img { height: 100% }». Chrome считает такие
   проценты от карточки, а Safari — от самой <picture>, у которой нет
   высоты, и рисует фото в натуральный размер: слайдер коллекций раздувался
   на тысячи пикселей. display: contents убирает обёртку из раскладки —
   <img> снова прямой потомок карточки, как до WebP. */
picture {
	display: contents;
}

:root {
	--color-orange: #f55338;
	--color-orange-light: #f7755f;
	--gradient-orange: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 100%);
	--color-yellow: #fbe84f;
	--color-black: #0d0d0d;
	--color-white: #ffffff;
	--color-grey-cat: #e0e0e0;
	--color-grey-text: #c4c4c4;
	--color-bg: #f9f9f9;
	--font-manrope: 'Manrope', sans-serif;
	--gutter: clamp(30px, 2.5vw, 48px);
	--radius-pill: 100px;
	--radius-l: clamp(35px, 2.9167vw, 56px);
	--radius-m: clamp(16.875px, 1.40625vw, 27px);
	--radius-s: clamp(11.25px, 0.9375vw, 18px);

	/*
	 * Fluid scaling: every desktop px value below (from the reference 1920px design)
	 * is expressed as clamp(0.625 * V, (V / 19.2)vw, V) so the whole layout reflows
	 * proportionally between a 1200px and 1920px viewport, without transform:scale.
	 * Below 1200px the mobile/tablet media query below takes over.
	 */
}

body {
	background: var(--color-bg);
	font-family: var(--font-manrope);
	color: var(--color-black);
}

/* ---------- Custom cursor ---------- */

.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--gradient-orange);
	pointer-events: none;
	z-index: 100000;
	opacity: 0;
	transform: translate(-100px, -100px) translate(-50%, -50%) scale(1);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease 0s;
	will-change: transform;
}

.custom-cursor.is-visible {
	opacity: 1;
}

.custom-cursor.is-hovering {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease 0s;
}

/* ---------- Custom scrollbar ---------- */

html {
	scrollbar-width: thin;
	scrollbar-color: var(--color-orange) var(--color-bg);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--gradient-orange);
	border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
	background: #d94a1a;
}

img {
	max-width: 100%;
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
}

a:visited,
a:active {
	color: inherit;
}

a:focus,
button:focus,
summary:focus {
	outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

input,
textarea,
select {
	border-radius: 0;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-black);
}

.front-page,
.site-header__bar,
.section,
.hero__content,
.banner__content,
.site-footer__inner {
	box-sizing: border-box;
}

/* ---------- Utilities ---------- */

.mobile-only {
	display: none;
}

.section__mobile-cta {
	margin-top: clamp(20px, 2.6vw, 50px);
}

/* ---------- Buttons & chips ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 0.8333vw, 16px) clamp(25px, 2.0833vw, 40px);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: clamp(14px, 0.8333vw, 16px);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.btn--yellow {
	background: var(--color-yellow);
	color: var(--color-black);
}

.btn--yellow:hover,
.btn--yellow:visited:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.btn--black,
.btn--dark {
	background: var(--color-black);
	color: var(--color-white);
}

.btn--black:hover,
.btn--dark:hover {
	background: var(--gradient-orange);
	color: var(--color-white);
}

.btn--orange {
	background: var(--gradient-orange);
	color: var(--color-white);
}

.btn--orange:hover,
.btn--orange:visited:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.btn--yellow:visited {
	color: var(--color-black);
}

.btn--black:visited,
.btn--dark:visited,
.btn--orange:visited {
	color: var(--color-white);
}

.btn--grey {
	background: var(--color-grey-cat);
	color: var(--color-black);
}

.btn--grey:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: clamp(6.25px, 0.5208vw, 10px) clamp(10px, 0.8333vw, 16px);
	border-radius: var(--radius-pill);
	background: var(--color-grey-cat);
	font-size: clamp(12px, 0.7292vw, 14px);
}

.chip--choice {
	cursor: pointer;
	font-weight: 500;
	font-size: clamp(14px, 0.8333vw, 16px);
	padding: clamp(6.25px, 0.5208vw, 10px) clamp(15px, 1.25vw, 24px);
	transition: all 0.3s ease 0s;
}

.chip--choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.chip--choice:has(input:checked) {
	background: var(--color-black);
	color: var(--color-white);
}

.chip--choice:hover {
	opacity: 0.6;
}

.carousel-nav {
	display: flex;
	align-items: center;
	gap: clamp(6.25px, 0.5208vw, 10px);
}

.carousel-nav__btn {
	width: clamp(37.5px, 3.125vw, 60px);
	height: clamp(37.5px, 3.125vw, 60px);
	display: block;
	flex-shrink: 0;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease 0s;
}

.carousel-nav__btn:not(.is-disabled):hover img {
	opacity: 0.6;
}

.carousel-nav__btn.is-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.carousel-nav__btn img {
	width: 100%;
	height: 100%;
	transition: all 0.3s ease 0s;
}

.carousel-nav__btn--prev {
	transform: rotate(180deg);
}

/* ---------- Header ---------- */

.site-header {
	padding: clamp(12px, 1vw, 18px) var(--gutter) clamp(20px, 1.8vw, 32px);
	position: relative;
	z-index: 10;
}

.site-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}


.site-header__bar {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.6667vw, 32px);
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
}

.site-header__brand-nav {
	display: flex;
	order: 2;
	align-items: center;
	gap: clamp(12.5px, 1.0417vw, 20px);
}

.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	order: 1;
	gap: clamp(7px, 0.6vw, 11px);
	box-sizing: border-box;
}

img.site-header__logo-mark {
	width: clamp(30px, 2.4vw, 42px);
	height: auto;
	flex-shrink: 0;
}

img.site-header__logo-word {
	/* У файла надписи preserveAspectRatio="none" и размеры в процентах:
	   собственных пропорций нет, он растянется под любой бокс. Высота
	   задаётся явно по viewBox 88.05 : 12.86 — иначе буквы плющит. */
	width: clamp(115px, 9.625vw, 185px);
	height: clamp(16.8px, 1.405vw, 27px);
	flex-shrink: 0;
}

.main-navigation ul#primary-menu {
	display: flex;
	align-items: center;
	gap: clamp(6.25px, 0.5208vw, 10px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation ul#primary-menu li {
	margin: 0;
}

.main-navigation ul#primary-menu a {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: clamp(10px, 0.8333vw, 16px) clamp(15px, 1.25vw, 24px);
	background: transparent;
	font-size: clamp(12px, 0.9375vw, 18px);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.main-navigation ul#primary-menu a:hover {
	color: var(--color-orange);
}

.site-header .menu-toggle {
	display: none;
}

.menu-toggle__icon-close {
	display: none;
}

.mobile-menu-panel {
	display: contents;
}

#site-navigation .mobile-menu-panel__collections,
#site-navigation .mobile-menu-panel__contact {
	display: none;
}

.site-header__cart {
	display: flex;
	order: 3;
	margin-left: auto;
	align-items: center;
	cursor: pointer;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__cart:hover {
	transform: scale(1.08);
}

.site-header__cart:active {
	transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
	.site-header__cart,
	.site-header__cart:hover,
	.site-header__cart:active {
		transition: none;
		transform: none;
	}
}

.site-header__cart:visited {
	color: var(--color-white);
}

@keyframes maryjoy-cart-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.22); }
	100% { transform: scale(1); }
}

.site-header__cart.is-bumped {
	animation: maryjoy-cart-bump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-header__cart-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

img.site-header__cart-icon {
	width: clamp(30px, 2.5vw, 48px);
	height: clamp(30px, 2.5vw, 48px);
}

.site-header__cart-badge {
	position: absolute;
	top: -4px;
	right: -8px;
	min-width: clamp(20px, 1.6667vw, 26px);
	height: clamp(20px, 1.6667vw, 26px);
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: var(--radius-pill);
	background: var(--color-orange);
	color: var(--color-white);
	font-size: clamp(11px, 0.8333vw, 14px);
	font-weight: 700;
	line-height: clamp(20px, 1.6667vw, 26px);
	text-align: center;
}

.site-header__cart-badge:empty {
	display: none;
}



.site-header__spacer {
	display: none;
}

.site-header__spacer.is-active {
	display: block;
}

.site-header--pinned {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	transform: translateY(-100%);
}

.site-header--pinned.site-header--pin-ready {
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.site-header--pinned.site-header--reveal {
	transform: translateY(0);
}

/* Закреплённая шапка на десктопе — полный дубль статической: логотип,
   меню и корзина на местах. Выезжает сверху штатной анимацией
   (.site-header--pin-ready), без тени и разделительной полосы,
   с закруглённым низом. */
@media (min-width: 641px) {
	.site-header--pinned {
		background: var(--color-white);
		box-shadow: none;
		border-bottom: none;
		border-radius: 0 0 60px 60px;
	}
}

/* ---------- Layout shell ---------- */

.front-page {
	overflow: hidden;
}

.section {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(50px, 4.1667vw, 80px) 0;
}

.section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(25px, 2.0833vw, 40px);
}

.section__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.section__title--small {
	font-size: clamp(20px, 1.6667vw, 32px);
}

.section__text {
	font-size: clamp(14px, 0.8333vw, 16px);
	line-height: 1.25;
	margin: clamp(10px, 0.8333vw, 16px) 0 0;
}

.section__text--bold {
	font-weight: 600;
	font-size: clamp(12.5px, 1.0417vw, 20px);
}

.section__link {
	color: var(--color-orange);
	font-weight: 500;
	font-size: clamp(14px, 0.8333vw, 16px);
	text-decoration: underline;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.section__link:hover {
	color: var(--color-orange);
}

.section__link:visited {
	color: var(--color-orange);
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	/* Отдельный контекст наложения: в iOS Safari видео без него рисовалось
	   поверх шапки, которая лежит над hero. */
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	margin: clamp(66.25px, 5.5208vw, 106px) var(--gutter) clamp(25px, 2.0833vw, 40px);
	border-radius: var(--radius-l);
	min-height: min(clamp(565px, 47.0833vw, 904px), calc(100vh - clamp(66.25px, 5.5208vw, 106px) - clamp(25px, 2.0833vw, 40px)));
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: clamp(75px, 6.25vw, 120px) clamp(30px, 2.5vw, 48px) 5vh;
	box-sizing: border-box;
}

.hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.6s ease 0s;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: clamp(75px, 6.25vw, 120px) clamp(30px, 2.5vw, 48px) 5vh;
	box-sizing: border-box;
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__slide video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero__dots {
	position: absolute;
	left: clamp(20px, 1.6667vw, 32px);
	bottom: clamp(20px, 1.6667vw, 32px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.6667vw, 12px);
}

@property --hero-dot-progress {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

.hero__dot {
	--hero-dot-progress: 0;
	position: relative;
	width: clamp(7.5px, 0.625vw, 12px);
	height: clamp(7.5px, 0.625vw, 12px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.3s ease 0s;
}

.hero__dot.is-active {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
	background: none;
}

.hero__dot.is-active::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	--hero-dot-progress: 0;
	background: conic-gradient(var(--color-white) calc(var(--hero-dot-progress) * 1%), rgba(255, 255, 255, 0.35) 0);
	-webkit-mask-image: radial-gradient(circle, transparent 0 54%, black 58% 100%);
	mask-image: radial-gradient(circle, transparent 0 54%, black 58% 100%);
	animation: hero-dot-fill 5s linear forwards;
}

.hero__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 34%;
	border-radius: 50%;
	background: var(--color-white);
}

/* Пока прелоадер не раскрылся, кольцо прогресса стоит: иначе первый слайд
   «проходил» под шторкой (см. js/hero-slider.js). */
.hero--waiting .hero__dot.is-active::before {
	animation-play-state: paused;
}

@keyframes hero-dot-fill {
	from {
		--hero-dot-progress: 0;
	}
	to {
		--hero-dot-progress: 100;
	}
}

.hero__content {
	position: relative;
	z-index: 1;
	max-width: clamp(443.75px, 36.9792vw, 710px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(6px, 0.5vw, 10px);
	text-align: center;
	color: var(--color-white);
}

.hero__eyebrow {
	color: var(--color-orange);
	font-weight: 600;
	font-size: clamp(14px, 0.8333vw, 16px);
	margin: 0;
}

.hero__heading {
	font-size: clamp(37.5px, 3.125vw, 60px);
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

.hero__heading-highlight {
	color: var(--color-orange);
}

.hero__subtitle {
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
	max-width: clamp(281.25px, 23.4375vw, 450px);
	margin: 0;
}

/* ---------- Product grid ---------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(10px, 0.8333vw, 16px);
}

.product-grid--carousel {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	/* Без этого overflow-y по спецификации тоже становится auto, и на
	   телефоне слайдер ловил вертикальный свайп как отдельный скролл. */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.product-grid--carousel::-webkit-scrollbar {
	display: none;
}

.product-grid--carousel > .product-card {
	flex: 0 0 calc((100% - 3 * clamp(10px, 0.8333vw, 16px)) / 4);
	scroll-snap-align: start;
}

.product-card {
	position: relative;
	background: var(--color-white);
	border-radius: var(--radius-m);
	padding: clamp(10px, 0.8333vw, 16px);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8333vw, 16px);
}

.product-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.product-card__media {
	position: relative;
	border-radius: var(--radius-s);
	background-color: var(--color-grey-cat);
	background-size: cover;
	background-position: center;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.product-card__photo {
	/* У исходных фото широкие белые поля, из-за них товар выглядел мелким.
	   Увеличиваем в полтора раза: медиа-область обрезает лишние поля,
	   сам товар становится крупнее. */
	transform: scale(1.5);
	transition: opacity 0.3s ease 0s;
}

.product-card:hover:not(:has(.product-card__add:hover)) .product-card__photo {
	opacity: 0.55;
}

.product-card__details {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	background: var(--color-black);
	color: var(--color-white);
	white-space: nowrap;
	font-weight: 600;
	font-size: clamp(14px, 0.8333vw, 16px);
	padding: clamp(8px, 0.625vw, 12px) clamp(15px, 1.25vw, 24px);
	border-radius: var(--radius-pill);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease 0s;
}

.product-card:hover:not(:has(.product-card__add:hover)) .product-card__details {
	opacity: 1;
}

.product-card__media-top {
	position: absolute;
	top: clamp(5px, 0.4167vw, 8px);
	left: clamp(5px, 0.4167vw, 8px);
	right: clamp(5px, 0.4167vw, 8px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 2;
}

.product-card__badge {
	background: var(--color-grey-cat);
	color: var(--color-black);
	border-radius: var(--radius-pill);
	padding: clamp(3.75px, 0.3125vw, 6px) clamp(10px, 0.8333vw, 16px);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 600;
}

.product-card__photo {
	width: 78%;
	aspect-ratio: 1 / 1;
}

.product-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.product-card__title {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 500;
	margin: 0 0 clamp(5px, 0.4167vw, 8px);
	cursor: pointer;
}

.product-card__description {
	font-size: 14px;
	color: var(--color-grey-text);
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-card__footer {
	position: relative;
	z-index: 2;
	/* Описания разной длины растягивали карточки по-разному, и цена
	   с кнопкой гуляли по высоте. Прижимаем их к низу. */
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-card__price {
	font-size: clamp(15px, 1.25vw, 24px);
	font-weight: 600;
}

.product-card__price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}

.product-card__add {
	width: clamp(35px, 2.9167vw, 56px);
	height: clamp(35px, 2.9167vw, 56px);
	border-radius: clamp(10px, 0.8333vw, 16px);
	border: 2px solid var(--color-black);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.product-card__add:hover {
	border-color: var(--color-orange);
}

.product-card__add:hover img {
	filter: invert(44%) sepia(84%) saturate(1955%) hue-rotate(332deg) brightness(99%) contrast(93%);
}

.product-card__add.is-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.product-card__add.is-added {
	background: var(--color-black);
	border-color: var(--color-black);
}

.product-card__add.is-added:hover {
	background: var(--gradient-orange);
	border-color: var(--color-orange);
}

.product-card__add.is-added:hover img {
	filter: brightness(0) invert(1);
}

.product-card__add img {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
	transition: all 0.3s ease 0s;
}

.product-card__add.is-added img {
	filter: brightness(0) invert(1);
}

.product-card__add:focus {
	outline: none;
}

/* WooCommerce's core add-to-cart.js inserts a "View cart" text link right
   after the button on success — the product card shows its own persistent
   in-cart state instead, so that link is never needed. */
.added_to_cart.wc-forward {
	display: none !important;
}

.cart-fly-clone {
	position: fixed;
	border-radius: var(--radius-s);
	overflow: hidden;
	will-change: transform, opacity;
}

/* ---------- Banners (mission / philosophy) ---------- */

.banner {
	position: relative;
	margin: clamp(25px, 2.0833vw, 40px) var(--gutter);
	border-radius: var(--radius-l);
	min-height: clamp(537.5px, 44.7917vw, 860px);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	padding: clamp(50px, 4.1667vw, 80px);
}

.banner__link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 2;
}

.banner--mission {
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.banner--mission:has(.banner__link:hover) {
	transform: translateY(-4px);
}

.banner--mission:has(.banner__link:focus-visible) {
	outline: 2px solid var(--color-yellow);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.banner--mission {
		transition: none;
	}

	.banner--mission:has(.banner__link:hover) {
		transform: none;
	}
}

.banner__content {
	max-width: clamp(443.75px, 36.9792vw, 710px);
	color: var(--color-white);
}

.banner__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0 0 clamp(15px, 1.25vw, 24px);
}

.banner__text {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Collections ---------- */

.collections__layout {
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 1.6667vw, 32px);
}

.section--collections__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;
	width: clamp(277.5px, 23.125vw, 444px);
	gap: clamp(20px, 1.6667vw, 32px);
}

.section--collections__intro .section__title {
	margin-bottom: 0;
}

.collection-grid {
	display: flex;
	gap: clamp(10px, 0.8333vw, 16px);
	flex: 1;
	overflow-x: auto;
	/* Без этого overflow-y по спецификации тоже становится auto, и на
	   телефоне слайдер ловил вертикальный свайп как отдельный скролл. */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.collection-grid::-webkit-scrollbar {
	display: none;
}

.collection-grid > .collection-card {
	flex: 0 0 calc((100% - 2 * clamp(10px, 0.8333vw, 16px)) / 3);
	scroll-snap-align: start;
}

.collection-card {
	display: flex;
	flex-direction: column;
	gap: clamp(7.5px, 0.625vw, 12px);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.collection-card:hover,
.collection-card:visited {
	color: var(--color-black);
}

.collection-card__media {
	position: relative;
	border-radius: var(--radius-l);
	overflow: hidden;
	aspect-ratio: 444 / 600;
}

.collection-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collection-card__arrow {
	position: absolute;
	top: clamp(18.75px, 1.5625vw, 30px);
	right: clamp(18.75px, 1.5625vw, 30px);
	width: clamp(18.75px, 1.5625vw, 30px);
	height: clamp(18.75px, 1.5625vw, 30px);
}

.collection-card__arrow img {
	width: 100%;
	height: 100%;
}

.collection-card__title {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 500;
	margin: 0;
}

.collection-card__description {
	font-size: 14px;
	margin: 0;
}

.collection-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(10px, 0.8333vw, 16px);
}

/* ---------- Contact / newsletter section ---------- */

.section--contact {
	display: grid;
	grid-template-columns: clamp(428.125px, 35.6771vw, 685px) 1fr;
	gap: clamp(20px, 1.6667vw, 32px);
}

.contact__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(15px, 1.25vw, 24px);
	align-self: start;
}

.contact__intro .section__title {
	margin: 0;
}

.contact__social-links {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, 0.625vw, 12px);
	margin-top: clamp(16.25px, 1.3542vw, 26px);
}

.contact__social-links a {
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.contact__social-links a:hover {
	color: var(--color-orange);
}

.contact__form {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 1.6667vw, 32px);
}

.contact__field-group {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.6667vw, 12px);
}

.contact__topics-group {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.6667vw, 12px);
}

.contact__field {
	position: relative;
}

.contact__field input,
.contact__field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--color-grey-cat);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	padding: clamp(20px, 1.6667vw, 26px) clamp(15px, 1.25vw, 24px) clamp(6px, 0.5vw, 8px) 20px;
	transition: all 0.3s ease 0s;
}

.contact__field textarea {
	border-radius: clamp(20px, 1.6667vw, 32px);
	height: 200px;
	resize: none;
	padding-top: clamp(20px, 1.6667vw, 26px);
}

.contact__field input::placeholder,
.contact__field textarea::placeholder {
	color: transparent;
}

.contact__field input:focus,
.contact__field textarea:focus {
	outline: none;
	border-color: var(--color-black);
}

.contact__field label {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 500;
	color: var(--color-grey-text);
	pointer-events: none;
	transform-origin: top left;
	transition: all 0.2s ease 0s;
}

.contact__field:has(textarea) label {
	top: clamp(20px, 1.6667vw, 26px);
	transform: translateY(0);
}

.contact__field:has(input:not(:placeholder-shown)) label,
.contact__field:has(input:focus) label,
.contact__field:has(textarea:not(:placeholder-shown)) label,
.contact__field:has(textarea:focus) label {
	top: clamp(6px, 0.5vw, 8px);
	transform: translateY(0) scale(0.85);
	color: var(--color-black);
}

.contact__label {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 600;
	margin: 0;
}

.contact__topics {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 0.8333vw, 16px);
}

.contact__consent {
	display: flex;
	align-items: center;
	gap: clamp(7.5px, 0.625vw, 12px);
	font-size: clamp(12px, 0.7292vw, 14px);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.contact__consent a {
	text-decoration: underline;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.contact__consent a:hover {
	color: var(--color-orange);
}

/* ---------- Scroll reveal (see js/scroll-reveal.js) ---------- */

.reveal {
	opacity: 0;
	transform: translateY(clamp(15px, 1.25vw, 24px));
	transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
}

.reveal.is-revealed {
	opacity: 1;
	/* none, а не translateY(0): с любым transform iOS Safari держит блок
	   отдельным слоем, а много таких слоёв на длинной странице — и он
	   перестаёт их дорисовывать, оставляя пустые области. */
	transform: none;
}

/* ---------- Слайдеры на тач-экранах ----------
   Свайп листает ровно одну карточку, а не прокручивает ленту как скролл. */
@media (hover: none) and (pointer: coarse) {
	.product-grid--carousel > *,
	.collection-grid > *,
	.atelier-gallery > *,
	.product-gallery > *,
	.about-cards > * {
		scroll-snap-stop: always;
	}
}

/* ---------- Custom checkbox (consent checkboxes) ---------- */

.custom-checkbox {
	position: relative;
	flex-shrink: 0;
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
	border: 1px solid var(--color-grey-cat);
	border-radius: 4px;
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease 0s;
}

.custom-checkbox::after {
	content: "";
	display: block;
	width: 30%;
	height: 55%;
	margin-top: -10%;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: all 0.3s ease 0s;
}

.contact__consent input[type="checkbox"],
.order-summary__consent input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.contact__consent:has(input:checked) .custom-checkbox,
.order-summary__consent:has(input:checked) .custom-checkbox,
.catalog-filters__checkbox:has(input:checked) .custom-checkbox {
	background: var(--color-black);
	border-color: var(--color-black);
}

.contact__consent:has(input:checked) .custom-checkbox::after,
.order-summary__consent:has(input:checked) .custom-checkbox::after,
.catalog-filters__checkbox:has(input:checked) .custom-checkbox::after {
	opacity: 1;
}

.contact__form .btn {
	align-self: flex-start;
}

.contact__form-status {
	font-size: clamp(12px, 0.7292vw, 14px);
	margin: 0;
	min-height: 1.4em;
}

.contact__form-status.is-error {
	color: var(--color-orange);
}

/* ---------- Contact "thank you" popup ---------- */

.contact-thanks-popup {
	position: fixed;
	inset: 0;
	z-index: 21000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: clamp(20px, 2vw, 40px) 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease 0s;
}

.contact-thanks-popup.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.contact-thanks-popup__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(13, 13, 13, 0.5);
}

.contact-thanks-popup__inner {
	position: relative;
	z-index: 1;
}

.contact-thanks-popup__card {
	background: var(--color-white);
	border-radius: var(--radius-l);
	padding: clamp(24px, 2vw, 40px);
	max-width: clamp(320px, 26vw, 400px);
	width: calc(100vw - 40px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(8px, 0.6667vw, 12px);
	text-align: left;
	transform: translateY(24px) scale(0.96);
	transition: all 0.3s ease 0s;
}

.contact-thanks-popup.is-open .contact-thanks-popup__card {
	transform: translateY(0) scale(1);
}

.contact-thanks-popup__title {
	font-size: clamp(20px, 1.6667vw, 28px);
	font-weight: 600;
	margin: 0;
}

.contact-thanks-popup__text {
	font-size: clamp(13px, 0.8333vw, 15px);
	color: var(--color-grey-text);
	margin: 0 0 clamp(8px, 0.6667vw, 12px);
}

.contact-thanks-popup__cta {
	width: 100%;
	text-align: center;
}

.contacts-page__map-section {
	padding-top: 0;
}

.contacts-page__map {
	width: 100%;
	height: clamp(320px, 33.3333vw, 640px);
	border-radius: var(--radius-l);
	overflow: hidden;
	/* Подложка на долю секунды, пока карта ждёт первого действия посетителя. */
	background: var(--color-grey-cat);
}

.contacts-page__map iframe {
	display: block;
	border: none;
}

/* ---------- Catalog ---------- */

.catalog__header {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(50px, 4.1667vw, 80px) 0 0;
}

.catalog__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
}

.catalog__description {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 500;
	max-width: clamp(796.25px, 66.3542vw, 1274px);
	margin: 0;
}

.catalog__layout {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(25px, 2.0833vw, 40px) 0 clamp(50px, 4.1667vw, 80px);
	display: flex;
	align-items: flex-start;
	gap: clamp(10px, 0.8333vw, 16px);
}

/* Обёртка нужна только мобильному drawer'у: на десктопе она прозрачна
   для раскладки, и пункты фильтра остаются прямыми детьми формы. */
/* Лента коллекций — только для мобильной раскладки каталога. */
.catalog-collections {
	display: none;
}

.catalog-collections::-webkit-scrollbar {
	display: none;
}

.catalog-collections__chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-black);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: background 200ms ease, color 200ms ease;
}

.catalog-collections__chip.is-active {
	background: var(--color-black);
	color: var(--color-white);
}

.catalog-filters__scroll {
	display: contents;
}

.catalog-filters {
	width: clamp(277.5px, 23.125vw, 444px);
	flex-shrink: 0;
	background: var(--color-white);
	border-radius: clamp(20px, 1.6667vw, 32px);
	padding: clamp(10px, 0.8333vw, 16px);
	display: flex;
	flex-direction: column;
	gap: clamp(15px, 1.25vw, 24px);
}

.catalog-filters__view-toggle {
	display: flex;
	background: var(--color-bg);
	border-radius: var(--radius-pill);
	padding: clamp(3.75px, 0.3125vw, 6px);
	gap: 0;
}

.catalog-filters__view-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(5px, 0.4167vw, 8px);
	padding: clamp(6.25px, 0.5208vw, 10px) clamp(15px, 1.25vw, 24px);
	border-radius: var(--radius-pill);
	border: none;
	background: none;
	font-family: var(--font-manrope);
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 500;
	color: var(--color-black);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.catalog-filters__view-btn img {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
}

.catalog-filters__view-btn.is-active {
	background: var(--color-white);
}

.catalog-filters__group {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8333vw, 16px);
}

.catalog-filters__label {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 600;
	margin: 0;
}

.catalog-filters__radio,
.catalog-filters__checkbox {
	display: flex;
	align-items: center;
	gap: clamp(5px, 0.4167vw, 8px);
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.catalog-filters__checkbox {
	justify-content: space-between;
}

.catalog-filters__checkbox-text {
	display: flex;
	align-items: center;
	gap: clamp(5px, 0.4167vw, 8px);
}

.catalog-filters__checkbox input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.catalog-filters__radio input {
	appearance: none;
	-webkit-appearance: none;
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
	flex-shrink: 0;
	margin: 0;
	border: 1.5px solid var(--color-black);
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.catalog-filters__radio input:checked {
	border-width: 2px;
}

.catalog-filters__radio input:checked::after {
	content: '';
	position: absolute;
	inset: clamp(3.125px, 0.2604vw, 5px);
	border-radius: 50%;
	background: var(--color-black);
}

.catalog-filters__count {
	color: var(--color-black);
	/* Цифра пересчитывается на каждый клик — без перехода она дёргается. */
	transition: opacity 0.18s ease;
}

/* Пункт, который ничего не добавит к текущей выдаче. Отмеченный пункт так
   никогда не гасится: снять его должно быть можно и при нулевой выдаче. */
.catalog-filters__checkbox.is-empty {
	opacity: 0.35;
	pointer-events: none;
}

/* Пока летит запрос, цифры относятся к предыдущему состоянию фильтра —
   приглушаем их, чтобы не читались как итоговые. */
.catalog-filters.is-loading .catalog-filters__count {
	opacity: 0.4;
}

/* Панель «2 фильтра» теперь всегда в разметке, чтобы живой фильтр мог
   переписать цифру, — прячем её классом, а не условием в шаблоне. */
.catalog-mobile-filter-bar__active.is-hidden {
	display: none;
}

.catalog-filters__divider {
	width: 100%;
	height: clamp(0.625px, 0.0521vw, 1px);
	border: none;
	border-top: 1px solid var(--color-grey-cat);
	margin: 0;
}

.catalog-filters__reset {
	display: inline-flex;
	align-items: center;
	gap: clamp(6.25px, 0.5208vw, 10px);
	color: var(--color-orange);
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
	border-bottom: 1px solid var(--color-orange);
	align-self: flex-start;
	padding-bottom: clamp(1.25px, 0.1042vw, 2px);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.catalog-filters__reset:hover,
.catalog-filters__reset:visited {
	color: var(--color-orange);
}

.catalog-filters__reset img {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
}

.catalog-results {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(15px, 1.25vw, 24px);
}

.catalog-results__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.catalog-availability {
	position: relative;
}

.catalog-availability__toggle {
	display: flex;
	align-items: center;
	gap: clamp(5px, 0.4167vw, 8px);
	background: var(--color-white);
	border: none;
	border-radius: var(--radius-pill);
	padding: clamp(6.25px, 0.5208vw, 10px) clamp(10px, 0.8333vw, 16px);
	font-family: var(--font-manrope);
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
	color: var(--color-black);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.catalog-availability.is-open .catalog-availability__toggle {
	background: var(--color-black);
	color: var(--color-white);
}

.catalog-availability.is-open .catalog-availability__toggle img {
	filter: brightness(0) invert(1);
	transform: rotate(180deg);
}

.catalog-availability__toggle img {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
	transition: all 0.3s ease 0s;
}

.catalog-availability__panel {
	position: absolute;
	top: calc(100% + clamp(6px, 0.5vw, 10px));
	left: 0;
	z-index: 50;
	min-width: clamp(180px, 14vw, 220px);
	max-width: calc(100vw - 32px);
	background: var(--color-white);
	border-radius: clamp(14px, 1.1667vw, 22px);
	padding: clamp(10px, 0.8333vw, 16px);
	box-shadow: 0 10px 40px rgba(13, 13, 13, 0.12);
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.6667vw, 12px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.3s ease 0s;
}

.catalog-availability.is-open .catalog-availability__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.catalog-availability__option {
	white-space: nowrap;
}

.catalog-mobile-filter-toggle,
.catalog-mobile-filter-bar,
.catalog-filters-backdrop,
.catalog-filters__mobile-header,
.catalog-filters__mobile-footer {
	display: none;
}

.catalog-results__count {
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
	margin: 0;
}

.catalog .product-grid {
	grid-template-columns: repeat(3, 1fr);
}

.catalog .pagination,
.catalog .navigation {
	display: flex;
	justify-content: center;
	gap: clamp(5px, 0.4167vw, 8px);
	margin-top: clamp(10px, 0.8333vw, 16px);
}

.catalog .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(27.5px, 2.2917vw, 44px);
	height: clamp(27.5px, 2.2917vw, 44px);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font-size: clamp(12px, 0.8333vw, 16px);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.catalog .pagination .page-numbers.current {
	background: var(--color-black);
	color: var(--color-white);
}

.catalog .pagination .prev.page-numbers,
.catalog .pagination .next.page-numbers {
	min-width: auto;
	height: clamp(31.25px, 2.6042vw, 50px);
	padding: 0 clamp(16px, 1.3333vw, 24px);
}

/* ---------- Catalog "Лайв" view ---------- */

.catalog-results__list {
	transition: opacity 0.25s ease 0s, transform 0.25s ease 0s;
}

.catalog-results__list.is-swapping {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.product-grid--live {
	display: flex;
	flex-direction: column;
	gap: clamp(15px, 1.25vw, 24px);
}

.product-card-live {
	display: flex;
	align-items: stretch;
	gap: clamp(20px, 1.6667vw, 32px);
	background: var(--color-white);
	border-radius: var(--radius-l);
	padding: clamp(12px, 1vw, 16px);
	box-sizing: border-box;
}

.product-card-live__gallery {
	position: relative;
	flex: 0 0 clamp(280px, 32vw, 460px);
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--color-bg);
}

.product-card-live__slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.product-card-live__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease 0s;
	pointer-events: none;
}

.product-card-live__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.product-card-live__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-card-live__nav {
	position: absolute;
	right: clamp(10px, 0.8333vw, 16px);
	bottom: clamp(10px, 0.8333vw, 16px);
	display: flex;
	align-items: center;
	gap: clamp(4px, 0.4167vw, 6px);
	background: var(--color-white);
	border: 1px solid rgba(13, 13, 13, 0.08);
	border-radius: var(--radius-pill);
	padding: clamp(5px, 0.4167vw, 8px);
	z-index: 2;
}

.product-card-live__arrow {
	width: clamp(32px, 2.6vw, 48px);
	height: clamp(32px, 2.6vw, 48px);
	padding: 0;
	border: none;
	background: none;
	display: block;
	flex-shrink: 0;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease 0s;
}

.product-card-live__arrow:hover img {
	opacity: 0.6;
}

.product-card-live__arrow--prev {
	transform: rotate(180deg);
}

.product-card-live__arrow img {
	width: 100%;
	height: 100%;
	transition: all 0.3s ease 0s;
}

.product-card-live__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(10px, 0.8333vw, 16px);
	display: flex;
	justify-content: center;
	gap: clamp(4px, 0.4167vw, 6px);
	z-index: 2;
}

.product-card-live__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-grey-cat);
	border: 1px solid rgba(13, 13, 13, 0.08);
	transition: all 0.3s ease 0s;
}

.product-card-live__dot.is-active {
	background: var(--gradient-orange);
	border-color: transparent;
	width: 18px;
	border-radius: var(--radius-pill);
}

.product-card-live__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(8px, 0.6667vw, 12px);
	padding: clamp(8px, 0.6667vw, 12px) clamp(8px, 0.6667vw, 12px) clamp(8px, 0.6667vw, 12px) 0;
}

.product-card-live__title-link {
	cursor: pointer;
}

.product-card-live__title {
	font-size: clamp(20px, 1.6667vw, 28px);
	font-weight: 600;
	margin: 0;
	transition: all 0.3s ease 0s;
}

.product-card-live__title-link:hover .product-card-live__title {
	color: var(--color-orange);
}

.product-card-live__description {
	color: var(--color-grey-text);
	font-size: clamp(14px, 0.8333vw, 16px);
	margin: 0;
}

.product-card-live__related {
	width: 100%;
	margin-top: clamp(4px, 0.4167vw, 6px);
}

.product-card-live__related-list {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.6667vw, 12px);
}

.product-card-live__related-item {
	width: clamp(48px, 4vw, 64px);
	height: clamp(48px, 4vw, 64px);
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 1px solid var(--color-grey-cat);
	transition: all 0.3s ease 0s;
}

.product-card-live__related-item:hover {
	border-color: var(--color-orange);
}

.product-card-live__related-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card-live__specs {
	width: 100%;
}

.product-card-live__footer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(10px, 0.8333vw, 16px);
	margin-top: auto;
	padding-top: clamp(8px, 0.6667vw, 12px);
}

.product-card-live__price {
	font-size: clamp(20px, 1.6667vw, 28px);
	font-weight: 600;
}

.product-card-live__add {
	gap: clamp(6px, 0.5vw, 8px);
}

.product-card-live__add img {
	width: clamp(16px, 1.2vw, 20px);
	height: clamp(16px, 1.2vw, 20px);
}

.product-card-live__add.is-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.product-card-live__body > .product-card__badge {
	align-self: flex-start;
}

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

.product-page__top {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(50px, 4.1667vw, 80px) 0 clamp(25px, 2.0833vw, 40px);
	display: flex;
	align-items: flex-start;
	gap: clamp(15px, 1.25vw, 24px);
}

.product-gallery {
	flex: 1 1 60%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(10px, 0.8333vw, 16px);
}

.product-gallery__item {
	position: relative;
	border-radius: var(--radius-l);
	overflow: hidden;
	aspect-ratio: 597 / 840;
	border: none;
	background: none;
	padding: 0;
	display: block;
	width: 100%;
	cursor: pointer;
}

.product-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-gallery__dots {
	display: none;
}

.product-info {
	flex: 1 1 40%;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8333vw, 16px);
	position: sticky;
	top: clamp(70px, 5vw, 96px);
	align-self: flex-start;
}

.chip--dark {
	background: var(--color-black);
	color: var(--color-white);
	padding: clamp(5px, 0.4167vw, 8px) clamp(10px, 0.8333vw, 16px);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 600;
}

.product-gallery__badge {
	position: absolute;
	top: clamp(10px, 0.8333vw, 16px);
	left: clamp(10px, 0.8333vw, 16px);
	z-index: 2;
}

.product-info__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.product-info__collection {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 600;
	text-decoration: underline;
	align-self: flex-start;
}

.product-related {
	display: flex;
	gap: clamp(5px, 0.4167vw, 8px);
}

.product-related__item {
	width: clamp(44px, 3.125vw, 60px);
	height: clamp(44px, 3.125vw, 60px);
	border-radius: 50%;
	overflow: hidden;
	display: block;
	border: 1px solid var(--color-grey-cat);
	transition: all 0.3s ease 0s;
}

.product-related__item:hover {
	border-color: var(--color-orange);
}

.product-related__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-info__price-row {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.8333vw, 16px);
	margin: clamp(5px, 0.4167vw, 8px) 0 0;
}

.product-info__price {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.split-badge {
	display: inline-flex;
	align-items: center;
	gap: clamp(2.5px, 0.2083vw, 4px);
	flex-shrink: 0;
	background: var(--color-black);
	color: var(--color-white);
	border-radius: var(--radius-pill);
	padding: clamp(2.5px, 0.2083vw, 4px) clamp(6.25px, 0.5208vw, 10px);
	font-size: 12px;
}

.split-badge__times {
	opacity: 0.8;
}

.split-badge .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.product-info__actions {
	display: flex;
	align-items: center;
	gap: clamp(15px, 1.25vw, 24px);
	margin-top: clamp(5px, 0.4167vw, 8px);
}

.product-info__manager-link {
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.product-info__manager-link:hover {
	color: var(--color-orange);
}

.product-specs {
	margin: clamp(5px, 0.4167vw, 8px) 0 0;
}

.product-specs__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(6.25px, 0.5208vw, 10px) 0;
	border-bottom: 1px solid var(--color-grey-text);
	font-size: clamp(14px, 0.8333vw, 16px);
}

.product-specs__row dt {
	font-weight: 500;
}

.product-specs__row dd {
	margin: 0;
	font-weight: 600;
}

.product-accordion__item {
	border-bottom: 1px solid var(--color-grey-text);
}

.product-accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(6.25px, 0.5208vw, 10px) 0;
	cursor: pointer;
	list-style: none;
}

.product-accordion__item summary::-webkit-details-marker {
	display: none;
}

.product-accordion__label {
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
}

img.product-accordion__chevron {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
	transition: transform 0.2s ease;
}

.product-accordion__item[open] .product-accordion__chevron {
	transform: rotate(180deg);
}

.product-accordion__panel {
	display: block !important;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease 0s;
}

.product-accordion__panel > p {
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
	font-size: 14px;
	color: var(--color-grey-text);
}

.product-info__description {
	font-size: clamp(14px, 0.8333vw, 16px);
	line-height: 1.5;
	margin-top: clamp(5px, 0.4167vw, 8px);
}

/* ---------- Product lightbox ---------- */

.product-lightbox {
	position: fixed;
	inset: 0;
	z-index: 20000;
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2vw, 48px);
	padding: clamp(20px, 3vw, 60px) clamp(70px, 7vw, 130px);
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease 0s;
}

.product-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.product-lightbox-open,
body.catalog-filters-open {
	overflow: hidden;
}

.product-lightbox__close {
	position: absolute;
	top: clamp(20px, 2vw, 40px);
	right: clamp(20px, 2vw, 40px);
	border: none;
	background: none;
	font-size: clamp(24px, 2vw, 32px);
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: all 0.3s ease 0s;
}

.product-lightbox__close:hover {
	color: var(--color-orange);
}

.product-lightbox__thumbs {
	position: absolute;
	left: clamp(20px, 2.5vw, 48px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.8333vw, 16px);
	max-height: 80vh;
	overflow-y: auto;
	scrollbar-width: none;
}

.product-lightbox__thumbs::-webkit-scrollbar {
	display: none;
}

.product-lightbox__thumb {
	width: clamp(44px, 3.5vw, 64px);
	height: clamp(44px, 3.5vw, 64px);
	border-radius: var(--radius-s);
	overflow: hidden;
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	opacity: 0.5;
	background: none;
	transition: all 0.3s ease 0s;
}

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

.product-lightbox__thumb.is-active,
.product-lightbox__thumb:hover {
	opacity: 1;
	border-color: var(--color-black);
}

.product-lightbox__arrow {
	width: clamp(40px, 3.5vw, 60px);
	height: clamp(40px, 3.5vw, 60px);
	display: block;
	border: none;
	background: none;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.3s ease 0s;
	z-index: 2;
}

.product-lightbox__arrow:hover img {
	opacity: 0.6;
}

.product-lightbox__arrow--prev {
	transform: rotate(180deg);
}

.product-lightbox__arrow img {
	width: 100%;
	height: 100%;
	display: block;
	transition: all 0.3s ease 0s;
}

.product-lightbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(15px, 1.5vw, 24px);
	max-width: min(720px, 60vw);
	width: 100%;
}

.product-lightbox__track {
	position: relative;
	width: auto;
	max-width: 100%;
	height: calc(100vh - clamp(150px, 15vw, 220px));
	max-height: 840px;
	aspect-ratio: 597 / 840;
}

.product-lightbox__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease 0s;
	pointer-events: none;
}

.product-lightbox__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.product-lightbox__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.product-lightbox__cta {
	flex-shrink: 0;
}

/* ---------- Manager popup ---------- */

.manager-popup {
	position: fixed;
	inset: 0;
	z-index: 21000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease 0s;
}

.manager-popup.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.manager-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0.5);
}

.manager-popup__inner {
	position: relative;
	z-index: 1;
}

.manager-popup__card {
	background: var(--color-white);
	border-radius: var(--radius-l);
	padding: clamp(30px, 2.5vw, 40px);
	max-width: clamp(420px, 40vw, 680px);
	width: calc(100vw - 40px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(15px, 1.25vw, 24px);
	text-align: center;
	transform: translateY(24px) scale(0.96);
	transition: all 0.3s ease 0s;
}

.manager-popup.is-open .manager-popup__card {
	transform: translateY(0) scale(1);
}

.manager-popup__title {
	font-size: clamp(16px, 1.25vw, 22px);
	font-weight: 600;
	margin: 0;
	max-width: 320px;
}

.manager-popup__subtitle {
	font-size: clamp(12px, 0.7292vw, 14px);
	text-decoration: underline;
	margin: 0;
}

.manager-popup__list {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.6667vw, 12px);
	width: 100%;
}

.manager-popup__item {
	display: grid;
	grid-template-columns: clamp(28px, 2.1vw, 34px) 1fr clamp(28px, 2.1vw, 34px);
	align-items: center;
	gap: clamp(10px, 0.8333vw, 16px);
	border: 1px solid var(--color-grey-cat);
	border-radius: var(--radius-pill);
	padding: clamp(8px, 0.6667vw, 12px) clamp(15px, 1.25vw, 24px);
	font-weight: 600;
	font-size: clamp(14px, 0.8333vw, 16px);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.manager-popup__item:hover {
	border-color: var(--color-black);
	background: var(--color-bg);
}

.manager-popup__label {
	grid-column: 2;
	text-align: center;
}

.manager-popup__icon {
	grid-column: 1;
	width: clamp(28px, 2.1vw, 34px);
	height: clamp(28px, 2.1vw, 34px);
	border-radius: 50%;
	background: var(--color-black);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: clamp(12px, 0.9vw, 14px);
	font-weight: 700;
}

.manager-popup__icon svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
}

/* ---------- Cookie consent ---------- */

.cookie-consent {
	position: fixed;
	left: var(--gutter);
	bottom: var(--gutter);
	z-index: 900;
	max-width: clamp(320px, 24vw, 456px);
	background: var(--color-white);
	border-radius: var(--radius-l);
	padding: clamp(20px, 1.6667vw, 32px);
	box-shadow: 0 20px 60px rgba(13, 13, 13, 0.15);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8333vw, 16px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-consent.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cookie-consent__title {
	font-size: clamp(16px, 1.1667vw, 20px);
	font-weight: 600;
	margin: 0;
}

.cookie-consent__text {
	font-size: clamp(12px, 0.8333vw, 14px);
	color: var(--color-grey-text);
	margin: 0;
}

.cookie-consent__actions {
	display: flex;
	gap: clamp(8px, 0.6667vw, 12px);
}

.cookie-consent__actions .btn {
	flex: 1;
}

/* ---------- Site popups (maryjoy_popup CPT — big / small / subscribe) ---------- */

.site-popup {
	position: fixed;
	inset: 0;
	z-index: 21000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease 0s;
}

.site-popup.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.site-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0.5);
}

.site-popup__inner {
	position: relative;
	z-index: 1;
}

.site-popup__card {
	position: relative;
	background: var(--color-white);
	border-radius: var(--radius-l);
	box-sizing: border-box;
	transform: translateY(24px) scale(0.96);
	transition: all 0.3s ease 0s;
}

.site-popup.is-open .site-popup__card {
	transform: translateY(0) scale(1);
}

.site-popup__title {
	font-weight: 600;
	margin: 0;
}

.site-popup__text {
	margin: 0;
}

/* ---- big / small: full-bleed photo, dark-gradient overlay content ---- */

.site-popup--big .site-popup__card,
.site-popup--small .site-popup__card {
	padding: clamp(8px, 0.6667vw, 10px);
}

/* Width is the binding constraint normally (90vw/620px cap), but on short
   viewports the aspect-ratio'd media would otherwise grow taller than the
   screen — the third min() term is the width that yields exactly 80vh at
   this type's aspect ratio, so height never exceeds that regardless of
   viewport shape. */
.site-popup--big .site-popup__card {
	width: min(90vw, 620px, calc(80vh * 3 / 4));
	max-width: 620px;
}

.site-popup--small .site-popup__card {
	width: min(90vw, 380px, calc(80vh * 4 / 3));
	max-width: 380px;
}

.site-popup__media {
	position: relative;
	width: 100%;
	border-radius: calc(var(--radius-l) - clamp(6px, 0.5vw, 8px));
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.site-popup--big .site-popup__media {
	aspect-ratio: 3 / 4;
}

.site-popup--small .site-popup__media {
	aspect-ratio: 4 / 3;
}

.site-popup__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(20px, 2vw, 32px) clamp(16px, 1.5vw, 24px);
	background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.78) 70%);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 0.6667vw, 12px);
}

.site-popup--big .site-popup__title {
	color: var(--color-white);
	font-size: clamp(20px, 1.6667vw, 28px);
}

.site-popup--big .site-popup__text {
	color: var(--color-white);
	opacity: 0.9;
	font-size: clamp(12px, 0.8333vw, 15px);
}

.site-popup--small .site-popup__title {
	color: var(--color-white);
	font-size: clamp(16px, 1.25vw, 20px);
}

.site-popup--small .site-popup__text {
	color: var(--color-white);
	opacity: 0.9;
	font-size: clamp(12px, 0.75vw, 13px);
}

.site-popup--big .site-popup__button,
.site-popup--small .site-popup__button {
	margin-top: clamp(4px, 0.4167vw, 6px);
}

/* ---- subscribe: white card, banner on top, content stacked below ---- */

.site-popup--subscribe .site-popup__card {
	padding: clamp(20px, 1.6667vw, 32px);
	max-width: clamp(435px, 33vw, 538px);
	width: calc(100vw - 40px);
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1vw, 18px);
	text-align: center;
}

.site-popup__banner {
	width: 100%;
	aspect-ratio: 16 / 7;
	border-radius: var(--radius-m);
	background: linear-gradient(120deg, var(--color-orange) 0%, var(--color-yellow) 35%, var(--color-black) 70%, var(--color-orange) 100%);
	background-size: cover;
	background-position: center;
}

.site-popup--subscribe .site-popup__title {
	font-size: clamp(20px, 1.5vw, 26px);
}

.site-popup--subscribe .site-popup__text {
	font-size: clamp(13px, 0.8333vw, 15px);
	color: var(--color-grey-text);
}

.site-popup--subscribe .site-popup__button {
	width: 100%;
}

/* ---------- Preorder ("Под заказ") popup ---------- */

.preorder-popup {
	position: fixed;
	inset: 0;
	z-index: 21000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: clamp(20px, 2vw, 40px) 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease 0s;
}

.preorder-popup.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.preorder-popup__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(13, 13, 13, 0.5);
}

.preorder-popup__inner {
	position: relative;
	z-index: 1;
}

.preorder-popup__card {
	background: var(--color-white);
	border-radius: var(--radius-l);
	padding: clamp(24px, 2vw, 40px);
	max-width: clamp(360px, 30vw, 460px);
	width: calc(100vw - 40px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 0.4vw, 8px);
	transform: translateY(24px) scale(0.96);
	transition: all 0.3s ease 0s;
}

.preorder-popup.is-open .preorder-popup__card {
	transform: translateY(0) scale(1);
}

.preorder-popup__title {
	font-size: clamp(20px, 1.6667vw, 28px);
	font-weight: 600;
	margin: 0;
}

.preorder-popup__subtitle {
	font-size: clamp(13px, 0.8333vw, 15px);
	color: var(--color-grey-text);
	margin: 0 0 clamp(12px, 1vw, 18px);
}

.preorder-popup__product {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.8333vw, 16px);
	background: var(--color-bg);
	border-radius: var(--radius-m);
	padding: clamp(8px, 0.6667vw, 12px);
	margin-bottom: clamp(16px, 1.3333vw, 24px);
}

.preorder-popup__product-photo {
	width: clamp(48px, 4vw, 64px);
	height: clamp(48px, 4vw, 64px);
	border-radius: var(--radius-m);
	object-fit: cover;
	flex-shrink: 0;
	background: var(--color-white);
}

.preorder-popup__product-name {
	font-weight: 600;
	font-size: clamp(14px, 0.8333vw, 16px);
	margin: 0 0 2px;
}

.preorder-popup__product-price {
	font-size: clamp(13px, 0.8333vw, 15px);
	color: var(--color-grey-text);
	margin: 0;
}

.preorder-popup__form {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8333vw, 16px);
}

.preorder-popup__submit {
	width: 100%;
	text-align: center;
	margin-top: clamp(4px, 0.4vw, 8px);
}

.preorder-popup__status {
	font-size: clamp(12px, 0.7292vw, 14px);
	text-align: center;
	margin: 0;
	min-height: 1.4em;
}

.preorder-popup__status.is-success {
	color: #1a9e46;
}

.preorder-popup__status.is-error {
	color: var(--color-orange);
}

/* ---------- WooCommerce notices ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: clamp(15px, 1.25vw, 24px) auto 0;
	padding: clamp(10px, 0.8333vw, 16px) clamp(15px, 1.25vw, 24px);
	border-radius: clamp(10px, 0.8333vw, 16px);
	background: var(--color-white);
	border: 1px solid var(--color-grey-cat);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(10px, 0.8333vw, 16px);
	font-size: 14px;
}

.woocommerce-message {
	border-color: var(--color-yellow);
}

.woocommerce-error {
	border-color: var(--color-orange);
	color: var(--color-orange);
}

.woocommerce-message a.button,
.woocommerce-error a.button {
	background: var(--color-black);
	color: var(--color-white);
	border-radius: var(--radius-pill);
	padding: clamp(6.25px, 0.5208vw, 10px) clamp(15px, 1.25vw, 24px);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Cart ---------- */

.cart-page__header {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(50px, 4.1667vw, 80px) 0 0;
}

.cart-page__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.cart-page__layout {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(25px, 2.0833vw, 40px) 0 0;
	display: flex;
	align-items: flex-start;
	gap: clamp(10px, 0.8333vw, 16px);
}

.cart-page__items {
	flex: 1 1 66%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(10px, 0.8333vw, 16px);
	min-width: 0;
}

.cart-page__items.is-updating,
.order-summary.is-updating {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease 0s;
}

.cart-table {
	width: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-grey-cat);
	border-radius: clamp(20px, 1.6667vw, 32px);
	padding: clamp(10px, 0.8333vw, 16px) 0;
	display: flex;
	flex-direction: column;
}

.cart-table__head {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr 1.3fr 32px;
	gap: clamp(10px, 0.8333vw, 16px);
	padding: 0 clamp(10px, 0.8333vw, 16px) clamp(10px, 0.8333vw, 16px);
	border-bottom: 1px solid var(--color-grey-cat);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 500;
}

.cart-item {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr 1.3fr 32px;
	gap: clamp(10px, 0.8333vw, 16px);
	align-items: center;
	padding: clamp(10px, 0.8333vw, 16px);
	border-bottom: 1px solid var(--color-grey-cat);
}

.cart-item:last-of-type {
	border-bottom: none;
}

.cart-empty {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(25px, 2.0833vw, 40px) var(--gutter) clamp(50px, 4.1667vw, 80px);
	background: var(--color-white);
	border: 1px solid var(--color-grey-cat);
	border-radius: clamp(20px, 1.6667vw, 32px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(15px, 1.25vw, 24px);
	text-align: center;
}

.cart-empty__message {
	font-size: clamp(20px, 1.6667vw, 32px);
	font-weight: 600;
	margin: 0;
}

.cart-item__product {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.8333vw, 16px);
}

.cart-item__thumb {
	width: clamp(75px, 6.25vw, 120px);
	height: clamp(75px, 6.25vw, 120px);
	border-radius: clamp(10px, 0.8333vw, 16px);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--color-bg);
}

.cart-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-item__name {
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 600;
	margin: 0 0 clamp(7.5px, 0.625vw, 12px);
}

.cart-item__collection {
	display: flex;
	align-items: center;
	gap: clamp(5px, 0.4167vw, 8px);
	font-size: 12px;
	margin: 0;
}

.cart-item__collection .tag {
	background: var(--color-grey-cat);
	border-radius: clamp(5px, 0.4167vw, 8px);
	padding: clamp(3.75px, 0.3125vw, 6px) clamp(6.25px, 0.5208vw, 10px);
	font-size: 12px;
	font-weight: 700;
}

.qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: clamp(7.5px, 0.625vw, 12px);
	border: 1px solid var(--color-black);
	border-radius: clamp(6.25px, 0.5208vw, 10px);
	padding: clamp(5px, 0.4167vw, 8px) clamp(7.5px, 0.625vw, 12px);
	width: fit-content;
}

.qty-stepper__btn {
	width: clamp(10px, 0.8333vw, 16px);
	height: clamp(10px, 0.8333vw, 16px);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.qty-stepper__btn img {
	width: 100%;
	height: 100%;
}

input.qty-stepper__input {
	width: clamp(15px, 1.25vw, 24px);
	border: none;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 500;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}

input.qty-stepper__input:focus {
	outline: none;
	border: none;
}

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

.cart-item__price {
	display: flex;
	align-items: center;
	gap: clamp(3.75px, 0.3125vw, 6px);
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 600;
}

.cart-item__price-note img {
	width: clamp(10px, 0.8333vw, 16px);
	height: clamp(10px, 0.8333vw, 16px);
	cursor: help;
}

.cart-item__specs {
	font-size: 14px;
	text-align: left;
}

.cart-item__specs p {
	margin: 0 0 clamp(6.25px, 0.5208vw, 10px);
}

.cart-item__specs p:last-child {
	margin-bottom: 0;
}

.cart-item__remove img {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
}

.cart-collaterals {
	flex: 1 1 34%;
	min-width: 0;
}

.order-summary {
	background: var(--color-white);
	border: 1px solid var(--color-grey-cat);
	border-radius: clamp(20px, 1.6667vw, 32px);
	padding: clamp(15px, 1.25vw, 24px);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8333vw, 16px);
}

.order-summary__title {
	font-size: clamp(15px, 1.25vw, 24px);
	font-weight: 600;
	margin: 0;
}

.order-summary__coupon-hint {
	font-size: 12px;
	color: var(--color-grey-text);
	margin: 0;
}

.order-summary__coupon {
	display: flex;
	gap: clamp(5px, 0.4167vw, 8px);
}

.order-summary__coupon-field {
	position: relative;
	flex: 1;
}

input.order-summary__coupon-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--color-grey-cat);
	border-radius: 1000px;
	padding: clamp(20px, 1.6667vw, 26px) clamp(15px, 1.25vw, 24px) clamp(6px, 0.5vw, 8px) 20px;
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	transition: all 0.3s ease 0s;
}

input.order-summary__coupon-input:focus {
	outline: none;
	border-color: var(--color-black);
}

input.order-summary__coupon-input::placeholder {
	color: transparent;
}

.order-summary__coupon-field label {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 500;
	color: var(--color-grey-text);
	pointer-events: none;
	transform-origin: top left;
	transition: all 0.2s ease 0s;
}

.order-summary__coupon-field:has(input:not(:placeholder-shown)) label,
.order-summary__coupon-field:has(input:focus) label {
	top: clamp(6px, 0.5vw, 8px);
	transform: translateY(0) scale(0.85);
	color: var(--color-black);
}

.order-summary__coupon-btn {
	padding: clamp(10px, 0.8333vw, 16px) clamp(15px, 1.25vw, 24px);
	white-space: nowrap;
}

.order-summary__coupon-feedback {
	margin: clamp(-5px, -0.4167vw, -8px) 0 0;
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 500;
}

.order-summary__coupon-feedback--success {
	color: var(--color-black);
}

.order-summary__coupon-feedback--error {
	color: #e5484d;
}

.order-summary__rows {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8333vw, 16px);
}

.order-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
}

.order-summary__row strong {
	font-size: clamp(15px, 1.25vw, 24px);
	font-weight: 700;
}

.order-summary__row--discount strong {
	display: inline-flex;
	align-items: center;
	gap: clamp(5px, 0.4167vw, 8px);
	color: var(--color-black);
}

.order-summary__coupon-remove {
	font-size: clamp(15px, 1.25vw, 24px);
	line-height: 1;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.order-summary__coupon-remove:hover {
	color: var(--color-orange);
}

.order-summary__divider {
	border: none;
	border-top: 1px solid var(--color-grey-cat);
	margin: 0;
}

.order-summary__consent {
	display: flex;
	align-items: flex-start;
	gap: clamp(7.5px, 0.625vw, 12px);
	font-size: clamp(12px, 0.7292vw, 14px);
	color: var(--color-grey-text);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.order-summary__consent .custom-checkbox {
	margin-top: clamp(1.25px, 0.1042vw, 2px);
}

.order-summary__consent {
	border-radius: 12px;
}

/* Не отмечена галочка согласия при попытке перейти к оплате. Подсветка —
   кольцом через box-shadow, чтобы блок не сдвигал соседей. */
.order-summary__consent.is-invalid {
	color: var(--color-black);
	background: rgba(229, 72, 77, 0.08);
	box-shadow: 0 0 0 8px rgba(229, 72, 77, 0.08), 0 0 0 9px #e5484d;
}

.order-summary__consent.is-invalid .custom-checkbox {
	border-color: #e5484d;
	border-width: 2px;
	background: var(--color-white);
}

.order-summary__consent.is-shaking {
	animation: consent-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes consent-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60% { transform: translateX(5px); }
}

.order-summary__consent-error {
	margin: clamp(10px, 0.8333vw, 16px) 0 0;
	color: #d6363c;
	font-size: clamp(13px, 0.7813vw, 15px);
	font-weight: 600;
	line-height: 1.4;
}

.order-summary__consent-error[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.order-summary__consent.is-shaking {
		animation: none;
	}
}

.order-summary__consent a {
	color: var(--color-black);
	text-decoration: underline;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.order-summary__consent a:hover {
	color: var(--color-orange);
}

.order-summary__checkout {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.8333vw, 16px);
	flex-wrap: wrap;
}

.order-summary__checkout-btn {
	flex: 1;
	text-align: center;
}

/* ---------- Checkout (WooCommerce Blocks) ---------- */

.checkout-page__header {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(50px, 4.1667vw, 80px) var(--gutter) 0;
	box-sizing: border-box;
}

.checkout-page__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.checkout-page .wp-block-woocommerce-checkout.wc-block-checkout {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(25px, 2.0833vw, 40px) var(--gutter) clamp(50px, 4.1667vw, 80px);
	box-sizing: border-box;
}

.checkout-page .wc-block-checkout__main,
.checkout-page .wc-block-checkout__sidebar {
	font-family: var(--font-manrope);
	color: var(--color-black);
}

.checkout-page .wc-block-components-order-summary {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

.checkout-page .wc-block-components-checkout-step__title {
	font-family: var(--font-manrope);
	font-size: clamp(18.75px, 1.5625vw, 30px);
	font-weight: 600;
}

.checkout-page .wc-block-components-checkout-step__heading {
	margin-bottom: clamp(10px, 0.8333vw, 16px);
}

.checkout-page .wc-block-components-checkout-step__content {
	margin-bottom: clamp(25px, 2.0833vw, 40px);
}

.checkout-page .wc-block-components-text-input input,
.checkout-page .wc-block-components-textarea,
.checkout-page .wc-blocks-components-select__select {
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	border: 1px solid var(--color-grey-cat) !important;
	border-radius: var(--radius-pill) !important;
	box-shadow: none !important;
	padding-left: 24px !important;
}

/* The country field's wrapper doesn't carry .wc-block-components-text-input
   like its siblings, so it misses their built-in 12px margin-top — leaving
   it flush against the row above. */
.checkout-page .wc-block-components-country-input {
	margin-top: 12px !important;
}

.checkout-page .wc-block-components-textarea {
	border-radius: clamp(20px, 1.6667vw, 32px) !important;
	padding-top: clamp(10px, 0.8333vw, 16px) !important;
}

.checkout-page .wc-block-components-text-input input:focus,
.checkout-page .wc-block-components-textarea:focus,
.checkout-page .wc-blocks-components-select__select:focus {
	border-color: var(--color-black) !important;
	box-shadow: none !important;
	outline: none;
}

.checkout-page .wc-block-components-text-input label,
.checkout-page .wc-blocks-components-select__label {
	font-family: var(--font-manrope);
	left: 24px !important;
}

.checkout-page .wc-block-components-checkbox__input {
	border-radius: 4px !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
}

.checkout-page .wc-block-components-checkbox__input:checked {
	background: var(--color-black) !important;
	border-color: var(--color-black) !important;
}

.checkout-page .wc-block-components-checkbox__mark {
	fill: var(--color-white);
}

.checkout-page .wc-block-components-checkbox__label,
.checkout-page .wc-block-checkout__add-note,
.checkout-page .wc-block-checkout__terms {
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	color: var(--color-black);
}

.checkout-page .checkout-terms-highlight {
	color: var(--color-orange);
	text-decoration: underline;
}

.checkout-page a {
	color: var(--color-black);
	text-decoration: underline;
}

.checkout-page a:hover {
	color: var(--color-orange);
}

.checkout-page .wc-block-components-button {
	font-family: var(--font-manrope);
	border-radius: var(--radius-pill) !important;
	transition: all 0.3s ease 0s;
}

/* ---------- Оформление: способы оплаты — карточками ----------
   Блок WooCommerce рисует способы тонкими строками мелким шрифтом, и выбор
   легко не заметить. Здесь каждый способ — отдельная карточка с крупной
   подписью и заметным переключателем; выбранная обведена чёрным. */
.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 0;
	box-shadow: none;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control::after,
.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after {
	display: none;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	position: relative;
	border: 1.5px solid var(--color-grey-cat);
	border-radius: var(--radius-m);
	background: var(--color-white);
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:hover {
	border-color: #9a9a9a;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked),
.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--color-black);
	box-shadow: 0 0 0 1px var(--color-black) !important;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	margin: 0;
	padding: 18px 20px 18px 58px;
	cursor: pointer;
	box-shadow: none !important;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-black);
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__input {
	left: 20px;
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin: 0;
	border: 1.5px solid #b5b5b5;
	border-radius: 50%;
	background: var(--color-white);
	transition: border 0.15s ease;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__input::before {
	display: none;
}

/* Выбранный — толстое чёрное кольцо с белой точкой внутри. */
.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked {
	border: 7px solid var(--color-black);
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.checkout-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
	padding: 0 20px 18px 58px;
	font-size: 14px;
	line-height: 1.45;
	color: #6b6b6b;
}

.checkout-page .wc-block-components-checkout-place-order-button {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	font-size: clamp(16px, 1.0417vw, 20px) !important;
	font-weight: 600;
	padding: clamp(12px, 1.0417vw, 20px) clamp(25px, 2.0833vw, 40px) !important;
}

.checkout-page .wc-block-components-checkout-place-order-button:hover {
	background: var(--gradient-orange) !important;
	color: var(--color-white) !important;
}

.checkout-page .wc-block-components-totals-coupon .wc-block-components-button {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
}

.checkout-page .wc-block-components-totals-coupon .wc-block-components-button:hover {
	background: var(--gradient-orange) !important;
	color: var(--color-white) !important;
}

.checkout-page .wc-block-components-totals-coupon input {
	font-family: var(--font-manrope);
	border: 1px solid var(--color-grey-cat) !important;
	border-radius: var(--radius-pill) !important;
	box-shadow: none !important;
	padding-left: 20px !important;
}

.checkout-page .wc-block-components-totals-coupon input:focus {
	border-color: var(--color-black) !important;
	box-shadow: none !important;
}

/* The white "card" look lives on the inner content block, not on
   .wc-block-components-sidebar itself — that element's own padding-left is
   WC's built-in spacing between the form and this column (part of their
   flex-wrap width math; overriding it here previously pushed the sidebar
   onto its own row). Keeping that padding untouched and drawing the card
   inside it means the gap stays outside the visible white box instead of
   being swallowed into its left edge. */
.checkout-page .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--color-white);
	border: none !important;
	border-radius: clamp(20px, 1.6667vw, 32px);
	overflow: hidden;
}

.checkout-page .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: #1a9e46;
	font-weight: 600;
}

.checkout-page .wc-block-components-sidebar .wc-block-components-title,
.checkout-page .wc-block-components-checkout-order-summary__title {
	font-family: var(--font-manrope);
	font-size: clamp(15px, 1.25vw, 24px);
	font-weight: 600;
	padding: clamp(16px, 1.3333vw, 24px) 16px 0 !important;
}

/* WC's default toggle carries its own border-top AND border-bottom (a
   plain-list divider) — against our rounded, overflow:hidden white card
   those straight edges land right on the curved corners and look crooked.
   Only show a divider once actually expanded, when it sits above real
   content instead of the card's own rounded edge. */
.checkout-page .wc-block-components-checkout-order-summary__title {
	border-top: none !important;
	border-bottom: none !important;
}

.checkout-page .wc-block-components-checkout-order-summary__title[aria-expanded="true"] {
	border-bottom: 1px solid rgba(13, 13, 13, 0.1) !important;
}

/* WC swaps the order-summary heading between two different markups (a
   collapsible toggle vs a plain step heading) depending on measured
   container width, not just viewport — cover both so the 16px inset is
   never breakpoint- or render-path-dependent. */
.checkout-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__heading {
	padding: clamp(16px, 1.3333vw, 24px) 16px 0;
}

/* WC Blocks gives .__title-text its own 16px left margin on desktop but
   drops it to 0 below their mobile breakpoint — relying on it would make
   the left inset breakpoint-dependent, so we neutralize it and let the
   padding above be the single source of truth at every width. */
.checkout-page .wc-block-components-checkout-order-summary__title-text {
	margin-left: 0 !important;
}

.checkout-page .wc-block-components-totals-item {
	font-family: var(--font-manrope);
	font-size: clamp(14px, 0.8333vw, 16px);
}

.checkout-page .wc-block-components-notice-banner {
	font-family: var(--font-manrope);
	border-radius: var(--radius-s);
}

.checkout-page .wc-block-components-notice-banner.is-error {
	border-color: #e5484d;
}

/* ---------- Legal pages (Privacy Policy, etc.) ---------- */

.legal-page__header {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(50px, 4.1667vw, 80px) 0 0;
}

.legal-page__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.legal-page__content {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(25px, 2.0833vw, 40px) 0 clamp(50px, 4.1667vw, 80px);
	font-family: var(--font-manrope);
}

.legal-page__content > * {
	max-width: clamp(700px, 55vw, 900px);
}

.legal-page__content h2 {
	font-size: clamp(20px, 1.6667vw, 32px);
	font-weight: 600;
	margin: clamp(25px, 2.0833vw, 40px) 0 clamp(10px, 0.8333vw, 16px);
}

.legal-page__content h2:first-child {
	margin-top: 0;
}

.legal-page__content p {
	font-size: clamp(14px, 0.8333vw, 16px);
	line-height: 1.6;
	color: var(--color-black);
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
}

.legal-page__content ul {
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
	padding-left: 20px;
}

.legal-page__content li {
	font-size: clamp(14px, 0.8333vw, 16px);
	line-height: 1.6;
	margin-bottom: 8px;
}

.legal-page__content a {
	color: var(--color-black);
	text-decoration: underline;
	transition: all 0.3s ease 0s;
}

.legal-page__content a:hover {
	color: var(--color-orange);
}

/* ---------- Preloader (front page only) ---------- */

.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #d94a1a;
	clip-path: inset(0 0 0 0);
	-webkit-clip-path: inset(0 0 0 0);
	will-change: clip-path;
}

.preloader.is-hiding {
	clip-path: inset(0 0 100% 0);
	-webkit-clip-path: inset(0 0 100% 0);
	transition: clip-path 1.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* Фон вынесен из инлайна в стили, чтобы мобильная версия могла
	   подменить его на лёгкий вариант: 136 КБ вместо 415. */
	background-image: url('../images/home/preloader-bg.webp');
}

.preloader__logo {
	position: relative;
	z-index: 1;
	width: clamp(180px, 15vw, 280px);
	height: auto;
	opacity: 0;
	/* Анимация, а не transition по классу из JS: идёт с первой отрисовки,
	   не дожидаясь скриптов в подвале. preloader.js ждёт её окончания и
	   только потом убирает шторку. */
	animation: preloader-logo-in 1.2s ease forwards;
}

@keyframes preloader-logo-in {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.preloader__logo {
		animation: none;
		opacity: 1;
	}
}

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

.site-footer {
	position: relative;
	background: var(--color-bg);
	padding: clamp(42.5px, 3.5417vw, 68px) 0 clamp(62.5px, 5.2083vw, 100px);
	overflow: hidden;
}

.site-footer__bg {
	position: absolute;
	top: clamp(15px, 1.25vw, 24px);
	left: clamp(10px, 0.8333vw, 16px);
	right: clamp(10px, 0.8333vw, 16px);
	bottom: clamp(15px, 1.25vw, 24px);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 0;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(15px, 1.25vw, 24px);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12.5px, 1.0417vw, 20px);
}

img.site-footer__logo-icon {
	width: clamp(56.25px, 4.6875vw, 90px);
	height: clamp(56.25px, 4.6875vw, 90px);
}

img.site-footer__logo-word {
	width: clamp(171.25px, 14.2708vw, 274px);
	height: clamp(25px, 2.0833vw, 40px);
	max-width: none;
}

.site-footer__nav ul {
	display: flex;
	gap: clamp(31.25px, 2.6042vw, 50px);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: clamp(12px, 0.9375vw, 18px);
	font-weight: 500;
}

.site-footer__nav ul a {
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.site-footer__nav ul a:hover {
	color: var(--color-orange);
}

.site-footer__columns {
	width: 100%;
	display: grid;
	/* Крайние колонки одинаковой доли — иначе средняя с контактами
	   и кнопками стоит правее центра подвала. */
	grid-template-columns: 1fr auto 1fr;
	align-items: flex-start;
	gap: clamp(24px, 2.5vw, 48px);
	margin-top: clamp(15px, 1.25vw, 24px);
}

/* Четыре колонки помещаются только на широком экране. Ниже 1200 px
   подвал складывается в две, иначе крайние колонки уезжают за край. */
@media (max-width: 1199px) {
	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
	}
}


.site-footer__addresses {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 1.6667vw, 32px);
	justify-self: start;
}

.site-footer__address-label {
	text-transform: uppercase;
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(13, 13, 13, 0.5);
	margin: 0 0 clamp(6px, 0.5208vw, 10px);
}

.site-footer__address p:last-child {
	margin: 0;
}

.site-footer__contacts-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(15px, 1.25vw, 24px);
	justify-self: center;
}

.site-footer__contacts {
	display: flex;
	gap: clamp(31.25px, 2.6042vw, 50px);
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
}

.site-footer__contacts a {
	text-decoration: underline;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.site-footer__contacts a:hover {
	color: var(--color-orange);
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(8px, 0.8333vw, 14px);
	max-width: clamp(280px, 30vw, 430px);
	margin-top: clamp(10px, 0.8333vw, 16px);
}

.site-footer__requisites {
	margin: clamp(16px, 1.25vw, 24px) 0 0;
	font-size: clamp(12px, 0.7292vw, 14px);
	color: rgba(13, 13, 13, 0.6);
	line-height: 1.5;
}

.site-footer__shopping {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: clamp(12px, 1.0417vw, 20px);
}

.site-footer__column-title {
	margin: 0;
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, 0.6);
}

.site-footer__shopping ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.site-footer__shopping a {
	font-size: clamp(12px, 0.7292vw, 14px);
	color: var(--color-black);
	text-decoration: none;
	opacity: 0.72;
	transition: opacity 200ms ease;
}

.site-footer__shopping a:hover,
.site-footer__shopping a:focus-visible {
	opacity: 1;
}

/* ---------- About page ---------- */

.about-intro {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(15px, 1.25vw, 24px);
	row-gap: clamp(20px, 1.6667vw, 32px);
	align-items: start;
}

.about-intro__heading {
	grid-column: 1 / 8;
	grid-row: 1;
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.about-intro__video {
	grid-column: 1 / 4;
	grid-row: 2 / 4;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--radius-s);
	background: var(--color-grey-cat);
}

/* The link and both paragraphs are placed independently on the same grid
   as the heading (rather than stacked in one column below it), to match
   the staggered layout in the design: "в каталог" pinned top-right, the
   first paragraph starting under the heading's midpoint, the second
   further down and further right. */
.about-intro__aside {
	display: contents;
}

.about-intro__link {
	grid-column: 12 / 13;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	color: var(--color-orange);
	font-weight: 500;
	font-size: clamp(14px, 0.8333vw, 16px);
	text-decoration: underline;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.about-intro__link:hover,
.about-intro__link:visited {
	color: var(--color-orange);
}

.about-intro__text {
	font-size: clamp(14px, 0.8333vw, 16px);
	line-height: 1.4;
	margin: 0;
}

.about-intro__text:first-of-type {
	grid-column: 6 / 9;
	grid-row: 2;
}

.about-intro__text:last-of-type {
	grid-column: 9 / 13;
	grid-row: 3;
	justify-self: end;
}

.about-brand__title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 clamp(25px, 2.0833vw, 40px);
}

.about-brand__title,
.about-brand__suffix {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.about-brand__suffix {
	color: var(--color-grey-text);
}

.about-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(10px, 0.8333vw, 16px);
	margin-bottom: clamp(25px, 2.0833vw, 40px);
}

.about-card {
	background: var(--color-white);
	border-radius: var(--radius-m);
	padding: clamp(20px, 1.6667vw, 32px);
	display: flex;
	flex-direction: column;
}

.about-card__title {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 600;
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
}

.about-card__text {
	font-size: 14px;
	color: var(--color-grey-text);
	margin: 0;
}

.about-cards__nav {
	display: none;
	justify-content: center;
	margin-bottom: clamp(25px, 2.0833vw, 40px);
}

.about-actions {
	display: flex;
	justify-content: space-between;
	gap: clamp(15px, 1.25vw, 24px);
}

/* ---------- Contacts page ---------- */

.contacts-page__section {
	display: grid;
	grid-template-columns: minmax(0, 685px) minmax(0, 904px);
	justify-content: space-between;
	gap: clamp(20px, 1.6667vw, 32px);
}

.contacts-page__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(15px, 1.25vw, 24px);
}

.contacts-page__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.contacts-page__text {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	margin: 0;
}

.contacts-page__map-section {
	padding-top: 0;
}

.contacts-page__map {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	height: clamp(379px, 31.5625vw, 606px);
	border-radius: clamp(30px, 2.5vw, 48px);
	overflow: hidden;
}

.contacts-page__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Atelier page ---------- */

.atelier-highlight {
	color: var(--color-orange);
}

.atelier-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, clamp(456.25px, 38.0208vw, 730px));
	gap: clamp(20px, 1.6667vw, 32px);
	align-items: start;
}

.atelier-intro__content {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(50px, 4.1667vw, 80px);
}

.atelier-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(15px, 1.25vw, 24px);
	min-height: 90vh;
}

.atelier-hero__heading {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.atelier-hero__subtitle {
	font-size: clamp(14px, 0.8333vw, 16px);
	line-height: 1.4;
	margin: 0;
}

/* Sticks for the full height of .atelier-intro__content next to it (hero +
   "Процесс создания"), only releasing once that column ends, right where
   the gallery section begins. A fixed 100vh box (not a percentage of the
   grid row) keeps the sticky math simple and reliable; the photo itself is
   centered inside it via flex rather than a top:50%/transform trick. */
.atelier-hero__media {
	grid-column: 2;
	align-self: start;
	position: sticky;
	top: 0;
	height: 90vh;
	border-radius: var(--radius-l);
	overflow: hidden;
}

.atelier-hero__media img,
.atelier-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.atelier-process__title {
	font-size: clamp(20px, 1.6667vw, 32px);
	font-weight: 600;
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
}

.atelier-process__text {
	font-size: clamp(14px, 0.8333vw, 16px);
	color: var(--color-grey-text);
	margin: 0 0 clamp(25px, 2.0833vw, 40px);
}

.atelier-steps {
	margin-bottom: clamp(25px, 2.0833vw, 40px);
}

.atelier-step {
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 1.6667vw, 32px);
	padding: clamp(15px, 1.25vw, 24px) 0;
	border-top: 1px solid var(--color-grey-cat);
}

.atelier-step:last-child {
	border-bottom: 1px solid var(--color-grey-cat);
}

.atelier-step__heading {
	flex: 0 0 clamp(220px, 18.3333vw, 352px);
}

.atelier-step__number {
	display: block;
	font-size: clamp(12px, 0.7292vw, 14px);
	color: var(--color-grey-text);
	margin-bottom: clamp(3.75px, 0.3125vw, 6px);
}

.atelier-step__title {
	font-size: clamp(15px, 1.25vw, 24px);
	font-weight: 600;
	margin: 0;
}

.atelier-step__text {
	flex: 1;
	font-size: clamp(14px, 0.8333vw, 16px);
	color: var(--color-grey-text);
	margin: 0;
}

.atelier-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
	grid-template-rows: repeat(2, minmax(150px, 1fr));
	gap: clamp(10px, 0.8333vw, 16px);
	max-height: 90vh;
}

.atelier-gallery__tile {
	border-radius: var(--radius-l);
	overflow: hidden;
}

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

.atelier-gallery__tile--a {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.atelier-gallery__tile--b {
	grid-column: 2 / 4;
	grid-row: 1 / 2;
}

.atelier-gallery__tile--d {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.atelier-gallery__tile--e {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.atelier-gallery__tile--f {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.atelier-gallery__tile--cta {
	grid-column: 4 / 5;
	grid-row: 1 / 3;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	padding: clamp(15px, 1.25vw, 24px);
}

.atelier-gallery__nav {
	display: none;
}

.atelier-faq {
	display: grid;
	grid-template-columns: clamp(428.125px, 35.6771vw, 685px) minmax(0, 50vw);
	justify-content: space-between;
	gap: clamp(20px, 1.6667vw, 32px);
}

.atelier-faq__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(15px, 1.25vw, 24px);
}

.atelier-faq__list {
	display: flex;
	flex-direction: column;
}

.atelier-faq__item {
	border-bottom: 1px solid var(--color-grey-cat);
}

.atelier-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(10px, 0.8333vw, 16px);
	padding: clamp(15px, 1.25vw, 24px) 0;
	cursor: pointer;
	list-style: none;
}

.atelier-faq__item summary::-webkit-details-marker {
	display: none;
}

.atelier-faq__question {
	font-size: clamp(12.5px, 1.0417vw, 20px);
	font-weight: 500;
}

img.atelier-faq__icon {
	width: clamp(15px, 1.25vw, 24px);
	height: clamp(15px, 1.25vw, 24px);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.atelier-faq__item[open] img.atelier-faq__icon {
	transform: rotate(45deg);
}

.atelier-faq__panel {
	display: block !important;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease 0s;
}

.atelier-faq__panel a {
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.atelier-faq__panel a:hover {
	color: var(--color-orange);
}

.atelier-faq__panel > p {
	margin: 0 0 clamp(15px, 1.25vw, 24px);
	font-size: clamp(14px, 0.8333vw, 16px);
	line-height: 1.55;
	/* Не --color-grey-text (#c4c4c4): на фоне #f9f9f9 это контраст ~1.6:1,
	   ответ почти не читался. #6b6b6b — около 5:1, норма для текста. */
	color: #6b6b6b;
}

/* ---------- Certificates page ---------- */

.certificate-page__title {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.certificate-page__subtitle {
	max-width: 52ch;
	margin: clamp(10px, 0.8333vw, 16px) 0 clamp(25px, 2.0833vw, 40px);
	font-size: clamp(14px, 0.8333vw, 16px);
	color: var(--color-grey-text);
}

/* ---- Wizard shell ---- */

.certificate-wizard {
	display: grid;
	grid-template-columns: clamp(180px, 15vw, 240px) minmax(0, 1fr);
	gap: clamp(40px, 4vw, 96px);
	align-items: start;
}

.certificate-wizard__sidebar {
	display: flex;
	flex-direction: column;
	gap: clamp(30px, 2.5vw, 48px);
	position: sticky;
	top: clamp(90px, 7.5vw, 120px);
}

.certificate-wizard__step-number {
	font-size: clamp(37.5px, 3.125vw, 60px);
	font-weight: 700;
	line-height: 1;
}

.certificate-wizard__steps {
	list-style: none;
	margin: 0;
	padding: 0 0 0 clamp(16px, 1.3333vw, 24px);
	border-left: 2px solid var(--color-grey-cat);
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 1.6667vw, 32px);
}

.certificate-wizard__step {
	position: relative;
}

.certificate-wizard__step::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(-1 * clamp(16px, 1.3333vw, 24px) - 5px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-grey-cat);
	transform: translateY(-50%);
	transition: background-color 0.3s ease 0s;
}

.certificate-wizard__step.is-active::before,
.certificate-wizard__step.is-done::before {
	background: var(--color-black);
}

.certificate-wizard__step button {
	border: none;
	background: none;
	padding: 0;
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.7292vw, 14px);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-grey-text);
	cursor: pointer;
	transition: color 0.3s ease 0s;
}

.certificate-wizard__step.is-active button,
.certificate-wizard__step.is-done button {
	color: var(--color-black);
}

.certificate-wizard__step:not(.is-done) button {
	pointer-events: none;
}

/* Compact "step label + progress bar" swap-in for the vertical dotted
   list above — mobile-only, see the max-width:640px override below. */
.certificate-wizard__mobile-progress {
	display: none;
}

.certificate-wizard__stage {
	display: grid;
	grid-template-columns: minmax(0, clamp(420px, 40vw, 640px)) minmax(0, 1fr);
	gap: clamp(30px, 3.3333vw, 80px);
	align-items: start;
}

/* ---- Persistent design preview (follows every step) ---- */

.certificate-wizard__preview {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.8333vw, 16px);
}

.certificate-wizard__arrow {
	flex-shrink: 0;
	width: clamp(32px, 2.6667vw, 48px);
	height: clamp(32px, 2.6667vw, 48px);
	border-radius: 50%;
	border: none;
	background: var(--color-bg);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.certificate-wizard__arrow:hover {
	background: var(--color-grey-cat);
}

.certificate-wizard__arrow img {
	width: 40%;
	height: 40%;
}

.certificate-wizard__preview-card {
	position: relative;
	flex: 1;
	aspect-ratio: 4 / 3;
	border-radius: clamp(22.5px, 1.875vw, 36px);
	overflow: hidden;
	background: var(--color-white);
}

.certificate-wizard__preview-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease 0s;
}

.certificate-wizard__preview-slide.is-active {
	opacity: 1;
}

.certificate-wizard__preview-slide img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.certificate-wizard__preview-wordmark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56%;
	height: auto;
	pointer-events: none;
}

/* ---- Step panels ---- */

.certificate-wizard__panels {
	min-width: 0;
}

.certificate-wizard__panel {
	display: none;
	flex-direction: column;
	gap: clamp(20px, 1.6667vw, 32px);
}

.certificate-wizard__panel.is-active {
	display: flex;
}

.certificate-wizard__title {
	font-size: clamp(25px, 2.0833vw, 40px);
	font-weight: 600;
	margin: 0;
}

.certificate-design-dots {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 0.8333vw, 16px);
}

.certificate-design-dot {
	position: relative;
	width: clamp(48px, 4vw, 64px);
	height: clamp(48px, 4vw, 64px);
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow 0.3s ease 0s;
}

.certificate-design-dot.is-active {
	box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-black);
}

.certificate-design-dot input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.certificate-wizard__amount-display {
	font-size: clamp(31.25px, 2.6042vw, 50px);
	font-weight: 700;
	margin: 0;
}

.certificate-message__field {
	position: relative;
	border: 1px solid var(--color-grey-cat);
	border-radius: clamp(20px, 1.6667vw, 32px);
	overflow: hidden;
	transition: all 0.3s ease 0s;
}

.certificate-message__field:has(textarea:focus) {
	border-color: var(--color-black);
}

.certificate-message__field textarea {
	display: block;
	width: 100%;
	min-height: clamp(96.25px, 8.0208vw, 154px);
	border: none;
	background: transparent;
	resize: none;
	font-family: var(--font-manrope);
	font-size: clamp(14px, 0.8333vw, 16px);
	padding: clamp(15px, 1.25vw, 24px) clamp(15px, 1.25vw, 24px) clamp(25px, 2.0833vw, 40px);
}

.certificate-message__field textarea:focus {
	outline: none;
}

.certificate-message__field textarea::placeholder {
	color: var(--color-black);
	opacity: 1;
}

.certificate-message__counter {
	position: absolute;
	right: clamp(15px, 1.25vw, 24px);
	bottom: clamp(10px, 0.8333vw, 16px);
	font-size: clamp(14px, 0.8333vw, 16px);
}

.certificate-denominations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(5px, 0.4167vw, 8px);
}

.certificate-denomination {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-grey-cat);
	border: none;
	border-radius: var(--radius-pill);
	padding: clamp(12.5px, 1.0417vw, 20px) clamp(10px, 0.8333vw, 16px);
	font-weight: 600;
	font-size: clamp(15px, 1.25vw, 24px);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.certificate-denomination:hover {
	opacity: 0.6;
}

.certificate-denomination input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.certificate-denomination:has(input:checked) {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

.certificate-order__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: clamp(15px, 1.25vw, 24px);
	border-top: 1px solid var(--color-grey-cat);
	font-size: clamp(14px, 0.8333vw, 16px);
	font-weight: 500;
}

.certificate-order__total strong {
	font-size: clamp(18.75px, 1.5625vw, 30px);
	font-weight: 700;
}

.certificate-wizard__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(20px, 1.6667vw, 32px);
	margin-top: clamp(15px, 1.25vw, 24px);
}

.certificate-wizard__back {
	border: none;
	background: none;
	padding: 0;
	font-family: var(--font-manrope);
	font-size: clamp(13px, 0.8333vw, 16px);
	font-weight: 500;
	color: var(--color-grey-text);
	cursor: pointer;
	transition: color 0.3s ease 0s;
}

.certificate-wizard__back:hover {
	color: var(--color-black);
}

.certificate-wizard__back[hidden] {
	display: none;
}

.certificate-wizard__next {
	flex-shrink: 0;
	width: clamp(90px, 7.5vw, 140px);
	height: clamp(90px, 7.5vw, 140px);
	border-radius: 50%;
	border: none;
	background: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-manrope);
	font-size: clamp(12px, 0.9375vw, 15px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.certificate-wizard__next:hover {
	background: var(--gradient-orange);
}

.certificate-wizard__next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: var(--color-black);
}

.certificate-order__status {
	font-size: clamp(12px, 0.7292vw, 14px);
	text-align: center;
	margin: 0;
	min-height: 1.4em;
}

.certificate-order__status.is-error {
	color: var(--color-orange);
}

/* ==================================================================
   NARROW DESKTOP / TABLET (641px – 1199px)
   The fluid clamp() scaling above is calibrated for the 1200–1920px
   design range; below 1200px its column *counts* stay fixed even as
   clamp() values keep shrinking, so multi-column grids (product grids,
   the About page's 12-col layout, the Ateliers photo grid) got
   uncomfortably cramped in this gap before reaching the dedicated
   mobile breakpoint. This block only relaxes column counts / converts
   a couple of grids to the same horizontal-scroll pattern mobile
   already uses — it doesn't re-flow spacing/typography.
   ================================================================== */

@media (max-width: 1199px) and (min-width: 641px) {
	.catalog .product-grid {
		grid-template-columns: repeat(2, 1fr);
	}


	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.collection-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-intro {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-intro__heading {
		grid-column: 1;
		grid-row: 1;
	}

	.about-intro__video {
		grid-column: 1;
		grid-row: 2;
		max-width: 320px;
	}

	.about-intro__text:first-of-type {
		grid-column: 1;
		grid-row: 3;
	}

	.about-intro__text:last-of-type {
		grid-column: 1;
		grid-row: 4;
		justify-self: start;
	}

	.about-intro__link {
		grid-column: 1;
		grid-row: 5;
		justify-self: start;
	}

	.atelier-gallery {
		display: flex;
		overflow-x: auto;
		/* Без этого overflow-y по спецификации тоже становится auto, и на
		   телефоне слайдер ловил вертикальный свайп как отдельный скролл. */
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		max-height: none;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.atelier-gallery::-webkit-scrollbar {
		display: none;
	}

	.atelier-gallery > .atelier-gallery__tile {
		flex: 0 0 60%;
		scroll-snap-align: start;
		aspect-ratio: 335 / 400;
	}
}

/* ==================================================================
   MOBILE (max-width: 640px)
   ================================================================== */

@media (max-width: 640px) {

	.mobile-only {
		display: block;
	}

	.btn {
		padding: 14px 28px;
		font-size: 16px;
	}

	a.mobile-only.btn {
		display: flex;
		width: fit-content;
		margin: 16px auto 0;
	}

	/* ---------- Header ---------- */

	.site-header {
		padding: 16px;
	}

	.site-header__bar {
		display: flex;
		align-items: center;
		gap: 0;
	}

	/* Порядок на мобильной: логотип слева, затем корзина, затем бургер.
	   Меняем порядок стилями, разметка остаётся прежней. */
	.site-header__logo {
		order: 1;
	}

	img.site-header__logo-mark {
		width: 30px;
	}

	img.site-header__logo-word {
		width: 112px;
		height: 16.35px;
	}

	/* Справа налево: сначала корзина, за ней бургер. */
	.main-navigation {
		order: 2;
	}

	.site-header__cart {
		order: 3;
	}

	.site-header__brand-nav {
		display: contents;
	}

	#site-navigation {
		width: auto;
	}

	.site-header__logo {
		padding: 0;
		gap: 8px;
	}

	.main-navigation .menu-toggle {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		background: transparent;
		border: none;
		border-radius: 50%;
		padding: 0;
		cursor: pointer;
		transition: transform 0.25s ease 0s;
	}

	.main-navigation .menu-toggle:active {
		transform: scale(0.94);
	}

	.main-navigation .menu-toggle img {
		width: 24px;
		height: 24px;
	}

	/*
	 * .site-header--pinned/--reveal put a transform on .site-header for the
	 * scroll slide (main.css:426) — any transform on an ancestor creates a
	 * new containing block for position:fixed descendants, which would
	 * shrink the full-screen panel and the close button down to the
	 * header's own small box instead of the viewport. Neutralising it
	 * while the menu is open (and pinning the header itself) keeps them
	 * correctly viewport-relative no matter the scroll position the menu
	 * was opened from. This snaps instantly (no transition) rather than
	 * sliding — while it's animating, its transform is still some non-none
	 * matrix, which would keep dragging the fixed-position panel/logo/close
	 * button along with it instead of letting them sit still at the
	 * viewport edges. The panel's own fade+slide (below) is the only
	 * animation the user actually sees.
	 */
	#masthead.site-header--menu-open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		transform: none;
		background: var(--color-white);
	}

	#masthead.site-header--menu-open .site-header__logo {
		position: fixed;
		top: 16px;
		left: 16px;
		z-index: 201;
	}

	/* Шапка внутри открытого меню повторяет обычную: логотип слева,
	   справа корзина, левее неё — крестик. Раньше крестик и логотип
	   позиционировались порознь и не совпадали по вертикали,
	   а корзина оставалась под панелью. */
	#site-navigation.toggled .menu-toggle {
		position: fixed;
		top: 16px;
		right: 68px;
		width: 44px;
		height: 44px;
		z-index: 201;
	}

	#site-navigation.toggled ~ .site-header__cart,
	.site-header:has(#site-navigation.toggled) .site-header__cart {
		position: fixed;
		top: 16px;
		right: 16px;
		width: 44px;
		height: 44px;
		z-index: 201;
	}

	#site-navigation.toggled .menu-toggle__icon-open {
		display: none;
	}

	#site-navigation.toggled .menu-toggle__icon-close {
		display: block;
		/* Крестик стоит рядом с 40-пиксельным пакетом: в размере бургера
		   он выглядел мелким и хилым. */
		width: 30px;
		height: 30px;
	}

	#site-navigation ul#primary-menu {
		display: none;
	}

	.mobile-menu-panel {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		background: var(--color-white);
		padding: 104px 20px 28px;
		box-sizing: border-box;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(16px);
		pointer-events: none;
		transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, visibility 0s linear 0.3s;
	}

	#site-navigation.toggled .mobile-menu-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, visibility 0s linear 0s;
	}

	#site-navigation.toggled ul#primary-menu {
		display: flex;
		flex-direction: column;
		gap: 2px;
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	#site-navigation.toggled ul#primary-menu li {
		width: 100%;
		margin: 0;
		border-bottom: 1px solid rgba(13, 13, 13, 0.08);
	}

	#site-navigation.toggled ul#primary-menu a {
		display: block;
		height: auto;
		background: none;
		border-radius: 0;
		padding: 16px 2px;
		font-size: 26px;
		font-weight: 600;
	}

	#site-navigation.toggled .mobile-menu-panel__collections {
		display: block;
		margin-top: 24px;
	}

	.mobile-menu-panel__collections-title {
		margin: 0 0 12px;
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: rgba(13, 13, 13, 0.45);
	}

	.mobile-menu-panel__collections-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.mobile-menu-panel__collections-list a {
		display: inline-flex;
		padding: 10px 18px;
		border-radius: var(--radius-pill);
		background: var(--color-bg);
		border: 1px solid var(--color-grey-cat);
		font-size: 14px;
		font-weight: 500;
	}

	#site-navigation.toggled .mobile-menu-panel__contact {
		display: block;
		margin-top: auto;
		padding-top: 24px;
		border-top: 1px solid rgba(13, 13, 13, 0.08);
	}

	.mobile-menu-panel__contact a {
		display: block;
		padding: 6px 0;
		font-size: 16px;
		font-weight: 500;
	}

	.site-header__cart {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		flex-shrink: 0;
	}

	.site-header__cart-text {
		display: none;
	}

	img.site-header__cart-icon {
		width: 40px;
		height: 40px;
	}

	.site-header__cart-badge {
		display: block;
		position: absolute;
		top: -2px;
		right: -6px;
		min-width: 20px;
		height: 20px;
		padding: 0 4px;
		box-sizing: border-box;
		border-radius: 999px;
		background: var(--color-orange);
		color: var(--color-white);
		font-size: 12px;
		font-weight: 700;
		line-height: 20px;
		text-align: center;
	}

	.site-header__cart-badge:empty {
		display: none;
	}

	/* ---------- Sections (generic) ---------- */

	.section {
		padding: 32px 16px;
	}

	.section__header {
		margin-bottom: 16px;
	}

	.section__title {
		font-size: 20px;
	}

	.carousel-nav {
		display: none;
	}

	/* ---------- Hero ---------- */

	.hero {
		margin: 0;
		border-radius: 0;
		min-height: 500px;
		align-items: center;
		padding: 32px 16px;
	}

	.hero__content {
		max-width: 100%;
		gap: 8px;
	}

	.hero__eyebrow {
		font-size: 14px;
	}

	.hero__heading {
		font-size: 20px;
	}

	.hero__subtitle {
		font-size: 14px;
		max-width: 100%;
	}

	.hero .btn {
		font-size: 18px;
	}

	/* ---------- Product grid / card ---------- */

	.product-grid,
	.collection-tiles {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.product-grid--carousel {
		gap: 8px;
	}

	.product-grid--carousel > .product-card {
		flex: 0 0 calc((100% - 8px) / 2);
	}

	.product-card {
		padding: 8px;
		border-radius: 16px;
		gap: 8px;
	}

	.product-card__media {
		border-radius: 12px;
	}

	.product-card__badge {
		font-size: 12px;
		padding: 4px 10px;
	}

	.product-card__photo {
		width: 86%;
	}

	.product-card__title {
		font-size: 14px;
	}

	.product-card__description {
		font-size: 14px;
	}

	.product-card__price {
		font-size: 14px;
	}

	.product-card__add {
		display: none;
	}

	/* ---------- Banners (mission / philosophy) ---------- */

	.banner {
		margin: 0;
		border-radius: 0;
		min-height: 340px;
		padding: 32px 24px 48px;
	}

	.banner__content {
		max-width: 100%;
		margin: 0;
		text-align: center;
	}

	.banner + .banner {
		margin-top: 2px;
	}

	.banner__title {
		font-size: 20px;
		margin-bottom: 8px;
	}

	.banner__text {
		font-size: 14px;
	}

	/* ---------- Collections ---------- */

	.collections__layout {
		flex-direction: column;
	}

	.section--collections__intro {
		align-items: center;
		text-align: center;
		width: 100%;
		gap: 16px;
	}

	/* В столбике лента коллекций не растягивается (у раскладки
	   align-items: flex-start) и берёт ширину «по содержимому», а карточка
	   внутри — «100% ширины ленты». Ширина ленты зависит от карточки,
	   карточка от ленты: Chrome этот цикл разрывает, а Safari уходил в
	   бесконечность — лента и вся страница вырастали до 33 554 432px, отсюда
	   пустота и бесконечная прокрутка. Явная ширина разрывает цикл. */
	.collection-grid {
		flex: none;
		width: 100%;
	}

	.collection-grid > .collection-card {
		flex: 0 0 100%;
	}

	.collection-card__title {
		font-size: 16px;
		font-weight: 600;
	}

	/* ---------- Contact / newsletter ---------- */

	.section--contact {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.contact__intro {
		align-items: center;
		text-align: center;
	}

	.contact__social-links {
		justify-content: center;
		flex-wrap: wrap;
		gap: 16px 24px;
	}

	.contact__topics {
		justify-content: center;
	}

	.chip--choice {
		padding: 12px 20px;
	}

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

	.site-footer__bg {
		background-image: none !important;
		background-color: var(--color-yellow);
		border-radius: var(--radius-l);
	}

	.site-footer__inner {
		padding: 0 16px;
	}

	img.site-footer__logo-icon {
		width: 60px;
		height: 60px;
	}

	img.site-footer__logo-word {
		width: 200px;
		height: 29px;
	}

	.site-footer__columns {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 24px;
		margin-top: 8px;
	}

	.site-footer__addresses {
		align-items: center;
	}

	.site-footer__nav ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px 24px;
	}

	.site-footer__contacts {
		flex-direction: column;
		gap: 8px;
	}

	/* ---------- Catalog ---------- */

	.catalog__header {
		padding: 32px 16px 0;
		text-align: center;
	}

	.catalog__title {
		font-size: 20px;
	}

	.catalog__description {
		font-size: 14px;
	}

	.catalog__layout {
		padding: 16px;
		padding-bottom: 76px;
		flex-direction: column;
	}

	.catalog-filters-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 20999;
		background: rgba(13, 13, 13, 0.5);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease 0s;
	}

	.catalog-filters-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.catalog-filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 21000;
		width: 100%;
		max-height: 85dvh;
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		border-radius: 24px 24px 0 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
	}

	.catalog-filters.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
	}

	.catalog-filters__mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.catalog-filters__mobile-title {
		font-size: 16px;
		font-weight: 600;
		margin: 0;
	}

	.catalog-filters__mobile-close {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background: none;
		font-size: 22px;
		line-height: 1;
		color: var(--color-black);
		cursor: pointer;
	}

	.catalog-filters__scroll {
		display: flex;
		flex-direction: column;
		gap: clamp(15px, 1.25vw, 24px);
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		margin: 0 -16px;
		padding: 0 16px;
	}

	.catalog-filters__mobile-footer {
		display: block;
		flex: 0 0 auto;
		background: var(--color-white);
		padding-top: 12px;
		margin-top: 4px;
	}

	.catalog-filters__apply {
		width: 100%;
		text-align: center;
		padding: 16px 28px;
		font-size: 16px;
	}

	.catalog-mobile-filter-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.catalog-mobile-filter-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		background: var(--color-black);
		color: var(--color-white);
		border-radius: var(--radius-pill);
		padding: 16px 32px;
		font-size: 16px;
		font-weight: 600;
		font-family: var(--font-manrope);
		border: none;
		cursor: pointer;
		flex-shrink: 0;
	}

	.catalog-mobile-filter-toggle img {
		width: 24px;
		height: 24px;
		filter: brightness(0) invert(1);
	}

	.catalog-mobile-filter-bar__active {
		display: flex;
		align-items: center;
		gap: 6px;
		background: var(--color-black);
		color: var(--color-white);
		border-radius: var(--radius-pill);
		padding: 12px 16px;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.catalog-mobile-filter-bar__reset {
		color: var(--color-orange);
		text-decoration: underline;
		cursor: pointer;
	}

	.catalog-availability__toggle {
		padding: 8px 12px;
		font-size: 12px;
	}

	.catalog-results__toolbar {
		justify-content: space-between;
		gap: 8px;
	}

	.catalog .product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.catalog .pagination {
		flex-wrap: wrap;
		gap: 8px;
	}

	.catalog .pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		font-size: 14px;
	}

	.catalog .pagination .prev.page-numbers,
	.catalog .pagination .next.page-numbers {
		height: 44px;
		padding: 0 16px;
	}

	.product-card-live {
		flex-direction: column;
		gap: 12px;
	}

	.product-card-live__gallery {
		flex: none;
		width: 100%;
		aspect-ratio: 1 / 1;
	}

	.product-card-live__body {
		padding: 0 4px 4px;
	}

	.product-card-live__title {
		font-size: 18px;
	}

	.product-card-live__description {
		font-size: 13px;
	}

	.product-card-live__price {
		font-size: 18px;
	}

	.product-card-live__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.product-card-live__add {
		width: 100%;
		justify-content: center;
	}

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

	.product-page {
		padding-bottom: 76px;
	}

	.product-page__top {
		flex-direction: column;
		padding: 16px;
		gap: 16px;
	}

	.product-gallery {
		width: 100%;
		display: flex;
		gap: 0;
		overflow-x: auto;
		/* Без этого overflow-y по спецификации тоже становится auto, и на
		   телефоне слайдер ловил вертикальный свайп как отдельный скролл. */
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.product-gallery::-webkit-scrollbar {
		display: none;
	}

	.product-gallery__item {
		flex: 0 0 100%;
		scroll-snap-align: start;
		aspect-ratio: 370 / 520;
	}

	.product-gallery__dots {
		width: 100%;
		align-self: stretch;
		display: flex;
		gap: 8px;
		justify-content: center;
		margin-top: 4px;
	}

	.product-gallery__dot {
		width: 36px;
		height: 6px;
		border-radius: var(--radius-pill);
		background: var(--color-grey-cat);
		border: none;
		padding: 0;
		cursor: pointer;
	}

	.product-gallery__dot.is-active {
		background: var(--gradient-orange);
	}

	.product-info {
		width: 100%;
		position: static;
	}

	.product-info__title {
		font-size: 20px;
	}

	.product-info__price {
		font-size: 20px;
		margin-top: 4px;
	}

	.product-info__collection {
		font-size: 14px;
	}

	.product-info__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.product-info__actions .btn {
		text-align: center;
	}

	.product-info__add-to-cart {
		display: none;
	}

	.product-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.product-sticky-cta .btn {
		width: 100%;
		text-align: center;
	}

	.product-info__manager-link {
		text-align: center;
		font-size: 14px;
	}

	.product-specs__row,
	.product-info__description {
		font-size: 12px;
	}

	.product-accordion__label {
		font-size: 15px;
		font-weight: 600;
	}

	.chip--dark,
	.split-badge {
		font-size: 12px;
	}

	/* ---------- Cart ---------- */

	.cart-page__header {
		padding: 32px 16px 0;
		text-align: center;
	}

	.cart-page__title {
		font-size: 20px;
	}

	.cart-page__layout {
		padding: 16px;
		flex-direction: column;
	}

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

	.cart-table__head {
		display: none;
	}

	.cart-item {
		position: relative;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"product product"
			"qty price";
		row-gap: 12px;
	}

	.cart-item__product {
		grid-area: product;
	}

	.cart-item__qty {
		grid-area: qty;
	}

	.cart-item__price {
		grid-area: price;
		justify-content: flex-end;
	}

	.cart-item__specs {
		display: none;
	}

	.cart-item__remove {
		position: absolute;
		top: 16px;
		right: 16px;
	}

	.cart-item__remove img {
		width: 24px;
		height: 24px;
	}

	.qty-stepper {
		gap: 12px;
		padding: 8px 12px;
	}

	.qty-stepper__btn {
		width: 24px;
		height: 24px;
	}

	input.qty-stepper__input {
		width: 24px;
		font-size: 16px;
	}

	.cart-item__price {
		font-size: 18px;
	}

	.cart-item__price-note img {
		width: 16px;
		height: 16px;
	}

	.custom-checkbox {
		width: 24px;
		height: 24px;
	}

	.order-summary__title,
	.order-summary__coupon-hint {
		display: none;
	}

	.order-summary__checkout {
		flex-direction: column;
		align-items: stretch;
	}

	.order-summary__checkout .split-badge {
		justify-content: center;
	}

	/* ---------- Checkout ---------- */

	/* WC Blocks reorders .wc-block-checkout__sidebar to the top of the page
	   on mobile, duplicating the order summary again right before the
	   "Оформить заказ" button further down — drop the top copy only (the
	   sidebar here holds nothing else at this width). */
	.checkout-page .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		display: none;
	}

	/* ---------- About page ---------- */

	.about-intro {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.about-intro__heading {
		grid-column: 1;
		grid-row: 1;
		font-size: 24px;
	}

	.about-intro__video {
		grid-column: 1;
		grid-row: 2;
		max-width: 200px;
	}

	.about-intro__text:first-of-type {
		grid-column: 1;
		grid-row: 3;
	}

	.about-intro__text:last-of-type {
		grid-column: 1;
		grid-row: 4;
		justify-self: start;
	}

	.about-intro__link {
		grid-column: 1;
		grid-row: 5;
		justify-self: start;
	}

	.about-brand__title-row {
		margin-bottom: 16px;
	}

	.about-brand__title,
	.about-brand__suffix {
		font-size: 24px;
	}

	.about-cards {
		display: flex;
		overflow-x: auto;
		/* Без этого overflow-y по спецификации тоже становится auto, и на
		   телефоне слайдер ловил вертикальный свайп как отдельный скролл. */
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 8px;
		margin-bottom: 16px;
	}

	.about-cards::-webkit-scrollbar {
		display: none;
	}

	.about-cards > .about-card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.about-cards__nav.mobile-only {
		display: flex;
	}

	.about-actions {
		flex-direction: column;
	}

	/* ---------- Contacts page ---------- */

	.contacts-page__section {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.contacts-page__intro {
		align-items: center;
		text-align: center;
	}

	.contacts-page__title {
		font-size: 20px;
		font-weight: 500;
	}

	.contacts-page__text {
		font-size: 14px;
	}

	.contacts-page__map {
		height: 174px;
		border-radius: 24px;
	}

	/* ---------- Atelier page ---------- */

	/* Tabs are desktop-only — mobile keeps both blocks stacked (with the
	   scrolling photo reordered between them, item 6), so .atelier-intro
	   itself becomes the single column everything stacks in: unwrap
	   .atelier-intro__content with display:contents so the tab panels sit
	   as direct siblings of .atelier-hero__media and can be reordered
	   against it with `order`. */
	.atelier-intro {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.atelier-intro__content {
		display: contents;
	}

	.atelier-process {
		display: block;
	}

	.atelier-hero__content {
		display: flex;
		order: 1;
		min-height: 0;
	}

	.atelier-hero__media {
		order: 2;
	}

	.atelier-process {
		order: 3;
	}

	.atelier-hero__heading {
		font-size: 24px;
	}

	.atelier-hero__media {
		grid-column: 1;
		position: static;
		height: auto;
		display: block;
	}

	.atelier-hero__media img,
	.atelier-hero__media video {
		height: auto;
		aspect-ratio: 335 / 280;
	}

	.atelier-gallery {
		max-height: none;
	}

	.atelier-step {
		flex-direction: column;
		gap: 8px;
	}

	.atelier-step__heading {
		flex: 0 0 auto;
	}

	.atelier-gallery {
		display: flex;
		overflow-x: auto;
		/* Без этого overflow-y по спецификации тоже становится auto, и на
		   телефоне слайдер ловил вертикальный свайп как отдельный скролл. */
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.atelier-gallery::-webkit-scrollbar {
		display: none;
	}

	.atelier-gallery > .atelier-gallery__tile {
		flex: 0 0 100%;
		scroll-snap-align: start;
		aspect-ratio: 335 / 400;
	}

	.atelier-gallery__nav.mobile-only {
		display: flex;
		justify-content: center;
		margin-top: 16px;
	}

	.atelier-faq {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.atelier-faq__intro {
		align-items: center;
		text-align: center;
	}

	/* ---------- Certificates page ---------- */

	.certificate-page {
		background: var(--color-white);
	}

	.certificate-page__title {
		font-size: 20px;
		font-weight: 500;
		text-align: center;
		margin: 0;
	}

	.certificate-page__subtitle {
		max-width: none;
		text-align: center;
		font-size: 14px;
		margin: 8px 0 24px;
	}

	.certificate-wizard {
		display: block;
	}

	.certificate-wizard__sidebar {
		position: static;
		gap: 24px;
		margin-bottom: 32px;
	}

	.certificate-wizard__step-number,
	.certificate-wizard__steps {
		display: none;
	}

	.certificate-wizard__mobile-progress {
		display: block;
	}

	.certificate-wizard__mobile-progress-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
	}

	.certificate-wizard__mobile-progress-head span:first-child {
		color: var(--color-black);
	}

	.certificate-wizard__mobile-progress-head span:last-child {
		color: var(--color-grey-text);
		font-weight: 500;
	}

	.certificate-wizard__mobile-progress-track {
		height: 4px;
		border-radius: var(--radius-pill);
		background: var(--color-grey-cat);
		overflow: hidden;
	}

	.certificate-wizard__mobile-progress-fill {
		height: 100%;
		width: 25%;
		border-radius: var(--radius-pill);
		background: var(--color-black);
		transition: width 0.3s ease 0s;
	}

	.certificate-wizard__stage {
		display: block;
	}

	.certificate-wizard__preview {
		margin-bottom: 24px;
	}

	.certificate-wizard__preview-card {
		aspect-ratio: 335 / 260;
		border-radius: 19px;
	}

	.certificate-wizard__title {
		font-size: 22px;
	}

	.certificate-wizard__amount-display {
		font-size: 32px;
	}

	.certificate-denominations {
		display: flex;
		flex-wrap: wrap;
	}

	.certificate-denomination {
		padding: 13px 24px;
		font-size: 16px;
	}

	.certificate-wizard__nav {
		justify-content: space-between;
	}

	.certificate-wizard__next {
		width: 80px;
		height: 80px;
		font-size: 12px;
	}

	/* ---------- Product lightbox / manager popup ---------- */

	.product-lightbox {
		padding: 60px 16px 24px;
		gap: 12px;
	}

	.product-lightbox__thumbs {
		display: none;
	}

	.product-lightbox__arrow {
		width: 36px;
		height: 36px;
	}

	.product-lightbox__stage {
		max-width: 100%;
	}

	.manager-popup__card {
		width: calc(100% - 32px);
		padding: 24px 20px;
	}

	.site-popup--subscribe .site-popup__card {
		width: 95vw;
		max-width: 95vw;
		padding: 24px 20px;
	}

	.preorder-popup__card {
		width: calc(100vw - 32px);
		padding: 24px 20px;
		max-width: none;
	}

	.site-popup--big .site-popup__card,
	.site-popup--small .site-popup__card {
		/* vw-based, not %: .site-popup__media has no intrinsic content of its
		   own (just background-image + aspect-ratio), so a %-width here would
		   resolve against a shrink-to-fit ancestor with nothing to shrink to
		   and collapse the whole card to ~0. Both types render at the 3:4
		   ratio on mobile (see .site-popup--small .site-popup__media below),
		   so the same 80vh-derived cap applies to both. */
		width: min(calc(100vw - 32px), calc(80vh * 3 / 4));
	}

	.site-popup--small .site-popup__media {
		aspect-ratio: 3 / 4;
	}

	.site-popup--big .site-popup__title,
	.site-popup--small .site-popup__title {
		font-size: 20px;
	}

	.site-popup--big .site-popup__text,
	.site-popup--small .site-popup__text {
		font-size: 13px;
	}

	.cookie-consent {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
		padding: 20px;
	}

	.cookie-consent__actions {
		flex-direction: column;
	}
	/* Флекс-элемент с min-width: auto не ужимается уже своего содержимого,
	   и широкая лента чипов растягивала всю колонку с товарами. */
	.catalog-results {
		min-width: 0;
		max-width: 100%;
	}

	.catalog-collections {
		display: flex;
		min-width: 0;
		gap: 8px;
		overflow-x: auto;
		/* Без этого overflow-y по спецификации тоже становится auto, и на
		   телефоне слайдер ловил вертикальный свайп как отдельный скролл. */
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin: 16px 0 20px;
		padding: 0;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
	}

	/* Портретная медиа-область вместо квадрата: карточка вырастает
	   с 282 до ~360 px, и в экран помещается ровно четыре товара. */
	.product-card__media {
		aspect-ratio: 2 / 3;
	}

	.product-card__title {
		font-size: 17px;
	}

	.product-card__price {
		font-size: 18px;
	}

	/* На мобильной стрелка в карточке коллекции была мелкой мишенью —
	   увеличена вдвое. */
	.collection-card__arrow {
		width: 38px;
		height: 38px;
	}

	.preloader__bg {
		background-image: url('../images/home/preloader-bg-mobile.webp');
	}

	/* 5. Колонка «Онлайн покупки» по центру. */
	.site-footer__shopping,
	.site-footer__shopping ul {
		align-items: center;
		text-align: center;
	}

	/* 10. Подпись «Выберете тему вопроса» мельче и по центру. */
	.contact__label {
		font-size: 12px;
		text-align: center;
	}

	/* 13. Кнопка отправки крупнее и на всю ширину. */
	.contact__form .btn {
		align-self: stretch;
		width: 100%;
		padding: 18px 24px;
		font-size: 16px;
	}

	/* 14. Закреплённая шапка со скруглённым низом, как на десктопе. */
	.site-header--pinned {
		background: var(--color-white);
		box-shadow: none;
		border-bottom: none;
		border-radius: 0 0 32px 32px;
	}

	/* 15. Вопросы FAQ и плюсик крупнее. */
	.atelier-faq__question {
		font-size: 17px;
	}

	img.atelier-faq__icon {
		width: 24px;
		height: 24px;
	}

	/* 20. Стрелки слайдера коллекций были скрыты, и блок выглядел
	   статичным — непонятно, что его нужно листать. Заголовок
	   карточки коллекции крупнее. */
	.section--collections .carousel-nav {
		display: flex;
	}

	.collection-card__title {
		font-size: 20px;
	}
}

.socials__btn {
	text-decoration: none;
}

/* Соцсети выводятся кнопками, подчёркивание тут лишнее. */
.socials__btn,
.socials__btn:hover {
	text-decoration: none;
}

/* Липкая кнопка каталога — только мобильная раскладка. */
.mobile-cta {
	display: none;
}

@media (max-width: 640px) {
	.mobile-cta {
		display: flex;
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		/* Ниже мобильного меню (200) и его крестика (201), чтобы
		   не перекрывать их при открытом меню. */
		z-index: 150;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 18px 24px;
		background: var(--color-black);
		color: var(--color-white);
		border-radius: var(--radius-pill);
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
		opacity: 0;
		transform: translateY(140%);
		pointer-events: none;
		transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.mobile-cta.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		color: #fff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-cta {
		transition: none;
	}
}

/* Обычные страницы шли без контейнера и прижимались к краю окна. */
.site-main--page {
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(32px, 3vw, 64px) var(--gutter) clamp(48px, 5vw, 96px);
	box-sizing: border-box;
}

.site-main--page .entry-header {
	margin-bottom: clamp(20px, 2vw, 36px);
}

.site-main--page .entry-title {
	font-size: clamp(28px, 2.6042vw, 50px);
	font-weight: 600;
	margin: 0;
}

.site-main--page .entry-content {
	max-width: 72ch;
	font-size: clamp(15px, 1.0417vw, 18px);
	line-height: 1.7;
}

.site-main--page .entry-content h2 {
	font-size: clamp(20px, 1.6667vw, 32px);
	font-weight: 600;
	margin: clamp(28px, 2.5vw, 48px) 0 clamp(10px, 0.8333vw, 16px);
}

.site-main--page .entry-content p,
.site-main--page .entry-content ul {
	margin: 0 0 clamp(14px, 1.25vw, 20px);
}

.site-main--page .entry-content ul {
	padding-left: 1.2em;
}

.site-main--page .entry-content li {
	margin-bottom: 8px;
}

@media (max-width: 640px) {
	.site-main--page {
		padding: 24px 16px 96px;
	}
}

/* ---------- Оформление заказа: классическая форма (inc/checkout-new.php) ---------- */

.mj-co {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 480px);
	gap: clamp(30px, 3.3vw, 64px);
	align-items: start;
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(25px, 2.0833vw, 40px) var(--gutter) clamp(50px, 4.1667vw, 80px);
	box-sizing: border-box;
	font-family: var(--font-manrope);
	color: var(--color-black);
}

.mj-co__main {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.4vw, 46px);
	min-width: 0;
}

.mj-step__title {
	margin: 0 0 clamp(10px, 0.8333vw, 16px);
	font-size: clamp(18.75px, 1.5625vw, 30px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mj-step__hint {
	margin: -6px 0 14px;
	font-size: 14px;
	line-height: 1.45;
	color: #6b6b6b;
}

.mj-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mj-grid__wide {
	grid-column: 1 / -1;
}

/* Поле: подпись живёт внутри «таблетки» и уходит вверх, когда есть значение. */
.mj-field {
	position: relative;
	margin: 0;
}

.mj-field input,
.mj-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: clamp(56px, 3.9vw, 72px);
	padding: clamp(20px, 1.5vw, 26px) 24px 6px;
	border: 1px solid var(--color-grey-cat);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font-family: var(--font-manrope);
	font-size: clamp(14px, 0.9375vw, 17px);
	color: var(--color-black);
	box-shadow: none;
	outline: none;
	transition: border-color 0.2s ease;
}

.mj-field textarea {
	height: auto;
	min-height: 110px;
	padding-top: 26px;
	border-radius: clamp(20px, 1.6667vw, 32px);
	resize: vertical;
}

.mj-field input:hover,
.mj-field textarea:hover {
	border-color: #9a9a9a;
}

.mj-field input:focus,
.mj-field textarea:focus {
	border-color: var(--color-black);
}

.mj-field input:disabled {
	background: #f1f1f1;
	cursor: not-allowed;
}

.mj-field label {
	position: absolute;
	left: 25px;
	top: 50%;
	max-width: calc(100% - 50px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: clamp(14px, 0.9375vw, 17px);
	color: #8a8a8a;
	pointer-events: none;
	transform: translateY(-50%);
	transform-origin: left top;
	transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease;
}

.mj-field input:focus + label,
.mj-field input:not(:placeholder-shown) + label,
.mj-field textarea:focus + label,
.mj-field textarea:not(:placeholder-shown) + label {
	top: 10px;
	font-size: 12px;
	transform: none;
}

.mj-field textarea + label {
	top: 22px;
}

.mj-field__opt {
	color: #b0b0b0;
}

.mj-field.woocommerce-invalid input {
	border-color: var(--color-orange);
}

/* Подсказки адреса */
.mj-ac__list {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var(--color-grey-cat);
	border-radius: var(--radius-m);
	background: var(--color-white);
	box-shadow: 0 18px 40px rgba(13, 13, 13, 0.12);
}

.mj-ac__list[hidden] {
	display: none;
}

.mj-ac__item,
.mj-ac__msg {
	padding: 12px 18px;
	border-radius: calc(var(--radius-m) - 6px);
	font-size: 15px;
	line-height: 1.35;
}

.mj-ac__item {
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.mj-ac__item:hover,
.mj-ac__item.is-active {
	background: #f3f3f3;
}

.mj-ac__msg {
	color: #6b6b6b;
}

/* Доставка: вкладки */
.mj-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}

.mj-tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 16px 22px;
	border: 1.5px solid var(--color-grey-cat);
	border-radius: var(--radius-m);
	background: var(--color-white);
	font-family: var(--font-manrope);
	text-align: left;
	color: var(--color-black);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mj-tab:hover {
	border-color: #9a9a9a;
}

.mj-tab:active {
	transform: scale(0.98);
}

.mj-tab.is-active {
	border-color: var(--color-black);
	box-shadow: 0 0 0 1px var(--color-black);
}

.mj-tab__title {
	font-size: clamp(15px, 1vw, 18px);
	font-weight: 600;
}

.mj-tab__price {
	font-size: 14px;
	color: #6b6b6b;
}

.mj-panel {
	display: none;
}

.mj-panel.is-active {
	display: block;
}

.mj-select {
	position: relative;
	display: block;
}

.mj-select__label {
	position: absolute;
	left: 25px;
	top: 10px;
	font-size: 12px;
	color: #8a8a8a;
	pointer-events: none;
}

.mj-select select {
	display: block;
	width: 100%;
	height: clamp(56px, 3.9vw, 72px);
	box-sizing: border-box;
	padding: 18px 52px 0 24px;
	border: 1px solid var(--color-grey-cat);
	border-radius: var(--radius-pill);
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%230d0d0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 24px center;
	font-family: var(--font-manrope);
	font-size: clamp(14px, 0.9375vw, 17px);
	color: var(--color-black);
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.mj-select select:hover {
	border-color: #9a9a9a;
}

.mj-select select:focus {
	border-color: var(--color-black);
}

.mj-delivery__hint {
	margin: 0;
	padding: 18px 22px;
	border: 1.5px dashed var(--color-grey-cat);
	border-radius: var(--radius-m);
	font-size: 15px;
	color: #6b6b6b;
}

/* Карта и список пунктов */
.mj-pickup {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 12px;
	margin-top: 12px;
}

.mj-pickup[hidden] {
	display: none;
}

.mj-pickup__map {
	grid-row: 1;
	min-height: clamp(360px, 30vw, 520px);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: #e9e9e9;
	z-index: 0;
}

.mj-pickup__side {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	max-height: clamp(360px, 30vw, 520px);
}

.mj-pickup__search input {
	height: 56px;
}

.mj-pickup__list {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--color-grey-cat);
	border-radius: var(--radius-m);
	background: var(--color-white);
}

.mj-pickup__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 18px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.mj-pickup__item:last-child {
	border-bottom: 0;
}

.mj-pickup__item span {
	color: #6b6b6b;
	font-size: 13px;
}

.mj-pickup__item:hover {
	background: #f7f7f7;
}

.mj-pickup__item.is-chosen {
	background: var(--color-yellow);
}

.mj-pickup__item.is-chosen span {
	color: var(--color-black);
}

.mj-pickup__msg {
	padding: 20px 18px;
	font-size: 14px;
	color: #6b6b6b;
}

.mj-pickup__chosen {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	align-items: baseline;
	padding: 16px 22px;
	border-radius: var(--radius-m);
	background: var(--color-yellow);
	font-size: 15px;
}

.mj-pickup__chosen[hidden] {
	display: none;
}

.mj-pickup__chosen-label {
	width: 100%;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Итог заказа */
.mj-co__side {
	position: sticky;
	top: 110px;
}

.mj-summary {
	padding: clamp(20px, 1.6667vw, 32px);
	border-radius: var(--radius-m);
	background: var(--color-white);
}

.mj-order__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.mj-order__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	font-size: 14px;
	line-height: 1.35;
}

.mj-order__thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 14px;
	background: #f3f3f3;
}

.mj-order__name {
	font-weight: 600;
}

.mj-order__qty {
	margin-left: 4px;
	font-weight: 400;
	color: #6b6b6b;
}

.mj-order__sum {
	font-weight: 600;
	white-space: nowrap;
}

.mj-order__totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid #ececec;
}

.mj-order__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 15px;
}

.mj-order__row dt,
.mj-order__row dd {
	margin: 0;
}

.mj-order__row--discount dd {
	color: var(--color-orange);
}

.mj-order__pending {
	color: #8a8a8a;
	font-size: 14px;
}

.mj-order__row--total {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid #ececec;
	font-size: clamp(18px, 1.25vw, 22px);
	font-weight: 700;
}

.mj-coupon {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.mj-coupon .mj-field {
	flex: 1;
}

.mj-coupon .mj-field input {
	height: 56px;
}

.mj-coupon__btn {
	padding: 0 26px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-manrope);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mj-coupon__btn:hover {
	background: var(--color-orange);
}

.mj-coupon__btn:active {
	transform: scale(0.96);
}

.mj-coupon__btn:disabled {
	opacity: 0.5;
}

.mj-coupon__msg {
	flex-basis: 100%;
	font-size: 13px;
}

.mj-coupon {
	flex-wrap: wrap;
}

.mj-note {
	margin-top: 16px;
}

.mj-note__toggle {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-manrope);
	font-size: 14px;
	color: var(--color-black);
	text-decoration: underline;
	cursor: pointer;
}

.mj-note__toggle:hover {
	color: var(--color-orange);
}

.mj-note__field {
	margin-top: 12px;
}

.mj-note__field[hidden] {
	display: none;
}

/* Оплата */
.mj-co #payment {
	background: none;
	border-radius: 0;
}

.mj-co #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	list-style: none;
}

.mj-co #payment .wc_payment_method {
	position: relative;
	margin: 0;
	border: 1.5px solid var(--color-grey-cat);
	border-radius: var(--radius-m);
	background: var(--color-white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mj-co #payment .wc_payment_method:hover {
	border-color: #9a9a9a;
}

.mj-co #payment .wc_payment_method:has(input:checked) {
	border-color: var(--color-black);
	box-shadow: 0 0 0 1px var(--color-black);
}

.mj-co #payment .wc_payment_method > input {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid #b5b5b5;
	border-radius: 50%;
	background: var(--color-white);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border 0.15s ease;
}

.mj-co #payment .wc_payment_method > input:checked {
	border: 7px solid var(--color-black);
}

.mj-co #payment .wc_payment_method > input:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.mj-co #payment .wc_payment_method > label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 18px 20px 18px 58px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}

.mj-co #payment .wc_payment_method > label img {
	max-height: 24px;
	width: auto;
}

.mj-co #payment .payment_box {
	margin: 0;
	padding: 0 20px 18px 58px;
	background: none;
	font-size: 14px;
	line-height: 1.45;
	color: #6b6b6b;
}

.mj-co #payment .payment_box::before {
	display: none;
}

.mj-co #payment .payment_box p {
	margin: 0;
}

.mj-co #place_order {
	display: block;
	width: 100%;
	padding: clamp(14px, 1.1vw, 21px) 30px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-manrope);
	font-size: clamp(16px, 1.0417vw, 20px);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mj-co #place_order:hover {
	background: var(--gradient-orange);
}

.mj-co #place_order:active {
	transform: scale(0.985);
}

.mj-consent {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6b6b6b;
}

.mj-consent a,
.mj-co a {
	color: var(--color-black);
	text-decoration: underline;
}

.mj-consent a:hover,
.mj-co a:hover {
	color: var(--color-orange);
}

/* Сообщения WooCommerce (ошибки оформления, промокод) */
.mj-co .woocommerce-error,
.mj-co .woocommerce-message,
.mj-co .woocommerce-info {
	margin: 0 0 14px;
	padding: 14px 20px;
	list-style: none;
	border: 0;
	border-radius: var(--radius-s);
	background: #fdeceb;
	font-size: 14px;
	line-height: 1.45;
	color: #8f2112;
}

.mj-co .woocommerce-message,
.mj-co .woocommerce-info {
	background: #eef6ee;
	color: #1f5a24;
}

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

.mj-co .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}

/* Только пункт выдачи: улица и квартира не нужны. */
.mj-co--pickup [data-mode="courier"] {
	display: none;
}

@media (max-width: 1199px) {
	.mj-co {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 16px;
		padding-right: 16px;
	}

	.mj-co__side {
		position: static;
		order: -1;
	}

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

	.mj-pickup__map {
		grid-row: auto;
		min-height: 320px;
	}

	.mj-pickup__side {
		grid-row: auto;
		max-height: 380px;
	}
}

@media (max-width: 640px) {
	.mj-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mj-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.mj-tab {
		padding: 13px 14px;
	}

	.mj-order__item {
		grid-template-columns: 52px minmax(0, 1fr) auto;
		gap: 10px;
	}

	.mj-order__thumb img {
		width: 52px;
		height: 52px;
	}
}

/* Стили WooCommerce для .form-row (рамка 3px, padding .5em) сильнее наших —
   повторяем ключевые свойства с большей специфичностью. */
.mj-co .form-row.mj-field input.input-text,
.mj-co .form-row.mj-field textarea.input-text {
	height: clamp(56px, 3.9vw, 72px);
	padding: clamp(20px, 1.5vw, 26px) 24px 6px;
	border: 1px solid var(--color-grey-cat);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font-family: var(--font-manrope);
	font-size: clamp(14px, 0.9375vw, 17px);
	line-height: 1.2;
	color: var(--color-black);
	box-shadow: none;
}

.mj-co .form-row.mj-field textarea.input-text {
	height: auto;
	min-height: 110px;
	padding-top: 28px;
	border-radius: clamp(20px, 1.6667vw, 32px);
}

.mj-co .form-row.mj-field input.input-text:focus,
.mj-co .form-row.mj-field textarea.input-text:focus {
	border-color: var(--color-black);
}

.mj-co .form-row.mj-field label {
	display: block;
	line-height: 1.2;
	font-weight: 400;
}

.mj-co .form-row.mj-field input.input-text:focus + label,
.mj-co .form-row.mj-field input.input-text:not(:placeholder-shown) + label,
.mj-co .form-row.mj-field textarea.input-text:focus + label,
.mj-co .form-row.mj-field textarea.input-text:not(:placeholder-shown) + label {
	top: 10px;
	font-size: 12px;
	transform: none;
}

.mj-co .form-row.mj-field.woocommerce-invalid input.input-text {
	border-color: var(--color-orange);
}

/* WooCommerce красит .payment_box лиловым и рисует «стрелку» — убираем. */
.woocommerce-checkout .mj-co #payment div.payment_box {
	background: none;
	color: #6b6b6b;
}

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

.woocommerce-checkout .mj-co #payment {
	background: none;
}

.woocommerce-checkout .mj-co #payment div.form-row {
	padding: 0;
}

/* Ошибки оформления — столбиком, а не в строку. */
.woocommerce-checkout .mj-co ul.woocommerce-error {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce-checkout .mj-co ul.woocommerce-error li {
	display: block;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .mj-co ul.woocommerce-error li strong {
	font-weight: 700;
}

/* ======================================================================
   Оформление заказа — состояния полей (UIX-314)
   default · hover · focus · filled · error · disabled · autofill
   Правила продублированы для двух разметок: <p class="form-row mj-field">
   (имя, email, телефон — с высокой специфичностью WooCommerce) и
   <div class="mj-field"> (адрес, промокод, поиск).
   ====================================================================== */

.mj-co {
	--mj-h: clamp(56px, 3.9vw, 72px);
	--mj-error: #c8321a;
	--mj-error-soft: rgba(200, 50, 26, 0.1);
	--mj-ring: rgba(13, 13, 13, 0.08);
}

/* Подпись всегда на середине рамки, даже если под полем появилась ошибка. */
.mj-co .mj-field > label {
	top: calc(var(--mj-h) / 2);
}

.mj-co .mj-field textarea + label {
	top: 28px;
}

.mj-co .mj-field > input:focus + label,
.mj-co .mj-field > input:not(:placeholder-shown) + label,
.mj-co .mj-field > textarea:focus + label,
.mj-co .mj-field > textarea:not(:placeholder-shown) + label {
	top: 10px;
}

/* focus */
.mj-co .mj-field input:focus,
.mj-co .mj-field textarea:focus,
.mj-co .form-row.mj-field input.input-text:focus,
.mj-co .form-row.mj-field textarea.input-text:focus {
	border-color: var(--color-black);
	box-shadow: 0 0 0 4px var(--mj-ring);
}

.mj-co .mj-field input:focus + label,
.mj-co .mj-field textarea:focus + label {
	color: var(--color-black);
}

/* filled: значение есть, поле не в фокусе — рамка чуть темнее обычной. */
.mj-co .mj-field input:not(:placeholder-shown):not(:focus),
.mj-co .form-row.mj-field input.input-text:not(:placeholder-shown):not(:focus) {
	border-color: #bdbdbd;
}

/* error */
.mj-co .mj-field.is-invalid input,
.mj-co .form-row.mj-field.is-invalid input.input-text,
.mj-co .form-row.mj-field.woocommerce-invalid input.input-text {
	border-color: var(--mj-error);
	box-shadow: 0 0 0 4px var(--mj-error-soft);
}

.mj-co .mj-field.is-invalid > label,
.mj-co .mj-field.woocommerce-invalid > label {
	color: var(--mj-error);
}

.mj-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0 24px;
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: 0.005em;
	color: var(--mj-error);
	animation: mj-error-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mj-field__error::before {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--mj-error) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.5v4M7 9.6v.1' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

@keyframes mj-error-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.mj-co .mj-field.is-invalid {
	animation: mj-shake 0.35s ease;
}

@keyframes mj-shake {
	20% { transform: translateX(-4px); }
	45% { transform: translateX(4px); }
	70% { transform: translateX(-2px); }
}

/* Инлайн-сообщения WooCommerce заменены нашими. */
.mj-co .mj-field .checkout-inline-error-message {
	display: none;
}

/* disabled */
.mj-co .mj-field input:disabled {
	border-color: #e8e8e8;
	background: #f1f1f1;
	color: #9a9a9a;
	cursor: not-allowed;
	box-shadow: none;
}

.mj-co .mj-field input:disabled + label {
	color: #b3b3b3;
}

/* Автозаполнение браузера не должно красить поле в жёлтый или голубой. */
.mj-co .mj-field input:-webkit-autofill,
.mj-co .mj-field input:-webkit-autofill:hover,
.mj-co .mj-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--color-black);
	-webkit-box-shadow: 0 0 0 1000px var(--color-white) inset;
	transition: background-color 9999s ease 0s;
}

.mj-co .mj-field input:-webkit-autofill + label {
	top: 10px;
	font-size: 12px;
	transform: none;
}

/* Подсказка формата телефона показывается только в фокусе. */
.mj-co .mj-field input[type="tel"]:focus::placeholder {
	color: #b5b5b5;
}

/* Чекбоксы и радио в одном стиле с карточками оплаты. */
.mj-co input[type="checkbox"],
.mj-co input[type="radio"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid #b5b5b5;
	background: var(--color-white);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.mj-co input[type="checkbox"] {
	border-radius: 7px;
}

.mj-co input[type="radio"] {
	border-radius: 50%;
}

.mj-co input[type="checkbox"]:hover,
.mj-co input[type="radio"]:hover {
	border-color: var(--color-black);
}

.mj-co input[type="checkbox"]:checked {
	border-color: var(--color-black);
	background: var(--color-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.4 2.7 2.7L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.mj-co input[type="radio"]:checked {
	border: 7px solid var(--color-black);
}

.mj-co input[type="checkbox"]:focus-visible,
.mj-co input[type="radio"]:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.mj-co input[type="checkbox"]:disabled,
.mj-co input[type="radio"]:disabled {
	border-color: #e0e0e0;
	background-color: #f1f1f1;
	cursor: not-allowed;
}

/* Мобильные: 16px в полях, иначе iOS Safari приближает страницу при фокусе. */
@media (max-width: 640px) {
	.mj-co .mj-field input,
	.mj-co .form-row.mj-field input.input-text,
	.mj-co .mj-field textarea,
	.mj-co .form-row.mj-field textarea.input-text,
	.mj-select select {
		font-size: 16px;
	}

	.mj-co .mj-field > label {
		font-size: 16px;
	}

	.mj-co .mj-field > input:focus + label,
	.mj-co .mj-field > input:not(:placeholder-shown) + label,
	.mj-co .mj-field > textarea:focus + label,
	.mj-co .mj-field > textarea:not(:placeholder-shown) + label,
	.mj-co .mj-field > input:-webkit-autofill + label {
		font-size: 12px;
	}

	.mj-field__error {
		margin-left: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mj-field__error,
	.mj-co .mj-field.is-invalid {
		animation: none;
	}
}

/* ======================================================================
   Оформление заказа — блок доставки СДЭК (UIX-315)
   ====================================================================== */

.mj-rate-info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 12px 4px 0;
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 0.005em;
	color: #4d4d4d;
}

.mj-rate-info strong {
	font-size: clamp(17px, 1.1vw, 20px);
	font-weight: 700;
	color: var(--color-black);
	font-variant-numeric: tabular-nums;
}

.mj-rate-info__sep {
	color: #b5b5b5;
}

.mj-rate-info__addr {
	flex-basis: 100%;
	font-size: 14px;
	color: #6b6b6b;
}

/* Вкладки: ровная сетка, цена выровнена по левому краю. */
.mj-tab {
	min-height: 78px;
	justify-content: center;
}

.mj-tab__price {
	font-variant-numeric: tabular-nums;
}

.mj-tab.is-active .mj-tab__price {
	color: var(--color-black);
}

.mj-tab:focus-visible,
.mj-select select:focus-visible,
.mj-coupon__btn:focus-visible,
.mj-note__toggle:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 3px;
}

/* Карта: контролы и подписи в стиле сайта. */
.mj-pickup__map .leaflet-control-zoom {
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(13, 13, 13, 0.14);
}

.mj-pickup__map .leaflet-control-zoom a {
	width: 38px;
	height: 38px;
	line-height: 38px;
	border: 0;
	color: var(--color-black);
	font-family: var(--font-manrope);
	font-size: 20px;
	transition: background-color 0.15s ease;
}

.mj-pickup__map .leaflet-control-zoom a:hover {
	background: var(--color-yellow);
	color: var(--color-black);
}

.mj-pickup__map .leaflet-control-zoom a + a {
	border-top: 1px solid #ececec;
}

.mj-pickup__map .leaflet-control-attribution {
	padding: 2px 8px;
	border-radius: 10px 0 0 0;
	font-family: var(--font-manrope);
	font-size: 10px;
	color: #6b6b6b;
}

.mj-pickup__map .leaflet-tooltip {
	padding: 7px 12px;
	border: 0;
	border-radius: 12px;
	font-family: var(--font-manrope);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-black);
	box-shadow: 0 6px 20px rgba(13, 13, 13, 0.18);
}

.mj-pickup__map .leaflet-tooltip-top::before {
	border-top-color: var(--color-white);
}

.mj-pickup.is-invalid .mj-pickup__map {
	outline: 2px solid var(--mj-error);
	outline-offset: 2px;
}

.mj-pickup__error {
	grid-column: 1 / -1;
	margin: 0 0 0 4px;
}

/* Легенда карты */
.mj-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0 6px;
	list-style: none;
	font-size: 12.5px;
	color: #6b6b6b;
}

.mj-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mj-legend__dot {
	width: 11px;
	height: 11px;
	border: 2px solid var(--color-black);
	border-radius: 50%;
}

.mj-legend__dot--pvz {
	background: var(--color-orange);
}

.mj-legend__dot--post {
	background: var(--color-yellow);
}

.mj-legend__dot--chosen {
	background: var(--color-black);
}

/* Список пунктов: аккуратный скролл, ховер и выбранный пункт. */
.mj-pickup__list {
	scrollbar-width: thin;
	scrollbar-color: #cfcfcf transparent;
}

.mj-pickup__list::-webkit-scrollbar {
	width: 8px;
}

.mj-pickup__list::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: #cfcfcf;
}

.mj-pickup__item strong {
	font-weight: 600;
	letter-spacing: 0.005em;
}

.mj-pickup__item {
	transition: background-color 0.15s ease, padding-left 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mj-pickup__item:hover {
	padding-left: 22px;
}

.mj-pickup__chosen {
	animation: mj-error-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Тариф: аккуратный список на телефоне */
@media (max-width: 640px) {
	.mj-tab {
		min-height: 72px;
	}

	.mj-tab__title {
		font-size: 15px;
	}

	.mj-rate-info {
		font-size: 14px;
	}

	.mj-pickup__map {
		min-height: 300px;
	}

	.mj-pickup__item:hover {
		padding-left: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mj-pickup__chosen {
		animation: none;
	}

	.mj-pickup__item {
		transition: background-color 0.15s ease;
	}
}

/* ======================================================================
   Экран после оформления заказа (inc/checkout-new.php, thankyou.php)
   ====================================================================== */

.mj-ty {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 460px);
	gap: clamp(20px, 2vw, 32px);
	align-items: start;
	max-width: clamp(1140px, 95vw, 1824px);
	margin: 0 auto;
	padding: clamp(40px, 4.1667vw, 80px) var(--gutter) clamp(50px, 4.1667vw, 80px);
	box-sizing: border-box;
	font-family: var(--font-manrope);
	color: var(--color-black);
}

.mj-ty__main,
.mj-ty__side {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.2vw, 20px);
	min-width: 0;
}

.mj-ty__card {
	padding: clamp(22px, 2.2vw, 40px);
	border-radius: var(--radius-m);
	background: var(--color-white);
}

.mj-ty__main > .mj-ty__card:first-child {
	padding-top: clamp(28px, 3vw, 56px);
	padding-bottom: clamp(26px, 2.6vw, 48px);
}

.mj-ty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 5vw, 88px);
	height: clamp(64px, 5vw, 88px);
	margin-bottom: clamp(18px, 1.6vw, 28px);
	border-radius: 50%;
	animation: mj-ty-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mj-ty__icon svg {
	width: 52%;
	height: 52%;
}

.mj-ty--paid .mj-ty__icon {
	background: var(--color-yellow);
	color: var(--color-black);
}

.mj-ty--wait .mj-ty__icon {
	background: #f1f1f1;
}

.mj-ty--fail .mj-ty__icon {
	background: var(--color-orange);
	color: var(--color-white);
}

.mj-ty__spinner {
	width: 44%;
	height: 44%;
	border: 3.5px solid #d6d6d6;
	border-top-color: var(--color-black);
	border-radius: 50%;
	animation: mj-ty-spin 0.9s linear infinite;
}

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

@keyframes mj-ty-pop {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
}

.mj-ty__eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.mj-ty__title {
	margin: 0;
	font-size: clamp(28px, 2.6042vw, 50px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.mj-ty__lead {
	max-width: 46em;
	margin: clamp(12px, 1vw, 18px) 0 0;
	font-size: clamp(15px, 1.0417vw, 19px);
	line-height: 1.5;
	color: #4d4d4d;
}

.mj-ty__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(24px, 3vw, 56px);
	margin: clamp(22px, 2vw, 34px) 0 0;
	padding-top: clamp(18px, 1.6vw, 28px);
	border-top: 1px solid #ececec;
}

.mj-ty__meta div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mj-ty__meta dt {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.mj-ty__meta dd {
	margin: 0;
	font-size: clamp(15px, 1.0417vw, 19px);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.mj-ty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(22px, 2vw, 34px);
}

.mj-ty__btn {
	min-width: 190px;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mj-ty__btn:active {
	transform: scale(0.97);
}

.mj-ty__btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.mj-ty__btn--ghost {
	border: 1.5px solid var(--color-grey-cat);
	background: transparent;
	color: var(--color-black);
}

.mj-ty__btn--ghost:hover {
	border-color: var(--color-black);
	background: var(--color-black);
	color: var(--color-white);
}

.mj-ty__btn:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 3px;
}

.mj-ty__h2 {
	margin: 0 0 clamp(14px, 1.2vw, 20px);
	font-size: clamp(18px, 1.4vw, 26px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mj-ty__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mj-step;
}

.mj-ty__list li {
	position: relative;
	padding-left: 46px;
	font-size: clamp(14px, 0.9375vw, 17px);
	line-height: 1.5;
	counter-increment: mj-step;
}

.mj-ty__list li::before {
	content: counter(mj-step);
	position: absolute;
	left: 0;
	top: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-yellow);
	font-size: 14px;
	font-weight: 700;
}

.mj-ty__contacts {
	margin: clamp(18px, 1.6vw, 26px) 0 0;
	padding-top: 16px;
	border-top: 1px solid #ececec;
	font-size: 14px;
	color: #6b6b6b;
}

.mj-ty a:not(.btn) {
	color: var(--color-black);
	text-decoration: underline;
}

.mj-ty a:not(.btn):hover {
	color: var(--color-orange);
}

.mj-ty__delivery-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
}

.mj-ty__delivery-addr {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.45;
}

.mj-ty__delivery-who {
	margin: 0;
	font-size: 14px;
	color: #6b6b6b;
}

.mj-ty__side {
	position: sticky;
	top: 110px;
}

.mj-ty .mj-order__items {
	margin-bottom: 18px;
}

/* Хуки плагинов (напр. Робокасса) не должны ломать вёрстку. */
.mj-ty__plugins {
	grid-column: 1 / -1;
}

.mj-ty__plugins:empty {
	display: none;
}

@media (max-width: 1199px) {
	.mj-ty {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 16px;
		padding-right: 16px;
	}

	.mj-ty__side {
		position: static;
	}
}

@media (max-width: 640px) {
	.mj-ty__actions {
		flex-direction: column;
	}

	.mj-ty__btn {
		width: 100%;
	}

	.mj-ty__meta {
		gap: 14px 28px;
	}

	.mj-ty__list li {
		padding-left: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mj-ty__icon,
	.mj-ty__spinner {
		animation: none;
	}
}

/* Кнопки на экране заказа: общее правило ссылок страницы чекаута красило текст в чёрный. */
.checkout-page .mj-ty a.btn.btn--black,
.checkout-page .mj-ty button.btn.btn--black {
	color: var(--color-white);
	text-decoration: none;
}

.checkout-page .mj-ty a.btn.btn--black:hover,
.checkout-page .mj-ty button.btn.btn--black:hover {
	color: var(--color-white);
}

.checkout-page .mj-ty a.btn.mj-ty__btn--ghost {
	color: var(--color-black);
	text-decoration: none;
}

.checkout-page .mj-ty a.btn.mj-ty__btn--ghost:hover {
	color: var(--color-white);
}

/* Подтверждение почты */
.mj-ty--verify {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
}

.mj-verify {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: clamp(20px, 2vw, 32px);
}

.mj-verify .mj-ty__btn {
	align-self: flex-start;
}

.mj-ty--verify .mj-ty__icon {
	background: var(--color-yellow);
	color: var(--color-black);
}

.mj-ty--verify .mj-ty__title {
	font-size: clamp(26px, 2.2vw, 40px);
}