/* Локальные шрифты ядра. Внешние CDN на публичном сайте запрещены: файлы лежат
   в public/assets/fonts, адреса origin-relative. Fira Sans — базовый шрифт
   Construct (--font-sans). Подмножества cyrillic + latin, unicode-range
   оставлен от Google Fonts.

   Заголовочный шрифт сайта здесь не объявляется: он у каждого свой. Токен
   --font-serif по умолчанию равен --font-sans, а @font-face засечкового
   шрифта кладётся в слой сайта — resources/css/site-custom. */

@font-face {
	font-family: "Fira Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400i-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400i-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;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-400-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;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-500-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-500-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;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-600-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-600-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;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-700-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/fira-sans-700-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;
}

/* Заголовочный шрифт «Лавки Конфет». Лежит в слое сайта, а не в ядре: у
   каждого сайта он свой, и ядро не должно тащить чужой бренд в поставку.
   Файлы в public/assets/fonts, адреса origin-relative — внешних CDN нет.
   Подключается токеном --font-serif в «Дизайн-системе». */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/cormorant-garamond-500-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/cormorant-garamond-500-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;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/cormorant-garamond-600-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/cormorant-garamond-600-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;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/cormorant-garamond-700-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/cormorant-garamond-700-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;
}

/* Generated by ModuleX. Do not edit directly. */
:root {
  --a-tfunc: ease;
  --a-time: 250ms;
  --c-err: #D00;
  --c-esm: calc(var(--c-sm) / 2);
  --c-fb: #3b5998;
  --c-in: #405DE6;
  --c-lg: calc(var(--c-sm) * 2);
  --c-max: #007AFF;
  --c-md: calc(var(--c-sm) * 1.5);
  --c-ok: #ff7700;
  --c-ph: #A3A3A3;
  --c-pl: #6f5f4d;
  --c-sm: 10rem;
  --c-tg: #279FD3;
  --c-tw: #1D9BF0;
  --c-vi: #7360F2;
  --c-vk: #0077ff;
  --c-wa: #02BB47;
  --c-xl: calc(var(--c-sm) * 3);
  --caf: #b28a45;
  --caf-strong: #8a6b34;
  --cal: #e4d3a6;
  --cas: #d4b884;
  --cb: #000;
  --cbg: #faf4ea;
  --cbg-card: var(--cw);
  --cbg-foot: var(--cf);
  --cf: #2e1c11;
  --cfbg: var(--cw);
  --ci: #e6d9c4;
  --ci-blue-p: #BCE4FF;
  --ci-blue-s: #2f90ff;
  --ci-green-p: #e7ffe2;
  --ci-green-s: #62ea8f;
  --ci-orange-p: #ffd7bc;
  --ci-orange-s: #ff6600;
  --cil: #f5edde;
  --container-width: 85.938vw;
  --cw: #fffdf9;
  --font-sans: "Fira Sans", Arial, Helvetica, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --foot-size: 200px;
  --fs-h1: 52rem;
  --fs-h2: 38rem;
  --fs-h3: 28rem;
  --fs-h4: 22rem;
  --fs-p: 16rem;
  --fs-sm: 14rem;
  --gr-f: linear-gradient(180deg, var(--caf) 20.99%, var(--cas) 80.99%);
  --i-esm: calc(var(--i-sm) / 2);
  --i-lg: calc(var(--i-sm) * 2);
  --i-md: calc(var(--i-sm) * 1.5);
  --i-sm: 20rem;
  --i-xl: calc(var(--i-sm) * 3);
  --i-xxl: calc(var(--i-sm) * 4);
  --s-baf: 0px 5rem 8rem rgba(46, 28, 17, 0.12);
  --s-c: rgba(0, 0, 0, 0.25);
  --s-lg: var(--s-x) var(--s-y) calc(var(--s-sz) * 4) 0 var(--s-c);
  --s-md: var(--s-x) var(--s-y) calc(var(--s-sz) * 2) 0 var(--s-c);
  --s-sm: var(--s-x) var(--s-y) var(--s-sz) 0 var(--s-c);
  --s-sz: 10rem;
  --s-x: 0;
  --s-y: 5rem;
  --section-pad: var(--i-sm);
}


/* Source: base.css */
/* Construct Design System — reset и fluid-rem корень. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 0.052083334vw;
}

@media (max-width: 1440px) {
    html {
        font-size: calc(0.052083334vw * 1.333);
    }
}

@media (max-width: 768px) {
    html {
        font-size: calc(0.052083334vw * 2.5);
    }
}

@media (max-width: 480px) {
    html {
        font-size: calc(0.052083334vw * 4);
    }
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--cbg);
    color: var(--cf);
    font-family: var(--font-sans);
    font-size: 1vw;
    line-height: 1.41vw;
}

@media (max-width: 1440px) {
    body {
        font-size: 1.333vw;
        line-height: 1.87953vw;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 2.5vw;
        line-height: 3.525vw;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 4vw;
        line-height: 5.64vw;
    }
}

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

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

button {
    cursor: pointer;
}

/* Текст только для читалки экрана. Нужен там, где смысл ячейки или кнопки
   виден глазами, но словами в разметке не сказан: заголовок колонки с фото,
   подпись у кнопки-иконки.

   Не `display: none` и не нулевой размер: и то и другое убирает узел из
   дерева доступности, то есть ровно оттуда, куда мы его и клали. */
.visually-hidden {
    position: absolute;
    clip-path: inset(50%);
    margin: -1px;
    border: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}


/* Source: typography.css */
/* Заголовочный шрифт отдельным токеном: по умолчанию --font-serif равен
   --font-sans, поэтому сайт без своего шрифта выглядит как раньше, а сайту с
   засечками достаточно одной настройки в админке вместо правки CSS. */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
    margin: 0;
    font-family: var(--font-serif, var(--font-sans));
}

h1,
.h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.15;
}

h2,
.h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

h3,
.h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
}

h4,
.h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.4;
}

p {
    margin: 0;
}

p + p {
    margin-top: var(--i-esm);
}

a {
    color: inherit;
    text-decoration: none;
    transition:
        color var(--a-time) var(--a-tfunc),
        opacity var(--a-time) var(--a-tfunc);
}

/* Ссылка — текст: светлый акцент на белом даёт 1.99:1. */
a:link,
a:visited {
    color: var(--caf-strong);
}

a:hover {
    color: var(--cf);
}

ul,
ol {
    margin: 0;
    padding-left: var(--i-sm);
}

li + li {
    margin-top: calc(var(--i-esm) / 2);
}

.heading {
    margin-bottom: var(--i-md);
}

.heading > span {
    display: inline-block;
}

.text-muted {
    color: var(--c-pl);
}


/* Source: layout.css */
.wrapper {
    min-height: 100%;
    overflow: visible;
}

.wrapper-inner {
    min-height: calc(100vh - var(--foot-size));
    overflow: visible;
}

.container {
    width: var(--container-width);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.p-sm {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

.padding-smaller {
    padding-top: var(--i-esm);
    padding-bottom: var(--i-esm);
}

.block-bg {
    background: var(--cil);
}

/* Тёмная секция. Палитра сайта рассчитана на светлый фон, поэтому одной
   заливкой не обойтись: приглушённый текст и цвет ссылки на ней не читаются
   и переназначаются здесь же, иначе каждый сайт чинил бы это у себя. */
.block-dark {
    background: var(--cf);
    color: var(--cw);
}

.block-dark h1,
.block-dark h2,
.block-dark h3,
.block-dark h4,
.block-dark .h1,
.block-dark .h2,
.block-dark .h3,
.block-dark .h4 {
    color: var(--cw);
}

.block-dark .text-muted {
    color: var(--ci);
}

/* Ссылка перебивается только вместе с псевдоклассом: ядерное `a:link` весит
   (0,1,1) и голый класс его не переносит. */
.block-dark a:link,
.block-dark a:visited {
    color: var(--cas);
}

.block-dark a:hover {
    color: var(--cw);
}

/* Кнопки на тёмной секции разбираются в `parts.css`, рядом с самими
   кнопками: правило цвета ссылки выше их бы перекрасило. */

.block-divider {
    border-bottom: 1px solid var(--ci);
}

.block-dark.block-divider {
    border-bottom-color: color-mix(in srgb, var(--cw) 12%, transparent);
}

.add-fwidth {
    width: 100%;
}

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

.flex {
    display: flex;
    flex-wrap: wrap;
}

.f-item {
    flex: 1 1 0;
}

.f-item-2 {
    width: 50%;
}

.f-item-3 {
    width: 33.3333%;
}

.f-item-4 {
    width: 25%;
}

.f-item-5 {
    width: 20%;
}

.f-item-6 {
    width: 16.6667%;
}

.indent-sm {
    margin: calc(var(--i-esm) * -1);
}

.indent-md {
    margin: calc(var(--i-sm) * -1);
}

.indent-xl {
    margin: calc(var(--i-md) * -1);
}

.gap-esm {
    gap: var(--i-esm);
}

.gap-sm {
    gap: var(--i-sm);
}

.gap-md {
    gap: var(--i-md);
}

.gap-xl {
    gap: var(--i-xl);
}

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

.justify-center {
    justify-content: center;
}

.align-center.flex {
    align-items: center;
}

.direction-column {
    flex-direction: column;
}

.reverse {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    .f-item-2,
    .f-item-3,
    .f-item-4,
    .f-item-5,
    .f-item-6 {
        width: 100%;
    }
}
.page-main--home > .b-hero:first-child {
	min-height: 100svh;
}

.page-main--full > section > .container {
	width: 100%;
	max-width: none;
}


/* Source: parts.css */
/* Кнопки */
.main-button {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    border-radius: var(--c-sm);
    /* Белая подпись на светлом градиенте давала 1.99:1. */
    background: var(--caf-strong);
    box-shadow: var(--s-baf);
}

.main-button .main-link,
.main-button button {
    display: inline-flex;
    min-height: calc(var(--i-xl) + var(--i-sm));
    align-items: center;
    justify-content: center;
    padding: var(--i-esm) var(--i-lg);
    border: 0;
    background: transparent;
    color: var(--cw);
    font-weight: 600;
}

.main-button.c2 {
    background: var(--cf);
}

.main-button.c3 {
    border: 1px solid var(--caf);
    background: transparent;
    box-shadow: none;
}

.main-button.c3 .main-link,
.main-button.c3 button {
    color: var(--caf-strong);
}

/* Пагинатор. Разметку даёт `views/vendor/pagination/mx.blade.php`: ядерный
   шаблон Laravel собран на Tailwind, которого на публичном сайте нет. */
.pager__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.pager__item + .pager__item {
    margin-top: 0;
}

.pager__item > a,
.pager__item > span {
    display: inline-flex;
    min-width: calc(var(--i-xl) - var(--i-esm));
    min-height: calc(var(--i-xl) - var(--i-esm));
    align-items: center;
    justify-content: center;
    padding: 0 var(--i-esm);
    border: 1px solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    font-size: var(--fs-sm);
}

.pager__item > a:link,
.pager__item > a:visited {
    color: var(--cf);
}

.pager__item > a:hover {
    border-color: var(--caf);
    color: var(--caf-strong);
}

.pager__item--current > span {
    border-color: var(--cf);
    background: var(--cf);
    color: var(--cw);
    font-weight: 600;
}

/* Крайние кнопки подписаны словами, поэтому им нужна ширина по содержимому. */
.pager__item--edge > a,
.pager__item--edge > span {
    padding: 0 var(--i-sm);
}

.pager__item--disabled > span {
    color: var(--c-ph);
}

.pager__item--gap > span {
    border-color: transparent;
    background: transparent;
    color: var(--c-pl);
}

/* Кнопки на тёмной секции. Подпись красится под заливку кнопки, а не под фон
   секции: без этого светло-золотое правило ссылки даёт 2.60:1 на золотом.
   А контурная кнопка рассчитана на светлый фон — тёмное золото на тёмном
   это 3.28:1. */
.block-dark .main-button .main-link,
.block-dark .main-button button,
.block-dark .main-button.c3 .main-link,
.block-dark .main-button.c3 button {
    color: var(--cw);
}

.block-dark .main-button.c3 {
    border-color: var(--cas);
}

.main-button .flash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    transform: skewX(-20deg);
    background: color-mix(in srgb, var(--cw) 35%, transparent);
    pointer-events: none;
}

.main-button:hover .lighting {
    animation: construct-button-flash calc(var(--a-time) * 2) var(--a-tfunc);
}

@keyframes construct-button-flash {
    to {
        left: 120%;
    }
}

/* Формы и поля */
.form,
.form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--i-esm);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.form-field label {
    font-size: var(--fs-sm);
    font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: calc(var(--i-xl) + var(--i-sm));
    padding: var(--i-esm) var(--i-sm);
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    outline: 0;
    background: var(--cfbg);
    transition:
        border-color var(--a-time) var(--a-tfunc),
        box-shadow var(--a-time) var(--a-tfunc);
}

.form-field textarea {
    min-height: calc(var(--i-xxl) * 2);
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--c-pl);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--caf-strong);
    box-shadow: 0 0 0 2rem color-mix(in srgb, var(--caf) 20%, transparent);
}

.form-field-error {
    color: var(--c-err);
    font-size: var(--fs-sm);
}

/* Карточки */
.card {
    height: 100%;
    padding: var(--i-md);
    border: 1px solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cbg-card);
    box-shadow: var(--s-sm);
}

.card-title {
    margin-bottom: var(--i-esm);
    font-size: var(--fs-h4);
    font-weight: 600;
}

/* Попапы */
.popup-overlay {
    display: grid;
    position: fixed;
    z-index: 9999;
    inset: 0;
    place-items: center;
    padding: var(--i-sm);
    background: color-mix(in srgb, var(--cb) 55%, transparent);
}

.popup,
.popup-dialog {
    position: relative;
    width: min(100%, 640rem);
    max-height: calc(100vh - var(--i-xl));
    overflow: auto;
    padding: var(--i-md);
    border-radius: var(--c-sm);
    background: var(--cbg);
    box-shadow: var(--s-lg);
}

.popup-overlay[hidden] {
    display: none;
}

.popup-dialog__close {
    position: absolute;
    top: var(--i-esm);
    right: var(--i-esm);
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    background: var(--cbg);
    color: var(--cf);
    font-size: var(--fs-h4);
}

.mx-form {
    display: grid;
    gap: var(--i-sm);
}

.mx-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mx-form__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--i-sm);
}

.mx-form__field {
    display: flex;
    grid-column: span 6;
    min-width: 0;
    flex-direction: column;
    gap: var(--i-esm);
}

.mx-form__field--half {
    grid-column: span 3;
}

.mx-form__field--third {
    grid-column: span 2;
}

.mx-form__field label,
.mx-form__field legend {
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.mx-form__field label span,
.mx-form__field legend span,
.mx-form__error {
    color: var(--c-err);
}

.mx-form__field input:not([type="checkbox"], [type="radio"]),
.mx-form__field textarea,
.mx-form__field select {
	width: 100%;
	min-height: calc(var(--i-xl) + var(--i-sm));
	padding: var(--i-esm) var(--i-sm);
	border: 1px solid var(--ci);
	border-radius: var(--c-esm);
	outline: 0;
	background: var(--cfbg);
	color: var(--cf);
	transition:
		border-color var(--a-time) var(--a-tfunc),
		box-shadow var(--a-time) var(--a-tfunc);
}

.mx-form__field input:not([type="checkbox"], [type="radio"]):focus,
.mx-form__field textarea:focus,
.mx-form__field select:focus {
	border-color: var(--caf-strong);
	box-shadow: 0 0 0 2rem color-mix(in srgb, var(--caf) 20%, transparent);
}

.mx-form__choice {
	display: flex;
	align-items: flex-start;
	gap: var(--i-esm);
}

.mx-form__choice input[type="checkbox"],
.mx-form__choice input[type="radio"] {
	display: inline-grid;
	width: var(--i-md);
	height: var(--i-md);
	flex: 0 0 var(--i-md);
	appearance: none;
	place-content: center;
	border: 1px solid var(--ci);
	border-radius: var(--c-esm);
	background: var(--cfbg);
	transition:
		border-color var(--a-time) var(--a-tfunc),
		background-color var(--a-time) var(--a-tfunc);
}

.mx-form__choice input[type="radio"] {
	border-radius: 50%;
}

.mx-form__choice input[type="checkbox"]::before,
.mx-form__choice input[type="radio"]::before {
	width: calc(var(--i-sm) / 2);
	height: calc(var(--i-sm) / 2);
	transform: scale(0);
	background: var(--cw);
	content: "";
	transition: transform var(--a-time) var(--a-tfunc);
}

.mx-form__choice input[type="checkbox"]::before {
	clip-path: polygon(14% 44%, 0 65%, 42% 100%, 100% 18%, 80% 0, 39% 62%);
}

.mx-form__choice input[type="radio"]::before {
	border-radius: 50%;
}

.mx-form__choice input[type="checkbox"]:checked,
.mx-form__choice input[type="radio"]:checked {
	border-color: var(--caf-strong);
	background: var(--caf);
}

.mx-form__choice input[type="checkbox"]:checked::before,
.mx-form__choice input[type="radio"]:checked::before {
	transform: scale(1);
}

.mx-form__field small,
.mx-form__error,
.mx-form__status {
    font-size: var(--fs-sm);
}

.mx-form__status:not(:empty) {
    padding: var(--i-sm);
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    color: var(--cf);
}

body.mx-popup-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .mx-form__field,
    .mx-form__field--half,
    .mx-form__field--third {
        grid-column: span 6;
    }
}

/* Пагинация */
.pagination,
.pagination ul {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
    padding: 0;
    list-style: none;
}

.pagination a,
.pagination span {
    display: inline-flex;
    min-width: calc(var(--i-sm) * 2);
    min-height: calc(var(--i-sm) * 2);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
}

.pagination .active {
    border-color: var(--caf-strong);
    background: var(--caf);
    color: var(--cw);
}

/* Социальные сети и сервисные иконки */
.socials {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
}

.socials svg,
.icon-msg,
.icon-service {
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    color: var(--caf-strong);
}

.socials .vk {
    color: var(--c-vk);
}

.socials .ok {
    color: var(--c-ok);
}

.socials .tg {
    color: var(--c-tg);
}

.socials .wa {
    color: var(--c-wa);
}

/* Хлебные крошки */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--i-esm);
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--i-esm);
    margin: 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.breadcrumbs li:not(:last-child)::after {
    color: var(--caf-strong);
    content: "›";
}

.breadcrumbs li:last-child {
    color: var(--cf);
}

/* ── Галерея / слайдер ──────────────────────────────────────────────────────
   Универсальный компонент для блоков (hero, «о нас»): несколько кадров с
   листанием. Заполняет свой контейнер (у него задана высота или aspect-ratio),
   скругление и обрезку наследует от него. Логика — в JS блока по [data-gallery]. */
.gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.gallery__track {
    display: flex;
    height: 100%;
    transition: transform var(--a-time, 0.5s) var(--a-tfunc, ease);
}

.gallery__slide {
    flex: 0 0 100%;
    height: 100%;
}

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

.gallery__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--i-lg);
    height: var(--i-lg);
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: var(--cw);
    font-size: 24rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--a-time, 0.2s) var(--a-tfunc, ease);
}

.gallery__arrow:hover {
    background: rgba(0, 0, 0, 0.55);
}

.gallery__arrow--prev {
    left: var(--i-esm);
}

.gallery__arrow--next {
    right: var(--i-esm);
}

.gallery__dots {
    position: absolute;
    right: 0;
    bottom: var(--i-esm);
    left: 0;
    display: flex;
    justify-content: center;
    gap: 8rem;
}

.gallery__dot {
    width: 8rem;
    height: 8rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.gallery__dot.is-active {
    background: var(--cw);
}


/* Source: navigation.css */
/* Общая навигационная оболочка: header, menu и mobile drawer. */
.site-header {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--ci);
    background: var(--cbg);
}

.site-header__main {
    background: var(--cbg);
}

.site-header__row {
    display: flex;
    min-height: calc(var(--i-xxl) + var(--i-sm));
    align-items: center;
    gap: var(--i-md);
}

.site-logo {
    width: calc(var(--i-xxl) * 2);
    flex: 0 0 calc(var(--i-xxl) * 2);
}

.site-logo__link {
    display: flex;
    align-items: center;
}

.site-logo img {
    width: 100%;
    height: auto;
}

.site-header__identity,
.site-header__place,
.site-header__contacts,
.site-header__drawer-contacts {
    display: flex;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.site-header__identity {
    min-width: 0;
    flex: 1 1 auto;
}

.site-header__identity span,
.site-header__place span,
.site-header__contacts span,
.site-header__drawer-contacts span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-header__place {
    max-width: calc(var(--i-xxl) * 4);
}

.site-header__contacts {
    margin-left: auto;
    text-align: right;
}

.site-header__phone {
    color: var(--cf);
    font-weight: 600;
    white-space: nowrap;
}

.site-header__messengers {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
}

.site-header__messengers a {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    border: 1px solid var(--ci);
    border-radius: 50%;
}

.site-header__messengers svg,
.site-header__toggle svg,
.site-header__close svg {
    width: var(--i-sm);
    height: var(--i-sm);
}

.site-header__messengers .is-whatsapp {
    color: var(--c-wa);
}

.site-header__messengers .is-telegram {
    color: var(--c-tg);
}

.site-header__messengers .is-viber {
    color: var(--c-vi);
}

.site-header__messengers .is-max {
    color: var(--c-max);
}
.site-header__navigation {
    border-top: 1px solid var(--ci);
    background: var(--cil);
}

.site-header__desktop-menu {
    flex: 1 1 auto;
}

.site-header__desktop-menu > ul {
    display: flex;
    align-items: stretch;
    gap: var(--i-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__desktop-menu li {
    position: relative;
    margin: 0;
}

.site-header__desktop-menu > ul > li > a {
    display: flex;
    min-height: calc(var(--i-xl) + var(--i-esm));
    align-items: center;
    border-bottom: 1px solid transparent;
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.site-header__desktop-menu li.active > a,
.site-header__desktop-menu a:hover {
    border-color: var(--caf-strong);
    color: var(--caf-strong);
}

.site-header__desktop-menu li > ul {
    display: none;
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    min-width: calc(var(--i-xxl) * 3);
    margin: 0;
    padding: var(--i-esm);
    border: 1px solid var(--ci);
    background: var(--cbg);
    box-shadow: var(--s-sm);
    list-style: none;
}

.site-header__desktop-menu li:hover > ul,
.site-header__desktop-menu li:focus-within > ul {
    display: grid;
    gap: var(--i-esm);
}

.site-header--compact .site-header__desktop-menu > ul {
    justify-content: center;
}

.site-header__toggle,
.site-header__close,
.site-header__backdrop {
    padding: 0;
    border: 0;
    background: transparent;
}

.site-header__toggle {
    display: none;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    border: 1px solid var(--ci);
    border-radius: var(--c-esm);
    color: var(--cf);
}

.site-header__backdrop {
    visibility: hidden;
    position: fixed;
    z-index: 102;
    inset: 0;
    opacity: 0;
    background: color-mix(in srgb, var(--cb) 55%, transparent);
    transition:
        opacity var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.site-header__drawer {
    visibility: hidden;
    display: flex;
    position: fixed;
    z-index: 103;
    top: 0;
    right: 0;
    width: min(calc(var(--i-xxl) * 6), 90%);
    height: 100vh;
    flex-direction: column;
    gap: var(--i-md);
    padding: var(--i-md);
    overflow-y: auto;
    transform: translateX(100%);
    background: var(--cbg);
    box-shadow: var(--s-lg);
    transition:
        transform var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.site-header__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-sm);
}

.site-header__close {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    color: var(--cf);
}

.site-header__drawer-menu ul {
    display: grid;
    gap: var(--i-esm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__drawer-menu ul ul {
    padding-left: var(--i-sm);
}

.site-header__drawer-menu a {
    display: flex;
    min-height: calc(var(--i-xl) + var(--i-esm));
    align-items: center;
    border-bottom: 1px solid var(--ci);
    color: var(--cf);
}

.site-header__drawer-menu li.active > a {
    color: var(--caf-strong);
}

.site-header__drawer-contacts {
    margin-top: auto;
}

.site-header.is-drawer-open .site-header__drawer,
.site-header.is-drawer-open .site-header__backdrop {
    visibility: visible;
}

.site-header.is-drawer-open .site-header__drawer {
    transform: translateX(0);
}

.site-header.is-drawer-open .site-header__backdrop {
    opacity: 1;
}

body.site-drawer-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .site-header__row {
        min-height: calc(var(--i-xxl) + var(--i-md));
        gap: var(--i-esm);
    }

    .site-logo {
        width: calc(var(--i-xxl) * 1.75);
        flex-basis: calc(var(--i-xxl) * 1.75);
    }

    .site-header__identity,
    .site-header__place,
    .site-header__contacts,
    .site-header__messengers,
    .site-header__navigation,
    .site-header > .site-header__desktop-menu {
        display: none;
    }

    .site-header__toggle {
        display: grid;
        margin-left: auto;
    }
}

/* Подвал Construct: юридическая информация, навигация и контакты. */
.site-footer {
    border-top: 1px solid var(--ci);
    background: var(--cbg-foot);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--i-lg);
    padding-top: var(--i-lg);
    padding-bottom: var(--i-lg);
}

.site-footer__legal,
.site-footer__navigation,
.site-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--i-esm);
}

.site-footer__legal p {
    margin: 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-footer__developer {
    color: var(--cf);
    font-size: var(--fs-sm);
}

.site-footer__legal > span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-footer__navigation {
    align-items: center;
    justify-self: center;
    width: 100%;
    text-align: center;
}

.site-footer__menu > ul {
    display: grid;
    gap: var(--i-esm);
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

.site-footer__menu li {
    margin: 0;
}

.site-footer__menu a {
    color: var(--cf);
    font-size: var(--fs-sm);
}

.site-footer__menu li.active > a,
.site-footer__menu a:hover {
    color: var(--caf-strong);
}

.site-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--i-esm);
}

.site-footer__social a {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    place-items: center;
    border: 1px solid var(--ci);
    border-radius: 50%;
    color: var(--caf-strong);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.site-footer__social svg {
    width: var(--i-sm);
    height: var(--i-sm);
}

.site-footer__contacts {
    align-items: flex-end;
    text-align: right;
}

.site-footer__contacts > span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.site-footer__phone {
    color: var(--cf);
    font-weight: 600;
}

@media (max-width: 768px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .site-footer__legal,
    .site-footer__contacts {
        align-items: center;
        text-align: center;
    }

    .site-footer__logo {
        align-self: center;
    }
}


/* Source: shop.css */
/* Витрина: каталог, карточка товара и корзина.
   Значения берутся только из токенов дизайна (mx_settings, group=design):
   размеры на сайте живут в модели fluid-rem, где 1rem равен пикселю макета. */

/* Кнопки витрины */
.button {
    display: inline-flex;
    min-height: calc(var(--i-xl) + var(--i-sm));
    align-items: center;
    justify-content: center;
    padding: var(--i-esm) var(--i-lg);
    border: 1rem solid var(--caf-strong);
    border-radius: var(--c-sm);
    background: transparent;
    color: var(--caf-strong);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

/* Заливка усиленным акцентом: на светлом градиенте белая подпись давала
   1.99:1. Светлый --caf остаётся на рамках, фокусе и декоре. */
.button--primary {
    border-color: transparent;
    background: var(--caf-strong);
    color: var(--cw);
    box-shadow: var(--s-baf);
}

.button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Разделы каталога */
.catalogue-sections {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 var(--i-lg);
    padding: 0;
    gap: var(--i-sm);
    list-style: none;
}

.catalogue-sections__link {
    display: inline-flex;
    padding: var(--i-esm) var(--i-md);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    color: var(--cf);
    text-decoration: none;
}

.catalogue-sections__link:hover {
    border-color: var(--caf-strong);
    color: var(--caf-strong);
}

/* Сетка товаров */
.catalogue-grid {
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--i-lg);
    grid-template-columns: repeat(auto-fill, minmax(260rem, 1fr));
    list-style: none;
}

/* Подборка на витрине: ряд фиксированной длины, а не автозаполнение. Число
   карточек задаёт владелец, и «четыре в ряд» не должно превращаться в пять
   на широком экране. */
.catalogue-grid--pick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .catalogue-grid--pick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .catalogue-grid--pick {
        grid-template-columns: minmax(0, 1fr);
    }
}

.catalogue-card {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: var(--i-md);
    border-radius: var(--c-md);
    background: var(--cbg-card);
    gap: var(--i-esm);
}

.catalogue-card__link {
    display: flex;
    flex-direction: column;
    color: var(--cf);
    gap: var(--i-esm);
    text-decoration: none;
}

.catalogue-card__photo {
    display: flex;
    height: 220rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--c-sm);
    background: var(--cfbg);
}

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

.catalogue-card__badges {
    display: flex;
    position: absolute;
    top: var(--i-md);
    left: var(--i-md);
    flex-wrap: wrap;
    gap: var(--i-esm);
}

/* Текст на метке тёмный: белый на светлых фирменных подложках даёт от 1.8:1
   до 2.6:1 и не читается. Белым остаётся только «Акция» на красном — 5.15:1. */
.catalogue-card__badge,
.product__badge {
    padding: 0 var(--i-esm);
    border-radius: var(--c-esm);
    background: var(--cal);
    color: var(--cf);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.catalogue-card__badge--sale,
.product__badge--sale {
    background: var(--c-err);
    color: var(--cw);
}

.catalogue-card__badge--new,
.product__badge--new {
    background: var(--cas);
}

.catalogue-card__badge--preorder,
.product__badge--preorder {
    background: var(--c-pl);
}

.catalogue-card__title {
    font-weight: 600;
}

.catalogue-card__prices,
.product__prices {
    display: flex;
    align-items: baseline;
    gap: var(--i-esm);
}

.catalogue-card__price {
    font-size: var(--fs-h4);
    font-weight: 700;
}

.catalogue-card__old-price,
.product__old-price {
    color: var(--c-pl);
}

.catalogue-card__buy {
    margin-top: auto;
}

.catalogue-card__out,
.catalogue__empty {
    color: var(--c-pl);
}

.catalogue-pager {
    margin-top: var(--i-lg);
}

/* Карточка товара */
.product {
    display: grid;
    gap: var(--i-xl);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 768px) {
    .product {
        grid-template-columns: minmax(0, 1fr);
    }
}

.product__media {
    position: relative;
}

.product__badges {
    display: flex;
    position: absolute;
    z-index: 1;
    top: var(--i-sm);
    left: var(--i-sm);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.product__photo {
    display: flex;
    height: 420rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--c-md);
    background: var(--cfbg);
}

.product__photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product__thumbs {
    display: flex;
    flex-wrap: wrap;
    margin: var(--i-sm) 0 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.product__thumb {
    display: flex;
    width: 72rem;
    height: 72rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    background: var(--cfbg);
    cursor: pointer;
}

.product__thumb:hover {
    border-color: var(--caf-strong);
}

.product__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product__info {
    display: flex;
    flex-direction: column;
    gap: var(--i-md);
}

.product__sku,
.product__unit,
.product__note {
    margin: 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.product__price {
    font-size: var(--fs-h2);
    font-weight: 700;
}

.product__variants {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
    gap: var(--i-esm);
}

.product__variants legend {
    width: 100%;
    padding: 0 0 var(--i-esm);
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.product__variant {
    display: inline-flex;
    align-items: center;
    padding: var(--i-esm) var(--i-md);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    cursor: pointer;
    gap: var(--i-esm);
}

.product__variant:has(input:checked) {
    border-color: var(--caf-strong);
    color: var(--caf-strong);
}

.product__variant.is-out {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Фирменный голубой на белом даёт 1.94:1 — как текст он нечитаем
   (LANDMINES №4). Наличие пишем основным цветом, отсутствие — цветом ошибки:
   это единственный статусный цвет в системе. */
.product__stock {
    margin: 0;
    color: var(--cf);
}

.product__stock--out {
    color: var(--c-err);
}

.product__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--i-md);
}

.product__quantity {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
}

.product__step {
    width: var(--i-xl);
    border: 0;
    background: var(--cfbg);
    color: var(--cf);
    font-size: var(--fs-h4);
    cursor: pointer;
}

.product__quantity-input,
.cart__quantity {
    width: 80rem;
    border: 0;
    appearance: textfield;
    background: transparent;
    color: var(--cf);
    text-align: center;
}

.product__quantity-input::-webkit-outer-spin-button,
.product__quantity-input::-webkit-inner-spin-button,
.cart__quantity::-webkit-outer-spin-button,
.cart__quantity::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

/* Корзина, форма оформления и поле адреса скрываются атрибутом `hidden`, но
   собственный `display: flex` у этих же классов сильнее правила браузера
   `[hidden] { display: none }`. Селектор с атрибутом даёт специфичность выше
   и выигрывает без !important. */
.cart[hidden],
.cart-checkout[hidden],
.cart-checkout__field[hidden] {
    display: none;
}

/* Корзина */
.cart__table {
    width: 100%;
    border-collapse: collapse;
}

.cart__table th {
    padding: var(--i-esm);
    border-bottom: 1rem solid var(--cb);
    color: var(--c-pl);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: left;
}

.cart__table td {
    padding: var(--i-sm) var(--i-esm);
    border-bottom: 1rem solid var(--cb);
    vertical-align: middle;
}

.cart__number-cell {
    text-align: right;
}

.cart__thumb {
    width: 64rem;
    height: 64rem;
    border-radius: var(--c-sm);
    object-fit: cover;
}

.cart__sku {
    color: var(--c-pl);
}

.cart__notice {
    color: var(--c-err);
}

.cart__quantity {
    width: 88rem;
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    padding-block: var(--i-esm);
}

.cart__remove {
    border: 0;
    background: transparent;
    color: var(--c-pl);
    font-size: var(--fs-h4);
    cursor: pointer;
    line-height: 1;
}

.cart__remove:hover {
    color: var(--c-err);
}

.cart__total {
    font-size: var(--fs-h4);
    text-align: right;
}

.cart__empty {
    color: var(--c-pl);
}

.cart-thanks {
    margin-bottom: var(--i-lg);
    padding: var(--i-lg);
    border-radius: var(--c-md);
    background: var(--cbg-card);
}

/* Оформление */
.cart-checkout {
    display: flex;
    max-width: 720rem;
    flex-direction: column;
    margin-top: var(--i-xl);
    gap: var(--i-md);
}

.cart-checkout__title {
    margin: 0;
    font-size: var(--fs-h3);
}

.cart-checkout__errors {
    margin: 0;
    padding: var(--i-sm) var(--i-lg);
    border-radius: var(--c-sm);
    background: var(--cfbg);
    color: var(--c-err);
}

.cart-checkout__grid {
    display: grid;
    gap: var(--i-md);
    grid-template-columns: repeat(auto-fit, minmax(220rem, 1fr));
}

.cart-checkout__field {
    display: flex;
    flex-direction: column;
    gap: var(--i-esm);
}

.cart-checkout__field > span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.cart-checkout__field i {
    color: var(--c-err);
    font-style: normal;
}

.cart-checkout__field input,
.cart-checkout__field textarea {
    padding: var(--i-esm) var(--i-sm);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    background: var(--cbg);
    color: var(--cf);
    font-family: inherit;
    font-size: inherit;
}

.cart-checkout__field input:focus,
.cart-checkout__field textarea:focus {
    border-color: var(--caf-strong);
    outline: none;
}

.cart-checkout__choices {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    gap: var(--i-esm);
}

.cart-checkout__choices legend {
    padding: 0 0 var(--i-esm);
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.cart-checkout__choice {
    display: flex;
    align-items: flex-start;
    padding: var(--i-esm) var(--i-sm);
    border: 1rem solid var(--cb);
    border-radius: var(--c-sm);
    cursor: pointer;
    gap: var(--i-esm);
}

.cart-checkout__choice:has(input:checked) {
    border-color: var(--caf-strong);
}

.cart-checkout__choice small {
    display: block;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.cart-checkout__choice em {
    color: var(--cf);
    font-style: normal;
    font-weight: 600;
}

.cart-checkout__agreement {
    display: flex;
    align-items: flex-start;
    gap: var(--i-esm);
}

.cart-checkout__total {
    margin: 0;
    font-size: var(--fs-h4);
}

.cart-checkout__submit {
    align-self: flex-start;
}

/* Раскладка каталога: сайдбар фильтров и сетка товаров */
.catalogue-layout {
    display: grid;
    align-items: start;
    gap: var(--i-lg);
    grid-template-columns: 300rem minmax(0, 1fr);
}

@media (max-width: 1024px) {
    .catalogue-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.catalogue-layout__filters-toggle {
    display: none;
    width: 100%;
    min-height: calc(var(--i-xl) + var(--i-sm));
    align-items: center;
    justify-content: center;
    border: 1rem solid var(--caf-strong);
    border-radius: var(--c-sm);
    background: transparent;
    color: var(--caf-strong);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .catalogue-layout__filters-toggle {
        display: flex;
    }

    /* На узком экране панель скрыта, пока её не открыли кнопкой. */
    .catalogue-layout__filters[hidden] {
        display: none;
    }

    .catalogue-layout__filters {
        margin-top: var(--i-sm);
    }
}

/* Сайдбар фильтров */
.shop-filters {
    display: flex;
    flex-direction: column;
    gap: var(--i-sm);
}

.shop-filters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--i-sm);
}

.shop-filters__title {
    font-size: var(--fs-h4);
    font-weight: 700;
}

.shop-filters__reset {
    color: var(--caf-strong);
    font-size: var(--fs-sm);
}

.shop-filters__group {
    overflow: hidden;
    border-radius: var(--c-md);
    background: var(--cil);
}

.shop-filters__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: var(--i-sm) var(--i-md);
    border: 0;
    background: transparent;
    color: var(--cf);
    font-family: inherit;
    font-size: var(--fs-h4);
    font-weight: 700;
    cursor: pointer;
    gap: var(--i-sm);
    text-align: left;
}

.shop-filters__chevron {
    flex: none;
    transition: transform var(--a-time) var(--a-tfunc);
}

.shop-filters__toggle[aria-expanded='false'] .shop-filters__chevron {
    transform: rotate(-90deg);
}

.shop-filters__body {
    padding: 0 var(--i-md) var(--i-md);
}

.shop-filters__body[hidden] {
    display: none;
}

.shop-filters__options {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--i-esm);
    list-style: none;
}

.shop-filters__option {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: var(--i-esm);
}

.shop-filters__option input {
    width: 18rem;
    height: 18rem;
    flex: none;
    accent-color: var(--caf-strong);
}

.shop-filters__label {
    flex: 1;
}

/* Счётчик — не украшение: по нему выбирают, что включать. Приглушённый
   --c-pl на подложке фильтра давал 2.3:1. */
.shop-filters__count {
    color: var(--cf);
    font-size: var(--fs-sm);
}

.shop-filters__range {
    display: grid;
    gap: var(--i-esm);
    grid-template-columns: 1fr 1fr;
}

.shop-filters__range label {
    display: flex;
    align-items: center;
    gap: var(--i-esm);
}

.shop-filters__range span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.shop-filters__range input {
    width: 100%;
    min-width: 0;
    padding: var(--i-esm);
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    color: var(--cf);
    font-family: inherit;
    font-size: inherit;
}

.shop-filters__unit {
    margin: var(--i-esm) 0 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.shop-filters__submit {
    width: 100%;
}

/* Со скриптами форма отправляется сама, кнопка нужна только без них. */
.js-on .shop-filters__submit {
    display: none;
}

/* Поиск по сайту */
.site-search {
    display: flex;
    position: relative;
    gap: var(--i-esm);
}

.site-search input {
    width: 100%;
    min-width: 0;
    flex: 1;
    padding: var(--i-esm) var(--i-sm);
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    color: var(--cf);
    font-family: inherit;
    font-size: inherit;
}

.site-search input:focus {
    border-color: var(--caf);
    outline: none;
}

.site-search--page {
    max-width: 640rem;
    margin-bottom: var(--i-lg);
}

/* Подсказки перекрывают контент, поэтому лежат над ним. */
.site-search__suggest {
    position: absolute;
    z-index: 5;
    top: calc(100% + var(--i-esm));
    right: 0;
    left: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    box-shadow: var(--s-md);
    list-style: none;
}

.site-search__suggest[hidden] {
    display: none;
}

.site-search__option {
    display: flex;
    width: 100%;
    align-items: center;
    padding: var(--i-esm) var(--i-sm);
    border: 0;
    background: transparent;
    color: var(--cf);
    cursor: pointer;
    gap: var(--i-esm);
    text-align: left;
    text-decoration: none;
}

.site-search__option:hover,
.site-search__option.is-active {
    background: var(--cil);
}

.site-search__option img {
    width: 40rem;
    height: 40rem;
    flex: none;
    border-radius: var(--c-esm);
    object-fit: cover;
}

.site-search__option-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-search__option-price {
    flex: none;
    font-weight: 600;
}

.search__hint,
.search__empty,
.search__summary {
    color: var(--cf);
}

.search__scope,
.search__hint {
    color: var(--c-pl);
}

.search-results {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--i-sm);
    list-style: none;
}

.search-results__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--i-sm);
    border-bottom: 1rem solid var(--cb);
    gap: var(--i-md);
}

.search-results__link {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.search-results__title {
    font-weight: 600;
}

.search-results__text {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.search-results__price {
    flex: none;
    font-weight: 700;
}

/* Шапка магазина: верхняя строка, каталог, поиск, корзина. */
.shop-header {
    position: relative;
    z-index: 10;
    border-bottom: 1rem solid var(--ci);
    background: var(--cbg);
}

.shop-header__top {
    border-bottom: 1rem solid var(--ci);
    background: var(--cil);
    font-size: var(--fs-sm);
}

.shop-header__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-md);
    padding: var(--i-esm) 0;
}

.shop-header__top-menu ul {
    display: flex;
    align-items: center;
    gap: var(--i-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Меню верхней строки — горизонтальный флекс. Гасим вертикальный отступ
   списков из типографики (`li + li`), иначе второй и последующие пункты
   съезжают вниз и строка выглядит неровной. */
.shop-header__top-menu li + li {
    margin-top: 0;
}

.shop-header__top-menu a {
    color: var(--cf);
}

/* Вложенные пункты в верхней строке только шумят: она для коротких ссылок. */
.shop-header__top-menu li ul {
    display: none;
}

.shop-header__places {
    display: flex;
    gap: var(--i-md);
    color: var(--c-pl);
}

.shop-header__places span {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--i-esm) / 2);
}

.shop-header__places svg {
    width: 16rem;
    height: 16rem;
    flex: none;
}

.shop-header__row {
    display: flex;
    align-items: center;
    gap: var(--i-md);
    padding: var(--i-sm) 0;
}

.shop-header__logo {
    display: flex;
    flex-direction: column;
    gap: calc(var(--i-esm) / 2);
}

.shop-header__descriptor {
    color: var(--c-pl);
    font-size: var(--fs-sm);
    line-height: 1.2;
}

.shop-header__burger {
    display: none;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    flex: none;
    padding: 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-esm);
    background: transparent;
    color: var(--cf);
    place-items: center;
}

.shop-header__burger svg,
.shop-header__catalog-button svg,
.shop-header__action svg {
    width: 20rem;
    height: 20rem;
    /* Иконки шапки контурные. У сердечка заливкой управляет только CSS —
       у него в symbol нет `fill`, иначе не закрасить отложенный товар. */
    fill: none;
}

.shop-header__catalog {
    position: relative;
    flex: none;
}

a.shop-header__catalog-button {
    display: inline-flex;
    align-items: center;
    gap: var(--i-esm);
    padding: var(--i-esm) var(--i-md);
    border: 0;
    border-radius: var(--c-sm);
    /* Не `--caf`: он даёт под белым текстом 1.99:1 и как подпись не читается. */
    background: var(--caf-strong);
    color: var(--cw);
    font-family: inherit;
    font-size: var(--fs-p);
    cursor: pointer;
}

.shop-header__catalog-menu {
    visibility: hidden;
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--i-esm));
    left: 0;
    min-width: 260rem;
    margin: 0;
    padding: var(--i-esm) 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    box-shadow: var(--s-lg);
    list-style: none;
    opacity: 0;
    transition:
        opacity var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.shop-header__catalog:hover .shop-header__catalog-menu,
.shop-header__catalog:focus-within .shop-header__catalog-menu {
    visibility: visible;
    opacity: 1;
}

.shop-header__catalog-menu li {
    position: relative;
}

.shop-header__catalog-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-sm);
    padding: var(--i-esm) var(--i-sm);
    color: var(--cf);
}

.shop-header__catalog-menu a:hover {
    background: var(--cil);
}

.shop-header__catalog-menu svg {
    width: 14rem;
    height: 14rem;
    flex: none;
    color: var(--c-pl);
}

/* Подразделы выпадают вбок — так первый уровень остаётся коротким. */
.shop-header__catalog-menu li ul {
    visibility: hidden;
    position: absolute;
    top: calc(var(--i-esm) * -1);
    left: 100%;
    min-width: 220rem;
    margin: 0;
    padding: var(--i-esm) 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    box-shadow: var(--s-lg);
    list-style: none;
    opacity: 0;
    transition:
        opacity var(--a-time) var(--a-tfunc),
        visibility var(--a-time) var(--a-tfunc);
}

.shop-header__catalog-menu li:hover > ul,
.shop-header__catalog-menu li:focus-within > ul {
    visibility: visible;
    opacity: 1;
}

.shop-header__search {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-header__search button {
    display: grid;
    width: calc(var(--i-sm) * 2);
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--c-sm);
    background: var(--cil);
    color: var(--cf);
    cursor: pointer;
    place-items: center;
}

.shop-header__search button svg {
    width: 18rem;
    height: 18rem;
}

a.shop-header__action {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--i-esm) / 2);
    color: var(--cf);
    font-size: var(--fs-sm);
}

.shop-header__action-icon {
    position: relative;
    display: block;
}

.shop-header__badge {
    position: absolute;
    top: -6rem;
    right: -8rem;
    min-width: 16rem;
    height: 16rem;
    padding: 0 4rem;
    border-radius: 8rem;
    background: var(--caf-strong);
    color: var(--cw);
    font-size: 11rem;
    font-weight: 700;
    line-height: 16rem;
    text-align: center;
}

/* ── Плавающая корзина ─────────────────────────────────────────────────────
   Фикс-кнопка справа-снизу. Видна только когда корзина не пуста: внутри лежит
   тот же счётчик `data-cart-counter`, что и в шапке (его ведёт shop.js — меняет
   число и снимает `hidden`). Видимость кнопки завязана на этот бейдж через
   `:has()`, поэтому отдельный JS не нужен. По умолчанию скрыта — на старых
   браузерах без `:has()` просто не появляется (безопасная деградация). */
.cart-fab {
    position: fixed;
    right: var(--i-md);
    bottom: var(--i-md);
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--i-xl) + var(--i-esm));
    height: calc(var(--i-xl) + var(--i-esm));
    border-radius: 50%;
    background: var(--caf);
    color: var(--cw);
    box-shadow: var(--s-md);
    transition: transform var(--a-time, .2s) var(--a-tfunc, ease);
}

.cart-fab:has([data-cart-counter]:not([hidden])) {
    display: inline-flex;
}

.cart-fab:hover {
    transform: translateY(-2rem);
}

.cart-fab svg {
    width: 28rem;
    height: 28rem;
    fill: none;
    /* Белым явно: .cart-fab — ссылка, её `color` перебивают ссылочные стили,
       поэтому currentColor не даёт белого штриха на золотом фоне. */
    stroke: var(--cw);
}

.cart-fab__badge {
    position: absolute;
    top: -2rem;
    right: -2rem;
    min-width: 20rem;
    height: 20rem;
    padding: 0 5rem;
    border-radius: 10rem;
    background: var(--caf-strong);
    color: var(--cw);
    font-size: 12rem;
    font-weight: 700;
    line-height: 20rem;
    text-align: center;
}

.cart-fab__badge[hidden] {
    display: none;
}

.shop-header__contacts {
    display: flex;
    flex: none;
    flex-direction: column;
    line-height: 1.2;
}

.shop-header__contacts span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

a.shop-header__phone {
    color: var(--cf);
    font-size: var(--fs-h4);
    font-weight: 700;
    white-space: nowrap;
}

.shop-header__drawer-title {
    margin: var(--i-sm) 0 0;
    color: var(--c-pl);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.shop-header__drawer-catalog {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-header__drawer-catalog a {
    display: block;
    padding: var(--i-esm) 0;
    border-bottom: 1rem solid var(--ci);
    color: var(--cf);
}

.shop-header__drawer-catalog svg {
    display: none;
}

@media (max-width: 1024px) {
    .shop-header__places,
    .shop-header__contacts {
        display: none;
    }
}

@media (max-width: 768px) {
    .shop-header__top {
        display: none;
    }

    .shop-header__catalog {
        display: none;
    }

    .shop-header__burger {
        display: grid;
    }

    .shop-header__row {
        flex-wrap: wrap;
    }

    .shop-header__logo {
        flex: 1;
    }

    /* Поиск занимает всю ширину: на телефоне это главный способ навигации. */
    .shop-header__search {
        order: 3;
        flex-basis: 100%;
    }

    .shop-header__action-label {
        display: none;
    }
}

.shop-header__badge[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .shop-header__descriptor {
        display: none;
    }
}

/* Избранное: сердечко на карточке и страница отложенного. */
.catalogue-card__favorite,
.product__favorite {
    display: grid;
    width: calc(var(--i-sm) * 2);
    height: calc(var(--i-sm) * 2);
    padding: 0;
    border: 1rem solid var(--ci);
    border-radius: var(--c-sm);
    background: var(--cw);
    color: var(--c-pl);
    cursor: pointer;
    place-items: center;
    transition:
        color var(--a-time) var(--a-tfunc),
        border-color var(--a-time) var(--a-tfunc);
}

.catalogue-card__favorite svg,
.product__favorite svg {
    width: 20rem;
    height: 20rem;
    /* Заливкой управляет только CSS: `fill` в самом symbol перебил бы её —
       атрибут теневого содержимого выигрывает у наследования. */
    fill: none;
}

.catalogue-card__favorite:hover,
.product__favorite:hover {
    color: var(--cf);
    border-color: var(--c-pl);
}

/* Отложенное помечаем заливкой: обводка одна и та же в обоих состояниях. */
.catalogue-card__favorite.is-active,
.product__favorite.is-active {
    border-color: var(--c-err);
    color: var(--c-err);
}

.catalogue-card__favorite.is-active svg,
.product__favorite.is-active svg {
    fill: currentColor;
}

/* На карточке сердечко лежит поверх фото, поэтому вынимаем его из потока
   (`position: relative` у карточки уже есть — на нём держатся метки). */
.catalogue-card__favorite {
    position: absolute;
    z-index: 2;
    top: var(--i-esm);
    right: var(--i-esm);
}

.product__favorite {
    flex: none;
}

.favorites__empty {
    color: var(--c-pl);
}

/* Характеристики товара: подпись слева, значение справа, как в прайс-листе. */
.product__specs {
    margin: 0 0 var(--i-md);
    padding: 0;
}

.product__spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--i-sm);
    padding: var(--i-esm) 0;
    border-bottom: 1rem solid var(--ci);
}

.product__spec dt {
    flex: none;
    color: var(--c-pl);
}

.product__spec dd {
    margin: 0;
    text-align: right;
}

/* Панель вида и порядка над списком. Ссылками, а не формой: адрес уже несёт
   выбранные фильтры, и переносить их скрытыми полями незачем. */
.catalogue-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--i-sm);
    margin-bottom: var(--i-md);
}

.catalogue-toolbar__views {
    display: flex;
    border: 1px solid var(--ci);
    border-radius: var(--c-sm);
    overflow: hidden;
}

.catalogue-toolbar__view,
.catalogue-toolbar__sort {
    padding: var(--i-esm) var(--i-sm);
    color: inherit;
    font-size: var(--fs-sm);
    text-decoration: none;
}

.catalogue-toolbar__view.is-active {
    background: var(--caf-strong);
    color: var(--cw);
}

.catalogue-toolbar__sorts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--i-esm);
}

.catalogue-toolbar__label {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.catalogue-toolbar__sort.is-active {
    color: var(--caf-strong);
    font-weight: 600;
}

/* Таблица шире экрана уезжает внутри своей обёртки, а не тащит за собой
   страницу: горизонтальная прокрутка всего документа ломает мобильную
   вёрстку целиком. */
.catalogue-table-scroll {
    overflow-x: auto;
}

.catalogue-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-sm);
}

.catalogue-table th,
.catalogue-table td {
    padding: var(--i-sm);
    border-bottom: 1px solid var(--ci);
    text-align: left;
    vertical-align: middle;
}

.catalogue-table th {
    color: var(--c-pl);
    font-weight: 600;
    white-space: nowrap;
}

.catalogue-table__photo,
.catalogue-table__photo-head {
    width: 72rem;
}

.catalogue-table__photo img,
.catalogue-table__photo-empty {
    border-radius: var(--c-sm);
    width: 64rem;
    height: 64rem;
    object-fit: cover;
}

.catalogue-table__photo-empty {
    display: block;
    background: var(--ci);
}

.catalogue-table__name a {
    color: inherit;
    font-weight: 600;
}

.catalogue-table__empty {
    color: var(--c-pl);
}

.catalogue-table__price {
    color: var(--caf-strong);
    font-weight: 600;
    white-space: nowrap;
}

.catalogue-table__unit {
    color: var(--c-pl);
    font-weight: 400;
}

.catalogue-table__action {
    text-align: right;
}

/* Расчёт количества на карточке товара. Тёмная подложка отделяет его от
   характеристик: это не справка о товаре, а инструмент покупателя. */
.quantity-calculator {
    padding: var(--i-md);
    border-radius: var(--c-md);
    background: var(--cf);
    color: var(--cw);
}

.quantity-calculator__title {
    margin: 0 0 var(--i-sm);
    font-weight: 600;
}

.quantity-calculator__input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--i-esm);
}

.quantity-calculator__input input {
    flex: 1 1 160rem;
    padding: var(--i-esm) var(--i-sm);
    border: 0;
    border-radius: var(--c-sm);
    background: var(--cw);
    /* Цвет текста задаём явно: подложка расчёта тёмная и красит текст белым,
       а поле на ней светлое — набранное пропадало на белом фоне. */
    color: var(--cf);
}

.quantity-calculator__input input::placeholder {
    color: var(--c-pl);
}

.quantity-calculator__presets {
    display: flex;
    gap: var(--i-esm);
}

.quantity-calculator__presets button {
    padding: var(--i-esm) var(--i-sm);
    border: 1px solid var(--c-pl);
    border-radius: var(--c-sm);
    background: transparent;
    color: inherit;
    font-size: var(--fs-sm);
}

.quantity-calculator__result {
    display: grid;
    margin: var(--i-md) 0 0;
    gap: var(--i-sm);
    grid-template-columns: repeat(auto-fit, minmax(120rem, 1fr));
}

.quantity-calculator__result dt {
    font-size: var(--fs-sm);
    opacity: 0.75;
}

.quantity-calculator__result dd {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: 600;
}

.quantity-calculator__total dd {
    color: var(--cas);
}

.quantity-calculator__note {
    margin: var(--i-sm) 0 0;
    font-size: var(--fs-sm);
    opacity: 0.75;
}

/* Образец значения опции: цвет, переход для колормикса или фото раскладки.
   Дополняет название варианта, а не заменяет — цвет без подписи не выбрать. */
.product__swatch {
    display: inline-block;
    flex: none;
    border: 1px solid var(--ci);
    border-radius: 50%;
    width: var(--i-md);
    height: var(--i-md);
    background-position: center;
    background-size: cover;
}

/* Карточки подразделов в указателе каталога. Список остаётся списком ссылок:
   раздел без фотографии, описания и плашки выглядит как раньше, поэтому
   существующие сайты после обновления не меняются. */
.catalogue-sections {
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--i-md);
    grid-template-columns: repeat(auto-fill, minmax(280rem, 1fr));
    list-style: none;
}

.catalogue-sections__link {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--i-esm);
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.catalogue-sections__photo {
    display: block;
    position: relative;
    border-radius: var(--c-md);
    overflow: hidden;
}

.catalogue-sections__photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Плашка лежит на фотографии, а без неё встаёт в поток: подпись нужна
   в обоих случаях, а накладывать её не на что. */
.catalogue-sections__photo .catalogue-sections__badge {
    position: absolute;
    bottom: var(--i-esm);
    left: var(--i-esm);
}

.catalogue-sections__badge {
    align-self: flex-start;
    padding: var(--i-esm) var(--i-sm);
    border-radius: var(--c-sm);
    background: var(--cf);
    color: var(--cw);
    font-size: var(--fs-sm);
}

.catalogue-sections__title {
    font-weight: 600;
}

.catalogue-sections__text {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}


/* Source: contacts.css */
.b-contacts .contacts-heading {
    margin-top: 0;
    margin-bottom: var(--i-xl);
}

.b-contacts .contacts-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--i-lg);
}

.b-contacts .contacts-layout--without-map,
.b-contacts .contacts-layout--map-only {
    grid-template-columns: minmax(0, 1fr);
}

.b-contacts .contacts-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--i-md);
}

.b-contacts .contacts-card {
    padding: var(--i-md);
    border: 1px solid var(--ci);
    border-radius: var(--c-md);
    background: var(--cbg-card);
    box-shadow: var(--s-sm);
}

.b-contacts .contacts-card__title {
    margin: 0 0 var(--i-md);
    color: var(--cf);
    font-size: var(--fs-h3);
}

.b-contacts .contacts-card__rows {
    display: flex;
    flex-direction: column;
    gap: var(--i-sm);
}

.b-contacts .contacts-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--i-esm);
    color: var(--cf);
    font-size: var(--fs-p);
}

.b-contacts .contacts-row svg {
    width: var(--i-sm);
    height: var(--i-sm);
    flex: 0 0 var(--i-sm);
    color: var(--caf);
}

.b-contacts .contacts-row a {
    overflow-wrap: anywhere;
}

.b-contacts .contacts-map {
    display: grid;
    position: relative;
    min-width: 0;
    min-height: calc(var(--i-xxl) * 4);
    overflow: hidden;
    place-items: center;
    border-radius: var(--c-md);
    background: var(--cil);
}

.b-contacts .contacts-map__fallback,
.b-contacts .contacts-map__frame {
    position: absolute;
    inset: 0;
}

.b-contacts .contacts-map__fallback {
    display: flex;
    padding: var(--i-md);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--i-esm);
    color: var(--cf);
    text-align: center;
}

.b-contacts .contacts-map__fallback svg {
    width: var(--i-xl);
    height: var(--i-xl);
    color: var(--caf);
}

.b-contacts .contacts-map__fallback span {
    color: var(--c-pl);
    font-size: var(--fs-sm);
}

.b-contacts .contacts-map__frame {
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity var(--a-time) var(--a-tfunc);
}

.b-contacts .contacts-map.is-ready .contacts-map__frame {
    opacity: 1;
}

.b-contacts .contacts-map.is-ready .contacts-map__fallback {
    visibility: hidden;
}

@media (max-width: 768px) {
    .b-contacts .contacts-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .b-contacts .contacts-map {
        min-height: calc(var(--i-xxl) * 3);
    }
}

@media (max-width: 480px) {
    .b-contacts .contacts-card {
        padding: var(--i-sm);
    }
}


/* Source: form.css */
.b-form .mx-form {
    max-width: 960rem;
}


/* Source: cart.css */
/* Корзина и оформление «Лавки Конфет». Строки корзины рисует скрипт из
   сессии — здесь только оформление; поля взяты из core/Input в DS:
   рамка 1.5px --ci, в фокусе --caf, радиус --c-sm.

   Ядро рисует рамки таблицы и полей чёрным `--cb`. На кремовой палитре это
   выглядит дырой, поэтому везде ниже они переведены на `--ci`. */
.cart__table th,
.cart__table td {
	border-bottom-color: var(--ci);
}

.cart__table th {
	padding-bottom: var(--i-esm);
	font-family: var(--font-sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cart__thumb {
	border: 1px solid var(--ci);
	background: var(--cw);
}

.cart__quantity {
	border: 1.5px solid var(--ci);
}

.cart__quantity:focus {
	border-color: var(--caf);
	outline: none;
}

/* Спасибо за заказ — зелёная плашка из семантических токенов DS, а не просто
   ещё одна карточка: это сообщение об успехе. */
.cart-thanks {
	border: 1px solid var(--ci-green-s);
	background: var(--ci-green-p);
}

.cart-thanks h2 {
	font-size: var(--fs-h3);
}

.cart__empty {
	padding: var(--i-xl);
	border-radius: var(--c-md);
	background: var(--cil);
	text-align: center;
}

/* ── Оформление двумя колонками ──────────────────────────────────────────
   Ядро ограничивает форму 720rem в одну колонку. Сводку с итогом это
   отправляло под сгиб. */
.cart-checkout {
	max-width: none;
}

.cart-checkout__layout {
	display: grid;
	align-items: start;
	gap: var(--i-lg);
	grid-template-columns: minmax(0, 1fr) 340rem;
}

.cart-checkout__fields {
	display: flex;
	flex-direction: column;
	gap: var(--i-md);
}

.cart-checkout__title {
	font-family: var(--font-serif, var(--font-sans));
}

.cart-checkout__field input,
.cart-checkout__field textarea {
	border: 1.5px solid var(--ci);
	background: var(--cw);
}

.cart-checkout__field input:focus,
.cart-checkout__field textarea:focus {
	border-color: var(--caf);
}

.cart-checkout__field > span {
	font-weight: 600;
}

.cart-checkout__choice {
	border: 1.5px solid var(--ci);
	background: var(--cw);
}

.cart-checkout__choice:has(input:checked) {
	border-color: var(--caf);
	background: var(--cil);
}

.cart-checkout__errors {
	border: 1px solid var(--c-err);
	background: var(--cw);
}

/* Сводка прилипает: итог виден, пока заполняешь поля. */
.cart-summary {
	display: flex;
	position: sticky;
	top: var(--i-sm);
	flex-direction: column;
	gap: var(--i-sm);
	padding: var(--i-md);
	border: 1px solid var(--ci);
	border-radius: var(--c-md);
	background: var(--cw);
	box-shadow: var(--s-sm);
}

.cart-summary__title {
	margin: 0;
	font-family: var(--font-serif, var(--font-sans));
	font-size: var(--fs-h4);
}

.cart-summary__rows {
	margin: 0;
	padding: 0;
}

.cart-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--i-esm);
	padding: 6rem 0;
}

.cart-summary__row + .cart-summary__row {
	margin-top: 0;
}

.cart-summary__row dt {
	color: var(--c-pl);
	font-size: var(--fs-sm);
}

.cart-summary__row dd {
	margin: 0;
}

.cart-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--i-esm);
	padding-top: var(--i-esm);
	border-top: 1px solid var(--ci);
}

.cart-summary__total strong {
	font-family: var(--font-serif, var(--font-sans));
	font-size: var(--fs-h3);
}

/* Согласие стоит рядом с кнопкой, поэтому ему нужен воздух: иначе оно
   прилипает к итогу и читается как часть суммы. */
.cart-summary .cart-checkout__agreement {
	margin-top: var(--i-esm);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

.cart-summary .cart-checkout__agreement input {
	margin-top: 3rem;
	flex: 0 0 auto;
	accent-color: var(--caf-strong);
}

/* Ядро прижимает кнопку к левому краю — в сводке она на всю ширину. */
.cart-checkout__submit {
	width: 100%;
	align-self: stretch;
}

@media (max-width: 900px) {
	.cart-checkout__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* В одну колонку прилипание только мешает: сводка и так идёт последней. */
	.cart-summary {
		position: static;
	}
}

/* ── Корзина на телефоне ─────────────────────────────────────────────────
   Таблица в 480 не живёт: шесть столбцов уезжают за край. Те же строки
   раскладываются карточкой, подписи столбцов подставляются из CSS. */
@media (max-width: 768px) {
	.cart__table thead {
		display: none;
	}

	.cart__table,
	.cart__table tbody {
		display: block;
	}

	.cart__row {
		display: grid;
		align-items: center;
		gap: 6rem var(--i-esm);
		padding: var(--i-sm) 0;
		border-bottom: 1px solid var(--ci);
		grid-template-columns: 72rem minmax(0, 1fr) auto;
		grid-template-areas:
			"photo name   actions"
			"photo price  price"
			"photo amount amount"
			"photo sum    sum";
	}

	.cart__cell {
		display: block;
		padding: 0;
		border: 0;
	}

	.cart__cell--photo {
		align-self: start;
		grid-area: photo;
	}

	.cart__cell--name {
		grid-area: name;
	}

	.cart__cell--actions {
		align-self: start;
		grid-area: actions;
	}

	.cart__cell--price {
		grid-area: price;
	}

	.cart__cell--amount {
		grid-area: amount;
	}

	.cart__cell--sum {
		grid-area: sum;
	}

	.cart__cell--price,
	.cart__cell--amount,
	.cart__cell--sum {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--i-esm);
		text-align: left;
	}

	.cart__cell--price::before,
	.cart__cell--amount::before,
	.cart__cell--sum::before {
		color: var(--c-pl);
		font-size: var(--fs-sm);
	}

	.cart__cell--price::before {
		content: "Цена";
	}

	.cart__cell--amount::before {
		content: "Количество";
	}

	.cart__cell--sum::before {
		content: "Сумма";
	}

	.cart__cell--sum {
		font-weight: 600;
	}
}


/* Source: catalogue.css */
/* Каталог «Лавки Конфет». Механика — фильтры, счётчики, корзина, избранное —
   вся из ядра, здесь только оформление по макету. */

/* Шапка раздела продолжает тёмную полосу крошек. */
.catalogue-head {
	background: var(--cf);
	color: var(--cw);
}

.catalogue-head .container {
	padding-top: var(--i-esm);
	padding-bottom: var(--i-lg);
}

.catalogue-head h1 {
	color: var(--cw);
}

.catalogue-head__count {
	margin-top: 10rem;
	color: var(--ci);
}

/* Панель над списком: чипсы подразделов слева, сортировка справа. */
.catalogue-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--i-sm);
	flex-wrap: wrap;
	margin-bottom: var(--i-md);
}

.catalogue-chips {
	display: flex;
	gap: 10rem;
	flex-wrap: wrap;
}

a.catalogue-chip {
	padding: 9rem 20rem;
	border: 1rem solid var(--ci);
	border-radius: 999rem;
	background: transparent;
	color: var(--cf);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: all var(--a-time) var(--a-tfunc);
}

a.catalogue-chip:hover {
	border-color: var(--caf-strong);
	color: var(--caf-strong);
}

a.catalogue-chip.is-active {
	border-color: var(--cf);
	background: var(--cf);
	color: var(--cw);
}

.catalogue-sort {
	display: inline-flex;
	align-items: center;
	gap: 8rem;
	color: var(--c-pl);
	font-size: var(--fs-sm);
}

.catalogue-sort select {
	padding: 8rem 12rem;
	border: 1rem solid var(--ci);
	border-radius: var(--c-sm);
	background: var(--cw);
	color: var(--cf);
	font-family: inherit;
	font-size: var(--fs-sm);
	cursor: pointer;
}

/* Сетка три в ряд, как в макете: при четырёх карточка становится тесной. */
.catalogue-layout__main .catalogue-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--i-md);
}

/* Боковые фильтры карточками на светлой заливке. Ширину колонки задаёт
   ядерная сетка `.catalogue-layout`, здесь только внутренности. */
.shop-filters {
	gap: var(--i-sm);
}

.shop-filters__group {
	padding: var(--i-esm) var(--i-sm) var(--i-sm);
	border: 0;
	border-radius: var(--c-md);
	background: var(--cil);
}

.shop-filters__head {
	padding: 0 4rem;
}

/* «От» и «До» встают над полем: в строку рядом с ним на 300rem колонки
   пятизначная цена обрезается. */
.shop-filters__range label {
	align-items: flex-start;
	flex-direction: column;
	gap: 4rem;
}

.catalogue-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--i-esm);
	margin-top: var(--i-lg);
}

.catalogue-more__counter {
	color: var(--c-pl);
	font-size: var(--fs-sm);
}

.catalogue-more__button {
	padding: 15rem 40rem;
	border: 0;
	border-radius: var(--c-sm);
	background: var(--cf);
	color: var(--cw);
	font-size: var(--fs-p);
	font-weight: 500;
	cursor: pointer;
}

.catalogue-more__button:hover {
	filter: brightness(1.15);
}

.catalogue-more__button[hidden] {
	display: none;
}

/* Пустая выдача: подсказка вместо голой строки. */
.catalogue__empty {
	padding: var(--i-xl);
	border-radius: var(--c-md);
	background: var(--cil);
	color: var(--c-pl);
	text-align: center;
}

@media (max-width: 1024px) {
	.catalogue-layout__main .catalogue-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.catalogue-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	/* Кнопка фильтров тёмная, как в макете: контурная теряется среди карточек. */
	.catalogue-layout__filters-toggle {
		min-height: auto;
		justify-content: space-between;
		padding: 14rem 20rem;
		border: 0;
		background: var(--cf);
		color: var(--cw);
		font-weight: 500;
	}

	.catalogue-sort {
		justify-content: space-between;
	}

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


/* Source: contacts.css */
/* Контакты «Лавки Конфет». Механика формы — приём, антиспам, согласие, письма
   и журнал заявок — вся из ядра, здесь только оформление.

   Поля взяты из core/Input в DS: рамка 1.5px --ci, в фокусе --caf,
   радиус --c-sm. Панель — по core/Card. */

/* ── Реквизиты ───────────────────────────────────────────────────────────
   Карта выключена, поэтому карточка идёт во всю ширину, а строки встают в
   ряд: столбиком на всю ширину они выглядели бы потерянными. */
.b-contacts .contacts-card {
	padding: var(--i-lg);
}

.b-contacts .contacts-card__title {
	font-family: var(--font-serif, var(--font-sans));
}

.b-contacts .contacts-card__rows {
	display: grid;
	gap: var(--i-md);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.b-contacts .contacts-row {
	align-items: center;
}

.b-contacts .contacts-row svg {
	color: var(--caf);
}

/* ── Форма ───────────────────────────────────────────────────────────────
   Панель — сам контейнер секции, а не заголовок и форма по отдельности:
   иначе между ними получается шов из двух рамок и двух теней.
   По центру и уже контейнера: во всю ширину поля растягиваются на 1200
   пикселей, и заполнять их неудобно. */
.b-form .container {
	max-width: 720rem;
	margin-block: var(--i-lg);
	padding: var(--i-lg);
	border: 1px solid var(--ci);
	border-radius: var(--c-md);
	background: var(--cw);
	box-shadow: var(--s-sm);
}

.b-form h2 {
	margin-bottom: var(--i-md);
	font-family: var(--font-serif, var(--font-sans));
	font-size: var(--fs-h3);
}

.b-form .mx-form__field input:not([type="checkbox"], [type="radio"]),
.b-form .mx-form__field textarea {
	border: 1.5px solid var(--ci);
	border-radius: var(--c-sm);
	background: var(--cw);
}

.b-form .mx-form__field input:not([type="checkbox"], [type="radio"]):focus,
.b-form .mx-form__field textarea:focus {
	border-color: var(--caf);
	box-shadow: none;
}

.b-form .mx-form__choice input[type="checkbox"] {
	border: 1.5px solid var(--ci);
	border-radius: var(--c-esm);
	background: var(--cw);
}

/* Отмеченное состояние: акцентный фон, иначе белая галочка не видна на белом
   (кастомное правило выше перебивало базовый :checked при равной специфичности). */
.b-form .mx-form__choice input[type="checkbox"]:checked {
	border-color: var(--caf-strong);
	background: var(--caf);
}

/* Кнопка во всю ширину, как в макете: это единственное действие на панели. */
.b-form .main-button {
	width: 100%;
}

.b-form .main-button .main-link {
	width: 100%;
}

@media (max-width: 900px) {
	.b-contacts .contacts-card__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.b-contacts .contacts-card__rows {
		grid-template-columns: minmax(0, 1fr);
	}

	.b-contacts .contacts-card,
	.b-form .container {
		padding: var(--i-sm);
	}
}


/* Source: footer.css */
/* Подвал «Лавки Конфет»: тёмный, в четыре колонки, с нижней полосой.
   В ядре подвал светлый и трёхколоночный, поэтому колонки и цвета переопределены
   целиком. Текст на --cf берёт только те токены, что там читаются:
   --cw 16:1, --ci 11.7:1, --cas 8.5:1. --caf-strong и --c-pl на тёмном отпадают. */

.site-footer {
	border-top: 0;
	color: var(--cw);
}

.site-footer__grid {
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--i-lg);
	padding-top: var(--i-xl);
	padding-bottom: var(--i-lg);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12rem;
	min-width: 0;
}

.site-footer__title {
	color: var(--cas);
	font-size: 12rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-footer__brand {
	gap: 14rem;
}

.site-footer__logo {
	width: auto;
	flex: none;
}

.site-footer__logo .site-logo__link {
	gap: 12rem;
}

.site-footer__logo img {
	width: 40rem;
	height: 40rem;
	flex: none;
}

.site-footer__wordmark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.05;
}

.site-footer__name {
	color: var(--cw);
	font-family: var(--font-serif);
	font-size: 22rem;
	font-weight: 600;
}

.site-footer__descriptor {
	margin-top: 3rem;
	color: var(--ci);
	font-size: 9rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
}

.site-footer__about {
	color: var(--ci);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* Списки «Магазин» и «Каталог» плоские: вложенность в подвале только шумит. */
.site-footer__menu > ul,
.site-footer__catalog {
	display: grid;
	gap: 12rem;
	margin: 0;
	padding: 0;
	text-align: left;
	list-style: none;
}

.site-footer__menu li,
.site-footer__catalog li {
	margin: 0;
}

.site-footer__menu a,
.site-footer__catalog a {
	display: block;
	color: var(--ci);
	font-size: var(--fs-p);
}

.site-footer__menu a:hover,
.site-footer__menu li.active > a,
.site-footer__catalog a:hover {
	color: var(--cas);
}

.site-footer__catalog li ul,
.site-footer__catalog svg {
	display: none;
}

.site-footer__contacts {
	align-items: flex-start;
}

a.site-footer__phone {
	color: var(--cw);
	font-size: var(--fs-h4);
	font-weight: 600;
	white-space: nowrap;
}

/* С префиксом `a`: голое имя класса весит меньше, чем ядерное `a:link`,
   и почта оставалась золотой — на тёмном это 3.28:1. */
a.site-footer__link {
	color: var(--ci);
}

a.site-footer__phone:hover,
a.site-footer__link:hover {
	color: var(--cas);
}

.site-footer__note {
	color: var(--ci);
	font-size: var(--fs-sm);
}

.site-footer__social {
	justify-content: flex-start;
	margin-top: 4rem;
	gap: 12rem;
}

.site-footer__social a {
	width: 36rem;
	height: 36rem;
	/* Не rgba: цвет берём из токена и разбавляем прозрачным. */
	border-color: color-mix(in srgb, var(--cw) 22%, transparent);
	color: var(--cas);
}

.site-footer__social a:hover {
	border-color: var(--cas);
}

/* Нижняя полоса: копирайт и служебные ссылки. */
.site-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--cw) 12%, transparent);
}

.site-footer__bottom-row {
	display: flex;
	justify-content: space-between;
	gap: 12rem;
	padding: 18rem 0;
	color: var(--ci);
	font-size: var(--fs-sm);
}

.site-footer__bottom-links {
	display: flex;
	gap: var(--i-sm);
	flex-wrap: wrap;
}

.site-footer__bottom-row a {
	color: var(--cas);
	white-space: nowrap;
}

.site-footer__bottom-row a:hover {
	color: var(--cw);
}

@media (max-width: 768px) {
	/* Ядро на мобильном центрирует подвал целиком. В макете он остаётся
	   левым, иначе заголовки колонок висят по центру над левыми ссылками. */
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--i-md);
		text-align: left;
	}

	.site-footer__brand,
	.site-footer__contacts {
		align-items: flex-start;
		text-align: left;
	}

	.site-footer__logo {
		align-self: flex-start;
	}

	.site-footer__bottom-row {
		flex-direction: column;
	}
}


/* Source: header.css */
/* Шапка магазина «Лавка Конфет».
   Механика вся из ядра — здесь только оформление по макету. */

/* Главная строка на белом с тенью, плашка сверху тёмная: в ядре обе светлые. */
.shop-header {
	border-bottom: 0;
	background: var(--cw);
	box-shadow: var(--s-sm);
}

.shop-header__top {
	border-bottom: 0;
	background: var(--cf);
	color: var(--cw);
}

.shop-header__top-row {
	padding: 9rem 0;
}

.shop-header__top-menu ul {
	gap: 26rem;
}

.shop-header__top-menu a {
	color: var(--cw);
}

/* На тёмном --caf-strong даёт 3.28:1 и как подпись не читается, --cas — 8.52:1. */
.shop-header__top-menu a:hover,
.shop-header__top-menu li.active > a {
	color: var(--cas);
}

.shop-header__places {
	gap: 22rem;
	color: var(--ci);
}

/* С префиксом `a`: голый класс легче ядерного `a:link`, и телефон оставался
   золотым — на тёмной плашке это 3.28:1. */
a.shop-header__top-phone {
	display: inline-flex;
	align-items: center;
	gap: 7rem;
	color: var(--cw);
}

a.shop-header__top-phone:hover {
	color: var(--cas);
}

.shop-header__top-phone svg {
	width: 15rem;
	height: 15rem;
	flex: none;
	fill: none;
}

.shop-header__row {
	gap: 22rem;
	padding: 16rem 0;
}

/* Знак, название засечками и подпись «вкусный магазин» вразрядку.
   Ширина по содержимому: ядерные 160rem ломали подпись на две строки. */
.shop-header__logo {
	width: auto;
	flex: 0 0 auto;
}

.shop-header__logo .site-logo__link {
	gap: 14rem;
}

.shop-header__logo img {
	width: 46rem;
	height: 46rem;
	flex: none;
}

.shop-header__wordmark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.05;
}

.shop-header__name {
	color: var(--cf);
	font-family: var(--font-serif);
	font-size: 27rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.shop-header__descriptor {
	margin-top: 3rem;
	color: var(--c-pl);
	font-size: 10rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
}

a.shop-header__catalog-button {
	gap: 10rem;
	padding: 14rem 24rem;
	font-weight: 500;
}

/* Поиск пилюлей: инпут без своей рамки внутри общей оболочки. */
.shop-header__search {
	align-items: center;
	gap: 8rem;
	min-height: 52rem;
	padding: 0 6rem 0 20rem;
	border: 1rem solid var(--ci);
	border-radius: 999rem;
	background: var(--cw);
}

.shop-header__search input {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.shop-header__search input:focus {
	border-color: transparent;
}

.shop-header__search button {
	width: 40rem;
	height: 40rem;
	border-radius: 50%;
}

.shop-header__search .site-search__suggest {
	top: calc(100% + var(--i-esm));
}

/* Избранное и корзина: иконка крупнее, подпись мельче. */
a.shop-header__action {
	gap: 4rem;
	font-size: 12rem;
}

.shop-header__action svg {
	width: 26rem;
	height: 26rem;
}

.shop-header__badge {
	top: -8rem;
	right: -10rem;
	min-width: 18rem;
	height: 18rem;
	border-radius: 9rem;
	line-height: 18rem;
}

@media (max-width: 768px) {
	.shop-header__row {
		flex-wrap: wrap;
		gap: 14rem;
	}

	/* Поиск уходит на свою строку: в ряд с логотипом и кнопками он сжимается
	   до нечитаемого. */
	.shop-header__search {
		order: 10;
		width: 100%;
		min-height: 46rem;
	}

	/* Корзина и избранное крупнее и одного размера на мобильном — просьба клиента. */
	.shop-header__action svg {
		width: 32rem;
		height: 32rem;
	}
}


/* Source: home.css */
/* Главная «Лавки Конфет». Блоки — ядерные, здесь только оформление по макету. */

/* ── Первый экран ─────────────────────────────────────────────────────────
   Тёмная подложка приходит модификатором `block-dark`, здесь остаётся
   декор и порядок: в макете абзац идёт под заголовком, а блок выводит его
   над ним. Переставляем порядком флексбокса, а не правкой ядра. */
.b-lead {
	position: relative;
	overflow: hidden;
}

/* Ромб из макета. Фоном, а не разметкой: украшение читалке не нужно. */
.b-lead::before {
	content: "";
	position: absolute;
	top: -140rem;
	right: -120rem;
	width: 520rem;
	height: 520rem;
	background: url("/assets/lavka-mark.svg") no-repeat center / contain;
	opacity: 0.18;
	pointer-events: none;
}

.b-lead .container {
	position: relative;
}

.b-lead .lead-description {
	order: 1;
	max-width: 520rem;
	color: var(--ci);
}

.b-lead .lead-actions {
	order: 2;
}

/* Кнопки hero чуть компактнее по высоте — ближе к макету. Ядро задаёт
   `min-height: calc(var(--i-xxl) + var(--i-sm))`; здесь только для этого сайта. */
.b-lead .main-button.bigest .main-link {
	min-height: var(--i-xl);
}

/* Надзаголовок вместо пилюли: в макете это строка с чертой, а не рамка. */
.b-lead .lead-badge {
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--cas);
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	gap: 9rem;
}

.b-lead .lead-badge::before {
	content: "";
	width: 34rem;
	height: 1px;
	background: var(--cas);
}

.b-lead .lead-media {
	border: 1px solid color-mix(in srgb, var(--cas) 42%, transparent);
	border-radius: var(--c-lg);
	background: var(--cf);
}

/* ── Категории ────────────────────────────────────────────────────────────
   Заголовок по центру, карточки по левому краю: модификатор `align-center`
   центрировал бы и содержимое карточек. */
.b-cards_subsec .cards-subsec-head {
	text-align: center;
}

.b-cards_subsec .service-card {
	border: 1px solid var(--ci);
	border-radius: var(--c-md);
	box-shadow: none;
	transition:
		border-color var(--a-time) var(--a-tfunc),
		box-shadow var(--a-time) var(--a-tfunc),
		transform var(--a-time) var(--a-tfunc);
}

.b-cards_subsec .service-card:hover {
	transform: translateY(-4rem);
	border-color: var(--caf);
	box-shadow: var(--s-md);
}

.b-cards_subsec .service-card__title {
	font-size: var(--fs-h4);
}

/* Категории — иконки, а не фото: тонкий знак по центру светлой плашки,
   контейн вместо cover, чтобы SVG не растягивался. */
.b-cards_subsec .service-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.b-cards_subsec .service-card__media img {
	width: 96rem;
	height: 96rem;
	object-fit: contain;
}

/* «Перейти →» в макете — текстовая ссылка, а не залитая кнопка. */
.b-cards_subsec .main-button {
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.b-cards_subsec .main-button .main-link {
	min-height: 0;
	padding: 0;
	color: var(--caf-strong);
	font-size: var(--fs-sm);
}

.b-cards_subsec .main-button .flash {
	display: none;
}

/* ── Хиты продаж ──────────────────────────────────────────────────────────
   Подборка стоит вплотную к «О лавке» — в макете между ними один отступ. */
.b-products_pick .container {
	padding-top: 0;
}

/* ── Почему нас выбирают ──────────────────────────────────────────────────
   Плитка иконки тёмная с золотым знаком, как в макете. */
.b-benefits .benefit-card__icon {
	border: 0;
	background: var(--cf);
	color: var(--cas);
}

/* ── Остались вопросы? ────────────────────────────────────────────────────
   Панель на тёмном фоне не нужна: секция и так последняя перед подвалом. */
.b-callus .callus-panel {
	border: 1px solid var(--ci);
	background: var(--cw);
}

/* Мессенджеры — единый брендовый цвет вместо пёстрых фирменных
   (зелёный/синий/фиолетовый): в тёплой палитре так спокойнее и ровнее. */
.b-callus .messenger--whatsapp,
.b-callus .messenger--telegram,
.b-callus .messenger--viber {
	color: var(--caf);
}

@media (max-width: 768px) {
	.b-lead::before {
		display: none;
	}
}

/* На узком экране ядро оставляет две карточки в ряд, и описание раздела
   рвётся на четыре строки. В макете здесь одна колонка. */
@media (max-width: 560px) {
	.b-cards_subsec .cards-subsec-grid {
		--card-items: 1;
	}
}


/* Source: page-head.css */
/* Шапка внутренней страницы: тёмная полоса с крошками и заголовком.
   В разметке это две соседние секции — крошки и `.page-heading`. Полосу
   собираем из них снятием отступов между ними, а не правкой шаблона:
   `resources/views/layouts` принадлежит ядру. */

.section-crumbs,
.page-main--inner > .page-heading,
.page-main--category > .page-heading {
	background: var(--cf);
	color: var(--cw);
}

.section-crumbs .container {
	padding-top: var(--i-md);
	padding-bottom: 0;
}

.page-main--inner > .page-heading .container,
.page-main--category > .page-heading .container {
	padding-top: var(--i-esm);
	padding-bottom: var(--i-lg);
}

.section-crumbs .breadcrumbs li {
	color: var(--ci);
}

/* На тёмном --caf-strong отпадает: 3.28:1. */
.section-crumbs .breadcrumbs a {
	color: var(--cas);
}

.section-crumbs .breadcrumbs a:hover {
	color: var(--cw);
}

.section-crumbs .breadcrumbs li:not(:last-child)::after {
	color: var(--ci);
}

.section-crumbs .breadcrumbs li:last-child {
	color: var(--cw);
}

.page-main--inner > .page-heading h1,
.page-main--category > .page-heading h1 {
	color: var(--cw);
}

/* Без крошек полоса должна открываться сама. */
.page-main--inner > .page-heading:first-child .container,
.page-main--category > .page-heading:first-child .container {
	padding-top: var(--i-lg);
}


/* Source: product.css */
/* Карточка товара «Лавки Конфет». Механика — галерея, варианты, количество,
   избранное — вся из ядра, здесь только оформление.

   Кита карточки товара в Construct DS нет, поэтому язык взят из core/Card
   (панель на --cw с рамкой и радиусом --c-md) и sections-engagement/FaqSection
   (раскрывашка карточкой с плюсом-крестиком). */

/* Галерея и панель покупки — поровну, 50/50. */
.product {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.product__media {
	max-width: none;
}

/* Кадр фиксированной высоты, картинка помещается целиком (contain), а не
   кроется: товар на белом с полями, ничего не обрезается. */
.product__photo {
	height: 520rem;
	border: 1px solid var(--ci);
	background: var(--cw);
}

.product__photo img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

/* Немного воздуха сверху: галерея и панель не липнут к тёмной плашке заголовка. */
.section-product .container {
	padding-top: var(--i-xl);
}

.product__photo--empty {
	background: var(--cil);
}

/* У миниатюр в ядре чёрная рамка — на кремовой палитре она выглядит дырой. */
.product__thumb {
	border-color: var(--ci);
}

/* Панель покупки карточкой: она отделена от галереи и не сливается с фоном. */
.product__info {
	align-self: start;
	padding: var(--i-md);
	border: 1px solid var(--ci);
	border-radius: var(--c-md);
	background: var(--cw);
	box-shadow: var(--s-sm);
}

.product__price {
	font-family: var(--font-serif, var(--font-sans));
}

/* Остатки не показываем: магазин без учёта количества. */
.product__stock {
	display: none;
}

/* Поле количества — той же высоты, что и кнопка «В корзину»
   (у кнопки `.button` min-height: calc(--i-xl + --i-sm)). */
.product__buy .product__quantity {
	min-height: calc(var(--i-xl) + var(--i-sm));
}

/* ── Раскрывашки под товаром ─────────────────────────────────────────────
   На `details`, без скрипта: без JS открываются сами, и текст индексируется. */
.product-details {
	display: grid;
	gap: var(--i-sm);
	margin-top: var(--i-xl);
}

.card-details.product-detail {
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--ci);
	border-radius: var(--c-md);
	background: var(--cw);
}

.product-detail__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--i-md);
	padding: var(--i-sm) var(--i-md);
	color: var(--cf);
	cursor: pointer;
	font-family: var(--font-serif, var(--font-sans));
	font-size: var(--fs-h4);
	font-weight: 600;
	list-style: none;
}

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

.product-detail__summary:focus-visible {
	outline: 1px solid var(--caf);
	outline-offset: -1px;
}

/* Крестик из спрайта повёрнут на 45° — это плюс. Открытая раскрывашка
   возвращает его в крестик, как в FaqSection. */
.product-detail__toggle {
	width: var(--i-sm);
	height: var(--i-sm);
	flex: 0 0 var(--i-sm);
	color: var(--caf);
	transform: rotate(45deg);
	transition: transform var(--a-time) var(--a-tfunc);
}

.product-detail[open] .product-detail__toggle {
	transform: rotate(0);
}

.product-detail__body {
	padding: 0 var(--i-md) var(--i-md);
	color: var(--cf);
	line-height: 1.65;
}

.product-detail__body .product__specs {
	margin-bottom: 0;
}

/* ── Похожие товары ──────────────────────────────────────────────────────
   Немного воздуха над секцией, чтобы она не липла к раскрывашкам. */
.section-product-similar .container {
	padding-top: var(--i-xl);
}

/* И отступ под заголовком «Похожие товары» — крупнее ядерного. */
.section-product-similar .products-pick__head {
	margin-bottom: var(--i-xl);
}

/* У единственного товара в разделе похожих нет: компонент подборки не выводит
   ничего, и секция не должна занимать отступы за пустоту. */
.section-product-similar:not(:has(.catalogue-grid)) {
	display: none;
}

@media (max-width: 768px) {
	.product-details {
		margin-top: var(--i-lg);
	}

	/* На узком экране галерея и панель — в одну колонку. */
	.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.product__photo {
		height: auto;
		aspect-ratio: 1 / 1;
	}
}