/* Auto-generated CSS bundle: app-f7e2cf4924410da1b761.css */

/* ===== FILE: /assets/css/style.css ===== */
/* ===== Fonts: Inter ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-cyrillic_latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-cyrillic_latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-cyrillic_latin-600.woff2') format('woff2');
}

/* ===== Base / Reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden; /* страховка, но причину всё равно найдём */
  -webkit-text-size-adjust: 100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Медиа никогда не должны раздвигать страницу */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Ссылки/кнопки */
a { color: inherit; }
button, input { font: inherit; }



:root{
  --page-gutter: 12px;
}

@media (min-width: 390px){
  :root{ --page-gutter: 16px; }
}

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}









.breadcrumbs {
    font-size: 14px;
    margin: 0px 0;
}

.breadcrumbs ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumbs li {
    margin-right: 6px;
}

.breadcrumbs li::after {
    content: "›";
    margin-left: 6px;
}

.breadcrumbs li:last-child::after {
    content: "";
}

.breadcrumbs a {
    text-decoration: none;
    color: #0077cc;
}

.breadcrumbs span {
    color: #555;
}

/* ======================================================================
   CATEGORY FILTERS (Off-canvas) — Anti-flicker / A11y sync
   ----------------------------------------------------------------------
   Зачем это нужно:
   - Убирает “мерцание” панели фильтров при загрузке/переходах (FOUC),
     когда HTML успевает отрисоваться до того, как JS выставит классы/состояние.
   - Синхронизирует видимость и кликабельность с aria-hidden (доступность).

   Важно:
   - JS (assets/js/category.js) управляет aria-hidden на #filtersPanel и #filtersOverlay.
   - Эти правила должны жить в style.css (глобально), чтобы применяться мгновенно,
     ещё до загрузки category.css и выполнения JS.
   ====================================================================== */

/* Пока aria-hidden="true" — панель реально невидима и не кликабельна */
#filtersPanel[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-105%);
}

/* Когда показываем — возвращаем клики */
#filtersPanel[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}

/* Оверлей: скрыт */
#filtersOverlay[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

/* Оверлей: показан */
#filtersOverlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* ======================================================================
   Static / Content pages — typography + readable layout
   ====================================================================== */

:root{
  --text: #111;
  --muted: #555;
  --border: #e7e7e7;
  --surface: #fff;
  --surface-2: #fafafa;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);

  --content-max: 860px;   /* ширина “читаемого текста” */
  --content-gap: 14px;
}

body{
  color: var(--text);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

/* Универсальный блок страницы (под header/footer) */
.page{
  padding: 16px 0 28px;
}

@media (min-width: 768px){
  .page{ padding: 22px 0 40px; }
}

/* Контентный контейнер (чуть уже, чтобы читать было комфортно) */
.content{
  max-width: var(--content-max);
}

/* Карточка для статических страниц */
.content-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

@media (min-width: 768px){
  .content-card{ padding: 22px 24px; }
}

/* Заголовки */
.content h1{
  font-size: 22px;
  line-height: 1.2;
  margin: 6px 0 14px;
}

.content h2{
  font-size: 18px;
  line-height: 1.25;
  margin: 22px 0 10px;
}

.content h3{
  font-size: 16px;
  margin: 18px 0 8px;
}

/* Текст */
.content p{
  margin: 10px 0;
  color: var(--text);
}

.content .muted{
  color: var(--muted);
}

/* Списки */
.content ul, .content ol{
  margin: 10px 0 10px 20px;
  padding: 0;
}

.content li{ margin: 6px 0; }

/* Разделители */
.content hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

/* Небольшие инфо-блоки */
.note{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px;
  margin: 14px 0;
}

/* Таблички “как FAQ” */
.faq{
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.faq-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
}

.faq-q{
  font-weight: 600;
  margin: 0 0 6px;
}

.faq-a{
  margin: 0;
  color: var(--muted);
}

/* Ссылки внутри контента */
.content a{
  color: #0077cc;
  text-decoration: none;
}
.content a:hover{
  text-decoration: underline;
}

/* ===== Cart fly ("вжух в корзинку") ===== */
.cart-fly{
  position: fixed;
  z-index: 9999;
  transform: translate(0,0) scale(1);
  opacity: 1;

  padding: 10px 12px;
  border-radius: 10px;

  background: #22c55e; /* зелёный */
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;

  pointer-events: none;

  /* плавный "улёт" */
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), opacity 600ms ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* ===========================
   Cart buttons (pastel unified)
   =========================== */

:root{
  /* "В корзину" — строгий зелёный (emerald/forest) */
  --btn-primary-bg: #1f8f5f;
  --btn-primary-bd: #166d49;
  --btn-primary-tx: #ffffff;

  /* "В корзине" — оранжево-золотой */
  --btn-incart-bg:  #f97316;
  --btn-incart-bd:  #ea580c;
  --btn-incart-tx:  #ffffff;

  /* "Удалить" — белая с чёрной рамкой */
  --btn-danger-bg:  #ffffff;
  --btn-danger-bd:  #222222;
  --btn-danger-tx:  #111111;
}

/* базовая плавность для всех "корзинных" кнопок */
.btnCartToggle,
.btnCartRemove{
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* 1) "В корзину" (когда НЕ в корзине) */
.btnCartToggle:not(.is-in-cart){
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bd);
  color: var(--btn-primary-tx);
}

/* 2) "В корзине" — переопределяем твой яркий оранжевый на пастель */
.p-btn.is-in-cart.btnCartToggle,
.btnCartToggle.is-in-cart{
  background: var(--btn-incart-bg);
  border-color: var(--btn-incart-bd);
  color: var(--btn-incart-tx);
}

/* 3) "Удалить" — пастель, без резкого красного */
.btnCartRemove{
  margin-left: 8px;
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-bd);
  color: var(--btn-danger-tx);
}

/* 4) Актив/тап — только лёгкое затемнение (никакого “флэша”) */
.btnCartToggle:active,
.btnCartRemove:active{
  transform: translateY(1px);
  filter: brightness(0.97);
}

/* 5) Disabled */
.btnCartToggle:disabled,
.btnCartRemove:disabled{
  opacity: .45;
  cursor: default;
  filter: none;
}

/* 6) Фокус для клавиатуры */
.btnCartToggle:focus-visible,
.btnCartRemove:focus-visible{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}

/* ===== FILE: /assets/css/product_card.css ===== */
/* assets/css/product_card.css
   Карточка товара (tile) — общая для category/home/brands/search/favorites
   ВАЖНО: стили применяются ТОЛЬКО к .p-card--product, чтобы не ломать product.css

   Главное:
   - НЕ задаём цвета для кнопок "В корзину/В корзине" здесь,
     чтобы не перебивать глобальную схему кнопок из assets/css/style.css
     (.btnCartToggle ...).
*/

:root{
  --pc-text: rgba(0,0,0,.88);
  --pc-muted: rgba(0,0,0,.60);
  --pc-line: rgba(0,0,0,.08);
  --pc-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* Акцент берём из категории/продукта, если есть — иначе дефолт */
  --pc-accent: var(--cat-accent, var(--p-accent, #ff6a00));
}

/* Card shell */
.p-card--product{
  position: relative;
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--pc-shadow);

  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Media */
.p-card--product .p-card__media{
  display: block;
  background: #fafafa;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.p-card--product .p-card__img{
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  padding: 10px;
  background: #fff;
}

.p-card--product .p-card__noimg{
  height: 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.p-card--product .p-card__noimg-box{
  width: 100%;
  height: 110px;
  border-radius: 12px;
  background: #f0f0f0;
  border: 1px dashed rgba(0,0,0,.15);
}

.p-card--product .p-card__noimg-text{
  font-size: 13.5px;
  color: var(--pc-muted);
  font-weight: 700;
}

/* Body */
.p-card--product .p-card__body{
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.p-card--product .p-card__title{
  font-size: 18px;
  line-height: 1.25;
  color: #111;
  text-decoration: none;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 3);
}

.p-card--product .p-card__brand{
  font-size: 16px;
  color: var(--pc-muted);
  line-height: 1.2;
}

/* Bottom */
.p-card--product .p-card__bottom{
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.p-card--product .p-price{
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.p-card--product .p-price__now{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.p-card--product .p-price__old{
  font-size: 13.5px;
  color: var(--pc-muted);
  text-decoration: line-through;
}

.p-card--product .p-actions{
  display: grid;
  gap: 8px;
}

/* Qty */
.p-card--product .p-qty{
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  overflow: hidden;
  background: #fff;
}

.p-card--product .p-qty__btn{
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #111;
  -webkit-tap-highlight-color: transparent;
}

.p-card--product .p-qty__btn:disabled{
  opacity: .35;
  cursor: default;
}

.p-card--product .p-qty__input{
  border: 0;
  outline: none;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #111;
  width: 100%;
  appearance: textfield;
}

.p-card--product .p-qty__input::-webkit-outer-spin-button,
.p-card--product .p-qty__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Button
   ВАЖНО: здесь только форма/типографика.
   Цвета "В корзину/В корзине" задаёт style.css через .btnCartToggle...
*/
.p-card--product .p-btn{
  height: 36px;
  border-radius: 999px;

  /* рамку/фон/текст НЕ задаём, чтобы не перебивать style.css */
  border-width: 1px;
  border-style: solid;

  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.p-card--product .p-btn:active{
  transform: translateY(1px);
}

.p-card--product .p-btn:disabled{
  opacity: .45;
  cursor: default;
}

/* Fallback (на случай, если где-то будет p-btn.is-in-cart без .btnCartToggle) */
.p-card--product .p-btn.is-in-cart:not(.btnCartToggle){
  background: var(--pc-accent);
  border-color: var(--pc-accent);
  color: #fff;
}

/* Message line */
.p-card--product .p-msg{
  min-height: 16px;
  font-size: 13px;
  color: var(--pc-muted);
}

/* Favorites heart */
.p-card--product .p-fav{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);

  color: rgba(0,0,0,.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.p-card--product .p-fav:active{ transform: translateY(.5px); }

.p-card--product .p-fav svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* красим inline-svg через currentColor */
.p-card--product .p-fav svg *{
  fill: currentColor;
  stroke: currentColor;
}

.p-card--product .p-fav.is-active{
  color: #b00020;
  border-color: rgba(176,0,32,.30);
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 18px rgba(176,0,32,.14);
}

/* Small screens */
@media (max-width: 360px){
  .p-card--product .p-card__img,
  .p-card--product .p-card__noimg{
    height: 148px;
  }
}

/* Out of stock label */
.p-card--product .p-oos{
  font-size: 14px;
  font-weight: 900;
  color: rgba(0,0,0,.72);
  padding: 8px 10px;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 12px;
  background: rgba(0,0,0,.03);
}

/* Optional: чуть приглушить карточку, когда нет в наличии */
.p-card--product.is-oos .p-card__img{
  opacity: .85;
}

/* ===== FILE: /assets/css/header.css ===== */
/* assets/css/header.css
   Спокойный хедер без прозрачности и без лишнего "выпирания".
   Задача:
   - плотный белый фон
   - аккуратное отделение от страницы
   - заметный, но не тяжёлый поиск
   - иконки справа собраны, но без перегруза
*/

:root{
  --header-bg: #ffffff;
  --header-border: rgba(0,0,0,.08);
  --header-border-strong: rgba(0,0,0,.10);

  --header-shadow: 0 4px 14px rgba(0,0,0,.04);
  --header-shadow-stuck: 0 6px 18px rgba(0,0,0,.06);

  --icon-size: 22px;
  --hit-area: 36px;

  --logo-size: 34px;

  --search-height: 40px;
  --search-border: rgba(0,0,0,.10);
  --search-border-focus: rgba(79,106,95,.28);
  --search-bg: #ffffff;
  --search-placeholder: rgba(0,0,0,.42);

  --badge-bg: #f3cf4f;
  --badge-text: #1f2a26;

  --radius: 12px;

  --header-offset: 0px;

  --header-divider: rgba(0,0,0,.08);
  --fav-active: #7d0016;
  --fav-active-bg: rgba(176,0,32,.07);

  --acc-active: #1f6f43;
  --acc-active-bg: rgba(31,111,67,.07);

  --header-text: #1f2a26;
  --header-muted: rgba(0,0,0,.62);
  --header-muted-2: rgba(0,0,0,.42);
  --header-hover: rgba(0,0,0,.035);
  --header-focus: rgba(79,106,95,.18);
}

/* =========================================================
   STICKY HEADER
   ========================================================= */
.site-header--sticky{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;

  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.site-header--sticky.is-stuck{
  border-bottom-color: var(--header-border-strong);
  box-shadow: var(--header-shadow-stuck);
}

body.has-sticky-header{
  padding-top: var(--header-offset);
}

.site-header--sticky.site-header--shim{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* ===== Header shell ===== */
.site-header{
  background: var(--header-bg);
}

/* внутренний блок внутри .container */
.site-header__inner{
  width: 100%;
  max-width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ===== Top row ===== */
.site-header__top{
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* =========================================================
   Buttons / Icons
   ========================================================= */
.icon-btn{
  width: var(--hit-area);
  height: var(--hit-area);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  padding: 0;
  background: transparent;
  color: var(--header-text);
  text-decoration: none;
  cursor: pointer;

  border-radius: 10px;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, transform .06s ease;
}

.icon-btn:hover{
  background: var(--header-hover);
}

.icon-btn:active{
  transform: translateY(.5px);
}

.icon-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--header-focus);
}

.icon{
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}

/* =========================================================
   Logo
   ========================================================= */
.site-header__logo{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  margin-left: 6px;
  padding-right: 96px;

  text-decoration: none;
  color: inherit;
}

.logo-placeholder{
  width: var(--logo-size);
  height: var(--logo-size);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid var(--header-border);
  background: #fff;
  font-weight: 800;
  line-height: 1;
}

.site-header__logo-img{
  display: block;
  height: 35px;
  width: auto;
  max-width: 160px;
}

/* =========================================================
   Actions
   ========================================================= */
.site-header__actions{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.site-header__sep{
  display: none;
}

/* ===== badges ===== */
.cart-btn,
.fav-btn{
  position: relative;
}

.badge{
  position: absolute;
  top: 1px;
  right: 10px;

  min-width: 17px;
  height: 17px;
  padding: 0 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  border: 1px solid rgba(0,0,0,.08);
}

.badge--empty{
  opacity: .50;
}

/* =========================================================
   Search row
   ========================================================= */
.site-header__search{
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
}

.search-field{
  position: relative;
  width: 100%;
  max-width: 100%;
}

.search-input{
  width: 100%;
  max-width: 100%;
  display: block;
  height: var(--search-height);

  box-sizing: border-box;
  border: 1px solid var(--search-border);
  border-radius: 999px;
  background: var(--search-bg);

  padding: 0 44px 0 14px;

  font-size: 15px;
  font-weight: 500;
  color: var(--header-text);
  outline: none;

  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.search-input::placeholder{
  color: var(--search-placeholder);
}

.search-input:focus{
  border-color: var(--search-border-focus);
  box-shadow: 0 0 0 3px rgba(79,106,95,.08);
}

.search-btn{
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--header-text);
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease;
}

.search-btn:hover{
  background: rgba(0,0,0,.04);
}

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

/* =========================================================
   Icon buttons with labels
   ========================================================= */
.icon-btn--stack{
  width: 50px;
  height: auto;

  flex-direction: column;
  gap: 3px;
  padding: 5px 2px 3px;

  border-radius: 12px;
}

.icon-btn__label{
  display: block;
  font-size: 11px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: .1px;
  color: var(--header-muted);
  user-select: none;
  white-space: nowrap;
}

.icon-btn__sublabel{
  display: block;
  margin-top: -1px;
  font-size: 10px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: .1px;
  color: var(--header-muted-2);
  user-select: none;
  white-space: nowrap;
}

.icon-btn--stack:hover{
  background: var(--header-hover);
}

.icon-btn--stack:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--header-focus);
}

/* badge positioning */
.icon-btn--stack.cart-btn .badge,
.icon-btn--stack.fav-btn .badge{
  top: 1px;
  right: 10px;
}

/* =========================================================
   Dividers between action buttons
   ========================================================= */
.site-header__actions .icon-btn--stack{
  position: relative;
}

.site-header__actions .icon-btn--stack + .icon-btn--stack{
  margin-left: 6px;
  padding-left: 8px;
}

.site-header__actions .icon-btn--stack + .icon-btn--stack::before{
  content: "";
  position: absolute;
  left: -3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--header-divider);
  border-radius: 1px;
}

/* =========================================================
   Active favorite
   ========================================================= */
.icon-btn--stack.fav-btn.is-active{
  background: var(--fav-active-bg);
}

.icon-btn--stack.fav-btn.is-active,
.icon-btn--stack.fav-btn.is-active .icon-btn__label{
  color: var(--fav-active);
}

.icon-btn--stack.fav-btn.is-active svg{
  color: var(--fav-active);
}

/* =========================================================
   Logged account
   ========================================================= */
.icon-btn--stack.acc-btn.is-logged{
  background: var(--acc-active-bg);
}

.icon-btn--stack.acc-btn.is-logged,
.icon-btn--stack.acc-btn.is-logged .icon-btn__label{
  color: var(--acc-active);
}

.icon-btn--stack.acc-btn.is-logged svg{
  color: var(--acc-active);
}

/* =========================================================
   Toast
   ========================================================= */
.site-toast{
  position: fixed;
  top: calc(var(--header-offset, 64px) + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 9999;

  max-width: min(520px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 14px;

  background: rgba(236, 253, 245, .98);
  border: 1px solid rgba(16, 185, 129, .35);
  color: #064e3b;

  font-size: 15px;
  line-height: 1.25;

  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  opacity: 0;
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease;

  display: flex;
  align-items: center;
  gap: 10px;
}

.site-toast::before{
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(16, 185, 129, .14);
  color: #059669;
  font-weight: 800;
  flex: 0 0 auto;
}

.site-toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   Desktop
   ========================================================= */
@media (min-width: 768px){
  .site-header__inner{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-header__top{
    gap: 14px;
  }

  .site-header__logo{
    margin-left: 10px;
    padding-right: 120px;
  }

  .site-header__logo-img{
    height: 38px;
    max-width: 180px;
  }

  .icon-btn--stack{
    width: 56px;
    padding: 6px 3px 4px;
  }

  .icon-btn__label{
    font-size: 11.5px;
  }

  .icon-btn__sublabel{
    font-size: 10px;
  }

  .search-input{
    height: 42px;
    font-size: 15px;
    padding-left: 16px;
  }

  .search-btn{
    width: 36px;
    height: 36px;
    right: 4px;
  }
}

@media (max-width: 380px){
  .site-header__top{
    gap: 8px;
  }

  .site-header__logo{
    margin-left: 4px;
    padding-right: 84px;
  }

  .site-header__logo-img{
    height: 33px;
    max-width: 145px;
  }

  .icon-btn--stack{
    width: 46px;
  }

  .icon-btn__label{
    font-size: 10.5px;
  }

  .icon-btn__sublabel{
    font-size: 9.5px;
  }

  .search-input{
    font-size: 14px;
  }
}

/* ===== FILE: /assets/css/footer.css ===== */
/* assets/css/footer.css
   Мобильный футер-аккордеон под твой макет.
   Важно: .container и --page-gutter должны быть в style.css (глобально).
*/

:root{
  --footer-bg: #fff;
  --footer-line: #dedede;

  --footer-title: #111;
  --footer-title-active: #ff6a00; /* оранжевый у открытого раздела */

  --footer-link: #111;            /* ссылки ВСЕГДА одного цвета (НЕ меняем по разделам) */

  --footer-muted: #444;
  --footer-phone: #2e8b57;        /* зелёный телефон */

  --footer-bottom-bg: #47645c;    /* нижняя плашка */
  --footer-bottom-text: rgba(255,255,255,.88);

  --footer-row-h: 46px;
}

/* Страховка от горизонтального скролла */
.site-footer{
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-line);
  overflow-x: clip; /* не даёт "уезжать" вправо/влево */
}

/* Аккордеон */
.footer-acc{ width: 100%; }

.footer-acc__section{
  border-top: 1px solid var(--footer-line);
}

.footer-acc__section:first-child{
  border-top: 0;
}

/* Кнопка заголовка */
.footer-acc__btn{
  width: 100%;
  min-height: var(--footer-row-h);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.footer-acc__btn:focus-visible{
  outline: 2px solid rgba(255,106,0,.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Заголовок */
.footer-acc__title{
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--footer-title);
}

/* Открытый раздел: заголовок оранжевый */
.footer-acc__section.is-open .footer-acc__title{
  color: var(--footer-title-active);
}

/* Иконка-стрелка */
.footer-acc__icon{
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #111;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-acc__icon svg{
  width: 20px;
  height: 20px;
  display: block;
  transition: transform 160ms ease;
}

/* Закрыто: стрелка вниз (как в разметке).
   Открыто: поворачиваем на 180° => стрелка вверх. */
.footer-acc__section.is-open .footer-acc__icon svg{
  transform: rotate(180deg);
}

/* Панель */
.footer-acc__panel{
  padding: 0 0 14px 0;
}

/* Текст */
.footer-text{
  margin: 0 0 10px 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--footer-muted);
}

.footer-links,
.footer-contacts{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li{
  padding: 6px 0;
}

/* Ссылки (цвет не меняем при открытии секции) */
.footer-link{
  color: var(--footer-link);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.25;
}

.footer-link:active{
  opacity: .85;
}

.footer-link--phone{
  color: var(--footer-phone);
  font-weight: 600;
}

/* Контакты */
.footer-contacts__item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 6px 0;
}

.footer-contacts__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  opacity: .85;
}

.footer-muted{
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--footer-muted);
}

/* Нижняя плашка */
.footer-bottom{
  margin-top: 6px;
  background: var(--footer-bottom-bg);
}

.footer-bottom__text{
  padding: 14px 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--footer-bottom-text);
}

/* ===== FILE: /assets/css/breadcrumbs.css ===== */
/* assets/css/breadcrumbs.css
   Хлебные крошки:
   - без капсулы
   - без рамки
   - без левой зелёной полоски
   - с мягкой подложкой
   - в общем стиле сайта
*/

:root{
  --bc-text: #1f2a26;
  --bc-muted: rgba(31,42,38,.68);
  --bc-muted-2: rgba(31,42,38,.48);
  --bc-sep: rgba(31,42,38,.28);

  --bc-link: rgba(31,42,38,.74);
  --bc-link-hover: #1f2a26;
  --bc-current: #1f2a26;

  --bc-strip-top: #f3f5f1;
  --bc-strip-bottom: #edf1eb;

  --bc-back: #4f6a5f;
  --bc-back-hover: #3f584e;
}

.breadcrumbs{
  padding: 0;
  background: linear-gradient(180deg, var(--bc-strip-top) 0%, var(--bc-strip-bottom) 100%);
  border-top: 1px solid rgba(56,73,66,.04);
  border-bottom: 1px solid rgba(56,73,66,.05);
}

/* контейнер */
.breadcrumbs .container{
  padding-top: 11px;
  padding-bottom: 11px;
}

.breadcrumbs .container > ul,
.breadcrumbs > .container > ul{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Назад */
.breadcrumbs-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 32px;
  padding: 0 11px;
  margin: 0 0 8px 0;

  border-radius: 999px;
  background: rgba(79,106,95,.08);
  border: 1px solid rgba(79,106,95,.12);

  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--bc-back);
  text-decoration: none;

  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}

.breadcrumbs-back:hover{
  color: var(--bc-back-hover);
  background: rgba(79,106,95,.11);
  border-color: rgba(79,106,95,.16);
}

.breadcrumbs-back:active{
  transform: translateY(1px);
}

.breadcrumbs-back__arrow{
  font-size: 16px;
  line-height: 1;
}

/* список */
.breadcrumbs ul{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.breadcrumbs li{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-width: 0;
  max-width: 100%;

  font-size: 14px;
  line-height: 1.35;
  color: var(--bc-muted);
}

/* старые разделители отключаем */
.breadcrumbs li + li::before{
  content: none !important;
}

/* Разделители */
.breadcrumbs li:not(:last-child)::after{
  content: "•";
  margin-left: 2px;
  color: var(--bc-sep);
  font-weight: 700;
  line-height: 1;
}

/* если вдруг есть отдельный sep в html */
.breadcrumbs li.sep,
.breadcrumbs li.breadcrumbs-sep,
.breadcrumbs .sep,
.breadcrumbs .breadcrumbs-sep{
  color: var(--bc-sep);
  font-weight: 700;
  opacity: .9;
}

.breadcrumbs a{
  color: var(--bc-link);
  text-decoration: none;
  max-width: 100%;
  transition: color .15s ease, opacity .15s ease;
}

.breadcrumbs a:hover{
  color: var(--bc-link-hover);
}

.breadcrumbs a:active{
  opacity: .85;
}

/* текущий пункт */
.breadcrumbs li:last-child,
.breadcrumbs li:last-child span{
  color: var(--bc-current);
  font-weight: 800;
}

/* текущий пункт, если кликабелен */
.breadcrumbs a.is-current{
  color: var(--bc-current);
  font-weight: 800;
  text-decoration: none;
}

.breadcrumbs a.is-current:hover{
  color: var(--bc-current);
}

/* лёгкое визуальное выделение финального пункта */
.breadcrumbs li:last-child a,
.breadcrumbs li:last-child span{
  position: relative;
}

.breadcrumbs li:last-child a::after,
.breadcrumbs li:last-child span::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(90,117,104,.18);
}

/* защита от ломания */
.breadcrumbs li,
.breadcrumbs a,
.breadcrumbs span{
  word-break: break-word;
}

/* десктоп */
@media (min-width: 768px){
  .breadcrumbs .container{
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .breadcrumbs li{
    font-size: 15px;
    line-height: 1.35;
  }
}

/* мобилка */
@media (max-width: 420px){
  .breadcrumbs .container{
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .breadcrumbs-back{
    min-height: 31px;
    padding: 0 10px;
    font-size: 13.5px;
    margin-bottom: 7px;
  }

  .breadcrumbs li{
    font-size: 13px;
    line-height: 1.3;
    gap: 5px;
  }

  .breadcrumbs li:not(:last-child)::after{
    margin-left: 1px;
  }
}

/* ===== FILE: /assets/css/catalog.css ===== */
/* assets/css/catalog.css
   Страница /catalog
   Приводим к тому же стилю, что и главная:
   - мягкий затемнённый фон
   - заметный hero-блок
   - понятный заголовок каталога
   - без кнопки брендов
*/

.catalog-page{
  background:
    linear-gradient(180deg, #f3f4f1 0%, #f7f7f5 220px, #f4f5f2 100%);
  padding: 10px 0 18px;
}

.catalog-hero{
  padding: 0;
}

.catalog-hero__panel{
  margin: 0 0 12px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(56, 73, 66, .10);
  box-shadow: 0 10px 28px rgba(20, 24, 22, .05);
  backdrop-filter: blur(4px);
}

.catalog-hero__title{
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #1f2a26;
}

.catalog-hero__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: #2a3732;
}

.catalog-empty-card{
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(56, 73, 66, .10);
  box-shadow: 0 10px 28px rgba(20, 24, 22, .05);
}

@media (min-width: 768px){
  .catalog-page{
    background:
      linear-gradient(180deg, #f1f3ef 0%, #f6f7f4 260px, #f3f5f1 100%);
    padding: 14px 0 22px;
  }

  .catalog-hero__panel{
    margin-bottom: 14px;
    padding: 18px 18px 16px;
    border-radius: 18px;
  }

  .catalog-hero__title{
    font-size: 28px;
    line-height: 1.12;
    margin-bottom: 10px;
  }

  .catalog-hero__text{
    font-size: 16px;
    line-height: 1.55;
    max-width: 760px;
  }

  .catalog-empty-card{
    padding: 18px 18px 16px;
    border-radius: 18px;
  }
}

/* ===== FILE: /assets/css/category.css ===== */
/* assets/css/category.css
   Страница категории: приводим к единому стилю с главной и каталогом.
   Логика не меняется, только визуальная унификация.

   ВАЖНО:
   - Стили карточек товара (.p-card, .p-btn, .p-qty, .p-price, .p-fav и т.п.)
     здесь не трогаем: они живут в assets/css/product_card.css
*/

:root{
  --cat-text: #1f2a26;
  --cat-muted: #5f6b66;
  --cat-line: rgba(56, 73, 66, .12);

  --cat-pill: #4f6a5f;
  --cat-pill-text: #fff;

  --cat-accent: #4f6a5f;
  --cat-accent-2: #5a4f6a;

  --cat-bg: #f5f6f3;
  --cat-card-bg: rgba(255,255,255,.78);

  --cat-shadow: 0 10px 28px rgba(20, 24, 22, .05);
  --cat-shadow-sm: 0 8px 18px rgba(0,0,0,.05);

  --cat-radius: 16px;

  /* Filters vars */
  --filters-bg: #ffffff;
  --filters-border: rgba(56, 73, 66, .12);
  --filters-muted: rgba(31,42,38,.62);
  --filters-text: rgba(31,42,38,.92);
  --filters-accent: #4f6a5f;
}

/* =========================================================
   CATEGORY PAGE BASE
   ========================================================= */
.category-page{
  padding: 10px 0 18px;
  background:
    linear-gradient(180deg, #f3f4f1 0%, #f7f7f5 220px, #f4f5f2 100%);
  color: var(--cat-text);
}

.cat-header{
  padding: 8px 0 10px;
  margin-bottom: 4px;
}

/* Верхний блок страницы */
.cat-header{
  position: relative;
}

.cat-header::before{
  content: "";
  display: block;
  height: 0;
}

.cat-title{
  margin: 0 0 10px 0;
  padding: 16px 16px 0;
  font-size: 24px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f2a26;
}

/* Собираем header визуально в панель */
.cat-header > .cat-title,
.cat-header > .cat-intro,
.cat-header > .cat-subcats{
  background: transparent;
}

.cat-header{
  border-radius: 18px;
  background: var(--cat-card-bg);
  border: 1px solid rgba(56, 73, 66, .10);
  box-shadow: var(--cat-shadow);
  overflow: hidden;
  backdrop-filter: blur(4px);
}

/* =========================================================
   INTRO
   ========================================================= */
.cat-intro{
  position: relative;
  margin: 0;
  padding: 0 16px 14px;
}

.cat-intro__text{
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  color: #2b3732;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-intro.is-open .cat-intro__text{
  -webkit-line-clamp: unset;
  overflow: visible;
}

.cat-intro__more{
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cat-accent);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}

.cat-intro__chev{
  display: inline-block;
  transform: translateY(-1px);
}

.cat-intro.is-open .cat-intro__chev{
  transform: rotate(180deg) translateY(1px);
}

/* =========================================================
   SUBCATEGORIES
   ========================================================= */
.cat-subcats{
  margin: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(56, 73, 66, .08);
  background: linear-gradient(180deg, rgba(86,115,100,.03) 0%, rgba(255,255,255,0) 100%);
}

.cat-subcats__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-subcats__item{
  font-size: 14px;
  line-height: 1.25;
  color: #2a3530;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;

  /* было слишком бело — делаем мягко тонированную кнопку */
  background: linear-gradient(180deg, #fbfcfa 0%, #f1f4ef 100%);
  border: 1px solid rgba(79,106,95,.18);

  /* кнопка чуть заметнее на белом фоне */
  box-shadow:
    0 4px 10px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,.88);

  font-weight: 700;

  transition:
    transform .12s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease,
    color .15s ease;
}

.cat-subcats__item:hover{
  transform: translateY(-1px);
  border-color: rgba(79,106,95,.30);
  background: linear-gradient(180deg, #ffffff 0%, #edf2ed 100%);
  box-shadow:
    0 8px 18px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.cat-subcats__cnt{
  color: rgba(31,42,38,.72);
  font-weight: 800;
}

.cat-subcats__back{
  font-size: 14px;
  line-height: 1.25;
  color: var(--cat-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(79,106,95,.09);
  border: 1px solid rgba(79,106,95,.16);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.cat-subcats__back--bottom{
  margin-top: 2px;
  padding-top: 0;
  border-top: 1px solid rgba(79,106,95,.14);
}

.cat-subcats__item.is-active{
  font-weight: 800;
  color: #ffffff;
  position: relative;
  padding-left: 14px;
  background: linear-gradient(180deg, #567364 0%, #4a6558 100%);
  border-color: rgba(48, 67, 59, .50);
  box-shadow: 0 10px 20px rgba(43, 58, 52, .14);
}

.cat-subcats__item.is-active::before{
  content: "";
  position: static;
  display: inline-block;
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

.cat-subcats__item.is-active .cat-subcats__cnt{
  color: rgba(255,255,255,.82);
}

/* =========================================================
   TOOLBAR (filters button + sort) + ACTIVE CHIPS
   ========================================================= */
.cat-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;

  margin: 12px 0 10px;
  padding: 0;

  /* убираем внешнюю капсулу */
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cat-toolbar__right{
  display: block;
  min-width: 0;
  margin-left: 0;
}

/* общая база */
.cat-btn,
.cat-sort{
  min-width: 0;
  width: 100%;
  height: 48px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
}

/* кнопка фильтров */
.cat-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;

  border: 1px solid rgba(79,106,95,.20);
  color: #244036;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .06s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}

.cat-btn:active{
  transform: translateY(1px);
}

.cat-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,106,95,.18), 0 6px 16px rgba(0,0,0,.06);
  border-color: rgba(79,106,95,.42);
}

/* фильтры — более заметная плашка */
.cat-btn-filters{
  background: linear-gradient(180deg, #e7efe9 0%, #dde8e1 100%);
  border-color: rgba(79,106,95,.22);
  color: #28463b;
  box-shadow:
    0 6px 16px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.cat-btn-filters::before{
  content:"";
  width: 18px;
  height: 18px;
  display: inline-block;
  background:
    linear-gradient(currentColor,currentColor) 3px 5px/12px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 6px 10px/9px 2px no-repeat,
    linear-gradient(currentColor,currentColor) 9px 15px/6px 2px no-repeat;
  opacity: .72;
  border-radius: 3px;
  flex: 0 0 auto;
}

.cat-btn-filters:hover{
  background: linear-gradient(180deg, #edf4ef 0%, #e1ebe4 100%);
  border-color: rgba(79,106,95,.30);
  box-shadow:
    0 8px 18px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
}

.cat-btn-filters.is-active,
.cat-btn-filters[aria-expanded="true"]{
  background: linear-gradient(180deg, #dbe8df 0%, #cfdfd4 100%);
  border-color: rgba(79,106,95,.34);
  box-shadow:
    0 8px 18px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.72);
}

/* очистку в этом варианте прячем */
.cat-btn-clear{
  display: none;
}

/* сортировка */
.cat-toolbar__sort{
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.cat-sort__label{
  display: none;
}

.cat-sort{
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 42px 0 14px;

  border: 1px solid rgba(56,73,66,.14);
  background: linear-gradient(180deg, #fbfcfa 0%, #f1f4ef 100%);
  color: #1f2a26;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  transition:
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
}

.cat-toolbar__sort::after{
  content:"";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-58%) rotate(45deg);
  border-right: 2px solid rgba(31,42,38,.55);
  border-bottom: 2px solid rgba(31,42,38,.55);
  pointer-events: none;
}

.cat-sort:hover{
  border-color: rgba(79,106,95,.24);
  background: linear-gradient(180deg, #ffffff 0%, #eef3ee 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.cat-sort:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,106,95,.18), 0 6px 16px rgba(0,0,0,.06);
  border-color: rgba(79,106,95,.42);
}

/* chips */
.cat-active-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(79,106,95,.08);
  color: rgba(31,42,38,.86);
  text-decoration: none;
  border: 1px solid rgba(79,106,95,.10);
  transition: background-color .15s ease, transform .06s ease, box-shadow .15s ease, border-color .15s ease;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.2;
}

.chip:hover{
  background: rgba(79,106,95,.12);
  border-color: rgba(79,106,95,.16);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.chip:active{
  transform: translateY(1px);
}

.chip span[aria-hidden="true"]{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(79,106,95,.14);
  color: rgba(31,42,38,.72);
  font-weight: 800;
  line-height: 1;
}

/* =========================================================
   RESULTS GRID
   ========================================================= */
.cat-results{
  padding-top: 4px;
}

.cat-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.cat-empty{
  padding: 16px 14px;
  border: 1px solid rgba(56,73,66,.10);
  border-radius: var(--cat-radius);
  background: rgba(255,255,255,.82);
  box-shadow: var(--cat-shadow-sm);
}

.cat-empty__title{
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: #1f2a26;
  margin-bottom: 4px;
}

.cat-empty__text{
  font-size: 14px;
  color: var(--cat-muted);
  line-height: 1.45;
  font-weight: 500;
}

/* =========================================================
   PAGER
   ========================================================= */
.cat-pager{
  margin: 16px 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.cat-pager__arrow{
  width: 44px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(56,73,66,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #1f2a26;
  font-weight: 900;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
}

.cat-pager__arrow.is-disabled{
  opacity: .35;
  pointer-events: none;
}

.cat-pager__pos{
  font-size: 15px;
  font-weight: 800;
  color: #1f2a26;
}

/* =========================================================
   CATEGORY: LOAD MORE
   ========================================================= */
.cat-loadmore{
  margin: 10px 0 6px;
  display: flex;
  justify-content: center;
}

.cat-loadmore__btn{
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(56,73,66,.16);
  background: #fff;
  color: #1f2a26;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.cat-loadmore__btn:hover{
  border-color: rgba(56,73,66,.22);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.cat-loadmore__btn:active{
  transform: translateY(1px);
}

.cat-loadmore__btn:disabled{
  opacity: .60;
  cursor: default;
  box-shadow: none;
}

/* =========================================================
   BOTTOM TEXT
   ========================================================= */
.cat-bottom-text{
  margin-top: 16px;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(56, 73, 66, .10);
  box-shadow: var(--cat-shadow-sm);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: #2b3732;
}

/* =========================================================
   MOBILE: "Фильтры" + "Сортировка" в одну строку
   ========================================================= */
@media (max-width: 560px){
  .cat-toolbar{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
  }

  .cat-btn,
  .cat-sort{
    height: 46px;
    font-size: 14px;
    border-radius: 15px;
  }

  .cat-btn-filters{
    padding: 0 10px;
  }

  .cat-sort{
    padding-left: 12px;
    padding-right: 38px;
  }

  .cat-toolbar__sort::after{
    right: 14px;
  }
}

@media (max-width: 360px){
  .cat-btn{ height: 38px; }
  .cat-sort{ height: 38px; }
  .cat-grid{ gap: 10px; }
}

/* =========================================================
   FILTERS OFFCANVAS
   ========================================================= */
body.filters-open{
  overflow: hidden;
}

.filters-overlay[aria-hidden="true"]{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.filters-overlay[aria-hidden="false"]{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.filters-overlay{
  position: fixed;
  inset: 0;
  background: rgba(18, 22, 20, .42);
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 10040;
}

.filters-panel{
  position: fixed;
  top: 0;
  left: 0;
  right: auto;

  height: 100dvh;
  width: min(420px, 92vw);

  background: var(--filters-bg);
  border-right: 1px solid var(--filters-border);
  border-left: 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);

  transition: transform .22s ease;
  z-index: 10050;

  display: flex;
  flex-direction: column;

  will-change: transform;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}

.filters-panel[aria-hidden="true"]{
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-105%);
}

.filters-panel[aria-hidden="false"]{
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* header */
.filters-panel__header{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--filters-bg);
  border-bottom: 1px solid var(--filters-border);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 12px;
}

.filters-panel__title{
  font-size: 18px;
  font-weight: 800;
  color: var(--filters-text);
}

.filters-close{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(56,73,66,.12);
  background: transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}

.filters-close:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(56,73,66,.18);
}

.filters-close:active{
  transform: translateY(1px);
}

.filters-close:focus-visible{
  outline: none;
  border-color: rgba(79,106,95,.50);
  box-shadow: 0 0 0 3px rgba(79,106,95,.16);
}

/* body */
.filters-panel__body{
  padding: 6px 12px 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* footer */
.filters-panel__footer{
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--filters-bg);
  border-top: 1px solid var(--filters-border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.filters-reset{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(56,73,66,.14);
  background: #fff;
  color: rgba(31,42,38,.90);
  font-weight: 800;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}

.filters-reset:hover{
  background: rgba(79,106,95,.05);
  border-color: rgba(56,73,66,.20);
}

.filters-reset:active{
  transform: translateY(1px);
}

.filters-reset.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(0,0,0,.03);
}

.filters-reset-hint{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(31,42,38,.72);
}

/* blocks */
.filters-block{
  padding: 12px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.filters-block + .filters-block{
  border-top: 1px solid rgba(56,73,66,.08);
}

.filters-block__title{
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 800;
  color: rgba(31,42,38,.72);
  letter-spacing: .1px;
  text-transform: none;
}

/* navigation */
.filters-nav{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.filters-nav__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--filters-accent);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
}

.filters-nav__link:hover{
  text-decoration: underline;
}

.filters-nav__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 0;
  text-decoration: none;
  color: rgba(31,42,38,.88);
  font-weight: 700;
  font-size: 15px;

  border-bottom: 1px solid rgba(56,73,66,.08);
}

.filters-nav__item:last-child{
  border-bottom: 0;
}

.filters-nav__item.is-active{
  color: var(--filters-accent);
  font-weight: 800;
}

.filters-nav__cnt{
  color: rgba(31,42,38,.52);
  font-weight: 800;
  white-space: nowrap;
}

/* price layout */
.filters-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.filters-col{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filters-label{
  font-size: 13px;
  color: var(--filters-muted);
  font-weight: 700;
}

.filters-input{
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(56,73,66,.14);
  padding: 0 10px;
  background: #fff;
  color: rgba(31,42,38,.88);
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  font-size: 15px;
}

.filters-input:focus{
  outline: none;
  border-color: rgba(79,106,95,.50);
  box-shadow: 0 0 0 3px rgba(79,106,95,.14);
}

/* options */
.filters-options{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.filters-option{
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;

  padding: 10px 0;
  border-bottom: 1px solid rgba(56,73,66,.08);

  cursor: pointer;
  user-select: none;
}

.filters-option:last-child{
  border-bottom: 0;
}

.filters-option:hover{
  background: rgba(79,106,95,.02);
}

.filters-option.is-disabled{
  opacity: .50;
  cursor: not-allowed;
  background: transparent;
}

.filters-option__text{
  color: rgba(31,42,38,.88);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}

.filters-option__count{
  color: rgba(31,42,38,.52);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

/* checkbox */
.filters-option input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--filters-accent);
}

.filters-option input[type="checkbox"]:disabled{
  cursor: not-allowed;
}

@media (max-width: 420px){
  .filters-row{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 768px){
  .category-page{
    background:
      linear-gradient(180deg, #f1f3ef 0%, #f6f7f4 260px, #f3f5f1 100%);
    padding: 14px 0 22px;
  }

  .cat-header{
    border-radius: 20px;
    margin-bottom: 8px;
  }

  .cat-title{
    padding: 20px 20px 0;
    margin-bottom: 12px;
    font-size: 30px;
    line-height: 1.08;
  }

  .cat-intro{
    padding: 0 20px 18px;
  }

  .cat-intro__text{
    font-size: 16px;
    line-height: 1.6;
  }

  .cat-subcats{
    padding: 14px 20px 20px;
  }

  .cat-subcats__item,
  .cat-subcats__back{
    min-height: 40px;
    font-size: 15px;
  }

  .cat-toolbar{
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .cat-bottom-text{
    padding: 18px 18px;
    border-radius: 18px;
    font-size: 15px;
  }
}

/* ===== FILE: /assets/css/product.css ===== */
/* assets/css/product.css */

:root{
  --p-text: #1f2a26;
  --p-muted: rgba(31,42,38,.62);
  --p-muted-2: rgba(31,42,38,.46);
  --p-line: rgba(56,73,66,.10);
  --p-line-2: rgba(56,73,66,.07);
  --p-bg: #f5f6f3;

  --p-card: rgba(255,255,255,.80);
  --p-soft: #f4f5f2;
  --p-soft-2: #fafaf8;

  --p-shadow: 0 10px 28px rgba(20, 24, 22, .05);
  --p-shadow-sm: 0 8px 18px rgba(0,0,0,.05);

  --p-accent: #4f6a5f;
  --p-accent-2: #5a4f6a;

  --p-ok: #1f7b49;
  --p-ok-bg: rgba(31,123,73,.10);

  --p-radius: 18px;
  --p-radius-sm: 14px;
}

/* Page */
.product-page{
  padding: 10px 0 18px;
  background:
    linear-gradient(180deg, #f3f4f1 0%, #f7f7f5 220px, #f4f5f2 100%);
  color: var(--p-text);
}

.p-wrap{
  display: grid;
  gap: 16px;
}

/* Back link */
.p-back{
  margin-top: 2px;
  justify-self: start;
}

/* Title */
.p-title{
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--p-text);
}

/* Main block */
.p-main{
  display: grid;
  gap: 16px;
}

/* Cards */
.p-card{
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  overflow: hidden;
  backdrop-filter: blur(4px);
}

/* =========================================
   GALLERY
   ========================================= */
.p-gallery{
  padding: 12px;
  background: var(--p-card);
}

.p-gallery__main{
  position: relative;
  border-radius: var(--p-radius-sm);
  border: 1px solid var(--p-line);
  background:
    radial-gradient(circle at top, rgba(86,115,100,.04), rgba(255,255,255,0) 55%),
    var(--p-soft-2);
  overflow: hidden;
}

.p-gallery__imgbtn{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.p-gallery__img{
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: transparent;
  padding: 14px;
}

.p-gallery__noimg{
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--p-muted);
  font-size: 15px;
  font-weight: 700;
  background: var(--p-soft-2);
}

/* arrows in gallery */
.p-gbtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  min-width: 42px;
  padding: 0 12px;
  border-radius: 999px;

  border: 1px solid rgba(56,73,66,.12);
  background: rgba(255,255,255,.94);
  color: #1f2a26;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-tap-highlight-color: transparent;
  z-index: 6;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.p-gbtn:active{
  transform: translateY(-50%) translateY(1px);
}

.p-gbtn[disabled]{
  opacity: .42;
  cursor: default;
}

.p-gbtn--prev{ left: 10px; }
.p-gbtn--next{ right: 10px; }

.p-gpos{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.94);
  color: #1f2a26;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(56,73,66,.10);
  z-index: 5;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

/* thumbs */
.p-thumbs{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.p-thumb{
  border: 1px solid rgba(56,73,66,.10);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 52px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);
}

.p-thumb:active{
  transform: translateY(1px);
}

.p-thumb.is-active{
  border-color: var(--p-accent);
  box-shadow: 0 0 0 2px rgba(79,106,95,.14);
}

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

.p-thumb--more{
  background: var(--p-soft);
  color: rgba(31,42,38,.82);
  font-weight: 800;
  font-size: 13px;
}

/* favorite in gallery */
.p-fav--gallery{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  cursor: pointer;
  pointer-events: auto;

  width: 38px;
  height: 38px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.94);
  border: 1px solid rgba(56,73,66,.10);
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

.p-fav--gallery svg{
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

/* =========================================
   INFO
   ========================================= */
.p-info{
  padding: 14px;
  display: grid;
  gap: 14px;
}

.p-info__top{
  display: grid;
  gap: 10px;
}

.p-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.p-brand{
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(31,42,38,.80);
}

.p-brand span{
  color: var(--p-muted);
  font-weight: 600;
}

.p-brand a{
  color: #1f2a26;
  text-decoration: none;
  font-weight: 700;
}

.p-brand a:active{
  opacity: .85;
}

.p-brand b{
  font-weight: 700;
  color: #1f2a26;
}

.p-stock{
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--p-ok-bg);
  color: var(--p-ok);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.p-stock__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--p-ok);
}

.p-stock.is-out{
  background: rgba(0,0,0,.06);
  color: rgba(31,42,38,.58);
}

.p-stock.is-out .p-stock__dot{
  background: #9a9a9a;
}

.p-categoryline{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  font-size: 14px;
  line-height: 1.4;
}

.p-categoryline__label{
  color: var(--p-muted);
  font-weight: 600;
}

.p-categoryline__link{
  color: #1f2a26;
  text-decoration: none;
  font-weight: 700;
}

/* price */
.p-price{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.p-price__now{
  font-size: 31px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1f2a26;
}

.p-price__old{
  font-size: 18px;
  line-height: 1.1;
  color: var(--p-muted);
  text-decoration: line-through;
  font-weight: 600;
}

/* buy block */
.p-buy{
  display: grid;
  gap: 10px;
}

.p-qty{
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(56,73,66,.12);
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.p-qty__btn{
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #1f2a26;
  -webkit-tap-highlight-color: transparent;
}

.p-qty__btn:disabled{
  opacity: .35;
  cursor: default;
}

.p-qty__input{
  border: 0;
  outline: none;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #1f2a26;
  width: 100%;
  appearance: textfield;
  background: transparent;
}

.p-qty__input::-webkit-outer-spin-button,
.p-qty__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* IMPORTANT:
   форма кнопки здесь, но цвета не ломаем для btnCartToggle,
   чтобы style.css продолжал управлять цветовой схемой корзины
*/
.p-btn{
  height: 46px;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.p-btn:active{
  transform: translateY(1px);
}

.p-btn:disabled{
  opacity: .45;
  cursor: default;
}

.p-msg{
  min-height: 18px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--p-muted);
}

/* =========================================
   SPECS / CHARACTERISTICS
   ========================================= */
.p-specs{
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--p-line-2);
}

.p-specs__title,
.p-passport__title{
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  color: #1f2a26;
}

.p-specs__list,
.p-passport dl{
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, 46%) 1fr;
  gap: 10px 12px;
}

.p-specs__list dt,
.p-passport dt{
  margin: 0;
  color: var(--p-muted);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.p-specs__list dd,
.p-passport dd{
  margin: 0;
  color: #1f2a26;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

/* =========================================
   SECTIONS
   ========================================= */
.p-section{
  padding: 14px;
}

.p-section__title{
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  color: #1f2a26;
}

.p-section--desc .p-section__title{
  margin-bottom: 12px;
}

.p-desc{
  font-size: 15px;
  line-height: 1.65;
  color: rgba(31,42,38,.88);
}

.p-desc--muted{
  color: var(--p-muted);
  font-weight: 600;
}

/* debug table keeps working */
.p-props{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(56,73,66,.10);
}

.p-props td{
  border-top: 1px solid rgba(56,73,66,.08);
  padding: 10px;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.3;
}

.p-props tr:first-child td{
  border-top: 0;
}

.p-props td:first-child{
  width: 46%;
  color: rgba(31,42,38,.64);
  font-weight: 800;
  background: rgba(56,73,66,.03);
}

.p-props td:last-child{
  color: rgba(31,42,38,.88);
  font-weight: 700;
}

/* =========================================
   LIGHTBOX
   ========================================= */
.p-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(12,14,13,.82);
  z-index: 10150;
  display: none;
}

.p-lightbox.is-open{
  display: block;
}

.p-lightbox__inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.p-lightbox__frame{
  width: min(980px, 96vw);
  max-height: min(90vh, 820px);
  background: #151816;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.p-lightbox__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.p-lightbox__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

.p-lightbox__close:active{
  transform: translateY(1px);
}

.p-lightbox__imgwrap{
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101311;
}

.p-lightbox__img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px;
}

.p-lightbox__navbtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  z-index: 2;
}

.p-lightbox__navbtn:active{
  transform: translateY(-50%) translateY(1px);
}

.p-lightbox__navbtn--prev{ left: 10px; }
.p-lightbox__navbtn--next{ right: 10px; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (min-width: 860px){
  .product-page{
    background:
      linear-gradient(180deg, #f1f3ef 0%, #f6f7f4 260px, #f3f5f1 100%);
    padding: 14px 0 22px;
  }

  .p-title{
    font-size: 30px;
  }

  .p-main{
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    align-items: start;
  }

  .p-gallery__img{
    height: 420px;
  }

  .p-info{
    padding: 16px;
    gap: 16px;
  }

  .p-section{
    padding: 16px;
  }
}

@media (max-width: 420px){
  .p-title{
    font-size: 22px;
  }

  .p-price__now{
    font-size: 28px;
  }

  .p-price__old{
    font-size: 17px;
  }

  .p-gallery__img{
    height: 280px;
  }

  .p-thumbs{
    gap: 6px;
  }

  .p-thumb{
    height: 48px;
  }

  .p-specs__list,
  .p-passport dl{
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .p-specs__list dt,
  .p-passport dt{
    padding-top: 6px;
  }

  .p-specs__list dd,
  .p-passport dd{
    padding-bottom: 6px;
    border-bottom: 1px solid var(--p-line-2);
  }

  .p-specs__list dd:last-child,
  .p-passport dd:last-child{
    border-bottom: 0;
  }
}

@media (max-width: 360px){
  .p-gallery__img{
    height: 250px;
  }

  .p-thumb{
    height: 44px;
  }

  .p-btn{
    font-size: 14px;
  }
}

/* ===== FILE: /assets/css/auth.css ===== */
/* /assets/css/auth.css
   Перевёрстка под стиль сайта + нормальные кнопки + OTP всегда 6 ячеек.
*/

.auth{
  --navy: #2b3866;
  --green: #4f6a5f;
  --purple:#5a4f6a;

  --text:#111;
  --muted: rgba(0,0,0,.62);
  --line: rgba(0,0,0,.10);
  --bg: #ffffff;

  padding: 14px 0 18px;
}

.auth .container{ max-width: 620px; }

/* Card */
.auth__wrap{ display:flex; justify-content:center; }
.auth-card{
  width:100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
  overflow:hidden;
}

/* Header */
.auth-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.auth-head__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.auth-head__title{
  margin:0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  color: #1f2a26;
}
.auth-head__badge{
  flex:0 0 auto;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: var(--purple);
  border-radius: 999px;
  padding: 6px 10px;
}
.auth-head__subtitle{
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

/* Alerts */
.auth-alert{
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.auth-alert__icon{
  flex:0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.04);
  font-size: 14px;
}
.auth-alert__title{
  font-weight: 900;
  margin: 0 0 2px;
  font-size: 13px;
  color: #1f2a26;
}
.auth-alert__text{
  margin:0;
  font-size: 13px;
  line-height: 1.35;
}
.auth-alert__list{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.35;
}

.auth-alert--ok{
  border-color: rgba(79,106,95,.25);
  background: rgba(79,106,95,.10);
}
.auth-alert--ok .auth-alert__icon{
  background: rgba(79,106,95,.18);
}
.auth-alert--err{
  border-color: rgba(176,0,32,.22);
  background: rgba(176,0,32,.08);
}
.auth-alert--err .auth-alert__icon{
  background: rgba(176,0,32,.12);
}

/* Form */
.auth-form{ padding: 12px 14px 14px; }

.auth-block{
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 12px;
}

.auth-block__title{
  font-size: 13px;
  font-weight: 900;
  color:#1f2a26;
  margin: 0 0 10px;
}

.auth-label{
  display:block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 900;
  color:#1f2a26;
}

.auth-hint{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* Tabs */
.auth-tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auth-tab__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.auth-tab__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-weight: 900;
  color:#1f2a26;
  user-select:none;
  cursor:pointer;
}
.auth-tab__input:checked + .auth-tab__btn{
  background: var(--navy);
  border-color: var(--navy);
  color:#fff;
}
.auth-tab__input:disabled + .auth-tab__btn{
  opacity:.62;
  cursor:not-allowed;
}

/* Inputs */
.auth-field{ display:block; }
.auth-input{
  width:100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  background:#fff;
  box-sizing:border-box;
}
.auth-input:focus{
  border-color: rgba(79,106,95,.70);
  box-shadow: 0 0 0 3px rgba(79,106,95,.15);
}
.auth-input[readonly]{
  background: rgba(0,0,0,.03);
}
.auth-mini{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0,0,0,.70);
}

/* OTP layout — ALWAYS 6 cells */
.auth-input--hidden{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.auth-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.auth-row__left{ min-width: 0; }
.auth-row__right{ flex:0 0 auto; }
.auth-subhint{
  margin-top: -6px;
  font-size: 12px;
  color: var(--muted);
}

.auth-linkbtn{
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  color: var(--navy);
  font-weight: 900;
  font-size: 12px;
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
}
.auth-linkbtn:hover{
  border-color: rgba(43,56,102,.45);
  background: rgba(43,56,102,.06);
}
.auth-linkbtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.auth-otp{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.auth-otp__cell{
  width: 100%;
  min-width: 0;          /* критично, чтобы не ломало сетку */
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 20px;
  font-weight: 900;
  text-align:center;
  outline:none;
  box-sizing:border-box;
}
.auth-otp__cell:focus{
  border-color: rgba(90,79,106,.75);
  box-shadow: 0 0 0 3px rgba(90,79,106,.14);
}

.auth-otp__meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}
.auth-otp__timer{
  flex:0 0 auto;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.65);
  white-space:nowrap;
}
.auth-otp__help{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* Buttons (НЕ используем глобальные .btn, чтобы не было чёрного hover) */
.auth-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.auth-btn{
  flex: 1 1 auto;
  height: 46px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
}

.auth-btn--primary{
  background: var(--navy);
  color:#fff;
  border-color: var(--navy);
}
.auth-btn--primary:hover{
  background: #24305a;
  border-color: #24305a;
}

.auth-btn--ghost{
  background:#fff;
  color:#1f2a26;
  border-color: rgba(0,0,0,.14);
}
.auth-btn--ghost:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.22);
}

/* Mobile tweaks */
@media (max-width: 420px){
  .auth-otp{ gap: 6px; }
  .auth-otp__cell{
    height: 44px;
    font-size: 18px;
    border-radius: 10px;
  }
  .auth-head__title{ font-size: 17px; }
  .auth-actions{ flex-direction: column; }
}

.auth-row__right--actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}

@media (max-width: 420px){
  .auth-row{
    flex-direction: column;
    align-items: stretch;
  }
  .auth-row__right--actions{
    justify-content:flex-start;
  }
}

/* ===== FILE: /assets/css/account.css ===== */
/* /assets/css/account.css
 * Личный кабинет — в стиле сайта (как order_success.css: живой белый, мягкий зелёный, navy).
 * Принципы:
 *  - все стили строго внутри .acc (не конфликтуем с сайтом)
 *  - плоские карточки, аккуратные бордеры, тёплый фон
 *  - заметный notice под шапкой: sticky + плавное скрытие (.is-hide)
 *  - НОРМАЛЬНЫЙ КОНТРАСТ ok/err + крестик в правом верхнем углу, как на скрине
 */

.acc{
  /* палитра как в order_success.css */
  --bg: #f4f7f5;
  --card: #ffffff;
  --line: rgba(20, 46, 36, .12);
  --text: #0f1a14;
  --muted: rgba(15, 26, 20, .62);

  --green: #2f6b54;
  --green-2: #255a47;
  --green-ink: #153a2d;
  --green-soft: rgba(47, 107, 84, .12);
  --green-soft2: rgba(47, 107, 84, .20);

  --navy: #2b3866;

  --r: 16px;
  --r2: 20px;

  --shadow: 0 10px 26px rgba(15, 26, 20, .08);

  background: var(--bg);
  color: var(--text);
  padding: 14px 0 26px;
}

.acc .container{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Links */
.acc a{ color: inherit; text-decoration: none; }

/* =========================
   Header
   ========================= */
.acc-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 10px;
}

.acc-head__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.2px;
  font-weight: 950;
}

.acc-head__hello{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(15,26,20,.70);
}

.acc-head__right{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 520px){
  .acc-head{
    flex-direction: column;
    align-items: stretch;
  }
  .acc-head__right{
    justify-content: flex-start;
  }
}

/* =========================
   Notice / Alerts (FIXED)
   Без искусственного отступа сверху
   ========================= */

:root{
  --site-header-h: 64px; /* подстрой если нужно */
}

.acc-alert{
  position: fixed;
  left: 50%;
  top: calc(var(--site-header-h) + 90px);
  transform: translateX(-50%);
  z-index: 9999;

  width: min(1040px, calc(100% - 24px));
  margin: 0;

  border-radius: var(--r2);
  border: 2px solid var(--line);
  background: rgba(255,255,255,.96);
  color: rgba(15,26,20,.92);

  box-shadow: 0 12px 22px rgba(15,26,20,.08);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 900;

  backdrop-filter: blur(6px);

  padding: 12px 44px 12px 46px;
}

/* иконка */
.acc-alert::before{
  content: "ℹ️";
  position: absolute;
  left: 12px;
  top: 12px;

  width: 26px;
  height: 26px;
  border-radius: 10px;

  display: grid;
  place-items: center;

  font-size: 14px;
  line-height: 1;

  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.14);
}

/* скрываем возможную старую иконку */
.acc-alert .acc-alert__icon{ display: none; }

.acc-alert__text{
  word-break: break-word;
}

/* крестик */
.acc-alert__close{
  position: absolute;
  right: 10px;
  top: 10px;

  width: 32px;
  height: 32px;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.88);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  color: rgba(15,26,20,.72);
  font-size: 18px;
  line-height: 1;
}

/* OK */
.acc-alert--ok{
  border-color: rgba(34,197,94,.60);
  background: rgba(34,197,94,.18);
}
.acc-alert--ok::before{
  content: "✓";
  background: rgba(34,197,94,.24);
  border-color: rgba(34,197,94,.48);
}

/* ERROR */
.acc-alert--err{
  border-color: rgba(239,68,68,.62);
  background: rgba(239,68,68,.18);
}
.acc-alert--err::before{
  content: "!";
  background: rgba(239,68,68,.22);
  border-color: rgba(239,68,68,.44);
}

/* анимация скрытия */
.acc-alert.is-hide{
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}


/* =========================
   Cards
   ========================= */
.acc-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.acc-card--wide{ margin-top: 12px; }

.acc-card__head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 240px at 20% 0%,
      rgba(47,107,84,.14) 0%,
      rgba(47,107,84,0) 62%),
    #fff;
}

.acc-card__title{
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -.1px;
}

.acc-card__subtitle{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,26,20,.70);
}

.acc-card__body{ padding: 14px; }

/* =========================
   Quick grid (Быстрый доступ)
   - фикс “уехали вправо”: это обычно из-за min-width/переносов,
     поэтому делаем grid + min-width:0 для текста
   ========================= */
.acc-quick{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 860px){
  .acc-quick{ grid-template-columns: 1fr 1fr 1fr; }
}

.acc-quick__item{
  display: grid;
  grid-template-columns: 42px 1fr 18px; /* иконка | текст | стрелка */
  align-items: center;
  gap: 12px;

  padding: 12px;
  border-radius: var(--r);
  border: 1px solid rgba(20,46,36,.10);
  background: rgba(255,255,255,.92);

  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

.acc-quick__item:hover{
  border-color: rgba(47,107,84,.20);
  box-shadow: 0 12px 22px rgba(15,26,20,.06);
}

.acc-quick__item:active{ transform: translateY(1px); }

.acc-quick__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: linear-gradient(180deg, rgba(47,107,84,.14), rgba(47,107,84,.10));
  border: 1px solid rgba(47,107,84,.20);
  font-size: 18px;
}

.acc-quick__text{
  min-width: 0; /* важно, чтобы не “распирало” и не уезжало */
}

.acc-quick__title{
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
}

.acc-quick__hint{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(15,26,20,.66);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.acc-quick__arrow{
  justify-self: end;
  font-size: 20px;
  color: rgba(15,26,20,.38);
}

/* опционально: яркая “За покупками” (если сделаешь 3-й пункт) */
.acc-quick__item--cta{
  border-color: rgba(255,106,0,.28);
  background: rgba(255,106,0,.10);
}
.acc-quick__item--cta .acc-quick__icon{
  background: rgba(255,106,0,.14);
  border-color: rgba(255,106,0,.28);
}
.acc-quick__item--cta:hover{
  border-color: rgba(255,106,0,.36);
  box-shadow: 0 12px 22px rgba(255,106,0,.10);
}

/* =========================
   Main grid
   ========================= */
.acc-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 900px){
  .acc-grid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
  }
}

/* =========================
   Profile KV
   ========================= */
.acc-kv{ margin: 0; }

.acc-kv__row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(20,46,36,.16);
}
.acc-kv__row:last-child{ border-bottom: 0; }

.acc-kv dt{
  font-size: 12px;
  color: rgba(15,26,20,.62);
}
.acc-kv dd{
  margin: 0;
  font-size: 14px;
  color: rgba(15,26,20,.88);
  word-break: break-word;
}

@media (max-width: 420px){
  .acc-kv__row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.acc-muted{
  font-size: 13px;
  color: var(--muted);
}

.acc-inlinehint{
  color: rgba(15,26,20,.55);
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
}
@media (max-width: 520px){
  .acc-inlinehint{
    display: block;
    margin-left: 0;
    margin-top: 6px;
    white-space: normal;
  }
}

/* =========================
   Actions (two buttons)
   ========================= */
.acc-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 420px){
  .acc-actions{ grid-template-columns: 1fr; }
}

/* =========================
   Links list
   ========================= */
.acc-links{
  display: grid;
  gap: 8px;
}

.acc-links__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(20,46,36,.10);
  background: rgba(255,255,255,.92);

  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

.acc-links__item:hover{
  border-color: rgba(47,107,84,.20);
  box-shadow: 0 12px 22px rgba(15,26,20,.06);
}

.acc-links__item:active{ transform: translateY(1px); }

.acc-links__label{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,26,20,.86);
}

.acc-links__arrow{
  font-size: 20px;
  color: rgba(15,26,20,.38);
}

.acc-links__item--danger .acc-links__label{
  color: rgba(170,0,0,.90);
}

/* =========================
   Contact binding split
   ========================= */
.acc-split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px){
  .acc-split{ grid-template-columns: 1fr 1fr; }
}

.acc-pane{
  border: 1px solid rgba(20,46,36,.10);
  border-radius: var(--r2);
  overflow: hidden;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 20px rgba(15,26,20,.05);
}

.acc-pane__head{
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(20,46,36,.10);
  background:
    radial-gradient(900px 240px at 25% 0%,
      rgba(47,107,84,.14) 0%,
      rgba(47,107,84,0) 60%),
    #fff;
}

.acc-pane__title{
  margin: 0;
  font-size: 14px;
  font-weight: 950;
  color: rgba(15,26,20,.90);
}

.acc-pane__current{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15,26,20,.68);
}

/* усиление строки "Текущий:" */
.acc-pane__current b,
.acc-currentval{
  font-weight: 950;
  color: rgba(15,26,20,.92);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,84,.18);
  background: rgba(47,107,84,.10);
}

/* верхняя строка в pane (если используешь acc-pane__top + acc-current*) */
.acc-pane__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.acc-current{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  border: 1px solid rgba(20,46,36,.14);
  background: rgba(255,255,255,.80);
  color: rgba(15,26,20,.78);
  white-space: nowrap;
}

.acc-current--set{
  border-color: rgba(34,197,94,.40);
  background: rgba(34,197,94,.16);
  color: rgba(0,120,55,.96);
}

.acc-current--empty{
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.14);
  color: rgba(170,0,0,.92);
}

.acc-pane__body{ padding: 12px; }

.acc-field{ margin-top: 12px; }

.acc-label{
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,26,20,.86);
}

.acc-input{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(20,46,36,.12);
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  color: rgba(15,26,20,.90);
  outline: none;
  box-sizing: border-box;
}

.acc-input:focus{
  border-color: rgba(47,107,84,.45);
  box-shadow: 0 0 0 3px rgba(47,107,84,.16);
}

.acc-input--small{ max-width: 220px; }

.acc-row{ margin-top: 10px; }

.acc-confirm{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(20,46,36,.16);

  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   Buttons inside cabinet only
   ========================= */
.acc .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 44px;
  padding: 0 14px;
  border-radius: 14px;

  border: 1px solid rgba(20,46,36,.18);
  background: rgba(255,255,255,.92);
  color: rgba(15,26,20,.86);

  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  text-decoration: none;

  transition: transform .05s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, filter .12s ease;
}

.acc .btn:hover{
  border-color: rgba(47,107,84,.28);
  box-shadow: 0 12px 22px rgba(15,26,20,.06);
}

.acc .btn:active{ transform: translateY(1px); }

.acc .btn:focus-visible{
  outline: 3px solid rgba(47,107,84,.26);
  outline-offset: 2px;
}

/* primary */
.acc .btn--primary{
  background: linear-gradient(180deg, #31407a, var(--navy));
  border-color: rgba(0,0,0,.08);
  color: #fff;
}
.acc .btn--primary:hover{ filter: brightness(1.02); }

/* ghost */
.acc .btn--ghost{
  background: rgba(255,255,255,.92);
  border-color: rgba(20,46,36,.18);
  color: rgba(15,26,20,.86);
}

/* danger */
.acc .btn--danger{
  border-color: rgba(239,68,68,.42);
  color: rgba(170,0,0,.92);
}
.acc .btn--danger:hover{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.52);
}

/* disabled */
.acc .btn[disabled],
.acc .btn[aria-disabled="true"]{
  opacity: .62;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

/* =========================
   Inner pages helpers
   ========================= */
.acc-subhead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 14px;
}

.acc-subhead__title{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 950;
}

.acc-subhead__subtitle{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(15,26,20,.70);
}

.acc-subhead__actions{ flex: 0 0 auto; }

@media (max-width: 520px){
  .acc-subhead{
    flex-direction: column;
    align-items: stretch;
  }
  .acc-subhead__actions{
    display: grid;
    gap: 10px;
  }
}

.acc-form{ max-width: 720px; }

.acc-form__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px){
  .acc-form__grid{ grid-template-columns: 1fr 1fr; }
}

.acc-form__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .acc .btn,
  .acc-links__item,
  .acc-quick__item,
  .acc-alert,
  .acc-alert__close{
    transition: none !important;
  }
}

/* ===== FILE: /assets/css/orders.css ===== */
/* =========================================================
   ORDERS (account/orders)
   Depends on account.css buttons/cards
   ========================================================= */

.ord-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 960px){
  .ord-grid{
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }
}

.ord-empty{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* list */
.ord-list{
  display: grid;
  gap: 8px;
}

.ord-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  text-decoration: none;
}

.ord-item:hover{
  background: rgba(0,0,0,.03);
}

.ord-item__title{
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,.90);
}

.ord-item__meta{
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ord-item__date{
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

.ord-item__right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ord-item__sum{
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,.90);
  white-space: nowrap;
}

.ord-item__arrow{
  font-size: 18px;
  color: rgba(0,0,0,.45);
}

/* status badge */
.ord-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  font-size: 12px;
  font-weight: 700;
  background: #fff;
}

.ord-badge.is-new{
  background: rgba(255, 200, 0, .12);
  border-color: rgba(255, 200, 0, .30);
}

.ord-badge.is-paid{
  background: rgba(0, 200, 90, .10);
  border-color: rgba(0, 200, 90, .28);
}

.ord-badge.is-ship{
  background: rgba(0, 120, 255, .10);
  border-color: rgba(0, 120, 255, .25);
}

.ord-badge.is-cancel{
  background: rgba(255, 0, 0, .06);
  border-color: rgba(255, 0, 0, .20);
}

.ord-badge.is-default{
  background: rgba(0,0,0,.04);
}

/* pagination */
.ord-pages{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ord-page{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.ord-page.is-active{
  background: rgba(0,0,0,.88);
  border-color: rgba(0,0,0,.88);
  color: #fff;
}

/* payment block */
.ord-steps{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: rgba(0,0,0,.82);
  line-height: 1.45;
}

.ord-toggle{
  margin-top: 12px;
}

.ord-rekv{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

.ord-rekv__row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}

.ord-rekv__row:last-child{
  border-bottom: 0;
}

.ord-rekv__k{
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

.ord-rekv__v{
  font-size: 13px;
  color: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ord-code{
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
}

.ord-copy{
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 12px;
}

.ord-tip{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

.ord-note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

/* ===== FILE: /assets/css/order_view.css ===== */
/* =========================================================
   ORDER VIEW
   depends on account.css + orders.css
   ========================================================= */

.ov-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 960px){
  .ov-grid{
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
}

.ov-right{
  display: grid;
  gap: 12px;
}

/* "table" */
.ov-table{
  display: grid;
  gap: 0;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow: hidden;
}

.ov-tr{
  display: grid;
  grid-template-columns: 1fr 70px 110px 110px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

.ov-tr:last-child{ border-bottom: 0; }

.ov-th{
  background: rgba(0,0,0,.02);
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.70);
}

.ov-td{
  font-size: 13px;
  color: rgba(0,0,0,.90);
}

.ov-name{
  word-break: break-word;
}

.r{ text-align: right; }

.ov-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
}

.ov-pay{
  margin-top: 14px;
}

.ov-pay__hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

@media (max-width: 520px){
  .ov-tr{
    grid-template-columns: 1fr 56px 90px 90px;
  }
}

/* ===== FILE: /assets/css/checkout.css ===== */
/* /assets/css/checkout.css
 * Обновление стилей checkout (без изменения логики)
 * Цели:
 *  - сделать блоки шагов более выразительными и единообразными
 *  - улучшить читабельность полей на “панелях”
 *  - шаг 4 (оплата) сделать дружелюбнее (иконки, фон выбора, структура)
 *  - подсветка выбора работает и БЕЗ :has()
 */

/* ========================================================================== */
/* 1) Variables */
/* ========================================================================== */
:root{
  --checkout-bg: transparent;
  --checkout-card: #ffffff;

  --checkout-bd: rgba(0,0,0,.10);
  --checkout-bd2: rgba(0,0,0,.16);

  --checkout-tx: #111;
  --checkout-muted: rgba(0,0,0,.62);
  --checkout-muted2: rgba(0,0,0,.52);

  --checkout-shadow: 0 10px 30px rgba(0,0,0,.06);
  --checkout-radius: 14px;

  --accent: #ff6a00;  /* CTA ("Далее") + ссылки */
  --green: #47645c;   /* прогресс/успех/выбор */

  --ok: #16a34a;
  --warn: #f59e0b;
  --err: #dc2626;
  --info: #2563eb;

  --back-bg: rgba(0,0,0,.04);
  --back-bd: rgba(0,0,0,.12);
  --back-tx: rgba(0,0,0,.82);

  /* focus (спокойный) */
  --focus-bd: rgba(71,100,92,.55);
  --focus-ring: rgba(71,100,92,.12);

  --stickyTop: 78px;

  /* Панели (сделал чуть “чище”, чем было) */
  --panel-bg: rgba(17, 24, 22, .04);
  --panel-bd: rgba(17, 24, 22, .12);
  --panel-inset: 0 1px 0 rgba(255,255,255,.75) inset;

  /* Контраст полей на панелях */
  --field-bd-strong: rgba(0,0,0,.18);
  --field-bd-strong-focus: rgba(71,100,92,.62);
  --field-ring-strong: rgba(71,100,92,.14);

  /* Мягкий фон выбора (доставка/оплата) */
  --pick-bg: rgba(71,100,92,.06);
  --pick-ring: rgba(71,100,92,.10);
  --pick-bd: rgba(71,100,92,.55);
}

/* ========================================================================== */
/* 2) Page shell */
/* ========================================================================== */
.checkout-page{
  background: var(--checkout-bg);
  color: var(--checkout-tx);
  padding: 18px 0 32px;
}

.checkout-shell{
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 14px;
}

.checkout-top{ margin-bottom: 14px; }

.checkout-h1{
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.checkout-note{
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--checkout-bd);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
  color: var(--checkout-muted);
}
.checkout-note a{
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
}
.checkout-link-accent{ color: var(--accent) !important; }

/* ========================================================================== */
/* 3) Summary */
/* ========================================================================== */
.checkout-summary{
  border: 1px solid var(--checkout-bd);
  border-radius: var(--checkout-radius);
  background: var(--checkout-card);
  box-shadow: var(--checkout-shadow);
  overflow: hidden;
}
.checkout-summary__row{
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.checkout-summary__row:first-child{ border-top: 0; }
.checkout-summary__row--grand{ background: rgba(0,0,0,.02); }

.checkout-summary__label{
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--checkout-muted);
  min-width: 0;
}
.checkout-summary__value{
  font-weight: 900;
  white-space: nowrap;
}

.checkout-edit{
  font-size: 12px;
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
}
.checkout-edit:hover{ filter: brightness(.95); }

/* ========================================================================== */
/* 4) Form layout */
/* ========================================================================== */
.checkout-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ========================================================================== */
/* 5) Steps nav */
/* ========================================================================== */
.steps-nav{
  position: sticky;
  top: var(--stickyTop);
  z-index: 30;
  border: 1px solid var(--checkout-bd);
  border-radius: var(--checkout-radius);
  background: var(--checkout-card);
  box-shadow: var(--checkout-shadow);
  overflow: hidden;
}

.steps-nav__head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.steps-nav__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.steps-nav__meta{
  color: var(--checkout-muted);
  font-size: 13px;
  font-weight: 700;
}

.steps-nav__bar{
  height: 4px;
  background: rgba(0,0,0,.06);
}
.steps-nav__barFill{
  height: 4px;
  width: 0%;
  background: rgba(71,100,92,.85);
  transition: width .25s ease;
}

.steps-nav__list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stepBtn{
  appearance: none;
  border: 0;
  border-right: 1px solid rgba(0,0,0,.06);
  background: transparent;
  padding: 10px 10px;
  cursor: pointer;

  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;

  min-width: 0;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.stepBtn:last-child{ border-right: 0; }

.stepBtn .n{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.68);
  flex: 0 0 auto;
  font-weight: 900;
}

.stepBtn .t{
  font-size: 13px;
  color: var(--checkout-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

/* active = зелёный */
.stepBtn.is-active{ background: rgba(71,100,92,.08); }
.stepBtn.is-active .n{ background: var(--green); color: #fff; }
.stepBtn.is-active .t{ color: var(--checkout-tx); font-weight: 900; }

/* done */
.stepBtn.is-done .n{
  background: rgba(71,100,92,.18);
  color: rgba(0,0,0,.82);
}

/* locked */
.stepBtn.is-locked{ opacity: .45; cursor: default; }
.stepBtn.is-locked:hover{ background: transparent; }

/* nav error state */
.steps-nav.has-error{
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 0 0 4px rgba(220,38,38,.08), var(--checkout-shadow);
}

/* ========================================================================== */
/* 6) Steps / headings / errors */
/* ========================================================================== */
.step{
  border: 1px solid var(--checkout-bd);
  border-radius: var(--checkout-radius);
  background: var(--checkout-card);
  box-shadow: var(--checkout-shadow);
  padding: 14px;
}

.step-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.step-errors{
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(220,38,38,.28);
  background: rgba(220,38,38,.06);
  border-radius: 12px;
  color: #7f1d1d;
}
.step-errors ul{ margin: 0; padding-left: 18px; }
.step-errors li{ margin: 3px 0; }

/* ========================================================================== */
/* 7) Notices */
/* ========================================================================== */
.notice{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--checkout-bd);
  background: rgba(0,0,0,.02);
  color: var(--checkout-muted);
  margin-bottom: 10px;
}
.notice--warn{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
  color: rgba(120,53,15,.95);
}
.notice--info{
  border-color: rgba(71,100,92,.25);
  background: rgba(71,100,92,.08);
  color: rgba(25,48,42,.95);
}

/* ========================================================================== */
/* 8) Boxes / grid */
/* ========================================================================== */
.step-box{
  padding: 12px;
  border: 1px solid var(--panel-bd);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: var(--panel-inset);
}

/* Контакты чуть плотнее, чтобы выглядело “собрано” */
.step-box--contacts{
  background: rgba(17, 24, 22, .045);
  border-color: rgba(17,24,22,.13);
}

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ========================================================================== */
/* 9) Fields */
/* ========================================================================== */
.field{ display: block; min-width: 0; }
.field--half{ grid-column: span 1; }

.field .label{
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
  color: rgba(0,0,0,.68);
  margin-bottom: 6px;
  font-weight: 800;
}

.req{ color: var(--err); }

.field input,
.field select,
.field textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--checkout-tx);
  background: #fff;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.field textarea{ resize: vertical; }

/* Контрастнее границы */
.step .field input,
.step .field select,
.step .field textarea{
  border-color: var(--field-bd-strong);
}

/* ФОКУС: спокойный */
.field input:focus,
.field select:focus,
.field textarea:focus,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  border-color: var(--focus-bd);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* На панелях фокус чуть выразительнее */
.step-box .field input:focus,
.step-box .field select:focus,
.step-box .field textarea:focus,
.step-box .field input:focus-visible,
.step-box .field select:focus-visible,
.step-box .field textarea:focus-visible{
  border-color: var(--field-bd-strong-focus);
  box-shadow: 0 0 0 4px var(--field-ring-strong);
}

/* disabled */
.field input[disabled],
.field input:disabled,
.field textarea:disabled,
.field select:disabled{
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.70);
}

.hint{
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--checkout-muted2);
}

/* ========================================================================== */
/* 10) Actions */
/* ========================================================================== */
.actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
  align-items: center;
}

/* ========================================================================== */
/* 11) Buttons */
/* ========================================================================== */
.btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  color: var(--checkout-tx);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  font-weight: 900;
}
.btn:active{ transform: translateY(1px); }

.btn[disabled],
.btn:disabled{ opacity: .65; cursor: default; }

/* primary = ORANGE */
.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255,106,0,.16);
}
.btn-primary:hover{ filter: brightness(.96); }

/* ghost */
.btn-ghost{
  background: var(--back-bg);
  border-color: var(--back-bd);
  color: var(--back-tx);
  box-shadow: none;
}
.btn-ghost:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.16);
}

/* link-like buttons */
.btn-link{
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 900;
}
.btn-link:active{ transform: none; }
.btn-link-accent{ color: var(--accent); }
.btn-link-accent:hover{ filter: brightness(.95); }

/* ========================================================================== */
/* 12) Choice cards */
/* ========================================================================== */
.choice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.choice-grid--single{ grid-template-columns: 1fr; }

/* Карточки выбора */
.choice-card{
  position: relative;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.choice-card input{
  position: absolute;
  left: 14px;
  top: 14px;
  width: 18px;
  height: 18px;
  opacity: 1;
  pointer-events: none;
}

/* default accent for radios */
.choice-card input{ accent-color: var(--accent); }

.choice-card__body{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 12px 44px;
  transition: background .15s ease, box-shadow .15s ease;
}

.choice-card__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.choice-card__sub{
  color: var(--checkout-muted);
  font-size: 13px;
  font-weight: 700;
}

.choice-card:hover{ border-color: rgba(0,0,0,.18); }

/* ========================================================================== */
/* 13) Delivery (Step 3) */
/* ========================================================================== */

/* Оборачиваем выбор доставки в панель — как на скрине СДЭК (выглядит собранно) */
.step[data-step="3"] .choice-grid{
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--panel-inset);
}

/* Радио доставки — зелёный */
.step[data-step="3"] .choice-card input[name="delivery_method"]{
  accent-color: var(--green);
}

/* Выбрано (fallback без :has) — фон + кольцо + внутренняя рамка */
.step[data-step="3"] .choice-card input[name="delivery_method"]:checked + .choice-card__body{
  background: var(--pick-bg);
  border-radius: 12px;
  box-shadow:
    0 0 0 4px var(--pick-ring),
    0 0 0 1px var(--pick-bd) inset;
}

/* Если :has поддерживается — дополнительно подсветим контур самой карточки */
.step[data-step="3"] .choice-card:has(input[name="delivery_method"]:checked){
  border-color: var(--pick-bd);
  box-shadow: 0 0 0 4px var(--pick-ring), 0 10px 22px rgba(0,0,0,.06);
}

/* ========================================================================== */
/* 14) Payment (Step 4) — делаем дружелюбнее */
/* ========================================================================== */

/* В шаге 4 — карточки чуть “мягче” */
.step[data-step="4"] .card{
  border-color: rgba(17,24,22,.14);
  background: rgba(255,255,255,.96);
}

/* Заголовок первой карточки оплаты — с лёгкой плашкой */
.step[data-step="4"] .card:first-of-type .card-head{
  background: linear-gradient(180deg, rgba(71,100,92,.07), rgba(71,100,92,.02));
  border-bottom-color: rgba(0,0,0,.06);
}

/* Иконка в заголовке "Способ оплаты" */
.step[data-step="4"] .card:first-of-type .card-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.step[data-step="4"] .card:first-of-type .card-title::before{
  content: "💳";
  font-size: 16px;
  line-height: 1;
}

/* Блок выбора оплаты делаем как “список-панель”, чтобы не было пустоты */
.step[data-step="4"] .card:first-of-type > .choice-grid{
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--panel-inset);
}

/* Радио оплаты — зелёный */
.step[data-step="4"] .choice-card input[name="payment_method"]{
  accent-color: var(--green);
}

/* Иконки у вариантов оплаты */
.step[data-step="4"] .choice-card input[name="payment_method"] + .choice-card__body .choice-card__title{
  display: flex;
  align-items: center;
  gap: 10px;
}
.step[data-step="4"] .choice-card input[name="payment_method"][value="card_transfer"] + .choice-card__body .choice-card__title::before{
  content: "💳";
  font-size: 16px;
  line-height: 1;
  opacity: .95;
}
.step[data-step="4"] .choice-card input[name="payment_method"][value="qr"] + .choice-card__body .choice-card__title::before{
  content: "🔳";
  font-size: 16px;
  line-height: 1;
  opacity: .75;
}

/* Выбрано (fallback без :has): фон + кольцо + внутренняя рамка */
.step[data-step="4"] .choice-card input[name="payment_method"]:checked + .choice-card__body{
  background: var(--pick-bg);
  border-radius: 12px;
  box-shadow:
    0 0 0 4px var(--pick-ring),
    0 0 0 1px var(--pick-bd) inset;
}

/* Если :has поддерживается — контур самой карточки */
.step[data-step="4"] .choice-card:has(input[name="payment_method"]:checked){
  border-color: var(--pick-bd);
  box-shadow: 0 0 0 4px var(--pick-ring), 0 10px 22px rgba(0,0,0,.06);
}

/* Disabled карточка — чуть понятнее */
.choice-card--disabled{
  opacity: .55;
  cursor: default;
}
.choice-card--disabled .choice-card__sub{
  color: rgba(0,0,0,.45);
  font-weight: 800;
}

/* Комментарий — визуально отделим от выбора оплаты */
.step[data-step="4"] .card:first-of-type .field{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.10);
}

/* ========================================================================== */
/* 15) CDEK inline UI (как было, без ломания) */
/* ========================================================================== */
.choice-card--cdek .choice-card__body{ gap: 8px; }

.choice-card__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.choice-card__text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.choice-card__actions{ flex: 0 0 auto; }

.btn-cdek{
  background: linear-gradient(135deg, #47645c, #3f5a53 55%, #2f4741);
  border-color: rgba(0,0,0,0);
  color: #fff;
  box-shadow: 0 10px 22px rgba(71,100,92,.22);
}
.btn-cdek:hover{ filter: brightness(.97); }
.btn-cdek:active{ transform: translateY(1px); }

.btn-pvz{
  padding: 9px 12px;
  font-size: 13px;
  white-space: nowrap;
}

#cdekExtra{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.pvz-mini{
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  color: var(--checkout-tx);
}
.pvz-mini.is-selected{
  border-color: rgba(71,100,92,.28);
  background: rgba(71,100,92,.06);
}

.pvz-mini__title{
  display: flex;
  align-items: center;
  gap: 8px;
}
.pvz-mini__code{
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
  color: rgba(0,0,0,.72);
}

.pvz-mini__addr{
  margin-top: 4px;
  font-size: 13px;
  color: var(--checkout-muted);
}
.pvz-mini__meta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.70);
}

.btn-change-city{
  font-size: 12px;
  font-weight: 900;
  color: var(--accent);
  text-decoration: underline;
}

/* ========================================================================== */
/* 16) Generic cards + padding fix */
/* ========================================================================== */
.card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--checkout-radius);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
  overflow: hidden;
  margin-top: 12px;
}

.card-head{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.015);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.card-title{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.card-sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--checkout-muted);
  font-weight: 700;
}

/* Внутренние отступы */
.card > .grid,
.card > .choice-grid,
.card > .field{
  padding: 12px 14px 14px;
  margin: 0;
}
.card > .choice-grid{ margin-bottom: 0; }

/* STEP 3 postBlock */
.step[data-step="3"] #postBlock.card{
  border-color: rgba(17, 24, 22, .14);
  background: rgba(255,255,255,.94);
}

/* ========================================================================== */
/* 17) Suggest (city autocomplete) */
/* ========================================================================== */
.suggest{
  position: relative;
  margin-top: 8px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  overflow: hidden;
}
.suggest-item{
  padding: 10px 12px;
  cursor: pointer;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
}
.suggest-item:first-child{ border-top: 0; }
.suggest-item:hover{ background: rgba(0,0,0,.03); }

/* ========================================================================== */
/* 18) Order list */
/* ========================================================================== */
.order-list{
  list-style: none;
  padding: 10px 14px 0;
  margin: 0;
}
.order-item{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  align-items: baseline;
}
.order-item .qty{
  color: var(--checkout-muted);
  font-size: 13px;
  white-space: nowrap;
  font-weight: 700;
}
.order-item .sum{
  font-weight: 900;
  white-space: nowrap;
}

.order-total-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}
.order-total-row span{ color: var(--checkout-muted); font-weight: 800; }
.order-total-row strong{ white-space: nowrap; font-weight: 900; }
.order-total-row--grand{
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.015);
}

/* ========================================================================== */
/* 19) Responsive */
/* ========================================================================== */
@media (max-width: 900px){
  .checkout-shell{ max-width: 760px; }
  .stepBtn{ padding: 10px 8px; }
  .stepBtn .t{ font-size: 12px; }
}

@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
  .field--half{ grid-column: auto; }
  .choice-grid{ grid-template-columns: 1fr; }

  .actions{ justify-content: flex-end; }
  .actions .btn-primary{ margin-left: auto; }
  .actions .btn-ghost{ margin-right: auto; }

  .stepBtn{
    padding: 10px 6px 8px;
    flex-direction: column;
    gap: 6px;
  }
  .stepBtn .n{
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .stepBtn .t{
    display: block;
    font-size: 10.5px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 800;
  }

  .choice-card input{
    width: 20px;
    height: 20px;
    left: 12px;
    top: 12px;
  }
  .choice-card__body{ padding-left: 46px; }

  .choice-card__row{
    flex-direction: column;
    align-items: stretch;
  }
  .btn-pvz{ width: 100%; }

  .step[data-step="3"] .choice-grid{ padding: 10px; }
  .step[data-step="4"] .card:first-of-type > .choice-grid{ padding: 10px; }
}

@media (max-width: 420px){
  .checkout-h1{ font-size: 20px; }
  .steps-nav__head{ padding: 10px 12px; }
  .step{ padding: 12px; }
}

/* ========================================================================== */
/* 20) Safety */
/* ========================================================================== */
#cdekOpenFloatingBtn{ display: none !important; }

/* ==========================================================================
   Минимальная сумма заказа
   ========================================================================== */
.checkout-min-order{
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,106,0,.22);
  background: linear-gradient(180deg, rgba(255,106,0,.08), rgba(255,106,0,.04));
  box-shadow: 0 8px 22px rgba(255,106,0,.08);
}

.checkout-min-order.is-active{
  display: block;
}

.checkout-min-order__title{
  font-size: 14px;
  line-height: 1.25;
  font-weight: 950;
  color: #111;
  margin-bottom: 4px;
}

.checkout-min-order__text{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(0,0,0,.78);
}

.checkout-min-order__text strong{
  font-weight: 950;
  color: #111;
}

.checkout-min-order__actions{
  margin-top: 9px;
}

.checkout-min-order__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.checkout-min-order__link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkout-min-order.is-bump{
  animation: checkoutMinOrderBump .46s ease;
}

@keyframes checkoutMinOrderBump{
  0%   { transform: scale(1); }
  18%  { transform: scale(1.018); }
  36%  { transform: scale(.994); }
  54%  { transform: scale(1.014); }
  72%  { transform: scale(.997); }
  100% { transform: scale(1); }
}

/* ===== FILE: /assets/css/mobile_menu.css ===== */
/* assets/css/mobile_menu.css */

/* Overlay */
.mm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}

/* Drawer */
.mm-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;

  /* чуть компактнее по ширине */
  width: min(84vw, 360px);

  background: #fff;
  transform: translateX(-102%);
  transition: transform .22s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Open state */
body.mm-open .mm-overlay {
  opacity: 1;
  pointer-events: auto;
}
body.mm-open .mm-drawer {
  transform: translateX(0);
}

/* Top bar inside menu */
.mm-topbar {
  background: #0b0b0b;
  color: #fff;

  /* было 52px -> компактнее */
  height: 48px;

  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  flex: 0 0 auto;
}

.mm-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: transparent;
  border: 0;

  /* компактнее кликабельная зона */
  padding: 8px 6px;

  font: inherit;
  cursor: pointer;
}

.mm-close .mm-arrow {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
  margin-left: 2px;
}

/* Panels container */
.mm-panels {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.mm-panels__track {
  height: 100%;
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform .22s ease;
}

.mm-panel {
  width: 100%;
  flex: 0 0 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

/* Header line in panel (like "Main menu" + burger icon) */
.mm-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;

  /* было 14px 14px -> компактнее */
  padding: 10px 12px;

  border-bottom: 1px solid #e9e9e9;
}

.mm-panel__head .mm-burger {
  width: 18px;
  height: 14px;
  position: relative;
}
.mm-panel__head .mm-burger:before,
.mm-panel__head .mm-burger:after,
.mm-panel__head .mm-burger i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #7aa600; /* фирменный зеленый */
  border-radius: 2px;
}
.mm-panel__head .mm-burger:before { top: 0; }
.mm-panel__head .mm-burger i { top: 6px; }
.mm-panel__head .mm-burger:after { top: 12px; }

.mm-panel__head .mm-headtitle {
  color: #7aa600;
  font-weight: 600;

  /* было 15px -> компактнее */
  font-size: 14px;
}

/* Panel title (center like "Bongs") */
.mm-panel__title {
  /* было 16px 14px 10px -> компактнее */
  padding: 12px 12px 8px;

  font-weight: 700;
  text-align: center;
  font-size: 14px;
}

/* Back row */
.mm-back {
  display: flex;
  align-items: center;
  gap: 8px;

  /* было 12px 14px -> компактнее */
  padding: 10px 12px;

  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #e9e9e9;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.mm-back .mm-back__icon {
  width: 16px;
  height: 16px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg);
  margin-left: 2px;
}
.mm-back span {
  font-weight: 600;
  font-size: 14px;
}

/* Links list */
.mm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------
   IMPORTANT DESIGN RULE:
   - No dividers between list items (system / categories / info)
   - Dividers ONLY around section titles ("Категории", "Информация")
   ------------------------------------------------------------------ */
.mm-item {
  border: 0;
}

.mm-link,
.mm-next {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* было gap 12 -> компактнее */
  gap: 10px;

  /* было 14px 14px -> компактнее */
  padding: 10px 12px;

  text-decoration: none;
  color: #111;
  background: #fff;

  /* было 14.5px -> компактнее */
  font-size: 14px;

  border: 0;
  box-shadow: none;

  /* легкая плотность строки */
  line-height: 1.2;
}

.mm-next {
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* =========================================================
   NEW: "dash + arrow" icon (—>)
   заменяет старую "галочку" (chevron)
   + делаем не таким чёрным
   ========================================================= */
.mm-chevron {
  width: 20px;
  height: 14px;
  flex: 0 0 20px;
  position: relative;

  /* было .85 -> мягче */
  opacity: .55;
}

/* горизонтальная черта */
.mm-chevron::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  border-radius: 2px;
}

/* наконечник стрелки */
.mm-chevron::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* активный пункт: чуть контрастнее */
.mm-link.is-active .mm-chevron,
.mm-next.is-active .mm-chevron {
  opacity: .75;
}

/* Green "Show ..." line */
.mm-showlink {
  background: #7aa600;
  color: #fff;
  font-weight: 700;
}

/* Active highlight */
.mm-link.is-active,
.mm-next.is-active {
  background: #f4f8ea;
  color: #6e9800;
  font-weight: 700;
}

/* на зелёной строке — стрелка белая и яркая */
.mm-showlink .mm-chevron {
  opacity: 1;
}

/* Section separator ("Категории", "Информация") — две черточки: сверху и снизу */
.mm-section-title {
  /* было margin-top 10 -> компактнее */
  margin-top: 8px;

  /* было 12px 14px -> компактнее */
  padding: 10px 12px;

  font-size: 12.5px;
  font-weight: 800;
  text-transform: none;
  color: #111;
  background: #fff;
  text-align: center;

  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
}

/* Lock scroll while menu open */
body.mm-open {
  overflow: hidden;
  touch-action: none;
}

/* "Главное меню" выглядит как обычный текст, но кликабельно */
.mm-headtitle[data-mm-home]{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  line-height: inherit;
}

/* фокус */
.mm-headtitle[data-mm-home]:focus{
  outline: none;
}

.mm-headtitle[data-mm-home]:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===== FILE: /assets/css/cart-drawer.css ===== */
/* /assets/css/cart-drawer.css
   Drawer корзины (выезд справа) — подтверждение добавления.

   CTA:
   - Primary:  "Оформить заказ"  -> /checkout
   - Secondary:"Перейти в корзину" -> /cart
   - Ghost:    "Продолжить покупки" -> закрыть

   Важно:
   - Никакого редактирования qty внутри drawer (это в /cart)
   - Не конфликтуем с filters-open (меню/лайтбокс) => отдельный класс body.cart-drawer-open
*/

:root{
  /* Токены drawer (с фолбэками под твои глобальные переменные) */
  --cd-green:    var(--green, #4f6a5f);
  --cd-bg:       var(--bg, #f6f7fb);
  --cd-card:     var(--card, #ffffff);

  --cd-text:     var(--text, #111111);
  --cd-muted:    var(--muted, rgba(0,0,0,.60));
  --cd-line:     var(--line, rgba(0,0,0,.10));

  --cd-topbar:   var(--navy, #2b3866);      /* тёмная шапка (как пример, но в палитре MnogoBongo) */
  --cd-shadow:   0 18px 48px rgba(0,0,0,.22);

  --cd-radius:   16px;
  --cd-radius-sm:12px;

  --cd-btn-radius: 14px;
}

/* Лок-скролл (только когда drawer открыт) */
body.cart-drawer-open{
  overflow: hidden;
  touch-action: none;
}

/* Root wrapper */
.cart-drawer{
  position: fixed;
  inset: 0;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.cart-drawer.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Overlay */
.cart-drawer__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
}

/* Panel */
.cart-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;

  height: 100%;
  width: min(420px, 92vw);

  background: var(--cd-card);
  color: var(--cd-text);

  box-shadow: var(--cd-shadow);

  transform: translateX(110%);
  transition: transform .22s ease;

  display: flex;
  flex-direction: column;

  /* чтобы на iOS не “прыгал” скролл */
  -webkit-overflow-scrolling: touch;
}

.cart-drawer.is-open .cart-drawer__panel{
  transform: translateX(0);
}

/* Top bar */
.cart-drawer__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.14);

  background: var(--cd-topbar);
  color: #fff;
}

.cart-drawer__top-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cart-drawer__back{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  text-decoration: none;

  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.cart-drawer__back:hover{
  background: rgba(255,255,255,.10);
}

.cart-drawer__title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-drawer__close{
  width: 38px;
  height: 38px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: 22px;
  line-height: 1;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.cart-drawer__close:hover{
  background: rgba(255,255,255,.14);
}

/* Body */
.cart-drawer__body{
  padding: 12px 14px 14px;
  overflow: auto;
  flex: 1 1 auto;
  background: var(--cd-card);
}

/* Status banner */
.cart-drawer__status{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;

  padding: 12px 12px;
  border-radius: var(--cd-radius);
  border: 1px solid rgba(79,106,95,.28);
  background: rgba(79,106,95,.12);

  margin-bottom: 12px;
}

.cart-drawer__status-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;

  background: var(--cd-green);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.cart-drawer__status-text{
  font-size: 14px;
  line-height: 1.25;
  color: var(--cd-text);
  font-weight: 800;
}

/* Item row */
.cart-drawer__item{
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 10px 10px;
  border-radius: var(--cd-radius);
  border: 1px solid var(--cd-line);
  background: #fff;

  margin-bottom: 12px;
}

.cart-drawer__thumb{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--cd-line);
  background: rgba(0,0,0,.03);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

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

.cart-drawer__thumb--noimg{
  font-size: 12px;
  color: var(--cd-muted);
}

.cart-drawer__meta{
  min-width: 0;
}

.cart-drawer__name{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  margin-bottom: 2px;
}

.cart-drawer__sub{
  font-size: 13px;
  color: var(--cd-muted);
  line-height: 1.2;
}

.cart-drawer__price{
  text-align: right;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
}

/* Summary */
.cart-drawer__summary{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--cd-line);

  display: grid;
  gap: 6px;
}

.cart-drawer__sumrow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  font-size: 14px;
}

.cart-drawer__sumlabel{
  color: var(--cd-muted);
}

.cart-drawer__sumval{
  font-weight: 900;
  color: var(--cd-text);
  white-space: nowrap;
}

/* Footer */
.cart-drawer__footer{
  border-top: 1px solid var(--cd-line);
  padding: 12px 14px 14px;

  display: grid;
  gap: 10px;

  background: #fff;
}

/* Buttons base */
.cart-drawer__btn{
  width: 100%;
  border-radius: var(--cd-btn-radius);
  padding: 12px 12px;

  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;

  cursor: pointer;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1px solid transparent;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.cart-drawer__btn:active{
  transform: translateY(1px);
  filter: brightness(0.985);
}

.cart-drawer__btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}

/* Primary: Оформить заказ */
.cart-drawer__btn--primary{
  background: var(--cd-green);
  border-color: rgba(0,0,0,.08);
  color: #fff;
}

.cart-drawer__btn--primary:hover{
  filter: brightness(0.98);
}

/* Secondary: Перейти в корзину */
.cart-drawer__btn--secondary{
  background: #fff;
  border-color: rgba(79,106,95,.45);
  color: var(--cd-green);
}

.cart-drawer__btn--secondary:hover{
  background: rgba(79,106,95,.06);
}

/* Ghost: Продолжить покупки */
.cart-drawer__btn--ghost{
  background: #fff;
  border-color: var(--cd-line);
  color: var(--cd-text);
  font-weight: 800;
}

.cart-drawer__btn--ghost:hover{
  background: rgba(0,0,0,.03);
}

/* Hint */
.cart-drawer__hint{
  margin-top: 2px;
  font-size: 12px;
  color: var(--cd-muted);
  text-align: center;
}

/* Optional: loading / error */
.cart-drawer__loading,
.cart-drawer__error{
  border-radius: var(--cd-radius);
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--cd-line);
  background: rgba(0,0,0,.03);
}

.cart-drawer__error{
  border-color: rgba(176,0,32,.25);
  background: rgba(176,0,32,.06);
  color: #b00020;
}

.cart-drawer__title{
  color: #fff;
  text-decoration: none;
}

.cart-drawer__title:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 420px){
  .cart-drawer__panel{ width: 92vw; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cart-drawer,
  .cart-drawer__panel{
    transition: none !important;
  }
}

/* ===== FILE: /assets/css/home.css ===== */
/* assets/css/home.css */

/* =========================================================
   Главная страница
   Задача:
   - убрать бледность
   - усилить контраст
   - сделать аккуратнее и "дороже" визуально
   - не ломать общий стиль сайта
   ========================================================= */

.home-page{
  background:
    linear-gradient(180deg, #f3f4f1 0%, #f7f7f5 220px, #f4f5f2 100%);
  padding-bottom: 10px;
}

.home-hero{
  padding: 10px 0 8px;
}

.home-hero__panel{
  margin-bottom: 12px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(56, 73, 66, .10);
  box-shadow: 0 10px 28px rgba(20, 24, 22, .05);
  backdrop-filter: blur(4px);
}

.home-hero__text{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: #25312c;
}

/* Баннер только на мобиле */
.home-mobile-banner{
  margin: 10px 0 14px;
}

.home-mobile-banner img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

@media (min-width: 768px){
  .home-mobile-banner{
    display: none;
  }
}

/* =========================================================
   CTA
   ========================================================= */

.home-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.home-actions a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;

  text-decoration: none;
  box-sizing: border-box;

  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .01em;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease;
}

.home-actions__catalog{
  background: linear-gradient(180deg, #567364 0%, #4a6558 100%);
  border: 1px solid rgba(48, 67, 59, .55);
  color: #ffffff;
  box-shadow:
    0 10px 24px rgba(43, 58, 52, .16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.home-actions__catalog::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 0 4px rgba(255,255,255,.13);
}

.home-actions__catalog:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(43, 58, 52, .20),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.home-actions__catalog:active{
  transform: translateY(0);
}

@media (max-width: 380px){
  .home-actions a{
    min-height: 46px;
    font-size: 15px;
    border-radius: 13px;
  }

  .home-actions__catalog::before{
    left: 13px;
    height: 18px;
  }
}

/* =========================================================
   Блоки товаров
   ========================================================= */

.home-block{
  padding: 14px 0;
}

.home-title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  padding: 14px 14px;
  border-radius: 14px;

  background: linear-gradient(180deg, #5f536f 0%, #544864 100%);
  color: #ffffff;

  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;

  box-shadow: 0 10px 24px rgba(45, 34, 57, .12);
}

.home-title--alt{
  background: linear-gradient(180deg, #5f536f 0%, #544864 100%);
}

.home-title--light{
  background: #ffffff;
  color: #1f2a26;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

/* =========================================================
   Инфо-блок внизу
   ========================================================= */

.home-info-card{
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(56, 73, 66, .10);
  box-shadow: 0 10px 28px rgba(20, 24, 22, .05);
}

.home-flat-img{
  margin: 0 0 14px;
}

.home-flat-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.home-why{
  padding: 0;
}

.home-why h3{
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  color: #1f2a26;
}

.home-why ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.home-why li{
  display: flex;
  gap: 10px;
  align-items: flex-start;

  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #2b3732;
}

.home-why li::before{
  content: "✓";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #4f6a5f;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

@media (min-width: 768px){
  .home-page{
    background:
      linear-gradient(180deg, #f1f3ef 0%, #f6f7f4 260px, #f3f5f1 100%);
  }

  .home-hero{
    padding: 14px 0 10px;
  }

  .home-hero__panel{
    padding: 18px 18px 16px;
    border-radius: 18px;
    margin-bottom: 14px;
  }

  .home-hero__text{
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 14px;
    max-width: 900px;
  }

  .home-actions a{
    min-height: 52px;
    font-size: 17px;
    border-radius: 15px;
  }

  .home-title{
    font-size: 18px;
    padding: 15px 16px;
    border-radius: 15px;
  }

  .home-info-card{
    padding: 18px 18px 16px;
    border-radius: 18px;
  }

  .home-why h3{
    font-size: 19px;
  }

  .home-why li{
    font-size: 15px;
  }
}

/* ===== FILE: /assets/css/categories_grid.css ===== */
/* Универсальная сетка категорий с изображениями
   Цель:
   - аккуратно на мобиле
   - шрифт чуть крупнее и заметнее
   - "белая полоска снизу" не появляется, когда слева заголовок в 2 строки
   - однострочные НЕ становятся "как двухстрочные"
   - для главной страницы даём более выразительный контраст
*/

.cat-grid-visual{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 4px 0 8px;
  align-items: stretch;
}

@media (min-width: 768px){
  .cat-grid-visual{
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 12px 0 8px;
  }
}

/* Карточка */
.cat-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;

  background: #fff;
  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;

  height: 100%;
}

.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  border-color: rgba(79,106,95,.35);
}

/* Зона картинки */
.cat-card__img{
  background: #fff;
  padding: 12px 12px 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1 1 auto;
}

/* Внутренняя рамка картинки */
.cat-card__img-inner{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 128px;
}

/* Картинка */
.cat-card__img img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Плашка заголовка */
.cat-card__title{
  margin: 0;
  padding: 12px 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #4f6a5f;
  color: #fff;

  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Для длинных названий */
.cat-card.is-2l .cat-card__title{
  padding-top: 13px;
  padding-bottom: 13px;
}

/* Десктоп */
@media (min-width: 768px){
  .cat-card__img{
    padding: 14px 14px 10px;
  }

  .cat-card__img-inner{
    height: 136px;
  }

  .cat-card__title{
    padding: 13px 12px;
    font-size: 15px;
    line-height: 1.2;
  }

  .cat-card.is-2l .cat-card__title{
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* Мелкие экраны */
@media (max-width: 380px){
  .cat-card__img{
    padding: 10px 10px 6px;
  }

  .cat-card__img-inner{
    height: 112px;
  }

  .cat-card__title{
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.18;
  }

  .cat-card.is-2l .cat-card__title{
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* =========================================================
   HOME context
   На главной делаем карточки чуть выразительнее:
   - чуть теплее фон карточки
   - заметнее граница
   - глубже тень
   - заголовок контрастнее
   ========================================================= */

.cat-grid-visual--home{
  margin-top: 2px;
}

.cat-grid-visual--home .cat-card{
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%);
  border-color: rgba(56, 73, 66, .11);
  box-shadow:
    0 10px 24px rgba(24, 30, 27, .06),
    0 1px 0 rgba(255,255,255,.9) inset;
}

.cat-grid-visual--home .cat-card:hover{
  border-color: rgba(79,106,95,.40);
  box-shadow:
    0 14px 28px rgba(24, 30, 27, .10),
    0 1px 0 rgba(255,255,255,.95) inset;
}

.cat-grid-visual--home .cat-card__img{
  background:
    radial-gradient(circle at top, rgba(86, 115, 100, .04), rgba(255,255,255,0) 55%),
    #ffffff;
}

.cat-grid-visual--home .cat-card__title{
  background: linear-gradient(180deg, #567364 0%, #486257 100%);
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

@media (min-width: 768px){
  .cat-grid-visual--home{
    margin-top: 4px;
  }

  .cat-grid-visual--home .cat-card{
    border-radius: 16px;
  }
}

@media (max-width: 380px){
  .cat-grid-visual--home .cat-card{
    border-radius: 13px;
  }
}