/* Start:/bitrix/templates/ttvori/template_styles.css?1790441177155268*/
/* ── Твоё Творение · дизайн-система по спецификации ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@400;500;600&family=Comfortaa:wght@300;400;500&display=swap');

:root{
  --color-page-bg:#F5F1ED; --color-surface:#FFFCF9; --color-card-bg:#FFFEFC;
  --color-muted-bg:#F4F1EE; --color-promo-bg:#F8F0EA;
  --color-text:#171717; --color-text-secondary:#716B67; --color-text-disabled:#7B746D;
  --color-accent:#AD655F; --color-accent-hover:#94514C; --color-handwritten:#A96860;
  --color-border:#E8E1DB; --color-icon:#30302F; --color-rating:#F28A00;
  --color-success:#55A86B; --color-discount-bg:#F9DEDA; --color-discount-text:#C85B50;

  --font-main:"Manrope",Arial,sans-serif; --font-handwritten:"Caveat",cursive;
  --font-logo:"Comfortaa","Manrope",Arial,sans-serif;
  --font-size-h1-hero:56px; --font-size-h1:40px; --font-size-h2:30px; --font-size-h3:22px;
  --font-size-body:16px; --font-size-secondary:14px; --font-size-caption:12px;
  --font-size-product-title:14px; --font-size-price:18px; --font-size-price-large:26px;
  --font-size-menu:13px; --font-size-handwritten:28px;

  --container-width:1320px; --page-padding:32px; --promo-height:36px; --header-height:72px;
  --sidebar-width:240px; --grid-gap-x:20px; --grid-gap-y:24px; --card-padding:12px;

  --radius-block:12px; --radius-card:10px; --radius-image:8px; --radius-input:12px; --radius-button:999px;

  --shadow-card:0 2px 10px rgba(50,36,28,.06);
  --shadow-card-hover:0 8px 24px rgba(50,36,28,.12);
  --shadow-dropdown:0 12px 32px rgba(40,28,22,.16);

  --button-height:48px; --button-height-small:40px;
  --button-padding:0 28px; --button-padding-small:0 20px;
  --transition-ui:180ms ease;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--color-page-bg); color:var(--color-text);
  overflow-x:clip;
  font-family:var(--font-main); font-size:var(--font-size-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3{margin:0; font-weight:500; text-wrap:balance}
h1{font-size:var(--font-size-h1); line-height:1.15; font-weight:400}
h2{font-size:var(--font-size-h2); line-height:1.2}
h3{font-size:var(--font-size-h3); line-height:1.25}
*:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

.container{max-width:var(--container-width); margin:0 auto; padding:0 var(--page-padding)}
.hand{font-family:var(--font-handwritten); color:var(--color-handwritten);
  font-size:var(--font-size-handwritten); line-height:1.05; font-weight:500}
.muted{color:var(--color-text-secondary)}
.caption{font-size:var(--font-size-caption); color:var(--color-text-secondary)}
.tnum{font-variant-numeric:tabular-nums}

/* ── Кнопки ───────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--button-height); padding:var(--button-padding); border-radius:var(--radius-button);
  background:var(--color-accent); color:#fff; font-size:15px; font-weight:600;
  transition:background var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui)}
.btn:hover{background:var(--color-accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-card-hover)}
.btn--sm{height:var(--button-height-small); padding:var(--button-padding-small); font-size:13px}
.btn--cart{height:44px; padding:0 24px; font-size:14px}
.btn--ghost{background:transparent; color:var(--color-text); border:1px solid var(--color-border)}
.btn--ghost:hover{background:var(--color-muted-bg); color:var(--color-text); border-color:var(--color-accent)}
.icon-btn{width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-button);
  color:var(--color-icon); transition:background var(--transition-ui), color var(--transition-ui)}
.icon-btn:hover{background:var(--color-muted-bg); color:var(--color-accent)}
.icon-btn--accent{background:var(--color-accent); color:#fff}
.icon-btn--accent:hover{background:var(--color-accent-hover); color:#fff}

/* ── Промополоска ─────────────────────────────────────────────── */
.promo-bar{height:var(--promo-height); background:var(--color-promo-bg); font-size:var(--font-size-caption)}
.promo-bar .container{height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px}
.promo-bar .left{display:inline-flex; align-items:center; gap:8px; color:var(--color-text-secondary)}
.promo-bar .hand{font-size:19px}

/* ── Шапка ────────────────────────────────────────────────────── */
.header{background:var(--color-surface); position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--color-border)}
.header .container{height:var(--header-height); display:flex; align-items:center; gap:24px}
/* Раскладка знака повторяет оригинал: «ТВОЁ» слева, сердце справа от него
   и выше строки, «ТВОРЕНИЕ» во всю ширину под ними. Всё в em от font-size,
   поэтому знак целиком масштабируется одной строкой. */
.logo{position:relative; display:inline-block; flex:none; text-decoration:none;
  color:var(--color-text); font-family:var(--font-logo); font-weight:400;
  font-size:12px; line-height:1; letter-spacing:.2em; text-transform:uppercase;
  padding-top:1.57em; white-space:nowrap}
.logo__l1,.logo__l2{display:block}
.logo__l1{margin-bottom:.61em}
.logo__heart{position:absolute; top:0; right:0; height:3.05em; width:auto; display:block}
.footer .logo{font-size:12.5px; color:var(--color-text)}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.nav{display:flex; align-items:center; gap:22px; flex:none}
.nav a{font-size:var(--font-size-menu); font-weight:500; line-height:1;
  transition:color var(--transition-ui)}
.nav a:hover{color:var(--color-accent)}
.search{flex:1; min-width:120px; height:40px; display:flex; align-items:center; gap:9px;
  background:var(--color-muted-bg); border:1px solid transparent; border-radius:var(--radius-input); padding:0 14px}
.search:focus-within{border-color:var(--color-accent); background:var(--color-surface)}
.search input{flex:1; min-width:0; border:0; background:none; outline:none; font:inherit;
  font-size:var(--font-size-secondary); color:var(--color-text)}
.search input::placeholder{color:var(--color-text-disabled)}
.city{display:inline-flex; align-items:center; gap:6px; font-size:var(--font-size-menu);
  font-weight:500; flex:none; white-space:nowrap}
.header__icons{display:flex; align-items:center; gap:2px; flex:none}
.badge{position:relative}
.badge b{position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--color-accent); color:#fff; font-size:10px; font-weight:700;
  display:grid; place-items:center; line-height:1}

/* ── Секции ───────────────────────────────────────────────────── */
.section{padding:44px 0}
.section--tight{padding:28px 0}
.section__head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:22px}
.section__head h2{font-weight:600}
.link-more{font-size:var(--font-size-secondary); font-weight:600; display:inline-flex; align-items:center; gap:7px;
  transition:color var(--transition-ui)}
.link-more:hover{color:var(--color-accent)}

/* ── Герой ────────────────────────────────────────────────────── */
.hero{position:relative; background:var(--color-surface); border-radius:var(--radius-block);
  overflow:hidden; box-shadow:var(--shadow-card)}
.hero__inner{display:grid; grid-template-columns:1fr 1fr; min-height:430px}
.hero__text{padding:56px 48px; display:flex; flex-direction:column; justify-content:center}
.hero__text h1{font-size:var(--font-size-h1-hero); line-height:1.08; font-weight:400; letter-spacing:-.01em}
.hero__text p{margin:18px 0 0; color:var(--color-text-secondary); max-width:34ch}
.hero__text .btn{margin-top:30px; align-self:flex-start}
.hero__art{position:relative; overflow:hidden; background:#F6EFE7}
.hero__art img{width:100%; height:100%; object-fit:cover; display:block}
.hero__hand{position:absolute; top:24px; right:36px; text-align:center; transform:rotate(-4deg); z-index:3}
.hero__still{width:min(100%,320px); aspect-ratio:1/.8; position:relative; margin:0 auto}
.hero__usp{display:flex; align-items:center; gap:36px; flex-wrap:wrap;
  padding:16px 48px 22px; border-top:1px solid var(--color-border)}
.hero__usp span{display:inline-flex; align-items:center; gap:9px; font-size:var(--font-size-secondary);
  color:var(--color-text-secondary)}
.hero__usp svg{color:var(--color-accent); flex:none}
.slider-dots{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px}
.slider-dots i{width:7px; height:7px; border-radius:999px; background:var(--color-border); display:block}
.slider-dots i.on{background:var(--color-accent); width:20px}
.hero__next{position:absolute; right:20px; bottom:16px; background:var(--color-surface);
  box-shadow:var(--shadow-card)}

/* ── Плитки категорий ─────────────────────────────────────────── */
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--grid-gap-x)}
.cat{background:var(--color-card-bg); border-radius:var(--radius-card); padding:var(--card-padding);
  box-shadow:var(--shadow-card); transition:box-shadow var(--transition-ui), transform var(--transition-ui);
  display:flex; flex-direction:column; gap:12px}
.cat:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px)}
.cat__img{aspect-ratio:1/.92; border-radius:var(--radius-image); overflow:hidden; background:var(--color-muted-bg)}
.cat__img img{width:100%; height:100%; object-fit:cover}
.cat__row{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:0 4px 4px}
.cat__row b{font-size:var(--font-size-product-title); font-weight:600; line-height:1.3}
.cat__row svg{flex:none; color:var(--color-text-disabled); margin-bottom:2px}
.cat:hover .cat__row svg{color:var(--color-accent)}

/* ── Промо-баннер ─────────────────────────────────────────────── */
.banner{background:var(--color-surface); border-radius:var(--radius-block); overflow:hidden;
  display:grid; grid-template-columns:1fr 1.05fr; box-shadow:var(--shadow-card); min-height:230px}
.banner__text{padding:44px 40px; display:flex; flex-direction:column; justify-content:center}
.banner__text h2{font-weight:500; line-height:1.15}
.banner__text p{color:var(--color-text-secondary); font-size:var(--font-size-secondary); margin:14px 0 0; max-width:38ch}
.banner__text .btn{margin-top:24px; align-self:flex-start}
.banner__art{position:relative; background:
  linear-gradient(118deg,#F6EDE4 0%,#EFE0D2 48%,#E9D7C6 100%); display:grid; place-items:center}
.banner__hand{position:absolute; top:26px; left:-6px; transform:rotate(-7deg); font-size:24px}

/* ── Карточка товара ──────────────────────────────────────────── */
.grid-products{display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:var(--grid-gap-x); row-gap:var(--grid-gap-y)}
.grid-products--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--color-card-bg); border-radius:var(--radius-card); padding:var(--card-padding);
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:10px;
  transition:box-shadow var(--transition-ui), transform var(--transition-ui)}
.card:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px)}
.card__media{position:relative; aspect-ratio:1/1; border-radius:var(--radius-image);
  overflow:hidden; background:var(--color-muted-bg)}
.card__media img{width:100%; height:100%; object-fit:cover}
/* Supplied bucket photo has wide blank margins; enlarge its display only. */
.card--paint-bucket .card__media{overflow:hidden}
.card--paint-bucket .card__media img{transform:scale(2.3)}
.product--paint-bucket .gallery,.product--paint-bucket .thumbs button{overflow:hidden}
.product--paint-bucket .gallery img,.product--paint-bucket .thumbs img{transform:scale(2.3)}
.steps.delivery-trust{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.delivery-trust>div{display:block;min-width:0;line-height:1.5}
@media(max-width:600px){.steps.delivery-trust{grid-template-columns:1fr}.steps.delivery-trust>div{display:block;padding-left:0;border-left:0}}
.adult{position:relative; overflow:hidden}
.adult>img{filter:blur(22px); transform:scale(1.12)}
.adult__cover{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:12px; text-align:center; color:#fff; background:rgba(35,25,28,.42)}
.adult__cover b{font-size:24px; line-height:1}
.adult__cover span{font-size:12px; font-weight:600}
.adult__show{background:#fff; color:var(--color-text); border-radius:999px; padding:7px 13px;
  font-size:12px; font-weight:700; box-shadow:var(--shadow-card)}
.adult-ok .adult>img{filter:none; transform:none}
.adult-ok .adult>.adult__cover{display:none}
.tt-age-confirm{display:flex;align-items:flex-start;gap:9px;margin:12px 0 16px;font-size:14px;line-height:1.45;cursor:pointer}
.tt-age-confirm input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--color-accent)}
.sg__pic{position:relative; width:40px; height:40px; flex:none; overflow:hidden; border-radius:7px}
.sg__pic img{width:100%; height:100%; object-fit:cover}
.sg__pic .adult__cover{padding:0}
.sg__pic .adult__cover b{font-size:13px}
.card__fav{position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:999px;
  background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--color-icon);
  box-shadow:var(--shadow-card); transition:color var(--transition-ui)}
.card__fav:hover{color:var(--color-accent)}
.card__tag{position:absolute; top:8px; left:8px; background:var(--color-discount-bg);
  color:var(--color-discount-text); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px}
.card__title{font-size:var(--font-size-product-title); font-weight:500; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
.card__rating{display:flex; align-items:center; gap:6px; font-size:var(--font-size-caption);
  color:var(--color-text-disabled)}
.card__stars{color:var(--color-rating); letter-spacing:1px; font-size:11px}
.card__bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto}
.card__price{font-size:var(--font-size-price); font-weight:700}
.card__price s{font-size:12px; font-weight:400; color:var(--color-text-disabled); margin-left:6px}
.card__buy{width:32px; height:32px; border-radius:8px; background:var(--color-accent); color:#fff;
  display:grid; place-items:center; transition:background var(--transition-ui)}
.card__buy:hover{background:var(--color-accent-hover)}
.card__noprice{font-size:var(--font-size-caption); color:var(--color-text-disabled)}

/* ── Нижние преимущества ──────────────────────────────────────── */
.usp-row{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--grid-gap-x);
  background:var(--color-surface); border-radius:var(--radius-block); padding:22px 28px;
  box-shadow:var(--shadow-card)}
.usp-row div{display:flex; align-items:center; gap:12px; font-size:var(--font-size-secondary); line-height:1.3}
.usp-row svg{flex:none; color:var(--color-accent)}

/* ── Хлебные крошки ───────────────────────────────────────────── */
.crumbs{display:flex; align-items:center; gap:8px; font-size:var(--font-size-caption);
  color:var(--color-text-secondary); padding:16px 0}
.crumbs a:hover{color:var(--color-accent)}

/* ── Каталог: сайдбар + сетка ─────────────────────────────────── */
.catalog{display:grid; grid-template-columns:var(--sidebar-width) 1fr; gap:24px; align-items:start}
.filter{background:var(--color-surface); border-radius:var(--radius-block); padding:20px 18px;
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:22px}
.filter__group h4{margin:0 0 12px; font-size:var(--font-size-secondary); font-weight:700;
  display:flex; align-items:center; justify-content:space-between}
.filter__group h4 svg{color:var(--color-text-disabled)}
.filter label{display:flex; align-items:center; gap:9px; font-size:var(--font-size-secondary);
  padding:5px 0; color:var(--color-text); cursor:pointer}
.filter label span.n{margin-left:auto; color:var(--color-text-disabled); font-size:var(--font-size-caption)}
.filter input[type=checkbox]{width:15px; height:15px; accent-color:var(--color-accent); flex:none}
.filter__more{font-size:var(--font-size-caption); color:var(--color-accent); font-weight:600; margin-top:6px}
.range{height:3px; background:var(--color-border); border-radius:999px; position:relative; margin:14px 4px 16px}
.range i{position:absolute; width:13px; height:13px; border-radius:999px; background:var(--color-accent);
  top:-5px; box-shadow:var(--shadow-card)}
.price-inputs{display:flex; gap:8px}
.price-inputs input{flex:1; min-width:0; height:36px; border:1px solid var(--color-border);
  border-radius:var(--radius-input); background:var(--color-muted-bg); padding:0 12px;
  font:inherit; font-size:var(--font-size-secondary); outline:none}
.price-inputs input:focus{border-color:var(--color-accent); background:var(--color-surface)}
.catalog__panel{background:var(--color-surface); border-radius:var(--radius-block); padding:20px 24px 24px;
  box-shadow:var(--shadow-card)}
.catalog__bar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px}
.select{height:var(--button-height-small); border:1px solid var(--color-border); border-radius:var(--radius-input);
  background:var(--color-surface); padding:0 14px; display:inline-flex; align-items:center; gap:10px;
  font-size:var(--font-size-secondary); font-weight:500}
.viewmodes{display:flex; gap:4px}
.viewmodes .icon-btn{border-radius:8px}
.viewmodes .on{background:var(--color-muted-bg); color:var(--color-accent)}
.catalog__title{padding:8px 0 22px}
.catalog__title h1{font-weight:400}
.catalog__title p{margin:12px 0 0; color:var(--color-text-secondary); max-width:60ch}
.catalog__hero{position:relative; background:var(--color-surface); border-radius:var(--radius-block);
  padding:26px 32px 30px; box-shadow:var(--shadow-card); overflow:hidden}
.catalog__hero .hand{position:absolute; right:44px; top:34px; text-align:center; transform:rotate(-5deg)}
.leaf{position:absolute; right:150px; top:-10px; opacity:.5}
.pager{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:28px}
.pager a{min-width:36px; height:36px; padding:0 10px; border-radius:var(--radius-input);
  display:grid; place-items:center; font-size:var(--font-size-secondary); font-weight:600;
  color:var(--color-text-secondary)}
.pager a:hover{background:var(--color-muted-bg); color:var(--color-text)}
.pager a.on{background:var(--color-accent); color:#fff}

/* ── Карточка товара, страница ────────────────────────────────── */
.product{display:grid; grid-template-columns:64px 1fr 1fr; gap:20px; align-items:start;
  background:var(--color-surface); border-radius:var(--radius-block); padding:24px;
  box-shadow:var(--shadow-card)}
.thumbs{display:flex; flex-direction:column; gap:10px}
.thumbs button{aspect-ratio:1/1; border-radius:var(--radius-image); overflow:hidden;
  background:var(--color-muted-bg); border:1px solid transparent}
.thumbs button.on{border-color:var(--color-accent)}
.thumbs img{width:100%; height:100%; object-fit:cover}
.gallery{aspect-ratio:1/1; border-radius:var(--radius-image); overflow:hidden; background:var(--color-muted-bg)}
.gallery img{width:100%; height:100%; object-fit:cover}
.pinfo{display:flex; flex-direction:column; gap:16px; padding:4px 4px 0}
.pinfo h1{font-size:26px; line-height:1.2; font-weight:500}
.pinfo__price{font-size:var(--font-size-price-large); font-weight:700; display:flex; align-items:baseline; gap:12px}
.pinfo__price s{font-size:15px; font-weight:400; color:var(--color-text-disabled)}
.pinfo__price .off{background:var(--color-discount-bg); color:var(--color-discount-text);
  font-size:13px; font-weight:700; padding:3px 9px; border-radius:999px}
.pinfo__buy{display:flex; gap:10px; align-items:center}
.pinfo__buy .btn{flex:1}
.instock{display:inline-flex; align-items:center; gap:8px; font-size:var(--font-size-secondary); color:var(--color-success)}
.instock i{width:7px; height:7px; border-radius:999px; background:var(--color-success)}
.specs{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:4px}
.spec{display:flex; align-items:center; gap:11px; background:var(--color-muted-bg);
  border-radius:var(--radius-input); padding:11px 14px}
.spec svg{flex:none; color:var(--color-text-secondary)}
.spec b{display:block; font-size:var(--font-size-caption); color:var(--color-text-secondary); font-weight:400}
.spec span{font-size:var(--font-size-secondary); font-weight:600}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--color-border); margin:28px 0 0}
.tabs button{padding:12px 18px; font-size:var(--font-size-secondary); font-weight:600;
  color:var(--color-text-secondary); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button.on{color:var(--color-text); border-color:var(--color-accent)}
.tabpane{background:var(--color-surface); border-radius:0 0 var(--radius-block) var(--radius-block);
  padding:24px; box-shadow:var(--shadow-card)}
.tabpane p{margin:0 0 12px; color:var(--color-text-secondary); max-width:75ch}

/* ── Подвал ───────────────────────────────────────────────────── */
.footer{background:var(--color-surface); border-top:1px solid var(--color-border); margin-top:36px;
  padding:44px 0 26px}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:32px}
.footer h4{margin:0 0 14px; font-size:var(--font-size-caption); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--color-text-secondary)}
.footer ul{margin:0; padding:0; list-style:none; display:grid; gap:9px; font-size:var(--font-size-secondary)}
.footer ul a{color:var(--color-text-secondary)}
.footer ul a:hover{color:var(--color-accent)}
.footer__note{font-size:var(--font-size-secondary); color:var(--color-text-secondary); line-height:1.6; margin:10px 0 0}
.footer__bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--color-border); margin-top:34px; padding-top:20px;
  font-size:var(--font-size-caption); color:var(--color-text-disabled)}
.socials{display:flex; gap:8px; margin-top:14px}
.socials a{width:36px; height:36px; border-radius:999px; background:var(--color-muted-bg);
  display:grid; place-items:center; color:var(--color-icon)}
.socials a:hover{background:var(--color-accent); color:#fff}

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width:1180px){
  .cats,.grid-products{grid-template-columns:repeat(4,minmax(0,1fr))}
  .usp-row{grid-template-columns:repeat(3,1fr); row-gap:16px}
  .footer__grid{grid-template-columns:repeat(3,1fr)}
  .nav{display:none}
}
@media (max-width:900px){
  :root{--font-size-h1-hero:38px; --font-size-h1:30px; --font-size-h2:24px; --page-padding:20px}
  .hero__inner,.banner{grid-template-columns:1fr}
  .hero__text{padding:34px 24px}
  .hero__usp{padding:14px 24px 18px; gap:20px}
  .catalog{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .thumbs{flex-direction:row}
  .thumbs button{width:64px}
}
@media (max-width:640px){
  .cats,.grid-products,.grid-products--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usp-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .search,.city{display:none}
  .section{padding:28px 0}
  .specs{grid-template-columns:1fr}
}

/* ── Внутренние страницы ──────────────────────────────────────── */
.page-title{padding:6px 0 24px}
.page-title h1{font-weight:400}
.page-title p{margin:12px 0 0; color:var(--color-text-secondary)}
.panel{background:var(--color-surface); border-radius:var(--radius-block);
  box-shadow:var(--shadow-card); padding:28px}
.panel h2{font-weight:500; font-size:var(--font-size-h3); margin-bottom:20px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.list-rows{display:flex; flex-direction:column; gap:12px}
.rowcard{border:1px solid var(--color-border); border-radius:var(--radius-block);
  padding:16px 18px; display:grid; grid-template-columns:56px 1fr auto; gap:16px; align-items:center}
.rowcard__ic{width:56px; height:56px; border-radius:var(--radius-image); background:var(--color-muted-bg);
  display:grid; place-items:center; color:var(--color-accent)}
.rowcard b{font-size:17px; font-weight:600; display:block; margin-bottom:7px}
.rowcard ul{margin:0; padding:0; list-style:none; display:grid; gap:5px;
  font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.rowcard li{display:flex; gap:8px; align-items:center}
.tagprice{background:var(--color-accent); color:#fff; border-radius:999px;
  padding:6px 14px; font-size:var(--font-size-secondary); font-weight:600; white-space:nowrap}
.paycards{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.paycard{border:1px solid var(--color-border); border-radius:var(--radius-block); padding:18px;
  display:flex; gap:14px; align-items:flex-start}
.paycard.soon{background:var(--color-muted-bg); border-style:dashed; color:var(--color-text-disabled)}
.paycard b{display:block; margin-bottom:5px; font-size:15px}
.paycard span{font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.notice{border-radius:var(--radius-block); background:var(--color-discount-bg);
  padding:20px 22px; display:flex; gap:16px; margin-top:16px}
.notice b{color:var(--color-discount-text); display:block; margin-bottom:8px}
.notice ul{margin:0; padding-left:18px; font-size:var(--font-size-secondary); display:grid; gap:6px}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--color-muted-bg);
  border-radius:var(--radius-block); padding:22px 26px; margin-top:24px}
.steps div{display:flex; gap:14px; align-items:center; font-size:var(--font-size-secondary)}
.steps div+div{border-left:1px solid var(--color-border); padding-left:22px}
.steps i{width:40px; height:40px; border-radius:999px; background:var(--color-surface);
  display:grid; place-items:center; color:var(--color-accent); flex:none; font-weight:700; font-style:normal}
.discounts{display:grid; grid-template-columns:repeat(4,1fr); background:var(--color-surface);
  border-radius:var(--radius-block); box-shadow:var(--shadow-card); overflow:hidden}
.discounts div{padding:22px; text-align:center}
.discounts div+div{border-left:1px solid var(--color-border)}
.discounts small{display:block; font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.discounts b{display:block; font-size:34px; font-weight:700; color:var(--color-accent); margin-top:8px}
.discounts b.sm{font-size:19px; line-height:1.25; margin-top:12px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{display:block; font-size:var(--font-size-secondary); margin-bottom:7px}
.field input,.field textarea{width:100%; height:var(--button-height); border:1px solid var(--color-border);
  border-radius:var(--radius-input); background:var(--color-surface); padding:0 16px; font:inherit; outline:none}
.field textarea{height:96px; padding:13px 16px; resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--color-accent)}
.contact-grid{display:grid; grid-template-columns:420px 1fr; gap:22px; align-items:start}
.cline{display:flex; gap:14px; align-items:flex-start; padding:13px 0}
.cline i{width:40px; height:40px; border-radius:999px; background:var(--color-muted-bg);
  display:grid; place-items:center; color:var(--color-accent); flex:none}
.cline b{display:block; font-size:var(--font-size-secondary); color:var(--color-text-secondary); font-weight:400}
.cline span{font-weight:600}
.map{aspect-ratio:16/10; border-radius:var(--radius-block); overflow:hidden;
  background:linear-gradient(135deg,#EDEEE8 0%,#E4E7DE 100%); position:relative; box-shadow:var(--shadow-card)}
.rating-head{display:grid; grid-template-columns:auto 1fr auto; gap:44px; align-items:center;
  background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card); padding:28px 32px}
.rating-big{font-size:56px; font-weight:700; line-height:1}
.bars{display:grid; gap:7px; max-width:340px}
.bar{display:grid; grid-template-columns:34px 1fr 30px; gap:12px; align-items:center; font-size:var(--font-size-caption)}
.bar u{text-decoration:none; color:var(--color-rating)}
.bar i{height:6px; border-radius:999px; background:var(--color-border); display:block; position:relative}
.bar i s{position:absolute; inset:0 auto 0 0; background:var(--color-rating); border-radius:999px; display:block}
.reviews{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px}
.review{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card); padding:22px}
.review__top{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.ava{width:38px; height:38px; border-radius:999px; background:var(--color-muted-bg);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--color-accent); flex:none}
.review__top time{margin-left:auto; font-size:var(--font-size-caption); color:var(--color-text-disabled)}
.review__item{font-size:var(--font-size-secondary); color:var(--color-text-secondary); margin:0 0 12px}
.review p{margin:0; font-size:var(--font-size-secondary); line-height:1.55}
.review img{margin-top:16px; border-radius:var(--radius-image); width:100%; aspect-ratio:16/11; object-fit:cover}
.demo-chip{display:inline-block; background:var(--color-discount-bg); color:var(--color-discount-text);
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px}
.facts{display:grid; grid-template-columns:repeat(4,1fr); background:var(--color-surface);
  border-radius:var(--radius-block); box-shadow:var(--shadow-card); overflow:hidden; margin:22px 0}
.facts div{padding:20px 22px; display:flex; gap:14px; align-items:center; font-size:var(--font-size-secondary)}
.facts div+div{border-left:1px solid var(--color-border)}
.facts svg{color:var(--color-accent); flex:none}
.ph-box{border:2px dashed var(--color-border); border-radius:var(--radius-block);
  display:grid; place-items:center; text-align:center; padding:60px 20px; color:var(--color-text-disabled);
  background:var(--color-muted-bg); min-height:280px}
.principles{display:flex; flex-direction:column; gap:12px}
.principle{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:16px 20px; display:flex; gap:16px; align-items:center; font-size:15px}
.principle i{width:38px; height:38px; border-radius:999px; background:var(--color-discount-bg);
  display:grid; place-items:center; color:var(--color-accent); flex:none}
.req{display:grid; grid-template-columns:1fr 1fr; gap:0 40px; background:var(--color-surface);
  border-radius:var(--radius-block); box-shadow:var(--shadow-card); padding:10px 24px}
.req div{display:flex; gap:14px; align-items:center; padding:14px 0; font-size:var(--font-size-secondary)}
.req div+div{border-top:1px solid var(--color-border)}
.req div:nth-child(2){border-top:0}
.req svg{color:var(--color-text-secondary); flex:none}
.e404{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; padding:60px 0 80px}
.e404__num{font-family:var(--font-handwritten); font-size:170px; line-height:.8;
  color:var(--color-accent); font-weight:600}
.e404 h1{font-size:44px; margin:14px 0 12px; font-weight:400}
.e404 p{color:var(--color-text-secondary); margin:0 0 30px}
.e404 .back{display:block; margin-top:18px; color:var(--color-accent); font-weight:600;
  text-decoration:underline; text-underline-offset:4px}
.sections{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.sect{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--transition-ui), transform var(--transition-ui)}
.sect:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px)}
.sect__img{aspect-ratio:16/11; background:var(--color-muted-bg); overflow:hidden; position:relative}
.sect__img img{width:100%; height:100%; object-fit:cover}
.sect__body{padding:18px 20px; display:flex; align-items:center; gap:14px}
.sect__body b{font-size:19px; font-weight:500; display:block}
.sect__body small{color:var(--color-text-secondary); font-size:var(--font-size-secondary)}
.sect__body svg{margin-left:auto; color:var(--color-accent); flex:none}
.picks{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pick{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:36px 26px; display:flex; align-items:center; justify-content:flex-end; gap:12px;
  font-size:var(--font-size-h3); font-weight:500; min-height:130px; position:relative; overflow:hidden}
.pick svg.arr{color:var(--color-accent)}
.pick .deco{position:absolute; left:18px; bottom:-10px; opacity:.5}
@media (max-width:1000px){
  .two-col,.contact-grid,.reviews,.form-grid,.paycards,.req,.e404{grid-template-columns:1fr}
  .discounts,.steps,.facts,.sections,.picks{grid-template-columns:1fr 1fr}
  .discounts div+div,.steps div+div,.facts div+div{border-left:0}
  .rating-head{grid-template-columns:1fr; gap:22px}
  .e404__num{font-size:110px}
}
@media (max-width:640px){
  .discounts,.steps,.facts,.sections,.picks{grid-template-columns:1fr}
  .steps{padding:16px 18px; gap:16px}
  .steps div{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; min-width:0}
  .steps div+div{padding-left:0; border-left:0}
  .steps div>span{min-width:0; line-height:1.4}
  .rowcard{grid-template-columns:44px 1fr; gap:12px}
  .rowcard__ic{width:44px; height:44px}
  .tagprice{grid-column:2}
}

.catalog-banner{border-radius:var(--radius-block); overflow:hidden; box-shadow:var(--shadow-card);
  background:#FCFBFA; margin-bottom:12px}
.catalog-banner img{width:100%; display:block}

/* ── Мобильная навигация ──────────────────────────────────────── */
.burger{display:none; width:40px; height:40px; border-radius:var(--radius-input);
  flex-direction:column; gap:4px; align-items:center; justify-content:center; flex:none}
.burger i{width:20px; height:2px; background:var(--color-icon); border-radius:2px; display:block}
.search--mobile{display:none}
.tabbar{display:none}
.drawer{position:fixed; inset:0; z-index:100; background:rgba(23,23,23,.42)}
.drawer__panel{position:absolute; inset:0 22% 0 0; background:var(--color-surface);
  display:flex; flex-direction:column; padding:16px 20px 24px; box-shadow:var(--shadow-dropdown)}
.drawer__top{display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--color-border)}
.drawer__nav{display:flex; flex-direction:column; padding:8px 0; flex:1}
.drawer__nav a{padding:15px 2px; font-size:17px; font-weight:500; border-bottom:1px solid var(--color-border)}
.drawer__nav a:active{color:var(--color-accent)}
.drawer__foot{display:grid; gap:6px; padding-top:18px; border-top:1px solid var(--color-border)}
.drawer__foot a{font-size:19px; font-weight:700}

@media (max-width:900px){
  .burger{display:flex}
  .header .container{gap:12px; height:60px}
  .search--mobile{display:flex; margin:0 var(--page-padding) 12px; height:42px;
    background:var(--color-muted-bg); border-radius:var(--radius-input); padding:0 14px;
    align-items:center; gap:9px}
  .search--mobile input{flex:1; min-width:0; border:0; background:none; outline:none;
    font:inherit; font-size:var(--font-size-secondary); color:var(--color-text)}
  .header{padding-bottom:0}
  .header__icons .icon-btn[aria-label="Профиль"]{display:none}
  .logo{font-size:11px; letter-spacing:.16em}

  .tabbar{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0;
    z-index:90; background:var(--color-surface); border-top:1px solid var(--color-border);
    padding:8px 0 max(8px, env(safe-area-inset-bottom))}
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size:11px; color:var(--color-text-secondary); position:relative}
  .tabbar a.on{color:var(--color-accent)}
  .tabbar a b{position:absolute; top:-3px; right:calc(50% - 20px); min-width:16px; height:16px;
    padding:0 4px; border-radius:999px; background:var(--color-accent); color:#fff;
    font-size:10px; font-weight:700; display:grid; place-items:center}
  body{padding-bottom:74px}
  .footer{margin-bottom:0}
}
@media (max-width:640px){
  .drawer__panel{inset:0 14% 0 0}
}

@media (max-width:900px){
  .promo-bar{height:auto; padding:8px 0}
  .promo-bar .container{flex-direction:column; align-items:flex-start; gap:2px}
  .promo-bar .hand{font-size:17px}
  .hero__art{min-height:240px}
}

/* ── Блок расходных материалов ────────────────────────────────── */
.supplies{display:grid; grid-template-columns:1.15fr 1fr; gap:0; overflow:hidden;
  background:var(--color-promo-bg); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  transition:box-shadow var(--transition-ui)}
.supplies:hover{box-shadow:var(--shadow-card-hover)}
.supplies__text{padding:40px 44px; display:flex; flex-direction:column; justify-content:center}
.supplies__text h3{font-size:32px; font-weight:500; line-height:1.15; margin:16px 0 0; letter-spacing:-.02em}
.supplies__text p{color:var(--color-text-secondary); font-size:var(--font-size-secondary);
  margin:14px 0 0; max-width:46ch; line-height:1.6}
.supplies__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.supplies__tags span{background:var(--color-surface); border-radius:999px; padding:7px 14px;
  font-size:var(--font-size-caption); font-weight:500}
.supplies .btn{align-self:flex-start}
.supplies__art{position:relative; min-height:300px; overflow:hidden}
.supplies__art img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){
  .supplies{grid-template-columns:1fr}
  .supplies__text{padding:28px 22px}
  .supplies__text h3{font-size:26px}
  .supplies__art{min-height:200px}
}

/* ── Шапка категории и SEO-блок ───────────────────────────────── */
.cat-head{position:relative; background:var(--color-surface); border-radius:var(--radius-block);
  box-shadow:var(--shadow-card); padding:30px 34px; margin-bottom:20px; overflow:hidden;
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.cat-head h1{font-weight:400}
.cat-head p{margin:12px 0 0; color:var(--color-text-secondary); max-width:56ch}
.cat-head__art{height:150px; width:auto; object-fit:contain; mix-blend-mode:multiply}
.filter__btns{display:grid; gap:10px}
.filter__btns .btn{width:100%; height:44px; font-size:14px}
.pager-row{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; flex-wrap:wrap}
.pager-row .pager{margin:0}
.seo{background:var(--color-muted-bg); border-radius:var(--radius-block); padding:26px 30px;
  margin-top:20px; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center}
.seo h2{font-size:20px; font-weight:600; margin-bottom:12px}
.seo p{margin:0 0 8px; font-size:var(--font-size-secondary); color:var(--color-text-secondary); line-height:1.6; max-width:78ch}
.seo img{height:150px; width:auto; mix-blend-mode:multiply}
@media (max-width:900px){
  .cat-head,.seo{grid-template-columns:1fr}
  .cat-head__art,.seo img{display:none}
}

/* ── Карточка товара, доработка ───────────────────────────────── */
.grid-products--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.instock-row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.opts select{width:100%; height:44px; border:1px solid var(--color-border); border-radius:var(--radius-input);
  background:var(--color-surface); padding:0 14px; font:inherit; font-size:var(--font-size-secondary);
  outline:none; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-text-secondary) 50%),linear-gradient(135deg,var(--color-text-secondary) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.opts select:focus{border-color:var(--color-accent)}
.pinfo__buy .qty{display:inline-flex; align-items:center; gap:2px; background:var(--color-muted-bg);
  border-radius:var(--radius-input); padding:4px; flex:none}
.pinfo__buy .qty button{width:34px; height:36px; border-radius:8px; display:grid; place-items:center;
  color:var(--color-text-secondary); font-size:17px}
.pinfo__buy .qty button:hover{background:var(--color-surface); color:var(--color-accent)}
.pinfo__buy .qty span{min-width:32px; text-align:center; font-weight:600}
.tabh{font-size:19px; font-weight:600; margin:26px 0 14px}
.tabh:first-child{margin-top:0}
.kit{display:flex; flex-wrap:wrap; gap:10px}
.kit__i{display:inline-flex; align-items:center; gap:9px; background:var(--color-muted-bg);
  border-radius:999px; padding:9px 16px; font-size:var(--font-size-secondary)}
.kit__i svg{width:16px; height:16px; color:var(--color-accent); flex:none}
.props{display:grid; grid-template-columns:auto 1fr; gap:0 24px; margin:0; max-width:640px}
.props dt,.props dd{margin:0; padding:10px 0; font-size:var(--font-size-secondary);
  border-bottom:1px dashed var(--color-border)}
.props dt{color:var(--color-text-secondary)}
.props dd{font-weight:500}
.dlist{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:var(--font-size-secondary)}
.dlist li{display:flex; gap:12px; align-items:center}
.dlist svg{color:var(--color-accent); flex:none}
.revsum{display:flex; align-items:center; gap:32px; background:var(--color-muted-bg);
  border-radius:var(--radius-block); padding:22px 26px}
.revsum .rating-big{font-size:40px}
@media (max-width:1000px){.grid-products--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .grid-products--4,.props{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .props dt{padding-bottom:0; border:0}
  .revsum{flex-direction:column; align-items:flex-start; gap:18px}
}

/* ── Интерактив ───────────────────────────────────────────────── */
.card{position:relative}
.card__media{display:block}
.card__title{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:var(--font-size-product-title); font-weight:500; line-height:1.35; min-height:2.7em}
.card__title:hover{color:var(--color-accent)}
.card__fav.on{color:var(--color-accent)}
.card__fav.on svg{fill:currentColor}
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:200;
  background:var(--color-text); color:var(--color-page-bg); padding:13px 24px; border-radius:999px;
  font-size:var(--font-size-secondary); font-weight:500; box-shadow:var(--shadow-dropdown);
  opacity:0; pointer-events:none; transition:opacity var(--transition-ui), transform var(--transition-ui)}
.toast.on{opacity:1; transform:translate(-50%,0)}
@media (max-width:900px){.toast{bottom:88px}}
.grid-products--list{grid-template-columns:1fr}
.grid-products--list .card{flex-direction:row; align-items:center; gap:18px; padding:14px}
.grid-products--list .card__media{width:150px; flex:none}
.grid-products--list .card__title{min-height:0; font-size:16px; flex:1}
.grid-products--list .card__bottom{margin:0; gap:18px; flex:none}
.grid-products--list .card__fav{top:16px; right:16px}
select.select{appearance:none; cursor:pointer; padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-text-secondary) 50%),linear-gradient(135deg,var(--color-text-secondary) 50%,transparent 50%);
  background-position:calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.empty{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:56px 30px; text-align:center; display:grid; gap:12px; justify-items:center}
.empty__ic{width:64px; height:64px; border-radius:999px; background:var(--color-muted-bg);
  display:grid; place-items:center; color:var(--color-accent); margin-bottom:6px}
.empty__ic svg{width:28px; height:28px}
.empty h3{font-size:21px; font-weight:500}
.empty .btn{margin-top:12px}
.btn.disabled{opacity:.45; pointer-events:none}
.crow h3 a:hover{color:var(--color-accent)}

/* ── Юридические документы ────────────────────────────────────── */
.doc{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:36px 44px; max-width:900px}
.doc h2{font-size:19px; font-weight:600; margin:28px 0 12px}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 12px; font-size:var(--font-size-secondary); line-height:1.7; color:var(--color-text-secondary)}
.doc ul{margin:0 0 14px; padding-left:20px; display:grid; gap:7px;
  font-size:var(--font-size-secondary); line-height:1.6; color:var(--color-text-secondary)}
@media (max-width:640px){.doc{padding:24px 20px}}
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr; gap:0}
  .footer__grid .acc{border-bottom:1px solid var(--color-border)}
  .footer__grid .acc h4{margin:0; padding:16px 0; cursor:pointer; display:flex;
    align-items:center; justify-content:space-between; font-size:13px}
  .footer__grid .acc h4::after{content:''; width:8px; height:8px; border-right:2px solid currentColor;
    border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--transition-ui)}
  .footer__grid .acc.open h4::after{transform:rotate(-135deg) translate(-4px,-4px)}
  .footer__grid .acc ul{padding-bottom:16px}
}
.gallery{cursor:zoom-in}
.gallery img{transition:transform .35s ease}
.gallery:hover img{transform:scale(1.06)}

/* ── Плотнее: сюжеты, отзывы, магазин, подписка ───────────────── */
.subjects{display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-top:14px}
.subj{background:var(--color-card-bg); border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  transition:box-shadow var(--transition-ui), transform var(--transition-ui)}
.subj:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px)}
.subj i{font-size:21px; font-style:normal; line-height:1}
.subj b{font-size:12.5px; font-weight:600; line-height:1.25}
.subj span{font-size:var(--font-size-caption); color:var(--color-text-disabled)}

.rev3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rev3 .review img{aspect-ratio:16/9}

.shopcard{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:26px 28px; display:flex; gap:18px; align-items:flex-start;
  transition:box-shadow var(--transition-ui)}
.shopcard:hover{box-shadow:var(--shadow-card-hover)}
.shopcard__ic{width:48px; height:48px; border-radius:999px; background:var(--color-discount-bg);
  display:grid; place-items:center; color:var(--color-accent); flex:none}
.shopcard b{font-size:19px; font-weight:600; display:block; margin-bottom:8px}
.shopcard p{margin:0; font-size:var(--font-size-secondary); color:var(--color-text-secondary); line-height:1.6}
.shopcard__link{display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:var(--font-size-secondary); font-weight:600; color:var(--color-accent)}

.subscribe{background:var(--color-promo-bg); border-radius:var(--radius-block); padding:26px 28px}
.subscribe b{font-size:19px; font-weight:600; display:block; margin-bottom:8px}
.subscribe p{margin:0 0 18px; font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.subscribe__form{display:flex; gap:10px}
.subscribe__form input{flex:1; min-width:0; height:var(--button-height); border:1px solid var(--color-border);
  border-radius:var(--radius-input); background:var(--color-surface); padding:0 16px; font:inherit; outline:none}
.subscribe__form input:focus{border-color:var(--color-accent)}
.subscribe__form .btn{width:52px; padding:0; flex:none}
.subscribe__agree{display:flex; gap:9px; align-items:center; margin-top:14px;
  font-size:var(--font-size-caption); color:var(--color-text-secondary)}
.subscribe__agree input{accent-color:var(--color-accent); width:15px; height:15px}
.subscribe__agree a{color:var(--color-accent)}

/* плотнее по вертикали */
.section{padding:36px 0}
.section--tight{padding:20px 0}

@media (max-width:1180px){
  .subjects{grid-template-columns:repeat(4,1fr)}
  .rev3{grid-template-columns:1fr 1fr}
  .rev3 .review:last-child{display:none}
}
@media (max-width:640px){
  .subjects{grid-template-columns:repeat(3,1fr)}
  .rev3{grid-template-columns:1fr}
  .rev3 .review:last-child{display:block}
  .shopcard{padding:20px}
  .subscribe{padding:20px}
}

/* ── Анимация открытия страницы ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px){
  .filter{animation:revealUp .5s ease both .12s}
}
@media (prefers-reduced-motion: no-preference){

  /* тонкая полоса загрузки сверху */
  .loadbar{position:fixed; top:0; left:0; height:2px; width:100%; z-index:300;
    background:var(--color-accent); transform-origin:left; transform:scaleX(0);
    animation:loadSweep .75s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes loadSweep{
    0%{transform:scaleX(0); opacity:1}
    70%{transform:scaleX(1); opacity:1}
    100%{transform:scaleX(1); opacity:0}
  }

  @keyframes revealUp{
    from{opacity:0; transform:translateY(14px)}
    to{opacity:1; transform:none}
  }
  @keyframes revealDown{
    from{opacity:0; transform:translateY(-10px)}
    to{opacity:1; transform:none}
  }
  @keyframes revealZoom{
    from{opacity:0; transform:scale(1.04)}
    to{opacity:1; transform:none}
  }

  .promo-bar{animation:revealDown .34s ease both}
  .header{animation:revealDown .38s ease both .04s}

  .hero__text h1{animation:revealUp .5s cubic-bezier(.2,.7,.3,1) both .12s}
  .hero__text p{animation:revealUp .5s cubic-bezier(.2,.7,.3,1) both .2s}
  .hero__text .btn{animation:revealUp .5s cubic-bezier(.2,.7,.3,1) both .28s}
  .hero__art img{animation:revealZoom .7s cubic-bezier(.2,.7,.3,1) both .1s}
  .hero__usp span{animation:revealUp .45s ease both}
  .hero__usp span:nth-child(1){animation-delay:.32s}
  .hero__usp span:nth-child(2){animation-delay:.38s}
  .hero__usp span:nth-child(3){animation-delay:.44s}
  .hero__usp span:nth-child(4){animation-delay:.5s}

  /* блоки ниже героя */
  main > .container > .section{animation:revealUp .5s ease both}
  main > .container > .section:nth-of-type(1){animation-delay:.06s}
  main > .container > .section:nth-of-type(2){animation-delay:.14s}
  main > .container > .section:nth-of-type(3){animation-delay:.2s}
  main > .container > .section:nth-of-type(n+4){animation-delay:.26s}

  /* карточки внутри сетки — лёгкая волна */
  .cats > *, .subjects > *{animation:revealUp .42s ease both}
  .cats > :nth-child(1),.subjects > :nth-child(1){animation-delay:.20s}
  .cats > :nth-child(2),.subjects > :nth-child(2){animation-delay:.25s}
  .cats > :nth-child(3),.subjects > :nth-child(3){animation-delay:.30s}
  .cats > :nth-child(4),.subjects > :nth-child(4){animation-delay:.35s}
  .subjects > :nth-child(5){animation-delay:.38s}
  .subjects > :nth-child(6){animation-delay:.41s}
  .subjects > :nth-child(7){animation-delay:.44s}
  .subjects > :nth-child(8){animation-delay:.47s}

  /* внутренние страницы: каталог и карточка */
  .cat-head, .catalog__hero, .catalog-banner{animation:revealUp .45s ease both .04s}
  .catalog__panel{animation:revealUp .5s ease both .16s}
  .product{animation:revealUp .5s ease both .08s}
  .e404 > div:first-child{animation:revealUp .5s ease both .08s}
  .e404 img{animation:revealZoom .7s ease both .12s}
}

/* ── Надписи поверх фонов ─────────────────────────────────────── */
.hero__hand{position:absolute; top:26px; right:34px; text-align:center;
  transform:rotate(-4deg); z-index:3; font-size:26px;
  text-shadow:0 1px 10px rgba(255,252,249,.75)}
.catalog-banner{position:relative}
.catalog-banner__text{position:absolute; left:6%; top:50%; transform:translateY(-50%) rotate(-2deg);
  font-size:clamp(24px,2.6vw,38px); line-height:1.25; z-index:2}
@media (max-width:900px){
  .catalog-banner__text{font-size:22px; left:5%}
  .hero__hand{top:14px; right:16px; font-size:20px}
}

/* ── Слайдер героя ────────────────────────────────────────────── */
.hero__slides{position:absolute; inset:0}
.hero__slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease}
.hero__slides img.on{opacity:1}
.hero__text.swap h1{animation:revealUp .45s cubic-bezier(.2,.7,.3,1) both}
.hero__text.swap p{animation:revealUp .45s cubic-bezier(.2,.7,.3,1) both .06s}
.hero__text.swap .btn{animation:revealUp .45s cubic-bezier(.2,.7,.3,1) both .12s}
.hero__prev{position:absolute; right:70px; bottom:16px; background:var(--color-surface);
  box-shadow:var(--shadow-card); transform:rotate(180deg)}
.hero__next{right:20px}
.slider-dots i{cursor:pointer; transition:width var(--transition-ui), background var(--transition-ui)}
.slider-dots i:hover{background:var(--color-accent-hover)}
@media (max-width:900px){
  .hero__prev{display:none}
  .hero__next{right:12px; bottom:12px}
}

/* ── Табы карточки: липкие ────────────────────────────────────── */
.tabs{position:sticky; top:var(--header-height); z-index:20; background:var(--color-page-bg);
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap}

/* ── Липкая панель покупки на мобильном ───────────────────────── */
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  background:var(--color-surface); border-top:1px solid var(--color-border);
  padding:12px var(--page-padding) calc(12px + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 -6px 24px rgba(40,28,22,.1);
  transform:translateY(100%); transition:transform var(--transition-ui)}
.buybar.on{transform:none}
.buybar__price{display:block; font-size:19px; font-weight:700}
.buybar .caption{display:block; max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.buybar .btn{height:44px; padding:0 22px; flex:none}

/* ── Фильтр: липкий на десктопе, шторка на мобильном ──────────── */
.filter{position:sticky; top:calc(var(--header-height) + 12px); max-height:calc(100vh - var(--header-height) - 32px); overflow-y:auto}
.filter::-webkit-scrollbar{width:6px}
.filter::-webkit-scrollbar-thumb{background:var(--color-border); border-radius:3px}
.filter__head{display:none}
.filter-open{display:none}
.filter-veil{position:fixed; inset:0; z-index:98; background:rgba(23,23,23,.42)}
.filter-open b{background:var(--color-accent); color:#fff; min-width:20px; height:20px;
  border-radius:999px; display:grid; place-items:center; font-size:11px; font-weight:700}

@media (max-width:900px){
  .buybar{display:flex}
  .tabs{top:0}
  body:has(.product){padding-bottom:84px}
  .filter-open{display:inline-flex}
  .filter{position:fixed; inset:auto 0 0 0; z-index:99; max-height:82vh; border-radius:16px 16px 0 0;
    transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.7,.3,1);
    box-shadow:0 -10px 40px rgba(40,28,22,.24); padding-bottom:24px}
  .filter.open{transform:none}
  .filter__head{display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:-20px; background:var(--color-surface); padding:6px 0 14px; margin:-6px 0 0;
    border-bottom:1px solid var(--color-border); z-index:2}
  .filter__head b{font-size:19px; font-weight:600}
  .filter__btns{position:sticky; bottom:-24px; background:var(--color-surface);
    padding-top:14px; margin-bottom:-8px}
}

/* ── Быстрая связь ────────────────────────────────────────────── */
.quick{display:grid; gap:10px}
.quick__i{display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--color-border); border-radius:var(--radius-block);
  transition:border-color var(--transition-ui), background var(--transition-ui)}
.quick__i:hover{border-color:var(--color-accent); background:var(--color-muted-bg)}
.quick__i i{width:40px; height:40px; border-radius:999px; background:var(--color-discount-bg);
  display:grid; place-items:center; color:var(--color-accent); flex:none}
.quick__i b{display:block; font-size:15px; font-weight:600}
.quick__i span{font-size:var(--font-size-caption); color:var(--color-text-secondary)}
.quick__i svg:last-child{margin-left:auto; color:var(--color-text-disabled)}
.quick__i:hover svg:last-child{color:var(--color-accent)}

/* ── 404: поиск и ссылки ──────────────────────────────────────── */
.e404__search{max-width:420px; height:var(--button-height); background:var(--color-surface);
  border:1px solid var(--color-border)}
.e404__links{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.e404__links a{font-size:var(--font-size-secondary); padding:8px 15px; border-radius:999px;
  background:var(--color-muted-bg); color:var(--color-text-secondary)}
.e404__links a:hover{background:var(--color-discount-bg); color:var(--color-accent)}

/* ── Кнопки-чипы ──────────────────────────────────────────────── */
.revfilter{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 4px}
.chip-btn{padding:9px 16px; border-radius:999px; background:var(--color-surface);
  border:1px solid var(--color-border); font-size:var(--font-size-secondary); font-weight:500;
  display:inline-flex; align-items:center; gap:8px; transition:all var(--transition-ui)}
.chip-btn span{color:var(--color-text-disabled); font-size:var(--font-size-caption)}
.chip-btn:hover{border-color:var(--color-accent)}
.chip-btn.on{background:var(--color-accent); color:#fff; border-color:var(--color-accent)}
.chip-btn.on span{color:rgba(255,255,255,.72)}
.filter--empty .filter__btns,
.filter--empty .range,
.filter--empty .price-inputs{display:none}
.filter--empty::after{content:'Фильтры появятся, когда в разделе будут товары';
  display:block; font-size:var(--font-size-caption); color:var(--color-text-disabled); line-height:1.5}

/* ── Заглушка фото с коллажем ─────────────────────────────────── */
.ph-box{position:relative; overflow:hidden; padding:0; border-style:solid; border-width:1px;
  border-color:var(--color-border); min-height:330px; display:block}
.ph-box__grid{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr); gap:3px; opacity:.32; filter:saturate(.85)}
.ph-box__grid img{width:100%; height:100%; object-fit:cover}
.ph-box__note{position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:8px; text-align:center; padding:24px; color:var(--color-text-secondary);
  background:radial-gradient(60% 60% at 50% 50%, rgba(255,252,249,.94) 0%, rgba(255,252,249,.72) 100%)}
.ph-box__note b{font-size:18px; font-weight:600; color:var(--color-text)}

/* ── Оглавление документа ─────────────────────────────────────── */
.toc{background:var(--color-muted-bg); border-radius:var(--radius-block); padding:20px 24px;
  margin-bottom:18px; max-width:900px; display:grid; gap:8px}
.toc b{font-size:var(--font-size-caption); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--color-text-secondary); margin-bottom:4px}
.toc a{font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.toc a:hover{color:var(--color-accent)}
.doc h2{scroll-margin-top:calc(var(--header-height) + 20px)}

/* ── Панель действий в избранном ──────────────────────────────── */
.favbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
@media (max-width:640px){.favbar .btn{flex:1}}

/* ── Мобильные правки каталога ────────────────────────────────── */
@media (max-width:900px){
  .catalog__bar{flex-wrap:wrap; gap:10px}
  .catalog__bar > span{order:3; width:100%}
  .catalog__bar > div{flex:1; justify-content:flex-end}
  .catalog__panel{padding:16px 14px 20px}
  .viewmodes{display:none}
  select.select{max-width:190px}
  .filter{animation:none !important}
}
@media (max-width:640px){
  .cat-head{padding:22px 20px}
  .container{padding:0 16px}
  .crumbs{padding:12px 0; flex-wrap:wrap}
  .grid-products{column-gap:12px; row-gap:18px}
  .card{padding:10px}
  .card__title{font-size:13.5px}
  .card__price{font-size:17px}
  .tabs button{padding:11px 13px; font-size:13px}
  .rating-head{padding:20px}
  .rating-big{font-size:40px}
  .revsum{padding:18px}
  .toc{padding:16px 18px}
}

/* ── Корзина на мобильном: две строки вместо пяти колонок ─────── */
@media (max-width:900px){
  .cart__list .crow{grid-template-columns:88px minmax(0,1fr) auto; grid-template-areas:
    "img info del" "img actions actions"; gap:12px 14px; align-items:start}
  .cart__list .crow > .crow__img{grid-area:img; width:88px}
  .cart__list .crow > div:nth-child(2){grid-area:info; min-width:0}
  .cart__list .crow > .qty{grid-area:actions; justify-self:start}
  .cart__list .crow > .crow__price{grid-area:actions; justify-self:end; align-self:center; font-size:20px}
  .cart__list .crow > .crow__del{grid-area:del}
  .cart__list .crow h3{font-size:15px}
  .cart__list .crow .chip{margin:8px 0}
}
@media (max-width:420px){
  .cart__list .crow{grid-template-columns:70px minmax(0,1fr) auto}
  .cart__list .crow > .crow__img{width:70px}
}
.two-col--wide{grid-template-columns:1.15fr 1fr}
.two-col--narrow{grid-template-columns:1fr 1.15fr}
@media (max-width:1000px){
  .two-col--wide,.two-col--narrow{grid-template-columns:1fr}
}

/* ── Одноколоночные сетки не должны распираться содержимым ────── */
@media (max-width:1000px){
  .cart,.co,.two-col,.two-col--wide,.two-col--narrow,.contact-grid,.catalog,
  .reviews,.form-grid,.paycards,.req,.e404,.rev3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .summary,.panel{padding:20px}
  .promo{flex-wrap:wrap}
  .promo input{min-width:0}
  .promo .btn{flex:1}
}

/* ── Пальцевые размеры на сенсорных экранах ───────────────────── */
@media (max-width:900px){
  .card__buy{width:40px; height:40px; border-radius:10px}
  .card__fav{width:36px; height:36px; top:8px; right:8px}
  .card__fav svg{width:17px; height:17px}
  .qty button{width:38px; height:38px}
  .slider-dots{bottom:16px; gap:10px}
  .slider-dots i{width:9px; height:9px}
  .slider-dots i.on{width:24px}
  .subj{padding:16px 10px}
  .chip-btn{padding:11px 16px}
  .toc a,.footer ul a{display:inline-block; padding:3px 0}
  .link-more{padding:6px 0}
}

/* ── Пропуск навигации для клавиатуры и скринридеров ──────────── */
.skip{position:absolute; left:12px; top:-60px; z-index:400; background:var(--color-accent);
  color:#fff; padding:12px 20px; border-radius:var(--radius-button); font-weight:600;
  transition:top var(--transition-ui)}
.skip:focus{top:12px}

/* ── Новые страницы: возврат, как заказать, вопросы, спасибо ──── */
.steps-v{display:grid; gap:16px}
.stepv{display:flex; gap:16px; align-items:flex-start}
.stepv i{width:34px; height:34px; border-radius:999px; background:var(--color-discount-bg);
  color:var(--color-accent); display:grid; place-items:center; font-style:normal;
  font-weight:700; font-size:14px; flex:none}
.stepv b{display:block; font-size:16px; font-weight:600; margin-bottom:5px}
.stepv span{font-size:var(--font-size-secondary); color:var(--color-text-secondary); line-height:1.6}

.checks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.checks li{display:flex; gap:11px; align-items:flex-start; font-size:var(--font-size-secondary);
  color:var(--color-text-secondary); line-height:1.6}
.checks li::before{content:''; width:18px; height:18px; border-radius:999px; flex:none; margin-top:2px;
  background:var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.checks--no li::before{background:var(--color-discount-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/11px no-repeat}
.linklist{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:var(--font-size-secondary)}
.linklist a{color:var(--color-accent)}

.steps-big{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stepbig{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:26px 24px; display:flex; flex-direction:column; gap:8px}
.stepbig__n{width:38px; height:38px; border-radius:999px; background:var(--color-accent); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:16px; margin-bottom:6px}
.stepbig b{font-size:18px; font-weight:600}
.stepbig p{margin:0; font-size:var(--font-size-secondary); color:var(--color-text-secondary); line-height:1.6; flex:1}
.stepbig .link-more{margin-top:8px}

.faq{display:grid; gap:10px}
.faq__group{font-size:var(--font-size-h3); font-weight:600; margin:22px 0 6px}
.faq__group:first-child{margin-top:0}
.faq__i{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:0 22px; overflow:hidden}
.faq__i summary{cursor:pointer; list-style:none; padding:18px 0; font-size:15.5px; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:''; width:9px; height:9px; flex:none; border-right:2px solid var(--color-accent);
  border-bottom:2px solid var(--color-accent); transform:rotate(45deg) translateY(-2px);
  transition:transform var(--transition-ui)}
.faq__i[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq__i p{margin:0 0 20px; font-size:var(--font-size-secondary); color:var(--color-text-secondary);
  line-height:1.7; max-width:72ch}

.thanks{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:52px 40px; text-align:center; display:grid; justify-items:center; gap:12px}
.thanks__ic{width:72px; height:72px; border-radius:999px; background:var(--color-success);
  color:#fff; display:grid; place-items:center; margin-bottom:8px}
.thanks h2{font-size:28px; font-weight:500}
.thanks > p{margin:0; color:var(--color-text-secondary); max-width:52ch}
.thanks__facts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; width:100%}
.thanks__facts div{background:var(--color-muted-bg); border-radius:var(--radius-block); padding:18px;
  display:flex; gap:12px; align-items:center; text-align:left;
  font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.thanks__facts svg{color:var(--color-accent); flex:none}

@media (max-width:1000px){
  .steps-big{grid-template-columns:1fr 1fr}
  .thanks__facts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .steps-big{grid-template-columns:1fr}
  .thanks{padding:34px 20px}
  .thanks h2{font-size:23px}
}
.pager__gap{min-width:24px; height:36px; display:grid; place-items:center;
  color:var(--color-text-disabled); font-size:var(--font-size-secondary)}

/* липкие табы на мобильном конфликтуют с внутренней прокруткой */
@media (max-width:900px){
  .tabs{position:static}
}

/* ── Два входа в каталог ──────────────────────────────────────── */
.custom-wholesale{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:7px 34px; padding:30px 38px; border-radius:var(--radius-block); overflow:hidden;
  background:linear-gradient(120deg,#F7E4DF 0%,#FFF8F3 55%,#F0D1CA 100%);
  box-shadow:var(--shadow-card); position:relative; color:var(--color-text)}
.custom-wholesale:after{content:"♡"; position:absolute; right:18%; top:-34px;
  font-family:var(--font-handwritten); font-size:140px; line-height:1; color:rgba(196,35,46,.08); transform:rotate(-9deg)}
.custom-wholesale__eyebrow{font-size:11px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--color-accent); position:relative; z-index:1}
.custom-wholesale__title{font-size:clamp(34px,4vw,52px); line-height:1; font-weight:600;
  color:var(--color-accent); position:relative; z-index:1}
.custom-wholesale__types{font-size:18px; line-height:1.4; font-weight:700; position:relative; z-index:1}
.custom-wholesale__text{font-size:14px; line-height:1.55; color:var(--color-text-secondary); position:relative; z-index:1}
.custom-wholesale__button{grid-column:2; grid-row:1/5; display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 24px; border-radius:999px; background:var(--color-accent); color:#fff;
  font-weight:700; white-space:nowrap; position:relative; z-index:1}

.gates{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.gate{position:relative; overflow:hidden; border-radius:var(--radius-block); padding:38px 40px 34px;
  display:flex; flex-direction:column; box-shadow:var(--shadow-card);
  transition:box-shadow var(--transition-ui), transform var(--transition-ui)}
.gate:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-3px)}
.gate__label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  display:inline-block; padding:6px 13px; border-radius:999px; align-self:flex-start; margin-bottom:20px}
.gate h2{font-size:clamp(28px,3.2vw,42px); font-weight:700; line-height:1.06; letter-spacing:-.03em}
.gate p{margin:16px 0 0; font-size:15px; line-height:1.6; max-width:44ch}
.gate__stats{display:flex; flex-wrap:wrap; gap:26px; margin:26px 0 0}
.gate__stats b{display:block; font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.gate__stats span{display:block; font-size:var(--font-size-caption); margin-top:2px}
.gate__go{display:inline-flex; align-items:center; gap:10px; margin-top:auto; padding-top:28px;
  font-size:16px; font-weight:600}
.gate__ar{display:inline-flex; width:34px; height:34px; border-radius:999px;
  align-items:center; justify-content:center; transition:transform var(--transition-ui)}
.gate:hover .gate__ar{transform:translateX(4px)}

.gate--retail{background:var(--color-surface); color:var(--color-text)}
.gate--retail .gate__label{background:var(--color-discount-bg); color:var(--color-discount-text)}
.gate--retail p{color:var(--color-text-secondary)}
.gate--retail .gate__stats span{color:var(--color-text-secondary)}
.gate--retail .gate__go{color:var(--color-accent)}
.gate--retail .gate__ar{background:var(--color-accent); color:#fff}

.gate--opt{background:linear-gradient(140deg,#3D2E2B 0%,#5A403A 55%,#7A544B 100%); color:#FFFCF9}
.gate--opt .gate__label{background:rgba(255,252,249,.16); color:#FFFCF9}
.gate--opt h2{color:#FFFCF9}
.gate--opt p{color:rgba(255,252,249,.78)}
.gate--opt .gate__stats b{color:#FFFCF9}
.gate--opt .gate__stats span{color:rgba(255,252,249,.62)}
.gate--opt .gate__go{color:#FFFCF9}
.gate--opt .gate__ar{background:#FFFCF9; color:#5A403A}

@media (max-width:1000px){
  .custom-wholesale{grid-template-columns:1fr; padding:25px 24px; gap:8px}
  .custom-wholesale__title{font-size:38px}
  .custom-wholesale__types{font-size:16px}
  .custom-wholesale__button{grid-column:1; grid-row:auto; justify-self:start; margin-top:10px;
    white-space:normal; text-align:center}
  .gates{grid-template-columns:1fr}
  .gate{padding:28px 24px}
  .gate__stats{gap:20px}
}

/* ── Кнопка и мега-меню каталога ──────────────────────────────── */
.btn-cat{display:inline-flex; align-items:center; gap:10px; background:var(--color-accent); color:#fff;
  height:40px; padding:0 18px; border-radius:var(--radius-button); font-size:14px; font-weight:600;
  flex:none; transition:background var(--transition-ui)}
.btn-cat:hover,.btn-cat.on{background:var(--color-accent-hover)}
.btn-cat .bars{display:grid; gap:3px}
.btn-cat .bars i{display:block; width:14px; height:2px; background:#fff; border-radius:1px;
  transition:transform var(--transition-ui)}
.btn-cat.on .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.btn-cat.on .bars i:nth-child(2){opacity:0}
.btn-cat.on .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mega{position:fixed; left:0; right:0; z-index:60; background:var(--color-surface);
  overflow-y:auto; border-top:1px solid var(--color-border); box-shadow:var(--shadow-dropdown);
  animation:megaIn .2s ease}
@keyframes megaIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.mega__inner{display:grid; grid-template-columns:1.1fr 1fr .8fr 1.3fr; gap:32px; padding:28px 32px 32px}
.mega__col h4{margin:0 0 14px; font-size:var(--font-size-caption); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-text-secondary)}
.mega__col ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.mega__col a{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px; margin:0 -10px; border-radius:8px; font-size:var(--font-size-secondary);
  font-weight:500; transition:background var(--transition-ui), color var(--transition-ui)}
.mega__col a:hover{background:var(--color-muted-bg); color:var(--color-accent)}
.mega__col a span{font-size:var(--font-size-caption); color:var(--color-text-disabled); font-variant-numeric:tabular-nums}
.mega__promo{display:block; margin-top:18px; padding:18px 20px; border-radius:var(--radius-block);
  background:linear-gradient(140deg,#3D2E2B 0%,#6B4A43 100%); color:#FFFCF9}
.mega__promo b{display:block; font-size:16px; font-weight:600; margin-bottom:5px}
.mega__promo span{font-size:var(--font-size-caption); color:rgba(255,252,249,.72); line-height:1.5}
.mega__promo:hover{filter:brightness(1.08)}

@media (max-width:1180px){
  .btn-cat{display:none}
  .mega{display:none}
}
.lowstock{background:var(--color-discount-bg); color:var(--color-discount-text);
  font-size:var(--font-size-caption); font-weight:700; padding:4px 10px; border-radius:999px}
.instock-row{flex-wrap:wrap; gap:10px}
.workgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.workgrid img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-block);
  box-shadow:var(--shadow-card)}
.workgrid img:nth-child(1){transform:rotate(-2deg)}
.workgrid img:nth-child(2){transform:rotate(1.5deg)}
.workgrid img:nth-child(3){transform:rotate(1deg)}
.workgrid img:nth-child(4){transform:rotate(-1.5deg)}
@media (max-width:640px){.workgrid{grid-template-columns:1fr 1fr; gap:8px}}

/* ── Оптовый каталог материалов ───────────────────────────────── */
.b2b-head{background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:32px 36px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  margin-bottom:20px; overflow:hidden}
.b2b-head h1{font-size:clamp(28px,3.4vw,40px); font-weight:700; letter-spacing:-.03em; margin:14px 0 0}
.b2b-head p{margin:12px 0 0; color:var(--color-text-secondary); max-width:62ch; line-height:1.6}
.b2b-head__art{width:220px; height:170px; object-fit:cover; border-radius:var(--radius-block)}

.b2b{display:grid; grid-template-columns:220px 1fr 320px; gap:20px; align-items:start}
.b2b__nav{position:sticky; top:calc(var(--header-height) + 12px);
  background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card); padding:20px 18px}
.b2b__nav h4{margin:0 0 12px; font-size:var(--font-size-caption); font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--color-text-secondary)}
.b2b__nav ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.b2b__nav a{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; margin:0 -10px;
  border-radius:8px; font-size:var(--font-size-secondary); font-weight:500}
.b2b__nav a:hover{background:var(--color-muted-bg); color:var(--color-accent)}
.b2b__nav a span{color:var(--color-text-disabled); font-size:var(--font-size-caption)}
.b2b__hint{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--color-border); font-size:var(--font-size-secondary);
  font-weight:600; color:var(--color-accent)}
.b2b__hint svg{width:15px; height:15px}

.b2b__main{background:var(--color-surface); border-radius:var(--radius-block);
  box-shadow:var(--shadow-card); padding:20px 24px 24px; min-width:0}
.b2b__bar{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.b2b__search{flex:1; min-width:200px; height:42px; background:var(--color-muted-bg)}

.mgroup{margin-bottom:26px; scroll-margin-top:calc(var(--header-height) + 20px)}
.mgroup h3{font-size:19px; font-weight:600; margin-bottom:12px}
.mtable{display:grid; gap:2px}
.mrow{display:grid; grid-template-columns:1fr 110px 130px 140px; gap:14px; align-items:center;
  padding:12px 14px; border-radius:10px; transition:background var(--transition-ui)}
.mrow:hover{background:var(--color-muted-bg)}
.mrow.on{background:#FDF4F2; box-shadow:inset 0 0 0 1px var(--color-accent)}
.mrow--head{background:none; padding:6px 14px; font-size:var(--font-size-caption); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-secondary)}
.mrow--head:hover{background:none}
.mrow__name b{display:block; font-size:15px; font-weight:600; line-height:1.3}
.mrow__name small{display:block; font-size:var(--font-size-caption); color:var(--color-text-secondary); margin-top:3px}
.mrow__art{font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.mrow__pack{font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.mrow__qty{display:inline-flex; align-items:center; gap:2px; background:var(--color-muted-bg);
  border-radius:var(--radius-input); padding:3px}
.mrow.on .mrow__qty{background:var(--color-surface)}
.mrow__qty button{width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  color:var(--color-text-secondary); font-size:16px}
.mrow__qty button:hover{background:var(--color-surface); color:var(--color-accent)}
.mrow__qty input{width:54px; height:32px; border:0; background:none; text-align:center; font:inherit;
  font-weight:600; font-variant-numeric:tabular-nums; outline:none; -moz-appearance:textfield}
.mrow__qty input::-webkit-outer-spin-button,.mrow__qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.b2b__cart{position:sticky; top:calc(var(--header-height) + 12px);
  background:var(--color-surface); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  padding:24px; max-height:calc(100vh - var(--header-height) - 32px); overflow-y:auto}
.b2b__cart h2{font-size:20px; font-weight:600; margin-bottom:16px}
.reqrow{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--color-border)}
.reqrow b{display:block; font-size:var(--font-size-secondary); font-weight:600; line-height:1.3}
.reqrow small{display:block; font-size:11px; color:var(--color-text-secondary); margin-top:2px}
.reqrow > span.tnum{font-weight:700}
.reqrow button{width:26px; height:26px; border-radius:999px; color:var(--color-text-disabled);
  display:grid; place-items:center; font-size:13px}
.reqrow button:hover{background:var(--color-discount-bg); color:var(--color-discount-text)}
.b2b__total{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:16px; margin-top:6px; border-top:1px solid var(--color-border)}
.b2b__total b{font-size:24px; font-weight:700}

.reqbar{position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  background:var(--color-surface); border-top:1px solid var(--color-border);
  padding:12px var(--page-padding) calc(12px + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 -6px 24px rgba(40,28,22,.1)}
.reqbar b{font-size:19px; font-weight:700}

@media (max-width:1180px){
  .b2b{grid-template-columns:1fr 300px}
  .b2b__nav{display:none}
}
@media (max-width:900px){
  .b2b{grid-template-columns:1fr}
  .b2b__cart{position:static; max-height:none}
  .b2b-head{grid-template-columns:1fr}
  .b2b-head__art{width:100%; height:150px}
  .mrow{grid-template-columns:1fr auto; gap:10px 14px}
  .mrow--head{display:none}
  .mrow__art{grid-row:2; font-size:var(--font-size-caption)}
  .mrow__pack{grid-row:2; text-align:right; font-size:var(--font-size-caption)}
  .mrow__qty{grid-column:2; grid-row:1}
  .reqbar.on{display:flex}
  body:has(.b2b){padding-bottom:80px}
}
.b2b-cta{display:flex; align-items:center; gap:20px; justify-content:space-between;
  background:linear-gradient(140deg,#3D2E2B 0%,#6B4A43 100%); color:#FFFCF9;
  border-radius:var(--radius-block); padding:24px 28px; margin-bottom:20px;
  transition:filter var(--transition-ui)}
.b2b-cta:hover{filter:brightness(1.08)}
.b2b-cta b{display:block; font-size:22px; font-weight:700; margin-bottom:6px}
.b2b-cta span{font-size:var(--font-size-secondary); color:rgba(255,252,249,.78); line-height:1.55}
.b2b-cta__go{width:44px; height:44px; border-radius:999px; background:#FFFCF9; color:#5A403A;
  display:grid; place-items:center; flex:none}
@media (max-width:640px){.b2b-cta{flex-direction:column; align-items:flex-start; gap:16px}}

/* ── Заставка при первом открытии ─────────────────────────────── */
.splash{position:fixed; inset:0; z-index:500; background:var(--color-page-bg);
  display:grid; place-items:center; align-content:center; gap:22px;
  transition:opacity .55s ease, visibility .55s ease}
.splash.done{opacity:0; visibility:hidden}

/* Сердце именно рисуется: залитый знак открыт маской из центральных линий,
   каждая «проводится» по очереди — получается ход маркера. Нижний слой —
   тот же знак целиком, он мягко проступает в конце и добирает то,
   что маска не закрыла. Тайминги согласованы с DUR в _chrome.js. */
.splash__art{width:min(46vw,250px)}
.splash__svg{width:100%; height:auto; display:block; overflow:visible}
.splash__rest{opacity:0}
.splash.drawing .splash__rest{animation:inkSettle .5s ease 1.36s both}
.splash.drawing .splash__svg{animation:heartSettle .5s cubic-bezier(.34,1.56,.64,1) 1.42s both}
@keyframes ttDraw{to{stroke-dashoffset:0}}
@keyframes inkSettle{from{opacity:0} to{opacity:1}}
@keyframes heartSettle{0%{transform:scale(1)} 55%{transform:scale(1.05)} 100%{transform:scale(1)}}

.splash__name{display:grid; gap:3px; text-align:center; line-height:1.05}
.splash__name span{display:block; font-family:var(--font-logo);
  font-size:clamp(18px,3.2vw,26px); font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--color-text); opacity:0}
.splash.drawing .splash__name span{animation:splashText .5s cubic-bezier(.2,.7,.3,1) both}
.splash.drawing .splash__name span:nth-child(1){animation-delay:1.5s}
.splash.drawing .splash__name span:nth-child(2){animation-delay:1.62s}
@keyframes splashText{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

/* если данные для рисования не подгрузились — просто показываем знак */
.splash__art img{width:100%; height:auto; display:block;
  animation:heartFade .6s ease both}
@keyframes heartFade{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}

/* логотип в шапке подрисовывается при первом показе страницы */
@media (prefers-reduced-motion: no-preference){
  .logo__heart{animation:logoIn .5s ease both .1s}
  .logo__l1{animation:logoIn .5s ease both .18s}
  .logo__l2{animation:logoIn .5s ease both .24s}
  @keyframes logoIn{from{opacity:0; transform:translateY(-4px) scale(.97)} to{opacity:1; transform:none}}
}

/* Скрытое должно быть скрыто: у блоков ниже задан свой display,
   а он перебивает атрибут hidden. */
[hidden]{display:none !important}

/* ═══ Раскрывающиеся материалы в карточке ══════════════════════ */
.spec--open{cursor:pointer; text-align:left; font:inherit; color:inherit;
  background:none; border:0; padding:0; width:100%; display:flex; align-items:center; gap:10px}
.spec--open:hover b{color:var(--color-accent)}
.spec__arrow{margin-left:auto; width:8px; height:8px; border-right:1.6px solid var(--color-text-secondary);
  border-bottom:1.6px solid var(--color-text-secondary); transform:rotate(45deg); transition:transform .18s}
.spec--open[aria-expanded="true"] .spec__arrow{transform:rotate(-135deg)}
.matbox{margin:10px 0 0; padding:14px 16px; border:1px solid var(--color-border);
  border-radius:12px; background:var(--color-surface)}
.matbox h4{margin:0 0 6px; font-size:15px}
.matbox p{margin:0 0 8px; font-size:14px; color:var(--color-text-secondary); line-height:1.5}
.matbox p:last-child{margin-bottom:0}
.matbox img{display:inline-block; width:190px; max-width:calc(50% - 6px); height:150px;
  object-fit:contain; margin:8px 8px 0 0; vertical-align:top}
@media (max-width:600px){.matbox img{max-width:calc(50% - 6px); height:120px}}
.matbox ul{margin:0 0 8px; padding-left:20px}
.matbox li{font-size:14px; color:var(--color-text-secondary); line-height:1.5; margin-bottom:3px}
.matbox b{color:var(--color-text)}
.matbox .caption{margin-top:10px; font-size:13px}

/* Подписи и выпадающие списки в формах вне модального окна
   (страница «Картина по вашей фотографии») */
.field > span{display:block; font-size:var(--font-size-secondary); margin-bottom:7px}
.field > span b{color:var(--color-accent)}
.field select{width:100%; height:var(--button-height); border:1px solid var(--color-border);
  border-radius:var(--radius-input); padding:0 14px; font:inherit; background:var(--color-surface)}
.field select:focus{border-color:var(--color-accent); outline:none}
.field input[type="file"]{height:auto; padding:11px 14px; background:var(--color-surface)}

/* Плитка материалов на странице для оптовиков */
.optmat{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.optmat figure{margin:0; padding:14px; border:1px solid var(--color-border); border-radius:14px;
  background:var(--color-surface); text-align:center}
.optmat img{width:100%; height:150px; object-fit:contain; margin-bottom:10px}
.optmat figcaption b{display:block; font-size:15px; margin-bottom:4px}
.optmat figcaption span{font-size:13px; color:var(--color-text-secondary); line-height:1.45}
@media (max-width:900px){.optmat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.optmat{grid-template-columns:1fr}}

/* Снимки упаковки в блоке доставки */
.packshot{display:inline-block; width:190px; max-width:calc(50% - 6px); height:140px;
  object-fit:contain; margin:8px 8px 0 0; vertical-align:top}

/* ═══ Что в наборе ═════════════════════════════════════════════ */
.kit{margin:0 0 18px; padding:14px 16px; border:1px solid var(--color-border); border-radius:12px}
.kit__title{display:block; margin-bottom:8px}
.kit__list{display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; margin:0; padding:0}
.kit__list li{font-size:14px; color:var(--color-text-secondary)}
.kit__link{font:inherit; color:var(--color-accent); background:none; border:0; padding:0;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* ═══ Кнопки быстрых заявок ════════════════════════════════════ */
.quickrow{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px}
.quickrow .btn--ghost{flex:1 1 auto}

/* ═══ Окно заявки ══════════════════════════════════════════════ */
.lead{position:fixed; inset:0; z-index:300; background:rgba(23,23,23,.46);
  display:flex; align-items:center; justify-content:center; padding:20px}
.lead__panel{position:relative; width:100%; max-width:420px; background:var(--color-surface);
  border-radius:16px; padding:26px 24px; max-height:90vh; overflow:auto}
.lead__close{position:absolute; top:10px; right:14px; font-size:26px; line-height:1;
  background:none; border:0; cursor:pointer; color:var(--color-text-secondary)}
.lead__panel h3{margin:0 0 6px; font-size:20px}
.lead__product{margin:0 0 16px; font-size:14px; color:var(--color-text-secondary)}
.lead .field{display:block; margin-bottom:12px}
.lead .field > span{display:block; margin-bottom:5px; font-size:13px; color:var(--color-text-secondary)}
.lead .field b{color:var(--color-accent)}
.lead input, .lead textarea{width:100%; padding:11px 13px; font:inherit;
  border:1px solid var(--color-border); border-radius:10px; background:var(--color-page-bg)}
.lead input:focus, .lead textarea:focus{outline:none; border-color:var(--color-accent)}
.lead__err{margin:0 0 10px; font-size:13px; color:#b3261e}
.lead .btn{width:100%; justify-content:center}
.lead__note{margin:12px 0 0; font-size:12px; color:var(--color-text-secondary); line-height:1.45}
.lead__ok{text-align:center; padding:14px 0}
.lead__ok b{display:block; margin-bottom:6px; font-size:17px}
.lead__ok p{margin:0; font-size:14px; color:var(--color-text-secondary)}
@media (max-width:600px){.lead__panel{padding:22px 18px}}

/* ═══ Подсказки в строке поиска ════════════════════════════════ */
.search{position:relative}
.search__drop{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:120;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px;
  box-shadow:0 12px 30px rgba(23,23,23,.12); max-height:380px; overflow:auto; padding:6px}
.sg__row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:var(--color-text)}
.sg__row:hover, .sg__row.on{background:var(--color-muted-bg)}
.sg__row img{width:40px; height:40px; border-radius:7px; object-fit:cover; flex:none}
.sg__nopic{width:40px; height:40px; border-radius:7px; background:var(--color-muted-bg); flex:none}
.sg__name{flex:1; font-size:14px; line-height:1.35}
.sg__price{font-weight:700; font-size:14px; white-space:nowrap}
.sg__row--section{gap:8px}
.sg__cap{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-secondary)}
.sg__row--section b{font-size:14px; font-weight:600}
.sg__empty{padding:14px 12px; font-size:14px; color:var(--color-text-secondary); line-height:1.45}
.sg__all{display:block; padding:10px; margin-top:4px; border-top:1px solid var(--color-border);
  text-align:center; font-size:13px; font-weight:600; color:var(--color-accent)}
@media (max-width:900px){.search__drop{max-height:60vh}}

/* ═══ Отзывы покупателей ═══════════════════════════════════════ */
.stars-off{color:var(--color-border)}
.prating{display:inline-flex; align-items:center; gap:8px; margin:8px 0 2px;
  font-size:var(--font-size-secondary); color:var(--color-text-secondary)}
.prating .card__stars{font-size:15px}
.prating b{color:var(--color-text); font-weight:600}
.prating:hover span:last-child{color:var(--color-accent); text-decoration:underline}
.tabs__count{margin-left:5px; font-weight:500; color:var(--color-text-disabled)}
.tabs__count:empty{display:none}

.revsec .revsum{flex-wrap:wrap; gap:18px 32px; background:var(--color-surface); box-shadow:var(--shadow-card)}
.revsum__score{display:flex; align-items:center; gap:16px}
.revsum__stars{font-size:18px; letter-spacing:2px}
.revsum__empty{flex:1 1 320px}
.revsum__empty b{display:block; font-size:17px; margin-bottom:4px}
.revsum__empty span{font-size:var(--font-size-secondary); color:var(--color-text-secondary); line-height:1.55}
.revsum__actions{display:flex; flex-wrap:wrap; gap:10px; margin-left:auto}
.rev-more{text-align:center; margin-top:18px}

.review__name{display:block}
.review__city{display:block; font-size:var(--font-size-caption); color:var(--color-text-secondary)}
.review .review__item{margin:0 0 8px}
.review__item a{color:var(--color-accent)}
.review__item a:hover{text-decoration:underline}
.review__photos{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.review__photos a{display:block; width:92px; height:92px; border-radius:var(--radius-image); overflow:hidden;
  background:var(--color-muted-bg); cursor:zoom-in}
.review .review__photos img{margin:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover;
  border-radius:0; transition:transform .25s ease}
.review__photos a:hover img{transform:scale(1.05)}
.review__answer{margin-top:14px; padding:12px 14px; border-left:3px solid var(--color-accent);
  background:var(--color-muted-bg); border-radius:0 var(--radius-image) var(--radius-image) 0}
.review__answer b{display:block; font-size:var(--font-size-caption); color:var(--color-accent); margin-bottom:4px}
.review--pending{outline:2px dashed var(--color-rating); outline-offset:-2px}
.review .review__pending{margin:0 0 12px; padding:8px 12px; border-radius:var(--radius-image);
  background:#FFF4E0; font-size:13px; line-height:1.45}
.review__pending a{color:var(--color-accent); font-weight:600}
.revnote{margin:0 0 16px; padding:12px 16px; border-radius:var(--radius-block); background:#FFF4E0;
  font-size:var(--font-size-secondary); line-height:1.5}

.rating-head__score{text-align:center}
.rating-big span{font-size:20px; font-weight:400; color:var(--color-text-secondary)}
.rating-head__stars{display:block; font-size:19px; margin:10px 0 6px; letter-spacing:2px}
.rating-head--empty{grid-template-columns:1fr auto}
.rating-head--norate{grid-template-columns:auto auto; justify-content:space-between}
.rating-head--norate .rating-head__score{text-align:left}
.rating-head--norate .caption{font-size:17px; font-weight:600; color:var(--color-text)}
.rating-head__empty b{display:block; font-size:19px; margin-bottom:6px}
.rating-head__empty span{color:var(--color-text-secondary); font-size:var(--font-size-secondary)}
.revshare{background:var(--color-promo-bg); display:grid; grid-template-columns:1fr 1fr; gap:30px;
  align-items:center; margin-top:26px}
.revshare--solo{grid-template-columns:1fr}
.revshare h2{font-size:26px; margin-bottom:14px}
.revshare .caption{line-height:1.65; margin:0 0 22px; font-size:var(--font-size-secondary)}
.revshare .revshare__btn{border-color:var(--color-accent); color:var(--color-accent)}
@media (max-width:900px){.rating-head--empty,.rating-head--norate{grid-template-columns:1fr}}
@media (max-width:760px){
  .revshare{grid-template-columns:1fr}
  .revsum__actions{margin-left:0; width:100%}
  .revsum__actions .btn{flex:1 1 auto}
}

/* Окно отзыва: звёзды, фото */
.lead__panel--wide{max-width:520px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.rstars{border:0; margin:0 0 12px; padding:0; min-width:0}
.rstars legend{padding:0; margin-bottom:4px; font-size:13px; color:var(--color-text-secondary)}
.rstars legend b{color:var(--color-accent)}
.rstars__row{display:inline-flex; flex-direction:row-reverse; vertical-align:middle}
.lead .rstars__row input{position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; pointer-events:none}
.rstars__row label{font-size:34px; line-height:1; padding:0 3px; color:var(--color-border); cursor:pointer;
  transition:color .12s ease}
.rstars__row input:checked ~ label{color:var(--color-rating)}
.rstars__row:hover input:checked ~ label{color:var(--color-border)}
.rstars__row:hover label:hover, .rstars__row:hover label:hover ~ label{color:var(--color-rating)}
.rstars__row input:focus-visible + label{outline:2px solid var(--color-accent); outline-offset:1px; border-radius:6px}
.rstars__word{margin-left:10px; font-size:13px; color:var(--color-text-secondary); vertical-align:middle}
.rphotos{display:flex; flex-wrap:wrap; gap:8px}
.rphotos__item{position:relative; width:76px; height:76px; border-radius:10px; overflow:hidden; background:var(--color-muted-bg)}
.rphotos__item img{display:block; width:100%; height:100%; object-fit:cover}
.rphotos__item button{position:absolute; top:3px; right:3px; width:24px; height:24px; padding:0; border:0;
  border-radius:999px; background:rgba(23,23,23,.62); color:#fff; font-size:16px; line-height:24px; cursor:pointer}
.rphotos__add{position:relative; width:76px; height:76px; border:1px dashed var(--color-border); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11px; color:var(--color-text-secondary); background:var(--color-page-bg); cursor:pointer}
.rphotos__add:hover{border-color:var(--color-accent); color:var(--color-accent)}
.rphotos__add:focus-within{outline:2px solid var(--color-accent); outline-offset:2px}
.lead .rphotos__add input{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:pointer}
.rphotos__note{display:block; margin-top:6px; font-size:12px; color:var(--color-text-secondary); line-height:1.4}
/* общее правило «.field label» делает подпись блоком — кнопке добавления фото нужен flex */
.field .rphotos__add{display:flex; margin:0; font-size:11px}
@media (max-width:480px){
  .rstars__row label{font-size:32px; padding:0 2px}
  .rstars__word{display:block; margin:2px 0 0}
}

/* Просмотр фото из отзыва */
.rbox{position:fixed; inset:0; z-index:320; background:rgba(15,12,10,.9);
  display:flex; align-items:center; justify-content:center; padding:48px 64px}
.rbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px}
.rbox__btn{position:absolute; width:44px; height:44px; padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:42px; cursor:pointer}
.rbox__btn:hover{background:rgba(255,255,255,.26)}
.rbox__close{top:14px; right:14px}
.rbox__prev{left:12px; top:50%; transform:translateY(-50%)}
.rbox__next{right:12px; top:50%; transform:translateY(-50%)}
@media (max-width:600px){
  .rbox{padding:60px 8px}
  .rbox__prev,.rbox__next{top:auto; bottom:12px; transform:none}
}

/* ═══ Корзина: пустая и промокод ═══════════════════════════════ */
.cart-empty{margin:0 0 30px}
.cart-empty__links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.cart-empty .cart-empty__links .btn{margin-top:6px}
/* запасное сообщение самой формы заказа: у неё пустая картинка */
.bx-soa-empty-cart-image{display:none}

/* Поле промокода стоит между разделами формы заказа и оформлено как они — карточкой. */
.promo-code{margin:0 0 12px; padding:14px 18px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card)}
.promo-code__form{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0}
.promo-code__label{margin:0; font-size:15px; font-weight:600}
.promo-code__row{display:flex; gap:8px; flex:1 1 320px; max-width:460px}
.promo-code__row input{flex:1; min-width:0; height:40px; margin:0; padding:0 12px;
  border:1px solid var(--color-border); border-radius:8px; background:#fff;
  font:inherit; font-size:15px; letter-spacing:.04em; text-transform:uppercase}
.promo-code__row input::placeholder{text-transform:none; letter-spacing:0; color:var(--color-text-disabled)}
.promo-code__row input:focus{outline:none; border-color:var(--color-accent)}
.promo-code__row .btn{flex:none; height:40px}
.promo-code__row .btn:disabled{opacity:.6; transform:none; box-shadow:none; cursor:default}
.promo-code__msg{margin:8px 0 0; font-size:13px; line-height:1.45}
.promo-code__msg--bad{color:#b3261e}
.promo-code__list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; max-width:560px}
.promo-code__item{display:flex; align-items:center; gap:10px; padding:7px 7px 7px 12px;
  border-radius:10px; background:var(--color-muted-bg); font-size:13px; line-height:1.4}
.promo-code__item b{font-weight:700; letter-spacing:.03em}
.promo-code__item span{flex:1; color:var(--color-text-secondary)}
.promo-code__item--ok{background:#E8F4EB}
.promo-code__item--ok span{color:#2F7A46}
.promo-code__item--wait{background:#FFF4E0}
.promo-code__item--wait span{color:#7A5200}
.promo-code__item button{flex:none; width:30px; height:30px; padding:0; border:0; border-radius:999px;
  background:transparent; color:var(--color-text-secondary); font-size:19px; line-height:30px; cursor:pointer}
.promo-code__item button:hover{background:rgba(23,23,23,.07); color:var(--color-text)}
@media (max-width:480px){
  .promo-code__row{flex-basis:100%; max-width:none}
}

/* ═══ Оформление заказа ════════════════════════════════════════
   Корзина — стандартная форма заказа Битрикса (sale.order.ajax, шаблон .default)
   со своими стилями, Bootstrap и синей темой. Здесь она приводится к виду сайта:
   разделы — карточки, кнопки — как везде, без зелёных рамок и синих кнопок.
   #main в начале правил перебивает стили формы, не трогая её файлы. */
#main #bx-soa-order{font-family:var(--font-main); color:var(--color-text)}
#main #bx-soa-order .bx-soa-section{margin:0 0 12px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card)}
#main #bx-soa-order .bx-soa-section.bx-selected{border-color:var(--color-accent)}
#main #bx-soa-order .bx-soa-section.bx-step-error{border-color:#D9807A}
#main #bx-soa-order .bx-soa-section.bx-step-warning{border-color:#E8B45C}
#main #bx-soa-order .bx-soa-section-title-container{display:flex; align-items:center; gap:10px; margin:0;
  padding:14px 18px; background:transparent; border:0}
#main #bx-soa-order .bx-soa-section-title-container > *{float:none; width:auto; padding:0}
#main #bx-soa-order .bx-soa-section-title{flex:1; margin:0; padding:0; font-family:var(--font-main);
  font-size:17px; font-weight:600; line-height:1.3; color:var(--color-text)}
/* Кружок шага: номер форма рисует через ::after, галочку готового шага — через ::before */
#main #bx-soa-order .bx-soa-section-title-count{position:relative; width:22px; height:22px; margin:0 8px 0 0; vertical-align:-5px;
  background:var(--color-muted-bg); border:0; border-radius:999px}
#main #bx-soa-order .bx-soa-section-title-count::after{position:absolute; top:0; left:0; width:22px; height:22px; margin:0;
  font-family:var(--font-main); font-size:12px; font-weight:700; line-height:22px; text-align:center; color:var(--color-text-secondary)}
#main #bx-soa-order .bx-soa-section-title-count::before{background:none}
#main #bx-soa-order .bx-selected .bx-soa-section-title-count{background:var(--color-discount-bg)}
#main #bx-soa-order .bx-selected .bx-soa-section-title-count::after{color:var(--color-accent)}
#main #bx-soa-order .bx-step-completed .bx-soa-section-title-count{background:#E8F4EB}
#main #bx-soa-order .bx-step-completed .bx-soa-section-title-count::after{color:transparent}
#main #bx-soa-order .bx-step-completed .bx-soa-section-title-count::before{left:7px; top:6px; width:9px; height:5px;
  border-left:2px solid #2F7A46; border-bottom:2px solid #2F7A46; background:none; transform:rotate(-45deg)}
#main #bx-soa-order .bx-soa-editstep{font-size:13px; font-weight:500; color:var(--color-accent); border:0; text-decoration:none}
#main #bx-soa-order .bx-soa-editstep:hover{text-decoration:underline}
#main #bx-soa-order .bx-soa-section-content{padding:0 18px 16px; font-size:14px; line-height:1.55}
#main #bx-soa-order .bx-soa-section-content strong{font-weight:600}
#main #bx-soa-order .bx-soa-item-img-block a{display:block; border-radius:8px; overflow:hidden}
#main #bx-soa-order .bx-soa-item-title, #main #bx-soa-order .bx-soa-item-title a{font-size:14px; font-weight:600; line-height:1.4; color:var(--color-text)}
#main #bx-soa-order .bx-price{font-weight:700; color:var(--color-text)}

/* Плитки доставки и оплаты */
#main #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company{padding:6px}
#main #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company-graf-container{min-height:74px; background:#fff;
  border:1px solid var(--color-border); border-radius:10px; box-shadow:none; transition:border-color var(--transition-ui)}
#main #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company:hover .bx-soa-pp-company-graf-container{border-color:#D6C9BF}
#main #bx-soa-order .bx-soa-pp-item-container .bx-soa-pp-company.bx-selected .bx-soa-pp-company-graf-container{
  border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent)}
#main #bx-soa-order .bx-soa-pp-company-smalltitle{margin-top:6px; font-size:12px; line-height:1.35; color:var(--color-text)}
#main #bx-soa-order .bx-soa-pp-delivery-cost{border-radius:6px; font-size:12px; font-weight:700}
#main #bx-soa-order .bx-soa-pp-desc-container .bx-soa-pp-company{padding:14px 16px; background:var(--color-muted-bg);
  border:0; border-radius:10px}
#main #bx-soa-order .bx-soa-pp-company-subTitle{margin:0 0 8px; font-size:15px; font-weight:600; color:var(--color-text)}
#main #bx-soa-order .bx-soa-pp-company-desc{font-size:13px; line-height:1.5; color:var(--color-text-secondary)}
#main #bx-soa-order .bx-soa-pp-list{margin:8px 0 0; padding:0; list-style:none}
#main #bx-soa-order .bx-soa-pp-list li{display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:13px}
#main #bx-soa-order .bx-soa-pp-list-termin{color:var(--color-text-secondary)}
#main #bx-soa-order .bx-soa-pp-list-description{font-weight:600}

/* Поля */
#main #bx-soa-order .form-control{height:44px; padding:0 14px; border:1px solid var(--color-border); border-radius:10px;
  background:#fff; box-shadow:none; font-family:var(--font-main); font-size:15px; color:var(--color-text)}
#main #bx-soa-order textarea.form-control{height:auto; min-height:92px; padding:10px 14px}
#main #bx-soa-order .form-control:focus{border-color:var(--color-accent); box-shadow:none; outline:none}
/* Поле города: слева у него значок поиска, справа — крестик очистки */
#main #bx-soa-order .bx-sls .dropdown-block.form-control{height:auto; min-height:44px; padding:0 36px 0 38px}
#main #bx-soa-order .bx-soa-custom-label, #main #bx-soa-order .bx-soa-customer-label{margin:0 0 6px;
  font-size:13px; font-weight:500; color:var(--color-text-secondary)}
#main #bx-soa-order .bx-authform-starrequired{color:var(--color-accent)}
#main #bx-soa-order input[type="radio"], #main #bx-soa-order input[type="checkbox"]{accent-color:var(--color-accent)}
#main #bx-soa-order .radio-inline label{font-size:14px; font-weight:500}

/* Кнопки: «Назад» и прочие — контурные, «Далее» и «Оформить заказ» — главные */
#main #bx-soa-order .btn{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 24px;
  border:1px solid var(--color-border); border-radius:999px; background:transparent; color:var(--color-text);
  font-family:var(--font-main); font-size:14px; font-weight:600; line-height:1; text-shadow:none; box-shadow:none}
#main #bx-soa-order .btn:hover{border-color:var(--color-accent); background:var(--color-muted-bg); color:var(--color-text); transform:none}
#main #bx-soa-order .btn-sm{height:34px; padding:0 14px; font-size:13px}
#main #bx-soa-order .btn-lg{height:48px; padding:0 28px; font-size:15px}
#main #bx-soa-order .bx-soa-more-btn .pull-right, #main #bx-soa-order .btn-order-save, #main #bx-soa-orderSave .btn{
  background:var(--color-accent); border-color:var(--color-accent); color:#fff}
#main #bx-soa-order .bx-soa-more-btn .pull-right:hover, #main #bx-soa-order .btn-order-save:hover, #main #bx-soa-orderSave .btn:hover{
  background:var(--color-accent-hover); border-color:var(--color-accent-hover); color:#fff}
#main #bx-soa-order .bx-soa-more{margin:14px 0 0}

/* Итог справа и его копия на телефоне */
#main #bx-soa-order .bx-soa-cart-total{padding:18px; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-block); box-shadow:var(--shadow-card)}
#main #bx-soa-order .bx-soa-cart-total-line{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:2px 10px; padding:6px 0; border:0; font-size:14px; line-height:1.4}
#main #bx-soa-order .bx-soa-cart-t{float:none; font-weight:400; color:var(--color-text-secondary)}
#main #bx-soa-order .bx-soa-cart-d{float:none; margin-left:auto; font-weight:600; color:var(--color-text); text-align:right}
#main #bx-soa-order .bx-soa-cart-total-line-total{margin-top:6px; padding-top:12px; border-top:1px solid var(--color-border)}
#main #bx-soa-order .bx-soa-cart-total-line-total .bx-soa-cart-t{font-size:15px; font-weight:600; color:var(--color-text)}
/* Размер цифр итоговой суммы форма подбирает сама (totalBlockFixFont), чтобы длинная сумма поместилась. */
#main #bx-soa-order .bx-soa-cart-total-line-total .bx-soa-cart-d{font-weight:700}
#main #bx-soa-order .bx-soa-price-free{font-weight:600; color:#2F7A46}
#main #bx-soa-order .bx-soa-cart-total-button-container{margin-top:14px}
#main #bx-soa-order .bx-soa-cart-total-button-container .btn{width:100%}

/* Сообщения и согласие */
#main #bx-soa-order .alert{margin:0 0 12px; padding:10px 14px; border:0; border-radius:10px; font-size:14px; line-height:1.5}
#main #bx-soa-order .alert-danger{background:#FDECEA; color:#B3261E}
#main #bx-soa-order .alert-warning{background:#FFF4E0; color:#7A5200}
#main #bx-soa-order .alert-success{background:#E8F4EB; color:#2F7A46}
#main #bx-soa-order .alert:empty{display:none}
#main #bx-soa-orderSave .checkbox{margin:10px 0 14px; font-size:13px; line-height:1.5; color:var(--color-text-secondary)}

/* ═══ Вход, регистрация, личный кабинет ════════════════════════
   Эти страницы собраны шаблонами прежнего решения (DressCode) и стандартными
   шаблонами Битрикса. Разметка остаётся их, здесь — только внешний вид. */
#main #authMenu, #main #personalMenu{display:flex; gap:8px; width:auto; height:auto; margin:0 0 22px; padding:0 0 2px;
  list-style:none; overflow-x:auto; scrollbar-width:none}
#main #authMenu::-webkit-scrollbar, #main #personalMenu::-webkit-scrollbar{display:none}
#main #authMenu li, #main #personalMenu li{display:block; flex:none; width:auto; height:auto; margin:0; padding:0}
#main #authMenu a, #main #personalMenu a{display:inline-flex; align-items:center; height:38px; padding:0 16px;
  border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); color:var(--color-text);
  font-size:14px; font-weight:500; white-space:nowrap; text-decoration:none; transition:border-color var(--transition-ui)}
#main #authMenu a:hover, #main #personalMenu a:hover{border-color:var(--color-accent)}
#main #authMenu a.selected, #main #personalMenu a.selected{background:var(--color-accent); border-color:var(--color-accent); color:#fff}
#main #personalMenuWrap{margin:0; padding:0; border:0}

#main .bx-auth{max-width:480px; margin:0 0 40px; padding:24px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card); font-size:15px}
#main .bx-auth:has(.bx-auth-register-form){max-width:680px}
#main .bx-auth .leftContainer, #main .bx-auth .rightContainer{float:none; width:auto; margin:0; padding:0; border:0}
/* Вход через LiveJournal, Mail.ru OpenID, Liveinternet и Blogger давно не работает. */
#main .bx-auth .rightContainer .bx-title, #main .bx-auth .bx-authform-social{display:none}
#main .bx-auth .rightContainer p{margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--color-border);
  font-size:13px; line-height:1.5; color:var(--color-text-secondary)}
#main .bx-auth .rightContainer p a{color:var(--color-accent)}
#main .bx-auth-input-line, #main .bx-auth-form-line{margin:0 0 14px}
#main .bx-auth .bx-authform-label-container{margin:0 0 6px; font-size:13px; color:var(--color-text-secondary)}
#main .bx-auth .starrequired{color:var(--color-accent)}
#main .bx-auth input[type="text"], #main .bx-auth input[type="password"], #main .bx-auth input[type="email"]{display:block;
  width:100%; height:44px; padding:0 14px; border:1px solid var(--color-border); border-radius:10px; background:#fff;
  box-shadow:none; font-family:var(--font-main); font-size:15px; color:var(--color-text)}
#main .bx-auth input[type="text"]:focus, #main .bx-auth input[type="password"]:focus{outline:none; border-color:var(--color-accent)}
#main .bx-auth input[type="checkbox"], #main .bx-auth input[type="radio"]{position:static; width:16px; height:16px;
  margin:0 8px 0 0; opacity:1; vertical-align:-3px; accent-color:var(--color-accent)}
#main .bx-auth .checkbox{margin:0 0 16px; font-size:14px}
#main .bx-auth .checkbox label{display:inline; margin:0; padding:0; font-size:14px; color:var(--color-text)}
#main .bx-auth .auth-submit-container{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px}
#main .bx-auth .btn.submit{display:inline-flex; align-items:center; justify-content:center; width:auto; height:48px;
  padding:0 28px; border:0; border-radius:999px; background:var(--color-accent); color:#fff; font-family:var(--font-main);
  font-size:15px; font-weight:600; text-shadow:none; box-shadow:none; cursor:pointer}
#main .bx-auth .btn.submit:hover{background:var(--color-accent-hover)}
#main .bx-auth a.forgot{font-size:14px; color:var(--color-accent)}
#main .bx-auth .bx-auth-error-container:empty{display:none}
#main font.errortext, #main .errortext{color:#B3261E}
#main font.notetext, #main .notetext{color:#2F7A46}
#main .bx-auth .registerText{margin:0 0 18px; padding:14px 16px; border-radius:10px; background:var(--color-muted-bg);
  font-size:14px; line-height:1.55; color:var(--color-text-secondary)}
#main .bx-auth-register-form .form-group{display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 18px}
#main .bx-auth-register-form .radio{margin:0}
#main .bx-auth-register-form .radio label{display:inline-flex; align-items:center; margin:0; padding:0; font-size:14px; cursor:pointer}
/* Сами кружки у прежнего решения — это span рядом со скрытым input */
#main .bx-auth-register-form .radio label span{display:inline-block; flex:none; box-sizing:border-box; width:18px; height:18px;
  margin:0 8px 0 0; border:2px solid #CFC5BD; border-radius:999px; background:#fff; transition:border var(--transition-ui)}
#main .bx-auth-register-form .radio input[type="radio"]{position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
/* у прежнего решения отметка выбора — синяя точка на ::before/::after; её заменяет рамка ниже */
#main .bx-auth-register-form .radio label span::before, #main .bx-auth-register-form .radio label span::after{display:none}
#main .bx-auth-register-form .radio input:checked + span{border:5px solid var(--color-accent)}
#main .bx-auth-register-form .radio label:hover span{border-color:var(--color-accent)}
#main .bx-auth-register-form .radio i{font-style:normal}
#main .bx-auth .bx-auth-form-line-container{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; width:auto; max-width:100%}
#main .bx-auth .bx-auth-form-line-container .bx-auth-form-line{display:block; width:auto; margin-right:0}
#main .bx-auth .bx-authform-input-container{width:auto; float:none}
#main .bx-auth-form-line-container .bx-auth-form-line:last-child{grid-column:1 / -1}
#main .bx-auth-form-captha-table{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
#main .bx-auth-form-captha-field{flex:1 1 180px}
#main .bx-auth-form-captha-image img{display:block; height:44px; border-radius:8px}
#main .bx-authform-formgroup-container-line{margin:4px 0 16px; font-size:14px}
#main .bx-authform-formgroup-container label{margin:0; font-size:14px; font-weight:400}
#main .bx-authform-formgroup-container a{color:var(--color-accent)}
#main .bx-auth .alert.small{margin:0 0 10px; padding:0; border:0; background:none; font-size:13px; color:#B3261E}
#main .bx-auth .alert.small:empty{display:none}
#main .bx-auth-info-message{margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--color-text-secondary)}
#main .bx-auth-form[name="bform"] > div:first-child{margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--color-text-secondary)}
@media (max-width:600px){
  #main .bx-auth{padding:18px}
  #main .bx-auth .bx-auth-form-line-container{grid-template-columns:1fr}
}

/* Персональные данные */
#main #mainProfile{max-width:900px; margin:0 0 40px; padding:24px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card)}
#main #mainProfile .profileSettings{display:grid; grid-template-columns:1fr 1fr; gap:0 28px; width:auto; height:auto;
  margin:0; padding:0; list-style:none}
#main #mainProfile .profileSettings > li{float:none; width:auto; height:auto; margin:0; padding:0}
#main #mainProfile label{display:block; margin:14px 0 6px; font-size:13px; color:var(--color-text-secondary)}
#main #mainProfile .profileSettings > li > label:first-child{margin-top:0}
#main #mainProfile input[type="text"], #main #mainProfile input[type="password"], #main #mainProfile textarea{display:block;
  width:100%; height:44px; padding:0 14px; border:1px solid var(--color-border); border-radius:10px; background:#fff;
  font-family:var(--font-main); font-size:15px; color:var(--color-text)}
#main #mainProfile textarea{height:96px; padding:10px 14px; resize:vertical}
#main #mainProfile input:focus, #main #mainProfile textarea:focus{outline:none; border-color:var(--color-accent)}
#main #mainProfile .heading{display:block; margin:22px 0 2px; font-size:16px; font-weight:600; color:var(--color-text)}
#main #mainProfile a.submit{display:inline-flex; align-items:center; justify-content:center; width:auto; height:48px;
  margin:22px 0 0; padding:0 28px; border-radius:999px; background:var(--color-accent); color:#fff;
  font-size:15px; font-weight:600; text-decoration:none}
#main #mainProfile a.submit:hover{background:var(--color-accent-hover)}
@media (max-width:700px){
  #main #mainProfile{padding:18px}
  #main #mainProfile .profileSettings{grid-template-columns:1fr}
}

/* История заказов и страница заказа */
#main .sale-order-history-link{display:inline-flex; align-items:center; height:38px; margin:0 0 6px; padding:0 16px;
  border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); color:var(--color-text);
  font-family:var(--font-main); font-size:14px; font-weight:500; text-decoration:none}
#main .sale-order-history-link:hover{border-color:var(--color-accent)}
#main h1.sale-order-title{margin:18px 0 14px; font-family:var(--font-main); font-size:20px; font-weight:600; color:var(--color-text)}
#main .sale-order-list-container, #main .sale-order-list-container :not(.fa),
#main .sale-order-detail, #main .sale-order-detail :not(.fa){font-family:var(--font-main)}
#main .sale-order-list-container{float:none; width:auto; margin:0 0 16px; padding:0; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card); overflow:hidden}
#main .sale-order-list-container > .row{margin:0}
#main .sale-order-list-title-container{float:none; width:auto; padding:14px 18px; background:var(--color-muted-bg)}
#main .sale-order-list-title{margin:0; font-size:16px; font-weight:600; color:var(--color-text)}
#main .sale-order-list-inner-container{float:none; width:auto; padding:8px 18px 16px; border:0}
#main .sale-order-list-inner-title-line-item{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-text-secondary)}
#main .sale-order-list-status-alert, #main .sale-order-list-status-success, #main .sale-order-list-shipment-status-block{
  margin-left:10px; padding:3px 10px; border:0; border-radius:999px; font-size:12px; font-weight:600}
#main .sale-order-list-status-alert{background:#FDECEA; color:#B3261E}
#main .sale-order-list-status-success{background:#E8F4EB; color:#2F7A46}
#main .sale-order-list-shipment-status-block{margin-left:0; background:var(--color-muted-bg); color:var(--color-text)}
#main .sale-order-list-button{display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 22px;
  border-radius:999px; background:var(--color-accent); color:#fff; font-size:14px; font-weight:600; line-height:1}
#main .sale-order-list-button:hover{background:var(--color-accent-hover); color:#fff; text-decoration:none}
#main .sale-order-list-about-link, #main .sale-order-list-repeat-link, #main .sale-order-list-change-payment,
#main .sale-order-detail-back-to-list-link-up, #main .sale-order-detail-back-to-list-link-down{color:var(--color-accent); font-weight:600}
#main .sale-order-list-cancel-link{color:var(--color-text-secondary)}
#main .sale-order-list-top-border{height:1px; background:var(--color-border)}

#main .sale-order-detail-title-element{margin:0 0 10px; font-size:22px; font-weight:600; color:var(--color-text)}
#main .sale-order-detail-back-to-list-link-up, #main .sale-order-detail-back-to-list-link-down{display:inline-flex; align-items:center;
  height:38px; margin:0 0 14px; padding:0 16px; border:1px solid var(--color-border); border-radius:999px;
  background:var(--color-surface); font-size:14px; text-decoration:none}
#main .sale-order-detail-general-head{padding:12px 18px; background:var(--color-muted-bg);
  border-radius:var(--radius-block) var(--radius-block) 0 0}
#main .sale-order-detail-general-head, #main .sale-order-detail-general-item{font-size:15px; font-weight:600; color:var(--color-text)}
#main .sale-order-detail-about-order-title-element, #main .sale-order-detail-payment-options-title-element,
#main .sale-order-detail-payment-options-order-content-title-element{margin:18px 0 10px; font-size:16px; font-weight:600; color:var(--color-text)}
#main .sale-order-detail-about-order-inner-container, #main .sale-order-detail-payment-options-inner-container{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-block)}
#main .sale-order-detail-payment-options-methods, #main .sale-order-detail-payment-options-shipment{border-top-color:var(--color-border)}
#main .sale-order-detail-payment-options-methods-template{border-color:var(--color-border); border-radius:var(--radius-block)}
#main .sale-order-detail-about-order-inner-container-repeat-button, #main .sale-order-detail-payment-options-methods-button-element{
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 20px; border:0; border-radius:999px;
  background:var(--color-accent); color:#fff; font-size:14px; font-weight:600; text-decoration:none}
#main .sale-order-detail-about-order-inner-container-repeat-button:hover,
#main .sale-order-detail-payment-options-methods-button-element:hover{background:var(--color-accent-hover); color:#fff}
#main .sale-order-detail-about-order-inner-container-repeat-cancel{color:var(--color-text-secondary)}
#main .sale-order-detail-payment-options-methods-info-title-status-alert{padding:3px 10px; border:0; border-radius:999px;
  background:#FDECEA; color:#B3261E; font-size:12px; font-weight:600}
#main .sale-order-detail-about-order-inner-container-name-read-more, #main .sale-order-detail-about-order-inner-container-name-read-less,
#main .sale-order-detail-payment-options-methods-info-change-link, #main .sale-order-detail-show-link{
  color:var(--color-accent); border-bottom-color:rgba(173,101,95,.35)}

/* ═══ Меню личного кабинета на узких экранах ═══════════════════
   У прежнего решения поверх меню лежит белая растушёвка (#personalMenu::after),
   а обёртка обрезана по высоте 40px. Кнопки меню и так прокручиваются вбок. */
#main #personalMenu::after{display:none}
#main #personalMenuWrap{height:auto; min-width:0; overflow:visible}
/* у выбранного пункта прежнее решение ставит шрифт robotobold, которого на сайте нет, — браузер брал шрифт с засечками */
#main #personalMenu li .selected, #main #authMenu li .selected{padding-bottom:0; font-family:var(--font-main)}

/* ═══ Профили покупателя: список ════════════════════════════════ */
#main .sale-personal-profile-list{margin:0 0 40px; overflow:visible}
#main table.sale-personal-profile-list-container{width:100%; margin:0; border-collapse:separate; border-spacing:0; overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  font-family:var(--font-main); font-size:14px; line-height:1.45}
#main table.sale-personal-profile-list-container th{padding:12px 16px; background:var(--color-muted-bg); border:0;
  border-bottom:1px solid var(--color-border); font-family:var(--font-main); font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; text-align:left; white-space:nowrap; color:var(--color-text-secondary)}
#main table.sale-personal-profile-list-container td,
#main table.sale-personal-profile-list-container tr:nth-child(odd) td{padding:14px 16px; background:transparent; border:0;
  border-bottom:1px solid var(--color-border); text-align:left; vertical-align:middle; color:var(--color-text)}
#main table.sale-personal-profile-list-container tr:last-child td{border-bottom:0}
#main table.sale-personal-profile-list-container td:nth-child(2){color:var(--color-text-secondary); white-space:nowrap}
#main table.sale-personal-profile-list-container td:nth-child(3){font-weight:600}
/* Стрелки сортировки нарисованы значками Font Awesome, которых на сайте нет, — остаются пустые ссылки */
#main .sale-personal-profile-list-arrow-up, #main .sale-personal-profile-list-arrow-down{display:none}
#main table.sale-personal-profile-list-container td a:hover{opacity:1}
#main table.sale-personal-profile-list-container td a:active{top:0}
#main .sale-personal-profile-list-change-button{display:inline-flex; align-items:center; height:34px; padding:0 16px;
  border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); color:var(--color-text);
  font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; transition:border-color var(--transition-ui)}
#main .sale-personal-profile-list-change-button:hover{border-color:var(--color-accent); color:var(--color-text)}
/* «Удалить» — крестик в кружке; подпись у прежнего решения спрятана нулевым размером шрифта */
#main .sale-personal-profile-list-close-button{width:34px; height:34px; border-radius:999px; opacity:1;
  background:var(--color-muted-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716B67' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:background-color var(--transition-ui)}
#main .sale-personal-profile-list-close-button:hover{opacity:1; background-color:#FDECEA}
/* На телефоне строка таблицы — карточка: название, тип и дата, под ними кнопки */
@media (max-width:700px){
  #main table.sale-personal-profile-list-container, #main table.sale-personal-profile-list-container tbody{display:block}
  #main table.sale-personal-profile-list-container tr{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
    padding:14px 16px; border-bottom:1px solid var(--color-border)}
  #main table.sale-personal-profile-list-container tr:first-child{display:none}
  #main table.sale-personal-profile-list-container tr:last-child{border-bottom:0}
  #main table.sale-personal-profile-list-container tr::after{content:''; order:4; flex-basis:100%; height:0}
  #main table.sale-personal-profile-list-container td,
  #main table.sale-personal-profile-list-container tr:nth-child(odd) td{display:block; min-width:0; padding:0; border:0}
  #main table.sale-personal-profile-list-container td:nth-child(1){display:none}
  #main table.sale-personal-profile-list-container td:nth-child(3){order:1; flex:1 1 100%; font-size:15px}
  #main table.sale-personal-profile-list-container td:nth-child(4){order:2; font-size:13px; color:var(--color-text-secondary)}
  #main table.sale-personal-profile-list-container td:nth-child(4)::after{content:' ·'}
  #main table.sale-personal-profile-list-container td:nth-child(2){order:3; font-size:13px}
  #main table.sale-personal-profile-list-container td:nth-child(5){order:5; margin-top:8px}
  #main table.sale-personal-profile-list-container td:nth-child(6){order:6; margin-top:8px}
}

/* ═══ Профиль покупателя: редактирование ════════════════════════
   Разметка формы рассчитана на Bootstrap (col-md-3, col-md-offset-3), которого
   на этих страницах нет. Форма — карточка, поля в две колонки. */
#main .sale-profile-detail-link-list{margin:0 0 14px}
#main .sale-profile-detail-link-list a{display:inline-flex; align-items:center; gap:8px; height:38px; margin:0; padding:0 16px;
  border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface); color:var(--color-text);
  font-size:14px; font-weight:500; text-decoration:none; transition:border-color var(--transition-ui)}
#main .sale-profile-detail-link-list a::before{content:'←'; color:var(--color-accent)}
#main .sale-profile-detail-link-list a:hover{border-color:var(--color-accent); opacity:1}
#main .sale-profile-detail-link-list a:active{top:0}
#main form.sale-profile-detail-form{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 24px; float:none;
  width:auto; max-width:900px; margin:0 0 40px; padding:24px; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-block); box-shadow:var(--shadow-card); font-family:var(--font-main); font-size:15px}
#main .sale-profile-detail-form > *{grid-column:1 / -1; float:none; width:auto; min-height:0; margin:0; padding:0}
#main .sale-profile-detail-form > .sale-personal-profile-detail-property-text{grid-column:auto}
#main .sale-profile-detail-form .form-group{margin:0 0 16px}
#main .sale-profile-detail-form .sale-personal-profile-detail-form-title-row h4{margin:8px 0 14px; font-family:var(--font-main);
  font-size:17px; font-weight:600; line-height:1.3; color:var(--color-text)}
#main .sale-profile-detail-form .personal-profile-title-name h4{margin-top:0; font-size:20px}
#main .sale-profile-detail-form .form-group-profile-name{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font-size:14px}
#main .sale-profile-detail-form label{display:block; float:none; width:auto; margin:0 0 6px; padding:0; text-align:left;
  font-size:13px; font-weight:500; line-height:1.4; color:var(--color-text-secondary)}
#main .sale-profile-detail-form .form-group-profile-name label{display:inline; margin:0}
/* .req у сайта — карточка реквизитов (сетка, фон, тень); у формы профиля это звёздочка обязательного поля */
#main .sale-profile-detail-form .req{display:inline; width:auto; height:auto; margin:0 0 0 2px; padding:0; background:none;
  border:0; border-radius:0; box-shadow:none; color:var(--color-accent)}
#main .sale-profile-detail-form .col-md-12{float:none; width:auto; padding:0}
#main .sale-profile-detail-form input[type="text"]:not(.bx-ui-sls-fake):not(.bx-ui-sls-route),
#main .sale-profile-detail-form textarea, #main .sale-profile-detail-form select{display:block; width:100%; min-width:0; height:44px;
  margin:0; padding:0 14px; border:1px solid var(--color-border); border-radius:10px; background:#fff; box-shadow:none;
  font-family:var(--font-main); font-size:15px; color:var(--color-text)}
#main .sale-profile-detail-form textarea{height:auto; min-height:96px; padding:10px 14px; line-height:1.5; resize:vertical}
#main .sale-profile-detail-form input[type="text"]:focus:not(.bx-ui-sls-fake),
#main .sale-profile-detail-form textarea:focus{outline:none; border-color:var(--color-accent); background:#fff}
/* Местоположение — поиск города из слоёв: значок, поле, крестик и выпадающий список */
#main .sale-profile-detail-form .bx-sls .dropdown-block{height:auto; min-height:44px; padding:0 36px 0 38px;
  border:1px solid var(--color-border); border-radius:10px; background:#fff; box-shadow:none}
#main .sale-profile-detail-form .bx-sls .bx-ui-sls-container{min-height:42px}
#main .sale-profile-detail-form .bx-sls .bx-ui-sls-container input[type="text"],
#main .sale-profile-detail-form .bx-sls .bx-ui-sls-fake, #main .sale-profile-detail-form .bx-sls .bx-ui-sls-route{height:42px;
  font-family:var(--font-main); font-size:15px}
#main .sale-profile-detail-form .bx-sls .dropdown-icon{top:15px; left:14px}
#main .sale-profile-detail-form .bx-sls .bx-ui-sls-clear{top:0; right:3px; margin-top:6px}
#main .sale-profile-detail-form .bx-sls .dropdown-fade2white{display:none}
#main .sale-profile-detail-form .bx-sls .bx-ui-sls-pane{top:46px; border:1px solid var(--color-border); border-radius:10px;
  box-shadow:var(--shadow-dropdown)}
#main .sale-personal-profile-btn-block{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0 0}
#main .sale-personal-profile-btn-block input[type="submit"]{display:inline-block; width:auto; height:48px; margin:0; padding:0 28px;
  border:1px solid var(--color-accent); border-radius:999px; background:var(--color-accent); color:#fff; box-shadow:none;
  font-family:var(--font-main); font-size:15px; font-weight:600; line-height:46px; cursor:pointer; transform:none}
#main .sale-personal-profile-btn-block input[type="submit"]:hover{background:var(--color-accent-hover); border-color:var(--color-accent-hover);
  box-shadow:none; transform:none}
#main .sale-personal-profile-btn-block input[type="submit"]:active{top:0}
#main .sale-personal-profile-btn-block input[name="reset"]{background:transparent !important; border-color:var(--color-border); color:var(--color-text)}
#main .sale-personal-profile-btn-block input[name="reset"]:hover{background:var(--color-muted-bg) !important; border-color:var(--color-accent);
  color:var(--color-text); opacity:1}
@media (max-width:700px){
  #main form.sale-profile-detail-form{grid-template-columns:minmax(0, 1fr); padding:18px}
}

/* ═══ Личный счёт ════════════════════════════════════════════════
   Пополнение счёта с сайта не работало: форма пополнения выводит вместо поля
   суммы только подпись «руб.», а кнопка «Пополнить» никуда не ведёт.
   Этот блок скрыт — остаётся состояние счёта. */
#main .bx-sap{display:none}
#main .sale-personal-account-wallet-container{width:auto; max-width:460px; margin:0 0 40px; overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card)}
/* Заголовок форма пишет прописными («СОСТОЯНИЕ СЧЕТА НА …») — здесь он обычным регистром */
#main .sale-personal-account-wallet-title{padding:16px 20px 0; background:transparent; border-radius:0; font-family:var(--font-main);
  font-size:14px; font-weight:500; text-transform:lowercase; color:var(--color-text-secondary)}
#main .sale-personal-account-wallet-title::first-letter{text-transform:uppercase}
#main .sale-personal-account-wallet-list-container{background:transparent; border-radius:0}
#main .sale-personal-account-wallet-list-item{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:4px 20px 18px;
  border:0; font-size:15px}
#main .sale-personal-account-wallet-list-item + .sale-personal-account-wallet-list-item{padding-top:14px; border-top:1px solid var(--color-border)}
#main .sale-personal-account-wallet-sum{float:none; font-family:var(--font-main); font-size:32px; font-weight:700; line-height:1.2;
  color:var(--color-text)}
#main .sale-personal-account-wallet-currency{float:none; line-height:1.4}
#main .sale-personal-account-wallet-currency-item,
#main .sale-personal-account-wallet-currency-item + .sale-personal-account-wallet-currency-item{display:inline;
  font:500 14px/1.4 var(--font-main); color:var(--color-text-secondary)}
/* код валюты (RUB) рядом с «Российский рубль» лишний */
#main .sale-personal-account-wallet-currency-item:first-child{display:none}

/* ═══ Подписка на рассылку ═══════════════════════════════════════
   Форма собрана таблицами; каждая таблица — карточка. Флажки прежнего решения —
   картинки поверх спрятанных полей, здесь вместо них обычные поля цвета сайта. */
#main #subscribeEdit{max-width:680px; margin:0 0 40px; font-family:var(--font-main); font-size:15px; color:var(--color-text)}
#main #subscribeEdit > br, #main #subscribeEdit form > br{display:none}
#main #subscribeEdit table.data-table{display:block; width:auto; margin:0 0 16px; padding:20px 24px; border-collapse:separate;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card)}
#main #subscribeEdit .data-table thead, #main #subscribeEdit .data-table tbody, #main #subscribeEdit .data-table tfoot,
#main #subscribeEdit .data-table tr, #main #subscribeEdit .data-table td{display:block; width:auto; padding:0; border:0; background:none; text-align:left}
#main #subscribeEdit .data-table td + td{margin-top:8px}
#main #subscribeEdit h3, #main #subscribeEdit h5{margin:0 0 12px; font-family:var(--font-main); font-size:17px; font-weight:600;
  letter-spacing:0; line-height:1.3; text-transform:none; color:var(--color-text)}
#main #subscribeEdit p{margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--color-text-secondary)}
#main #subscribeEdit a{color:var(--color-accent)}
#main #subscribeEdit .lb{margin:16px 0 6px; font-size:13px; font-weight:500; color:var(--color-text-secondary)}
#main #subscribeEdit .lb:first-child{margin-top:0}
#main #subscribeEdit .starrequired{color:var(--color-accent)}
#main #subscribeEdit input[type="text"], #main #subscribeEdit input[type="password"]{display:block; width:100%; max-width:420px;
  height:44px; margin:0 0 4px; padding:0 14px; border:1px solid var(--color-border); border-radius:10px; background:#fff;
  font-family:var(--font-main); font-size:15px; color:var(--color-text)}
#main #subscribeEdit input[type="text"]:focus, #main #subscribeEdit input[type="password"]:focus{outline:none; border-color:var(--color-accent); background:#fff}
#main #subscribeEdit input[type="checkbox"], #main #subscribeEdit input[type="radio"]{position:static; width:18px; height:18px;
  margin:0 8px 0 0; opacity:1; vertical-align:-4px; accent-color:var(--color-accent); cursor:pointer}
#main #subscribeEdit input[type="checkbox"] + label, #main #subscribeEdit input[type="radio"] + label{display:inline; padding:0;
  font-size:15px; color:var(--color-text)}
#main #subscribeEdit input[type="checkbox"] + label::before, #main #subscribeEdit input[type="radio"] + label::before{display:none}
#main #subscribeEdit label{font-size:15px}
#main #subscribeEdit .mCol{display:inline-block; margin:0 24px 4px 0}
#main #subscribeEdit .data-table tfoot td{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
#main #subscribeEdit input[type="submit"], #main #subscribeEdit input[type="reset"], #main #subscribeEdit input[type="button"]{
  display:inline-block; width:auto; height:48px; margin:0; padding:0 26px; border:1px solid var(--color-border); border-radius:999px;
  background:transparent; color:var(--color-text); font-family:var(--font-main); font-size:15px; font-weight:600; line-height:46px;
  cursor:pointer; transition:background var(--transition-ui), border-color var(--transition-ui)}
#main #subscribeEdit input[type="submit"]:hover, #main #subscribeEdit input[type="reset"]:hover,
#main #subscribeEdit input[type="button"]:hover{border-color:var(--color-accent); background:var(--color-muted-bg)}
#main #subscribeEdit input.submit, #main #subscribeEdit .data-table tfoot input[type="submit"]{background:var(--color-accent);
  border-color:var(--color-accent); color:#fff}
#main #subscribeEdit input.submit:hover, #main #subscribeEdit .data-table tfoot input[type="submit"]:hover{background:var(--color-accent-hover);
  border-color:var(--color-accent-hover)}
#main #subscribeEdit input[type="submit"]:active, #main #subscribeEdit input[type="reset"]:active{top:0}
#main #subscribeEdit > p{font-size:13px}
@media (max-width:600px){
  #main #subscribeEdit table.data-table{padding:18px}
}

/* ═══ Заказ оформлен ═════════════════════════════════════════════
   Блок выводит include/cart_top.php над ответом формы заказа. Стандартный текст
   формы («заказ успешно создан», ссылка в корзину вместо истории заказов) скрыт,
   карточка оплаты с кнопкой банка остаётся. */
#main .order-done{display:grid; justify-items:center; gap:10px; margin:0 0 16px; padding:40px 32px 32px; text-align:center;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card)}
#main .order-done__ic{display:grid; place-items:center; width:64px; height:64px; margin:0 0 6px; border-radius:999px;
  background:var(--color-success); color:#fff}
#main .order-done h2{margin:0; font-size:28px; font-weight:500; line-height:1.2}
#main .order-done__text{max-width:58ch; margin:0; font-size:15px; line-height:1.6; color:var(--color-text-secondary)}
#main .order-done__text b{font-weight:600; color:var(--color-text); overflow-wrap:anywhere}
#main .order-done__facts{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; width:100%;
  margin:16px 0 0; padding:0}
#main .order-done__facts div{padding:14px 16px; border-radius:10px; background:var(--color-muted-bg); text-align:left}
#main .order-done__facts dt{margin:0 0 4px; font-size:12px; font-weight:500; color:var(--color-text-secondary)}
#main .order-done__facts dd{margin:0; font-size:15px; font-weight:600; line-height:1.35; color:var(--color-text); overflow-wrap:anywhere}
#main .order-done__links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:4px 0 30px}
#main .order-done ~ table.sale_order_full_table:first-of-type, #main .order-done ~ br{display:none}
/* у отменённого заказа кнопка оплаты не нужна; «.cart_page >» — чтобы правило было сильнее карточки ниже */
#main .cart_page > .order-done--canceled ~ table.sale_order_full_table{display:none}
#main .order-done__text a{color:var(--color-accent); white-space:nowrap}
#main .order-done--canceled .order-done__ic{background:var(--color-text-disabled)}
/* Кнопки «Подробнее о заказе» и «Продолжить покупки» — под карточкой оплаты */
#main .cart_page:has(> .order-done){display:flex; flex-direction:column}
#main .cart_page:has(> .order-done) > .order-done__links{order:1}
/* Ответ формы заказа: карточка оплаты, а если заказ не найден — карточка с сообщением */
#main .cart_page > table.sale_order_full_table{display:block; width:auto; margin:0 0 16px; padding:22px 24px;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-block); box-shadow:var(--shadow-card);
  font-family:var(--font-main); font-size:15px; line-height:1.6; color:var(--color-text)}
#main .cart_page > table.sale_order_full_table tbody, #main .cart_page > table.sale_order_full_table tr,
#main .cart_page > table.sale_order_full_table td{display:block; padding:0; border:0; background:none; text-align:left}
#main .cart_page > table.sale_order_full_table a{color:var(--color-accent)}
#main .sale_order_full_table .ps_logo{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
#main .sale_order_full_table .ps_logo br{display:none}
#main .sale_order_full_table .pay_name{flex:1 1 100%; font-size:18px; font-weight:600; line-height:1.3; color:var(--color-text)}
#main .sale_order_full_table .ps_logo img{width:64px; height:auto; border-radius:6px}
#main .sale_order_full_table .paysystem_name{font-size:15px; font-weight:500; color:var(--color-text-secondary)}
#main .cart_page > table.sale_order_full_table input[type="submit"], #main .cart_page > table.sale_order_full_table button{
  height:48px; margin:12px 0 0; padding:0 28px; border:0; border-radius:999px; background:var(--color-accent); color:#fff;
  font-family:var(--font-main); font-size:15px; font-weight:600; cursor:pointer}
/* Сбербанк: стили модуля лежат в теле страницы (body .sberbank__…), кнопка у них зелёная с !important */
#main .sberbank__wrapper{margin:14px 0 0; font-family:var(--font-main); text-align:left}
#main .sberbank__content{width:auto; max-width:460px; margin:0 0 10px; padding:0; border:0; text-align:left; font-family:var(--font-main)}
#main .sberbank__price-string{font-family:var(--font-main); font-size:15px; font-weight:500; color:var(--color-text)}
#main .sberbank__price-string b{font-family:var(--font-main); font-size:22px; font-weight:700; white-space:nowrap}
#main .sberbank__payment-link{display:block; width:100%; max-width:320px; height:48px; margin:14px 0 8px; padding:0 28px;
  border-radius:999px; background-color:var(--color-accent) !important; color:#fff !important; font-family:var(--font-main);
  font-size:15px; font-weight:600; line-height:48px; text-align:center; transition:background-color var(--transition-ui)}
#main .sberbank__payment-link:hover, #main .sberbank__payment-link:focus{background-color:var(--color-accent-hover) !important; color:#fff !important}
#main .sberbank__payment-description, #main .sberbank__description{max-width:460px; font-family:var(--font-main); font-size:13px;
  line-height:1.5; color:var(--color-text-secondary)}
#main .sberbank__error-code, #main .sberbank__error-message{font-family:var(--font-main)}
/* Корзина и «Заказ оформлен» подключают Bootstrap. У значков «Избранное» и «Корзина» в шапке класс
   badge (для счётчика), и Bootstrap рисовал под ними серые кружки с белым текстом. */
.icon-btn.badge{min-width:0; padding:0; background-color:transparent; font-size:inherit; font-weight:inherit;
  line-height:inherit; text-align:inherit; white-space:normal; vertical-align:baseline; border-radius:var(--radius-button)}
a.icon-btn.badge:hover, a.icon-btn.badge:focus{background-color:var(--color-muted-bg); color:var(--color-accent)}
/* Заголовок страницы «Корзина» задан в самой странице; над «Спасибо! Заказ … оформлен» он лишний */
#main .container:has(> .cart_page > .order-done) > h1{display:none}
@media (max-width:640px){
  #main .order-done{padding:30px 18px 22px}
  #main .order-done h2{font-size:23px}
  #main .order-done__facts{grid-template-columns:repeat(2, minmax(0, 1fr))}
  #main .order-done__facts div{padding:12px 14px}
  #main .cart_page > table.sale_order_full_table{padding:18px}
  #main .order-done__links .btn{flex:1 1 100%}
}

/* End */
/* /bitrix/templates/ttvori/template_styles.css?1790441177155268 */