/* СГЕНЕРИРОВАНО scripts/build-theme.sh — правь assets/_dev/css/, не этот файл. */

/* ---- 01-tokens.css ---- */
/* Токены Auras Design System (проект fa4a5dec, _ds/auras-design-system-8029700e).
   Переносятся как есть, теми же именами — .claude/rules/design-assets.md §1.
   Правки вносятся в дизайн-системе и приезжают сюда, а не наоборот. */

:root{
  /* ── Палитра брендбука (стр. 3) ── */
  --auras-navy:#1C225E;      /* Odatiy mahsulotlar — линия «каждый день» + основная краска */
  --auras-purple:#A84DE5;    /* To'y uchun — свадебная линия */
  --auras-pink:#FD5FB6;      /* Qizlar uchun — линия для девушек */
  --auras-crimson:#A00000;   /* Kelinchaklar uchun — линия для невест */

  /* ── Ядра акварели, снятые с текстур брендбука ── */
  --auras-blue-ink:#4C80EC;
  --auras-blue-wash:#B9CDF7;
  --auras-blue-mist:#CBD9F8;
  --auras-purple-ink:#933EFB;
  --auras-purple-wash:#D4B5FB;
  --auras-pink-ink:#C841B7;
  --auras-pink-wash:#F5C8EF;
  --auras-crimson-ink:#F55252;
  --auras-crimson-wash:#FBBDBE;

  /* ── Ночная небула (упаковка, сумки, тёмные секции) ── */
  --auras-night:#0B1026;
  --auras-night-2:#143465;
  --auras-night-3:#0C2C55;

  /* ── Нейтральные, охлаждённые в сторону navy ── */
  --n-0:#FFFFFF;
  --n-25:#FAFBFE;
  /* Плашки карточек товара из выгрузки 19.08: карточка в листинге лежит не на
     белом, а на своей тональной подложке, и тона чередуются. В дизайн-системе
     их нет — стоят прямыми значениями в самих макетах. */
  --tone-sand:#F6F1EC;
  --tone-sky:#EEF2FB;
  --n-50:#F5F7FD;
  --n-100:#EDF1FA;
  --n-200:#E1E8F7;
  --n-300:#C7D2E8;
  --n-400:#9AA6C4;
  --n-500:#6F7B9C;
  --n-600:#4E5878;
  --n-700:#343C5C;
  --n-800:#232A48;
  --n-900:#1C225E;

  /* ── Семантические алиасы ── */
  --text-strong:var(--auras-navy);
  --text-body:var(--n-700);
  --text-muted:var(--n-500);
  --text-faint:var(--n-400);
  --text-on-dark:var(--n-0);
  --text-on-dark-muted:rgba(255,255,255,.66);
  --text-link:var(--auras-blue-ink);
  --text-link-hover:var(--auras-navy);

  --surface-page:var(--n-0);
  --surface-sunken:var(--n-50);
  --surface-card:var(--n-0);
  --surface-raised:var(--n-0);
  --surface-tint:var(--n-100);
  --surface-night:var(--auras-night);

  --border-subtle:var(--n-200);
  --border-default:var(--n-300);
  --border-strong:var(--n-400);
  --border-on-dark:rgba(255,255,255,.22);

  --accent:var(--auras-blue-ink);
  --accent-hover:#3B6DD6;
  --accent-press:#2F5CBC;
  --accent-soft:var(--auras-blue-mist);
  --accent-ink:var(--auras-navy);

  --focus-ring:rgba(76,128,236,.42);

  /* ── Статусы ── */
  --status-success:#2E9E6B;
  --status-success-soft:#E3F5EC;
  --status-warning:#D08700;
  --status-warning-soft:#FCF3DC;
  --status-danger:var(--auras-crimson);
  --status-danger-soft:#FBE9E9;
  --status-info:var(--auras-blue-ink);
  --status-info-soft:var(--n-100);
  --status-sale:var(--auras-crimson-ink);

  /* ── Типографика ── */
  --font-sans:"Poppins","Gilroy","Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-sans);

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  --fs-display-1:64px;
  --fs-display-2:48px;
  --fs-h1:36px;
  --fs-h2:28px;
  --fs-h3:22px;
  --fs-h4:18px;
  --fs-body-lg:17px;
  --fs-body:15px;
  /* Цена в карточке листинга — 16px (выгрузка 19.08): между body (15) и
     body-lg (17), своего размера у дизайн-системы нет. */
  --fs-price:16px;
  --fs-body-sm:13px;
  --fs-caption:12px;
  --fs-micro:11px;

  --lh-tight:1.06;
  --lh-snug:1.2;
  --lh-normal:1.45;
  --lh-relaxed:1.65;

  --ls-display:-0.02em;
  --ls-heading:-0.01em;
  --ls-body:0em;
  --ls-label:0.04em;
  --ls-eyebrow:0.18em;
  --ls-tagline:0.28em;

  --text-display-1:var(--fw-semibold) var(--fs-display-1)/var(--lh-tight) var(--font-display);
  --text-display-2:var(--fw-semibold) var(--fs-display-2)/var(--lh-tight) var(--font-display);
  --text-h1:var(--fw-semibold) var(--fs-h1)/var(--lh-snug) var(--font-display);
  --text-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display);
  --text-h3:var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-display);
  --text-h4:var(--fw-medium) var(--fs-h4)/var(--lh-normal) var(--font-display);
  --text-body-lg:var(--fw-regular) var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans);
  --text-body:var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  --text-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-normal) var(--font-sans);
  --text-label:var(--fw-medium) var(--fs-body-sm)/1.2 var(--font-sans);
  --text-caption:var(--fw-regular) var(--fs-caption)/1.35 var(--font-sans);

  /* ── Отступы ── */
  --sp-0:0px;  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px;
  --sp-10:64px; --sp-11:80px; --sp-12:112px; --sp-13:160px;

  --gutter:24px;
  --page-pad:32px;
  --page-max:1240px;
  --content-max:720px;
  --section-y:96px;
  --section-y-tight:64px;
  --control-h-sm:32px;
  --control-h:44px;
  --control-h-lg:54px;

  /* ── Радиусы ── */
  --r-xs:4px;  --r-sm:8px;  --r-md:12px; --r-lg:16px;
  --r-xl:22px; --r-2xl:28px;
  --r-card:16px; --r-image:20px; --r-pill:999px;

  /* ── Тени: широкие, мягкие, подкрашенные navy ── */
  --sh-hairline:0 0 0 1px var(--border-subtle);
  --sh-1:0 1px 2px rgba(28,34,94,.05), 0 1px 1px rgba(28,34,94,.04);
  --sh-2:0 2px 6px rgba(28,34,94,.06), 0 8px 20px -8px rgba(28,34,94,.10);
  --sh-3:0 4px 12px rgba(28,34,94,.07), 0 18px 40px -14px rgba(28,34,94,.14);
  --sh-4:0 10px 28px rgba(28,34,94,.10), 0 36px 70px -24px rgba(28,34,94,.20);
  --sh-product:0 40px 60px -30px rgba(28,34,94,.28);
  --sh-inset:inset 0 1px 2px rgba(28,34,94,.06);
  --sh-focus:0 0 0 3px var(--focus-ring);
  --blur-glass:saturate(140%) blur(16px);
  --glass-fill:rgba(255,255,255,.72);
  --glass-fill-dark:rgba(11,16,38,.55);

  /* ── Движение ── */
  --dur-instant:90ms;
  --dur-fast:140ms;
  --dur-base:240ms;
  --dur-slow:420ms;
  --dur-wash:900ms;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --t-control:all var(--dur-fast) var(--ease-out);
  --t-surface:all var(--dur-base) var(--ease-out);
  --press-scale:.98;
  --hover-lift:-1px;

  /* ── Текстуры и защитные градиенты ── */
  --tex-watercolor-blue:url("../img/textures/watercolor-blue.webp");
  --tex-watercolor-purple:url("../img/textures/watercolor-purple.webp");
  --tex-watercolor-pink:url("../img/textures/watercolor-pink.webp");
  --tex-watercolor-red:url("../img/textures/watercolor-red.webp");
  --tex-nebula:url("../img/textures/nebula-night.webp");
  --tex-nebula-red:url("../img/textures/nebula-night-red.webp");
  --scrim-bottom:linear-gradient(180deg,rgba(11,16,38,0) 0%,rgba(11,16,38,.72) 100%);
  --scrim-top:linear-gradient(180deg,rgba(11,16,38,.65) 0%,rgba(11,16,38,0) 100%);
  --wash-fade-bottom:linear-gradient(180deg,rgba(255,255,255,0) 40%,#fff 100%);

  /* Линия по умолчанию — «каждый день». */
  --line:var(--auras-navy);
  --line-ink:var(--auras-blue-ink);
  --line-wash:var(--auras-blue-wash);
  --line-mist:var(--auras-blue-mist);
  --line-texture:var(--tex-watercolor-blue);
}

/* Колорвеи — темы данных, не копии вёрстки (design-assets.md §4):
   один набор шаблонов, переключение атрибутом на любом поддереве. */
[data-colorway="wedding"]{
  --line:var(--auras-purple); --line-ink:var(--auras-purple-ink);
  --line-wash:var(--auras-purple-wash); --line-mist:#DEC6FA;
  --line-texture:var(--tex-watercolor-purple);
}
[data-colorway="girls"]{
  --line:var(--auras-pink); --line-ink:var(--auras-pink-ink);
  --line-wash:var(--auras-pink-wash); --line-mist:#F7D7F2;
  --line-texture:var(--tex-watercolor-pink);
}
[data-colorway="bridal"]{
  --line:var(--auras-crimson); --line-ink:var(--auras-crimson-ink);
  --line-wash:var(--auras-crimson-wash); --line-mist:#FBCFD0;
  --line-texture:var(--tex-watercolor-red);
}

@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms;
    --dur-slow:0ms; --dur-wash:0ms;
  }
}

/* ---- 02-screen.css ---- */
/* Экранные токены витрины: размеры и поверхности, которые задаёт макет, но
   которых нет в дизайн-системе. Заводятся здесь, используются ниже —
   design-assets.md §1.

   Брейкпоинты макета: 375 (база) → 430 → 768 → 1200. Mobile-first: базовые
   значения без медиазапроса, дальше только то, что реально меняется. */

:root{
  --au-page-pad:16px;
  --au-header-h:56px;
  --au-header-row:56px;
  /* Герой тянется на высоту экрана (выгрузка 19.08). Именно `dvh`, а не `vh`:
     на телефоне панель браузера при прокрутке меняет высоту вьюпорта, и на
     `vh` кадр дёргается. Ниже 520px герой не сжимается — на низких экранах
     низ ленты уезжает под сгиб, и это подсказывает, что страница продолжается. */
  --au-hero-h:100dvh;
  --au-hero-min:520px;
  /* Затемнение кадра. На телефоне текст лежит внизу — градиент сверху вниз;
     с 768 текст уезжает влево, и градиент вместе с ним. */
  --au-hero-wash:linear-gradient(180deg,rgba(4,8,26,.68) 0%,rgba(4,8,26,.38) 42%,rgba(4,8,26,.58) 100%);
  /* Заливка второй строки заголовка героя — холодный градиент по тексту. */
  --au-hero-accent:linear-gradient(96deg,#DCE8FF 0%,#9FBEFF 46%,#7FA6FF 100%);
  /* Звёзды рейтинга: янтарный, которого в палитре брендбука нет вовсе — она
     холодная, а звёзды во всех макетах тёплые. */
  --au-star:#FFC65C;
  /* Фирменный синий Telegram: кнопка «Написать в Telegram» узнаётся по нему, а
     в палитре брендбука его нет и быть не может — это чужой бренд. */
  --au-tg:#229ED9;
  --au-tg-hover:#1B8CC2;
  /* Navy под курсором. В дизайн-системе такого токена нет — она описывает
     цвета, а не состояния кнопок, и значение разъезжалось по файлам копиями. */
  --au-navy-hover:#151A4B;
  --au-tabbar-h:68px;
  --au-tabbar-item-h:52px;
  --au-section-y:32px;

  --au-grid-products:2;

  --au-fs-hero:29px;
  --au-fs-section:26px;
  /* Имя раздела в каталоге-списке: главная «Бутик» набирает их крупно — 28 на
     телефоне, 56 на широком экране. */
  --au-fs-index:28px;
  --au-fs-eyebrow:11px;

  /* Ширина контента на десктопе; до 1200 контент занимает всю ширину. */
  --au-content-w:100%;

  /* ── Тёмная навигация (выгрузка 19.08) ──────────────────────────────
     Шапка, подвал и таб-бар лежат на одной поверхности: небула под двойным
     затемнением. Значение одно на три элемента намеренно — они видны на
     экране одновременно, и разъехавшийся на процент фон читается как брак
     печати. Меняется тон — меняется в одном месте.

     Текстура повторяет `--tex-nebula` из дизайн-системы, поэтому берётся
     токеном, а не путём: переедет файл — переедет и здесь. */
  --au-nav-bg:linear-gradient(rgba(11,16,38,.82),rgba(11,16,38,.94)),var(--tex-nebula) center/cover;
  --au-nav-fg:#fff;
  /* Неактивное на тёмном: не серый из палитры, а прозрачность — под ней
     просвечивает та же небула, и пункт гаснет, а не пачкается. */
  --au-nav-dim:rgba(255,255,255,.66);
  --au-nav-line:rgba(255,255,255,.14);
  /* Стекло на тёмном: прозрачная пилюля в шапке и панель, которая из неё
     выпадает. Тёмное стекло гуще навигации — под ним лежит фотография
     героя, и на `--au-nav-bg` список языков по ней не читался бы. */
  --au-nav-glass:rgba(255,255,255,.06);
  --au-nav-glass-line:rgba(255,255,255,.3);
  --au-glass-dark:rgba(11,16,38,.92);
  --au-nav-soft:rgba(255,255,255,.12);
  --au-nav-soft-2:rgba(255,255,255,.16);
}

@media (min-width:430px){
  :root{
    --au-page-pad:20px;
    --au-fs-hero:30px;
  }
}

@media (min-width:768px){
  :root{
    --au-page-pad:24px;
    --au-header-h:100px;
    --au-header-row:64px;
    --au-hero-wash:linear-gradient(90deg,rgba(4,8,26,.9) 0%,rgba(4,8,26,.7) 36%,rgba(4,8,26,.14) 66%,rgba(4,8,26,0) 84%);
    --au-section-y:72px;
    --au-tabbar-h:0px;

    --au-grid-products:3;

    --au-fs-hero:36px;
    --au-fs-section:30px;
    --au-fs-index:40px;
    --au-fs-eyebrow:12px;
  }
}

@media (min-width:1200px){
  :root{
    --au-header-h:116px;
    --au-header-row:76px;
    --au-hero-wash:linear-gradient(90deg,rgba(4,8,26,.86) 0%,rgba(4,8,26,.6) 34%,rgba(4,8,26,.5) 62%,rgba(4,8,26,.66) 100%);

    /* Три в ряд и на 1200, и на 1440 — так в выгрузке 19.08; четвёртая
       колонка ужимала карточку до кадра, в котором не читается подпись. */
    --au-grid-products:3;

    --au-fs-hero:46px;
    --au-fs-section:36px;
    --au-fs-index:56px;

    --au-content-w:var(--page-max);
  }
}

/* ---- 03-base.css ---- */
/* Базовый слой дизайн-системы (tokens/base.css) плюс подключение шрифта.

   Gilroy — брендовый, платный, файлы не передавались; подставлен Poppins
   (design-assets.md §3). Self-hosted, CDN запрещён.

   ВАЖНО: у Poppins НЕТ кириллицы — Google Fonts отдаёт только latin,
   latin-ext и devanagari. Витрина русскоязычная, поэтому весь русский текст
   уезжает на системный гротеск из стека `--font-sans`. Латиница (названия
   товаров, `All comfort at home`, узбекская латиница) набирается Poppins.
   Нужен один шрифт на оба алфавита — разбор в themes/auras-wp/README.md. */

@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/poppins-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:"Poppins";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/poppins-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:"Poppins";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/poppins-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:"Poppins";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Витрина светлая и тёмной темы не имеет. Без объявления схемы Chrome в
   системной тёмной теме заливает холст кроссдоменных iframe (виджет входа
   Telegram) тёмным — вокруг кнопки появляется чёрная рамка. */
:root{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font:var(--text-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;color:var(--text-strong)}
h1{font:var(--text-h1);letter-spacing:var(--ls-heading)}
h2{font:var(--text-h2);letter-spacing:var(--ls-heading)}
h3{font:var(--text-h3)}
h4{font:var(--text-h4)}
p{margin:0 0 var(--sp-4)}

a{color:var(--text-link);text-decoration:none;transition:var(--t-control)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
a:active{color:var(--accent-press)}

:focus-visible{outline:none;box-shadow:var(--sh-focus)}
img{max-width:100%;display:block}
::selection{background:var(--accent-soft);color:var(--auras-navy)}

.auras-eyebrow{
  font:var(--text-caption);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}
.auras-tagline{
  font-weight:var(--fw-light);
  letter-spacing:var(--ls-tagline);
  text-transform:uppercase;
}

/* Иконка — маска по currentColor, как Icon.jsx в дизайн-системе, но спрайт
   self-hosted (assets/img/icons.svg), а не с CDN Lucide. */
.auras-i{
  display:inline-block;
  width:20px;
  height:20px;
  flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
/* Размерных классов ровно столько, сколько зовёт PHP: `auras_icon( 'x', 24 )`
   печатает `auras-i--24`, и без правила значок молча становится базовым 20px —
   ошибки нет, просто другой размер. Сторожит `make icons-check`. */
.auras-i--10{width:10px;height:10px}
.auras-i--12{width:12px;height:12px}
.auras-i--14{width:14px;height:14px}
.auras-i--16{width:16px;height:16px}
.auras-i--18{width:18px;height:18px}
.auras-i--20{width:20px;height:20px}
.auras-i--22{width:22px;height:22px}
.auras-i--24{width:24px;height:24px}
.auras-i--32{width:32px;height:32px}

/* Ссылка-«всё направо» у заголовков секций. */
.auras-more{
  font:var(--text-body-sm);
  font-weight:var(--fw-medium);
  font-size:var(--fs-body);
  color:var(--auras-blue-ink);
  flex:0 0 auto;
  white-space:nowrap;
}

.auras-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---- 04-components.css ---- */
/* Компоненты дизайн-системы. Классы `au-*` сохраняют имена оригинала
   (design-assets.md §1) — переименование порвало бы связь со следующей
   итерацией макета. Собственные классы темы идут с префиксом `auras-`. */

/* ── Кнопки ─────────────────────────────────────────────────────────────
   Утверждено в HANDOFF: primary — сплошной navy, градиентом не заливать.
   Перелив только на accent (акция, звонок, кнопка на тёмном) и контуром на
   secondary. */

.au-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font:var(--text-body);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-body);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:var(--t-control);
  white-space:nowrap;
  text-decoration:none;
  height:var(--control-h);
  padding:0 var(--sp-6);
}
.au-btn:hover{text-decoration:none}
.au-btn--sm{height:var(--control-h-sm);padding:0 var(--sp-4);font:var(--text-body-sm);font-weight:var(--fw-medium)}
.au-btn--lg{height:var(--control-h-lg);padding:0 var(--sp-8);font:var(--text-body-lg);font-weight:var(--fw-medium)}
.au-btn--block{width:100%}
.au-btn:active:not(:disabled){transform:scale(var(--press-scale))}
.au-btn:disabled{opacity:.42;cursor:not-allowed;transform:none}

.au-btn--primary{background:var(--auras-navy);color:var(--n-0)}
.au-btn--primary:hover:not(:disabled){background:#151A4B;box-shadow:var(--sh-2);transform:translateY(var(--hover-lift));color:var(--n-0)}

.au-btn--accent{
  background-image:linear-gradient(112deg,var(--auras-purple) 0%,var(--auras-pink) 52%,var(--auras-crimson) 100%);
  color:var(--n-0);
  border-color:transparent;
}
.au-btn--accent:hover:not(:disabled){
  background-image:linear-gradient(112deg,#9A3FD8 0%,#F44BA6 52%,#8E0000 100%);
  box-shadow:var(--sh-2);
  transform:translateY(var(--hover-lift));
  color:var(--n-0);
}

/* Белая заливка + градиентный контур: два фоновых слоя с разным clip. */
.au-btn--secondary{
  color:var(--auras-navy);
  border-color:transparent;
  background-image:linear-gradient(var(--n-0),var(--n-0)),
                   linear-gradient(112deg,var(--auras-purple) 0%,var(--auras-pink) 100%);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.au-btn--secondary:hover:not(:disabled){
  color:var(--auras-navy);
  background-image:linear-gradient(var(--n-50),var(--n-50)),
                   linear-gradient(112deg,#9A3FD8 0%,#F44BA6 100%);
}

.au-btn--ghost{background:transparent;color:var(--auras-navy)}
.au-btn--ghost:hover:not(:disabled){background:var(--n-100);color:var(--auras-navy)}
.au-btn--soft{background:var(--line-mist);color:var(--auras-navy)}
.au-btn--soft:hover:not(:disabled){background:var(--line-wash);color:var(--auras-navy)}

.au-btn--onDark{
  background:rgba(255,255,255,.12);
  color:var(--n-0);
  border-color:var(--border-on-dark);
  -webkit-backdrop-filter:var(--blur-glass);
  backdrop-filter:var(--blur-glass);
}
.au-btn--onDark:hover:not(:disabled){background:rgba(255,255,255,.2);color:var(--n-0)}

/* ── Значки ─────────────────────────────────────────────────────────────
   Каждый смысл — своя пара цветов линии (утверждено в HANDOFF). */

.au-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  height:24px;
  padding:0 var(--sp-3);
  border-radius:var(--r-pill);
  font:var(--text-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--n-0);
  border:1px solid transparent;
}
.au-badge--sale{background-image:linear-gradient(116deg,var(--auras-pink) 0%,var(--auras-crimson) 100%)}
.au-badge--soft{background-image:linear-gradient(116deg,var(--auras-purple) 0%,var(--auras-pink) 100%)}
.au-badge--line{background-image:linear-gradient(116deg,var(--auras-navy) 0%,var(--auras-purple) 100%)}
.au-badge--neutral{background-image:linear-gradient(116deg,var(--auras-navy) 0%,var(--auras-blue-ink) 100%)}
.au-badge--info{background:var(--status-info-soft);color:var(--auras-navy)}
.au-badge--success{background:var(--status-success-soft);color:var(--status-success)}
.au-badge--warning{background:var(--status-warning-soft);color:var(--status-warning)}
.au-badge--onDark{
  background:rgba(255,255,255,.16);
  color:var(--n-0);
  -webkit-backdrop-filter:var(--blur-glass);
  backdrop-filter:var(--blur-glass);
}

/* ── Цена и рейтинг ─────────────────────────────────────────────────── */

.au-price{display:inline-flex;align-items:baseline;gap:var(--sp-2);white-space:nowrap;flex-wrap:wrap}
.au-price__now{font:var(--text-h3);font-weight:var(--fw-semibold);color:var(--text-strong);letter-spacing:var(--ls-heading)}
.au-price--sm .au-price__now{font:var(--text-body-lg);font-weight:var(--fw-semibold)}
.au-price--lg .au-price__now{font:var(--text-h1);font-weight:var(--fw-semibold)}
.au-price__was{font:var(--text-body-sm);color:var(--text-faint);text-decoration:line-through}
.au-price__cur{font:var(--text-body-sm);color:var(--text-muted)}

.au-rate{display:inline-flex;align-items:center;gap:var(--sp-2);font:var(--text-body-sm);color:var(--text-muted)}
.au-rate__stars{position:relative;display:inline-block;color:var(--n-300);letter-spacing:1px;line-height:1}
.au-rate__fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#F2B231}

/* ── Карточка товара ────────────────────────────────────────────────── */

/* Карточка листинга (выгрузка 19.08) — ПЛОСКАЯ: ни рамки, ни радиуса, ни тени.
   Прежняя карточка была белой в рамке с вырезанным рендером на акварели; новая
   стоит на своей тональной подложке, а фотография кроет кадр целиком. Тона
   чередуются — так карточки в сетке макета не сливаются в одно полотно.

   Пропорция кадра 3:4 — и в каталоге, и в поиске, и в галерее товара. Из неё
   же считается размер миниатюры WooCommerce (`auras_thumbnail_ratio`,
   inc/woocommerce.php): вёрстка здесь первична, а не настройка магазина. */
.au-pc{
  display:flex;
  flex-direction:column;
  background:var(--n-25);
  min-width:0;
}
.au-pc:nth-of-type(3n+2){background:var(--tone-sand)}
.au-pc:nth-of-type(3n){background:var(--tone-sky)}

.au-pc__media{position:relative;aspect-ratio:3/4;overflow:clip;display:block}
/* `cover`, а не `contain` с полями: в макете это фотография товара в интерьере,
   а не вырезанный рендер на подложке. Кадр 3:4 приходит из WooCommerce уже
   обрезанным (`woocommerce_thumbnail`), лишнее срежет `overflow:clip`. */
.au-pc__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.au-pc:hover .au-pc__media img{transform:scale(1.03)}
.au-pc__tags{position:absolute;top:var(--sp-3);left:var(--sp-3);display:flex;gap:var(--sp-2)}
.au-pc__fav{position:absolute;top:var(--sp-2);right:var(--sp-2)}

.au-pc__b{padding:18px;display:flex;flex-direction:column;gap:5px}
.au-pc__name{
  font-size:var(--fs-body-lg);
  font-weight:var(--fw-medium);
  letter-spacing:-.01em;
  line-height:1.25;
  color:var(--text-strong);
}
.au-pc__name:hover{text-decoration:none;color:var(--text-strong)}
.au-pc__meta{font:var(--text-body-sm);color:var(--n-500)}
/* Цена отбита от подписи, как в макете, и распродажная — кримсоном бренда. */
.au-pc .au-price{padding-top:4px}
.au-pc .au-price ins,
.au-pc .au-price > .woocommerce-Price-amount{font-size:var(--fs-price)}
.au-pc .au-price ins{color:var(--auras-crimson)}
.au-pc .au-price del{font-size:var(--fs-body-sm);color:var(--n-400)}

/* ── Тег: активный фильтр в каталоге ────────────────────────────────── */

.au-tag{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  height:32px;
  padding:0 var(--sp-4);
  border-radius:var(--r-pill);
  border:1px solid var(--border-subtle);
  background:var(--n-0);
  color:var(--text-body);
  font:var(--text-body-sm);
  cursor:pointer;
  transition:var(--t-control);
  white-space:nowrap;
}
.au-tag:hover{border-color:var(--border-default);background:var(--n-50);text-decoration:none;color:var(--text-body)}
.au-tag[aria-pressed="true"]{background:var(--auras-navy);border-color:var(--auras-navy);color:var(--n-0)}
.au-tag__x{display:inline-flex;opacity:.55}
.au-tag:hover .au-tag__x{opacity:1}

/* ── Чекбокс: грань фасетного фильтра ───────────────────────────────── */

.au-check{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  cursor:pointer;
  font:var(--text-body);
  color:var(--text-body);
  min-height:var(--control-h);
}
.au-check input{
  appearance:none;
  -webkit-appearance:none;
  width:20px;height:20px;
  flex:0 0 auto;
  margin:0;
  border:1px solid var(--border-default);
  border-radius:var(--r-xs);
  background:var(--n-0);
  transition:var(--t-control);
  cursor:pointer;
  position:relative;
}
.au-check input:hover{border-color:var(--border-strong)}
.au-check input:checked{background:var(--auras-navy);border-color:var(--auras-navy)}
.au-check input:checked::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--n-0);
  clip-path:polygon(19% 52%,32% 40%,45% 53%,69% 28%,81% 40%,45% 76%);
}
.au-check input:focus-visible{box-shadow:var(--sh-focus)}
.au-check input:disabled{background:var(--n-100);border-color:var(--border-subtle);cursor:not-allowed}
.au-check--disabled{color:var(--text-faint);cursor:not-allowed}
.au-check__count{margin-left:auto;color:var(--text-faint);font:var(--text-caption)}

/* ── Список свойств ─────────────────────────────────────────────────── */

.au-feat{display:grid;gap:var(--sp-4)}
.au-feat--row{grid-auto-flow:column;grid-auto-columns:max-content}
.au-feat__i{display:flex;align-items:center;gap:var(--sp-3)}
.au-feat__ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  flex:0 0 auto;
  border-radius:var(--r-sm);
  background:var(--line-mist);
  color:var(--line-ink);
}
.au-feat__t{font:var(--text-body-sm);font-weight:var(--fw-medium);color:var(--text-strong);line-height:1.25}
.au-feat--onDark .au-feat__ico{background:rgba(255,255,255,.14);color:var(--n-0)}
.au-feat--onDark .au-feat__t{color:var(--n-0)}

/* Компоненты, добавленные под экран карточки товара. Перенесены из
   `_ds_bundle.js` дизайн-системы один в один — руками не переписаны
   (design-assets.md §1). */

.au-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-card);overflow:hidden;transition:var(--t-surface)}
.au-card--flat{box-shadow:none}
.au-card--raised{border-color:transparent;box-shadow:var(--sh-2)}
.au-card--wash{border-color:transparent;background:var(--line-mist)}
.au-card--interactive{cursor:pointer}
.au-card--interactive:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
.au-card__body{padding:var(--sp-6)}
.au-card__media{background:var(--n-50);display:block}
.au-card__media img{width:100%;height:100%;object-fit:cover}

.au-ib{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-pill);cursor:pointer;transition:var(--t-control);background:transparent;color:var(--auras-navy);width:var(--control-h);height:var(--control-h);padding:0}
.au-ib--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.au-ib--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.au-ib:hover:not(:disabled){background:var(--n-100)}
.au-ib:active:not(:disabled){transform:scale(var(--press-scale))}
.au-ib:disabled{opacity:.42;cursor:not-allowed}
.au-ib--outline{border-color:var(--border-subtle);background:var(--n-0)}
.au-ib--outline:hover:not(:disabled){border-color:var(--border-default);box-shadow:var(--sh-1)}
.au-ib--solid{background:var(--auras-navy);color:var(--n-0)}
.au-ib--solid:hover:not(:disabled){background:#151A4B}
.au-ib--onDark{color:var(--n-0)}
.au-ib--onDark:hover:not(:disabled){background:rgba(255,255,255,.16)}
.au-ib[data-active="true"]{color:var(--line-ink)}

.au-step{display:inline-flex;align-items:center;border:1px solid var(--border-default);border-radius:var(--r-pill);height:var(--control-h);overflow:hidden;background:var(--n-0)}
.au-step button{all:unset;display:inline-flex;align-items:center;justify-content:center;width:40px;height:100%;cursor:pointer;color:var(--auras-navy);font-size:16px;transition:var(--t-control)}
.au-step button:hover{background:var(--n-100)}
.au-step button:disabled{color:var(--text-faint);cursor:not-allowed;background:transparent}
.au-step__val{min-width:32px;text-align:center;font:var(--text-body);font-weight:var(--fw-medium);color:var(--text-strong)}

.au-crumb{display:flex;align-items:center;gap:var(--sp-2);font:var(--text-body-sm);color:var(--text-muted);flex-wrap:wrap}
.au-crumb a{color:var(--text-muted);text-decoration:none}
.au-crumb a:hover{color:var(--auras-navy);text-decoration:underline;text-underline-offset:3px}
.au-crumb__sep{color:var(--text-faint)}
.au-crumb__cur{color:var(--text-strong)}

.au-tabs{display:flex;gap:var(--sp-6);border-bottom:1px solid var(--border-subtle)}
.au-tabs__t{all:unset;cursor:pointer;padding:0 0 var(--sp-3);font:var(--text-body);font-weight:var(--fw-medium);color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--t-control)}
.au-tabs__t:hover{color:var(--text-strong)}
.au-tabs__t[aria-selected="true"]{color:var(--auras-navy);border-bottom-color:var(--line)}

/* ---- 05-header.css ---- */
/* Шапка магазина: общая часть и телефонный вид.

   Промо-полосы больше нет — выгрузка 19.08 убрала её на всех ширинах.

   ШАПКА ТЁМНАЯ с той же выгрузки: она, подвал и таб-бар лежат на общей
   поверхности `--au-nav-bg` (02-screen.css). Стеклянная белая заливка снята —
   логотип берётся в белом варианте, значки и текст белые. */

/* Разметочная обвязка classic (`#wrapper > .container > .row`) остаётся вокруг
   нашего контента: переопределять её целиком — молчаливый форк родителя
   (code-style.md §2). Гасим только поля и ограничение ширины, чтобы герой,
   анатомия и шоурум шли во всю ширину экрана. Bootstrap в дочерней теме не
   грузится, но правило страхует на случай, если его подключат. */
#wrapper > .container,
#wrapper > .container > .row{
  max-width:none;
  width:auto;
  margin:0;
  padding:0;
}
#content-wrapper{padding:0;width:100%;max-width:none;flex:1 1 100%}

/* ── Шапка: общая часть и телефонный вид ────────────────────────────

   Десктопный вид — в `05b-header-desktop.css`: с 768 шапка становится
   двухстрочной, и её правила в один файл с этими уже не помещаются
   (code-style.md §1). */

/* Фон живёт на СТРОКАХ, а не на шапке: с 768 липнет только основная строка,
   и под ней должна ехать своя тёмная поверхность — на общем фоне шапки
   прилипшая строка была бы прозрачной. */
.auras-header{
  position:relative;
  display:flex;
  flex-direction:column;
  color:var(--au-nav-fg);
}
.auras-header__main{
  height:var(--au-header-row);
  background:var(--au-nav-bg);
  border-bottom:1px solid var(--au-nav-line);
  padding-inline:var(--au-page-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
}
.auras-header__logo img{height:26px;width:auto;display:block}
.auras-header__actions{display:flex;align-items:center;gap:2px}

/* Тач-цели не меньше 44×44 — правило адаптации из HANDOFF.

   Цвет — `inherit`, а не свой: класс общий, и та же кнопка стоит на тёмной
   шапке, на тёмной шторке меню и на светлых шторках города и оператора.
   Прибитый белый погасил бы крестик на светлой панели. */
.auras-tap{
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  position:relative;
}
/* Счётчики шапки. Бейдж корзины носит СВОЙ класс: селектор фрагмента
   WooCommerce заменяет все совпадения разом, и общий класс со счётчиком
   сравнения ронял бы на него разметку корзины (inc/cart.php). */
.auras-header__count,
.auras-header__cart-count{
  position:absolute;
  top:6px;right:4px;
  min-width:16px;height:16px;
  padding:0 4px;
  border-radius:var(--r-pill);
  background:var(--au-nav-fg);
  color:var(--auras-navy);
  font-size:10px;
  font-weight:var(--fw-semibold);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Пустую корзину прячет `.is-empty` — класс приезжает из вывода WooCommerce,
   поэтому правило живёт в 11-wordpress.css (design-assets.md §1a). */

/* ── Пилюля выбора языка ────────────────────────────────────────────

   Мобильная шапка главной (выгрузка 19.08). `<details>` вместо кнопки со
   скриптом: список открывается и без JS. С 768 пилюли нет — там сегменты в
   служебной строке (05b-header-desktop.css). */
.auras-langpill{
  position:relative;
  flex:0 0 auto;
  height:44px;
  display:flex;
  align-items:center;
  margin-inline-start:-6px;
}
.auras-langpill__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  height:34px;
  min-width:44px;
  padding-inline:var(--sp-3);
  border-radius:var(--r-pill);
  border:1px solid var(--au-nav-glass-line);
  background:var(--au-nav-glass);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--au-nav-fg);
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  cursor:pointer;
  transition:var(--t-control);
  /* Тач-цель — вся высота обёртки (44px), видимый размер пилюли меньше. */
  list-style:none;
}
/* Треугольник `<summary>` рисуют по-разному: WebKit — своим псевдоэлементом,
   он не гасится `list-style` и лезет поверх пилюли. */
.auras-langpill__toggle::-webkit-details-marker{display:none}
.auras-langpill[open] .auras-langpill__toggle{border-color:rgba(255,255,255,.5);background:var(--au-nav-soft)}

.auras-langpill__menu{
  position:absolute;
  inset-inline-start:0;
  top:47px;
  min-width:132px;
  padding:6px;
  border-radius:var(--r-lg);
  border:1px solid var(--au-nav-soft-2);
  background:var(--au-glass-dark);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:var(--sh-4);
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:4;
}
.auras-langpill__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  height:44px;
  padding-inline:var(--sp-3);
  border-radius:var(--r-md);
  color:var(--au-nav-dim);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
}
.auras-langpill__item:hover{background:var(--au-nav-soft);text-decoration:none}
.auras-langpill__item.is-active{
  background:var(--au-nav-soft);
  color:var(--au-nav-fg);
  font-weight:var(--fw-semibold);
}

/* До 768 в шапке остаются логотип и телефон, всё остальное живёт в таб-баре и
   шторке (выгрузка 19.08): бургер — первый пункт таб-бара, поиск — таб
   «Каталог», сравнение и избранное — пункты шторки, корзина и профиль — свои
   пункты. Служебной строки на телефоне нет вовсе: город уехал первым пунктом
   шторки, язык — её низом, служебные страницы — в подвал. */
.auras-header__service,
.auras-header__burger,
.auras-header__rule,
.auras-header__nav,
.auras-header__search,
.auras-header__search-open,
.auras-header__cart-wide,
.auras-header__account{display:none}

/* ---- 05a-drawer.css ---- */
/* Шторка бургера — экран «M · Меню» макета.

   Панель тёмная: так она нарисована в макете с самого начала, но пока шапка
   была белой, светлая шторка из неё не выбивалась и осталась светлой. С
   выгрузкой 19.08 навигация стала тёмной целиком, и белая панель из-под неё
   выехала бы вспышкой. Поверхность общая с шапкой, подвалом и таб-баром —
   `--au-nav-bg` (02-screen.css).

   Отдельным файлом от `05-header.css`: тот упёрся в soft cap 300 строк
   (code-style.md §1). Литера в номере, а не следующий свободный номер, — чтобы
   файл собирался сразу за шапкой: `build-theme.sh` склеивает `_dev/css/*.css` в
   алфавитном порядке, и правила шторки должны идти после правил шапки. */

/* ── Шторка бургера ─────────────────────────────────────────────────── */

.auras-drawer{
  position:fixed;
  inset:0;
  z-index:60;
  visibility:hidden;
}
.auras-drawer[aria-hidden="false"]{visibility:visible}
.auras-drawer__scrim{
  position:absolute;
  inset:0;
  background:rgba(28,34,94,.42);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.auras-drawer__panel{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:min(320px,86vw);
  background:var(--au-nav-bg);
  color:var(--au-nav-fg);
  box-shadow:var(--sh-4);
  transform:translateX(-100%);
  transition:transform var(--dur-base) var(--ease-out);
  display:flex;
  flex-direction:column;
  /* Прокручивается тело шторки, а не панель целиком (`__body` ниже): шапка с
     городом и низ с контактами обязаны стоять на месте. Двух скроллеров на
     одном узле быть не должно — внутренний перестаёт доезжать до конца. */
  overflow:hidden;
  padding:var(--sp-5);
  gap:var(--sp-2);
}
.auras-drawer[aria-hidden="false"] .auras-drawer__scrim{opacity:1}
.auras-drawer[aria-hidden="false"] .auras-drawer__panel{transform:translateX(0)}
.auras-drawer__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--sp-4);
  flex:0 0 auto;
}
.auras-drawer__head img{height:26px;width:auto;margin-inline-end:auto}

/* Тело шторки прокручивается, шапка с городом и низ с контактами стоят на
   месте: список разделов у заказчика может стать длинным, и уезжающая вместе с
   ним кнопка звонка находится только в самом низу. */
.auras-drawer__body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-6)}
.auras-drawer__group{display:flex;flex-direction:column}
.auras-drawer__eyebrow{
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  padding-bottom:var(--sp-2);
}
.auras-drawer__foot{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--au-nav-line);
}
/* Список сбрасываем целиком: у шторки reset стоит только на `.auras-drawer__nav
   ul`, а `li` во flex-контейнере остаётся list-item — маркер никуда не девается
   и рисуется рядом с иконками. Перенос — на случай, когда соцсетей станет
   больше, чем влезает в узкую шторку. */
.auras-drawer__socials{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.auras-drawer__socials li{margin:0}
.auras-drawer__socials a{
  width:44px;height:44px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.24);
  background:var(--au-nav-soft);
  color:var(--au-nav-fg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--t-control);
}
.auras-drawer__socials a:hover{background:rgba(255,255,255,.2);color:var(--au-nav-fg)}

/* На телефоне шторка — основное меню, кружки держим на 44px под палец;
   на десктопе мышью хватает компактных 40px, как в подвале. */
@media (min-width:768px){
  .auras-drawer__socials a{width:40px;height:40px}
}
.auras-drawer__phone{
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  color:var(--au-nav-fg);
}
.auras-drawer__address{font-size:var(--fs-body-sm);line-height:1.5;color:var(--au-nav-dim)}
.auras-drawer__link{
  display:flex;
  align-items:center;
  min-height:var(--control-h);
  padding:var(--sp-3) 0;
  border-top:1px solid var(--au-nav-line);
  color:var(--au-nav-fg);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
}
.auras-drawer__link:hover{text-decoration:none;color:var(--au-nav-fg)}
/* Избранное и сравнение переехали в шторку из таб-бара и шапки: число
   проставляет JS из cookie, узел до этого скрыт атрибутом `hidden`. */
.auras-drawer__count{
  margin-inline-start:auto;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--au-nav-soft-2);
  color:var(--au-nav-fg);
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Бейдж корзины в шторке — тот же кружок, что у счётчиков списков. */
.auras-drawer__cart-count{
  margin-inline-start:auto;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--au-nav-soft-2);
  color:var(--au-nav-fg);
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Разметку переключателя собирает inc/i18n.php, поэтому
   флекс висит на его собственном контейнере, а не на обёртке темы: между
   обёрткой и ссылками стоит <nav> модуля. */
.auras-lang{display:flex;align-items:center;gap:var(--sp-2)}
.auras-header__lang .auras-lang{gap:0}
/* Переключатель в шапке шторки — та же сегментная пилюля, что в служебной
   строке десктопной шапки (выгрузка 19.08), а не отдельные крупные кнопки:
   рядом с логотипом и крестиком место одно.

   ВЫСОТА 44, А НЕ 34 ИЗ МАКЕТА. Макет рисует здесь десктопный сегмент с
   тач-целью 22px, а это телефон: правило адаптации из HANDOFF требует 44
   (DESIGN-NOTES.md). Прозрачным паддингом, как у точек героя, тут не обойтись —
   у пилюли своя заливка и обводка, и они выросли бы вместе с целью. */
.auras-drawer__lang{
  display:flex;
  align-items:center;
  background:var(--au-nav-glass);
  border:1px solid var(--au-nav-soft-2);
  border-radius:var(--r-pill);
}
.auras-drawer__lang .auras-lang{gap:0}
.auras-drawer__lang .auras-lang__item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--control-h);
  /* Круг, а не овал: ширину задаёт не текст, а высота тач-цели —
     иначе «RU»/«UZ» шире «EN» и пилюли получаются разной формы. */
  aspect-ratio:1;
  padding-inline:0;
  border-radius:var(--r-pill);
  color:var(--au-nav-dim);
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
}
.auras-drawer__lang .auras-lang__item:hover{text-decoration:none}
.auras-drawer__lang .auras-lang__item.is-active{background:var(--au-nav-fg);color:var(--auras-navy)}

/* Навигация в шторке — вывод wp_nav_menu, приводим его разметку к виду
   пунктов меню, а не переопределяем шаблон чужого модуля. */
.auras-drawer__nav ul{list-style:none;margin:0;padding:0}
.auras-drawer__nav li > ul{padding-inline-start:var(--sp-4)}
.auras-drawer__nav a{
  display:flex;
  align-items:center;
  min-height:var(--control-h);
  padding:var(--sp-3) 0;
  border-top:1px solid var(--au-nav-line);
  color:var(--au-nav-fg);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
}
.auras-drawer__nav a:hover{text-decoration:none;color:var(--au-nav-fg)}
.auras-drawer__nav li > ul a{font-weight:var(--fw-regular);color:var(--au-nav-dim);font-size:14px}

/* ---- 05b-header-desktop.css ---- */
/* Десктопная шапка в две строки («Шапка · десктоп», выгрузка 19.08).

   Литера в номере держит правила рядом с `05-header.css`, где живёт общая
   часть и телефонный вид: build-theme.sh склеивает `_dev/css/*.css` по
   алфавиту, и `05b` идёт следом за базовым файлом, а не в конец сборки
   (design-assets.md §1a).

   Строк две: служебная (город, служебные страницы, язык) и основная (бургер,
   логотип, разделы каталога, поиск, значки). Высоты две и токена тоже два:
   `--au-header-h` — обе строки, на неё сдвигается герой на главной;
   `--au-header-row` — одна основная, она липкая, и от неё считаются отступы
   всего, что должно под ней останавливаться (колонка фильтров в каталоге).

   Поиск не живёт рядом с разделами, а встаёт на их место по кнопке — так
   нарисовано в макете. Класс `is-search` вешает `nav.js`; без JS кнопки поиска
   просто нет (она `hidden` до инициализации), а поле остаётся доступным на
   отдельной странице поиска. */

@media (min-width:768px){
  /* Липкая шапка — решение заказчика 2026-08-17, отступление от макета: в
     HANDOFF перечислены липкие панели (покупка, итог корзины и оформления) и
     шапки среди них нет.

     Только с 768 и намеренно: до этого в шапке лишь логотип и телефон, снизу
     висит таб-бар, и приклеенная шапка съела бы у телефона вторую полосу
     экрана ради кнопок, которые уже есть внизу.

     z-index ниже шторки бургера (60), выше контента. Фон у шапки
     непрозрачный — тёмная небула, сквозь неё контент не просвечивает. */
  /* Липнет ОДНА строка — основная, с логотипом, разделами и поиском.
     Служебная уезжает вверх вместе со страницей: город и служебные ссылки
     нужны при заходе, а не постоянно, и вторая полоса поверх экрана съедала
     бы высоту зря. */
  /* Липкая — шапка целиком, но поднятая на высоту служебной строки: та
     уезжает за верхний край, а основная останавливается ровно на нуле.
     Сделать липкой саму строку нельзя — `sticky` ездит внутри своего
     родителя, а родитель здесь высотой в две строки и уходит вместе с ней. */
  .auras-header{position:sticky;top:calc(var(--au-header-row) - var(--au-header-h));z-index:50}
  .auras-header__service{background:var(--au-nav-bg)}

  /* ── Служебная строка ─────────────────────────────────────────────── */

  .auras-header__service{
    height:36px;
    padding-inline:var(--au-page-pad);
    display:flex;
    align-items:center;
    gap:18px;
    border-bottom:1px solid var(--au-nav-line);
    font-size:12px;
    color:var(--au-nav-dim);
  }
  .auras-header__city{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:0;
    background:none;
    font:inherit;
    font-weight:var(--fw-semibold);
    color:var(--au-nav-fg);
    cursor:pointer;
  }
  .auras-header__city-caret{color:rgba(255,255,255,.55);font-weight:var(--fw-regular)}
  .auras-header__sep{width:1px;height:14px;background:var(--au-nav-soft-2);flex:0 0 auto}
  .auras-header__service-link{color:inherit}
  .auras-header__service-link:hover{color:var(--au-nav-fg);text-decoration:none}
  /* «О бренде» на 768–1199 в макете нет: строка не влезает. */
  .auras-header__service-link--o-brende{display:none}

  /* Пилюля языка — телефонная: с 768 язык живёт сегментами в служебной
     строке, и два переключателя разом на экране были бы дублем. */
  .auras-langpill{display:none}

  .auras-header__lang{
    margin-inline-start:auto;
    display:flex;
    align-items:center;
    background:var(--au-nav-glass);
    border:1px solid var(--au-nav-soft-2);
    border-radius:var(--r-pill);
    padding:2px;
    font-size:11px;
    font-weight:var(--fw-semibold);
  }
  /* Круг, а не овал: высота задаётся min-height, ширина подтягивается к ней
     через aspect-ratio — горизонтальный паддинг сделал бы форму зависимой от
     длины подписи. */
  .auras-header__lang .auras-lang__item{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    aspect-ratio:1;
    padding:0;
    border-radius:var(--r-pill);
    color:var(--au-nav-dim);
  }
  .auras-header__lang .auras-lang__item:hover{text-decoration:none}
  /* Выбранный язык — белая пилюля с navy-текстом. Тени под ней нет: на
     тёмном фоне она не читается, а в макете её и не рисуют. */
  .auras-header__lang .auras-lang__item.is-active{background:var(--au-nav-fg);color:var(--auras-navy)}

  /* ── Основная строка ──────────────────────────────────────────────── */

  .auras-header__main{
    justify-content:flex-start;
    gap:16px;
  }
  .auras-header__burger{display:flex;margin-inline-start:-10px;flex:0 0 44px}
  .auras-header__logo img{height:28px}
  .auras-header__rule{display:block;width:1px;height:22px;background:var(--au-nav-soft-2);flex:0 0 auto}

  .auras-header__nav{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    font-size:11px;
    font-weight:var(--fw-semibold);
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:nowrap;
    /* Разделов у заказчика может стать больше, чем влезает: на этих ширинах
       строка едет вбок, а не переносится второй — перенос сломал бы высоту
       шапки, на которую опирается герой. */
    overflow-x:auto;
    scrollbar-width:none;
  }
  .auras-header__nav::-webkit-scrollbar{display:none}
  .auras-header__section{
    color:var(--au-nav-fg);
    border-bottom:2px solid transparent;
    padding-bottom:3px;
  }
  .auras-header__section:hover{text-decoration:none;border-bottom-color:var(--au-nav-soft-2)}
  .auras-header__section.is-active{border-bottom-color:var(--au-nav-fg)}
  /* «Наборы» — не раздел каталога, а конструктор набора, и в макете он выделен
     розовым (см. `auras_header_sections()`). */
  .auras-header__section.is-accent{color:var(--auras-pink)}
  .auras-header__section.is-accent.is-active{border-bottom-color:var(--auras-pink)}

  /* Кнопку поиска показывает JS (снимает `hidden`): раскрывать поле без него
     нечем. Правило нужно потому, что классовый селектор перебивает штатное
     `[hidden]{display:none}` браузера. */
  .auras-header__search-open{display:flex}
  .auras-header__search-open[hidden]{display:none}
  .auras-header__cart-wide,
  .auras-header__account{display:flex}
  .auras-header__actions{gap:6px;flex:0 0 auto;margin-inline-start:auto}

  .auras-header__account{
    width:34px;height:34px;
    border-radius:var(--r-pill);
    background:var(--au-nav-soft-2);
    border:1px solid rgba(255,255,255,.3);
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:var(--fw-semibold);
    color:var(--au-nav-fg);
    margin-inline-end:-4px;
  }
  .auras-header__account:hover{text-decoration:none;color:var(--au-nav-fg)}

  /* ── Раскрытый поиск ──────────────────────────────────────────────── */

  .auras-header.is-search .auras-header__nav,
  .auras-header.is-search .auras-header__search-open{display:none}
  .auras-header.is-search .auras-header__search{
    display:flex;
    flex:1;
    min-width:0;
    height:48px;
    align-items:center;
    gap:12px;
    padding-inline:20px;
    border-radius:var(--r-pill);
    border:2px solid rgba(255,255,255,.5);
    background:var(--au-nav-soft);
    font-size:16px;
    color:var(--au-nav-fg);
  }
  .auras-header__search-ic{display:flex;align-items:center;flex:0 0 auto}
  .auras-header__search input[type="search"]{
    flex:1;
    min-width:0;
    padding:0;
    border:0;
    background:none;
    outline:none;
    font:inherit;
    color:var(--au-nav-fg);
  }
  .auras-header__search input[type="search"]::placeholder{color:var(--au-nav-dim)}
  /* Кольцо фокуса дизайн-системы (`03-base.css`) обводило голое поле внутри
     пилюли — синий прямоугольник в прямоугольнике. Индикатор остаётся, но им
     служит сама пилюля: её контур становится сплошным белым. */
  .auras-header__search input[type="search"]:focus-visible{box-shadow:none}
  .auras-header.is-search .auras-header__search:focus-within{
    border-color:var(--au-nav-fg);
    box-shadow:none;
  }
  /* Крестик очистки в WebKit ломает пилюлю — у поля своя рамка и свой крестик. */
  .auras-header__search input[type="search"]::-webkit-search-cancel-button{display:none}
  .auras-header__search-go{
    flex:0 0 auto;
    padding:0;
    border:0;
    background:none;
    font-size:14px;
    color:var(--au-nav-dim);
    cursor:pointer;
  }
  .auras-header__search-go:hover{color:var(--au-nav-fg)}
  .auras-header__search-x{
    flex:0 0 auto;
    width:32px;height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:var(--r-pill);
    background:var(--au-nav-soft-2);
    color:var(--au-nav-fg);
    cursor:pointer;
  }
}

@media (min-width:1200px){
  /* Поля строк тянутся до колонки 1240 из макета: на 1440 это ровно те 100px,
     что нарисованы, на 1200 — минимальные 40. Общий `--au-page-pad` для этого
     не годится — он задаёт поля всем экранам сразу. */
  .auras-header__service,
  .auras-header__main{padding-inline:max(40px, calc((100% - var(--page-max)) / 2))}

  .auras-header__service{height:40px;gap:26px;font-size:13px}
  .auras-header__sep{height:16px}
  .auras-header__service-link--o-brende{display:inline}
  .auras-header__lang{font-size:12px}
  .auras-header__lang .auras-lang__item{min-height:28px}

  .auras-header__main{gap:28px}
  .auras-header__burger{margin-inline-start:-12px}
  .auras-header__logo img{height:30px}
  .auras-header__rule{height:26px}
  .auras-header__nav{gap:22px;font-size:13px;letter-spacing:.08em;overflow:visible}
  .auras-header__actions{gap:14px}
  .auras-header__account{width:36px;height:36px;font-size:13px}
}

/* ---- 06-footer.css ---- */
/* Футер и таб-бар. Отделены от шапки: 05-header.css перерос soft cap 300
   (code-style.md §1), дробим по ответственности — верх обвязки и низ.

   Оба тёмные с выгрузки 19.08 и лежат на той же поверхности, что шапка, —
   `--au-nav-bg` из 02-screen.css. */

/* ── Футер ──────────────────────────────────────────────────────────── */

.auras-footer{
  background:var(--au-nav-bg);
  color:var(--au-nav-fg);
  border-top:1px solid var(--au-nav-line);
  padding:var(--au-section-y) var(--au-page-pad) var(--sp-5);
}
.auras-footer__brand img{height:26px;width:auto;margin-bottom:var(--sp-3)}
.auras-footer__tagline{
  font-size:10px;
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-tagline);
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:var(--sp-4);
}
.auras-footer__about{display:none}

/* Соцсети — круглые кнопки с обводкой под контактами (выгрузка 19.08). Тач-цель
   38px, а не 44: так нарисовано, а кнопки стоят в ряд с промежутком и мимо не
   попадают. `li` сбрасываем: общее правило футера ниже отбивает пункты меню
   вертикально, а тут они в ряд. */
.auras-footer__socials{display:flex;gap:10px;margin-top:var(--sp-3)}
.auras-footer__socials li{margin:0}
.auras-footer__socials a{
  width:38px;height:38px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.28);
  background:var(--au-nav-soft);
  color:var(--au-nav-fg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--t-control);
}
.auras-footer__socials a:hover{background:rgba(255,255,255,.2);color:var(--au-nav-fg)}

/* Кнопка заказа звонка в подвале — только с 768: до неё та же кнопка стоит в
   шторке меню, а над подвалом висит таб-бар с «Консультантом». */
a.auras-footer__call{display:none}
.auras-footer__copy{
  font-size:var(--fs-caption);
  color:rgba(255,255,255,.5);
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  line-height:1.6;
}
.auras-footer__copy a{color:inherit;text-decoration:underline}

/* Разделы футера собирает wp_nav_menu, а плагины могут дописать в футер свой
   вывод со своей разметкой. Приводим её к общему виду минимальными правилами,
   а не копированием чужих шаблонов (code-style.md §2). */
.auras-footer ul{list-style:none;margin:0;padding:0}
.auras-footer li{margin:0 0 var(--sp-3)}
.auras-footer a{color:rgba(255,255,255,.82);font-size:14px}
.auras-footer a:hover{color:var(--au-nav-fg)}
.auras-footer p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.6}

@media (min-width:768px){
  .auras-footer__socials a{width:40px;height:40px}
  a.auras-footer__call{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    margin-top:6px;
    height:44px;
    padding-inline:22px;
    border-radius:var(--r-pill);
    border:1px solid rgba(255,255,255,.35);
    background:var(--au-nav-soft);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:var(--au-nav-fg);
    font-size:14px;
    font-weight:var(--fw-semibold);
    cursor:pointer;
    white-space:nowrap;
    transition:var(--t-control);
  }
  a.auras-footer__call:hover{background:rgba(255,255,255,.2);color:var(--au-nav-fg);text-decoration:none}
}

/* Аккордеона до 768 больше нет: компонент `AurasFooter` раскрывает разделы
   списками на всех ширинах. Заголовок раздела — заголовок, а не кнопка. */
.auras-footer__group{padding-top:var(--sp-5)}
.auras-footer__title{
  font:var(--text-body-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin:0 0 var(--sp-3);
}
.auras-footer__list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  font-size:14px;
}
.auras-footer__phone{font-weight:var(--fw-semibold);color:var(--au-nav-fg)}
/* Адрес шоурума под тэглайном — как в макете: 13px, приглушённый. */
.auras-footer__address{font-size:var(--fs-body-sm);line-height:1.6;color:var(--au-nav-dim)}

@media (min-width:768px){
  .auras-footer{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:var(--sp-7);
    padding:var(--sp-9) var(--au-page-pad) var(--sp-7);
  }
  .auras-footer__brand img{height:30px}
  .auras-footer__tagline{font-size:var(--fs-micro);letter-spacing:var(--ls-tagline)}
  .auras-footer__about{display:block;font-size:14px;color:rgba(255,255,255,.72);line-height:1.6;max-width:280px}
  .auras-footer__group{padding-top:0}
  .auras-footer__copy{
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    gap:var(--sp-5);
    margin-top:0;
    padding-top:var(--sp-5);
    font-size:var(--fs-body-sm);
  }
}

/* ── Таб-бар: только до 768 (HANDOFF) ───────────────────────────────── */

.auras-tabbar{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:40;
  height:var(--au-tabbar-h);
  padding:var(--sp-2) var(--sp-2) 10px;
  display:flex;
  border-top:1px solid var(--au-nav-line);
  background:var(--au-nav-bg);
  background-position:center bottom;
}
/* Два пункта из пяти — <button> («Меню» и «Консультант» открывают шторку и
   заглушку чата), поэтому сбрасываем кнопочные умолчания: без этого они
   приезжают с рамкой, серым фоном и системным шрифтом. */
.auras-tab{
  flex:1;
  height:var(--au-tabbar-item-h);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-1);
  padding:8px 0 2px;
  position:relative;
  color:var(--au-nav-dim);
  font-family:inherit;
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.02em;
  background:none;
  border:0;
  cursor:pointer;
}
.auras-tab:hover{text-decoration:none;color:var(--au-nav-dim)}

/* Значок красится текстом: маска берёт `currentColor`, поэтому активный и
   неактивный отличаются одним свойством, а не двумя правилами. Переливов на
   тёмном нет — выгрузка 19.08 их сняла. */
.auras-tab .auras-i{background-color:currentColor;background-image:none}

/* Активный — белая полоска над значком и белый значок. Полоска рисуется
   псевдоэлементом: своего узла под неё в разметке нет, и заводить его ради
   трёх пикселей значит держать в шаблоне пустой <span>. */
.auras-tab.is-active{color:var(--au-nav-fg)}
.auras-tab.is-active:hover{color:var(--au-nav-fg)}
.auras-tab.is-active::before{
  content:"";
  position:absolute;
  top:-1px;
  left:50%;
  transform:translateX(-50%);
  width:22px;
  height:3px;
  border-radius:var(--r-pill);
  background:var(--au-nav-fg);
}

/* Обёртка значка нужна бейджу: он позиционируется от неё, а не от всей
   ссылки, — иначе цифра съезжает вместе с подписью. */
.auras-tab__ic{position:relative;display:flex;align-items:center;justify-content:center;height:20px}
/* Каталог: лупа плюс четыре штриха справа — своего глифа у этого значка нет,
   он собран в макете из значка и полосок (разбор в шапке tabbar.php). */
.auras-tab__ic--lines{gap:3px}
.auras-tab__lines{display:flex;flex-direction:column;align-items:flex-start;gap:2.5px}
.auras-tab__lines span{display:block;height:1.6px;border-radius:2px;background:currentColor}
.auras-tab__lines span:nth-child(1),
.auras-tab__lines span:nth-child(3){width:11px}
.auras-tab__lines span:nth-child(2){width:8px}
.auras-tab__lines span:nth-child(4){width:7px}

.auras-tab__badge,
.auras-tab__cart-count{
  position:absolute;
  top:-5px;
  inset-inline-end:-8px;
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:var(--r-pill);
  background:var(--au-nav-fg);
  color:var(--auras-navy);
  font-size:9px;
  font-weight:var(--fw-bold);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Бейдж корзины носит свой класс — он же ключ ajax-фрагмента WooCommerce
   (inc/cart.php). Пустую корзину прячет `.is-empty` из 11-wordpress.css. */

/* Место под липкий таб-бар, чтобы он не накрывал конец страницы. */
body{padding-bottom:var(--au-tabbar-h)}
@media (min-width:768px){
  .auras-tabbar{display:none}
}

/* Переключатель языка в подвале — только до 768: выше он стоит в служебной
   строке шапки, и второй такой же читался бы как другая настройка. Вид тот же,
   что в шторке меню, — пилюля с сегментами (05a-drawer.css). */
.auras-footer__lang{padding:var(--sp-4) var(--au-page-pad) 0;display:flex}
.auras-footer__lang .auras-lang{
  gap:0;
  align-items:center;
  background:var(--au-nav-glass);
  border:1px solid var(--au-nav-soft-2);
  border-radius:var(--r-pill);
}
.auras-footer__lang .auras-lang__item{
  display:flex;
  align-items:center;
  min-height:36px;
  padding-inline:var(--sp-3);
  border-radius:var(--r-pill);
  color:var(--au-nav-dim);
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
}
.auras-footer__lang .auras-lang__item:hover{text-decoration:none}
.auras-footer__lang .auras-lang__item.is-active{background:var(--au-nav-fg);color:var(--auras-navy)}

/* До 768 разделы каталога идут строкой с переносом, как в макете: столбик из
   шести пунктов занимал бы пол-экрана подвала. Заголовка «Связаться» там тоже
   нет — телефон и почта говорят сами за себя. */
@media (max-width:767.98px){
  .auras-footer__group--catalog .auras-footer__list{
    flex-direction:row;
    flex-wrap:wrap;
    gap:var(--sp-2) var(--sp-5);
  }
  .auras-footer__title{display:none}
}

@media (min-width:768px){
  .auras-footer__lang{display:none}
}

/* ---- 07-hero.css ---- */
/* Герой главной «Бутик v2» — первый экран целиком (выгрузка 19.08). Бегущая
   строка клейм под ним — в `07a-ticker.css`.

   В макете слайды переключаются подменой активного — превью канваса гасит
   сдвиги ленты (раздел «Известное ограничение макета» в HANDOFF). Здесь
   нормальный слайдер: лента, сдвиг transform'ом. Слайд сейчас один, разметка
   рассчитана на ленту — второй встанет рядом без правки стилей.

   Кадр — текстура небулы, а не фотография: чем её заменили и почему, разобрано
   в шапке `template-parts/home/hero.php`. */

.auras-hero{position:relative;overflow:hidden}

.auras-hero__track{
  display:flex;
  width:100%;
  transition:transform var(--dur-slow) var(--ease-out);
}
/* Высота слайда — одна переменная на все ширины (`100dvh`, 02-screen.css):
   первый экран отдан герою целиком. Внутри — колонка из двух блоков, без
   процентов и абсолютного позиционирования: нижний занимает столько, сколько
   просит текст, верхний забирает остаток и центрирует в нём знак. */
.auras-hero__slide{
  position:relative;
  flex:0 0 100%;
  height:var(--au-hero-h);
  min-height:var(--au-hero-min);
  overflow:hidden;
  background:var(--auras-night);
  color:var(--n-0);
}

/* Кадр героя во всю площадь слайда. `object-fit:cover` вместо фона-картинки:
   так браузер знает пропорции из атрибутов и не дёргает вёрстку до загрузки. */
.auras-hero__shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Затемнение кадра под текстом: направление меняется вместе с раскладкой и
   потому живёт токеном (`--au-hero-wash`), а не тремя правилами здесь. */
.auras-hero__wash{position:absolute;inset:0;background:var(--au-hero-wash)}

/* Затемнение сверху — под шапкой, которая лежит на кадре прозрачной. Без него
   белые значки теряются на светлом участке фотографии. */
.auras-hero__top{
  position:absolute;
  inset-inline:0;
  top:0;
  height:150px;
  background:linear-gradient(180deg,rgba(11,16,38,.6) 0%,rgba(11,16,38,0) 100%);
}

/* Содержимое не ловит указатель: под ним лежит лента слайдера, и покупатель
   листает герой смахиванием по любому месту кадра. Кнопкам клики возвращаются
   поимённо. */
.auras-hero__body{
  position:absolute;
  inset:0;
  padding:var(--au-header-h) 18px 44px;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}

/* Знак вписывается в свой блок целиком (`contain`), а не масштабируется по
   ширине: на низком экране остаток высоты маленький, и знак обязан сжаться
   вместе с ним, а не наехать на заголовок. */
.auras-hero__mark{
  flex:1;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:var(--sp-2);
}
.auras-hero__mark img{
  width:100%;
  max-width:320px;
  max-height:100%;
  height:auto;
  object-fit:contain;
}

.auras-hero__copy{flex:0 0 auto;display:flex;flex-direction:column}
.auras-hero__title{
  margin:0;
  font-size:var(--au-fs-hero);
  font-weight:var(--fw-semibold);
  line-height:1.12;
  letter-spacing:var(--ls-display);
  color:var(--n-0);
}
/* Вторая строка заголовка залита градиентом по тексту. `color:transparent` под
   `background-clip` — не декоративная мелочь: без него строка перекрашивается в
   сплошной цвет, а не в градиент. */
.auras-hero__title-accent{
  display:block;
  letter-spacing:var(--ls-heading);
  background-image:var(--au-hero-accent);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.auras-hero__lead{
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-body-sm);
  line-height:var(--lh-relaxed);
  color:var(--text-on-dark-muted);
}
/* Вторая фраза подписи — только на широком экране: в макете на телефоне и
   планшете её нет, а строка при этом одна и та же (`hero.php`). */
.auras-hero__lead-more{display:none}
.auras-hero__cta{display:flex;gap:10px;margin-top:22px;pointer-events:auto}

/* Кнопка героя — белая с navy-текстом. В дизайн-системе такой кнопки нет: там
   primary сплошной navy, а на тёмном кадре он сливается с фоном. Поэтому свой
   класс поверх `au-btn`, а не переопределение `au-btn--primary`: тот же primary
   стоит на светлых экранах и должен остаться navy. */
.auras-hero__btn{
  background:var(--n-0);
  border-color:var(--n-0);
  color:var(--auras-navy);
}
.auras-hero__btn:hover{background:var(--n-50);border-color:var(--n-50);color:var(--auras-navy)}
/* Вторая кнопка — стекло по кадру: заливки у неё нет, читается за счёт
   размытия того, что под ней. */
.auras-hero__btn--ghost{
  background:rgba(255,255,255,.1);
  border-color:var(--border-on-dark);
  color:var(--n-0);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.auras-hero__btn--ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.7);color:var(--n-0)}

/* Строка доверия под кнопками. Цифры — заглушки самого макета
   (`docs/design/MANIFEST.md`), к сдаче заменяются на настоящие. */
.auras-hero__proof{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  font-size:var(--fs-caption);
  color:var(--text-on-dark-muted);
}
.auras-hero__stars{letter-spacing:.1em;color:var(--au-star);font-size:var(--fs-body-sm)}
.auras-hero__proof b{color:var(--n-0);font-weight:var(--fw-semibold)}
.auras-hero__proof-sep{width:1px;height:13px;background:var(--au-nav-soft-2)}

/* Стрелки и точки слайдера. Скрипт не рисует их при одном слайде, но правила
   живут здесь: слайдов станет больше, когда приедут серии и акция. */
.auras-hero__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--n-0);
  cursor:pointer;
  padding:0;
}
.auras-hero__nav--prev{inset-inline-start:10px}
.auras-hero__nav--next{inset-inline-end:10px}

.auras-hero__dots{
  position:absolute;
  inset-inline:0;
  bottom:12px;
  display:flex;
  gap:6px;
  justify-content:center;
}
.auras-hero__dot{
  width:6px;height:6px;
  padding:0;
  border:0;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.45);
  cursor:pointer;
  transition:var(--t-control);
}
.auras-hero__dot.is-active{width:22px;background:var(--n-0)}

/* Шапка лежит НА кадре героя, а не над ним (`overlay` в макете). Только на
   главной: на остальных экранах шапка своя, с подложкой.

   Прозрачной она остаётся только НАД ГЕРОЕМ. Когда герой уходит вверх, шапка
   уплотняется в ту же тёмную поверхность, что на остальных экранах: класс
   `is-solid` вешает `nav.js` по наблюдателю пересечений. Без этого белые значки
   легли бы на белый контент (ответ дизайна на вопрос выгрузки 19.08).

   Липкой здесь она становится и на телефоне — в отличие от остальных экранов,
   где до 768 шапка не липнет. На главной иначе никак: прозрачная шапка обязана
   быть над героем, а герой занимает весь первый экран. */
/* Липнет основная строка, а не шапка целиком (05b-header-desktop.css): на
   главной она делает это на всех ширинах, потому что прозрачная строка обязана
   лежать на герое, а герой занимает весь первый экран.

   Прозрачны обе строки — и разделительная линия между ними тоже: иначе
   прозрачная шапка расчерчена полосой поперёк фотографии. */
.home .auras-header{position:sticky;top:calc(var(--au-header-row) - var(--au-header-h));z-index:50}
.home .auras-header__main,
.home .auras-header__service{
  background:none;
  border-bottom-color:transparent;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.home .auras-header.is-solid .auras-header__main{
  background:var(--au-nav-bg);
  border-bottom-color:var(--au-nav-line);
}

/* Логотип в шапке главной скрыт, пока шапка лежит на герое (`hide-logo` в
   макете): в кадре под ней полный знак бренда, и два логотипа друг над другом
   читаются как брак. Возвращается вместе с плотной шапкой — тогда знака из
   героя на экране уже нет.

   `visibility`, а не `display`: место логотипа в строке остаётся занятым, и
   значки справа не прыгают в момент прилипания. */
.home .auras-header__logo{
  visibility:hidden;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.home .auras-header.is-solid .auras-header__logo,
.home:has(.auras-city-ask) .auras-header__logo{visibility:visible;opacity:1}

/* Шапка липкая, поэтому герой обязан начинаться под ней, а не после неё:
   отрицательный отступ поднимает первый слайд ровно на её высоту. */
.home .auras-hero{margin-top:calc(-1 * var(--au-header-h))}

/* Между шапкой и контентом может встать плашка «Доставка в N?» (11b-city.css):
   она в потоке и сдвигает герой вниз — прозрачной шапке лежать больше не на
   чем, и её белый текст оказывается на белой полосе. Поэтому пока плашка на
   странице, шапка на главной сразу плотная, а герой не подтягивается вверх.

   Условие живое: скрипт прячет плашку атрибутом `hidden`, узел остаётся, и
   вёрстка не прыгает на 116px под курсором у покупателя. */
.home:has(.auras-city-ask) .auras-hero{margin-top:0}
.home:has(.auras-city-ask) .auras-header__service,
.home:has(.auras-city-ask) .auras-header__main{background:var(--au-nav-bg)}
.home:has(.auras-city-ask) .auras-header__main{border-bottom-color:var(--au-nav-line)}

@media (min-width:768px){
  /* С 768 текст уходит влево и встаёт под знаком одной колонкой: остаток кадра
     остаётся фотографией, и градиент гасит только левую его часть. */
  .auras-hero__body{
    padding:calc(var(--au-header-h) + 18px) var(--au-page-pad) 44px;
    align-items:flex-start;
    max-width:530px;
  }
  .auras-hero__mark{flex:0 0 auto;min-height:0;justify-content:flex-start;padding-inline:0}
  .auras-hero__mark img{width:380px;max-width:100%}
  .auras-hero__copy{margin-top:var(--sp-6)}
  .auras-hero__lead{font-size:var(--fs-body-sm);max-width:380px}
  .auras-hero__cta{margin-top:22px}
  .auras-hero__proof{gap:12px;font-size:var(--fs-body-sm)}
  .auras-hero__nav{width:44px;height:44px}
  .auras-hero__nav--prev{inset-inline-start:28px}
  .auras-hero__nav--next{inset-inline-end:28px}
  .auras-hero__dots{bottom:18px}
}

@media (min-width:1200px){
  /* На широком экране кадр делится пополам: знак по центру левой половины,
     текст — правой. Половины именно долями, а не фиксированными 720px из
     макета: макет нарисован на 1440, а окно бывает любым. */
  .auras-hero__body{
    flex-direction:row;
    align-items:stretch;
    max-width:none;
    padding:var(--au-header-h) 0 0;
  }
  .auras-hero__mark{flex:0 0 50%;align-items:center;justify-content:center;padding-inline:90px}
  .auras-hero__mark img{width:100%;max-width:none}
  .auras-hero__copy{flex:1;justify-content:center;margin-top:0;padding:0 100px 0 60px}
  .auras-hero__lead{font-size:var(--fs-body);max-width:440px;margin-top:var(--sp-6)}
  .auras-hero__lead-more{display:inline}
  .auras-hero__cta{gap:var(--sp-3);margin-top:28px}
  .auras-hero__proof{gap:14px;font-size:var(--fs-body-sm);margin-top:26px}
  .auras-hero__proof-sep{height:16px}
}

/* ---- 07a-ticker.css ---- */
/* Бегущая строка клейм под героем главной.

   Отдельным файлом от `07-hero.css`: тот упёрся в soft cap 300 строк
   (code-style.md §1), а строка клейм — самостоятельный блок и делится по
   ответственности, а не по размеру. Литера в имени, а не следующий номер:
   `build-theme.sh` склеивает файлы по алфавиту при LC_ALL=C, и `07a` остаётся
   рядом с героем в каскаде (design-assets.md §1a). */

.auras-ticker{
  overflow:hidden;
  background:var(--auras-navy);
  color:var(--n-0);
  padding:11px 0;
}
.auras-ticker__track{
  display:flex;
  width:max-content;
  animation:auras-marquee 22s linear infinite;
}
.auras-ticker__row{
  display:flex;
  gap:var(--sp-6);
  padding-inline-end:var(--sp-6);
  font-size:var(--fs-micro);
  font-weight:var(--fw-medium);
  letter-spacing:.28em;
  text-transform:uppercase;
  white-space:nowrap;
}
.auras-ticker__sep{opacity:.5}

/* Лента продублирована, поэтому едет ровно на половину своей ширины: в этот
   момент вторая копия стоит там, где начиналась первая, и стык не виден. */
@keyframes auras-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .auras-ticker__track{animation:none}
}

@media (min-width:768px){
  .auras-ticker{padding:13px 0}
  .auras-ticker__row{gap:var(--sp-7);padding-inline-end:var(--sp-7);font-size:var(--fs-caption)}
  .auras-ticker__track{animation-duration:30s}
}

/* ---- 08-sections.css ---- */
/* Секции главной «Бутик v2»: каталог списком.

   Прежние блоки A-light (полоса доверия, четыре линии, «выбирают чаще всего»,
   анатомия слоёв, сравнение моделей, шоурум) ушли вместе с той главной —
   заказчик утвердил «Бутик» 18.08. Стили удалены, а не оставлены «на всякий
   случай»: их вернёт git, а мёртвые правила в собранном `theme.css` возит
   каждый покупатель.

   Остальные блоки «Бутика» (серии одеял, подушки, защита и комфорт,
   наборы-приданое) привязаны к конкретным разделам каталога и ждут решения
   заказчика — разбор в docs/design/MANIFEST.md. */

/* ── Каталог списком ────────────────────────────────────────────────── */

.auras-index{padding:34px 0 0}

.auras-index__head{
  padding:0 var(--au-page-pad) 14px;
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}
.auras-index__eyebrow{
  font-size:var(--au-fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--n-500);
  white-space:nowrap;
}
/* Шапка блока целиком (заголовок, подводка, счётчик моделей, ссылка на
   каталог) появляется только с 768 — вариант 17b выгрузки 19.08. На телефоне
   от неё остаётся один надзаголовок: место занимает сам список. */
.auras-index__title,
.auras-index__lead,
.auras-index__count,
.auras-index__all{display:none}

.auras-index__rows{display:flex;flex-direction:column}
.auras-index__row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px var(--au-page-pad);
  border-top:1px solid var(--border-subtle);
  color:var(--auras-navy);
  transition:background var(--dur-fast) var(--ease-out);
}
.auras-index__rows > :last-child{border-bottom:1px solid var(--border-subtle)}
.auras-index__row:hover{background:var(--n-50);text-decoration:none;color:var(--auras-navy)}

.auras-index__thumb{
  flex:0 0 auto;
  width:64px;
  height:48px;
  border-radius:var(--r-sm);
  border:1px solid var(--border-subtle);
  overflow:hidden;
  background:var(--n-50);
}
.auras-index__thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Номер ряда — перелив по маске текста, и только на телефоне: с 768 вариант
   17b красит номер обычным серым. `color:transparent` вместе с
   `background-clip:text`: без него градиент закрывается собственным цветом. */
.auras-index__num{
  flex:0 0 auto;
  font-size:var(--fs-caption);
  font-weight:var(--fw-bold);
  background-image:linear-gradient(116deg,
    var(--auras-navy) 0%,
    var(--auras-purple) 60%,
    var(--auras-pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.auras-index__body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.auras-index__name{
  font-size:var(--au-fs-index);
  font-weight:var(--fw-semibold);
  letter-spacing:-.02em;
  line-height:1;
}
.auras-index__meta{font-size:var(--fs-caption);color:var(--n-500)}
.auras-index__go{font-size:20px;color:var(--n-400);flex:0 0 auto}

@media (min-width:768px){
  .auras-index{
    padding:56px var(--au-page-pad) 0;
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
  }
  .auras-index__head{
    padding:0;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .auras-index__title{
    display:block;
    margin:0;
    font-size:var(--au-fs-section);
    font-weight:var(--fw-semibold);
    letter-spacing:var(--ls-display);
    line-height:1.08;
  }
  .auras-index__lead{
    display:block;
    margin:0;
    font-size:var(--fs-body-sm);
    line-height:1.6;
    color:var(--n-600);
  }
  /* Счётчик отбит сверху линией — в макете он подводит итог колонке. */
  .auras-index__count{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin:0;
    padding-top:var(--sp-2);
    border-top:1px solid var(--border-subtle);
    width:100%;
  }
  .auras-index__count-num{
    font-size:34px;
    font-weight:var(--fw-semibold);
    letter-spacing:var(--ls-display);
  }
  .auras-index__count-label{font-size:var(--fs-body-sm);color:var(--n-500);line-height:1.4}
  .auras-index__all{
    display:block;
    font-size:var(--fs-body-sm);
    font-weight:var(--fw-medium);
    color:var(--text-link);
  }
  .auras-index__row{gap:20px;padding:18px 4px}
  /* С 768 ряд идёт номер → имя с подписью → миниатюра → стрелка: подпись
     остаётся под именем, как в 17b, поэтому колонка с ними не распускается —
     переставляются сами ячейки ряда.

     Перелив с номера снят — 17b красит его обычным серым. */
  .auras-index__num{
    order:1;
    min-width:24px;
    font-size:var(--fs-body-sm);
    background-image:none;
    color:var(--n-400);
  }
  .auras-index__body{order:2;gap:var(--sp-1)}
  .auras-index__meta{font-size:var(--fs-body-sm)}
  .auras-index__thumb{order:3;width:96px;height:70px;border-radius:0;border:0}
  .auras-index__go{order:4;font-size:20px}
}

@media (min-width:1200px){
  .auras-index{grid-template-columns:360px 1fr;gap:64px;padding-top:80px}
  .auras-index__head{gap:var(--sp-4)}
  .auras-index__lead{font-size:var(--fs-body)}
  .auras-index__count-num{font-size:40px}
  .auras-index__count-label{font-size:var(--fs-body-sm)}
  .auras-index__all{font-size:var(--fs-body)}
  .auras-index__row{gap:28px;padding:22px 4px}
  .auras-index__num{min-width:28px}
  .auras-index__meta{font-size:var(--fs-body)}
  .auras-index__thumb{width:120px;height:88px}
  .auras-index__go{font-size:24px}
}

/* ---- 08a-series.css ---- */
/* Лента серий одеял на главной «Бутик v2».

   Литера в номере — способ держать правила рядом с `08-sections.css`, где
   живёт каталог-индекс той же главной (design-assets.md §1a). Сортировка glob
   ставит литерный файл ПЕРЕД базовым, и здесь это безразлично: общих селекторов
   у них нет, переопределять нечего.

   СОДЕРЖАНИЕ БЛОКА — ЗАГЛУШКА: названия серий заказчик ещё не выбрал, разбор в
   шапке `template-parts/home/series.php`. Вёрстка настоящая. */

.auras-series{padding:40px 0 0;display:flex;flex-direction:column;gap:var(--sp-4)}
.auras-series__head{padding:0 var(--au-page-pad);display:flex;flex-direction:column;gap:6px}
.auras-series__eyebrow{
  font-size:var(--au-fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--n-500);
}
.auras-series__title{
  font-size:var(--au-fs-section);
  font-weight:var(--fw-semibold);
  letter-spacing:-.02em;
  line-height:1.1;
}
.auras-series__lead{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--n-600)}

/* До 768 карточки едут лентой вбок с прилипанием, выше — три колонки. */
.auras-series__rail{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:4px var(--au-page-pad) 8px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.auras-series__rail::-webkit-scrollbar{display:none}

.auras-series__card{
  flex:0 0 264px;
  scroll-snap-align:start;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--n-0);
  display:flex;
  flex-direction:column;
}
.auras-series__media{position:relative;height:300px;background:var(--n-50)}
/* Акварель поверх кадра, а не под ним: рендеры одеял с прозрачностью, и
   подложка должна просвечивать сквозь них, как в макете. */
.auras-series__wash{
  position:absolute;
  inset:0;
  z-index:1;
  background-position:center;
  background-size:cover;
  opacity:.5;
  pointer-events:none;
}
.auras-series__media img{width:100%;height:100%;object-fit:cover}
.auras-series__badge{
  position:absolute;
  inset-inline-start:12px;
  top:12px;
  z-index:2;
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--n-0);
  border-radius:var(--r-pill);
  padding:6px 11px;
}
.auras-series__badge--navy{background:var(--auras-navy)}
.auras-series__badge--purple{background:var(--auras-purple)}
.auras-series__badge--pink{background:var(--auras-pink)}

.auras-series__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.auras-series__name{font-size:19px;font-weight:var(--fw-semibold);letter-spacing:-.01em}
.auras-series__desc{margin:0;font-size:var(--fs-body-sm);line-height:1.5;color:var(--n-600)}

@media (min-width:768px){
  .auras-series{padding:96px var(--au-page-pad) 0;gap:28px}
  .auras-series__head{padding:0;max-width:640px;gap:8px}
  .auras-series__rail{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    overflow:visible;
    padding:0;
  }
  .auras-series__card{flex:1 1 auto}
  .auras-series__media{height:380px}
  .auras-series__name{font-size:24px}
}

/* ---- 08b-category-blocks.css ---- */
/* Блоки главной, привязанные к разделам каталога: подушки, защита и комфорт,
   наборы-приданое («Бутик v2», выгрузка 19.08).

   Отдельно от `08a-series.css`: вместе они переросли soft cap 300 строк
   (code-style.md §1). Дробим по ответственности — лента серий и витрины
   разделов.

   Привязка блоков к разделам временная, разбор — в шапке `auras_home_section()`. */

/* ── Подушки ────────────────────────────────────────────────────────── */

.auras-pillows{
  margin-top:40px;
  background:var(--n-50);
  border-block:1px solid var(--border-subtle);
  padding:32px var(--au-page-pad);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.auras-pillows__head{display:flex;flex-direction:column;gap:6px}
.auras-pillows__eyebrow{
  font-size:var(--au-fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--n-500);
}
.auras-pillows__title{
  font-size:var(--au-fs-section);
  font-weight:var(--fw-semibold);
  letter-spacing:-.02em;
  line-height:1.1;
}
.auras-pillows__sizes{display:flex;flex-wrap:wrap;gap:8px}
.auras-pillows__size{
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  border:1px solid var(--border-subtle);
  background:var(--n-0);
  color:var(--auras-navy);
  border-radius:var(--r-pill);
  padding:10px 18px;
  white-space:nowrap;
}
.auras-pillows__size:hover{
  text-decoration:none;
  background:var(--auras-navy);
  border-color:var(--auras-navy);
  color:var(--n-0);
}

.auras-pillows__card{
  display:block;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--n-0);
  color:var(--auras-navy);
}
.auras-pillows__card:hover{text-decoration:none;color:var(--auras-navy)}
.auras-pillows__shot{width:100%;height:auto}
.auras-pillows__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:16px 18px;
  border-top:1px solid var(--border-subtle);
}
.auras-pillows__body{display:flex;flex-direction:column;gap:2px}
.auras-pillows__name{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold)}
.auras-pillows__meta{font-size:var(--fs-caption);color:var(--n-500)}

/* ── Защита и комфорт ───────────────────────────────────────────────── */

.auras-protect{padding:40px var(--au-page-pad) 0;display:flex;flex-direction:column;gap:14px}
.auras-protect__eyebrow{
  font-size:var(--au-fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--n-500);
}
.auras-protect__cover{
  position:relative;
  display:block;
  height:210px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--n-50);
}
.auras-protect__cover img{width:100%;height:100%;object-fit:cover}
.auras-protect__caption{
  position:absolute;
  inset-inline:0;
  bottom:0;
  padding:36px 16px 14px;
  background:linear-gradient(180deg,rgba(11,16,38,0),rgba(11,16,38,.62));
  color:var(--n-0);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.auras-protect__caption .auras-protect__meta{color:rgba(255,255,255,.8)}

.auras-protect__topper{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--n-0);
  color:var(--auras-navy);
}
.auras-protect__topper:hover{text-decoration:none;color:var(--auras-navy)}
.auras-protect__wash{
  position:absolute;
  inset:0;
  background:var(--tex-watercolor-blue) center/cover;
  opacity:.45;
}
.auras-protect__body{position:relative;flex:1;display:flex;flex-direction:column;gap:4px}
.auras-protect__name{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold)}
.auras-protect__meta{font-size:var(--fs-caption);color:var(--n-600)}
.auras-protect__more{
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  color:var(--auras-blue-ink);
  margin-top:4px;
}
.auras-protect__shot{
  position:relative;
  width:150px;
  height:auto;
  filter:drop-shadow(0 14px 20px rgba(28,34,94,.2));
}

/* ── Наборы-приданое ────────────────────────────────────────────────── */

.auras-bridal{
  position:relative;
  margin:40px var(--au-page-pad) 0;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--auras-night);
  color:var(--n-0);
}
.auras-bridal__tex{position:absolute;inset:0;background:var(--tex-nebula) center/cover;opacity:.9}
.auras-bridal__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,16,38,.1),rgba(11,16,38,.85));
}
.auras-bridal__body{
  position:relative;
  padding:28px 22px 26px;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.auras-bridal__eyebrow{
  font-size:var(--au-fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--auras-pink);
}
.auras-bridal__title{
  font-size:var(--au-fs-section);
  font-weight:var(--fw-semibold);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--n-0);
}
.auras-bridal__lead{margin:0;font-size:var(--fs-body);line-height:1.6;color:rgba(255,255,255,.72)}
.auras-bridal__shot{
  margin:6px 0;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--n-50);
  border:1px solid rgba(255,255,255,.18);
}
.auras-bridal__shot img{width:100%;height:auto}
/* Кнопка на тёмном — стеклянная, как в макете: сплошной navy на небуле не
   читается, а accent-перелив спорил бы с розовым надзаголовком. */
.auras-bridal__cta{
  align-self:flex-start;
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  color:var(--n-0);
  border:1px solid rgba(255,255,255,.35);
  background:var(--au-nav-soft);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-radius:var(--r-pill);
  padding:12px 22px;
  white-space:nowrap;
}
.auras-bridal__cta:hover{text-decoration:none;color:var(--n-0);background:rgba(255,255,255,.2)}

@media (min-width:768px){
  .auras-pillows{
    margin-top:96px;
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:24px 40px;
    padding:36px var(--au-page-pad);
  }
  .auras-pillows__card{grid-row:span 2}
  .auras-pillows__title{font-size:36px}

  .auras-protect{
    padding-top:96px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  .auras-protect__eyebrow{grid-column:1/-1}
  .auras-protect__cover{height:260px}
  .auras-protect__shot{width:200px}

  .auras-bridal{margin-top:96px;display:flex;min-height:400px}
  .auras-bridal__scrim{background:linear-gradient(90deg,rgba(11,16,38,.9) 0%,rgba(11,16,38,.4) 60%,rgba(11,16,38,.1) 100%)}
  .auras-bridal__body{padding:56px;max-width:52%;justify-content:center;gap:var(--sp-4)}
  .auras-bridal__title{font-size:44px;line-height:1.08}
  .auras-bridal__shot{max-width:none}
}

/* ---- 09-icons.css ---- */
/* Иконки Lucide v0.544 (ISC), self-hosted как data-URI в масках.

   CDN запрещён: стенд закрыт basic auth, прод должен работать при плохой
   связи (design-assets.md §2). Маска красится currentColor, поэтому один
   и тот же значок работает и сплошным цветом, и переливом — таб-бар
   подменяет background-image на градиент.

   Атрибуты SVG в одинарных кавычках: двойные обрывают url("...") и маска
   молча не применяется — элемент превращается в залитый квадрат.

   Своего набора у бренда нет, Lucide — согласованная подстановка (HANDOFF). */

.auras-i--menu{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E")}
.auras-i--search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.34-4.34'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.34-4.34'/%3E%3C/svg%3E")}
.auras-i--shopping-bag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467A2 2 0 0 1 5.4 4h13.2a2 2 0 0 1 2 1.467l1.848 12A2 2 0 0 1 20.48 20H3.52a2 2 0 0 1-1.968-2.533z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467A2 2 0 0 1 5.4 4h13.2a2 2 0 0 1 2 1.467l1.848 12A2 2 0 0 1 20.48 20H3.52a2 2 0 0 1-1.968-2.533z'/%3E%3C/svg%3E")}
.auras-i--chevron-left{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}
.auras-i--chevron-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}
.auras-i--x{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
.auras-i--truck{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3C/svg%3E")}
.auras-i--shield-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.auras-i--credit-card{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
.auras-i--house{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E")}
.auras-i--layout-grid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E")}
.auras-i--user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3C/svg%3E")}
.auras-i--washing-machine{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='20' x='3' y='2' rx='2'/%3E%3Ccircle cx='12' cy='13' r='5'/%3E%3Cpath d='M3 6h3'/%3E%3Cpath d='M17 6h.01'/%3E%3Cpath d='M12 18a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 1 0-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='20' x='3' y='2' rx='2'/%3E%3Ccircle cx='12' cy='13' r='5'/%3E%3Cpath d='M3 6h3'/%3E%3Cpath d='M17 6h.01'/%3E%3Cpath d='M12 18a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 1 0-5'/%3E%3C/svg%3E")}
.auras-i--cloud{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9'/%3E%3C/svg%3E")}
.auras-i--droplet{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E")}

.auras-i--sliders-horizontal{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H3'/%3E%3Cpath d='M12 19H3'/%3E%3Cpath d='M14 3v4'/%3E%3Cpath d='M16 17v4'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M21 19h-5'/%3E%3Cpath d='M21 5h-7'/%3E%3Cpath d='M8 10v4'/%3E%3Cpath d='M8 12H3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H3'/%3E%3Cpath d='M12 19H3'/%3E%3Cpath d='M14 3v4'/%3E%3Cpath d='M16 17v4'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M21 19h-5'/%3E%3Cpath d='M21 5h-7'/%3E%3Cpath d='M8 10v4'/%3E%3Cpath d='M8 12H3'/%3E%3C/svg%3E")}
.auras-i--chevron-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.auras-i--arrow-up-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E")}

/* Добавлены под экран карточки товара: галерея, степпер, полоса доверия. */
.auras-i--play{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E")}
.auras-i--check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.auras-i--minus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.auras-i--plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E")}
.auras-i--store{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3C/svg%3E")}

/* Город доставки — в служебной строке шапки и первым пунктом шторки меню.
   Значка не было вовсе: маска не находилась, и на его месте рисовался
   залитый квадрат — в шторке этого никто не видел, она закрыта. */
.auras-i--map-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}

/* Добавлены под избранное и «поделиться». */
.auras-i--heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E")}
.auras-i--share-2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E")}

/* Добавлена под сравнение товаров. */
.auras-i--scale{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E")}

/* Добавлена под заглушку онлайн-чата (пункт «Консультант» таб-бара). */
.auras-i--message-circle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E")}

/* Добавлены под навигацию выгрузки 19.08: телефон в шапке, «строки + лупа» у таба «Каталог». */
.auras-i--phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E")}
.auras-i--text-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M10 12H3'/%3E%3Cpath d='M10 18H3'/%3E%3Ccircle cx='17' cy='15' r='3'/%3E%3Cpath d='m21 19-1.9-1.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M10 12H3'/%3E%3Cpath d='M10 18H3'/%3E%3Ccircle cx='17' cy='15' r='3'/%3E%3Cpath d='m21 19-1.9-1.9'/%3E%3C/svg%3E")}

/* Добавлена под корзину: удаление позиции. */
.auras-i--trash-2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}

/* Соцсети. Instagram и Facebook в Lucide есть, Telegram — нет: у набора нет
   брендовых логотипов вовсе, а два из трёх совпали случайно. Берём `send`
   (бумажный самолётик) — он же значок отправки в самом Telegram. */
.auras-i--instagram{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E")}
.auras-i--facebook{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E")}
.auras-i--send{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E")}

/* ---- 10-catalog.css ---- */
/* Каталог: шапка категории, панель управления, сетка, шторка фильтров.

   Правила адаптации из HANDOFF: товары 2 в ряд до 768, 3 на 768, 4 на 1200+;
   с 1200 фильтры уходят колонкой слева и шторка больше не нужна. */

/* ── Шапка категории: фото раздела, крошки, название, лид ───────────── */

/* «Фотошапка» из выгрузки 19.08: кадр раздела во всю ширину, поверх него
   затемнение и белый текст. Кадра у раздела нет — остаётся акварель по
   колорвею и тёмный текст, как было (`template-parts/catalog/header.php`). */

.auras-cat__head{
  position:relative;
  overflow:hidden;
  min-height:150px;
}
.auras-cat__wash{
  position:absolute;
  inset:0;
  background:var(--line-texture) center top/cover;
}
.auras-cat__shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 70%;
}
.auras-cat__fade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,var(--n-0) 100%);
}
.auras-cat__head.is-photo .auras-cat__fade{
  background:linear-gradient(180deg,rgba(11,16,38,.66) 0%,rgba(11,16,38,.78) 100%);
}
.auras-cat__head.is-photo .auras-cat__title,
.auras-cat__head.is-photo .auras-cat__lead,
.auras-cat__head.is-photo .auras-cat__crumbs,
.auras-cat__head.is-photo .auras-cat__crumbs a{color:#fff}
.auras-cat__head.is-photo .auras-cat__crumbs li + li::before{color:rgba(255,255,255,.6)}
.auras-cat__body{
  position:relative;
  padding:22px var(--au-page-pad) 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auras-cat__crumbs{font-size:var(--fs-caption);color:var(--n-500)}
.auras-cat__crumbs a{color:var(--n-500)}
.auras-cat__crumbs li{display:inline}
.auras-cat__crumbs ol{list-style:none;margin:0;padding:0;display:inline}
.auras-cat__crumbs li + li::before{content:" / ";color:var(--n-400)}
/* Кегли заголовка — из макета, а не из общей секционной шкалы: у шапки
   каталога своя лестница 30 → 34 → 44 (выгрузка 19.08). */
.auras-cat__title{
  font-size:30px;
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-display);
  color:var(--auras-navy);
}
.auras-cat__lead{font-size:14px;color:var(--n-600);line-height:1.5;max-width:640px}
.auras-cat__lead p{margin:0}

/* Подвала в каталоге нет ТОЛЬКО НА ТЕЛЕФОНЕ: там экран заканчивается выдачей и
   кнопкой «Показать ещё», и карта сайта под бесконечным листингом не читается.
   С 768 подвал на месте, как и рисует макет: на десктопе он не мешает выдаче и
   остаётся единственным входом в разделы «Доставка», «О бренде», контакты. */
@media (max-width:767.98px){
  .woocommerce-shop .auras-footer,
  .post-type-archive-product .auras-footer,
  .tax-product_cat .auras-footer,
  .tax-product_tag .auras-footer{display:none}
}

/* ── Панель: кнопка фильтров и сортировка ───────────────────────────── */

/* Строка чипов из макета: лента, которая уезжает вбок, а не растянутые на всю
   ширину кнопки. Полосу прокрутки прячем — жест на телефоне и так очевиден. */
.auras-cat__bar{
  padding:14px var(--au-page-pad);
  display:flex;
  gap:8px;
  overflow-x:auto;
  white-space:nowrap;
  border-bottom:1px solid var(--border-subtle);
  scrollbar-width:none;
}
.auras-cat__bar::-webkit-scrollbar{display:none}
.auras-cat__ctl{
  flex:0 0 auto;
  height:36px;
  min-width:0;
  padding:0 16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  background:var(--n-0);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font-family:inherit;
  font-size:var(--fs-body-sm);
  color:var(--auras-navy);
  cursor:pointer;
}
.auras-cat__ctl:hover{border-color:var(--border-default);background:var(--n-50)}
/* Первый чип — «Фильтры · N» — в макете залит навы: он открывает шторку, а
   остальные только подсказывают, что в ней лежит. */
.auras-cat__ctl--filters{
  background:var(--auras-navy);
  border-color:var(--auras-navy);
  color:var(--n-0);
  font-weight:var(--fw-semibold);
}
.auras-cat__ctl--filters:hover{background:var(--auras-navy);border-color:var(--auras-navy)}
.auras-cat__count{
  min-width:18px;height:18px;
  padding:0 5px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.24);
  color:var(--n-0);
  font-size:10px;
  font-weight:var(--fw-semibold);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Нативный select поверх кнопки: свой список сортировки — это лишний JS
   там, где системный работает лучше и доступнее. */
.auras-cat__sort{position:relative;flex:0 0 auto;display:flex}
.auras-cat__sort select{
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  cursor:pointer;
}

/* ── Активные фильтры и счётчик ─────────────────────────────────────── */

.auras-cat__chips{
  padding:0 var(--au-page-pad) var(--sp-3);
  display:flex;
  gap:var(--sp-2);
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
}
.auras-cat__chips::-webkit-scrollbar{display:none}


/* ── Сетка товаров и подгрузка ──────────────────────────────────────── */

.auras-cat__grid{
  padding:var(--au-page-pad);
  display:grid;
  grid-template-columns:repeat(var(--au-grid-products),minmax(0,1fr));
  gap:16px 12px;
}
/* «Показать ещё N»: до 768 кнопка во всю ширину, дальше — по центру и по
   контенту (макет). Контур `border-strong`, а не градиентный `au-btn--secondary`:
   в макете это спокойная вторичная кнопка. */
.auras-cat__more{padding:24px var(--au-page-pad) 36px;display:flex}
.auras-cat__more .au-btn{
  flex:1;
  height:52px;
  padding:0 34px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  background:none;
  background-image:none;
  color:var(--auras-navy);
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
}
.auras-cat__more .au-btn:hover{background:var(--n-50);background-image:none}
.auras-cat__empty{
  padding:var(--sp-9) var(--au-page-pad);
  text-align:center;
  color:var(--n-500);
}

@media (min-width:768px){
  /* Акварельная подложка кадрируется `cover`, и на широкой невысокой шапке от
     неё оставался бы верхний блёклый край — на телефоне видно половину пятна,
     на десктопе десятую часть, и фон читался как его отсутствие. Берём центр
     пятна и даём шапке высоту, соизмеримую с макетной фотошапкой. */
  .auras-cat__head{min-height:230px}
  .auras-cat__wash{background-position:center center}
  .auras-cat__grid{gap:28px 20px;padding:28px var(--au-page-pad) 0}
  .auras-cat__body{padding:var(--sp-6) var(--au-page-pad)}
  .auras-cat__more{padding:32px var(--au-page-pad) 48px;justify-content:center}
  .auras-cat__more .au-btn{flex:0 0 auto}
}

/* ── Каталог колонкой, с 768 («Каталог · 768» и «· 1440», выгрузка 19.08) ─

   Фильтры распрямляются из шторки в колонку слева и липнут под шапкой: 180px
   на планшете, 280px с 1200. Выдача идёт тремя товарами в ряд на всех этих
   ширинах (число задаёт `--au-grid-products`), с 1200 контент ограничен
   колонкой 1240 из макета.

   Сортировка при этом остаётся в строке над выдачей, а не уезжает в шапку
   категории, как нарисовано: на телефоне она стоит рядом с кнопкой «Фильтры»
   в той же строке, и перенести её между контейнерами средствами CSS нечем —
   пришлось бы держать два одинаковых `<select>` с одним id. Рядом со счётчиком
   товаров она читается так же. */
@media (min-width:768px){
  /* Только COLUMN-gap: колонка фильтров растянута на `grid-row:1/999`, и
     обычный `gap` дал бы вертикальный зазор ещё и между сотнями пустых
     неявных строк — страница уезжала бы на десятки тысяч пикселей вниз.
     Вертикальные отступы блоки выдачи держат своими полями. */
  .auras-cat__layout{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    column-gap:var(--sp-7);
    align-items:start;
  }
  .auras-cat__top,
  .auras-cat__chips,
  .auras-cat__grid,
  .auras-cat__more,
  .auras-cat__empty{grid-column:2;padding-inline:0}

  /* Шапка категории лежит СНАРУЖИ сетки и тянется акварелью во всю ширину
     экрана, а текст внутри остаётся в колонке 1240: полоса, обрезанная по
     колонке, выглядит как недовёрстанная секция. Поля считаются от ширины
     самой шапки (она во всю ширину), поэтому ни `100vw`, ни его полосы
     прокрутки здесь нет. */
  .auras-cat__crumbs,
  .auras-cat__title,
  .auras-cat__lead{max-width:640px}
  .auras-cat__title{font-size:34px}

  /* Ни кнопки шторки, ни чипов групп — фильтры и так стоят колонкой слева.
     От строки остаётся одна сортировка, прижатая вправо: в макете её нет
     вовсе, это наше добавление (DESIGN-NOTES.md). */
  .auras-cat__ctl--filters,
  .auras-cat__ctl--facet{display:none}
  /* Сверху отступа нет: воздух под шапкой раздела уже задан её собственным
     нижним полем, а второй такой же отрывал сортировку от выдачи. */
  .auras-cat__bar{
    padding:0;
    border-bottom:0;
    justify-content:flex-end;
    overflow:visible;
  }
  /* Ширину задаёт подпись, а не фикс: 240px оставляли пустое поле справа от
     пилюли, и правый край сортировки не совпадал с правым краем сетки
     карточек. Минимум держит форму при смене подписи и языка. */
  .auras-cat__sort{flex:0 0 auto;min-width:160px}
  .auras-cat__sort .auras-cat__ctl{width:100%}
}

/* ---- 10a-filters.css ---- */
/* Шторка фильтров каталога (выгрузка 19.08, `Screen-Catalog` → «Фильтры»).

   Литерный файл рядом с `10-catalog.css`: `build-theme.sh` склеивает по алфавиту
   при `LC_ALL=C`, и `10-catalog.css` → `10a-filters.css` → `10b-catalog-wide.css`
   идут в том же порядке, в каком лежали правила до дробления (design-assets.md
   §1a). Разделены по размеру файла, а не по смыслу: базовый упёрся в soft cap. */

/* ── Шторка фильтров ────────────────────────────────────────────────── */

.auras-filters{
  position:fixed;
  inset:0;
  z-index:60;
  visibility:hidden;
}
.auras-filters[aria-hidden="false"]{visibility:visible}
.auras-filters__scrim{
  position:absolute;
  inset:0;
  background:rgba(28,34,94,.42);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.auras-filters[aria-hidden="false"] .auras-filters__scrim{opacity:1}
.auras-filters__panel{
  position:absolute;
  inset-inline:0;
  bottom:0;
  max-height:80vh;
  background:var(--n-0);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:0 -12px 40px rgba(28,34,94,.2);
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform var(--dur-base) var(--ease-out);
}
.auras-filters[aria-hidden="false"] .auras-filters__panel{transform:translateY(0)}
.auras-filters__grip{
  padding:var(--sp-3) 0 var(--sp-1);
  display:flex;
  justify-content:center;
}
.auras-filters__grip span{
  width:40px;height:4px;
  border-radius:var(--r-pill);
  background:var(--n-200);
}
.auras-filters__head{
  padding:var(--sp-2) var(--sp-5) var(--sp-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.auras-filters__head strong{font-size:20px;font-weight:var(--fw-semibold);color:var(--auras-navy)}
.auras-filters__reset{font-size:14px;color:var(--auras-blue-ink);font-weight:var(--fw-medium)}
.auras-filters__body{
  flex:1;
  padding:0 var(--sp-5);
  display:flex;
  flex-direction:column;
  gap:22px;
  overflow-y:auto;
}
.auras-filters__foot{
  padding:var(--sp-4) var(--sp-5) var(--sp-6);
  border-top:1px solid var(--border-subtle);
  background:var(--n-0);
}
/* `min-inline-size:0` — не украшение: у `<fieldset>` он по умолчанию
   `min-content`, и поля цены не дают колонке фильтров сузиться до 280px.
   Наружу это выходит горизонтальной полосой прокрутки внутри колонки. */
.auras-facet{display:flex;flex-direction:column;gap:var(--sp-3);min-inline-size:0}
.auras-facet__t{
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--n-500);
}
.auras-facet__range{display:flex;gap:10px}
.auras-facet__range .au-input{flex:1;min-width:0}

/* ── С 768 шторка распрямляется в колонку слева ──────────────────────── */

/* Правило живёт ЗДЕСЬ, а не в `10-catalog.css`: базовые `.auras-filters`
   выше в этом же файле, а файл склеивается ПОСЛЕ базового. Оставь этот блок
   там — и `position:fixed; visibility:hidden` перебьёт его по каскаду
   (одинаковая специфичность, побеждает последний), и колонка фильтров на
   десктопе просто не появится. */
@media (min-width:768px){
  /* Липнет ПАНЕЛЬ, а не колонка: колонка при `align-items:start` высотой в
     своё содержимое, и прилипать внутри неё было бы некуда. Поэтому обёртка
     растягивается на всю высоту выдачи, а панель ездит внутри неё и
     останавливается под липкой шапкой сайта. */
  .auras-filters{
    position:static;
    visibility:visible;
    grid-column:1;
    grid-row:1/999;
    align-self:stretch;
    /* z-index шторки (60) обязан уехать: колонка — grid-item, а у него z-index
       работает и без позиционирования. Слой 60 равен слою шторки бургера, и
       колонка, идущая в разметке позже, выигрывала — фильтры рисовались поверх
       открытого меню, а панель меню казалась полупрозрачной. */
    z-index:auto;
  }
  .auras-filters__scrim,
  .auras-filters__grip{display:none}
  /* Панель перестаёт быть карточкой: в макете колонка живёт прямо на белом,
     а разделителями служат линии между фасетами. */
  .auras-filters__panel{
    position:sticky;
    top:calc(var(--au-header-row) + var(--sp-4));
    max-height:calc(100vh - var(--au-header-row) - var(--sp-8));
    transform:none;
    border-radius:0;
    box-shadow:none;
    background:none;
    overflow-y:auto;
    scrollbar-width:thin;
    /* Полоса прокрутки съедает край колонки — счётчики значений упирались
       бы в неё вплотную. 16px, а не 8: оверлейная полоса (Windows, macOS с
       «показывать при прокрутке») ширины в разметке не занимает и рисуется
       ПОВЕРХ контента — при узком отступе она перечёркивает счётчики. */
    padding-inline-end:var(--sp-4);
    scrollbar-gutter:stable;
    /* Панель прокручивается до конца — без нижнего поля последний фасет
       (цена) упирается в подвал страницы. */
    padding-block-end:var(--sp-6);
  }
  .auras-filters__head{padding:var(--sp-1) 0 var(--sp-3)}
  .auras-filters__head strong{font-size:16px}
  /* Прокручивается панель целиком, а не её тело: два вложенных скроллера
     дают две полосы на одной колонке. */
  .auras-filters__body{padding:0;gap:var(--sp-4);overflow:visible}
  .auras-filters__foot{display:none}

  /* Компактная строка фасета живёт НЕ здесь, а в `11-wordpress.css`: базовые
     `.auras-facet__o` и `.au-input` объявлены там, а тот файл склеивается
     ПОЗЖЕ — при равной специфичности медиазапрос отсюда проигрывает ему. */
  .auras-facet{gap:10px}
}

/* ---- 10b-catalog-wide.css ---- */
/* Каталог: широкие ширины и врезка гида (выгрузка 19.08, `Screen-Catalog`).

   Литерный файл рядом с `10-catalog.css` и `10a-filters.css`:
   `build-theme.sh` склеивает по алфавиту при `LC_ALL=C`, и литера удерживает
   эти правила сразу за базовыми, где им место в каскаде (design-assets.md §1a).
   Разделены они по размеру файла, а не по смыслу: базовый упёрся в soft cap
   300 строк. */

/* Ширина колонки фильтров, поля шапки и кегли — только с 1200: на планшете
   колонка уже (180 в макете), а заголовок в 48px там занял бы весь экран. */
@media (min-width:1200px){
  .auras-cat__layout{
    max-width:var(--page-max);
    margin-inline:auto;
    grid-template-columns:220px minmax(0,1fr);
    column-gap:56px;
  }
  .auras-cat__grid{gap:40px 28px;padding:20px 0 0}
  .auras-cat__more{padding:48px 0 72px}
  .auras-cat__body{
    padding:40px max(100px, calc((100% - var(--page-max)) / 2));
    gap:10px;
  }
  .auras-cat__title{font-size:44px;line-height:1.04}
  .auras-cat__lead{font-size:16px;line-height:1.6}
}

/* ── Врезка «Как выбрать» и чипы групп фильтров ─────────────────────── */

/* Врезка занимает ячейку сетки и живёт только с 768: до этой ширины сетка в
   две колонки, и врезка выбила бы ритм (`template-parts/catalog/guide.php`). */
.auras-cat__guide{display:none}

.auras-cat__ctl--facet{
  flex:0 0 auto;
  white-space:nowrap;
}

@media (min-width:768px){
  /* Врезка занимает две ячейки сетки и стоит на тёмной небуле — так её рисует
     макет. Текст прижат к низу: сверху остаётся воздух с текстурой. */
  .auras-cat__guide{
    display:flex;
    grid-column:span 2;
    min-height:280px;
    flex-direction:column;
    justify-content:flex-end;
    gap:12px;
    padding:36px;
    color:var(--n-0);
    background:linear-gradient(rgba(11,16,38,.72),rgba(11,16,38,.88)),var(--tex-nebula) center/cover;
  }
  .auras-cat__guide-t{
    font-size:var(--fs-caption);
    font-weight:var(--fw-semibold);
    letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
  }
  .auras-cat__guide-h{
    margin:0;
    max-width:420px;
    font-size:26px;
    font-weight:var(--fw-semibold);
    letter-spacing:var(--ls-display);
    line-height:1.15;
  }
  .auras-cat__guide-x{
    margin:0;
    max-width:460px;
    font-size:var(--fs-body);
    line-height:1.6;
    color:rgba(255,255,255,.75);
  }
  .auras-cat__guide-go{
    padding-top:4px;
    font-size:var(--fs-body);
    font-weight:var(--fw-semibold);
    color:var(--n-0);
  }
  .auras-cat__guide-go:hover{color:var(--n-0)}
}

/* ---- 11-wordpress.css ---- */
/* Слой WordPress: то, чего нет в дизайн-системе, но что выводит ядро и
   WooCommerce. Держим отдельным файлом, а не правками в 01–10: те перенесены
   из макета один в один, и следующая итерация дизайна перезапишет их целиком
   (design-assets.md §1). Всё, что здесь, — наше, не дизайнерское. */

/* ── Ядро WordPress ─────────────────────────────────────────────────── */

/* Атрибут `hidden` обязан побеждать наши `display:*`. Правило браузера по
   умолчанию слабее любого селектора с классом, и счётчик, который JS прячет
   через `hidden`, оставался бы на экране с нулём. */
[hidden]{display:none !important}

/* Ядро и плагины печатают свой класс для скринридеров. Приводим к нашему,
   иначе «Пропустить к содержимому» и подписи форм видны глазом. */
.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Ссылка «к содержимому» обязана становиться видимой по фокусу — иначе она
   бесполезна ровно тем, для кого сделана. */
.auras-skip:focus{
  position:fixed;
  top:var(--sp-3);left:var(--sp-3);
  z-index:1000;
  width:auto;height:auto;
  clip:auto;
  margin:0;padding:var(--sp-3) var(--sp-4);
  background:var(--auras-navy);
  color:var(--n-0);
  border-radius:var(--r-md);
}

.alignleft{float:left;margin:0 var(--sp-5) var(--sp-4) 0}
.alignright{float:right;margin:0 0 var(--sp-4) var(--sp-5)}
.aligncenter{display:block;margin-inline:auto}
.alignwide,.alignfull{margin-inline:calc(var(--au-page-pad) * -1);max-width:100vw}
.wp-caption{max-width:100%}
.wp-caption-text{font:var(--text-caption);color:var(--text-muted);margin-top:var(--sp-2)}

/* ── Счётчик корзины ────────────────────────────────────────────────── */

/* Узел обязан существовать в DOM всегда: ajax WooCommerce подменяет его по
   селектору, и при пустой корзине заменять было бы нечего (inc/cart.php).
   Класс у бейджа корзины свой — фрагмент заменяет ВСЕ совпадения селектора, и
   общий с бейджем сравнения `.auras-header__count` подменял бы и его. Внешний
   вид у обоих один и задан в 05-header.css. */
/* Бейджей два — в шапке и в таб-баре, и прятать надо оба: у таб-бара свой
   класс, и без него на телефоне на корзине висел ноль. */
.auras-header__cart-count.is-empty,
.auras-tab__cart-count.is-empty,
.auras-drawer__cart-count.is-empty{display:none}

/* ── Цена ───────────────────────────────────────────────────────────── */

/* WooCommerce отдаёт цену готовой разметкой `<del>старая</del> <ins>новая</ins>`
   — только так корректно выводятся диапазоны вариативных товаров и налог.
   Поэтому не переписываем её своими `au-price__now/was`, а красим как их. */
.au-price{gap:var(--sp-2)}
.au-price del,
.au-price ins{text-decoration:none}
.au-price ins,
.au-price > .woocommerce-Price-amount{
  font:var(--text-body-lg);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
}
.au-price del{
  font:var(--text-body-sm);
  color:var(--text-faint);
  text-decoration:line-through;
  order:2;
}
.au-price .woocommerce-Price-currencySymbol{font-weight:inherit}

/* ── Фасеты каталога ────────────────────────────────────────────────── */

/* В версии на PrestaShop разметку фильтров рисовал модуль, и стилей под неё в
   выгрузке макета нет: 10-catalog.css оформляет только контейнеры (.auras-facet,
   .auras-facet__range) и ссылается на `.au-input`, которого в дизайн-системе
   тоже не оказалось. Здесь мы рисуем фасеты сами, поэтому недостающее лежит
   тут, а не в 10-catalog.css — тот перезапишется следующей выгрузкой дизайна.
   Приедет макет фильтров — сверить имена и перенести туда. */

.au-input{
  min-height:var(--control-h);
  padding:0 var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  background:var(--n-0);
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--auras-navy);
}
.au-input:focus{outline:2px solid var(--auras-blue-ink);outline-offset:1px}

/* Разделитель и верхний отступ — у КАЖДОГО фасета, включая первый: на
   `.auras-facet + .auras-facet` первый оставался прижатым к шапке и без линии,
   то есть читался как часть заголовка «Фильтры». */
.auras-facet{border:0;margin:22px 0 0;padding:0}
/* Разделитель рисует псевдоэлемент, а не `border-top` фасета: `<legend>`
   прорезает в рамке `<fieldset>` дырку по своей ширине, и линия обрывалась
   справа от заголовка. */
.auras-facet::before{content:"";flex:0 0 1px;background:var(--border-subtle)}
.auras-facet__t{padding:0}
.auras-facet__o{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:var(--control-h);
  font-size:14px;
  color:var(--n-600);
  cursor:pointer;
}
.auras-facet__o input{
  width:20px;height:20px;
  accent-color:var(--auras-navy);
  flex:0 0 auto;
  cursor:pointer;
}
.auras-facet__o span:first-of-type{flex:1;min-width:0}
.auras-facet__n{color:var(--n-400);font-size:var(--fs-caption)}

/* С 768 шторка распрямляется в колонку слева (`10a-filters.css`), и там строка
   в 44px под палец не нужна — курсору хватает 28px, иначе один фасет с
   размерами занимает весь экран и до цены приходится скроллить.
   Блок стоит ЗДЕСЬ, а не рядом с остальной колонкой в `10a-filters.css`:
   базовые правила выше в этом же файле, а файл склеивается после `10a`. */
@media (min-width:768px){
  /* `min-height:0` — не мелочь: пока строка выше своего текста, половина
     запаса уходит в зазор между строками, и заголовок фасета сидит к первому
     значению ближе остальных. Сняли высоту — расстояние везде задаёт один
     `gap` фасета, и равенство получается по построению, а не подгонкой. */
  .auras-facet{margin-top:var(--sp-4)}
  .auras-facet__o{min-height:0;gap:var(--sp-2);font-size:13px}
  .auras-facet__o input{width:16px;height:16px}
  .auras-facet__range .au-input{height:36px;font-size:13px}
}

/* ── Контентные страницы ────────────────────────────────────────────── */

.auras-page{padding:var(--au-section-y) var(--au-page-pad)}
.auras-page__head{margin-bottom:var(--sp-6)}
.auras-page__title{
  font:var(--text-h2);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  color:var(--auras-navy);
  margin:0 0 var(--sp-3);
}
.auras-page__lead{font-size:14px;color:var(--n-600);line-height:1.6;margin:0}
.auras-page__actions{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}

.auras-entry + .auras-entry{margin-top:var(--sp-7);padding-top:var(--sp-7);border-top:1px solid var(--border-subtle)}
.auras-entry__body{color:var(--n-600);line-height:1.7}
.auras-entry__body > * + *{margin-top:var(--sp-4)}
.auras-entry__body img{max-width:100%;height:auto;border-radius:var(--r-md)}
.auras-entry__body h2,
.auras-entry__body h3{color:var(--auras-navy);font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading)}

.auras-pagination{margin-top:var(--sp-7)}
.auras-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--control-h);min-height:var(--control-h);
  padding:0 var(--sp-3);
  border:1px solid var(--border-subtle);border-radius:var(--r-md);
  color:var(--n-600);
}
.auras-pagination .page-numbers.current{background:var(--auras-navy);border-color:var(--auras-navy);color:var(--n-0)}
.auras-pagination .page-numbers:hover{text-decoration:none}

.auras-searchform{display:flex;gap:var(--sp-3);width:100%;max-width:420px}
.auras-searchform input[type="search"]{
  flex:1;min-height:var(--control-h);
  padding:0 var(--sp-4);
  border:1px solid var(--border-subtle);border-radius:var(--r-md);
  font-family:inherit;font-size:var(--fs-body);color:var(--auras-navy);
  background:var(--n-0);
}

@media (min-width:768px){
  .auras-page{padding:var(--sp-9) var(--au-page-pad)}
  .auras-page__actions{flex-direction:row;align-items:center}
}

/* `.au-pc` спозиционирован здесь, а не в файле дизайна.

   В дизайн-системе сердечко лежит ВНУТРИ `.au-pc__media`, который и так
   `position:relative`. У нас `.au-pc__media` — это ссылка на товар, а <button>
   внутри <a> невалиден: браузер разбирает такую вложенность по-своему и
   выносит кнопку из ссылки. Поэтому сердечко вынесено соседом, и точкой
   отсчёта для него становится сама карточка. */
.au-pc{position:relative}

/* Кнопки WooCommerce выглядят как кнопки дизайн-системы.

   Фильтра на классы кнопки в WooCommerce нет (`variation-add-to-cart-button.php`
   печатает `button alt` жёстко), а переопределять шаблон ради одной строки —
   форк. Поэтому набор деклараций повторён на его селекторах; ЗНАЧЕНИЯ берутся из
   тех же токенов, что и `.au-btn`, — поменяется токен, поменяется и здесь.

   Правило общее, не только для карточки: те же классы придут в корзине и на
   оформлении. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.single_add_to_cart_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font:var(--text-body);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-body);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:var(--t-control);
  white-space:nowrap;
  text-decoration:none;
  height:var(--control-h);
  padding:0 var(--sp-6);
  background:var(--auras-navy);
  color:var(--n-0);
}

.woocommerce .button:hover,
.single_add_to_cart_button:hover{background:#151A4B;color:var(--n-0)}
.woocommerce .button:active,
.single_add_to_cart_button:active{transform:scale(var(--press-scale))}
.woocommerce .button:disabled,
.single_add_to_cart_button:disabled{opacity:.42;cursor:not-allowed}

/* «от N» держим одним элементом строки: `.au-price` — flex с переносом
   (04-components.css), и метка иначе уезжает на свою строку. */
.auras-price-from{display:inline-flex;align-items:baseline;gap:4px}

/* ── Поиск на странице каталога ───────────────────────────────────────── */

/* Экрана с этим полем в макете нет — есть только правило «таб „Каталог“
   открывает каталог с поисковой строкой вверху» (HANDOFF, «Навигация»).
   Поэтому вёрстка живёт здесь, а не в `10-catalog.css`: нарисует дизайн —
   переносим туда тем же изменением (design-assets.md §1a). */

.auras-cat__search{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  height:44px;
  margin-top:var(--sp-4);
  padding-inline:var(--sp-4);
  border-radius:var(--r-pill);
  border:1px solid var(--border-subtle);
  background:var(--n-0);
  color:var(--n-500);
}
.auras-cat__search-ic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer}
.auras-cat__search input[type="search"]{
  flex:1;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  outline:none;
  font:inherit;
  color:var(--auras-navy);
}
.auras-cat__search input[type="search"]::placeholder{color:var(--n-500)}
.auras-cat__search input[type="search"]::-webkit-search-cancel-button{display:none}

/* С 768 поле возвращается в шапку — второе здесь было бы дублем. */
@media (min-width:768px){
  .auras-cat__search{display:none}
}

/* ---- 11a-wc-forms.css ---- */
/* Формы и уведомления WooCommerce — то, что печатает ядро магазина и чего в
   выгрузке дизайна нет отдельным экраном.

   ПОЧЕМУ ЭТОТ ФАЙЛ ВООБЩЕ ЕСТЬ. Дефолтные стили плагина сняты целиком
   (`woocommerce_enqueue_styles` → пустой массив, `inc/woocommerce.php`), и
   форма, напечатанная ядром, приезжает на витрину вовсе без оформления:
   поля в дефолтном виде браузера, метки вплотную к инпутам, уведомления
   неотличимы от текста. Это касается не только оформления заказа — те же
   `.form-row` печатают кабинет покупателя и вход. Форма отзыва товара — нет:
   `comment_form()` печатает `.comment-form-author` и родню, поэтому её поля
   перечислены здесь отдельной веткой селекторов, а не подхватываются сами.

   ПОЧЕМУ ЛИТЕРА `11a`, А НЕ СЛЕДУЮЩИЙ НОМЕР. Нумерованные файлы — территория
   дизайна, следующая выгрузка перезапишет их целиком (design-assets.md §1a).
   Разметку форм рисует ядро, а не макет, поэтому правила наши и живут при
   номере `11`; сам `11-wordpress.css` у soft cap 300 строк, дробим литерой —
   она же удерживает правила вплотную к нему в каскаде.

   Оформление поля снято с экрана «M · Оформление гостем» выгрузки 19.08:
   пилюля 48px, метка 13px над полем. Тот же контрол уже собран для шторки
   города (`.auras-city__field`, 11b-city.css) — высота там тоже прямым
   значением: своего токена под 48px в дизайн-системе нет, а заводить его в
   `02-screen.css` значит отдать его следующей выгрузке. */

/* ── Строка формы ────────────────────────────────────────────────────── */

.woocommerce form .form-row,
.woocommerce-page form .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 var(--sp-4);
  padding:0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label{
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium);
  line-height:1.2;
  color:var(--n-600);
}

/* «(необязательно)» и звёздочку обязательного поля ядро печатает внутри метки.
   В макете это приписка тем же кеглем, но бледнее, а не акцент. */
.woocommerce form .form-row label .optional{
  font-weight:var(--fw-regular);
  color:var(--n-500);
}
.woocommerce form .form-row label .required,
.woocommerce form .form-row label abbr.required{
  border:0;
  text-decoration:none;
  color:var(--n-400);
}

.woocommerce-input-wrapper{display:block;width:100%}

/* ── Контролы ────────────────────────────────────────────────────────── */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
#review_form input[type="text"],
#review_form input[type="email"],
#review_form select,
#review_form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border-subtle);
  background:var(--n-0);
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--auras-navy);
  transition:var(--t-control);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
#review_form input[type="text"],
#review_form input[type="email"],
#review_form select{
  height:48px;
  padding:0 18px;
  border-radius:var(--r-pill);
}

.woocommerce form .form-row textarea,
#review_form textarea{
  min-height:80px;
  padding:14px 18px;
  border-radius:var(--r-xl);
  line-height:1.5;
  resize:vertical;
}

.woocommerce form .form-row ::placeholder,
#review_form ::placeholder{color:var(--n-400);opacity:1}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
#review_form input:focus,
#review_form select:focus,
#review_form textarea:focus{
  outline:0;
  border-color:var(--auras-blue-ink);
  box-shadow:var(--sh-focus);
}

/* Стрелку `<select>` браузер рисует по-своему и вплотную к краю пилюли.
   Рисуем свою, чтобы поле не отличалось от соседних инпутов. */
.woocommerce form .form-row select{
  appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236F7B9C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
}

/* ── Ошибка у поля ───────────────────────────────────────────────────── */

/* Сводки ошибок сверху в макете нет — ошибка живёт у поля (раздел 04
   выгрузки). Класс ставит валидатор ядра на `.form-row`. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea{
  border-color:var(--status-danger);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select{
  border-color:var(--border-default);
}

/* ── Ширины строк ────────────────────────────────────────────────────── */

/* `form-row-first` / `-last` ядро задумывало как половинки, а `-wide` — как
   строку целиком. До 768 колонка одна: на 375 «Имя» и «Фамилия» рядом дают
   поле в 150px, куда фамилия не влезает. С 768 встают парой, как в макете.

   Сеткой, а не флоатами оригинала: ядро печатает поля плоским списком в
   порядке `data-priority`, и половинка, оставшаяся без пары (адресные поля
   идут по одной), у флоатов утащила бы за собой следующую строку. */
@media (min-width:768px){
  .woocommerce form .woocommerce-billing-fields__field-wrapper,
  .woocommerce form .woocommerce-shipping-fields__field-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:var(--sp-4);
  }
  .woocommerce form .form-row-first{grid-column:1}
  .woocommerce form .form-row-last{grid-column:2}
  .woocommerce form .form-row-wide,
  .woocommerce form .form-row.notes{grid-column:1 / -1}
}

/* ── Галочка в строке формы ──────────────────────────────────────────── */

.woocommerce form .form-row.woocommerce-form__label-for-checkbox,
.woocommerce-form__label-for-checkbox{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:var(--sp-3);
  font-size:var(--fs-body-sm);
  line-height:1.5;
  color:var(--n-600);
  cursor:pointer;
}
.woocommerce-form__input-checkbox,
.woocommerce form .form-row input[type="checkbox"]{
  flex:0 0 auto;
  width:22px;height:22px;
  margin:0;
  accent-color:var(--auras-navy);
  cursor:pointer;
}

/* ── Уведомления ─────────────────────────────────────────────────────── */

/* Ядро печатает три вида сообщений одинаковой разметкой, отличая классом.
   Без стилей они выглядят обычным списком и теряются на странице. */
.woocommerce-notices-wrapper:empty{display:none}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin:0 0 var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  list-style:none;
  font-size:var(--fs-body-sm);
  line-height:1.55;
  color:var(--n-700);
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li{margin:0}

.woocommerce-error{
  border-color:var(--status-danger);
  background:var(--status-danger-soft);
  color:var(--auras-crimson);
}
.woocommerce-message{
  border-color:var(--status-success);
  background:var(--status-success-soft);
  color:var(--status-success);
}
.woocommerce-info{background:var(--status-info-soft)}

/* Кнопка внутри уведомления («Просмотр корзины») уезжает в конец строки у
   ядра флоатом — колонка выше делает это лишним и ломает отступ. */
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button{float:none;align-self:flex-start}

/* ── Кнопки ядра ─────────────────────────────────────────────────────── */

/* Ядро и плагины печатают `.button` там, куда нашего класса не подставить
   (уведомления, кабинет, формы входа). Приводим к виду `.au-btn--primary`,
   а не переопределяем шаблоны ради одного класса. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  height:var(--control-h-lg);
  padding:0 var(--sp-8);
  border:0;
  border-radius:var(--r-pill);
  background:var(--auras-navy);
  font-family:inherit;
  font-size:var(--fs-body-lg);
  font-weight:var(--fw-medium);
  line-height:1;
  color:var(--n-0);
  text-align:center;
  cursor:pointer;
  transition:var(--t-control);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--au-navy-hover);
  color:var(--n-0);
  text-decoration:none;
  box-shadow:var(--sh-2);
  transform:translateY(var(--hover-lift));
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active{transform:scale(var(--press-scale))}
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce button.button[disabled]{
  opacity:.42;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ---- 11b-city.css ---- */
/* Город доставки: блок в шторке меню и шторка выбора.

   Номер `11b`, а не следующий свободный: нумерованные файлы — территория
   дизайна, следующая выгрузка перезапишет их целиком, а этих двух узлов в
   макете нет. В выгрузке 19.08 нарисованы блок города внутри меню-шторки и
   «Шторка города EMU» на экране оформления, но разметки под витрину (шторка,
   которую открывают откуда угодно) там нет — появится, перенесём в нумерованный
   файл экрана тем же изменением (`design-assets.md` §1a).

   `11` — наш номер, литера ставит правила вплотную к нему в каскаде. */

/* ── Город в шторке меню ──────────────────────────────────────────────── */

.auras-drawer__city{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-4);
  /* Блок лежит на тёмной панели шторки (05a-drawer.css), поэтому и рамка, и
     текст берутся из токенов навигации, а не из светлой палитры. */
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-md);
}
.auras-drawer__city-ic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--au-nav-fg)}
.auras-drawer__city-body{display:flex;flex-direction:column;flex:1;min-width:0}
.auras-drawer__city-label{font-size:var(--fs-caption);color:rgba(255,255,255,.6)}
.auras-drawer__city-name{
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  color:var(--au-nav-fg);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.auras-drawer__city-change{
  flex:0 0 auto;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  color:var(--au-nav-fg);
  cursor:pointer;
}

/* ── Шторка выбора города ─────────────────────────────────────────────── */

/* z-index выше шторки меню (60): выбор города открывают из неё, и панель
   обязана лечь поверх, а не под. */
.auras-city{
  position:fixed;
  inset:0;
  z-index:65;
  visibility:hidden;
}
.auras-city[aria-hidden="false"]{visibility:visible}

.auras-city__scrim{
  position:absolute;
  inset:0;
  background:rgba(28,34,94,.42);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.auras-city[aria-hidden="false"] .auras-city__scrim{opacity:1}

/* На телефоне шторка приезжает снизу — как остальные шторки макета. */
.auras-city__panel{
  position:absolute;
  inset-inline:0;
  bottom:0;
  max-height:86vh;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-5);
  border-start-start-radius:var(--r-lg);
  border-start-end-radius:var(--r-lg);
  background:var(--n-0);
  box-shadow:var(--sh-4);
  transform:translateY(100%);
  transition:transform var(--dur-base) var(--ease-out);
}
.auras-city[aria-hidden="false"] .auras-city__panel{transform:translateY(0)}

.auras-city__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.auras-city__title{margin:0;font:var(--text-h4);color:var(--auras-navy)}
.auras-city__lead{margin:0;font:var(--text-body-sm);line-height:1.5;color:var(--n-600)}

.auras-city__field{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  height:48px;
  padding-inline:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  color:var(--n-500);
}
.auras-city__field-ic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer}
.auras-city__field input{
  flex:1;
  min-width:0;
  border:0;
  padding:0;
  background:none;
  outline:none;
  font:inherit;
  font-size:var(--fs-body);
  color:var(--auras-navy);
}
.auras-city__field input::placeholder{color:var(--n-500)}

.auras-city__list{
  list-style:none;
  margin:0;
  padding:0;
  overflow-y:auto;
  flex:1;
}
.auras-city__item{
  width:100%;
  min-height:var(--control-h);
  padding:var(--sp-3) 0;
  display:flex;
  align-items:center;
  text-align:start;
  background:none;
  border:0;
  border-top:1px solid var(--border-subtle);
  font:inherit;
  font-size:var(--fs-body);
  color:var(--auras-navy);
  cursor:pointer;
}
.auras-city__item:hover{color:var(--auras-blue-ink)}

.auras-city__note,
.auras-city__current{margin:0;font:var(--text-body-sm);color:var(--n-600)}

/* С 768 это уже не шторка снизу, а окно по центру: экран широкий, и панель во
   всю ширину выглядит поломкой. */
@media (min-width:768px){
  .auras-city{display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
  .auras-city__panel{
    position:relative;
    inset:auto;
    width:min(420px,100%);
    max-height:70vh;
    border-radius:var(--r-lg);
    transform:translateY(12px);
    opacity:0;
    transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
  }
  .auras-city[aria-hidden="false"] .auras-city__panel{transform:translateY(0);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .auras-city__scrim,
  .auras-city__panel{transition:none}
}

/* ── Плашка «Доставка в N?» ───────────────────────────────────────────── */

/* Идёт сразу под шапкой и в потоке страницы, а не поверх контента: вопрос не
   срочный, перекрывать им товар незачем. Спрашивается один раз. */
.auras-city-ask{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--au-page-pad);
  border-bottom:1px solid var(--border-subtle);
  background:var(--line-mist);
}
.auras-city-ask__text{margin:0;flex:1;min-width:200px;font-size:var(--fs-body-sm);color:var(--auras-navy)}
.auras-city-ask__why{display:block;color:var(--n-600);font-size:var(--fs-caption);line-height:1.4}
.auras-city-ask__actions{display:flex;gap:var(--sp-2);flex:0 0 auto}

/* ---- 11c-select2.css ---- */
/* Виджет выбора select2 (у WooCommerce — selectWoo).

   ГРАБЛЯ, РАДИ КОТОРОЙ ЭТОТ ФАЙЛ ЕСТЬ. `woocommerce_enqueue_styles` →
   пустой массив снимает только три листа плагина (`woocommerce-layout`,
   `-smallscreen`, `-general`): фильтр стоит внутри `WC_Frontend_Scripts::
   get_styles()`. Лист `select2` регистрируется и подключается ОТДЕЛЬНО, в
   `load_scripts()`, и фильтр его не видит — на корзине, оформлении и в
   кабинете он приезжает на витрину всегда. То есть базовый скин у виджета
   есть, и здесь мы его не пишем заново, а перекрашиваем под наше поле.

   Считать иначе — типовая ошибка: «стили плагина сняты, значит и этих нет»,
   и следом рождается втрое больший файл, который дерётся с чужим каскадом.

   Виджет вешается на три поля оформления: страна и область — штатные
   WooCommerce, город — наш (`select.auras-emu-city`, модуль EMU подкладывает
   в него справочник по мере ввода). Все три обязаны выглядеть одинаково с
   соседними инпутами, иначе форма распадается на два разных вида полей.

   Литера `11c`: правила наши, не дизайнерские, и живут при номере `11`
   (design-assets.md §1a). */

/* ── Закрытый вид ────────────────────────────────────────────────────── */

.woocommerce form .form-row .select2-container{width:100% !important}

.woocommerce form .form-row .select2-container .select2-selection--single{
  display:flex;
  align-items:center;
  height:48px;
  padding:0 18px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  background:var(--n-0);
  transition:var(--t-control);
}
.woocommerce form .form-row .select2-container--focus .select2-selection--single,
.woocommerce form .form-row .select2-container--open .select2-selection--single{
  border-color:var(--auras-blue-ink);
  box-shadow:var(--sh-focus);
}
.woocommerce form .form-row.woocommerce-invalid .select2-selection--single{
  border-color:var(--status-danger);
}

.woocommerce form .form-row .select2-selection__rendered{
  flex:1;
  min-width:0;
  padding:0 !important;
  line-height:1.2;
  font-size:var(--fs-body);
  color:var(--auras-navy);
}
.woocommerce form .form-row .select2-selection__placeholder{color:var(--n-400)}

/* Стрелку и крестик виджет рисует своими квадратами по краям. Свои края у
   пилюли уже заданы паддингом, поэтому у элементов снимается позиционирование
   и они просто встают в строку. */
.woocommerce form .form-row .select2-selection__arrow{
  position:static;
  flex:0 0 auto;
  width:12px;height:8px;
  margin-left:var(--sp-3);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236F7B9C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 8px no-repeat;
}
.woocommerce form .form-row .select2-selection__arrow b{display:none}
.woocommerce form .form-row .select2-selection__clear{
  order:1;
  margin-left:var(--sp-2);
  color:var(--n-400);
}

/* ── Выпадашка ───────────────────────────────────────────────────────── */

/* Панель виджет печатает в конец `<body>`, вне формы, — селекторы выше сюда
   не достают, и правила идут от корня. */
.select2-dropdown{
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-0);
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.select2-search--dropdown{padding:var(--sp-3)}
.select2-container .select2-search--dropdown .select2-search__field{
  height:var(--control-h);
  padding:0 var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--auras-navy);
}
.select2-container .select2-search--dropdown .select2-search__field:focus{
  outline:0;
  border-color:var(--auras-blue-ink);
}

.select2-container .select2-results__option{
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-body);
  color:var(--n-700);
}
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted[data-selected]{
  background:var(--n-100);
  color:var(--auras-navy);
}
.select2-container .select2-results__option[aria-selected="true"],
.select2-container .select2-results__option[data-selected="true"]{
  background:var(--auras-navy);
  color:var(--n-0);
}
/* «Ищем город…» и «Такого города нет в списке EMU» — не варианты выбора, а
   состояние поиска: подсветку наведения им гасим, кликать там нечего. */
.select2-container .select2-results__message{
  color:var(--n-500);
  font-size:var(--fs-body-sm);
}

/* ---- 12-product.css ---- */
/* Экран «M · Карточка товара».

   Каркас экрана, колонка покупки, вкладки и похожие товары. Галерея — в
   `13-gallery.css`, выбор вариации и панель покупки — в `14-buy.css`: экран
   большой, и одним файлом он выходит за soft cap (code-style.md §1).

   До 768 — одна колонка, шапка сайта и таб-бар спрятаны. С 768 — две колонки,
   шапка и хлебные крошки на месте. С 1200 контент 1240.

   Значительная часть селекторов здесь — разметка WooCommerce
   (`.woocommerce-tabs`, `.shop_attributes`, `.related`). Так и задумано: мы её
   не переписываем, а оформляем — переопределённый шаблон вместо стилей был бы
   молчаливым форком (woocommerce-canon.md §2). */

.auras-single{
  display:flex;
  flex-direction:column;
  background:var(--n-0);
}

/* Полоса возврата вместо шапки: экран покупки на телефоне ничем не уводит
   из карточки — так нарисован макет. */
/* Подвал на карточке скрыт только на телефоне: там снизу липкая панель покупки
   и таб-бар, и карта сайта под ними — лишний экран прокрутки. С 768 подвал
   печатается, как и рисует макет (`HANDOFF.md`). */
@media (max-width:767.98px){
  .single-product .auras-footer{display:none}
}

/* Крошки видны на всех ширинах: выгрузка 19.08 ставит их прямо под шапкой,
   вместо прежней полосы возврата. */
.auras-single__crumbs{padding:12px var(--au-page-pad);font-size:var(--fs-caption);color:var(--n-500)}
/* ── Колонка покупки ──────────────────────────────────────────────────── */

.auras-single__buy{
  padding:20px var(--au-page-pad) 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.auras-single__eyebrow{
  font-size:var(--au-fs-eyebrow);
  font-weight:var(--fw-semibold);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--line);
}

.auras-single .product_title{
  font-size:30px;
  font-weight:var(--fw-semibold);
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
}

.auras-single .price{font:var(--text-h4);color:var(--text-strong)}
.auras-single .price del{color:var(--text-faint);font-weight:var(--fw-regular);margin-left:8px}
.auras-single .price ins{text-decoration:none}

.auras-single__stock{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  font:var(--text-body-sm);
  color:var(--status-success);
}

.auras-single__stock.is-out{color:var(--text-muted)}

.auras-single .woocommerce-product-details__short-description{
  font:var(--text-body);
  line-height:1.6;
  color:var(--text-muted);
}
/* ── Доставка, гарантия, самовывоз ────────────────────────────────────── */

.auras-single__trust{
  background:var(--n-50);
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.auras-single__trust-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font:var(--text-body-sm);
  color:var(--n-700);
}

.auras-single__trust-row b{font-weight:var(--fw-semibold)}
/* ── Вкладки и характеристики ─────────────────────────────────────────── */

.auras-single .woocommerce-tabs{padding:24px var(--au-page-pad) 0}
/* Разметка вкладок у WooCommerce своя (`ul.tabs > li > a`), вид — из
   дизайн-системы (`.au-tabs`, 04-components.css). Классы плагину не подменить,
   поэтому повторяем правило на его селекторах, значения — из тех же токенов. */
.auras-single .woocommerce-tabs ul.tabs{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:var(--sp-6);
  border-bottom:1px solid var(--border-subtle);
}

.auras-single .woocommerce-tabs ul.tabs li{
  margin:0;
  padding:0 0 var(--sp-3);
  font:var(--text-body);
  font-weight:var(--fw-medium);
  color:var(--text-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:var(--t-control);
}

.auras-single .woocommerce-tabs ul.tabs li.active{color:var(--auras-navy);border-bottom-color:var(--line)}
.auras-single .woocommerce-tabs ul.tabs a{color:inherit;text-decoration:none}
.auras-single .woocommerce-Tabs-panel{padding-top:4px}
.auras-single .woocommerce-Tabs-panel > h2{display:none}

.auras-single .shop_attributes{width:100%;border-collapse:collapse}
.auras-single .shop_attributes tr{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.auras-single .shop_attributes th{font:var(--text-body-sm);font-weight:var(--fw-regular);color:var(--text-muted);text-align:left;flex:0 0 auto}
.auras-single .shop_attributes td{font:var(--text-body-sm);font-weight:var(--fw-medium);text-align:right;margin:0}
.auras-single .shop_attributes td p{margin:0}

/* ── Похожие товары ───────────────────────────────────────────────────── */

.auras-single .related,
.auras-single .up-sells{padding:28px 0 0}
.auras-single .related > h2,
.auras-single .up-sells > h2{
  padding:0 var(--au-page-pad);
  font-size:22px;
  font-weight:var(--fw-semibold);
  letter-spacing:-.02em;
  margin:0 0 14px;
}

.auras-single .related .products,
.auras-single .up-sells .products{
  list-style:none;
  margin:0;
  display:flex;
  gap:12px;
  padding:0 var(--au-page-pad) 6px;
  overflow-x:auto;
  scrollbar-width:none;
}

.auras-single .related .products > li,
.auras-single .up-sells .products > li{flex:0 0 216px}
/* ── 768: две колонки ─────────────────────────────────────────────────── */

@media (min-width:768px){
  .auras-single{
    width:100%;
    max-width:var(--au-content-w);
    margin:0 auto;
    padding:24px var(--au-page-pad) 0;
    box-sizing:border-box;
  }

  .auras-single__crumbs{padding:0;margin-bottom:20px}

  .auras-single__top{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:40px;
    align-items:start;
  }

  .auras-single__buy{padding:0}

  .auras-single .woocommerce-tabs{padding:48px 0 0}
  .auras-single .related,
  .auras-single .up-sells{padding:48px 0 0}
  .auras-single .related > h2,
  .auras-single .up-sells > h2,
  .auras-single .related .products,
  .auras-single .up-sells .products{padding-left:0;padding-right:0}
}

@media (min-width:1200px){
  .auras-single__top{gap:64px}
  .auras-single .product_title{font-size:40px}
}

/* Аккордеоны до 768 (`assets/_dev/js/tabs.js`). Всё правило висит на классе
   `is-acc`, который вешает скрипт: без него панели остаются на месте и видны
   все сразу, а не пропадают вместе с заголовками.

   `!important` здесь необходим: штатный `wc-single-product` прячет неактивные
   панели инлайновым `display:none`, а инлайн бьёт обычное правило каскада. */
.auras-acc__head{
  display:none;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border:0;
  border-bottom:1px solid var(--border-subtle);
  background:none;
  color:inherit;
  font:inherit;
  font-weight:600;
  text-align:start;
  cursor:pointer;
}
.auras-acc__sign::before{content:'+';color:var(--n-400);font-size:20px;line-height:1}
.auras-acc__head[aria-expanded="true"] .auras-acc__sign::before{content:'−'}

@media (max-width:767.98px){
  .auras-single .woocommerce-tabs.is-acc{padding:24px 0 0}
  .auras-single .woocommerce-tabs.is-acc ul.tabs{display:none}
  .auras-single .woocommerce-tabs.is-acc .auras-acc__head{display:flex}
  .auras-single .woocommerce-tabs.is-acc .auras-acc__panel{display:none !important}
  .auras-single .woocommerce-tabs.is-acc .auras-acc__panel.is-open{
    display:block !important;
    padding:4px var(--au-page-pad) 20px;
  }
}

/* ---- 12a-reviews.css ---- */
/* Отзывы на карточке товара (выгрузка 19.08): строка рейтинга под названием и
   сводка с гистограммой во вкладке «Отзывы».

   Отдельным файлом от `12-product.css`: тот подходит к soft cap 300 строк
   (code-style.md §1). Литера в имени, чтобы `build-theme.sh` оставил правила
   рядом с карточкой в каскаде (design-assets.md §1a).

   Цифры сюда приходят из штатных отзывов WooCommerce, а не из макета —
   `inc/product-reviews.php`. */

.auras-rate{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
  font-size:var(--fs-body-sm);
  color:var(--n-500);
}
.auras-rate__link{color:inherit}
.auras-rate__link:hover{color:var(--text-link)}

/* ── Сводка отзывов ─────────────────────────────────────────────────── */

.auras-rev{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-6)}

.auras-rev__avg{margin:0;display:flex;align-items:baseline;gap:10px}
.auras-rev__num{
  font-size:44px;
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-display);
  line-height:1;
}
.auras-rev__count{font-size:var(--fs-body-sm);color:var(--n-500)}

.auras-rev__row{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--fs-caption);
  color:var(--n-500);
}
/* Ширины подписей фиксированы, чтобы полосы начинались и кончались по одной
   линии: «5 ★» и «100%» набираются разным числом знаков. */
.auras-rev__label{width:26px;flex:0 0 auto}
.auras-rev__share{width:32px;flex:0 0 auto;text-align:end}
.auras-rev__bar{
  flex:1;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--n-100);
  overflow:hidden;
}
.auras-rev__fill{display:block;height:100%;background:var(--auras-navy)}

.auras-rev__write{
  align-self:start;
  padding-top:var(--sp-1);
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  color:var(--text-link);
}

/* ── Сетка секции ───────────────────────────────────────────────────── */

/* Телефон: сводка над списком. С 768 — колонкой слева, как в макете (там 200px
   на планшете и 260 на 1440). */
.auras-reviews{display:flex;flex-direction:column;gap:var(--sp-5)}

@media (min-width:768px){
  .auras-reviews{display:grid;grid-template-columns:200px 1fr;gap:var(--sp-7);align-items:start}
  .auras-rev{margin-bottom:0}
  /* Отзывов нет — сводки нет, и колонка 200px зажала бы форму (единственного
     потомка) в свою ширину. */
  .auras-reviews > :only-child{grid-column:1/-1}
}

@media (min-width:1200px){
  .auras-reviews{grid-template-columns:260px 1fr;gap:var(--sp-9)}
}

/* Заголовок секции у нас несёт вкладка «Отзывы · N», штатный дублировал бы её.
   Скрыт визуально, а не удалён: секции нужен заголовок для скринридера. */
.auras-reviews .woocommerce-Reviews-title{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* ── Список отзывов ─────────────────────────────────────────────────── */

/* Список печатает WooCommerce (`ol.commentlist`), своего класса ему не подставить
   — шаблон мы не переопределяем. Лишние отзывы прячет скрипт атрибутом `hidden`,
   поэтому у скрытого элемента должно оставаться `display:none` и внутри flex. */
.woocommerce-Reviews .commentlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.woocommerce-Reviews .commentlist > li[hidden]{display:none}

.woocommerce-Reviews .comment_container{
  border:1px solid var(--border-subtle);
  border-radius:var(--r-card);
  padding:var(--sp-4) var(--sp-5);
}

/* Имя и оценка — в строку, текст отзыва под ними во всю ширину. Порядок узлов
   задаёт WooCommerce (оценка, мета, текст), поэтому раскладываем гридом, а не
   переопределяем `single-product/review.php` ради обёртки. */
.woocommerce-Reviews .comment-text{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--sp-2) var(--sp-3);
}
.woocommerce-Reviews .comment-text > .star-rating{grid-column:2;grid-row:1}
.woocommerce-Reviews .comment-text > .meta{grid-column:1;grid-row:1;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2)}
.woocommerce-Reviews .comment-text > .description{grid-column:1/-1;grid-row:2}
.woocommerce-Reviews .comment-text > .auras-revcard__date{grid-column:1/-1;grid-row:3;margin:0}

.woocommerce-Reviews .woocommerce-review__author{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.woocommerce-Reviews .woocommerce-review__verified{font-size:var(--fs-caption);font-style:normal;color:var(--status-success)}
.woocommerce-Reviews .woocommerce-review__published-date{font-size:var(--fs-caption);color:var(--text-faint)}
.woocommerce-Reviews .description p{margin:0 0 var(--sp-2);font-size:var(--fs-body-sm);line-height:var(--lh-relaxed);color:var(--text-body)}
.woocommerce-Reviews .description p:last-child{margin-bottom:0}

.woocommerce-noreviews,
.woocommerce-verification-required{margin:0;font-size:var(--fs-body-sm);color:var(--n-500)}

.auras-rev__more{
  display:block;
  margin-top:var(--sp-4);
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  color:var(--text-link);
  cursor:pointer;
}
.auras-rev__more:hover{color:var(--text-link-hover)}

/* ── Звёзды ─────────────────────────────────────────────────────────── */

/* Своя реализация: штатная приезжает со стилями WooCommerce, а те сняты целиком
   (woocommerce-canon.md §7) — без этих правил разметка `.star-rating` читается
   как текст «Rated 5 out of 5». Ширину серому слою перекрывает инлайновый
   `width` в процентах, который печатает `wc_get_rating_html()`. */
.star-rating{
  position:relative;
  display:inline-block;
  width:5.4em;
  height:1em;
  flex:0 0 auto;
  overflow:hidden;
  font-size:var(--fs-body-sm);
  line-height:1;
}
.star-rating::before,
.star-rating span::before{
  content:"\2605\2605\2605\2605\2605";
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  letter-spacing:.08em;
}
.star-rating::before{color:var(--n-200)}
.star-rating span{position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden;padding-block-start:1.5em}
.star-rating span::before{color:var(--auras-crimson)}
.star-rating .rating,
.star-rating span{white-space:nowrap}

/* ── Форма отзыва ───────────────────────────────────────────────────── */

#review_form_wrapper{margin-top:var(--sp-8)}
#review_form .comment-reply-title{display:block;margin-bottom:var(--sp-4);font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
#review_form .comment-form-rating{margin-bottom:var(--sp-4)}
#review_form label{display:block;margin-bottom:var(--sp-2);font:var(--text-label);color:var(--n-600)}

/* Вид самих полей повторяет формы ядра и живёт с ними в `11a-wc-forms.css`:
   `comment_form()` печатает их без `.form-row`, поэтому селекторы там названы
   явно. Здесь — только раскладка. */
#review_form p{margin:0 0 var(--sp-4)}
#review_form .required{color:var(--auras-crimson)}
/* Согласие на куки — единственная метка формы, стоящая ПОСЛЕ своего поля. */
#review_form .comment-form-cookies-consent label{display:inline;margin:0;font:var(--text-body-sm);color:var(--n-600)}
.auras-revform__note{display:block;margin-top:var(--sp-2);font-size:var(--fs-caption);color:var(--text-faint)}

@media (min-width:768px){
  #review_form .comment-form-author,
  #review_form .comment-form-email{display:inline-block;width:calc(50% - var(--sp-2));vertical-align:top}
  #review_form .comment-form-author{margin-inline-end:var(--sp-3)}
}

/* ---- 13-gallery.css ---- */
/* Галерея товара на карточке.

   Своя, потому что первым элементом в макете идёт видео, чего штатная галерея
   WooCommerce не умеет вовсе (разбор — `inc/product.php`). Лента листается
   скроллом со `scroll-snap`: без JS слайды всё равно доступны все.
*/

.auras-gal__frame{
  position:relative;
  /* Пропорция, а не фиксированная высота (выгрузка 19.08): кадр товара
     вертикальный 3:4 на всех ширинах, и высота обязана следовать за шириной
     колонки, иначе на 1200 в кадре остаются поля сверху и снизу. */
  aspect-ratio:3/4;
  background:var(--n-50);
  overflow:hidden;
}

.auras-gal__wash{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.5;
  pointer-events:none;
}

/* Лента — обычный скролл со snap: без JS слайды всё равно листаются пальцем. */
.auras-gal__track{
  position:absolute;
  inset:0;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.auras-gal__track::-webkit-scrollbar{display:none}

.auras-gal__slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auras-gal__slide img,
.auras-gal__video{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:20px;
}

.auras-gal__video{background:var(--auras-night);padding:0}

.auras-gal__tags{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  gap:6px;
  pointer-events:none;
}

/* Счётчик кадров и подсказка о свайпе — строкой под превью (выгрузка 19.08).
   Подсказка живёт только на тач-ширинах: с 768 работают превью, и стрелка
   «свайп →» там обещала бы жест, которого нет. */
.auras-gal__meta{
  padding:8px var(--au-page-pad) 0;
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:var(--fs-caption);
  color:var(--n-500);
}

/* Сердечко на кадре — справа сверху, напротив бейджа скидки. */
.auras-gal__fav{position:absolute;top:12px;right:12px;z-index:2}

.auras-gal__dots{
  position:absolute;
  bottom:14px;
  left:0;
  right:0;
  display:flex;
  gap:6px;
  justify-content:center;
}

.auras-gal__dot{
  width:4px;
  height:4px;
  border-radius:var(--r-pill);
  background:rgba(28,34,94,.28);
  transition:var(--t-control);
}

.auras-gal__dot.is-on{width:16px;background:var(--auras-navy)}

.auras-gal__thumbs{
  display:flex;
  gap:6px;
  padding:10px var(--au-page-pad) 0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.auras-gal__thumbs::-webkit-scrollbar{display:none}

/* Ширина кадра — доля ленты, а не фиксированные пиксели (выгрузка 19.08):
   пять кадров ровно по ширине экрана, шестой выглядывает за край и показывает,
   что лента листается. */
.auras-gal__thumb{
  all:unset;
  position:relative;
  box-sizing:border-box;
  flex:0 0 calc((100% - 24px) / 5);
  aspect-ratio:1/1;
  scroll-snap-align:start;
  overflow:hidden;
  background:var(--n-50);
  opacity:.6;
  cursor:pointer;
  transition:var(--t-control);
}

/* Выбранный кадр обведён внутрь (`outline-offset:-2px`), а не рамкой: рамка
   съела бы два пикселя ширины, и ряд кадров разъехался бы при переключении. */
.auras-gal__thumb.is-on{opacity:1;outline:2px solid var(--auras-navy);outline-offset:-2px}
.auras-gal__thumb img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}

.auras-gal__play{
  position:absolute;
  inset:0;
  margin:auto;
  color:var(--n-0);
  filter:drop-shadow(0 1px 3px rgba(11,16,38,.6));
}

@media (min-width:768px){
  .auras-gal__frame{border-radius:var(--r-card)}
  /* С 768 лента кадров превращается в сетку: колонка уже не шире экрана, и
     листать её незачем — все кадры видны сразу. */
  .auras-gal__thumbs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:12px 0 0;
    overflow:visible;
  }
  .auras-gal__thumb{flex:0 0 auto;border-radius:var(--r-sm)}
}

@media (min-width:1200px){
  .auras-gal__thumbs{grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}
}

@media (min-width:768px){
  .auras-gal__swipe{display:none}
}

/* ---- 14-buy.css ---- */
/* Покупка на карточке: выбор вариации и липкая панель.

   Селекторы `.variations`, `.quantity`, `.single_add_to_cart_button` — разметка
   WooCommerce. Мы её оформляем, а не переписываем: свой шаблон формы вариаций
   был бы молчаливым форком (woocommerce-canon.md §2), и вместе с ним уехали бы
   пересчёт цены и проверка наличия.
*/

/* Селекторы рисует наш JS поверх штатной формы: сам `<select>` остаётся в
   разметке и продолжает работать — без JS покупатель выбирает им. */
.auras-single .variations{width:100%;border:0}
.auras-single .variations tbody,
.auras-single .variations tr,
.auras-single .variations td,
.auras-single .variations th{display:block;padding:0;border:0;text-align:left}
.auras-single .variations tr + tr{margin-top:14px}

.auras-single .variations label{
  display:block;
  font:var(--text-body-sm);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  margin-bottom:10px;
}

.auras-var{display:flex;flex-wrap:wrap;gap:8px}

.auras-var__o{
  all:unset;
  box-sizing:border-box;
  padding:11px 16px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-radius:var(--r-pill);
  border:1px solid var(--border-subtle);
  font:var(--text-body-sm);
  font-weight:var(--fw-medium);
  color:var(--text-muted);
  cursor:pointer;
  transition:var(--t-control);
}

.auras-var__o:hover{border-color:var(--border-default)}
.auras-var__o.is-on{background:var(--auras-navy);border-color:var(--auras-navy);color:var(--n-0)}
.auras-var__o.is-off{opacity:.4;cursor:not-allowed}

/* Селект прячем только когда JS построил кнопки: иначе выбрать нечем. */
.auras-single .variations select{width:100%}
.auras-single .variations td.value:has(.auras-var) select{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.auras-single .reset_variations{display:none}
.auras-single .woocommerce-variation-description{font:var(--text-body-sm);color:var(--text-muted)}
.auras-single .woocommerce-variation-price{font:var(--text-h4);color:var(--text-strong)}
.auras-single .woocommerce-variation-availability{font:var(--text-body-sm);color:var(--status-success)}

/* ── Панель покупки ───────────────────────────────────────────────────── */

/* Панель покупки липнет НАД таб-баром: в макете она стоит на `bottom:68px`,
   ровно на его высоту. С 768 таб-бара нет, и переменная там равна нулю.

   `sticky` для этого мало: липкий элемент ездит только внутри своего родителя,
   а колонка покупки заканчивается сразу под кнопкой — дальше идут аккордеоны и
   похожие товары, и панель уезжала вместе с колонкой. До 768 поэтому `fixed`,
   а странице добавлен нижний отступ, чтобы её конец не прятался под панелью. */
.auras-single form.cart{
  position:sticky;
  bottom:var(--au-tabbar-h);
  z-index:5;
  margin:24px calc(var(--au-page-pad) * -1) 0;
  padding:12px var(--au-page-pad) 16px;
  border-top:1px solid var(--border-subtle);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 -8px 24px rgba(28,34,94,.08);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* Форма вариативного товара липнет целиком вместе с селекторами — иначе
   на телефоне выбор размера уезжает под панель и до него не добраться. */
.auras-single .variations_form.cart{position:static;display:block;box-shadow:none;border-top:0;background:none;backdrop-filter:none;margin:0;padding:0}
.auras-single .woocommerce-variation-add-to-cart{
  position:sticky;
  bottom:var(--au-tabbar-h);
  z-index:5;
  margin:24px calc(var(--au-page-pad) * -1) 0;
  padding:12px var(--au-page-pad) 16px;
  border-top:1px solid var(--border-subtle);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 -8px 24px rgba(28,34,94,.08);
  display:flex;
  align-items:center;
  gap:12px;
}

.auras-single .quantity input[type="number"]{
  all:unset;
  width:32px;
  text-align:center;
  font:var(--text-body);
  font-weight:var(--fw-medium);
  color:var(--text-strong);
  -moz-appearance:textfield;
}

.auras-single .quantity input::-webkit-outer-spin-button,
.auras-single .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.auras-single .single_add_to_cart_button{flex:1;min-height:var(--control-h-lg)}
.auras-single .woocommerce-variation-add-to-cart--disabled .single_add_to_cart_button{opacity:.42;pointer-events:none}

/* На широком экране панель покупки уже видна целиком — липкость снимаем,
   иначе она перекрывала бы вкладки. */
@media (min-width:768px){
  .auras-single form.cart,
  .auras-single .woocommerce-variation-add-to-cart{
    position:static;
    margin:8px 0 0;
    padding:0;
    border-top:0;
    background:none;
    backdrop-filter:none;
    box-shadow:none;
  }
}

/* Кнопки «поделиться» и «сравнить» — в липкой панели рядом с «В корзину»
   (`auras_single_actions()`), как в макете. Кнопка покупки забирает остаток
   строки, эти две стоят по краю. */
.auras-single__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

@media (max-width:767.98px){
  .auras-single form.cart,
  .auras-single .woocommerce-variation-add-to-cart{
    position:fixed;
    left:0;
    right:0;
    bottom:var(--au-tabbar-h);
    z-index:6;
    margin:0;
  }
  /* Высота панели (54 кнопка + поля) плюс запас: последний блок страницы не
     должен уходить под неё. */
  .auras-single{padding-bottom:96px}
}

/* Кнопка покупки и круглые кнопки рядом — одной высоты, как в макете: разнобой
   читается как незавершённая вёрстка. */
.auras-single__actions .au-ib{width:54px;height:54px;flex:0 0 54px}

/* ---- 15-lists.css ---- */
/* Экран «Избранное» (макет 2026-08-17b, строки 40–209) + общее пустое
   состояние для избранного и сравнения.

   ОДНА РАЗМЕТКА НА ВСЕ БРЕЙКПОИНТЫ. В макете на 375 это компактные строки, а на
   1440 — сетка карточек каталога. Собрать оба варианта значило бы вывести
   товары дважды и половину спрятать; вместо этого строка перестраивается в
   карточку с 1200 — тем же DOM, теми же данными. */

.auras-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

/* ── Шапка списка ─────────────────────────────────────────────────────── */

.auras-list__head{
  position:relative;
  padding:18px var(--au-page-pad) 14px;
  margin-inline:calc(var(--au-page-pad) * -1);
  background-image:linear-gradient(180deg,rgba(255,255,255,.12) 0%,#fff 100%),var(--line-texture);
  background-size:cover;
  background-position:center top;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.auras-list__eyebrow{
  font-size:11px;
  font-weight:var(--fw-medium);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--n-600);
}
.auras-list__count{
  font-size:28px;
  font-weight:var(--fw-semibold);
  letter-spacing:-.02em;
}
.auras-list__note{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--n-600);
}

/* ── Чипы фильтра ─────────────────────────────────────────────────────── */

.auras-list__chips{
  display:flex;
  gap:var(--sp-2);
  overflow-x:auto;
  scrollbar-width:none;
}
.auras-list__chips::-webkit-scrollbar{display:none}
.auras-list__chip{
  flex:0 0 auto;
  height:36px;
  padding:0 14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  background:#fff;
  font-size:13px;
  font-weight:var(--fw-medium);
  color:var(--n-700);
  cursor:pointer;
}
.auras-list__chip.is-active{
  background:var(--auras-navy);
  border-color:var(--auras-navy);
  color:#fff;
}

/* ── Строка товара ────────────────────────────────────────────────────── */

.auras-list__rows{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.auras-row{
  display:flex;
  gap:var(--sp-3);
  padding:var(--sp-3);
  border:1px solid var(--border-subtle);
  border-radius:16px;
}
.auras-row.is-out{background:var(--n-50)}
.auras-row.is-out .auras-row__media img{opacity:.55}

.auras-row__media{
  position:relative;
  flex:0 0 auto;
  width:88px;
  height:88px;
  border-radius:12px;
  overflow:hidden;
  background:var(--n-50);
}
.auras-row__wash{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.5;
}
.auras-row__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:var(--sp-2);
}

.auras-row__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.auras-row__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-2);
}
.auras-row__name{
  font-size:15px;
  font-weight:var(--fw-semibold);
  line-height:1.25;
  color:var(--auras-navy);
}
.auras-row__drop{
  flex:0 0 auto;
  width:32px;
  height:32px;
  margin:-6px -6px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:none;
  color:var(--n-500);
  cursor:pointer;
}
.auras-row__specs{font-size:12px;color:var(--n-500)}
.auras-row__actions{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding-top:2px;
}
.auras-row__actions .au-btn{flex:1}
.auras-row__cmp{flex:0 0 auto}

/* ── Пустое состояние (общее с экраном сравнения) ─────────────────────── */

.auras-list__empty{
  padding:56px var(--au-page-pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-3);
  text-align:center;
}
.auras-list__empty .auras-i{color:var(--n-300)}
.auras-list__empty h2{margin:0;font-size:20px;font-weight:var(--fw-semibold)}
.auras-list__empty p{
  margin:0;
  max-width:34ch;
  font-size:14px;
  line-height:1.55;
  color:var(--n-600);
}
.auras-list__empty .au-btn{max-width:320px}

@media (min-width:1200px){
  /* С 1200 строка становится карточкой сетки — как в макете на 1440. */
  .auras-list__rows{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--sp-5);
  }
  .auras-row{flex-direction:column}
  .auras-row__media{width:100%;height:auto;aspect-ratio:4 / 3}
  .auras-row__name{font-size:17px}
}

/* ---- 16-compare.css ---- */
/* Экран «Сравнение» (макет 2026-08-17b, строки 210–410).

   Колонка признаков закреплена `position:sticky` на первой ячейке КАЖДОЙ
   строки — у `<tr>` sticky не работает вовсе, и попытка закрепить строку целиком
   выглядит как «ничего не произошло». */

.auras-cmp{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.auras-cmp__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-subtle);
}
.auras-cmp__switch{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:14px;
  font-weight:var(--fw-medium);
  cursor:pointer;
}
.auras-cmp__clear{
  border:0;
  background:none;
  padding:0;
  font-size:13px;
  font-weight:var(--fw-medium);
  color:var(--auras-blue-ink);
  cursor:pointer;
}

/* ── Таблица ──────────────────────────────────────────────────────────── */

.auras-cmp__scroll{
  overflow-x:auto;
  margin-inline:calc(var(--au-page-pad) * -1);
  padding-inline:var(--au-page-pad);
  /* ГРАБЛЯ: `position` обязателен, хотя ничего тут не позиционируется.
     Кнопка покупки WooCommerce печатает рядом с собой `<span
     class="screen-reader-text">` с `position:absolute` и без своего
     позиционированного предка. Containing block у неё оказывается за пределами
     скроллера, а значит `overflow` её не обрезает: подсказка остаётся на своей
     статической позиции внутри уехавшей вбок таблицы и растягивает **страницу**
     на ширину таблицы. Видно это только как горизонтальную прокрутку всего
     экрана на телефоне — в разметке всё правильно. */
  position:relative;
}
.auras-cmp__table{
  border-collapse:collapse;
  width:100%;
  min-width:min-content;
}
.auras-cmp__table th,
.auras-cmp__table td{
  border-top:1px solid var(--border-subtle);
  padding:12px 10px;
  text-align:start;
  vertical-align:top;
  font-size:12px;
  font-weight:var(--fw-regular);
}
.auras-cmp__table thead th{border-top:0}
.auras-cmp__table tbody tr:nth-child(even) th,
.auras-cmp__table tbody tr:nth-child(even) td{background:var(--n-50)}

/* Закреплённая колонка признаков. Ширина фиксирована: колонка на `auto`
   схлопывается, как только товары уезжают за край экрана. */
.auras-cmp__table tbody th,
.auras-cmp__table tfoot th,
.auras-cmp__table thead th:first-child{
  position:sticky;
  inset-inline-start:0;
  z-index:1;
  width:96px;
  min-width:96px;
  background:#fff;
  color:var(--n-600);
  border-inline-end:1px solid var(--border-subtle);
}
.auras-cmp__table thead th:first-child{
  font-size:11px;
  font-weight:var(--fw-semibold);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--n-500);
  vertical-align:bottom;
}
.auras-cmp__table tbody tr:nth-child(even) th{background:var(--n-50)}

.auras-cmp__table thead th{width:124px;min-width:124px;position:relative}
.auras-cmp__media{
  position:relative;
  display:block;
  height:74px;
  border-radius:10px;
  overflow:hidden;
  background:var(--n-50);
}
.auras-cmp__wash{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.5;
}
.auras-cmp__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6px;
}
.auras-cmp__name{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:var(--fw-semibold);
  line-height:1.25;
  color:var(--auras-navy);
}
.auras-cmp__drop{
  position:absolute;
  top:6px;
  inset-inline-end:6px;
  z-index:2;
  width:22px;
  height:22px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  background:#fff;
  color:var(--n-500);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.auras-cmp__add{width:80px;min-width:80px}
.auras-cmp__add a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2);
  font-size:10px;
  line-height:1.3;
  text-align:center;
  color:var(--n-500);
}
.auras-cmp__plus{
  width:36px;
  height:36px;
  border:1px dashed var(--n-300);
  border-radius:var(--r-pill);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Список полон (четыре товара) — кнопка на карточке краснеет на секунду.
   Без этого нажатие проглатывается молча, и покупатель решает, что сломано.
   Класс вешает `lists.js`; выдержка там же. */
.au-ib.is-full{
  border-color:var(--auras-crimson);
  color:var(--auras-crimson);
  transition:var(--t-control);
}

.auras-cmp__note{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--n-500);
}

@media (min-width:1200px){
  .auras-cmp__table thead th{width:auto;min-width:200px}
  .auras-cmp__media{height:180px}
  .auras-cmp__name{font-size:15px}
  .auras-cmp__table th,
  .auras-cmp__table td{font-size:14px;padding:14px 16px}
}

/* ---- 17-delivery.css ---- */
/* Стоимость доставки на витрине — раздел 17 макета.

   Номер 17 отвечает номеру раздела в выгрузке: это экран дизайна, а не наша
   добавка, и следующая итерация его перезапишет (design-assets.md §1a). Файл
   общий для карточки товара и корзины: блок в обоих местах один и тот же,
   отличается только тем, что в корзине суммы пересчитаны по составу. */

.auras-delivery{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-4);
  margin-block:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
}
.auras-delivery__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.auras-delivery__title{font-size:var(--fs-body);color:var(--auras-navy)}
.auras-delivery__change{
  flex:0 0 auto;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  color:var(--auras-blue-ink);
  cursor:pointer;
}

.auras-delivery__rows{display:flex;flex-direction:column;gap:var(--sp-2)}
.auras-delivery__row{font-size:var(--fs-body-sm);color:var(--n-700)}

/* Скелет ровно той же высоты, что строка с ценой: появление цифр не должно
   сдвигать кнопку покупки под пальцем (макет, раздел 17). Без спиннера. */
.auras-delivery__skeleton{
  display:block;
  height:calc(var(--fs-body-sm) * 1.5);
  border-radius:var(--r-sm);
  background:var(--n-100);
}
.auras-delivery__skeleton:nth-child(2){width:82%}

/* Отказ службы не красный: это не ошибка магазина, покупка не блокируется. */
.auras-delivery__note{margin:0;font-size:var(--fs-body-sm);line-height:1.5;color:var(--n-600)}
.auras-delivery__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding-top:var(--sp-1)}

@media (prefers-reduced-motion:no-preference){
  .auras-delivery__skeleton{animation:auras-delivery-pulse 1.4s var(--ease-out) infinite}
}
@keyframes auras-delivery-pulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

/* Строка доставки в итогах корзины. В сумму «К оплате» не входит: услугу
   выбирают на оформлении (макет, раздел 17). */
.auras-delivery-total th{font-weight:var(--fw-medium)}
.auras-delivery-total td{color:var(--n-600);font-size:var(--fs-body-sm)}

/* ---- 18-cart.css ---- */
/* Корзина — экраны «M · Корзина», «M · Корзина пустая» и «D · Тариф в корзине
   1440» выгрузки 19.08.

   ОДНА РАЗМЕТКА НА ВСЕ БРЕЙКПОИНТЫ. На телефоне позиции, тариф и итог идут
   одной колонкой; с 1200 та же разметка встаёт в две — товары с тарифом слева,
   «Итог» липкой карточкой справа. Порядок узлов при этом менять нельзя: он же
   определяет порядок чтения с клавиатуры и в скринридере.

   Итоги остаются таблицей: строку доставки печатает модуль EMU на хуке внутри
   неё (`inc/delivery.php`), и списком её не заменить. */

/* ── Пустая корзина ──────────────────────────────────────────────────── */

.auras-cart-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--sp-4);
  padding:var(--sp-9) 0;
}
.auras-cart-empty__badge{
  width:96px;height:96px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);
  background:linear-gradient(140deg,rgba(168,77,229,.14) 0%,rgba(253,95,182,.16) 100%);
  color:var(--auras-navy);
}
.auras-cart-empty__title{
  margin:0;
  font-size:24px;
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  color:var(--auras-navy);
}
.auras-cart-empty__note{
  margin:0;
  max-width:34ch;
  font-size:15px;
  line-height:1.6;
  color:var(--n-600);
}
.auras-cart-empty__actions{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  width:100%;
  max-width:320px;
  margin-top:var(--sp-2);
}
.auras-cart-empty__actions .au-btn{width:100%}
/* Счётчик избранного подставляет JS из localStorage; до подстановки узел
   скрыт атрибутом, и лишнего пробела в подписи быть не должно. */
.auras-cart-empty__count::before{content:" · "}

/* ── Позиции ─────────────────────────────────────────────────────────── */

.auras-cart__items{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.auras-cart__item{
  display:flex;
  gap:var(--sp-4);
  padding:14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-0);
}

.auras-cart__media{
  flex:0 0 88px;
  width:88px;height:88px;
  border-radius:var(--r-md);
  background:var(--surface-sunken);
  overflow:hidden;
}
.auras-cart__media img{width:100%;height:100%;object-fit:contain;display:block}

.auras-cart__body{
  flex:1;min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.auras-cart__top{display:flex;gap:var(--sp-2);justify-content:space-between}
.auras-cart__title{min-width:0}
.auras-cart__name{
  font-size:15px;
  font-weight:var(--fw-semibold);
  line-height:1.35;
  color:var(--auras-navy);
}
.auras-cart__name:hover{text-decoration:none}

/* Характеристики позиции печатает ядро списком определений. В макете это одна
   строка мелким серым — разворачиваем `<dl>` в строку, а не переопределяем
   шаблон ради разметки. */
.auras-cart__title .variation{
  display:flex;flex-wrap:wrap;gap:0 var(--sp-2);
  margin:3px 0 0;
  font-size:13px;line-height:1.4;color:var(--n-500);
}
.auras-cart__title .variation dt{font-weight:var(--fw-regular)}
.auras-cart__title .variation dt::after{content:":"}
.auras-cart__title .variation dd{margin:0}
.auras-cart__title .variation dd p{margin:0}

.auras-cart__drop{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  margin:-4px -4px 0 0;
  color:var(--n-400);
  transition:var(--t-control);
}
.auras-cart__drop:hover{color:var(--auras-navy);text-decoration:none}

.auras-cart__line{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);
  margin-top:auto;
}
.auras-cart__sum{
  font-size:16px;font-weight:var(--fw-semibold);color:var(--auras-navy);
  /* Сумма с валютой не переносится: на 375 «394 020 soʻm» иначе рвётся на две
     строки и распирает карточку позиции по высоте. */
  white-space:nowrap;
}

/* Степпер в корзине ниже, чем в колонке покупки: карточка позиции компактнее
   блока «купить», и `--control-h` растянул бы её на треть. */
.auras-cart .quantity{display:inline-flex}
.auras-cart .quantity.au-step{height:36px}
.auras-cart .quantity.au-step button{width:36px}
.auras-cart .quantity input.qty{
  width:44px;
  border:0;background:transparent;
  text-align:center;
  font-family:inherit;font-size:15px;font-weight:var(--fw-semibold);
  color:var(--auras-navy);
  -moz-appearance:textfield;
}
.auras-cart .quantity input.qty::-webkit-outer-spin-button,
.auras-cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.auras-cart__actions{margin-top:var(--sp-2)}
/* Скрипт взял обновление на себя — кнопка лишняя. Без него она видна и
   работает: это единственный способ сохранить количество без JS. */
.auras-cart.is-auto .auras-cart__actions{display:none}
.auras-cart.is-busy{opacity:.6;pointer-events:none}

/* ── Итог ────────────────────────────────────────────────────────────── */

.auras-total{margin-top:var(--sp-5)}
/* До 1200 итог — не карточка, а продолжение страницы: в макете над строками
   заголовка нет, они читаются как продолжение списка товаров. */
.auras-total__title{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  margin:0 0 var(--sp-2);
  font-size:20px;font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  color:var(--auras-navy);
}
.auras-total__table{width:100%;border-collapse:collapse}
.auras-total__table th,
.auras-total__table td{
  padding:12px 0;
  border-top:1px solid var(--border-subtle);
  font-size:14px;font-weight:var(--fw-regular);
  text-align:left;
  color:var(--n-600);
}
.auras-total__table th{width:1%;white-space:nowrap}
.auras-total__table td{text-align:right;font-weight:var(--fw-medium);color:var(--auras-navy)}
/* Подпись доставки — единственная, что может не влезть в строку: «Доставка
   EMU» рядом с «от 34 000 — выбор на оформлении». Ей перенос разрешён. */
.auras-total__table .auras-delivery-total th{white-space:normal}
.auras-total__table .auras-delivery-total td{font-weight:var(--fw-regular);color:var(--n-500)}
.auras-total__table .order-total th,
.auras-total__table .order-total td{
  padding:14px 0;
  font-size:18px;font-weight:var(--fw-semibold);
  color:var(--auras-navy);
}

.auras-total__go{margin-top:var(--sp-4)}
.auras-total__go .checkout-button{width:100%}
.auras-total__note{
  margin:var(--sp-3) 0 0;
  font-size:12px;line-height:1.5;
  color:var(--n-500);
  text-align:center;
}

/* ── Две колонки с 1200 ──────────────────────────────────────────────── */

@media (min-width:1200px){
  .woocommerce-cart .auras-entry__body > .woocommerce{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    align-items:start;
    gap:var(--sp-8);
    max-width:var(--au-content-w);
    margin-inline:auto;
  }
  /* Уведомления ядра — над обеими колонками, а не в первой ячейке сетки. */
  .woocommerce-cart .auras-entry__body > .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1}

  .auras-cart__item{padding:18px;gap:18px;align-items:center}
  .auras-cart__media{flex-basis:88px}
  .auras-cart__name{font-size:17px}
  .auras-cart__sum{font-size:17px}

  .cart-collaterals{position:sticky;top:calc(var(--au-header-h) + var(--sp-5))}
  .auras-total{
    margin-top:0;
    padding:24px;
    border:1px solid var(--border-subtle);
    border-radius:var(--r-xl);
    background:var(--n-0);
    box-shadow:var(--sh-3);
  }
  .auras-total__title{position:static;width:auto;height:auto;clip-path:none;overflow:visible}
  .auras-total__table .cart-subtotal th{border-top:0}
  .auras-total__table .cart-subtotal td{border-top:0}
  .auras-total__table th,
  .auras-total__table td{font-size:15px}
  .auras-total__table .order-total th,
  .auras-total__table .order-total td{font-size:22px}
}

/* ---- 19-call-request.css ---- */
/* Заказ звонка (выгрузка 19.08, `Component-CallRequest`): на телефоне шторка
   снизу, с 768 — диалог 440px по центру со скримом.

   Открывается из трёх мест: шторка меню, подвал, панель консультанта
   (`19a-consultant.css`). Разметка одна на все точки входа — шторка живёт в
   подвале и печатается один раз (`template-parts/call-request.php`). */

/* Открывается двумя способами. `:target` — адресом `#auras-call`, и это
   работающий путь без единой строки JS: кнопки входа и крестик — обычные
   ссылки. Класс `is-open` вешает скрипт.

   `is-closed` нужен ровно для стыка этих двух путей: скрипт, закрывая шторку,
   убирает якорь из адреса, но полагаться на пересчёт `:target` после
   `replaceState` нельзя — браузеры делают это по-разному. Класс гасит правило
   независимо от адреса. */
.auras-call{position:fixed;inset:0;z-index:75;visibility:hidden}
.auras-call.is-open,
.auras-call:target:not(.is-closed){visibility:visible}

.auras-call__scrim{
  position:absolute;
  inset:0;
  background:rgba(11,16,38,.42);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.auras-call.is-open .auras-call__scrim,
.auras-call:target:not(.is-closed) .auras-call__scrim{opacity:1}

.auras-call__panel{
  position:absolute;
  inset-inline:0;
  bottom:0;
  max-height:92dvh;
  overflow-y:auto;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  background:var(--surface-card);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:var(--sh-4);
  display:flex;
  flex-direction:column;
  gap:18px;
  transform:translateY(100%);
  transition:transform var(--dur-base) var(--ease-out);
}
.auras-call.is-open .auras-call__panel,
.auras-call:target:not(.is-closed) .auras-call__panel{transform:translateY(0)}

/* Два состояния шторки лежат в панели одновременно, видимое выбирает атрибут
   `hidden` (`template-parts/call-request.php`). Колонку с отступами держит
   каждое само: у панели свой `gap`, но между её детьми теперь ровно один
   видимый блок, и опираться на него больше нельзя. */
.auras-call__view,
.auras-call__done{display:flex;flex-direction:column;gap:18px}

.auras-call__head{display:flex;align-items:flex-start;gap:var(--sp-3)}
.auras-call__title{
  margin:0;
  font-size:var(--fs-h3);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
}
.auras-call__text{
  margin:6px 0 0;
  font-size:var(--fs-body-sm);
  line-height:1.55;
  color:var(--n-600);
}
.auras-call__title--center,
.auras-call__text--center{text-align:center}
.auras-call__x{
  width:36px;height:36px;
  flex:0 0 36px;
  margin-inline-start:auto;
  border:0;
  padding:0;
  border-radius:var(--r-pill);
  background:var(--n-50);
  color:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.auras-call__x:hover{background:var(--n-100)}

/* Состояние «заявка принята»: значок телефона в круге, текст по центру. */
.auras-call__ic{
  width:64px;height:64px;
  align-self:center;
  border-radius:var(--r-pill);
  background:var(--n-50);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ошибка приёма заявки — рядом с формой, а не вместо неё: покупателю есть что
   исправить и чем отправить повторно. */
.auras-call__alert{
  margin:0;
  padding:var(--sp-3) 14px;
  border-radius:var(--r-md);
  background:var(--status-danger-soft);
  color:var(--auras-crimson);
  font-size:var(--fs-body-sm);
  line-height:1.5;
}

.auras-call__form{display:flex;flex-direction:column;gap:18px}

/* Поле-ловушка: спрятано от человека, но не `display:none` — часть ботов
   пропускает скрытые именно так. */
.auras-call__trap{
  position:absolute;
  inset-inline-start:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.auras-call__field{margin:0;display:flex;flex-direction:column;gap:6px}
.auras-call__label{font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--n-600)}
.auras-call__input{
  height:var(--control-h-lg);
  padding:0 var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  background:var(--surface-card);
  font:var(--text-body);
  color:var(--auras-navy);
}
.auras-call__input:focus{outline:none;border-color:var(--accent);box-shadow:var(--sh-focus)}

.auras-call__when{
  margin:0;
  padding:0;
  border:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.auras-call__when .auras-call__label{flex:0 0 100%;margin-bottom:2px}

/* Радиокнопка спрятана, а не убрана: по ней ходит клавиатура и её читает
   скринридер, а вид даёт подпись вокруг. */
.auras-call__chip input{position:absolute;opacity:0;width:0;height:0}
.auras-call__chip span{
  height:38px;
  padding:0 var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  display:flex;
  align-items:center;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium);
  cursor:pointer;
  transition:var(--t-control);
}
.auras-call__chip span:hover{border-color:var(--border-strong)}
.auras-call__chip input:checked + span{background:var(--auras-navy);border-color:var(--auras-navy);color:var(--n-0)}
.auras-call__chip input:focus-visible + span{box-shadow:var(--sh-focus)}

.auras-call__agree{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:var(--fs-body-sm);
  line-height:1.5;
  color:var(--n-600);
}
.auras-call__agree input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:var(--auras-navy)}

.auras-call__or{
  margin:0;
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--fs-caption);
  color:var(--n-500);
}
.auras-call__or::before,
.auras-call__or::after{content:"";flex:1;height:1px;background:var(--border-subtle)}

.auras-call__tg{
  height:var(--control-h-lg);
  border-radius:var(--r-pill);
  background:var(--au-tg);
  color:var(--n-0);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:var(--fs-body-lg);
  font-weight:var(--fw-semibold);
}
.auras-call__tg:hover{background:var(--au-tg-hover);color:var(--n-0);text-decoration:none}
.auras-call__note{margin:0;font-size:var(--fs-caption);color:var(--n-500);line-height:1.5;text-align:center}

@media (min-width:768px){
  .auras-call__panel{
    inset:auto 50% auto auto;
    top:50%;
    width:440px;
    max-width:calc(100% - 2 * var(--au-page-pad));
    transform:translate(50%,-50%) scale(.98);
    border-radius:var(--r-2xl);
    padding:24px;
    opacity:0;
    transition:transform var(--dur-base) var(--ease-out),
               opacity var(--dur-base) var(--ease-out);
  }
  .auras-call.is-open .auras-call__panel,
  .auras-call:target:not(.is-closed) .auras-call__panel{transform:translate(50%,-50%) scale(1);opacity:1}
}

/* ---- 19a-consultant.css ---- */
/* Панель консультанта и её плавающий значок (выгрузка 19.08,
   `Component-ConsultantFab`).

   Номер следующий свободный, а не наш `11a`: до 19.08 здесь жила заглушка
   «онлайн-чат в разработке», которой в макете не было вовсе. Теперь экран
   нарисован (`Screen-Call-Request`), и правила переехали к нему — вплотную к
   шторке заказа звонка (`19-call-request.css`), которую панель и открывает.
   Своей нумерации у дизайна для этого листа нет: он подписан `call-1a`.

   До 768 панель — шторка снизу поверх страницы, значка нет: её открывает пятый
   пункт таб-бара. С 768 таб-бара нет, и панель раскрывается карточкой над
   значком в правом нижнем углу. */

.auras-cons{position:fixed;inset:0;z-index:70;pointer-events:none}

/* Скрим ловит клик мимо панели — но только когда она открыта: закрытая панель
   не должна перехватывать нажатия по странице под собой. */
.auras-cons__scrim{
  position:absolute;
  inset:0;
  background:rgba(11,16,38,.42);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.auras-cons.is-open .auras-cons__scrim{opacity:1;pointer-events:auto}

.auras-cons__panel{
  position:absolute;
  inset-inline:0;
  bottom:0;
  background:var(--surface-card);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:var(--sh-4);
  overflow:hidden;
  color:var(--auras-navy);
  transform:translateY(100%);
  opacity:0;
  visibility:hidden;
  transition:transform var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out),
             visibility var(--dur-base);
}
.auras-cons.is-open .auras-cons__panel{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Шапка панели лежит на той же небуле, что шапка сайта и подвал. */
.auras-cons__head{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4) 18px;
  background:var(--au-nav-bg);
  color:var(--au-nav-fg);
}
.auras-cons__ic{
  width:38px;height:38px;
  flex:0 0 38px;
  border-radius:var(--r-pill);
  background:var(--au-nav-soft-2);
  border:1px solid var(--border-on-dark);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auras-cons__who{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.auras-cons__title{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.auras-cons__hours{font-size:var(--fs-caption);color:var(--au-nav-dim)}
.auras-cons__x{
  width:30px;height:30px;
  flex:0 0 30px;
  border:0;
  padding:0;
  border-radius:var(--r-pill);
  background:var(--au-nav-soft);
  color:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.auras-cons__body{padding:18px;display:flex;flex-direction:column;gap:var(--sp-3)}
.auras-cons__bubble{
  margin:0;
  padding:var(--sp-3) 14px;
  border-radius:var(--r-lg);
  background:var(--n-50);
  font-size:var(--fs-body-sm);
  line-height:1.55;
  color:var(--n-700);
}

/* Три пути связи одной колонкой: заливка — Telegram, обводка — телефон,
   без фона — заказ звонка. */
.auras-cons__go{
  height:46px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  color:var(--auras-navy);
  cursor:pointer;
  transition:var(--t-control);
}
.auras-cons__go:not(.auras-cons__go--primary){border-color:var(--border-subtle)}
.auras-cons__go:hover{text-decoration:none;border-color:var(--border-strong);color:var(--auras-navy)}
.auras-cons__go--primary{background:var(--auras-navy);color:var(--n-0)}
.auras-cons__go--primary:hover{background:var(--au-navy-hover);color:var(--n-0);border-color:transparent}
.auras-cons__go--text{border-color:transparent;color:var(--text-link)}
.auras-cons__go--text:hover{border-color:transparent;color:var(--text-link-hover)}

/* ── Значок и подсказка ─────────────────────────────────────────────── */

/* До 768 значка нет вовсе: там его роль играет пункт таб-бара, а сам таб-бар
   стоит ровно на том месте, куда значок бы встал. */
.auras-cons__dock{display:none}

@media (min-width:768px){
  .auras-cons__dock{
    position:absolute;
    inset-inline-end:32px;
    bottom:32px;
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    pointer-events:auto;
  }
  .auras-cons__hint{
    background:var(--surface-card);
    border:1px solid var(--border-subtle);
    border-radius:var(--r-pill);
    padding:10px var(--sp-4);
    font-size:var(--fs-body-sm);
    font-weight:var(--fw-medium);
    box-shadow:var(--sh-2);
    white-space:nowrap;
  }
  .auras-cons__fab{
    position:relative;
    width:58px;height:58px;
    border:0;
    border-radius:var(--r-pill);
    background:var(--auras-navy);
    color:var(--n-0);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--sh-4);
    cursor:pointer;
    transition:var(--t-control);
  }
  .auras-cons__fab:hover{background:var(--au-navy-hover)}
  /* Зелёная точка — признак «на линии». Обводка цветом значка, а не белым:
     точка лежит на нём и должна казаться вырезанной в нём. */
  .auras-cons__dot{
    position:absolute;
    top:6px;
    inset-inline-end:6px;
    width:10px;height:10px;
    border-radius:var(--r-pill);
    background:var(--status-success);
    border:2px solid var(--auras-navy);
  }

  /* Открытая панель — карточка над значком, а не шторка снизу. Скрима на
     десктопе нет: панель узкая и страницу не перекрывает. */
  .auras-cons__scrim{display:none}
  .auras-cons__panel{
    inset-inline:auto 32px;
    bottom:106px;
    width:320px;
    border-radius:var(--r-2xl);
    transform:translateY(12px);
  }
}

/* ---- 20-checkout.css ---- */
/* Оформление заказа — экран `Screen-Checkout` выгрузки 19.08.

   ПОРЯДОК ЭКРАНА — МАКЕТНЫЙ: город → доставка → оплата → получатель, а не
   порядок WooCommerce. Почему это возможно и чем оплачено — ADR-0020
   (`docs/adr/0020-checkout-steps-by-funnel-not-woocommerce-order.md`).
   Коротко: пересчёт заказа отдаёт карту «селектор → HTML», а не блок, поэтому
   свой шаг можно поставить куда угодно ВНУТРИ формы и добавить его селектор в
   ту же карту. Наружу формы — нельзя: обработчики `checkout.js` делегированы
   с `form.checkout`.

   Мобильные полосы (`background:var(--n-25)` с волосяными границами) держат
   сами шаги: шаг 02 — в `20d-steps.css`, шаг 04 — в `20e-recipient.css`. Здесь
   их нет намеренно: полоса принадлежит шагу, а не каркасу, и на широком экране
   каждый шаг снимает её сам.

   Экран разложен по файлам (soft cap 300 строк, code-style.md §1):
   здесь каркас формы, заголовки секций, согласие с офертой и кнопка;
   `20a-order-card.css` — карточка «Заказ» справа; `20b-checkout-wide.css` —
   две колонки от 1200; `20c-pickup.css` — выбор пункта выдачи;
   `20d-steps.css` — шаги 01 и 02; `20e-recipient.css` — шаг 04;
   `20f-payment.css` — карточки способов оплаты шага 03.
   Порядок литер = порядок каскада. */

/* ── Каркас ──────────────────────────────────────────────────────────── */

.woocommerce-checkout .auras-entry__body{color:var(--n-700)}
/* Строки формы держат свои отступы сами — правило контентной страницы
   (`.auras-entry__body > * + *`) добавляло бы к ним второй. */
.woocommerce-checkout .auras-entry__body > * + *{margin-top:0}

.woocommerce-checkout form.checkout{
  display:flex;
  flex-direction:column;
  gap:var(--sp-7);
}
.woocommerce-checkout .auras-checkout__main,
.woocommerce-checkout #customer_details{display:flex;flex-direction:column;gap:var(--sp-7)}

/* Пустой `wc-order-attribution-inputs` ядро печатает четыре раза подряд.
   Кастомный элемент по умолчанию строчный — в колонке он даёт видимые
   пробелы между блоками. */
wc-order-attribution-inputs{display:none}

/* ── Заголовки секций ────────────────────────────────────────────────── */

.woocommerce-checkout form.checkout h3{
  margin:0 0 var(--sp-4);
  font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  color:var(--auras-navy);
}
/* «Доставка по другому адресу?» — заголовок только по разметке ядра, по сути
   это галочка. Кеглем заголовка она перевешивала бы поля над собой. */
.woocommerce-checkout h3#ship-to-different-address{
  margin-bottom:var(--sp-3);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
}
.woocommerce-checkout h3#ship-to-different-address label{cursor:pointer}

/* ── Оферта и кнопка ─────────────────────────────────────────────────── */

.woocommerce-checkout .form-row.place-order{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin:0;
  padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle);
}
.woocommerce-terms-and-conditions-wrapper{display:flex;flex-direction:column;gap:var(--sp-3)}
.woocommerce-privacy-policy-text{font-size:var(--fs-caption);line-height:1.5;color:var(--n-500)}
.woocommerce-privacy-policy-text p{margin:0}

/* Текст оферты ядро прячет ИНЛАЙНОВЫМ стилем и раскрывает своим скриптом по
   клику на ссылку. Инлайн сильнее любого нашего правила, поэтому `display`
   здесь не трогаем — оформляем только раскрытый вид. */
.woocommerce-terms-and-conditions{
  padding:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  background:var(--n-25);
  font-size:var(--fs-body-sm);
  line-height:1.6;
  color:var(--n-600);
}
.woocommerce-terms-and-conditions h2{font-size:var(--fs-body);margin:var(--sp-3) 0 var(--sp-2)}

/* Строка согласия: галочка, текст и звёздочка обязательности — три соседних
   узла в одной метке. Флексом (как остальные галочки формы) звёздочка уезжает
   к правому краю и повисает отдельно от текста, к которому относится, —
   поэтому здесь метка блочная, а галочка вынута из потока. */
.woocommerce-checkout .place-order .form-row{margin:0;padding:0}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label{
  display:block;
  position:relative;
  padding-left:34px;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-regular);
  line-height:1.5;
  color:var(--n-600);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label input[type="checkbox"]{
  position:absolute;
  left:0;
  top:1px;
}
.woocommerce-terms-and-conditions-checkbox-text{line-height:1.5}
.woocommerce-terms-and-conditions-link{font-weight:var(--fw-semibold)}

.woocommerce-checkout button#place_order{width:100%}

/* ── Оверлей пересчёта ───────────────────────────────────────────────── */

/* Пока идёт ajax, WooCommerce накрывает блок своим `blockUI`. Стили к нему
   приезжали из снятого листа плагина — без них это серый прямоугольник
   поверх заказа. */
.woocommerce-checkout .blockUI.blockOverlay{
  background:var(--n-0) !important;
  opacity:.6 !important;
  border-radius:var(--r-xl);
}

/* ---- 20a-order-card.css ---- */
/* Карточка «Заказ» на оформлении — правая колонка экрана `Screen-Checkout`
   выгрузки 19.08: состав заказа, итоги, выбор услуги доставки и способа оплаты.

   Отдельным файлом от `20-checkout.css` по soft cap 300 строк
   (code-style.md §1) и по ответственности: слева форма получателя, здесь —
   всё, что живёт внутри `#order_review` и заменяется ответом ajax целиком.
   Литера держит правила вплотную к базовому файлу в каскаде, до `20b-*`
   с медиазапросами: `build-theme.sh` склеивает по алфавиту при `LC_ALL=C`.

   Обёртку `.auras-checkout__aside` вокруг заголовка и `#order_review` даёт
   свой шаблон `woocommerce/checkout/form-checkout.php` — у ядра они соседи
   без общего предка. */

/* ── Карточка «Заказ» ────────────────────────────────────────────────── */

.auras-checkout__aside{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-5);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);
  background:var(--n-0);
  box-shadow:var(--sh-3);
}
.auras-checkout__aside h3#order_review_heading{margin:0;font-size:var(--fs-h3)}

/* ТАБЛИЦА РАСКЛАДЫВАЕТСЯ ФЛЕКСОМ, А НЕ ОСТАЁТСЯ ТАБЛИЦЕЙ.

   В разметке это `<table>` и остаётся им — иначе некуда печатать `<tr>`,
   которые дают хуки и `wc_cart_totals_shipping_html()` (см. шапку
   `woocommerce/checkout/review-order.php`). Но колонок у неё ровно две, и
   ширину им считает алгоритм таблицы по САМОЙ ШИРОКОЙ ячейке: правая колонка
   ужимается под «75 330 soʻm». Строка выбора услуги доставки живёт в ней же —
   и список тарифов с выбором пункта выдачи оказывался зажат в ~150px, а
   `select` пункта обрезался на «Выберите пу…».

   Ширину колонки из CSS не задать (`colspan` — атрибут разметки), поэтому
   табличную раскладку снимаем целиком и раскладываем строки флексом. В макете
   это и не таблица, а список строк. */
.woocommerce-checkout-review-order-table{display:block;width:100%}
/* «Товар / Сумма» — шапка двухколоночной таблицы. В макете её нет: строки
   читаются сами, а на 375 шапка съедает высоту. */
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot{display:block}

.woocommerce-checkout-review-order-table tr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-3) 0;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  display:block;
  padding:0;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-regular);
  text-align:left;
  color:var(--n-600);
}
.woocommerce-checkout-review-order-table td{
  flex:0 0 auto;
  text-align:right;
  font-weight:var(--fw-medium);
  color:var(--auras-navy);
  white-space:nowrap;
}

/* ── Позиция заказа ──────────────────────────────────────────────────── */

.woocommerce-checkout-review-order-table tr.cart_item{
  align-items:flex-start;
  border-bottom:1px solid var(--border-subtle);
}
.woocommerce-checkout-review-order-table td.product-name{
  display:flex;
  flex:1;
  min-width:0;
  gap:var(--sp-3);
  text-align:left;
  white-space:normal;
}
.auras-order__media{
  flex:0 0 56px;
  width:56px;height:56px;
  border-radius:var(--r-md);
  background:var(--surface-sunken);
  overflow:hidden;
}
.auras-order__media img{width:100%;height:100%;object-fit:contain;display:block}
/* Товар без картинки: плашка не должна оставлять пустой квадрат. */
.auras-order__media:empty,
.auras-order__media:not(:has(img)){display:none}
.auras-order__text{
  flex:1;
  min-width:0;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);
  line-height:1.4;
  color:var(--auras-navy);
}
.woocommerce-checkout-review-order-table .product-quantity{
  font-weight:var(--fw-regular);
  color:var(--n-500);
}
/* Характеристики позиции ядро печатает списком определений — в макете это
   строка мелким серым, как и в корзине. */
.auras-order__text .variation{
  display:flex;flex-wrap:wrap;gap:0 var(--sp-2);
  margin:3px 0 0;
  font-size:var(--fs-caption);font-weight:var(--fw-regular);color:var(--n-500);
}
.auras-order__text .variation dt{font-weight:var(--fw-regular)}
.auras-order__text .variation dt::after{content:":"}
.auras-order__text .variation dd,
.auras-order__text .variation dd p{margin:0}

/* ── Итоги ───────────────────────────────────────────────────────────── */

.woocommerce-checkout-review-order-table tfoot tr{border-top:1px solid var(--border-subtle)}
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal{border-top:0}
.woocommerce-checkout-review-order-table tfoot .order-total{
  padding-top:var(--sp-4);
  font-size:var(--fs-h4);
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{
  font-size:inherit;
  font-weight:var(--fw-semibold);
  color:var(--auras-navy);
}
.woocommerce-checkout-review-order-table tfoot .order-total strong{font-weight:inherit}

/* ── Выбор услуги доставки ───────────────────────────────────────────── */

/* Строка доставки — не пара «подпись/значение», а список услуг карточками
   (макет, шаг 02): подпись сверху, карточки под ней во всю ширину. */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals{
  flex-direction:column;
  align-items:stretch;
  gap:var(--sp-2);
}
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th{
  font-weight:var(--fw-medium);
  color:var(--n-600);
}
/* Пока город не выбран, ядро печатает сюда просто текст-подсказку. */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td{
  flex:1;
  text-align:left;
  white-space:normal;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-regular);
  line-height:1.5;
  color:var(--n-500);
}

/* Услуга ещё не выбрана — в строке доставки заглушка вместо суммы. */
.auras-order__pending{font-size:var(--fs-body-sm);color:var(--n-500)}

/* ---- 20b-checkout-wide.css ---- */
/* Оформление заказа от 1200 — экран «D · Оформление 1440» выгрузки 19.08:
   форма слева, липкая карточка «Заказ» справа.

   Отдельным файлом по той же причине, что `10b-catalog-wide.css`: экран не
   влезает в soft cap 300 строк одним файлом (code-style.md §1).

   ЛИТЕРА `b`, А НЕ `a`, — ЭТО КАСКАД, А НЕ НУМЕРАЦИЯ. Здесь одни
   медиазапросы, и они обязаны идти ПОСЛЕ всех базовых правил экрана
   (`20-checkout.css`, `20a-order-card.css`). Правило в медиазапросе не
   сильнее обычного: встань этот файл раньше — базовые правила соседа с той
   же специфичностью молча перебили бы десктопные размеры.

   Брейкпоинт 1200 взят от корзины (`18-cart.css`), а не 768: на планшете
   карточка заказа в 400px оставила бы форме 320 — уже, чем на телефоне. */

@media (min-width:1200px){

  .woocommerce-checkout .auras-page{padding-inline:var(--sp-8)}
  .woocommerce-checkout .auras-entry,
  .woocommerce-checkout .auras-page__head{
    max-width:var(--au-content-w);
    margin-inline:auto;
  }

  .woocommerce-checkout form.checkout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    align-items:start;
    gap:var(--sp-8);
  }
  .woocommerce-checkout .auras-checkout__main{gap:var(--sp-9)}
  .woocommerce-checkout #customer_details{gap:var(--sp-9)}

  /* Слева поля идут двумя колонками (правило из 11a-wc-forms.css), поэтому
     сама колонка формы шире карточки заказа — как в макете. */
  .woocommerce-checkout form.checkout h3{font-size:var(--fs-h3)}

  .auras-checkout__aside{
    position:sticky;
    top:calc(var(--au-header-h) + var(--sp-5));
    padding:var(--sp-6);
    gap:var(--sp-4);
  }
  .auras-checkout__aside h3#order_review_heading{font-size:var(--fs-h4)}

  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td{font-size:var(--fs-body)}
  .woocommerce-checkout-review-order-table tfoot .order-total th,
  .woocommerce-checkout-review-order-table tfoot .order-total td{font-size:var(--fs-h3)}
}

/* ---- 20c-pickup.css ---- */
/* Выбор пункта выдачи — раздел 03 экрана `Screen-Checkout` выгрузки 19.08,
   вариант 18b: переключатель «Списком / На карте».

   ОТЛИЧИЕ ОТ МАКЕТА ПЕРВОЕ: у нас это не шторка поверх экрана, а блок внутри
   шага «Доставка». Решение заказчика: пункт выдачи — часть ответа на вопрос
   «как получить», и прятать его за окном значит прятать половину шага.
   Разметка — `template-parts/checkout/pickup-panel.php`.

   ОТЛИЧИЕ ВТОРОЕ: режим по умолчанию — СПИСОК, хотя нарисована карта. Причина
   не техническая — карта отправляет Яндексу IP покупателя, и грузить её без
   спроса на странице оплаты нельзя (разбор в шапке `inc/checkout-pickup.php`).
   Порядок кнопок при этом макетный.

   ЛИТЕРА `c` ПОСЛЕ `20b-checkout-wide.css` — исключение из правила «медиа-
   запросы последними», и вот почему это безопасно: все селекторы здесь свои
   (`.auras-pvz*`), с экраном оформления они не пересекаются, а собственные
   медиазапросы файла лежат в его же конце. Правило из `20b` нечему перебивать. */

/* ── Каркас панели ───────────────────────────────────────────────────── */

/* Панель печатается скрытой и открывается скриптом: без JS рабочим выбором
   остаётся штатный `<select>` модуля доставки, и пустая коробка рядом с ним
   была бы лишней (`assets/_dev/js/pickup.js`). Прячет её атрибут `hidden` —
   он усилен глобально (`11-wordpress.css`), своего правила здесь не нужно. */
.auras-pvz{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  /* Белая, а не `--n-25`: на телефоне шаг 02 лежит на полосе того же тона
     (`20d-steps.css`), и панель на ней иначе не читалась бы вовсе. */
  background:var(--n-0);
}

/* Строку поля сюда переносит скрипт — вместе с меткой «Пункт выдачи EMU»,
   звёздочкой обязательности и местом, куда ядро кладёт ошибку. Она и есть
   заголовок панели, отдельного `<h*>` тут нет намеренно: два заголовка над
   одним списком — это два разных названия у одной вещи. */
.auras-pvz__head{display:flex;flex-direction:column;gap:var(--sp-1)}
.auras-pvz__head > .form-row{margin:0}
/* `<select>` не удаляется, а прячется: он остаётся тем, что уезжает на сервер,
   и единственным рабочим выбором без JS. */
.auras-pvz-enhanced .woocommerce-input-wrapper{display:none}

.auras-pvz__lead{margin:0;font:var(--text-body-sm);color:var(--n-500)}

/* Пункт не выбран, а форма отправлена: ядро ставит `woocommerce-invalid` на
   строку поля — обводим по нему всю панель, потому что выбирают в ней, а не в
   спрятанном `<select>`. */
.auras-pvz:has(.form-row.woocommerce-invalid){border-color:var(--status-danger)}

/* ── Переключатель режимов ───────────────────────────────────────────── */

.auras-pvz__modes{
  display:flex;
  gap:var(--sp-1);
  padding:var(--sp-1);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-pill);
  background:var(--n-50);
}
.auras-pvz__mode{
  flex:1;
  height:38px;
  border:0;
  border-radius:var(--r-pill);
  background:none;
  font:inherit;
  font-size:14px;
  font-weight:var(--fw-semibold);
  color:var(--n-600);
  cursor:pointer;
  transition:var(--t-control);
}
.auras-pvz__mode.is-active{background:var(--auras-navy);color:var(--n-0)}
.auras-pvz__mode:focus-visible{outline:0;box-shadow:var(--sh-focus)}

/* Подпись про передачу IP — не мелкий шрифт ради приличия, а условие
   использования API (п. 8.1). Убирать нельзя. */
.auras-pvz__consent{margin:0;font:var(--text-caption);line-height:1.4;color:var(--n-500)}

/* Сообщение про не открывшуюся карту. Отдельным узлом от строки «Выбран: …»:
   у той свой смысл и свой `aria-live`, и ближайшая перерисовка затёрла бы
   ошибку. */
.auras-pvz__error{
  margin:0;
  font-size:var(--fs-body-sm);
  line-height:1.45;
  color:var(--status-danger);
}

/* ── Список пунктов ──────────────────────────────────────────────────── */

.auras-pvz__body{display:flex;flex-direction:column}

/* Список прокручивается внутри себя. Пунктов в справочнике сотни, и вывести их
   в поток страницы значит увести кнопку заказа на несколько экранов вниз. */
.auras-pvz__list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  max-height:340px;
  overflow-y:auto;
  /* Полоса прокрутки не должна лежать вплотную к карточкам. */
  padding-inline-end:var(--sp-2);
}

.auras-pvz__district{
  margin:var(--sp-2) 0 0;
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--n-500);
}
.auras-pvz__district:first-child{margin-top:0}

.auras-pvz__card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  width:100%;
  padding:14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-0);
  font:inherit;
  text-align:start;
  cursor:pointer;
  transition:var(--t-control);
}
.auras-pvz__card:hover{border-color:var(--border-strong)}
.auras-pvz__card:focus-visible{outline:0;box-shadow:var(--sh-focus)}
/* Выбранная карточка в макете обведена вдвое толще. Не утолщаем рамку, а
   добавляем внутреннюю: смена ширины границы сдвигает соседей на пиксель. */
.auras-pvz__card.is-chosen{
  border-color:var(--auras-navy);
  box-shadow:inset 0 0 0 1px var(--auras-navy);
}
.auras-pvz__name{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--auras-navy)}
.auras-pvz__addr{font-size:var(--fs-body-sm);color:var(--n-600)}
.auras-pvz__time{font-size:var(--fs-caption);color:var(--n-500)}

/* ── Карта ───────────────────────────────────────────────────────────── */

/* Копирайты, логотип Яндекса и кнопку «Открыть в Картах» перекрывать нельзя —
   это прямое требование п. 4.1.3 условий использования. Поэтому у карты нет
   ничего поверх: выбранный пункт подписан строкой ниже, вне полотна. */
.auras-pvz__map{
  height:340px;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--n-50);
}

.auras-pvz__pin{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  padding:0;
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  background:var(--n-0);
  color:var(--auras-navy);
  box-shadow:var(--sh-2);
  cursor:pointer;
  transition:var(--t-control);
}
.auras-pvz__pin.is-active{
  width:34px;height:34px;
  border-color:var(--auras-navy);
  background:var(--auras-navy);
  color:var(--n-0);
}

/* ── Что выбрано ─────────────────────────────────────────────────────── */

/* Строка живёт под списком и картой сразу: пункт выбирают в любом из режимов,
   а подтверждение выбора должно быть в одном месте, а не в двух. */
.auras-pvz__chosen{
  margin:0;
  padding-top:var(--sp-2);
  border-top:1px solid var(--border-subtle);
  font:var(--text-body-sm);
  line-height:1.5;
  color:var(--n-600);
}

/* ── С 768 — списку и карте больше воздуха ───────────────────────────── */

@media (min-width:768px){
  .auras-pvz{padding:var(--sp-5)}
  .auras-pvz__list{max-height:420px}
  .auras-pvz__map{height:420px}
}

@media (prefers-reduced-motion:reduce){
  .auras-pvz__mode,
  .auras-pvz__card,
  .auras-pvz__pin{transition:none}
}

/* ---- 20d-steps.css ---- */
/* Шаги воронки оформления — разделы 17a…17d экрана `Screen-Checkout` 19.08.

   Здесь каркас шага и содержимое шагов 01 «Город» и 02 «Доставка». Соседи по
   ряду: `20e-recipient.css` — шаг 04, `20f-payment.css` — карточки способов
   оплаты шага 03. Разведены по файлам не по размеру, а по владельцу разметки:
   шаги 01 и 02 печатает тема, шаги 03 и 04 — ядро WooCommerce, и селекторы там
   чужие.

   ЛИТЕРА `d` ПОСЛЕ МЕДИАЗАПРОСОВ `20b-checkout-wide.css` — то же исключение и
   по той же причине, что у `20c-pickup.css`: селекторы здесь свои
   (`.auras-step*`, `.auras-service*`), с каркасом оформления они не
   пересекаются, а собственные медиазапросы лежат в конце файла. Перебивать
   правила из `20b` нечему.

   ПОЧЕМУ КАРТОЧКА УСЛУГИ ВЫГЛЯДИТ КАК КАРТОЧКА ОПЛАТЫ, НО ОПИСАНА ОТДЕЛЬНО
   (`20f-payment.css`). Разметка у них разная: способы оплаты печатает ядро
   списком `<li>` с отдельной меткой, а услуги доставки — наш шаблон, где вся
   карточка и есть `<label>`. Свести их в один набор селекторов значило бы
   привязать наш блок к чужой разметке, которая меняется с обновлением плагина.
   Общее у них — токены, а не правила. */

/* ── Заголовок шага ──────────────────────────────────────────────────── */

.auras-step{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}

.auras-step__head{
  display:flex;
  align-items:baseline;
  gap:var(--sp-2);
}
.auras-step__num{
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  color:var(--auras-blue-ink);
}
/* Перебивает общее правило заголовков формы (`20-checkout.css`): там у `h3`
   свой нижний отступ, а здесь расстояния держит `gap` шага. */
.woocommerce-checkout form.checkout .auras-step__title{
  margin:0;
  font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  color:var(--auras-navy);
}

.auras-step__empty{
  margin:0;
  padding:var(--sp-4);
  border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);
  background:var(--n-25);
  font-size:var(--fs-body-sm);
  line-height:1.55;
  color:var(--n-600);
}

/* ── Слоты для перенесённых полей ────────────────────────────────────── */

/* Города и улицы в разметке шага нет: туда переносит их скрипт
   (`assets/_dev/js/checkout-fields.js`, разбор — ADR-0021). Слот пуст, пока
   перенос не случился, — поэтому у него нет ни рамки, ни фона, которые
   нарисовали бы пустую коробку на экране без JS. */
.auras-checkout__city,
.auras-checkout__address{display:flex;flex-direction:column;gap:var(--sp-3)}
.auras-checkout__city > .form-row,
.auras-checkout__address > .form-row{margin:0}

.auras-checkout__address-lead{
  margin:0;
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--n-500);
}

/* ── Группа услуг ────────────────────────────────────────────────────── */

/* Начинка шага 02 — отдельный узел, потому что она и есть фрагмент пересчёта
   (`inc/checkout-steps.php`). Отступы между группами держит она, а не шаг:
   шагу принадлежат ещё панель пункта выдачи и слот адреса. */
.auras-step__rates{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}

.auras-services{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.auras-services__title{
  margin:0;
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--n-500);
}

/* ── Карточка услуги ─────────────────────────────────────────────────── */

.auras-service{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:start;
  gap:var(--sp-3);
  padding:14px 16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-0);
  cursor:pointer;
  transition:var(--t-control);
}
.auras-service:hover{border-color:var(--border-strong)}
/* Выбранная карточка в макете обведена вдвое толще. Рамку не утолщаем, а
   добавляем внутреннюю: смена ширины границы сдвинула бы соседние карточки на
   пиксель в момент выбора. */
.auras-service:has(input:checked){
  border-color:var(--auras-navy);
  box-shadow:inset 0 0 0 1px var(--auras-navy);
}
.auras-service:has(input:focus-visible){box-shadow:var(--sh-focus)}

.auras-service input.shipping_method{
  appearance:none;
  width:20px;height:20px;
  margin:2px 0 0;
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  background:var(--n-0);
  cursor:pointer;
  transition:var(--t-control);
}
.auras-service input.shipping_method:checked{border:6px solid var(--auras-navy)}
/* Кольцо фокуса рисует карточка целиком — на кружке диаметром 20px его почти
   не видно, а метка и есть кликабельная область. */
.auras-service input.shipping_method:focus-visible{outline:0}

.auras-service__body{display:flex;flex-direction:column;gap:3px}
.auras-service__row{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-3);
}
.auras-service__name{
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  line-height:1.35;
  color:var(--auras-navy);
}
.auras-service__price{
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  color:var(--auras-navy);
}
.auras-service__note{
  font-size:var(--fs-body-sm);
  line-height:1.4;
  color:var(--n-600);
}

/* Выбор пункта выдачи модуль доставки печатает СОСЕДОМ карточки, а не внутри
   неё: `<select>` внутри `<label>` переключал бы радиокнопку любым кликом.
   Со скриптом строка уезжает в шапку панели выбора (`20c-pickup.css`), без него
   остаётся здесь рабочим выпадающим списком — правило нужно для второго случая. */
.auras-services > .form-row{margin:0}

/* ── Мобильная полоса шага 02 ────────────────────────────────────────── */

/* Так в макете (экраны 375): шаг «Доставка» лежит на подложке `--n-25` с
   волосяными границами и во всю ширину экрана, соседние шаги — на белом.
   Полоса и есть разделитель: на телефоне шаги идут подряд одной лентой, и без
   неё воронка читается как одна длинная форма.

   ОТРИЦАТЕЛЬНЫЕ ПОЛЯ — ЭТО ВЫХОД ЗА ОТСТУП СТРАНИЦЫ, а не хитрость: полоса
   обязана дойти до края экрана, а её содержимое — остаться на месте, поэтому
   отступ страницы (`.auras-page`, `11-wordpress.css`) снимается полем и тут же
   возвращается внутренним отступом. Значение одно и то же, `--au-page-pad`, —
   разойдутся, и страница поедет горизонтально. */
.auras-step--delivery{
  margin-inline:calc(var(--au-page-pad) * -1);
  padding:var(--sp-5) var(--au-page-pad);
  background:var(--n-25);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}

/* ── С 1200 — группы рядом ───────────────────────────────────────────── */

/* Ширины на этой отметке хватает на две колонки: «получить самому» и «привезут»
   в макете стоят рядом, чтобы выбор читался одним взглядом. */
@media (min-width:1200px){
  /* Полосы — приём телефонной ленты. На широком экране форма лежит в колонке
     рядом с карточкой заказа, и полоса во всю ширину разрезала бы её пополам. */
  .auras-step--delivery{
    margin-inline:0;
    padding:0;
    background:none;
    border:0;
  }

  /* Сетка у начинки, а не у секции: заголовок шага, панель пункта выдачи и
     адрес идут во всю ширину, в две колонки встают только группы услуг. */
  .auras-step__rates{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-4) var(--sp-5);
    align-items:start;
  }
  .auras-step__empty{grid-column:1 / -1}
  .auras-service{padding:18px}
  /* Заголовок шага на широком экране крупнее — как в макете 1440. */
  .woocommerce-checkout form.checkout .auras-step__title{font-size:var(--fs-h3)}
}

/* ---- 20e-recipient.css ---- */
/* Шаг 04 «Получатель» — экраны «M · Оформление гостем» и «M · Ошибки формы»
   выгрузки 19.08.

   Литера `e` — продолжение того же ряда: селекторы свои, медиазапросы в конце
   файла, перебивать в `20b-checkout-wide.css` нечего (разбор — в шапке
   `20c-pickup.css`).

   НОМЕР ШАГА СТАВИТСЯ `::before`, А НЕ РАЗМЕТКОЙ. Заголовок «Получатель»
   печатает шаблон ядра `checkout/form-billing.php`, и хука внутри него нет.
   Копировать шаблон целиком ради значка «04» — молчаливый форк
   (`woocommerce-canon.md` §2), а номер шага это оформление, а не текст: он не
   переводится и в каталог строк ему не место. */

/* ── Мобильная полоса шага ───────────────────────────────────────────── */

/* Так в макете (экраны 375): «Получатель» лежит на подложке `--n-25` с
   волосяной границей сверху и во всю ширину экрана. Полоса разделяет шаги —
   на телефоне они идут подряд одной лентой. Нижней границы у неё нет: шаг
   последний, и ниже уже карточка «Заказ».

   ОТРИЦАТЕЛЬНЫЕ ПОЛЯ — ЭТО ВЫХОД ЗА ОТСТУП СТРАНИЦЫ: полоса обязана дойти до
   края экрана, а её содержимое — остаться на месте. Значение снимается и
   возвращается одно и то же (`--au-page-pad`); разойдутся — страница поедет
   горизонтально. Тот же приём у шага 02 (`20d-steps.css`). */
.woocommerce-checkout .woocommerce-billing-fields{
  margin-inline:calc(var(--au-page-pad) * -1);
  padding:var(--sp-5) var(--au-page-pad);
  background:var(--n-25);
  border-top:1px solid var(--border-subtle);
}

.woocommerce-checkout .woocommerce-billing-fields > h3{
  display:flex;
  align-items:baseline;
  gap:var(--sp-2);
}
.woocommerce-checkout .woocommerce-billing-fields > h3::before{
  content:"04";
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  color:var(--auras-blue-ink);
}

/* ── Вход через Telegram ─────────────────────────────────────────────── */

.auras-tg-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-0);
}
.auras-tg-card__lead{
  margin:0;
  font-size:var(--fs-body-sm);
  line-height:1.55;
  color:var(--n-700);
}
/* Кнопку рисует iframe Telegram — его размер задаёт сам сервис, наше дело
   только выровнять его по центру карточки. */
.auras-tg-card__button{display:flex;justify-content:center;min-height:40px}
.auras-tg-card__note{
  margin:0;
  font-size:var(--fs-caption);
  line-height:1.4;
  text-align:center;
  color:var(--n-500);
}

.auras-tg-or{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin:var(--sp-4) 0;
  font-size:var(--fs-caption);
  color:var(--n-500);
}
.auras-tg-or::before,
.auras-tg-or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border-subtle);
}

/* ── Ошибка у поля ───────────────────────────────────────────────────── */

/* Сообщение кладёт САМО ЯДРО (`checkout.js`, `show_inline_errors()`), оно же
   убирает его, когда покупатель начал править поле. Наше дело — оформление и
   то, чтобы экран уехал к верхнему проблемному полю
   (`assets/_dev/js/checkout-errors.js`). */
.woocommerce-checkout .checkout-inline-error-message{
  margin:var(--sp-1) 0 0;
  font-size:var(--fs-body-sm);
  line-height:1.45;
  color:var(--status-danger);
}

/* Сводка сверху остаётся только с ошибками, которым не нашлось поля. На
   широком экране она элемент сетки формы — иначе уводит колонки вниз. */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup{
  grid-column:1 / -1;
  margin:0;
}

/* Подсказка под телефоном — та же строка по месту, но другая по смыслу:
   объяснение, а не ошибка. Ядро печатает её `<span class="description">`. */
.woocommerce-checkout .form-row .description{
  display:block;
  margin-top:var(--sp-1);
  font-size:var(--fs-caption);
  line-height:1.45;
  color:var(--n-500);
}

/* ── С 1200 ──────────────────────────────────────────────────────────── */

@media (min-width:1200px){
  /* Полосы — приём телефонной ленты. На широком экране форма лежит в колонке
     рядом с карточкой заказа, и полоса во всю ширину разрезала бы её пополам. */
  .woocommerce-checkout .woocommerce-billing-fields{
    margin-inline:0;
    padding:0;
    background:none;
    border:0;
  }

  /* Заголовок шага крупнее — как у соседних шагов в макете 1440. */
  .woocommerce-checkout .woocommerce-billing-fields > h3{gap:var(--sp-3)}
}

/* ---- 20f-payment.css ---- */
/* Шаг 03 «Оплата»: карточки способов оплаты — раздел 17b экрана
   `Screen-Checkout` выгрузки 19.08.

   ОТДЕЛЬНЫМ ФАЙЛОМ, ПОТОМУ ЧТО РАЗМЕТКА ЧУЖАЯ. Способы оплаты печатает ядро
   (`checkout/payment-method.php`) списком `<li>` со своей меткой и описанием —
   значит и селекторы здесь чужие, и меняться они будут с обновлением
   WooCommerce, а не с нашим макетом. Карточка услуги доставки выглядит так же,
   но описана в `20d-steps.css`: общее у них токены, а не правила.

   Литера `f` — тот же ряд, что у `20c`…`20e`: селекторы свои по области,
   медиазапросы в конце файла, перебивать в `20b-checkout-wide.css` нечего
   (разбор — в шапке `20c-pickup.css`). */

.wc_payment_methods{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin:0;
  padding:0;
  list-style:none;
}
.wc_payment_methods > li.wc_payment_method{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:start;
  gap:var(--sp-3);
  padding:14px 16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-0);
  transition:var(--t-control);
}
/* Выбранная карточка в макете обведена вдвое толще. Рамку не утолщаем, а
   добавляем внутреннюю: смена ширины границы сдвинула бы соседние карточки
   на пиксель в момент выбора. */
.wc_payment_methods > li.wc_payment_method:has(input:checked){
  border-color:var(--auras-navy);
  box-shadow:inset 0 0 0 1px var(--auras-navy);
}

.wc_payment_methods input.input-radio{
  appearance:none;
  grid-column:1;
  width:20px;height:20px;
  margin:2px 0 0;
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  background:var(--n-0);
  cursor:pointer;
  transition:var(--t-control);
}
.wc_payment_methods input.input-radio:checked{border:6px solid var(--auras-navy)}
.wc_payment_methods input.input-radio:focus-visible{outline:0;box-shadow:var(--sh-focus)}

.wc_payment_methods > li.wc_payment_method > label{
  grid-column:2;
  margin:0;
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  line-height:1.35;
  color:var(--auras-navy);
  cursor:pointer;
}
/* Описание способа оплаты — во второй колонке под меткой, чтобы держать
   отступ от кружка радио. */
.wc_payment_methods .payment_box{
  grid-column:2;
  margin:0;
  font-size:var(--fs-body-sm);
  line-height:1.5;
  color:var(--n-600);
}
.wc_payment_methods .payment_box p{margin:0}

/* ── С 1200 — способы в две колонки ──────────────────────────────────── */

@media (min-width:1200px){
  /* Способы оплаты в макете 1440 стоят в две колонки, как и услуги доставки. */
  .auras-step--payment .wc_payment_methods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-4);
    align-items:start;
  }
  .wc_payment_methods > li.wc_payment_method{padding:18px}
}

/* ---- 20g-thankyou.css ---- */
/* Экран «Заказ принят» — раздел «Заказ принят» выгрузки 19.08.

   ВЁРСТКА ЧУЖАЯ, И ЭТО ГЛАВНОЕ ПРО ЭТОТ ФАЙЛ. Шаблон `checkout/thankyou.php`
   не переопределён (разбор — `inc/checkout-thankyou.php`), поэтому селекторы
   здесь по классам ядра: `.woocommerce-order`, `.woocommerce-order-overview`,
   `.woocommerce-order-details`. Своё тут только «что дальше» и заголовок,
   собранный фильтром. Обновится разметка WooCommerce — чинить здесь.

   Стили плагина сняты целиком (`inc/woocommerce.php`), то есть без этого файла
   экран приезжает вовсе без оформления — списком строк на белом.

   Литера `g` — тот же ряд `20*`: селекторы свои по области (страница
   `order-received`), медиазапросы в конце файла. */

/* ── Шапка ───────────────────────────────────────────────────────────── */

.woocommerce-order-received .woocommerce-order{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
}

/* Заголовок — штатный `<p>` с текстом из фильтра, поэтому внутри только
   спаны: блочные теги внутри `<p>` браузер разорвал бы на два абзаца. */
.woocommerce-order-received .woocommerce-thankyou-order-received{
  position:relative;
  /* Полоса во всю ширину экрана: отступ страницы снимается полем и тут же
     возвращается внутренним. Значение одно и то же (`--au-page-pad`) —
     разойдутся, и страница поедет горизонтально. */
  margin:0 calc(var(--au-page-pad) * -1);
  padding:var(--sp-7) var(--au-page-pad) var(--sp-6);
  background:var(--tex-watercolor-blue) center top/cover;
  overflow:hidden;
}
/* Текстура брендовая и достаточно контрастная, чтобы съесть текст. Гасим её
   белым градиентом — как в макете, где заливка уходит в белый к низу шапки. */
.woocommerce-order-received .woocommerce-thankyou-order-received::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.86) 62%,var(--n-0) 100%);
}

.auras-thanks__mark,
.auras-thanks__title,
.auras-thanks__lead{position:relative;display:block}

.auras-thanks__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;height:52px;
  margin-bottom:var(--sp-3);
  border-radius:var(--r-pill);
  background:var(--auras-navy);
  color:var(--n-0);
}

.auras-thanks__title{
  font-size:var(--fs-h2);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-display);
  line-height:1.15;
  color:var(--auras-navy);
}
.auras-thanks__lead{
  margin-top:var(--sp-2);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--n-600);
}

/* ── Сводка заказа ───────────────────────────────────────────────────── */

/* Номер, дата, сумма и способ оплаты: ядро печатает их списком `<li>`, где
   подпись и значение лежат одной строкой, а значение обёрнуто в `<strong>`. */
.woocommerce-order-received .woocommerce-order-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3);
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce-order-received .woocommerce-order-overview > li{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  padding:14px 16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-0);
  font-size:var(--fs-caption);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--n-500);
}
.woocommerce-order-received .woocommerce-order-overview > li strong{
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  letter-spacing:normal;
  text-transform:none;
  color:var(--auras-navy);
}

/* ── Состав и реквизиты ──────────────────────────────────────────────── */

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details{
  margin:0;
  font-size:var(--fs-body-sm);
  color:var(--n-600);
}
.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2,
.woocommerce-order-received .woocommerce-order-details h3,
.woocommerce-order-received .woocommerce-customer-details h3{
  margin:0 0 var(--sp-3);
  font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  color:var(--auras-navy);
}

.woocommerce-order-received .woocommerce-table--order-details{
  width:100%;
  border-collapse:collapse;
}
.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td{
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--border-subtle);
  text-align:start;
  vertical-align:top;
}
.woocommerce-order-received .woocommerce-table--order-details td:last-child,
.woocommerce-order-received .woocommerce-table--order-details th:last-child{
  text-align:end;
  white-space:nowrap;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot .amount{
  font-weight:var(--fw-semibold);
  color:var(--auras-navy);
}

/* ── Что дальше ──────────────────────────────────────────────────────── */

.auras-thanks-next{display:flex;flex-direction:column;gap:var(--sp-4)}

.auras-thanks-next__card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  background:var(--n-25);
}
.auras-thanks-next__label{
  margin:0;
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--n-500);
}
.auras-thanks-next__text{margin:0;font-size:var(--fs-body-sm);line-height:1.6;color:var(--n-600)}

.auras-thanks-next__actions{display:flex;flex-direction:column;gap:var(--sp-2)}
.auras-thanks-next__actions .au-btn{width:100%}

.auras-thanks-next__help{
  margin:0;
  font-size:var(--fs-body-sm);
  line-height:1.5;
  text-align:center;
  color:var(--n-600);
}
.auras-thanks-next__help a{font-weight:var(--fw-semibold);color:var(--auras-navy)}

/* ── С 768 — кнопки в ряд ────────────────────────────────────────────── */

@media (min-width:768px){
  .auras-thanks-next__actions{flex-direction:row}
  .auras-thanks-next__actions .au-btn{width:auto}
}

/* ── С 1200 — шапка карточкой, а не полосой ──────────────────────────── */

@media (min-width:1200px){
  /* На широком экране контент лежит колонкой по центру (`20b`), и полоса во
     всю ширину оторвалась бы от него. */
  .woocommerce-order-received .woocommerce-thankyou-order-received{
    margin:0;
    padding:var(--sp-8);
    border-radius:var(--r-2xl);
  }
  .auras-thanks__title{font-size:var(--fs-h1)}
}