/* ==========================================================================
   CANDLESS — main stylesheet
   Built from Figma "SITE NEW" (file UkOsjigYrZrPUgSCElnRLi), mobile-first.

   The design is authored on a 390 x 844 frame. Everything is expressed in
   design units scaled by --k, so the layout keeps the macket's proportions on
   any phone width and stops growing at --app-max.

   Desktop breakpoints are deliberately NOT designed yet (see ТЗ 1.1) — the
   only desktop behaviour here is centring the mobile column.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted Inter — no third-party requests)
   -------------------------------------------------------------------------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* --------------------------------------------------------------------------
   2. Design tokens (1:1 with the Figma styles)
   -------------------------------------------------------------------------- */
:root {
	/* .ART colour styles */
	--c-white: #ffffff;
	--c-black: #000000;
	--c-line: rgba(0, 0, 0, 0.5);          /* Black 50 (Line)      */
	--c-veil: rgba(255, 255, 255, 0.64);   /* White 64 (Blur)      */
	--c-accent: #a2051e;                   /* Menu & Cart 1        */
	--c-asher-02: #919aaa;                 /* placeholder surface  */
	--c-asher-04: #c6cdd9;                 /* muted text           */

	--blur: 1.5px;                         /* Figma Background Blur uniform 3 */

	/* Layout: the macket frame */
	--frame-w: 390;
	--app-max: 480px;
	--k: calc(min(100vw, var(--app-max)) / var(--frame-w));

	/* Spacing system (design units) */
	--gutter: calc(24 * var(--k));
	--gutter-l: calc(28 * var(--k));
	--screen: 100svh;

	/* Typography scale */
	--f-headline-1: calc(64 * var(--k));
	--f-title-1: calc(48 * var(--k));
	--f-title-2: calc(48 * var(--k));
	--f-title-3: calc(24 * var(--k));
	--f-sub-1: calc(16 * var(--k));
	--f-sub-2: calc(16 * var(--k));
	--f-sub-3: calc(14 * var(--k));
	--ls-tight: -0.02em;                   /* letterSpacing -2 in Figma */

	/* Chrome heights used by several screens */
	--control-h: calc(48 * var(--k));
	--control-bottom: calc(40 * var(--k));

	/* Categories card: 145 in the macket, 217 with the ID search on top. */
	--menu-card-h: calc(145 * var(--k));
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-black);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: var(--f-sub-2);
	font-weight: 500;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* The whole site is one mobile column; centred once the viewport is wider. */
.site {
	position: relative;
	width: min(100vw, var(--app-max));
	min-height: 100svh;
	margin-inline: auto;
	background: var(--c-white);
	overflow-x: clip;
}

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

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

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

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

.skip-link:focus {
	position: fixed; z-index: 200; top: 8px; left: 8px;
	width: auto; height: auto; clip-path: none;
	padding: 8px 12px; background: var(--c-white); border: 1px solid var(--c-black);
}

/* --------------------------------------------------------------------------
   4. Typography helpers (Figma text styles)
   -------------------------------------------------------------------------- */
.t-headline-1 { font-size: var(--f-headline-1); font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1; }
.t-title-1,
.t-title-2    { font-size: var(--f-title-1);   font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1; }
.t-title-3    { font-size: var(--f-title-3);   font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1; }
.t-sub-1      { font-size: var(--f-sub-1);     font-weight: 600; letter-spacing: var(--ls-tight); line-height: 1; text-transform: uppercase; }
.t-sub-2      { font-size: var(--f-sub-2);     font-weight: 500; letter-spacing: 0; line-height: 1; }
.t-sub-3      { font-size: var(--f-sub-3);     font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1; }

.u-capitalize { text-transform: capitalize; }
.u-uppercase  { text-transform: uppercase; }

.c-line { height: 1px; background: var(--c-line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.c-btn {
	display: flex; align-items: center; justify-content: center;
	height: calc(56 * var(--k));
	padding-inline: calc(16 * var(--k));
	border-radius: calc(2 * var(--k));
	background: var(--c-accent);
	color: var(--c-white);
	font-size: var(--f-sub-1); font-weight: 600; letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	transition: opacity .18s ease;
}
.c-btn:hover { opacity: .88; }
.c-btn[disabled], .c-btn.is-busy { opacity: .55; pointer-events: none; }
.c-btn--full { width: 100%; }
.c-btn--ghost { background: transparent; color: var(--c-black); border: 1px solid var(--c-line); }

/* --------------------------------------------------------------------------
   6. Cart counter (top-right, 43x93 box in the macket)
   -------------------------------------------------------------------------- */
.c-cart-count {
	position: fixed; z-index: 60;
	top: 0; right: calc(50vw - min(50vw, var(--app-max) / 2));
	display: flex; align-items: center; justify-content: flex-end;
	width: calc(43 * var(--k)); height: calc(93 * var(--k));
	padding: calc(33 * var(--k)) calc(27 * var(--k)) calc(31 * var(--k)) 0;
	color: var(--c-accent);
	font-size: var(--f-title-3); font-weight: 500; letter-spacing: var(--ls-tight);
	text-align: right;
	transition: top .22s ease, right .22s ease;
}
.c-cart-count[hidden] { display: none; }

/* With the menu open the counter drops into the same corner of the menu window.
   Both card heights are fixed in the macket — 145 by default, 217 in the
   Register branch where the ID search sits above the categories — so the
   position is arithmetic, not a measurement that could race the transition. */
body.is-menu-open .c-cart-count {
	top: auto;
	/* Centred on the card's top edge, flush with its right side. Straddling the
	   edge keeps the number clear of the ID search bar, which fills the whole
	   top of the taller Register card. */
	bottom: calc(128 * var(--k) + var(--menu-card-h) - 12 * var(--k));
	right: calc(50vw - min(50vw, var(--app-max) / 2) + 16 * var(--k));
	width: auto; height: auto; padding: 0;
	z-index: 66;
	transition: bottom .22s ease, right .22s ease;
}

/* Brief acknowledgement when something lands in the cart. */
.c-cart-count.is-bumped { animation: candless-bump .4s ease; }
@keyframes candless-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   7. Play / Pause control + overlay menu
   -------------------------------------------------------------------------- */
.c-control {
	position: fixed; z-index: 70;
	left: 50%; transform: translateX(-50%);
	bottom: calc(var(--control-bottom) + env(safe-area-inset-bottom, 0px));
	display: flex; align-items: center; justify-content: center;
	width: calc(60 * var(--k)); height: var(--control-h);
}
.c-control svg { display: block; }
.c-control .icon-play  { width: calc(40 * var(--k)); height: calc(40 * var(--k)); }
.c-control .icon-pause { width: calc(28 * var(--k)); height: calc(40 * var(--k)); }
.c-control[hidden] { display: none; }
.c-control[data-mode="pause"] .c-control__play  { display: none; }
.c-control[data-mode="play"]  .c-control__pause { display: none; }

.panorama-wrap { position: relative; }

/* Veil: White 64 + background blur, exactly as the ТЗ specifies. */
.c-overlay {
	position: fixed; inset: 0; z-index: 50;
	width: min(100vw, var(--app-max));
	margin-inline: auto;
	background: var(--c-veil);
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));
	opacity: 0; visibility: hidden;
	transition: opacity .22s ease, visibility .22s ease;
}
body.is-veiled .c-overlay,
body.is-menu-open .c-overlay { opacity: 1; visibility: visible; }

/* Categories card. Anchored 128 design units from the bottom in both states. */
.c-menu-card {
	position: fixed; z-index: 65;
	left: 50%; transform: translateX(-50%) translateY(calc(8 * var(--k)));
	bottom: calc(128 * var(--k) + env(safe-area-inset-bottom, 0px));
	width: calc(358 * var(--k));
	height: var(--menu-card-h);
	background: var(--c-white);
	border-radius: calc(12 * var(--k));
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
body.is-menu-open .c-menu-card {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.c-menu-card:focus { outline: none; }
body.candless-register { --menu-card-h: calc(217 * var(--k)); }
.c-menu-card__inner { display: flex; flex-direction: column; align-items: center; width: 100%; }

.c-menu-nav {
	display: flex; align-items: center; justify-content: space-between;
	gap: calc(32 * var(--k));
	width: 100%;
	padding: calc(64 * var(--k)) calc(16 * var(--k));
	text-align: center;
}
.c-menu-nav a {
	flex: 1 1 auto;
	font-size: var(--f-sub-3); font-weight: 500; letter-spacing: var(--ls-tight);
	text-transform: capitalize;
	white-space: nowrap;
}
.c-menu-nav .current-menu-item > a,
.c-menu-nav a[aria-current] { text-decoration: underline; text-underline-position: from-font; }

/* ID search — only rendered inside the Register context (ТЗ 1.2). */
.c-idsearch {
	width: 100%;
	padding: calc(16 * var(--k)) calc(16 * var(--k)) 0;
}
/* Two states, both drawn in the macket:
   "Enter ID"  — Asher 04 bar, black text, search glyph  (Menu [Register])
   "Not Found" — Black 50 bar, Asher 04 text, no glyph   (search Not Found)  */
.c-idsearch__bar {
	display: flex; align-items: center;
	height: calc(56 * var(--k));
	padding: calc(12 * var(--k)) calc(16 * var(--k)) calc(12 * var(--k)) calc(24 * var(--k));
	gap: calc(12 * var(--k));
	background: var(--c-asher-04);
	border-radius: calc(48 * var(--k));
	overflow: hidden;
	transition: background .2s ease;
}
.c-idsearch__input {
	flex: 1 1 auto; min-width: 0;
	background: none; padding: 0;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none; appearance: none;
	color: var(--c-black);
	font-size: calc(20 * var(--k)); font-weight: 400; letter-spacing: .5px;
}
.c-idsearch__input:focus,
.c-idsearch__input:focus-visible { border: none !important; outline: none !important; box-shadow: none !important; }
.c-idsearch__input::placeholder { color: var(--c-black); opacity: 1; }
.c-idsearch__submit {
	display: flex; align-items: center; justify-content: center;
	width: calc(24 * var(--k)); height: calc(24 * var(--k));
	color: var(--c-black);
}
.c-idsearch__submit svg { width: 100%; height: 100%; }

.c-idsearch.is-not-found .c-idsearch__bar { background: rgba(0, 0, 0, 0.5); }
.c-idsearch.is-not-found .c-idsearch__input::placeholder { color: var(--c-asher-04); }
.c-idsearch.is-not-found .c-idsearch__submit { display: none; }

/* --------------------------------------------------------------------------
   8. Blank pages — image 75% of the screen + title under it
   -------------------------------------------------------------------------- */
.blank-list { display: flex; flex-direction: column; }

.blank-block { display: flex; flex-direction: column; }

/* 632 + 108 of 844 in the macket. Both parts are expressed as a share of the
   viewport so the band left at the bottom — where the Pause/Play control
   lives — stays the same on any phone height. */
.blank-block__media {
	position: relative;
	height: calc(var(--screen) * 0.749);
	overflow: hidden;
	background: var(--c-asher-02);
}
.blank-block__media img { width: 100%; height: 100%; object-fit: cover; }

.blank-block__title {
	display: flex; align-items: center;
	height: calc(var(--screen) * 0.128);
	min-height: calc(84 * var(--k));
	padding: 0 var(--gutter) 0 var(--gutter);
	font-size: var(--f-title-2); font-weight: 400; letter-spacing: var(--ls-tight);
	text-transform: capitalize;
	line-height: 1;
}

/* Before / After slider ---------------------------------------------------- */
.ba {
	position: relative; height: 100%; overflow: hidden;
	touch-action: pan-y;
	user-select: none; -webkit-user-select: none;
}
.ba__img { position: absolute; inset: 0; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle {
	position: absolute; top: 0; bottom: 0;
	left: var(--pos, 50%);
	width: calc(54 * var(--k));
	transform: translateX(-50%);
	display: flex; align-items: center; justify-content: center;
	cursor: ew-resize; touch-action: none;
}
.ba__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--c-white); }
.ba__arrows { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ba__arrows svg { width: calc(24 * var(--k)); height: calc(24 * var(--k)); }
.ba__arrows svg path { fill: var(--c-white); }
.ba__arrows .is-flipped { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   9. Candle — single product, exactly one screen, no scroll
   -------------------------------------------------------------------------- */
body.candless-fixed-screen { overflow: hidden; }

.product-screen {
	position: relative;
	height: 100svh;
	display: grid;
	grid-template-rows: 50% 1fr;
}

.product-screen__media { overflow: hidden; background: var(--c-asher-02); }
.product-screen__media img { width: 100%; height: 100%; object-fit: cover; }

.product-screen__body {
	position: relative;
	display: grid;
	grid-template-columns: calc(201 * var(--k)) 1fr;
	column-gap: 0;
	padding-top: calc(32 * var(--k));
}

.product-screen__specs {
	display: flex; flex-direction: column; gap: calc(17 * var(--k));
	padding: calc(7 * var(--k)) 0 0 calc(27 * var(--k));
	font-size: var(--f-sub-2); font-weight: 500;
}
.product-screen__specs li { list-style: none; }
.product-screen__specs ul { margin: 0; padding: 0; display: contents; }

.product-screen__buy { display: flex; flex-direction: column; align-items: stretch; }
.product-screen__price {
	font-size: var(--f-title-1); font-weight: 400; letter-spacing: var(--ls-tight);
	text-transform: uppercase; line-height: 1;
	padding-right: calc(22 * var(--k));
	margin-bottom: calc(34 * var(--k));
}
.product-screen__price del { opacity: .5; margin-right: .2em; }
.product-screen__price ins { text-decoration: none; }
/* The rule runs from x=207 to the screen edge, exactly as in the macket. */
.product-screen__buy .c-line { margin-left: calc(6 * var(--k)); }
.product-screen__cart { padding: calc(24 * var(--k)) 0 0 calc(6 * var(--k)); }
.product-screen__cart .c-btn { width: calc(155 * var(--k)); }
.product-screen__cart form { margin: 0; }
.product-screen__cart .quantity { display: none; } /* single-item purchase flow */

/* --------------------------------------------------------------------------
   10. Cart
   -------------------------------------------------------------------------- */
.cart-screen { padding-top: calc(93 * var(--k)); padding-bottom: calc(120 * var(--k)); }

.cart-line {
	display: grid;
	grid-template-columns: calc(117 * var(--k)) 1fr;
	column-gap: calc(56 * var(--k));
	padding: calc(10 * var(--k)) 0 calc(44 * var(--k)) calc(28 * var(--k));
}
.cart-line + .cart-line { padding-top: calc(44 * var(--k)); }

.cart-line__media { width: calc(117 * var(--k)); height: calc(144 * var(--k)); background: var(--c-asher-02); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__col { position: relative; padding-right: 0; }
.cart-line__price {
	font-size: var(--f-title-1); font-weight: 400; letter-spacing: var(--ls-tight);
	text-transform: uppercase; line-height: 1;
	margin-bottom: calc(34 * var(--k));
}
.cart-line__meta { padding-top: calc(21 * var(--k)); display: flex; flex-direction: column; gap: calc(17 * var(--k)); }
.cart-line__name { font-size: var(--f-sub-2); font-weight: 500; }
.cart-line__details { font-size: var(--f-sub-2); font-weight: 500; }
.cart-line__details a { text-decoration: underline; text-underline-position: from-font; }
.cart-line__remove { font-size: var(--f-sub-3); color: var(--c-accent); text-transform: capitalize; }
.cart-line__qty { display: flex; align-items: center; gap: calc(12 * var(--k)); font-size: var(--f-sub-3); }
.cart-line__qty input { width: calc(64 * var(--k)); text-align: center; background: none; border: 1px solid var(--c-line); border-radius: 2px; padding: calc(6 * var(--k)) calc(8 * var(--k)); }
.cart-screen.is-busy { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

.cart-total {
	display: flex; align-items: center; gap: calc(16 * var(--k));
	padding: calc(25 * var(--k)) calc(22 * var(--k)) 0 calc(26 * var(--k));
	font-size: var(--f-title-1); font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1;
}
.cart-total__label { width: calc(159 * var(--k)); text-transform: capitalize; }
.cart-total__value { text-transform: uppercase; white-space: nowrap; }
.cart-total + .c-line { margin-top: calc(26 * var(--k)); }

.cart-checkout { padding: calc(24 * var(--k)) calc(28 * var(--k)); }

.cart-empty { padding: calc(120 * var(--k)) var(--gutter-l); display: flex; flex-direction: column; gap: calc(32 * var(--k)); }
.cart-empty h1 { font-size: var(--f-title-2); font-weight: 400; letter-spacing: var(--ls-tight); margin: 0; text-transform: capitalize; }

/* --------------------------------------------------------------------------
   11. Checkout / account / Woo forms — no macket, styled to the system
   -------------------------------------------------------------------------- */
.woo-page { padding: calc(93 * var(--k)) var(--gutter-l) calc(120 * var(--k)); }
.woo-page h1, .woo-page h2, .woo-page h3 {
	font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1; margin: 0 0 calc(24 * var(--k));
	text-transform: capitalize;
}
.woo-page h1 { font-size: var(--f-title-2); }
.woo-page h2 { font-size: var(--f-title-3); }
.woo-page h3 { font-size: var(--f-sub-1); text-transform: uppercase; }

.woo-page p, .woo-page li, .woo-page label, .woo-page td, .woo-page th { font-size: var(--f-sub-2); line-height: 1.5; }

.woo-page .form-row { display: flex; flex-direction: column; gap: calc(8 * var(--k)); margin: 0 0 calc(20 * var(--k)); }
.woo-page label { font-size: var(--f-sub-3); text-transform: capitalize; }
.woo-page input[type="text"],
.woo-page input[type="email"],
.woo-page input[type="tel"],
.woo-page input[type="password"],
.woo-page input[type="number"],
.woo-page textarea,
.woo-page select {
	width: 100%;
	background: none;
	border: 0; border-bottom: 1px solid var(--c-line);
	border-radius: 0;
	padding: calc(12 * var(--k)) calc(14 * var(--k));
	font-size: var(--f-sub-2);
}
/* Native select — select2 is deliberately not loaded (see inc/performance.php). */
.woo-page select {
	-webkit-appearance: none; appearance: none;
	padding-right: calc(40 * var(--k));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23000'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right calc(12 * var(--k)) center;
	background-size: calc(20 * var(--k)) calc(20 * var(--k));
}
.woo-page label { padding-left: calc(14 * var(--k)); }
.woo-page textarea { min-height: calc(96 * var(--k)); }
.woo-page .button,
.woo-page button[type="submit"],
.woo-page #place_order {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: calc(56 * var(--k));
	background: var(--c-accent); color: var(--c-white);
	border: 0; border-radius: calc(2 * var(--k));
	font-size: var(--f-sub-1); font-weight: 600; letter-spacing: var(--ls-tight); text-transform: uppercase;
}
.woo-page table { width: 100%; border-collapse: collapse; }
.woo-page table th, .woo-page table td { text-align: left; padding: calc(12 * var(--k)) 0; border-bottom: 1px solid var(--c-line); }

/* Payment methods. Woo ships a grey rounded panel, list bullets and a speech
   bubble arrow; none of that belongs in this design. The Stripe card fields sit
   in an iframe whose typography Stripe extracts from the surrounding page, so
   getting this block right also fixes what is inside the iframe. */
.woo-page #payment { background: transparent; border-radius: 0; }
/* Shipping choices in the order review carry bullets too. */
.woo-page ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.woo-page ul#shipping_method li { list-style: none; padding: calc(4 * var(--k)) 0; }
.woo-page ul#shipping_method label { display: inline-flex; align-items: center; gap: calc(8 * var(--k)); }
.woo-page ul#shipping_method input[type="radio"] { accent-color: var(--c-accent); }
.woo-page ul.wc_payment_methods {
	list-style: none; margin: 0 0 calc(8 * var(--k)); padding: 0; border: 0;
}
.woo-page ul.wc_payment_methods li {
	list-style: none;
	padding: calc(16 * var(--k)) 0;
	border-bottom: 1px solid var(--c-line);
}
.woo-page ul.wc_payment_methods li > label {
	display: inline-flex; align-items: center; gap: calc(10 * var(--k));
	padding-left: 0;
	font-size: var(--f-sub-2); text-transform: none;
}
.woo-page ul.wc_payment_methods input[type="radio"] {
	width: calc(18 * var(--k)); height: calc(18 * var(--k));
	accent-color: var(--c-accent);
}
.woo-page ul.wc_payment_methods li img {
	max-height: calc(20 * var(--k)); width: auto; display: inline-block; margin: 0;
}
.woo-page .payment_box {
	background: transparent !important;
	margin: calc(12 * var(--k)) 0 0; padding: 0;
	font-size: var(--f-sub-3); line-height: 1.45;
}
.woo-page .payment_box::before { display: none !important; }
.woo-page .wc-stripe-upe-element,
.woo-page #wc-stripe-upe-element { border: 0; padding: calc(8 * var(--k)) 0 0; }
.woo-page .woocommerce-privacy-policy-text,
.woo-page .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--f-sub-3); line-height: 1.5;
}
.woo-page #place_order { margin-top: calc(20 * var(--k)); }

.woocommerce-notices-wrapper { padding: 0 0 calc(24 * var(--k)); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none; margin: 0 0 calc(16 * var(--k)); padding: calc(16 * var(--k));
	border: 1px solid var(--c-line); border-radius: calc(2 * var(--k));
	font-size: var(--f-sub-2); line-height: 1.4;
}
.woocommerce-error { border-color: var(--c-accent); color: var(--c-accent); }

/* Order received ----------------------------------------------------------- */
.order-received { display: flex; flex-direction: column; gap: calc(24 * var(--k)); }
.order-received__title {
	font-size: var(--f-title-2); font-weight: 400; letter-spacing: var(--ls-tight);
	text-transform: capitalize; line-height: 1; margin: 0;
}
.order-received__lead { margin: 0; font-size: var(--f-sub-2); line-height: 1.5; }

.order-received__meta { display: flex; flex-direction: column; gap: calc(14 * var(--k)); margin: 0; }
.order-received__meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--k)); }
.order-received__meta dt { font-size: var(--f-sub-3); text-transform: capitalize; opacity: .6; margin: 0; }
.order-received__meta dd { margin: 0; font-size: var(--f-sub-2); text-align: right; }
.order-received__meta dd .amount { font-weight: 500; }

.order-received__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(28 * var(--k)); }
.order-received__item { display: grid; grid-template-columns: calc(96 * var(--k)) 1fr; column-gap: calc(24 * var(--k)); }
.order-received__item-media { width: calc(96 * var(--k)); height: calc(118 * var(--k)); overflow: hidden; background: var(--c-asher-02); }
.order-received__item-media img { width: 100%; height: 100%; object-fit: cover; }
.order-received__item-body { display: flex; flex-direction: column; }
.order-received__item-price {
	font-size: var(--f-title-3); font-weight: 500; letter-spacing: var(--ls-tight);
	margin-bottom: calc(12 * var(--k));
}
.order-received__item-body .c-line { display: block; margin-bottom: calc(14 * var(--k)); }
.order-received__item-name { font-size: var(--f-sub-2); }
.order-received__item-qty { font-size: var(--f-sub-3); opacity: .6; margin-top: calc(8 * var(--k)); }

.order-received__address h2 { font-size: var(--f-sub-1); text-transform: uppercase; margin: 0 0 calc(12 * var(--k)); }
.order-received__address address { font-style: normal; font-size: var(--f-sub-2); line-height: 1.5; }

.order-received__actions { padding-top: calc(8 * var(--k)); }

/* --------------------------------------------------------------------------
   12. Register — panorama + Mark pages
   -------------------------------------------------------------------------- */
/* One continuous photograph, --screens viewports wide, panned horizontally.
   No snap points: the ТЗ asks for a movement effect between the halves, not a
   slideshow. */
.panorama {
	height: 100svh;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.panorama::-webkit-scrollbar { display: none; }

.panorama__pano {
	position: relative;
	width: calc(var(--screens, 2) * 100%);
	height: 100%;
	background: var(--c-asher-02);
}
.panorama__photo { width: 100%; height: 100%; object-fit: cover; }
.panorama__photo--parts { display: flex; width: 100%; height: 100%; }
.panorama__half { display: block; flex: 1 1 0; height: 100%; overflow: hidden; }
.panorama__half img { width: 100%; height: 100%; object-fit: cover; }

.panorama__zones { position: absolute; inset: 0; display: flex; }
.panorama__zone { position: relative; flex: 1 1 0; }
.panorama__caption {
	position: absolute; left: var(--gutter); bottom: calc(120 * var(--k));
	font-size: var(--f-title-3); text-transform: capitalize; color: var(--c-white);
	text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.panorama__hint {
	position: absolute; z-index: 5; left: calc(22 * var(--k)); right: calc(22 * var(--k));
	top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: space-between;
	pointer-events: none;
}
.panorama__hint svg { width: calc(24 * var(--k)); height: calc(24 * var(--k)); }
.panorama__hint svg path { fill: var(--c-white); }
.panorama__hint .is-flipped { transform: rotate(180deg); }

.mark-screen { position: relative; height: 100svh; display: grid; grid-template-rows: 50% 1fr; }
.mark-screen__media { overflow: hidden; background: var(--c-asher-02); }
.mark-screen__media img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.mark-screen__body { position: relative; padding: calc(27 * var(--k)) calc(22 * var(--k)) 0; }
.mark-screen__title { font-size: var(--f-headline-1); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: capitalize; margin: 0; line-height: 1; }
.mark-screen__id,
.mark-screen__year { font-size: var(--f-title-2); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: capitalize; line-height: 1; margin-top: calc(15 * var(--k)); }
.mark-screen__link {
	position: absolute; left: calc(2 * var(--k)); right: 0; bottom: calc(-8 * var(--k));
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: calc(24 * var(--k));
}
.mark-screen__link span { font-size: var(--f-title-2); font-weight: 400; letter-spacing: var(--ls-tight); text-transform: capitalize; }
.mark-screen__link svg { width: calc(94 * var(--k)); height: calc(94 * var(--k)); }

.mark-gallery { position: relative; height: 100svh; overflow: hidden; background: var(--c-asher-02); }
.mark-gallery__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mark-gallery__track::-webkit-scrollbar { display: none; }
.mark-gallery__item { flex: 0 0 100%; scroll-snap-align: center; }
.mark-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.mark-gallery__nav {
	position: absolute; z-index: 5; left: calc(22 * var(--k)); right: calc(22 * var(--k));
	top: calc(410 * var(--k) / 844 * 100);
	top: 48.6%;
	display: flex; align-items: center; justify-content: space-between;
}
.mark-gallery__nav button { display: flex; }
.mark-gallery__nav svg { width: calc(24 * var(--k)); height: calc(24 * var(--k)); }
.mark-gallery__nav svg path { fill: var(--c-white); }
.mark-gallery__nav .is-flipped { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   13. Info+ / static content pages
   -------------------------------------------------------------------------- */
.page-screen { padding: calc(93 * var(--k)) var(--gutter) calc(140 * var(--k)); }
.page-screen__title {
	font-size: var(--f-title-2); font-weight: 400; letter-spacing: var(--ls-tight);
	text-transform: capitalize; margin: 0 0 calc(32 * var(--k)); line-height: 1;
}
.page-content { font-size: var(--f-sub-2); font-weight: 500; line-height: 1.55; }
.page-content > * + * { margin-top: calc(20 * var(--k)); }
.page-content h2 { font-size: var(--f-title-3); font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1.1; }
.page-content h3 { font-size: var(--f-sub-1); text-transform: uppercase; }
.page-content a { text-decoration: underline; text-underline-position: from-font; }
.page-content ul, .page-content ol { padding-left: 1.2em; }
.page-content li + li { margin-top: .5em; }
.page-content img { border-radius: calc(2 * var(--k)); }

.info-index { display: flex; flex-direction: column; }
.info-index__item { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--k)); padding: calc(24 * var(--k)) 0; border-bottom: 1px solid var(--c-line); }
.info-index__item span { font-size: var(--f-title-3); text-transform: capitalize; }
.info-index__item svg { width: calc(24 * var(--k)); height: calc(24 * var(--k)); transform: rotate(180deg); }

/* Contact form (stage-1 placeholder markup, real plugin wired in stage 2) */
.contact-form { display: flex; flex-direction: column; gap: calc(20 * var(--k)); margin-top: calc(32 * var(--k)); }
.contact-form input, .contact-form textarea {
	background: none; border: 0; border-bottom: 1px solid var(--c-line); padding: calc(12 * var(--k)) 0;
	font-size: var(--f-sub-2); width: 100%;
}
.contact-form textarea { min-height: calc(120 * var(--k)); resize: vertical; }

/* --------------------------------------------------------------------------
   14. 404 / search
   -------------------------------------------------------------------------- */
.state-screen { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: calc(24 * var(--k)); padding: 0 var(--gutter); }
.state-screen h1 { font-size: var(--f-title-2); font-weight: 400; letter-spacing: var(--ls-tight); margin: 0; text-transform: capitalize; }

/* --------------------------------------------------------------------------
   15. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   16. Wider viewports — placeholder only.
   The real desktop layout is a separate deliverable (ТЗ 1.1); until it exists
   the mobile column is centred on a white canvas.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	body { background: var(--c-white); }
	.site { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
}