/* === FONT-FACE-START (собрано tools/vendor-fonts.py, руками не править) === */
/* Шрифт лежит на нашем домене специально: внешний запрос к Google Fonts
   блокировал отрисовку страницы целиком и из России давал белый экран
   (замер 10.09.2026: 30,5 с против 0,67 с). Пересобрать: python3 tools/vendor-fonts.py */

/* cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

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

/* latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-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;
}

/* latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

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

/* latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-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;
}

/* latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

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

/* latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-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;
}

/* latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

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

/* latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-700-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;
}

/* latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-800-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;
}

/* latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/geologica/geologica-800-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-END === */


:root{
  /* палитра «Облако» */
  --bg:#FDFBFF;
  --surface:#FFFFFF;
  --surface-alt:#EDE8F7;
  --lav:#EDE8F7;
  --lav-soft:#F5F1FC;
  --lav-deep:#CFC2E8;
  --mint:#DEEFE7;
  --mint-deep:#B4D9C7;
  --mint-ink:#3B6B54;
  --peach:#FBE6DE;
  --peach-deep:#F2C7B6;
  --peach-ink:#8A4433;
  --sky:#E0EBF8;
  --sky-deep:#BBD3EE;
  --sky-ink:#2B4A6B;
  --primary:#584D6E;
  --primary-dark:#463C58;
  --primary-ink:#584D6E;
  --text:#584D6E;
  --text-muted:#948AAA;
  --border:#E6DFF3;
  --fav-red:#E5484D;

  /* --- Токены, добавленные ради цветовых тем (themes.css). ---
     Значения здесь - ровно те числа, что были зашиты в правилах ниже, поэтому
     тема «Облако» не изменилась ни на пиксель. Тема переопределяет их скопом. */
  --on-primary:#fff;              /* текст и значки на залитой кнопке */
  --glass:rgba(255,255,255,.72);  /* полупрозрачная плашка поверх фона */
  --overlay-btn:rgba(255,255,255,.9);
  --overlay-btn-hi:#fff;
  --control-bg:#fff;              /* кружки-степперы, фокус поля ввода */
  --shine:rgba(255,255,255,.42);  /* блик, проезжающий по кнопке */
  --header-bg:rgba(253,251,255,.72);
  --header-bg-scrolled:rgba(253,251,255,.92);
  --header-shadow:0 10px 30px -24px rgba(88,77,110,.5);
  --section-alt-wash:rgba(253,251,255,.9);
  --section-alt-fade:rgba(237,232,247,0);
  --hero-wash:rgba(255,255,255,.55);
  --hero-text:#6D6284;
  --skeleton-hi:#fff;
  --shadow-chip:0 2px 8px rgba(88,77,110,.22);
  --dot-bg:rgba(255,255,255,.65);
  --dot-shadow:0 1px 3px rgba(88,77,110,.3);
  --menu-shadow:0 14px 34px rgba(31,26,46,.16);
  --swatch-ring:rgba(31,26,46,.18);
  --swatch-inset:rgba(0,0,0,.07);
  --focus-ring:rgba(207,194,232,.35);
  --focus-ring-primary:rgba(88,77,110,.15);
  --btn-tg-hi:#AECCEC;
  --tg-panel-text:#3B3350;
  --tg-panel-text-muted:rgba(59,51,80,.78);
  --tg-panel-blob:rgba(255,255,255,.28);
  --bottom-nav-bg:rgba(253,251,255,.96);
  --bottom-nav-shadow:0 -10px 30px -24px rgba(88,77,110,.5);
  --ok-ink:#2E9E5B;
  --danger-bg:#F5D9D9;
  --danger-ink:#8A3333;
  --danger-line:#B04A4A;
  --scrim:rgba(30,22,48,.45);

  /* фирменные цвета ТК - взяты из официальных SVG-логотипов (Wikimedia Commons),
     не подобраны на глаз: SDEK_logo.svg fill=#00B33C, DPD_logo_(2015).svg fill=#DC0032 */
  --brand-cdek:#00B33C;
  --brand-cdek-dark:#00902F;
  --brand-dpd:#DC0032;
  --brand-dpd-dark:#B3002A;

  --shadow-sm:0 8px 22px -16px rgba(88,77,110,.40);
  --shadow-md:0 18px 44px -26px rgba(88,77,110,.45);
  --shadow-lg:0 28px 64px -32px rgba(88,77,110,.48);

  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:12px;

  --ease:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Geologica",sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0 0 .5em;font-weight:700;line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em;color:var(--text-muted);line-height:1.65}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:76px 0}
.section-alt{
  background:
    linear-gradient(180deg,var(--section-alt-wash) 0%,var(--section-alt-fade) 12%),
    var(--surface-alt);
}
.section-head{text-align:center;max-width:640px;margin:0 auto 44px}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--glass);color:var(--primary-ink);
  padding:8px 18px;border-radius:999px;font-size:.85rem;font-weight:600;
  border:1px solid var(--border);backdrop-filter:blur(6px);
}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:999px;font-weight:600;font-size:.95rem;
  border:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* мягкий блик, проезжающий по кнопке при наведении */
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,var(--shine),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease);pointer-events:none;
}
.btn:hover::after{left:120%}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:var(--shadow-md)}
.btn-soft{background:var(--lav);color:var(--primary-ink)}
.btn-soft:hover{background:var(--lav-deep)}
.btn-tg{
  background:linear-gradient(135deg,var(--sky-deep),var(--sky));color:var(--sky-ink);
  box-shadow:var(--shadow-sm);
}
.btn-tg:hover{background:linear-gradient(135deg,var(--btn-tg-hi),var(--sky-deep));box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--primary-ink);border:1.5px solid var(--lav-deep)}
.btn-outline:hover{background:var(--lav-soft)}
/* Кнопка во всю ширину переносит длинную подпись: с nowrap от .btn текст
   «Прислать ссылку для входа на email» держал 341px в одну строку и через
   grid раздувал карточку личного кабинета до 411px при экране 390px -
   страница уезжала вбок. */
.btn-block{width:100%;white-space:normal}
.btn svg{width:18px;height:18px;flex:none;position:relative;z-index:1}
.btn span{position:relative;z-index:1}

/* ---------- header ---------- */
/* Шапка залипающая, поэтому любой переход к якорю или программная прокрутка
   ставили бы элемент ровно под неё - на телефоне тап по кнопке попадал в шапку.
   Отступ прокрутки чуть больше её высоты снимает это на всей странице. */
html{scroll-padding-top:88px}

.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.site-header.scrolled{
  background:var(--header-bg-scrolled);
  border-bottom-color:var(--border);
  box-shadow:var(--header-shadow);
}
.header-inner{display:flex;align-items:center;gap:24px;padding:14px 24px;transition:padding .3s var(--ease)}
.site-header.scrolled .header-inner{padding:9px 24px}
.header-brand{display:flex;align-items:center;gap:14px;flex:none}
.header-logo{display:flex;align-items:center;gap:10px;flex:none}
.region-select-wrap{position:relative;display:flex;align-items:center}
.region-select{
  appearance:none;-webkit-appearance:none;
  background:var(--lav-soft);border:1px solid var(--border);border-radius:999px;
  padding:8px 30px 8px 14px;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text);
  cursor:pointer;max-width:150px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
.region-select:focus{outline:none;border-color:var(--lav-deep)}
.region-select-wrap::after{
  content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
}
.header-logo img.logo-icon{width:56px;height:56px;transition:width .3s var(--ease),height .3s var(--ease)}
.header-logo img.logo-text{height:30px;transition:height .3s var(--ease)}
.site-header.scrolled .header-logo img.logo-icon{width:46px;height:46px}
.site-header.scrolled .header-logo img.logo-text{height:25px}
.header-cta{flex:none;margin-left:auto;display:flex;align-items:center;gap:16px}
.header-account{font-size:.88rem;font-weight:600;color:var(--primary-ink);white-space:nowrap}
.header-account:hover{text-decoration:underline}
.header-cart,.header-fav,.header-search{position:relative;display:flex;align-items:center;color:var(--text);transition:transform .25s var(--ease)}
.header-cart:hover,.header-fav:hover,.header-search:hover{transform:translateY(-2px)}
.header-cart svg,.header-fav svg,.header-search svg{width:24px;height:24px}
.header-cart .cart-count{
  position:absolute;top:-8px;right:-8px;background:var(--peach-deep);color:var(--peach-ink);
  font-size:.68rem;font-weight:700;min-width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  transition:transform .3s var(--ease);
}
.header-cart .cart-count.pop{animation:cartpop .45s var(--ease)}
@keyframes cartpop{
  0%{transform:scale(1)}
  40%{transform:scale(1.45)}
  100%{transform:scale(1)}
}
@media (max-width:860px){
  .header-logo img.logo-icon{width:38px;height:38px}
  .header-logo img.logo-text{height:20px}
  .site-header.scrolled .header-logo img.logo-icon{width:34px;height:34px}
  .site-header.scrolled .header-logo img.logo-text{height:18px}
  .header-brand{gap:8px}
  .region-select{max-width:96px;font-size:.72rem;padding:7px 24px 7px 11px}
  .header-inner{gap:14px;padding:14px 16px}
  .site-header.scrolled .header-inner{padding:9px 16px}
  .header-cta{gap:12px}
  .header-cta .btn{padding:10px 15px}
  .header-cta .btn span{display:none}
}

/* ---------- header при появлении нижнего мобильного меню - «Войти», корзина и избранное дублируют нижнее меню ---------- */
@media (max-width:720px){
  .header-account,.header-cart,.header-fav,.header-search{display:none}
}
@media (max-width:380px){
  .region-select-wrap{display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;padding:88px 0 72px;
  background:
    radial-gradient(720px 420px at 12% 8%,var(--peach) 0%,transparent 58%),
    radial-gradient(680px 460px at 88% 18%,var(--sky) 0%,transparent 56%),
    radial-gradient(760px 500px at 46% 108%,var(--mint) 0%,transparent 58%),
    var(--lav-soft);
}
/* очень медленное «дыхание» фоновых пятен */
.hero::before{
  content:"";position:absolute;inset:-12%;pointer-events:none;
  background:radial-gradient(460px 320px at 30% 40%,var(--hero-wash),transparent 62%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(28px,-18px,0) scale(1.06)}
}
.hero-inner{position:relative;z-index:1;max-width:760px}
.hero h1{font-size:clamp(2.1rem,4vw,3.3rem)}
.hero p{color:var(--hero-text)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-stats{display:flex;gap:30px;margin-top:44px;flex-wrap:wrap}
.hero-stat b{display:block;font-size:1.55rem;color:var(--primary-ink)}
.hero-stat span{font-size:.85rem;color:var(--text-muted)}
@media (max-width:860px){
  .hero{padding:56px 0 52px}
}

/* ---------- product grid ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1000px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.product-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.product-card{
  background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  /* Страница-подборка может содержать сотни карточек (одного «белого» - 842). Браузер
     считает раскладку только для того, что попало в видимую область; заявленная высота
     держит длину полосы прокрутки, чтобы она не прыгала при доскролле */
  content-visibility:auto;
  contain-intrinsic-size:auto 430px;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--lav-deep)}
.product-media{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(100deg,var(--lav-soft) 30%,var(--skeleton-hi) 50%,var(--lav-soft) 70%);
  background-size:220% 100%;animation:shimmer 2.4s linear infinite;
}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-30% 0}}
.product-media img{
  width:100%;height:100%;object-fit:cover;position:relative;z-index:1;
  transition:transform .7s var(--ease);
}
.product-card:hover .product-media img{transform:scale(1.06)}
.product-discount{
  position:absolute;z-index:2;top:12px;left:12px;background:var(--peach-deep);color:var(--peach-ink);
  font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;
}
.product-status{
  position:absolute;z-index:2;top:12px;left:50%;transform:translateX(-50%);background:var(--mint);color:var(--mint-ink);
  font-size:.68rem;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.product-fav{
  position:absolute;z-index:3;top:10px;right:10px;
  width:34px;height:34px;border-radius:50%;border:none;padding:0;
  background:var(--overlay-btn);color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-chip);
  transition:transform .2s var(--ease),color .2s var(--ease);
}
.product-fav svg{width:18px;height:18px}
.product-fav:hover{transform:scale(1.1)}
.product-fav.active{color:var(--fav-red)}
.product-fav.active svg{fill:currentColor}

/* ---------- свайп-галерея цветов на карточке товара ---------- */
.product-gallery{
  display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  /* без этого палец на карточке товара может на миг "залипнуть" за горизонтальную
     галерею при вертикальном скролле страницы - pan-y явно отдаёт вертикальный жест
     странице, галерея откликается только на горизонтальный */
  touch-action:pan-y;
}
.product-gallery::-webkit-scrollbar{display:none}
.product-gallery-slide{flex:0 0 100%;height:100%;scroll-snap-align:start}
.product-gallery-slide img{
  width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;
  transition:transform .7s var(--ease);
}
.product-card:hover .product-gallery-slide img{transform:scale(1.06)}
.product-gallery-arrow{
  position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;border:none;padding:0;
  background:var(--overlay-btn);color:var(--primary-ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:1.05rem;line-height:1;box-shadow:var(--shadow-chip);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.product-gallery-arrow:hover{background:var(--overlay-btn-hi);transform:translateY(-50%) scale(1.1)}
.product-gallery-arrow.prev{left:8px}
.product-gallery-arrow.next{right:8px}
.product-gallery-dots{
  position:absolute;z-index:3;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;
}
.product-gallery-dots .dot{
  width:6px;height:6px;border-radius:50%;border:none;padding:0;
  background:var(--dot-bg);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease);
  box-shadow:var(--dot-shadow);
}
.product-gallery-dots .dot.active{background:var(--overlay-btn-hi);transform:scale(1.35)}

.product-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-title{font-size:.88rem;font-weight:600;line-height:1.35;min-height:2.6em}
.product-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.product-price .new{font-size:1.08rem;font-weight:700;color:var(--primary-ink)}
.product-price .old{font-size:.82rem;color:var(--text-muted);text-decoration:line-through}
.product-variants{font-size:.72rem;color:var(--text-muted)}
.product-dims{font-size:.72rem;color:var(--text-muted)}
.product-order{margin-top:6px}

/* Кнопка "В корзину" на карточке товара превращается в степпер количества,
   пока товар лежит в корзине (см. cart.js:syncWidget). */
.product-cart-widget{position:relative}
.product-qty-stepper{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--lav);border-radius:999px;padding:8px 10px;
}
.product-qty-stepper .qty-btn{
  width:30px;height:30px;flex:none;border-radius:50%;border:none;background:var(--control-bg);
  color:var(--primary-ink);font-size:1.05rem;line-height:1;cursor:pointer;
  transition:background .25s var(--ease),transform .2s var(--ease);
}
.product-qty-stepper .qty-btn:hover{background:var(--lav-deep);transform:scale(1.08)}
.product-qty-stepper .qty-value{flex:1;text-align:center;font-weight:700;color:var(--primary-ink)}

/* ---------- страница карточки-конструктора (product.html) ---------- */
.product-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:start}
.product-page-media{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:280px;
}
.product-page-media img{width:100%;height:auto;display:block}
.product-page-info h1{margin:0 0 10px;font-size:1.6rem}
.product-page-price{display:flex;align-items:baseline;gap:8px;font-size:1.35rem;font-weight:700;color:var(--primary-ink);margin-bottom:26px}
.price-unit{font-size:.82rem;font-weight:500;color:var(--text-muted)}
.price-from{font-size:.82rem;font-weight:500;color:var(--text-muted)}

.product-option{margin-bottom:22px}
.product-option-label{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.product-option-label b{color:var(--text);text-transform:none;letter-spacing:0}
.product-option-hint{font-size:.78rem;color:var(--text-muted);margin-top:8px;text-transform:none;letter-spacing:0;font-weight:500}

.length-row{display:flex;flex-wrap:wrap;gap:10px}
.length-option{
  display:flex;flex-direction:column;gap:2px;align-items:center;min-width:96px;
  padding:10px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:var(--surface);cursor:pointer;font-family:inherit;color:var(--text);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.length-option:hover{border-color:var(--primary)}
.length-option.active{border-color:var(--primary);background:var(--lav-soft)}
.length-cm{font-weight:700;font-size:.95rem}
.length-price{font-size:.78rem;color:var(--text-muted)}

.qty-picker{display:inline-flex;align-items:center;gap:10px;background:var(--lav);border-radius:999px;padding:8px 12px}
.qty-picker .qty-btn{
  width:32px;height:32px;flex:none;border-radius:50%;border:none;background:var(--control-bg);
  color:var(--primary-ink);font-size:1.1rem;line-height:1;cursor:pointer;
}
.qty-picker input{
  width:74px;text-align:center;border:none;background:transparent;font-family:inherit;
  font-size:1.05rem;font-weight:700;color:var(--primary-ink);
}
.qty-picker input::-webkit-outer-spin-button,.qty-picker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-picker input[type=number]{-moz-appearance:textfield}

.product-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:24px 0 14px;
  padding-top:18px;border-top:1px solid var(--border);font-size:1.05rem;
}
.product-total b{font-size:1.4rem;color:var(--primary-ink)}

@media (max-width:860px){
  .product-page{grid-template-columns:1fr;gap:24px}
}

/* ---------- catalog head ---------- */
.catalog-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.catalog-count{color:var(--text-muted);font-size:.9rem}

.catalog-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
  padding:18px 22px;margin-bottom:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
}
/* Каждая ось фильтра - кнопка с текущим значением и всплывающий список под ней.
   position:relative держит список привязанным к своей кнопке */
.filter-group{display:flex;flex-direction:column;gap:8px;position:relative}
.filter-label{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}

.filter-trigger{
  display:flex;align-items:center;gap:8px;min-width:150px;
  padding:9px 13px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--lav-soft);
  font-family:inherit;font-size:.86rem;color:var(--text);cursor:pointer;text-align:left;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.filter-trigger:hover{border-color:var(--primary)}
.filter-trigger[aria-expanded="true"]{border-color:var(--primary);background:var(--lav)}
.filter-group.has-value .filter-trigger{border-color:var(--primary);background:var(--lav);font-weight:600}
.filter-trigger-value{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
/* Каретка рисуется бордерами, а не символом: глиф ▾ в разных шрифтах то съезжает
   по базовой линии, то оказывается втрое крупнее нужного */
.filter-caret{
  width:0;height:0;flex:none;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid var(--text-muted);
  transition:transform .18s var(--ease);
}
.filter-trigger[aria-expanded="true"] .filter-caret{transform:rotate(180deg)}

/* Перебивает display:grid у .filter-menu-colors: без этой строки атрибут hidden
   проигрывает по специфичности и список цветов не закрывается вообще */
.filter-menu[hidden]{display:none}
.filter-menu{
  position:absolute;top:100%;left:0;z-index:30;margin-top:6px;
  min-width:100%;max-height:320px;overflow-y:auto;
  padding:6px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--menu-shadow);
}
.filter-option{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border:0;border-radius:10px;background:none;
  font-family:inherit;font-size:.86rem;color:var(--text);text-align:left;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background .14s var(--ease);
}
.filter-option:hover{background:var(--lav-soft)}
.filter-option.active{background:var(--lav);color:var(--primary-ink);font-weight:600}
.filter-option-any{border-bottom:1px solid var(--border);border-radius:10px 10px 0 0;margin-bottom:4px}
/* Кружок и есть название цвета: подписи в списке нет намеренно, она уехала в
   aria-label и title - иначе фильтр снова превращается в простыню из слов */
.filter-dot{
  width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--swatch-ring);
  box-shadow:inset 0 -2px 5px var(--swatch-inset);
}
.filter-trigger .filter-dot{width:20px;height:20px}
.filter-option-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.filter-menu-colors{display:grid;grid-template-columns:repeat(5,auto);gap:4px;justify-content:start;min-width:auto}
.filter-menu-colors .filter-option{padding:7px;justify-content:center}
.filter-menu-colors .filter-option-any{grid-column:1/-1;justify-content:flex-start;padding:8px 10px}
.filter-menu-colors .filter-option.active{box-shadow:inset 0 0 0 2px var(--primary)}

.color-swatch-row{display:flex;flex-wrap:wrap;gap:9px}
.color-swatch{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);flex:none;
}
.color-swatch:hover{transform:scale(1.1)}
.color-swatch.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--lav)}
/* Цвет без заданного hex (у карточек с Wildberries есть только название) - подпись
   вместо кружка неизвестного цвета */
.color-swatch-named{
  width:auto;height:auto;border-radius:999px;padding:7px 14px;background:var(--surface);
  font-size:.82rem;color:var(--text);text-decoration:none;line-height:1.2;
}
.color-swatch-named:hover{transform:none;border-color:var(--primary)}
a.color-swatch{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.filter-reset{align-self:flex-end;padding:9px 16px;font-size:.84rem}
.catalog-note{margin:-6px 0 18px;color:var(--text-muted);font-size:.88rem}
.catalog-subtitle{margin:8px 0 0;color:var(--text-muted)}

/* ---------- пагинация каталога ---------- */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:34px 0 8px}
.pager-item{
  min-width:42px;padding:9px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);
  color:var(--text);text-decoration:none;font-size:.9rem;text-align:center;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.pager-item:hover{border-color:var(--primary);color:var(--primary-ink)}
.pager-item.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:600}
.pager-gap{color:var(--text-muted);padding:0 2px}

.search-page-form{display:flex;gap:10px;max-width:520px;margin:0 auto 36px}
.search-page-form input{
  flex:1;padding:13px 18px;border-radius:999px;border:1.5px solid var(--border);font-family:inherit;font-size:.95rem;background:var(--surface);color:var(--text);
}

/* ---------- trust ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);color:var(--text-muted);font-size:.92rem;line-height:1.6;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.trust-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.trust-card b{display:block;font-size:1.15rem;color:var(--primary-ink);margin-bottom:8px}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- faq ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px 26px;box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease);
}
.faq-item:hover{box-shadow:var(--shadow-md)}
.faq-toggle-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;text-align:left;
}
.faq-question{font-size:1.02rem;font-weight:600;color:var(--text)}
.faq-plus{
  position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:var(--lav);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--primary-ink);
  transform:translate(-50%,-50%);border-radius:2px;
}
.faq-plus::before{width:12px;height:2px}
.faq-plus::after{width:2px;height:12px;transition:opacity .3s var(--ease)}
.faq-item.open .faq-plus{transform:rotate(180deg);background:var(--lav-deep)}
.faq-item.open .faq-plus::after{opacity:0}
.faq-preview{
  margin:12px 0 0;color:var(--text-muted);font-size:.9rem;line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.faq-item.open .faq-preview{display:none}
.faq-full{max-height:0;overflow:hidden;transition:max-height .35s var(--ease),margin .35s var(--ease)}
.faq-item.open .faq-full{max-height:400px;margin-top:12px}
.faq-full p{color:var(--text);margin:0;font-size:.92rem;line-height:1.7}

/* ---------- feedback form ---------- */
.feedback-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.feedback-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:34px;box-shadow:var(--shadow-md);
}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  font-family:inherit;font-size:.95rem;background:var(--lav-soft);color:var(--text);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--lav-deep);background:var(--control-bg);
  box-shadow:0 0 0 4px var(--focus-ring);
}
.field-consent{display:flex;align-items:flex-start;gap:8px;font-size:.78rem;color:var(--text-muted)}
.field-consent input{width:auto;margin-top:3px}
.form-msg{font-size:.88rem;margin-top:12px;display:none}
.form-msg.ok{display:block;color:var(--mint-ink)}
.form-msg.err{display:block;color:var(--peach-ink)}
.tg-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--sky-deep),var(--lav-deep) 70%);
  border-radius:var(--radius-lg);padding:34px;color:var(--tg-panel-text);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:16px;justify-content:center;height:100%;
}
.tg-panel::before{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:var(--tg-panel-blob);top:-120px;right:-80px;
  animation:drift 22s ease-in-out infinite alternate;
}
.tg-panel h3,.tg-panel p,.tg-panel a{position:relative;z-index:1}
.tg-panel h3{font-size:1.32rem;margin:0}
.tg-panel p{color:var(--tg-panel-text-muted)}
.tg-panel .btn-tg{background:var(--control-bg);color:var(--primary-ink)}
/* min-width:0 обязателен: у элемента grid по умолчанию min-width:auto, поэтому
   любое неразрывное содержимое растягивает колонку шире экрана, а не переносится */
.feedback-wrap>*{min-width:0}
@media (max-width:860px){.feedback-wrap{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{
  background:linear-gradient(180deg,var(--lav-soft),var(--lav));
  border-top:1px solid var(--border);padding:52px 0 26px;margin-top:48px;
  border-radius:40px 40px 0 0;
}
.footer-brand{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.footer-brand .header-logo{display:flex}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:900px}
.footer-grid h4{font-size:.9rem;margin:0 0 12px;color:var(--primary-ink)}
.footer-grid a{display:block;color:var(--text-muted);font-size:.88rem;margin-bottom:8px;
  transition:color .25s var(--ease),transform .25s var(--ease)}
.footer-grid a:hover{color:var(--primary-ink);transform:translateX(3px)}
.footer-bottom{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--lav-deep);
  display:flex;flex-direction:column;gap:14px;
  font-size:.8rem;color:var(--text-muted);
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-legal a{color:var(--text-muted);font-size:.78rem;transition:color .2s var(--ease)}
.footer-legal a:hover{color:var(--primary-ink);text-decoration:underline}
.footer-copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.site-footer{border-radius:30px 30px 0 0}}

/* ---------- bottom nav (mobile) ---------- */
.bottom-nav{display:none}
@media (max-width:720px){
  body{padding-bottom:64px}
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--bottom-nav-bg);backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:var(--bottom-nav-shadow);
  }
  .bottom-nav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 2px;color:var(--text-muted);font-size:.66rem;font-weight:600;text-align:center;
    transition:color .2s var(--ease);
  }
  .bottom-nav-item svg{width:22px;height:22px}
  .bottom-nav-item.active{color:var(--primary-ink)}
  .bottom-nav-icon-wrap{position:relative;display:flex}
  .bottom-nav-icon-wrap .cart-count{
    position:absolute;top:-6px;right:-8px;background:var(--peach-deep);color:var(--peach-ink);
    font-size:.6rem;font-weight:700;min-width:15px;height:15px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;padding:0 3px;
  }
}

/* ---------- prose ---------- */
.prose{max-width:760px;margin:0 auto}
.prose p{color:var(--text)}
.prose ul{margin:0 0 1em;padding-left:0}
.prose li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--text)}
.prose li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(140deg,var(--lav-deep),var(--sky-deep))}

.empty-state{text-align:center;padding:60px 0;color:var(--text-muted)}
.empty-state a{color:var(--primary-ink);font-weight:600;text-decoration:underline}

/* ---------- auth ---------- */
.auth-tabs{display:flex;gap:8px;margin-bottom:22px;background:var(--lav);border-radius:999px;padding:5px}
.auth-tab{
  flex:1;border:none;background:transparent;padding:11px 0;border-radius:999px;
  font-family:inherit;font-weight:600;font-size:.88rem;color:var(--text-muted);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.auth-tab.active{background:var(--surface);color:var(--primary-ink);box-shadow:var(--shadow-sm)}

/* ---------- cart ---------- */
.checkout-pay-option{display:flex;align-items:center;gap:8px;font-weight:600}
.checkout-hint{margin:-6px 0 2px;font-size:.85rem;line-height:1.4;color:var(--text-muted)}
.account-order-row{display:grid;grid-template-columns:1.2fr 1fr 1.3fr 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);align-items:center}
@media(max-width:600px){.account-order-row{grid-template-columns:1fr 1fr}.account-order-row small{grid-column:2}}
.cart-list{display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 auto 32px}
.cart-row{
  position:relative;
  display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cart-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cart-row img{width:64px;height:64px;object-fit:cover;border-radius:12px;background:var(--lav-soft)}
.cart-row-title{font-size:.9rem;font-weight:600;line-height:1.3}
.cart-row-cat{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.cart-row-price{font-size:.85rem;color:var(--primary-ink);font-weight:600;margin-top:4px}
.cart-row-qty{display:flex;align-items:center;gap:10px;font-weight:600}
.qty-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--lav-soft);
  cursor:pointer;font-size:1rem;line-height:1;color:var(--text);
  transition:background .25s var(--ease),transform .2s var(--ease);
}
.qty-btn:hover{background:var(--lav);transform:scale(1.08)}
.cart-row-remove{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1rem;
  transition:color .25s var(--ease),transform .25s var(--ease)}
.cart-row-remove:hover{color:var(--peach-ink);transform:rotate(90deg)}
.cart-summary{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between}
.cart-total{font-size:1.1rem}
.cart-total-block{display:flex;flex-direction:column;gap:4px}
.cart-total-delivery{font-size:.92rem;color:var(--text-muted)}
.cart-total-grand{font-weight:700;font-size:1.3rem;color:var(--primary-ink)}
@media (max-width:640px){
  .cart-row{grid-template-columns:56px 1fr;grid-template-areas:"img title" "img qty";row-gap:8px}
  .cart-row img{grid-area:img}.cart-row-body{grid-area:title}.cart-row-qty{grid-area:qty}
  .cart-row-remove{position:absolute;top:10px;right:12px}
}

/* ---------- появление при скролле ---------- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- калькулятор доставки DPD ---------- */
.dpd-calc{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.dpd-calc-title{font-weight:600;font-size:.95rem;color:var(--primary-ink)}
.dpd-calc-row{display:flex;gap:8px}
.dpd-calc-row input{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;color:var(--text)}
.dpd-calc-btn{padding:10px 16px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:var(--on-primary);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease)}
.dpd-calc-btn:hover{background:var(--primary-dark)}
.dpd-calc-loading{color:var(--text-muted);font-size:.9rem}
.dpd-calc-error{color:var(--peach-ink);font-size:.9rem}
.dpd-calc-hint{color:var(--text-muted);font-size:.82rem;margin:0}
.dpd-calc-table{width:100%;border-collapse:collapse;font-size:.9rem}
.dpd-calc-table td{padding:7px 4px;border-bottom:1px solid var(--border);color:var(--text)}
.dpd-calc-table tr:last-child td{border-bottom:none}
.dpd-calc-table td:nth-child(2){font-weight:600;text-align:right;white-space:nowrap}
.dpd-calc-table td:nth-child(3){color:var(--text-muted);text-align:right;white-space:nowrap}
.dpd-city-options{display:flex;flex-wrap:wrap;gap:6px}
.dpd-city-option{padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--lav-soft);color:var(--text);font-size:.85rem;cursor:pointer;transition:background .2s var(--ease)}
.dpd-city-option:hover{background:var(--lav)}
.cdek-picker{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.cdek-picker[hidden]{display:none}
.cdek-picker-title{font-weight:600;font-size:.95rem;color:var(--primary-ink)}
.cdek-mode-row{display:flex;gap:16px;flex-wrap:wrap;color:var(--text);font-size:.9rem}
.cdek-mode-row label{display:flex;gap:6px;align-items:center}
.cdek-picker select{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;color:var(--text);background:var(--surface)}
.cdek-tariff{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.cdek-tariff:last-child{border-bottom:none}
.cdek-tariff input{accent-color:var(--primary)}
.cdek-tariff span{display:flex;flex-direction:column;gap:2px;flex:1}
.cdek-tariff small{color:var(--text-muted)}
.cdek-tariff strong{white-space:nowrap}

/* ---------- форма оформления заказа в корзине ---------- */
.checkout-fields{display:flex;flex-direction:column;gap:16px}
.checkout-fields-row{display:flex;gap:16px}
.checkout-fields-row .field-float{flex:1}
.field-float{position:relative}
.field-float input,.field-float textarea{width:100%;padding:16px 14px 8px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font:inherit;color:var(--text);background:var(--surface);box-sizing:border-box}
.field-float textarea{resize:vertical;min-height:64px}
.field-float label{position:absolute;left:14px;top:16px;color:var(--text-muted);font-size:1rem;
  pointer-events:none;transition:top .15s var(--ease),font-size .15s var(--ease),color .15s var(--ease)}
.field-float input:focus,.field-float textarea:focus{outline:none;border-color:var(--primary)}
.field-float input:focus + label,.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,.field-float textarea:not(:placeholder-shown) + label{
  top:6px;font-size:.72rem;color:var(--primary-ink)}

.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}

.carrier-switch{display:flex;gap:10px}
.carrier-tab{flex:1;display:flex;align-items:center;justify-content:center;padding:3px;
  border:2px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;
  opacity:.55;filter:grayscale(.6);
  transition:border-color .2s var(--ease),opacity .2s var(--ease),filter .2s var(--ease),box-shadow .2s var(--ease)}
.carrier-tab:hover{opacity:.85;filter:grayscale(.2)}
.carrier-tab.is-active{opacity:1;filter:none}
.carrier-tab--cdek.is-active{border-color:var(--brand-cdek);box-shadow:0 6px 16px -10px rgba(0,179,60,.55)}
.carrier-tab--dpd.is-active{border-color:var(--brand-dpd);box-shadow:0 6px 16px -10px rgba(220,0,50,.55)}
.carrier-badge{display:block;width:100%;padding:10px 14px;border-radius:999px;
  font-weight:800;font-size:.95rem;letter-spacing:.02em;text-align:center;color:#fff}
.carrier-badge--cdek{background:var(--brand-cdek)}
.carrier-badge--dpd{background:var(--brand-dpd)}

.delivery-carrier-panel[hidden]{display:none}
.delivery-calc-card{display:flex;flex-direction:column;gap:14px}

/* Выбор доставки от адреса покупателя: строка адреса -> карта с пунктами обоих
   перевозчиков -> тариф выбранного (delivery-picker.js). Перевозчик здесь не
   выбирается заранее вкладкой, поэтому бренд живёт на самих точках и тарифах. */
.delivery-address-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.delivery-mode-row{display:flex;gap:18px;flex-wrap:wrap;color:var(--text);font-size:.9rem}
.delivery-mode-row label{display:flex;gap:6px;align-items:center;cursor:pointer}
.delivery-mode-row input{accent-color:var(--primary)}
.delivery-status{margin:0;font-size:.85rem;color:var(--text-muted);min-height:1.2em}
.delivery-status.is-err{color:var(--peach-ink)}
.delivery-status.is-loading{color:var(--primary-ink)}

.delivery-map-legend{display:flex;gap:16px;flex-wrap:wrap;margin:0;
  font-size:.78rem;color:var(--text-muted)}
.delivery-map-legend span{display:inline-flex;align-items:center;gap:6px}
.pvz-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.pvz-dot--cdek{background:var(--brand-cdek)}
.pvz-dot--dpd{background:var(--brand-dpd)}
.pvz-dot--active{background:var(--primary)}

/* Дубль карты списком: на телефоне попасть пальцем в булавку тяжело. */
.pvz-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.pvz-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.pvz-item:hover{background:var(--lav-soft)}
.pvz-item.is-active{border-color:var(--primary);background:var(--lav-soft)}
.pvz-item .carrier-badge{width:auto;flex:0 0 auto;padding:4px 10px;font-size:.7rem}
.pvz-item-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pvz-item-text b{font-size:.86rem;font-weight:600;color:var(--text)}
.pvz-item-text small{font-size:.76rem;color:var(--text-muted)}
.cdek-tariff .carrier-badge{width:auto;flex:0 0 auto;padding:3px 9px;font-size:.68rem;margin-bottom:2px;align-self:flex-start}

.delivery-map-widget{display:flex;flex-direction:column;gap:8px}
.geo-locate-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:9px 14px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--primary-ink);
  font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s var(--ease)}
.geo-locate-btn svg{width:16px;height:16px}
.geo-locate-btn:hover{background:var(--lav-soft)}
.geo-locate-btn[data-state="loading"]{opacity:.6;pointer-events:none}
.geo-status{margin:0;font-size:.82rem;color:var(--text-muted)}
.geo-status.err{color:var(--peach-ink)}
.delivery-map{height:280px;border-radius:var(--radius-md);overflow:hidden;background:var(--lav-soft)}
.delivery-map-unconfigured{height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;color:var(--text-muted);font-size:.85rem}

.addr-suggest-wrap{position:relative}
/* Когда список подсказок живёт прямо в .field-float (см. delivery-map.js), он
   не должен считаться содержимым поля и мешать плавающей подписи. */
.field-float > .addr-suggest-list{top:calc(100% + 4px)}
.addr-suggest-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto}
.addr-suggest-list.is-open{display:block}
.addr-suggest-item{padding:9px 12px;cursor:pointer;font-size:.88rem;color:var(--text);
  display:flex;flex-direction:column;gap:2px}
.addr-suggest-item small{color:var(--text-muted);font-size:.75rem}
.addr-suggest-item:hover,.addr-suggest-item.is-active{background:var(--lav-soft)}

.dpd-calc-office{color:var(--primary-ink);font-weight:600}

/* ============================================================
   История заказов в личном кабинете
   ============================================================ */
.orders-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-md);text-align:left;margin-bottom:28px;
}
.orders-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.orders-card-head h3{margin:0;font-size:1.2rem}
.notify-toggle{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--text-muted);
  cursor:pointer;user-select:none}
.notify-toggle input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.orders-empty{padding:22px 0;color:var(--text-muted);font-size:.92rem}
.orders-list{display:flex;flex-direction:column;gap:14px}

.order-card{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  background:var(--surface)}
.order-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;background:var(--lav-soft);border:0;cursor:pointer;font-family:inherit;
  color:var(--text);text-align:left;transition:background .25s var(--ease)}
.order-head:hover{background:var(--lav)}
.order-head-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.order-number{font-weight:700;font-size:1rem}
.order-date{font-size:.8rem;color:var(--text-muted)}
.order-head-side{display:flex;align-items:center;gap:14px;flex-shrink:0}
.order-total{font-weight:700;white-space:nowrap}
.order-chevron{width:18px;height:18px;transition:transform .25s var(--ease);color:var(--text-muted)}
.order-head[aria-expanded="true"] .order-chevron{transform:rotate(180deg)}

/* Цветом кодируется только то, что требует РЕАКЦИИ клиента: заказ приехал и его
   ждут (мята), заказ у курьера (небо), с доставкой проблема (персик). Остальные
   этапы нейтральные - иначе подсветка перестаёт что-либо значить. */
.order-badge{padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:600;
  background:var(--lav);color:var(--primary-ink);white-space:nowrap}
.order-badge-arrived{background:var(--mint);color:var(--mint-ink)}
.order-badge-courier{background:var(--sky);color:var(--sky-ink)}
.order-badge-delivered{background:var(--mint);color:var(--mint-ink)}
.order-badge-problem,.order-badge-cancelled{background:var(--peach);color:var(--peach-ink)}

.order-body{padding:20px 18px}
.order-action{margin:0 0 18px;padding:14px 16px;background:var(--mint);color:var(--mint-ink);
  border-radius:var(--radius-sm);font-size:.92rem;line-height:1.5;font-weight:500}
.order-card[data-stage="problem"] .order-action{background:var(--peach);color:var(--peach-ink)}

.order-timeline{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:0;counter-reset:step}
.order-timeline li{flex:1;position:relative;padding-top:22px;font-size:.74rem;
  color:var(--text-muted);text-align:center;min-width:0}
.order-timeline li::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;
  background:var(--border)}
.order-timeline li:first-child::before{left:50%}
.order-timeline li:last-child::before{right:50%}
.order-timeline li.done::before,.order-timeline li.current::before{background:var(--lav-deep)}
.order-dot{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:12px;height:12px;
  border-radius:50%;background:var(--surface);border:2px solid var(--border);z-index:1}
.order-timeline li.done .order-dot{background:var(--lav-deep);border-color:var(--lav-deep)}
.order-timeline li.current .order-dot{background:var(--primary);border-color:var(--primary);
  box-shadow:0 0 0 4px var(--focus-ring-primary)}
.order-timeline li.current{color:var(--primary);font-weight:600}
.order-step-title{display:block;padding:0 2px}
.order-timeline-cancelled{color:var(--peach-ink);font-size:.9rem;font-weight:600;padding:0 0 6px}
.order-timeline-problem li .order-dot{border-color:var(--peach-deep)}

.order-items{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--border)}
.order-items li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:.9rem}
.order-sums{list-style:none;margin:0 0 14px;padding:0;font-size:.9rem}
.order-sums li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
  color:var(--text-muted)}
.order-sums-total{color:var(--text);font-size:1rem;padding-top:9px !important;
  border-top:1px solid var(--border)}
.order-meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
.order-meta{font-size:.82rem;color:var(--text-muted)}
.order-track-btn{display:inline-block;padding:10px 18px;font-size:.85rem}

.order-history{margin-top:18px}
.order-history h4{margin:0 0 10px;font-size:.9rem;color:var(--text)}
.order-history-list{list-style:none;margin:0;padding:0;font-size:.84rem}
.order-history-list li{display:flex;gap:14px;padding:6px 0;color:var(--text-muted);
  border-bottom:1px dashed var(--border)}
.order-history-date{flex:0 0 150px;color:var(--text-muted)}

@media (max-width:640px){
  .orders-card{padding:20px 16px}
  .order-head{padding:14px}
  .order-head-side{gap:10px}
  .order-body{padding:16px 14px}
  /* Горизонтальный таймлайн на узком экране превращается в нечитаемую кашу из
     обрезанных подписей - разворачиваем его в вертикальный список. */
  .order-timeline{flex-direction:column;gap:2px}
  .order-timeline li{padding:6px 0 6px 26px;text-align:left;font-size:.82rem}
  .order-timeline li::before{top:0;bottom:0;left:5px;right:auto;width:2px;height:auto}
  .order-timeline li:first-child::before{top:50%;left:5px}
  .order-timeline li:last-child::before{bottom:50%;right:auto;left:5px}
  .order-dot{top:50%;left:0;transform:translateY(-50%)}
  .order-history-date{flex:0 0 auto}
  .order-history-list li{flex-direction:column;gap:2px}
}

/* Личный кабинет лежит внутри .prose, а тот вешает на КАЖДЫЙ li декоративный
   кружок через ::before на left:0. Мои списки заказа обнуляют левый отступ (у
   них своя разметка в две колонки), поэтому кружок оказывался прямо поверх
   первой буквы: "Товары" читалось как "овары" (поймано скриншотом элемента -
   в DOM текст был целым, ломалась только отрисовка). Маркер здесь не нужен ни
   в одном из списков. */
.orders-card li::before{content:none !important}
.orders-card li{padding-left:0;margin-bottom:0}
.order-timeline li{margin-bottom:0}

/* Блок пуш-уведомлений в кабинете */
.push-box{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 18px;margin-bottom:18px;background:var(--lav-soft);border:1px solid var(--border);
  border-radius:var(--radius-md);text-align:left}
.push-box-text{display:flex;flex-direction:column;gap:4px;min-width:220px;flex:1}
.push-box-text b{font-size:.95rem}
.push-box-text span{font-size:.83rem;color:var(--text-muted);line-height:1.45}
.push-box-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-push{padding:9px 16px;font-size:.85rem}
@media (max-width:640px){
  .push-box{padding:14px}
  .push-box-actions{width:100%}
  .btn-push{flex:1}
}

/* Кнопки блока пушей прячутся атрибутом hidden, а .btn задаёт display:inline-flex -
   и перебивает его: скрытая кнопка «Включить» оставалась видимой рядом с надписью
   «уведомления заблокированы» (поймано живым прогоном в браузере). В проекте такие
   правила уже пишутся точечно на компонент - тем же способом и здесь. */
.push-box [hidden]{display:none !important}

/* Публичная страница заказа по ссылке из письма */
.track-wrap{max-width:820px;margin:0 auto}
.track-card{margin-bottom:20px}
.track-head{background:var(--lav-soft);cursor:default}
.track-hint{text-align:center;color:var(--text-muted);font-size:.88rem;margin-top:20px}
.track-wrap .push-box{margin-top:18px}
.track-wrap [hidden]{display:none !important}