/* ============================================================================
   Dom Garcia — редизайн (design system).
   Токены из Figma «web dgarciaxp&p»: шрифт Onest, тёплый белый #FBFAF8,
   акцент терракота #D27E6C.
   Подключается на страницах редизайна (пока — карточка товара).
   Наращивается инкрементами по мере переработки экранов.
   ============================================================================ */

:root {
  /* Шрифт */
  --dg-ff: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Цвета */
  --dg-bg:      #FBFAF8; /* тёплый белый — фон */
  --dg-surface: #FFFFFF;
  --dg-ink:     #111111; /* основной текст / лого */
  --dg-black:   #000000; /* кнопка «В корзину» */
  --dg-grey:    #2C2C2C; /* тёмно-серый (Каталог/корзина) */
  --dg-muted:   #808080; /* вторичный текст */
  --dg-muted-2: #A6A6A6;
  --dg-accent:  #D27E6C; /* терракота — акцент/бейджи/цена дизайнера */
  --dg-accent-ink: #FFFFFF;
  --dg-line:    rgba(0, 0, 0, 0.15); /* хайрлайн-границы */
  --dg-line-2:  #E3E2E1;

  /* Типо-шкала (Onest) */
  /* design review: H1 — десктоп 60px/600/110%, мобайл 32px/600/110%
                    H2 — десктоп 46px/500,      мобайл 26px/500 */
  --dg-h1: 600 clamp(32px, 4.17vw, 60px)/1.1 var(--dg-ff);
  --dg-h2: 500 clamp(26px, 3.2vw, 46px)/1.2 var(--dg-ff);
  --dg-price: 700 40px/1.4 var(--dg-ff); /* цена — своя шкала, не H2 */
  --dg-h3: 800 30px/1.2 var(--dg-ff);
  --dg-h4: 700 26px/1.4 var(--dg-ff);
  --dg-h5: 500 22px/1.4 var(--dg-ff);
  --dg-body: 400 16px/1.4 var(--dg-ff);
  --dg-body-sm: 400 14px/1.4 var(--dg-ff);
  --dg-caption: 500 13px/1.4 var(--dg-ff);

  /* Радиусы / формы */
  --dg-r-pill: 0;    /* №32: кнопки/поиск/плашки — острые углы, как в Figma (было 32px) */
  --dg-r-badge: 0;   /* было 24px */
  --dg-r-tab: 0;     /* было 4px */
  --dg-r-round: 9999px;

  /* Ритм */
  --dg-gap: 16px;
  --dg-pad-section: 64px;
  --dg-pad-x: 20px;
  --dg-maxw: 1312px;
}

/* ---------------------------------------------------------------------------
   ЭТАП 1 — язык дизайна на существующей карточке (без реструктуризации).
   Onest + тёплый белый фон + терракотовый акцент. Реструктуризация блоков —
   следующими инкрементами.
   --------------------------------------------------------------------------- */
body.single-product .product-page {
  font-family: var(--dg-ff);
  color: var(--dg-ink);
  background: var(--dg-bg);
}

body.single-product .product-page :is(h1, h2, h3, .sec-head__heading, .product-info__title, .acc-head, .tabs-bar button) {
  font-family: var(--dg-ff);
}

body.single-product .product-info__title {
  font: var(--dg-h1);
  letter-spacing: -0.01em;
  color: var(--dg-ink);
}

body.single-product .product-info__price-current {
  font: var(--dg-price);
  color: var(--dg-ink);
}

/* Терракотовый акцент вместо старого (скидка/бейдж «%»/активные табы). */
body.single-product .discount-note,
body.single-product .gallery__sale {
  color: var(--dg-accent);
}
body.single-product .gallery__sale {
  background: color-mix(in srgb, var(--dg-accent) 14%, #fff);
}

/* Первичная кнопка «В корзину» — чёрная, как в макете. */
body.single-product .buy-row .btn--primary,
body.single-product .single_add_to_cart_button {
  background: var(--dg-black);
  border-color: var(--dg-black);
  color: #fff;
}

/* ===========================================================================
   ИНКРЕМЕНТ 1 — верх карточки: .dg-pdp (галерея + блок покупки)
   =========================================================================== */
body.single-product .product-page__inner { max-width: var(--dg-maxw); }

.dg-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 24px 0 48px;
}
@media (max-width: 900px) { .dg-pdp { grid-template-columns: 1fr; gap: 28px; } }

/* Галерея */
.dg-gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 88px; }
@media (max-width: 900px) { .dg-gallery { position: static; } }
.dg-gallery__main {
  position: relative; aspect-ratio: 1 / 1; background: var(--dg-surface);
  border: 0.8px solid var(--dg-line); border-radius: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dg-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dg-gallery__disc { position: absolute; top: 16px; right: 16px; }
.dg-badge--sample { position: absolute; top: 16px; right: 16px; }
.dg-gallery__strip { position: relative; }
.dg-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; }
.dg-gallery__thumbs::-webkit-scrollbar { display: none; }
.dg-thumb {
  flex: 0 0 auto; width: 108px; height: 84px; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--dg-surface); border: 0.8px solid var(--dg-line); border-radius: 0; transition: border-color .15s;
}
.dg-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dg-thumb.is-active { border-color: var(--dg-ink); }
.dg-gallery__fade { position: absolute; top: 0; right: 40px; width: 60px; height: 84px; pointer-events: none; background: linear-gradient(90deg, rgba(251,250,248,0), var(--dg-bg)); }
.dg-gallery__next {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 40px; height: 40px;
  border: 0; background: none;
  color: var(--dg-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dg-gallery__next:hover { color: var(--dg-ink); }
.dg-gallery__next svg { width: 20px; height: 20px; }

/* Блок покупки */
.dg-buybox { display: flex; flex-direction: column; }
.dg-buybox form { display: flex; flex-direction: column; gap: 24px; }
.dg-buybox__head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 0.8px solid var(--dg-line); }
.dg-sku { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--dg-muted); font: var(--dg-caption); font-family: var(--dg-ff); }
.dg-sku svg { width: 16px; height: 16px; }
.dg-sku.is-copied { color: var(--dg-accent); }
.dg-title { font: var(--dg-h1); letter-spacing: -0.01em; color: var(--dg-ink); margin: 0; }
/* Замечание №27: без постоянного подчёркивания (серая линия читалась как разделитель
   строк заголовка) — ссылка проявляется цветом при наведении. */
.dg-title__link { color: inherit; text-decoration: none; border-bottom: 0; transition: color .15s; }
.dg-title__link:hover { color: var(--dg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.dg-props { margin: 12px 0 0; color: var(--dg-ink); font: var(--dg-body); font-family: var(--dg-ff); display: flex; flex-direction: column; gap: 3px; }
.dg-props__item { display: block; }
.dg-props__k { color: var(--dg-ink); }
.dg-taxo { margin: 0; display: flex; align-items: center; gap: 8px; font: var(--dg-body-sm); font-family: var(--dg-ff); }
.dg-taxo__link { color: var(--dg-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.dg-taxo__link:hover { color: var(--dg-accent); border-color: var(--dg-accent); }
.dg-taxo__sep { color: var(--dg-muted-2); }

.dg-option { display: flex; flex-direction: column; gap: 10px; }
.dg-option__label { font: var(--dg-body-sm); font-family: var(--dg-ff); color: var(--dg-muted); }
.dg-pills, .dg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-pill { min-width: 56px; padding: 8px 16px; border-radius: var(--dg-r-pill); background: var(--dg-surface); border: 1px solid var(--dg-line); color: var(--dg-ink); font: var(--dg-body-sm); font-family: var(--dg-ff); cursor: pointer; transition: .15s; }
.dg-pill.is-active { background: #1F1F1F; border-color: #1F1F1F; color: #fff; }
.dg-swatch { padding: 6px 14px; border-radius: var(--dg-r-pill); background: var(--dg-surface); border: 1px solid var(--dg-line); color: var(--dg-ink); font: var(--dg-body-sm); font-family: var(--dg-ff); cursor: pointer; }
.dg-swatch.is-active { border-color: var(--dg-ink); }

.dg-form { display: flex; flex-direction: column; gap: 20px; }
.dg-qty { display: flex; flex-direction: column; gap: 12px; }
.dg-tabs { display: inline-flex; gap: 24px; border-bottom: 1px solid var(--dg-line); }
.dg-tab { padding: 6px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--dg-muted); font: var(--dg-body-sm); font-family: var(--dg-ff); cursor: pointer; }
.dg-tab.is-active { background: none; color: var(--dg-ink); border-bottom-color: var(--dg-ink); }

/* Мега-меню (Каталог) — акцент/шрифт под DomGarcia (переопределяет theme.css) */
.pm-megamenu__item > a:hover, .pm-megamenu__item.is-active > a { color: var(--dg-accent); font-weight: 400; }
.pm-megamenu__col--l1 > .pm-megamenu__item > a { font-family: var(--dg-ff); font-size: 24px; line-height: 1.4; padding: 8px 0; }
.pm-megamenu__item--all > a { color: var(--dg-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.pm-megamenu__all-arrow { flex-shrink: 0; }
.dg-stepper { display: inline-flex; align-items: center; width: max-content; border: 1px solid var(--dg-line); border-radius: 0; overflow: hidden; }
.dg-stepper__btn { width: 44px; height: 44px; border: 0; background: var(--dg-surface); color: var(--dg-ink); font-size: 20px; cursor: pointer; }
.dg-stepper__input { width: 52px; height: 44px; border: 0; text-align: center; font: 600 16px/1 var(--dg-ff); background: var(--dg-surface); -moz-appearance: textfield; }
.dg-stepper__input::-webkit-outer-spin-button, .dg-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-pack-info { margin: 0; color: var(--dg-muted-2); font: var(--dg-body-sm); font-family: var(--dg-ff); }
.dg-pack-info span { display: block; }

.dg-price { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.dg-price__main { font: var(--dg-price); color: var(--dg-ink); }
.dg-price__old { font: var(--dg-body); font-family: var(--dg-ff); color: var(--dg-muted-2); text-decoration: line-through; }
.dg-price__promo { display: flex; flex-direction: column; gap: 6px; }
.dg-price__promo-val { font: var(--dg-h4); color: var(--dg-accent); }
.dg-price__unit { font: var(--dg-body); font-family: var(--dg-ff); color: var(--dg-muted-2); }

.dg-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--dg-r-badge); font: 600 12px/1.4 var(--dg-ff); }
.dg-badge--sample, .dg-badge--promo, .dg-badge--disc { background: var(--dg-accent); color: #fff; }

.dg-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; border-radius: 0; font: 600 16px/1 var(--dg-ff); cursor: pointer; border: 1px solid transparent; transition: .15s; }
.dg-btn--primary { background: var(--dg-black); color: #fff; flex: 1 1 220px; }
.dg-btn--primary:hover { background: #1a1a1a; }
.dg-btn--ghost { background: var(--dg-surface); border-color: var(--dg-line); color: var(--dg-ink); }
.dg-btn--ghost svg { width: 18px; height: 18px; }
.dg-btn--ghost.is-copied { border-color: var(--dg-accent); color: var(--dg-accent); }
.dg-fav { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 0; background: var(--dg-surface); border: 1px solid var(--dg-line); color: var(--dg-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dg-fav svg { width: 22px; height: 22px; }
.dg-fav.is-active { color: var(--dg-accent); }
.dg-fav.is-active svg { fill: var(--dg-accent); }

.dg-availability { border-top: 0.8px solid var(--dg-line); padding-top: 16px; }
.dg-availability__toggle { list-style: none; cursor: pointer; font: var(--dg-h5); color: var(--dg-ink); display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.dg-availability__toggle::-webkit-details-marker { display: none; }
.dg-availability__toggle::after { content: '→'; font-size: 18px; line-height: 1; color: var(--dg-ink); }
.dg-availability__body { padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.dg-avail-row { display: flex; justify-content: space-between; gap: 16px; font: var(--dg-body-sm); font-family: var(--dg-ff); }
.dg-avail-row__k { color: var(--dg-muted); }
.dg-avail-row__v { color: var(--dg-ink); text-align: right; }
.dg-availability__calc { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--dg-muted); text-decoration: none; font: var(--dg-body-sm); font-family: var(--dg-ff); transition: color .15s; }
.dg-availability__calc::after { content: '→'; }
.dg-availability__calc:hover { color: var(--dg-ink); }
.dg-availability__gate { margin: 0 0 12px; color: var(--dg-muted); font: var(--dg-body-sm); font-family: var(--dg-ff); }
/* flex:0 0 auto — гасим .dg-btn--primary{flex:1 1 220px}: в колоночном flex
   он растягивал кнопку по высоте до 220px (чёрный квадрат). */
.dg-availability__login { align-self: flex-start; flex: 0 0 auto; width: auto; }

/* «Смотрите также» — карточки коллекций */
.dg-related { max-width: var(--dg-maxw); margin: 0 auto; padding: 24px var(--dg-pad-x) 8px; font-family: var(--dg-ff); }
.dg-related__title { font: var(--dg-h2); font-family: var(--dg-ff); color: var(--dg-ink); margin: 0 0 28px; letter-spacing: -0.01em; }
/* Секция «Casawood рекомендует» лежит вне .product-page — даём тот же Onest-заголовок */
.single-product .section--bleed-right .sec-head__heading { font: var(--dg-h2); font-family: var(--dg-ff); color: var(--dg-ink); letter-spacing: -0.01em; }
/* Замечание №26: заголовок «Casawood рекомендует» — в той же сетке, что «Смотрите также»
   (контейнер 1312 + 20px, а не старая сетка .section с отступом 80px). */
.single-product .section--bleed-right { padding-left: 0; padding-right: 0; }
.single-product .section--bleed-right > .container { max-width: var(--dg-maxw); margin: 0 auto; padding: 0 var(--dg-pad-x); }
.single-product .section--bleed-right .sec-head { margin-bottom: 28px; }
@media (max-width: 767px) {
  .single-product .section--bleed-right .product-slider { margin-right: calc(-1 * var(--dg-pad-x)); }
}
.dg-collgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dg-collcard { display: flex; flex-direction: column; border: 0.8px solid var(--dg-line); text-decoration: none; background: var(--dg-surface); transition: border-color .15s; }
.dg-collcard:hover { border-color: var(--dg-ink); }
.dg-collcard__img { display: block; aspect-ratio: 16 / 7; background: #C9C7C4; background-size: cover; background-position: center; }
.dg-collcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.dg-collcard__name { font: var(--dg-h5); font-family: var(--dg-ff); color: var(--dg-ink); }
.dg-collcard__arr { color: var(--dg-ink); font-size: 18px; line-height: 1; flex: 0 0 auto; }
@media (max-width: 900px) { .dg-collgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dg-collgrid { grid-template-columns: 1fr; } }

/* Минимальные карточки в слайдере «Dom Garcia рекомендует» */
.product-slider .dg-card { flex: 0 0 clamp(220px, 22vw, 300px); }

/* ===========================================================================
   ИНКРЕМЕНТ 2 — аккордеон характеристик (.dg-specs)
   =========================================================================== */
.dg-specs { max-width: var(--dg-maxw); margin: 8px 0 56px; }
.dg-acc { border-top: 0.8px solid var(--dg-line); }
.dg-acc:last-child { border-bottom: 0.8px solid var(--dg-line); }
.dg-acc__sum { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; justify-content: flex-start; font: var(--dg-h5); color: var(--dg-ink); }
.dg-acc__sum::-webkit-details-marker { display: none; }
/* design review: расстояние между символом и текстом меньше (было 100px). */
.dg-acc__sum::before { content: '+'; flex: 0 0 auto; box-sizing: border-box; width: 40px; padding-left: 20px; font: 400 26px/1 var(--dg-ff); color: var(--dg-ink); }
.dg-acc[open] .dg-acc__sum::before { content: '−'; }
/* design review: текст открытой карточки прижат к левому краю (было 100px). */
.dg-acc__body { padding: 0 0 28px 20px; color: var(--dg-ink); font: var(--dg-body); font-family: var(--dg-ff); max-width: 1060px; }
.dg-acc__body p { margin: 0 0 12px; }
.dg-acc__body p:last-child { margin-bottom: 0; }
.dg-acc__muted { color: var(--dg-muted); }
.dg-specs-table { display: flex; flex-direction: column; gap: 12px; }
.dg-specs-row { display: flex; align-items: baseline; gap: 8px; font: var(--dg-body-sm); font-family: var(--dg-ff); }
.dg-specs-row__k { color: var(--dg-muted); white-space: nowrap; }
.dg-specs-row__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--dg-line-2); transform: translateY(-3px); min-width: 24px; }
.dg-specs-row__v { color: var(--dg-ink); text-align: right; }
.dg-3d iframe, .dg-3d model-viewer, .dg-3d video { width: 100%; min-height: 420px; border: 0; display: block; }

/* ===========================================================================
   ШАПКА — дизайн-язык DomGarcia (Onest + терракотовый акцент).
   Глобально (dg.css грузится на всех страницах), но scoped на .navbar —
   фон страниц НЕ меняем.
   =========================================================================== */
.navbar { font-family: var(--dg-ff); background: var(--dg-bg); }
.navbar__inner { max-width: var(--dg-maxw); margin: 0 auto; }
.navbar__main { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 var(--dg-pad-x); }
.navbar__logo { flex: 0 0 auto; }
.navbar__catalog { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; background: var(--dg-grey); color: #fff; border-radius: 0; text-decoration: none; font: var(--dg-body-sm); font-family: var(--dg-ff); }
.navbar__catalog svg { width: 20px; height: 20px; }
.navbar__catalog:hover { background: var(--dg-ink); color: #fff; }
.navbar__search { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--dg-grey); border-radius: 0; background: var(--dg-surface); max-width: 620px; }
.navbar__search svg { width: 20px; height: 20px; color: var(--dg-muted-2); flex: 0 0 auto; }
.navbar__search input { flex: 1 1 auto; border: 0; background: none; font: var(--dg-body-sm); font-family: var(--dg-ff); color: var(--dg-ink); outline: none; min-width: 0; }
.navbar__search input::placeholder { color: var(--dg-muted-2); }
.navbar__nav { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; }
.navbar__nav a { color: var(--dg-ink); text-decoration: none; font: var(--dg-body-sm); font-family: var(--dg-ff); transition: color .15s; }
.navbar__nav a:hover { color: var(--dg-accent); }
.navbar__right { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.navbar__login { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--dg-grey); color: #fff; border-radius: 0; text-decoration: none; font: var(--dg-body-sm); font-family: var(--dg-ff); }
.navbar__login svg { width: 20px; height: 20px; }
.navbar__login:hover { background: var(--dg-ink); color: #fff; }
.navbar__cart { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--dg-grey); background: var(--dg-grey); color: #fff; }
.navbar__cart svg { width: 20px; height: 20px; }
.navbar__cart:hover { background: #000; border-color: #000; }
.navbar__cart .pm-cart-link__count { top: 2px; right: 2px; }
.navbar__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; background: var(--dg-line); color: var(--dg-muted); text-decoration: none; }
.navbar__avatar svg { width: 24px; height: 24px; }
.navbar__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.navbar .pm-cart-link__count { background: var(--dg-accent); color: #fff; }

/* ABC-указатель брендов */
.dg-abc { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; max-width: var(--dg-maxw); margin: 0 auto; min-height: 40px; padding: 6px var(--dg-pad-x); border-top: 0.8px solid var(--dg-line); border-bottom: 0.8px solid var(--dg-line); }
.dg-abc a { color: var(--dg-ink); text-decoration: none; font: var(--dg-caption); font-family: var(--dg-ff); font-weight: 400; padding: 4px 6px; border-radius: 0; transition: .15s; }
.dg-abc a:hover { color: var(--dg-accent); }
.dg-abc__letter.is-active { color: var(--dg-accent); font-weight: 600; }
.dg-abc__letter.is-empty { color: var(--dg-muted-2); opacity: .4; pointer-events: none; }
.pm-brands-abc { flex-wrap: wrap; padding: 8px var(--dg-pad-x) 20px; border-top: 0; }
.dg-abc__range span { color: var(--dg-muted-2); margin: 0 3px; }

/* ===========================================================================
   КАТАЛОГ (архив товаров) — DomGarcia. Приведение к макетам «Фильтр» / «Список
   товаров»: полноширинный, открытый обрамлённый ряд колонок фильтров, липкий бар
   «Фильтры» с выпадением по ховеру, минимальные карточки, сетка-таблица.
   =========================================================================== */
.dg-catalog { font-family: var(--dg-ff); }
.dg-catalog__inner { max-width: none; margin: 0; padding: 0 0 56px; }
body.woocommerce .catalog-head, body.archive .catalog-head { display: none; } /* старый заголовок → dg-cat-head */

/* Заголовок категории + табы подкатегорий */
.dg-cat-head { padding: 64px var(--dg-pad-x) 6px; } /* design review: верхний padding 64px */
.dg-cat-head__crumbs { font: var(--dg-body-sm); font-family: var(--dg-ff); color: var(--dg-muted-2); margin-bottom: 14px; }
.dg-cat-head__crumbs a { color: var(--dg-muted); text-decoration: none; }
.dg-cat-head__crumbs a:hover { color: var(--dg-ink); }
/* Замечание (мобильная версия): заголовок был жёстко 64px и упирался в край
   экрана — мобильное правило в woocommerce.css целилось в старый класс
   .catalog-head h1 и не срабатывало. */
.dg-cat-head__title { font: var(--dg-h1); color: var(--dg-ink); letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.dg-cat-head__brand { display: flex; align-items: flex-start; gap: 20px; margin-top: 16px; }
.dg-cat-head__logo { max-width: 160px; max-height: 64px; object-fit: contain; flex: 0 0 auto; }
.dg-cat-head__desc { color: var(--dg-muted); font: var(--dg-body); font-family: var(--dg-ff); max-width: 720px; }
.dg-cat-head__desc p { margin: 0 0 8px; }
.dg-subtabs { display: flex; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.dg-subtab { display: inline-flex; align-items: center; padding: 2px 18px; color: var(--dg-muted); text-decoration: none; font: var(--dg-body); font-family: var(--dg-ff); border-left: 0.8px solid var(--dg-line); line-height: 1.2; }
.dg-subtab:first-child { padding-left: 0; border-left: 0; }
.dg-subtab:hover { color: var(--dg-ink); }
.dg-subtab.is-active { color: var(--dg-ink); text-decoration: underline; text-underline-offset: 5px; }

/* --- Липкий бар «Фильтры» + выпадающая панель по ховеру --- */
.dg-filterwrap { position: relative; margin-top: 18px; }
.dg-filter-sticky { display: none; }
.dg-filterwrap.is-stuck .dg-filter-sticky {
  display: flex; align-items: center; gap: 10px; position: fixed; top: var(--dg-navh, 0px); left: 0; right: 0; z-index: 90;
  height: 50px; padding: 0 var(--dg-pad-x); background: var(--dg-bg); border-bottom: 0.8px solid var(--dg-line);
  font: 600 18px/1 var(--dg-ff); color: var(--dg-ink); cursor: pointer;
}
.dg-filter-sticky__chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.dg-filter-backdrop { position: fixed; inset: 0; background: rgba(17,17,17,.3); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 55; }
.dg-filter-backdrop.is-on { opacity: 1; pointer-events: auto; }
/* Пока открыто боковое окно (параметр/бренд): нейтрализуем transform липкой панели
   (иначе position:fixed окна считается от неё и смещается), держим окна кликабельными,
   бэкдроп поднимаем над панелью — он становится барьером и ловит клик «закрыть». */
body.dg-drawer-open .dg-filterwrap.is-stuck .dg-filter-panel { transform: none !important; pointer-events: auto !important; }
body.dg-drawer-open .dg-filter-backdrop.is-on { z-index: 65; }
.dg-fblock--overflow.is-open, .dg-brandpanel.is-open { pointer-events: auto; }

/* Панель фильтров — открытый обрамлённый ряд колонок.
   Группы держим в ОДИН РЯД (не переносим); если не умещаются — горизонтальный скролл. */
.dg-filter-panel { display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; background: var(--dg-bg); scrollbar-width: thin; }

/* Заголовок фильтров + кнопка ручного сворачивания «−/+» (Figma filter-accordion) */
.dg-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--dg-pad-x); border-top: 0.8px solid var(--dg-line); border-bottom: 0.8px solid var(--dg-line); }
.dg-filter-head__title { font: 600 15px/1.2 var(--dg-ff); color: var(--dg-ink); }
.dg-filter-toggle { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--dg-ink); }
.dg-filter-toggle:hover { color: var(--dg-accent); }
.dg-filter-toggle__ico { position: relative; width: 16px; height: 16px; display: inline-block; }
.dg-filter-toggle__ico::before, .dg-filter-toggle__ico::after { content: ""; position: absolute; background: currentColor; }
.dg-filter-toggle__ico::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }        /* горизонталь — всегда (−) */
.dg-filter-toggle__ico::after  { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; opacity: 0; transition: opacity .15s; } /* вертикаль — только в свёрнутом (+) */
.dg-filterwrap.is-collapsed .dg-filter-toggle__ico::after { opacity: 1; }
.dg-filterwrap.is-collapsed .dg-filter-panel { display: none; }
/* В прилипшем состоянии показываем только липкий бар «Фильтры» — заголовок-аккордеон
   прячем, чтобы «Фильтры» не двоилось и не мерцало на границе. */
.dg-filterwrap.is-stuck .dg-filter-head { display: none; }
.dg-filterwrap.is-stuck .dg-filter-panel {
  position: fixed; top: calc(var(--dg-navh, 0px) + 50px); left: 0; right: 0; z-index: 89; flex-wrap: nowrap; overflow-x: auto;
  transform: translateY(-115%); transition: transform .3s ease; pointer-events: none;
  border-bottom: 0.8px solid var(--dg-line); /* design review: убрать жирную обводку при раскрытии */
}
.dg-filterwrap.is-stuck.is-peek .dg-filter-panel { transform: translateY(0); pointer-events: auto; }
.dg-fcol { flex: 1 1 200px; min-width: 180px; max-width: 400px; padding: 24px var(--dg-pad-x); display: flex; flex-direction: column; gap: 24px;
  border-right: 0.8px solid var(--dg-line); border-bottom: 0.8px solid var(--dg-line); }
.dg-fcol--wide  { flex-basis: 400px; max-width: 460px; }
.dg-fcol--shape { flex-basis: 180px; max-width: 200px; }
.dg-fcol--spacer { flex: 1 1 auto; max-width: none; min-width: 0; padding: 0; } /* компенсатор при <5 колонок */
.dg-fblock__title { font: 600 14px/1.4 var(--dg-ff); color: var(--dg-ink); margin: 0 0 14px; }
@media (max-width: 900px) {
  /* Мобильный: колонки складываем вертикально (без нижнего скролла) */
  .dg-filter-panel { flex-wrap: wrap; overflow-x: visible; }
  .dg-fcol, .dg-fcol--wide, .dg-fcol--shape { flex-basis: 100%; max-width: none; max-height: none; }
  .dg-fcol--spacer { display: none; }
}

/* Диапазон (Цена / Размер / Толщина): От/До с подчёркиванием */
.dg-frange { display: flex; align-items: flex-end; gap: 18px; }
.dg-frange input { width: 100%; min-width: 0; height: 30px; padding: 0 2px 4px; border: 0; border-bottom: 1px solid var(--dg-line);
  background: none; font: 400 12px/1.4 var(--dg-ff); color: var(--dg-ink); }
.dg-frange input::placeholder { color: var(--dg-muted-2); }
.dg-frange input:focus { outline: none; border-bottom-color: var(--dg-ink); }
/* №16: «Размер» — ширина/длина от–до над тегами размеров */
.dg-fsize { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.dg-fsize__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: end; gap: 10px; }
.dg-fsize__lbl { font: 400 12px/1.4 var(--dg-ff); color: var(--dg-muted); padding-bottom: 5px; white-space: nowrap; }
.dg-fblock--overflow.is-open .dg-fsize { display: none; }

/* Чек-список (Наличие) — простой текстовый список без квадратов */
.dg-flist { display: flex; flex-direction: column; gap: 10px; }
.dg-flist label { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; font: 400 12px/1.4 var(--dg-ff); color: var(--dg-muted); transition: color .15s; }
.dg-flist input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-flist label:hover { color: var(--dg-ink); }
.dg-flist input:checked ~ span, .dg-flist label:has(input:checked) { color: var(--dg-ink); text-decoration: underline; text-underline-offset: 4px; }
.dg-flist .count { color: var(--dg-muted-2); font-size: 12px; }

/* Облако тегов (Фактура/Формат/Материал/Страна) — простые слова, перенос */
.dg-fcloud { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dg-fcloud label { cursor: pointer; font: 400 12px/1.4 var(--dg-ff); color: var(--dg-muted); transition: color .15s; }
.dg-fcloud input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-fcloud label:hover { color: var(--dg-ink); }
.dg-fcloud label:has(input:checked) { color: var(--dg-ink); text-decoration: underline; text-underline-offset: 4px; }

/* Цвет — точка + название, в 2 колонки */
.dg-fcolors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.dg-fcolors label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 400 12px/1.4 var(--dg-ff); color: var(--dg-ink); }
.dg-fcolors input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-fcolors .dg-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto; transition: box-shadow .15s; }
.dg-fcolors label:has(input:checked) .dg-dot { box-shadow: 0 0 0 2px var(--dg-bg), 0 0 0 3.5px var(--dg-ink); }
.dg-fcolors label:has(input:checked) { font-weight: 600; }

/* Форма — сетка иконок-контуров, заливка при выборе */
.dg-fshapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dg-fshapes label { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dg-fshapes input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-fshapes svg { width: 34px; height: 26px; }
.dg-fshapes svg [data-shape] { fill: none; stroke: var(--dg-ink); stroke-width: 1.4; transition: fill .15s; }
.dg-fshapes label:has(input:checked) svg [data-shape] { fill: var(--dg-ink); }

/* Параметр со «слишком многими» значениями: превью + «+» → боковое окно (как Бренд) */
.dg-fclose, .dg-fsearch, .dg-fapply { display: none; }
/* «Показать» скрыт в превью: перебиваем .dg-filter-panel .dg-btn (0,2,0) специфичностью (0,4,0). */
.dg-filter-panel .dg-fblock--overflow:not(.is-open) .dg-fapply { display: none; }
.dg-fmore { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--dg-accent); font: 400 12px/1.4 var(--dg-ff); cursor: pointer; }
.dg-fmore:hover { color: var(--dg-ink); text-decoration: underline; }
/* Превью: показываем только первые 8 значений (топ по числу товаров), остальное — «ещё» → окно */
.dg-fblock--overflow:not(.is-open) .dg-fcloud label:nth-child(n+9),
.dg-fblock--overflow:not(.is-open) .dg-flist label:nth-child(n+9),
.dg-fblock--overflow:not(.is-open) .dg-fcolors label:nth-child(n+9) { display: none; }

.dg-fblock--overflow.is-open { position: fixed; top: var(--dg-navh, 0px); left: 0; bottom: 0; width: 340px; max-width: 86vw; z-index: 70;
  margin: 0; padding: 24px 20px; background: var(--dg-bg); border-right: 0.8px solid var(--dg-line); box-shadow: 30px 0 60px rgba(17,17,17,.12);
  display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.dg-fblock--overflow.is-open .dg-fblock__title { display: flex; align-items: center; justify-content: space-between; font: 600 20px/1.2 var(--dg-ff); margin: 0; }
.dg-fblock--overflow.is-open .dg-fclose { display: inline-flex; background: none; border: 0; padding: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--dg-ink); }
.dg-fblock--overflow.is-open .dg-fsearch { display: block; }
.dg-fblock--overflow.is-open .dg-fsearch input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--dg-line); border-radius: 0; font: 400 14px/1 var(--dg-ff); font-family: var(--dg-ff); }
.dg-fblock--overflow.is-open .dg-fcloud, .dg-fblock--overflow.is-open .dg-flist, .dg-fblock--overflow.is-open .dg-fcolors { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.dg-fblock--overflow.is-open .dg-fcloud { flex-direction: column; flex-wrap: nowrap; align-content: flex-start; gap: 0; }
.dg-fblock--overflow.is-open .dg-fcolors { grid-template-columns: 1fr; gap: 0; }
.dg-fblock--overflow.is-open .dg-fcloud label, .dg-fblock--overflow.is-open .dg-flist label, .dg-fblock--overflow.is-open .dg-fcolors label { font-size: 14px; padding: 8px 0; border-bottom: 0.8px solid var(--dg-line); }
.dg-fblock--overflow.is-open label[hidden] { display: none; }
/* Длинный список подгружается по «ещё» (?pm_fvals) */
.dg-fblock--overflow.is-open.is-loading .dg-fcloud::after,
.dg-fblock--overflow.is-open.is-loading .dg-flist::after { content: 'Загрузка…'; display: block; padding: 12px 0; font: 400 14px/1.4 var(--dg-ff); color: var(--dg-muted-2); }
.dg-fblock--overflow.is-open.is-load-error:not(.is-loading) .dg-fcloud::after { content: 'Не удалось загрузить список — откройте ещё раз'; display: block; padding: 12px 0; font: 400 13px/1.4 var(--dg-ff); color: var(--dg-accent); }
.dg-fblock--overflow.is-open .dg-fmore { display: none; }
/* «Показать» закреплён внизу окна, фикс. высота — не «плавает» (задача №35) */
.dg-fblock--overflow.is-open .dg-fapply { display: inline-flex; flex: 0 0 auto; width: 100%; height: 44px; margin: 4px 0 0; }

/* Бренд — заголовок с количеством + шеврон, открывает левое окно */
.dg-fbrand { margin-top: auto; }
.dg-fbrand__toggle { display: flex; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--dg-line); padding: 0 0 8px; cursor: pointer; font: 600 14px/1.4 var(--dg-ff); color: var(--dg-ink); }
.dg-fbrand__count { color: var(--dg-muted-2); font-weight: 400; margin-left: 6px; }
.dg-fbrand__chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* Левое окно выбора брендов */
.dg-brandpanel { position: fixed; top: var(--dg-navh, 0px); left: 0; bottom: 0; width: 340px; max-width: 86vw; z-index: 70; background: var(--dg-bg);
  border-right: 0.8px solid var(--dg-line); box-shadow: 30px 0 60px rgba(17,17,17,.12); transform: translateX(-102%); transition: transform .3s ease;
  display: flex; flex-direction: column; padding: 24px 20px; }
.dg-brandpanel[hidden] { display: none; }
.dg-brandpanel.is-open { transform: translateX(0); }
.dg-brandpanel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dg-brandpanel__title { font: 600 20px/1.2 var(--dg-ff); color: var(--dg-ink); }
.dg-brandpanel__close { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--dg-ink); }
.dg-brandpanel__search input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--dg-line); border-radius: 0; font: var(--dg-body); font-family: var(--dg-ff); margin-bottom: 12px; }
.dg-brandpanel__selected { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dg-brandpanel__selected:empty { display: none; }
/* Шапка/поиск закреплены сверху, прокручивается только список брендов —
   иначе на невысоком экране поиск уезжал за верхний край панели. */
.dg-brandpanel__head, .dg-brandpanel__chips, .dg-brandpanel__search { flex: 0 0 auto; }
.dg-brandpanel__list { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dg-brandpanel__list label { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; font: var(--dg-body); font-family: var(--dg-ff); color: var(--dg-ink); border-bottom: 0.8px solid var(--dg-line); }
.dg-brandpanel__list label[hidden] { display: none; }
.dg-brandpanel__list .count { color: var(--dg-muted-2); font-size: 12px; margin-left: auto; }
.dg-brandpanel__apply { margin-top: 14px; }

/* Кнопки применить/сбросить (fallback без JS — скрыты когда JS активен) */
.dg-filter-actions { flex: 1 1 100%; display: flex; gap: 12px; padding: 14px var(--dg-pad-x); border-bottom: 0.8px solid var(--dg-line); }
.dg-filter-panel[data-js] .dg-filter-actions { display: none; }
.dg-filter-panel .dg-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: var(--dg-r-pill); font: 600 15px/1 var(--dg-ff); text-decoration: none; cursor: pointer; border: 1px solid var(--dg-line); background: var(--dg-surface); color: var(--dg-ink); }
.dg-filter-panel .dg-btn--primary { background: var(--dg-grey); border-color: var(--dg-grey); color: #fff; }
.dg-filter-panel .dg-btn--ghost { background: none; }

/* Чипы применённых фильтров — тёмные пилюли */
.dg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--dg-pad-x) 4px; }
.dg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--dg-r-pill); background: var(--dg-grey); color: #fff; text-decoration: none; font: var(--dg-body-sm); font-family: var(--dg-ff); transition: .15s; }
.dg-chip__x { font-size: 16px; line-height: 1; opacity: .85; }
.dg-chip:hover { background: var(--dg-ink); }
.dg-chip--reset { background: none; color: var(--dg-muted); border: 1px solid var(--dg-line); }
.dg-chip--reset:hover { background: none; border-color: var(--dg-ink); color: var(--dg-ink); }

/* Тулбар: количество · сорт · вид (справа) */
.dg-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; padding: 16px var(--dg-pad-x); }
.dg-toolbar__count { color: var(--dg-muted); font: var(--dg-body-sm); font-family: var(--dg-ff); margin-right: auto; }
.dg-toolbar__count b { color: var(--dg-ink); }
.dg-sort { display: inline-flex; gap: 20px; }
.dg-sort__tab { display: inline-flex; align-items: center; gap: 5px; color: var(--dg-muted); text-decoration: none; font: var(--dg-body); font-family: var(--dg-ff); transition: .15s; }
.dg-sort__tab .dg-sort__ar { font-size: 12px; }
.dg-sort__tab:hover { color: var(--dg-ink); }
.dg-sort__tab.is-active { color: var(--dg-ink); }
.dg-view { display: inline-flex; gap: 8px; }
.dg-view__btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--dg-muted-2); cursor: pointer; }
.dg-view__btn svg { width: 22px; height: 22px; }
.dg-view__btn.is-active { color: var(--dg-ink); }

/* Сетка-таблица: полноширинная, hairline-разделители, без боковых отступов */
.dg-grid { display: grid; gap: 0; border-top: 0.8px solid var(--dg-line); border-left: 0.8px solid var(--dg-line); }
.dg-grid--large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dg-grid--small { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .dg-grid--large { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dg-grid--small { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .dg-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dg-grid--small { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* minmax(0,1fr): иначе трек не сжимается ниже min-content карточки и на мобиле
   вторая колонка уезжала за экран (211px*2 = 423px при ширине 390px). */
@media (max-width: 560px)  { .dg-grid--large, .dg-grid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Минимальная карточка: фото по центру, название 2 строки, серая спека, цена «от … /м²» */
.dg-card { position: relative; display: flex; flex-direction: column; border-right: 0.8px solid var(--dg-line); border-bottom: 0.8px solid var(--dg-line); background: var(--dg-bg); }
.dg-card__image { display: block; aspect-ratio: 1 / 1; padding: 26px; background-size: contain; background-position: center; background-repeat: no-repeat; background-origin: content-box; }
.dg-card__body { padding: 0 20px 26px; display: flex; flex-direction: column; gap: 8px; }
.dg-card__name { margin: 0; font: 600 17px/1.35 var(--dg-ff); color: var(--dg-ink); min-height: calc(2 * 1.35em);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-card__name a { color: inherit; text-decoration: none; }
.dg-card__name a:hover { text-decoration: underline; }
.dg-card__spec { font: var(--dg-body-sm); font-family: var(--dg-ff); color: var(--dg-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-card__price { font: 700 19px/1.3 var(--dg-ff); color: var(--dg-ink); display: flex; align-items: baseline; gap: 6px; }
.dg-card__price b { color: var(--dg-ink); font-weight: 700; }
.dg-card__unit { font-size: 12px; font-weight: 400; color: var(--dg-muted-2); }
.dg-card__badge { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: var(--dg-r-pill); background: var(--dg-grey); color: #fff; font: var(--dg-caption); font-family: var(--dg-ff); }
.dg-grid .dg-card:hover .dg-card__image { opacity: .92; transition: opacity .2s; }

/* Индикатор бесконечной ленты */
.dg-feed-status { padding: 28px var(--dg-pad-x); text-align: center; color: var(--dg-muted); font: var(--dg-body-sm); font-family: var(--dg-ff); }
.dg-feed-status[hidden] { display: none; }

/* ============================================================================
   ЭТАП — Полноэкранный поиск (Figma search-page).
   Слева сетка товаров, справа панель: поле + подсказки + категории(↗) + бренды.
   ============================================================================ */
.pm-search-overlay.dg-search { background: var(--dg-bg); font-family: var(--dg-ff); color: var(--dg-ink); }

.dg-search__close {
  position: absolute; top: 22px; left: 28px; z-index: 2;
  width: 40px; height: 40px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font: 300 34px/1 var(--dg-ff); color: var(--dg-ink);
  display: grid; place-items: center; transition: color .2s;
}
.dg-search__close:hover { color: var(--dg-accent); }

.dg-search__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
  gap: 0 56px;
  padding: 64px 40px 48px;
  min-height: 100%;
  align-items: start;
}

/* --- Левая колонка: сетка товаров --- */
.dg-search__results { min-width: 0; }
.dg-search-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 0.8px solid var(--dg-line);
  border-left: 0.8px solid var(--dg-line);
}
.dg-search-card {
  display: flex; flex-direction: column;
  border-right: 0.8px solid var(--dg-line);
  border-bottom: 0.8px solid var(--dg-line);
  padding: 0 0 18px; color: var(--dg-ink); text-decoration: none;
  transition: background .15s;
}
.dg-search-card:hover { background: var(--dg-surface); }
/* №56 / замечание №25: миниатюры в основном портретные — в боксе 16:10 с серой
   подложкой они превращались в узкую полоску посреди серого прямоугольника
   («картинки съезжают»). Бокс квадратный, как в каталоге, без подложки. */
.dg-search-card__media {
  display: block; aspect-ratio: 1 / 1; margin: 18px 18px 14px;
  background: transparent center/contain no-repeat;
}
.dg-search-card__title {
  padding: 0 18px; margin-bottom: 4px;
  font: 500 13px/1.35 var(--dg-ff); color: var(--dg-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dg-search-card__spec {
  padding: 0 18px; margin-bottom: 10px;
  font: 400 12px/1.3 var(--dg-ff); color: var(--dg-muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dg-search-card__price {
  padding: 0 18px; margin-top: auto;
  font: 700 14px/1.3 var(--dg-ff); color: var(--dg-ink);
}
.dg-search-card__price .amount, .dg-search-card__price bdi { white-space: nowrap; }
.dg-search-card__price del { color: var(--dg-muted-2); font-weight: 400; margin-right: 5px; }
.dg-search-card__price ins { text-decoration: none; color: var(--dg-accent); }

.dg-search__all {
  display: inline-block; margin-top: 20px;
  font: 500 14px/1.4 var(--dg-ff); color: var(--dg-accent); text-decoration: none;
}
.dg-search__all:hover { text-decoration: underline; }
.dg-search__empty {
  padding: 40px 4px; color: var(--dg-muted);
  font: 400 15px/1.4 var(--dg-ff);
}

/* --- Правая панель --- */
.dg-search__panel { min-width: 0; }
.dg-search__form {
  display: flex; align-items: center; gap: 12px;
  padding: 0 2px 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--dg-ink);
}
.dg-search__icon { flex: 0 0 auto; color: var(--dg-muted); display: grid; place-items: center; }
.dg-search__form input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: 400 16px/1.4 var(--dg-ff); color: var(--dg-ink);
}
.dg-search__form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.dg-search__form input[type="search"]::placeholder { color: var(--dg-muted); }

.dg-search__suggest { display: flex; flex-direction: column; }
.dg-search__suggest-item {
  padding: 8px 0;
  font: 400 15px/1.4 var(--dg-ff); color: var(--dg-ink); text-decoration: none;
}
.dg-search__suggest-item:hover { color: var(--dg-accent); }

.dg-search__group { display: flex; flex-direction: column; }
.dg-search__group:not(:empty) { margin-top: 26px; }
.dg-search__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 0;
  font: 600 15px/1.4 var(--dg-ff); color: var(--dg-ink); text-decoration: none;
}
.dg-search__link:hover { color: var(--dg-accent); }
.dg-search__arrow { font-weight: 400; font-size: 13px; }
/* №40: категории, найденные среди товаров выборки — тонкая точка-акцент */
.dg-search__link--in-results::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dg-accent); opacity: .7; flex: 0 0 auto; }

/* Табличная сетка на узких — 3/2 колонки, панель над товарами */
@media (max-width: 1100px) { .dg-search-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .dg-search__grid { grid-template-columns: 1fr; gap: 32px; padding: 60px 20px 40px; }
  .dg-search__panel { order: -1; }
}
@media (max-width: 560px) { .dg-search-cards { grid-template-columns: repeat(2, 1fr); } }

/* ---- Окно «Бренд»: чипы + буквенные группы, 2 колонки, тёмная пилюля выбранного (Figma «Фильтр — бренд») ---- */
.dg-brandpanel__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dg-brandpanel__chips[hidden] { display: none; }
.dg-brandpanel__chips .dg-chip { border: 0; cursor: pointer; font-family: var(--dg-ff); }
.dg-brandpanel__chips .dg-chip--reset { border: 1px solid var(--dg-line); }

/* Скрываем нативный чекбокс — выбор показываем тёмной пилюлей */
.dg-brandpanel__list input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-brandpanel__list { gap: 0; }
.dg-brandpanel__group { margin-bottom: 18px; }
.dg-brandpanel__group[hidden] { display: none; }
.dg-brandpanel__letter { font: 700 15px/1.2 var(--dg-ff); color: var(--dg-ink); margin: 0 0 8px; }
/* Замечание: список брендов — в одну колонку, по алфавиту. */
.dg-brandpanel__cols { display: grid; grid-template-columns: 1fr; gap: 2px; }
.dg-brandpanel__list .dg-brandpanel__cols label { display: inline-flex; align-items: center; padding: 5px 0; border-bottom: 0; font: 400 14px/1.3 var(--dg-ff); color: var(--dg-ink); }
/* 11.11.2026: поиск в окне брендов прятал только целые буквенные группы — правило выше
   (та же специфичность, ниже по файлу) перебивало label[hidden]{display:none}. */
.dg-brandpanel__list .dg-brandpanel__cols label[hidden] { display: none; }
.dg-brandpanel__name { display: inline-block; padding: 4px 0; transition: background .15s, color .15s; }
.dg-brandpanel__list label:has(input:checked) .dg-brandpanel__name {
  background: var(--dg-grey); color: #fff; border-radius: var(--dg-r-pill); padding: 4px 14px;
}
.dg-brandpanel__list label:hover .dg-brandpanel__name { color: var(--dg-accent); }
.dg-brandpanel__list label:has(input:checked):hover .dg-brandpanel__name { color: #fff; }

/* ============================================================================
   Страница результатов поиска (Figma «search-page / обычные результаты»):
   title-block «Результаты: <запрос>» + 2 колонки (сетка + панель).
   Панель переиспользует классы .dg-search__* оверлея.
   ============================================================================ */
.dg-sresults { padding: 40px var(--dg-pad-x) 64px; }
.dg-sresults__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 0 56px;
  align-items: start;
}
.dg-sresults__main { min-width: 0; }
.dg-sresults__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.dg-sresults__label { font: 400 15px/1.2 var(--dg-ff); color: var(--dg-muted); }
.dg-sresults__query {
  font: 700 clamp(32px, 4vw, 46px)/1.1 var(--dg-ff); color: var(--dg-ink);
  letter-spacing: -0.01em; text-decoration: none; align-self: flex-start;
  border-bottom: 2px solid transparent; transition: border-color .15s;
}
.dg-sresults__query:hover { border-bottom-color: var(--dg-ink); }
.dg-sresults__count { margin-top: 10px; font: 400 14px/1.4 var(--dg-ff); color: var(--dg-muted); }

/* правая панель */
.dg-sresults__panel { min-width: 0; position: sticky; top: 20px; }
.dg-sresults__form {
  display: flex; align-items: center; gap: 12px;
  padding: 0 2px 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--dg-ink);
}
.dg-sresults__form .dg-search__icon { flex: 0 0 auto; color: var(--dg-muted); display: grid; place-items: center; }
.dg-sresults__form input[type="search"] {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 16px/1.4 var(--dg-ff); color: var(--dg-ink);
}
.dg-sresults__form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.dg-sresults__form input[type="search"]::placeholder { color: var(--dg-muted); }
.dg-sresults__go { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--dg-ink); padding: 0 2px; }
.dg-sresults__go:hover { color: var(--dg-accent); }

/* Пагинация страницы результатов */
.dg-sresults .pagination, .dg-sresults nav.pagination { margin-top: 28px; }
.dg-sresults .pm-search-empty { padding: 24px 0; }

@media (max-width: 960px) {
  .dg-sresults__grid { grid-template-columns: 1fr; gap: 32px; }
  .dg-sresults__panel { order: -1; position: static; }
}

/* Активная категория в панели результатов поиска (выбрана через pm_scat) */
.dg-search__link.is-active { color: var(--dg-accent); font-weight: 700; }

/* Чип запроса на странице результатов поиска в каталоге (№41): клик — открыть окно поиска, × — очистить */
.dg-search-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 8px 6px 16px; border: 1px solid var(--dg-line); border-radius: var(--dg-r-pill); }
.dg-search-chip__q { font: 600 15px/1.2 var(--dg-ff); color: var(--dg-ink); text-decoration: none; cursor: pointer; }
.dg-search-chip__q:hover { color: var(--dg-accent); }
.dg-search-chip__x { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dg-line-2); color: var(--dg-ink); text-decoration: none; font-size: 16px; line-height: 1; }
.dg-search-chip__x:hover { background: var(--dg-ink); color: #fff; }

/* ============================================================================
   Футер Casawood (Figma «footer», задача №18) — тёмный, 4 колонки + вордмарк.
   ============================================================================ */
.dg-footer { background: #171717; color: #fff; font-family: var(--dg-ff); padding: 56px var(--dg-pad-x) 28px; }
.dg-footer__inner { max-width: var(--dg-maxw); margin: 0 auto; }
.dg-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.dg-footer__h { font: 500 15px/1.4 var(--dg-ff); color: rgba(255,255,255,.5); margin: 0 0 20px; }
.dg-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dg-footer__link { color: rgba(255,255,255,.85); text-decoration: none; font: 400 15px/1.4 var(--dg-ff); transition: color .15s; }
.dg-footer__link:hover { color: #fff; }
.dg-footer__link--all { font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.dg-footer__contacts .dg-footer__link { display: block; margin-bottom: 14px; }
.dg-footer__addr { color: rgba(255,255,255,.5); font: 400 15px/1.5 var(--dg-ff); margin: 0 0 20px; max-width: 240px; }
.dg-footer__socials { display: flex; gap: 18px; margin-top: 8px; }
.dg-footer__socials a { color: rgba(255,255,255,.7); transition: color .15s; }
.dg-footer__socials a:hover { color: #fff; }
.dg-footer__socials svg { width: 22px; height: 22px; }
.dg-footer__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 48px; flex-wrap: wrap; }
/* Вордмарк DOM GARCIA шире прежнего CASAWOOD: минимум 48px — чтобы на 360–375px влезал в одну строку. */
.dg-footer__wordmark { font: 800 clamp(48px, 11vw, 150px)/0.85 var(--dg-ff); letter-spacing: -0.02em; color: #fff; }
.dg-footer__legal { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: rgba(255,255,255,.45); font: 400 13px/1.5 var(--dg-ff); padding-bottom: 10px; }
.dg-footer__legal a { color: rgba(255,255,255,.45); text-decoration: underline; text-underline-offset: 3px; }
.dg-footer__legal a:hover { color: #fff; }
@media (max-width: 900px) {
  .dg-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .dg-footer__bottom { flex-direction: column; align-items: flex-start; }
  .dg-footer__legal { padding-bottom: 0; }
}
@media (max-width: 560px) { .dg-footer__cols { grid-template-columns: 1fr; } }
@media (max-width: 359px) { .dg-footer__wordmark { font-size: 40px; } }

/* ============================================================================
   ГЛАВНАЯ Casawood (Figma «Home / main», задача №8)
   ============================================================================ */
.dg-hero { background: #1c1c1c; color: #fff; font-family: var(--dg-ff);
  background-image: linear-gradient(100deg, #1c1c1c 26%, rgba(28,28,28,.6) 56%, rgba(28,28,28,.2) 100%), url('../images/hero-bg.jpg');
  background-size: cover; background-position: center right; }
.dg-hero__inner { max-width: var(--dg-maxw); margin: 0 auto; padding: 56px var(--dg-pad-x) 64px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.dg-hero__eyebrow { display: inline-block; font: 500 14px/1.4 var(--dg-ff); color: rgba(255,255,255,.6); margin-bottom: 20px; }
.dg-hero__title { font: var(--dg-h1); color: #fff; letter-spacing: -0.01em; margin: 0 0 28px; max-width: 620px; }
.dg-hero__title span { color: rgba(255,255,255,.5); } /* макет: вторая часть заголовка приглушена, как в блоке для дизайнеров */
.dg-hero__search { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px; height: 54px; padding: 0 22px; border: 0; border-radius: var(--dg-r-pill); background: #fff; cursor: text; text-align: left; font-family: var(--dg-ff); }
.dg-hero__search svg { color: var(--dg-ink); flex: 0 0 auto; }
.dg-hero__search span { color: var(--dg-muted); font: 400 16px/1 var(--dg-ff); }
.dg-hero__sub { font: 400 16px/1.5 var(--dg-ff); color: rgba(255,255,255,.7); margin: 22px 0 28px; max-width: 380px; }
.dg-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.dg-hero__cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dg-hero__cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 0; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; text-decoration: none; font: 500 15px/1.2 var(--dg-ff); transition: background .15s, border-color .15s; }
.dg-hero__cat:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.dg-hero__cat-arr { color: rgba(255,255,255,.55); }

/* Главная: тёмная шапка на hero (задача №8, Figma «Home / main»).
   Пока body.dg-navdark (сервер ставит сразу, main.js снимает при прокрутке
   ниже hero) — шапка сливается с тёмным верхом hero. Только desktop; на
   мобиле остаётся обычная светлая шапка над hero. */
@media (min-width: 768px) {
  body.dg-home .navbar,
  body.dg-home .navbar__main,
  body.dg-home .navbar__logo-text { transition: color .3s ease; }
  body.dg-home.dg-navdark .navbar,
  body.dg-home.dg-navdark .navbar__main { background: #1c1c1c; box-shadow: none; }
  body.dg-home.dg-navdark .navbar__logo-text { color: #fff; }
  /* «Каталог» — светлая пилюля (как в макете) */
  body.dg-home.dg-navdark .navbar__catalog { background: #fff; color: #1c1c1c; }
  body.dg-home.dg-navdark .navbar__catalog:hover { background: rgba(255,255,255,.86); color: #1c1c1c; }
  /* Пункты меню — белым */
  body.dg-home.dg-navdark .navbar__nav a { color: #fff; }
  body.dg-home.dg-navdark .navbar__nav a:hover { color: var(--dg-accent); }
  /* «Войти» — контурная пилюля */
  body.dg-home.dg-navdark .navbar__login { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; }
  body.dg-home.dg-navdark .navbar__login:hover { background: rgba(255,255,255,.1); color: #fff; }
  /* Корзина — контурная */
  body.dg-home.dg-navdark .navbar__cart { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
  body.dg-home.dg-navdark .navbar__cart:hover { background: rgba(255,255,255,.1); border-color: #fff; }
  /* Поиск в шапке — полупрозрачный на тёмном */
  body.dg-home.dg-navdark .navbar__search { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
  body.dg-home.dg-navdark .navbar__search svg { color: rgba(255,255,255,.7); }
  body.dg-home.dg-navdark .navbar__search input { color: #fff; }
  body.dg-home.dg-navdark .navbar__search input::placeholder { color: rgba(255,255,255,.6); }
  /* ABC-указатель брендов — приглушённо-белый, тонкие линии */
  body.dg-home.dg-navdark .dg-abc { border-top-color: rgba(255,255,255,.12); border-bottom-color: rgba(255,255,255,.12); }
  body.dg-home.dg-navdark .dg-abc a { color: rgba(255,255,255,.55); }
  body.dg-home.dg-navdark .dg-abc a:hover { color: #fff; }
  body.dg-home.dg-navdark .dg-abc__range span { color: rgba(255,255,255,.4); }
  /* hero вплотную к шапке — единый тёмный верх без светлого шва */
  body.dg-home .pm-main { margin-top: 0; }
  body.dg-home .dg-hero { margin-top: 0; }
}

.dg-btn-lg { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--dg-r-pill); font: 600 15px/1 var(--dg-ff); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: .15s; }
.dg-btn-lg--light { background: #fff; color: var(--dg-ink); }
.dg-btn-lg--light:hover { background: var(--dg-accent); color: #fff; }
.dg-btn-lg--ghost, .dg-btn-lg--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.dg-btn-lg--ghost:hover, .dg-btn-lg--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.dg-sec-title { font: var(--dg-h2); color: var(--dg-ink); margin: 0; letter-spacing: -0.01em; }
.dg-sec-all { font: 500 15px/1.2 var(--dg-ff); color: var(--dg-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dg-sec-all:hover { color: var(--dg-accent); }

.dg-home-cats { max-width: var(--dg-maxw); margin: 0 auto; padding: 56px var(--dg-pad-x); }
.dg-home-cats__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.dg-home-cats__track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.dg-cat-card { flex: 0 0 220px; text-decoration: none; color: var(--dg-ink); }
.dg-cat-card__media { display: block; aspect-ratio: 4 / 3; border-radius: 0; background: var(--dg-line-2) center/cover no-repeat; margin-bottom: 12px; }
.dg-cat-card__name { font: 500 16px/1.3 var(--dg-ff); }

.dg-features { max-width: var(--dg-maxw); margin: 0 auto; padding: 40px var(--dg-pad-x) 56px; }
.dg-features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 44px; }
.dg-features__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.dg-features__list li { display: flex; align-items: baseline; gap: 16px; font: 600 clamp(22px,2.4vw,30px)/1.2 var(--dg-ff); color: var(--dg-ink); }
.dg-features__num { font: 400 14px/1 var(--dg-ff); color: var(--dg-muted); min-width: 22px; }
.dg-features__lead { font: 400 17px/1.5 var(--dg-ff); color: var(--dg-muted); max-width: 460px; margin: 6px 0 0; }
/* Замечания №20/№22: одинаковые ячейки с разделителями, цифра и подпись по центру. */
.dg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 0.8px solid var(--dg-line); border-left: 0.8px solid var(--dg-line); padding-top: 0; }
.dg-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 32px 16px; border-right: 0.8px solid var(--dg-line); border-bottom: 0.8px solid var(--dg-line); }
.dg-stat__num { font: 700 clamp(30px,4vw,48px)/1 var(--dg-ff); color: var(--dg-ink); }
.dg-stat__num--accent { color: var(--dg-accent); }
.dg-stat__cap { font: 400 14px/1.4 var(--dg-ff); color: var(--dg-muted); }

.dg-designer-cta { background: #1c1c1c; color: #fff; }
.dg-designer-cta__inner { max-width: var(--dg-maxw); margin: 0 auto; padding: 56px var(--dg-pad-x); }
.dg-designer-cta__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 40px; border-bottom: 0.8px solid rgba(255,255,255,.15); }
.dg-designer-cta__lead { font: 400 16px/1.5 var(--dg-ff); color: rgba(255,255,255,.75); max-width: 520px; margin: 0; }
.dg-designer-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dg-designer-cta__title { font: var(--dg-h1); color: #fff; margin: 36px 0 0; letter-spacing: -0.01em; }
.dg-designer-cta__title span { color: rgba(255,255,255,.5); }

.dg-home-rec { max-width: var(--dg-maxw); margin: 0 auto; padding: 56px var(--dg-pad-x); }
.dg-home-rec__grid { margin-top: 28px; }

@media (max-width: 900px) {
  .dg-hero__inner, .dg-features__grid { grid-template-columns: 1fr; gap: 32px; }
  .dg-hero__cats { grid-template-columns: 1fr; }
  .dg-stats { grid-template-columns: 1fr 1fr; }
}

/* Лента брендов на главной */
.dg-brandstrip { max-width: var(--dg-maxw); margin: 0 auto; padding: 32px var(--dg-pad-x); border-bottom: 0.8px solid var(--dg-line); }
.dg-brandstrip__track { display: flex; align-items: center; gap: 44px; overflow-x: auto; scrollbar-width: none; }
.dg-brandstrip__track::-webkit-scrollbar { display: none; }
.dg-brandstrip__item { flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; color: var(--dg-muted); text-decoration: none; font: 600 16px/1 var(--dg-ff); opacity: .8; transition: opacity .15s, color .15s; }
.dg-brandstrip__item:hover { opacity: 1; color: var(--dg-ink); }
.dg-brandstrip__item img { max-height: 30px; max-width: 120px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; }
.dg-brandstrip__item:hover img { filter: none; opacity: 1; }


/* Мобильная версия каталога: компактнее шапка категории. */
@media (max-width: 767px) {
  .dg-cat-head { padding: 20px var(--dg-pad-x) 6px; }
  /* 11.11.2026 (замечание №7, мобильная): логотип бренда — над описанием, а не рядом
     (описание в узкой колонке вылезало за экран: на 320px — на 58px). */
  .dg-cat-head__brand { flex-direction: column; gap: 12px; }
  .dg-cat-head__logo { max-width: 140px; max-height: 56px; }
  /* Подкатегории — горизонтальная лента без переноса: при переносе разделитель
     (левая граница пункта) оказывался в начале второй строки. */
  .dg-subtabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-right: calc(-1 * var(--dg-pad-x)); padding-right: var(--dg-pad-x);
  }
  .dg-subtabs::-webkit-scrollbar { display: none; }
  .dg-subtab { flex: 0 0 auto; white-space: nowrap; }
}
.dg-cat-head__desc { min-width: 0; }

/* Карточки не должны раздувать грид-трек (длинные названия). */
.dg-grid > * { min-width: 0; }


/* ============================================================================
   Карточка каталога: избранное + корзина (design review)
   Десктоп — появляются на ховере, мобайл — видны всегда.
   После добавления кнопка корзины гаснет (opacity) и появляется степпер.
   ========================================================================== */
.dg-card__media { position: relative; }
.dg-card__fav, .dg-card__cart {
  position: absolute; z-index: 2; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, background .15s, color .15s;
}
.dg-card__fav  { top: 12px; right: 12px; background: rgba(255,255,255,.92); color: var(--dg-ink); }
.dg-card__fav:hover { background: #fff; }
.dg-card__fav.is-active { color: var(--dg-accent); opacity: 1; transform: none; } /* в избранном — видно и без ховера */
.dg-card__fav.is-active svg { fill: currentColor; }
.dg-card__cart { right: 12px; bottom: 12px; background: var(--dg-grey); color: #fff; }
.dg-card__cart:hover { background: #000; }
.dg-card__fav svg, .dg-card__cart svg { width: 20px; height: 20px; }
.dg-card:hover .dg-card__fav, .dg-card:hover .dg-card__cart,
.dg-card:focus-within .dg-card__fav, .dg-card:focus-within .dg-card__cart { opacity: 1; transform: none; }
.dg-card.is-added .dg-card__cart { opacity: 0; pointer-events: none; }

.dg-card__qty {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--dg-grey); color: #fff; border-radius: var(--dg-r-pill);
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
}
.dg-card__qty[hidden] { display: none; }
.dg-card.is-added .dg-card__qty { opacity: 1; transform: none; }
.dg-card__qty button { width: 28px; height: 28px; border: 0; padding: 0; background: none; color: #fff; font: 600 16px/1 var(--dg-ff); cursor: pointer; border-radius: 50%; }
.dg-card__qty button:hover { background: rgba(255,255,255,.16); }
.dg-card__qty span { min-width: 22px; text-align: center; font: 600 14px/1 var(--dg-ff); }

@media (max-width: 767px) {
  /* На тач-устройствах ховера нет — кнопки всегда видимы (как в макете). */
  .dg-card__fav, .dg-card__cart { opacity: 1; transform: none; }
}


/* ============================================================================
   Навбар по design review:
   - убрать белую заливку (фон страницы), убрать боковые отступы,
   - убрать зазор между навбаром и алфавитным баром,
   - поиск в шапке — только иконка (поле в оверлее),
   - на мобиле название магазина по центру, «игнорируя лейаут».
   ========================================================================== */
/* design review: высота навбара 54px, между ним и алфавитным баром зазора нет,
   обводки алфавитного бара упираются в край экрана. */
.navbar { background: var(--dg-bg); padding: 0; }
.navbar__main { background: transparent; padding: 0 var(--dg-pad-x); height: 54px; min-height: 54px; }
.navbar__inner { gap: 0; max-width: none; }
/* align-self:stretch + margin:0 — иначе в flex-колонке навбара auto-margin
   центрировал бар по ширине контента и обводки не доходили до краёв. */
.dg-abc { max-width: none; margin: 0; align-self: stretch; }

.navbar__searchbtn {
  flex: 0 0 auto; margin-right: auto; width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--dg-muted);
  transition: color .15s;
}
.navbar__searchbtn:hover { color: var(--dg-ink); }
.navbar__searchbtn svg { width: 22px; height: 22px; }
body.dg-home.dg-navdark .navbar__searchbtn { color: rgba(255,255,255,.75); }
body.dg-home.dg-navdark .navbar__searchbtn:hover { color: #fff; }

@media (max-width: 767px) {
  /* Лого строго по центру шапки независимо от ширины боковых групп. */
  .navbar__main { position: relative; }
  .navbar__logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    margin: 0; z-index: 1;
  }
  .navbar__burger, .navbar__actions-mobile { position: relative; z-index: 2; }
}


/* ============================================================================
   Мобильная главная по макету (design review / mobile Main)
   ========================================================================== */

/* Стрелка в поле поиска hero */
.dg-hero__search-arr { margin-left: auto; color: var(--dg-ink); font-size: 18px; line-height: 1; }

/* Блок доверия («более 10к человек доверяют нам») в тёмном CTA */
.dg-trust { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.dg-trust__avatars { display: inline-flex; flex: 0 0 auto; }
.dg-trust__avatars i {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #1c1c1c; background: linear-gradient(135deg, #a3937f, #d8c3a5);
}
.dg-trust__avatars i + i { margin-left: -11px; }
.dg-trust__avatars i:nth-child(2) { background: linear-gradient(135deg, #6f6357, #b9a894); }
.dg-trust__avatars i:nth-child(3) { background: linear-gradient(135deg, #8d7c6a, #c9b6a0); }
.dg-trust__text { font: 400 14px/1.4 var(--dg-ff); color: rgba(255,255,255,.75); }

@media (max-width: 767px) {
  /* Hero: в макете порядок иной — поиск, подзаголовок, eyebrow, H1, кнопки. */
  .dg-hero__left { display: flex; flex-direction: column; }
  .dg-hero__search  { order: 1; width: 100%; max-width: none; margin: 0 0 18px; }
  .dg-hero__sub     { order: 2; max-width: none; margin: 0 0 120px; }
  .dg-hero__eyebrow { order: 3; margin-bottom: 10px; }
  .dg-hero__title   { order: 4; margin-bottom: 24px; }
  .dg-hero__cta     { order: 5; flex-direction: column; align-items: stretch; }
  .dg-hero__cta .dg-btn-lg { width: 100%; justify-content: center; }
  .dg-hero__inner { padding: 20px var(--dg-pad-x) 32px; }
  /* Макет мобильной главной: разделы — блоком «Категории» ниже, не списком в hero (было дважды, +600px). */
  .dg-hero__right { display: none; }

  /* Товарные ряды главной — горизонтальные слайдеры. */
  .dg-home-rec__grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    border-left: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .dg-home-rec__grid::-webkit-scrollbar { display: none; }
  .dg-home-rec__grid > .dg-card { flex: 0 0 62%; scroll-snap-align: start; }

  /* Секции главной — базовый отступ 20px, заголовки не жмутся. */
  .dg-home-cats, .dg-features, .dg-home-rec { padding-left: var(--dg-pad-x); padding-right: var(--dg-pad-x); }
  .dg-home-rec__grid, .dg-home-cats__track { margin-left: calc(-1 * var(--dg-pad-x)); margin-right: calc(-1 * var(--dg-pad-x)); }
}


/* design review: диагональные стрелки были «дохленькие» — делаем плотнее,
   и сокращаем зазор между символом и текстом. */
.dg-hero__cat-arr, .dg-hero__search-arr,
.dg-sec-all span, .dg-btn-lg span,
.dg-footer__link--all span, .dg-search__arrow {
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1;
}
.dg-sec-all { gap: 4px; }
.dg-btn-lg  { gap: 5px; }
.dg-search__link { gap: 4px; }


/* Логотип — текстовый вордмарк DOM GARCIA (по design review). */
.navbar__logo { text-decoration: none; }
.navbar__logo-text {
  display: inline-block; white-space: nowrap;
  font: 800 22px/1 var(--dg-ff);
  letter-spacing: 0.01em;
  color: var(--dg-ink);
}
@media (max-width: 767px) {
  .navbar__logo-text { font-size: 18px; }
}
/* Узкие экраны (320px): «DOM GARCIA» на 18px налезает на иконку поиска. */
@media (max-width: 374px) {
  .navbar__logo-text { font-size: 15px; }
}


/* design review: строка «Фильтры» кликабельна целиком. */
.dg-filter-head { cursor: pointer; user-select: none; }

/* design review: «скачут кнопки добавления в корзину — разная высота».
   Приводим все кнопки к единой геометрии: одинаковый border-box у чёрной и
   контурной (у чёрной обводка была прозрачной, но занимала место непостоянно). */
.dg-btn, .dg-btn-lg { box-sizing: border-box; border-width: 1px; border-style: solid; }
.dg-btn--primary, .dg-btn-lg--light { border-color: transparent; }
.dg-filter-panel .dg-btn { box-sizing: border-box; height: 42px; border-width: 1px; border-style: solid; }


/* №35: хлебные крошки в шапке каталога — ссылка на уровень выше. */
.dg-cat-head__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dg-cat-head__crumbs-sep { color: var(--dg-line-2, rgba(0,0,0,.25)); }
.dg-cat-head__crumbs-cur { color: var(--dg-muted-2); }


/* design review (мобайл): фото товара — во всю ширину экрана, без боковых отступов. */
@media (max-width: 767px) {
  .dg-gallery {
    margin-left: calc(-1 * var(--dg-pad-x));
    margin-right: calc(-1 * var(--dg-pad-x));
    width: auto;
  }
}


/* design review: у галереи убрать стрелки — остаётся только полоса-слайдер. */
.dg-gallery__next, .dg-gallery__fade { display: none; }

/* design review: мобильная шапка карточки товара — только «назад» и «поделиться»
   (крошки на мобиле прячем, они остаются на десктопе). */
.dg-pdp-mobbar { display: none; }
@media (max-width: 767px) {
  .dg-pdp-mobbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 0 12px;
  }
  .product-page .breadcrumbs { display: none; }
  .dg-pdp-mobbar__btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 0;
    border: 0; background: none; cursor: pointer;
    font: 500 15px/1 var(--dg-ff); color: var(--dg-ink);
  }
  .dg-pdp-mobbar__btn svg { width: 20px; height: 20px; }
  .dg-pdp-mobbar__btn--icon { padding: 8px; }
}


/* №58: цена «По запросу» (нулевая цена) — в карточке и на странице товара. */
.dg-card__onrequest { font: 600 15px/1.3 var(--dg-ff); color: var(--dg-muted); }
.dg-price__onrequest { font: 600 22px/1.2 var(--dg-ff); color: var(--dg-muted); }


/* Замечание №21: иконки людей вместо кругов в блоке доверия. */
.dg-trust__avatars i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); background: #1c1c1c; color: rgba(255,255,255,.85);
}
.dg-trust__avatars i svg { width: 16px; height: 16px; }
.dg-trust__avatars i:nth-child(2) { background: #2a2a2a; }

/* Замечание №24: иконки «пользователь» и «корзина» в одном стиле, без плашек, ближе. */
.navbar__right.only-desktop { gap: 8px; }
.navbar__login, .navbar__cart {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--dg-ink); display: inline-flex; align-items: center; justify-content: center;
}
.navbar__login:hover, .navbar__cart:hover { background: rgba(0,0,0,.06); color: var(--dg-ink); }
.navbar__login svg, .navbar__cart svg { width: 22px; height: 22px; }
body.dg-home.dg-navdark .navbar__login, body.dg-home.dg-navdark .navbar__cart { color: #fff; background: none; border: 0; }
body.dg-home.dg-navdark .navbar__login:hover, body.dg-home.dg-navdark .navbar__cart:hover { background: rgba(255,255,255,.12); }

/* Замечание №38: «Каталог» теперь кнопка — сброс дефолтов button. */
button.navbar__catalog { font-family: var(--dg-ff); cursor: pointer; }

/* Замечание №29: категория в карточке — ссылка. */
.dg-card__cat { font: var(--dg-body-sm); font-family: var(--dg-ff); }
.dg-card__cat a { color: var(--dg-muted-2); text-decoration: none; }
.dg-card__cat a:hover { color: var(--dg-accent); text-decoration: underline; text-underline-offset: 3px; }


/* Замечание №35: «пустая плашка под футером» на коротких страницах —
   прижимаем футер к низу окна (flex-колонка на body). */
body { min-height: 100vh; display: flex; flex-direction: column; }
main.pm-main { flex: 1 0 auto; width: 100%; }
.dg-footer { flex: 0 0 auto; }

/* Замечания №33/№34: контентные страницы — крошки, заголовок и текст слева. */
.dg-page { max-width: var(--dg-maxw); margin: 0 auto; padding: 24px var(--dg-pad-x) 80px; font-family: var(--dg-ff); }
.dg-page__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--dg-body-sm); font-family: var(--dg-ff); color: var(--dg-muted-2); margin-bottom: 14px; }
.dg-page__crumbs a { color: var(--dg-muted); text-decoration: none; }
.dg-page__crumbs a:hover { color: var(--dg-ink); }
.dg-page__crumbs-sep { color: var(--dg-line-2, rgba(0,0,0,.25)); }
.dg-page__title { font: var(--dg-h1); font-family: var(--dg-ff); letter-spacing: -0.01em; color: var(--dg-ink); margin: 0 0 32px; text-align: left; }
.dg-page .page-content { max-width: 880px; margin: 0; padding: 0; background: transparent; font: var(--dg-body); font-family: var(--dg-ff); color: var(--dg-grey); text-align: left; }
.dg-page .page-content > * + * { margin-top: 16px; }
.dg-page .page-content h2 { font: 500 clamp(24px, 2.4vw, 32px)/1.25 var(--dg-ff); letter-spacing: -0.01em; color: var(--dg-ink); margin-top: 40px; }
.dg-page .page-content h3 { font: 500 22px/1.3 var(--dg-ff); color: var(--dg-ink); margin-top: 28px; }
.dg-page .page-content h4 { font: 500 18px/1.35 var(--dg-ff); color: var(--dg-ink); margin-top: 24px; }
.dg-page .page-content p, .dg-page .page-content li { font: var(--dg-body); font-family: var(--dg-ff); color: var(--dg-grey); }
.dg-page .page-content a { color: var(--dg-ink); text-decoration: underline; text-underline-offset: 2px; }
.dg-page .page-content a:hover { color: var(--dg-accent); }
/* №33: телефоны — чёрным, без подчёркивания. */
.dg-page .page-content a[href^="tel:"] { color: var(--dg-ink); text-decoration: none; }
.dg-page .page-content img { max-width: 100%; height: auto; }
.dg-page .page-content table { border-collapse: collapse; width: 100%; }
.dg-page .page-content th, .dg-page .page-content td { border-bottom: 0.8px solid var(--dg-line); padding: 10px 12px; text-align: left; vertical-align: top; }
@media (max-width: 767px) {
  .dg-page { padding: 16px var(--dg-pad-x) 48px; }
  .dg-page__title { margin-bottom: 20px; }
}

/* Замечание №15: плавающие кнопки «наверх» и «связаться» (десктоп и мобилка). */
.dg-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: var(--dg-ff); }
.dg-fab__btn { width: 48px; height: 48px; border-radius: 50%; border: 0.8px solid var(--dg-line); background: var(--dg-surface); color: var(--dg-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 6px 20px rgba(0,0,0,.12); transition: background .15s, color .15s, transform .15s, opacity .2s; }
.dg-fab__btn svg { width: 22px; height: 22px; }
.dg-fab__btn:hover { background: var(--dg-ink); color: #fff; border-color: var(--dg-ink); }
.dg-fab__btn--contact { background: var(--dg-ink); color: #fff; border-color: var(--dg-ink); }
.dg-fab__btn--contact:hover { background: var(--dg-grey); }
.dg-fab__btn--contact .dg-fab__ico-close { display: none; }
.dg-fab.is-open .dg-fab__btn--contact .dg-fab__ico-open { display: none; }
.dg-fab.is-open .dg-fab__btn--contact .dg-fab__ico-close { display: block; }
.dg-fab__btn[hidden] { display: none; }
.dg-fab__menu { display: flex; flex-direction: column; gap: 6px; min-width: 200px; padding: 8px; background: var(--dg-surface); border: 0.8px solid var(--dg-line); border-radius: 0; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.dg-fab__menu[hidden] { display: none; }
.dg-fab__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 0; color: var(--dg-ink); text-decoration: none; font: var(--dg-body-sm); font-family: var(--dg-ff); }
.dg-fab__item:hover { background: rgba(0,0,0,.05); }
.dg-fab__ico { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f1efec; color: var(--dg-ink); flex: 0 0 auto; }
.dg-fab__ico svg { width: 16px; height: 16px; }
.dg-fab__item--tg .dg-fab__ico { background: #e7f3fb; color: #2aabee; }
.dg-fab__item--wa .dg-fab__ico { background: #e6f7ee; color: #25d366; }
.dg-fab__item--max .dg-fab__ico { background: #ecebff; color: #5b4bd6; }
.dg-fab__label { white-space: nowrap; }
@media (max-width: 767px) {
  .dg-fab { right: 12px; bottom: 16px; gap: 8px; }
  .dg-fab__btn { width: 44px; height: 44px; }
}

/* Замечание №11: стартовое состояние окна поиска. */
.dg-search__hint { max-width: 420px; font: var(--dg-body); font-family: var(--dg-ff); color: var(--dg-muted); padding-top: 8px; }
.dg-search__glabel { display: block; font: 500 12px/1.4 var(--dg-ff); letter-spacing: .06em; text-transform: uppercase; color: var(--dg-muted-2); margin-bottom: 10px; }

/* ==========================================================================
   Замечание №32 (11.11): единая форма кнопок, полей и плашек — острые углы,
   как в макете Figma. Токены --dg-r-* (в начале файла) + радиусы старой
   дизайн-системы PersonaMarket (theme.css / woocommerce.css: корзина,
   оформление, ЛК). Круглыми остаются иконки-кнопки (♥ и корзина в карточке,
   чат) и счётчики.
   ========================================================================== */
:root { --radius-pill: 0; --pm-radius-sm: 0; --pm-radius-md: 0; --pm-radius-lg: 0; --pm-radius-pill: 0; }
.brand-card, .tabs, .tabs button, .bonus-mark, .chip,
.pm-account__chip, .bonus-pill, .tag-pill, .pm-view-order__status,
.pm-checkout-errors, .pm-checkout-notice, input.bonus-card__value, .pay-card__extra { border-radius: 0; }

/* ==========================================================================
   Главная, «Комплектуете объект?» — коллаж образцов материалов (Figma, 11.11).
   Телефон/планшет — под кнопками, прижат к правому краю и низу блока;
   десктоп — справа на всю высоту блока. Фото — Customizer «Главная: блок
   «Комплектуете объект?»» (pm_dg_cta_collage).
   ========================================================================== */
.dg-designer-cta { overflow: hidden; }
.dg-designer-cta__inner { position: relative; }
.dg-cta-collage {
  position: relative; width: min(78%, 420px); aspect-ratio: 1 / 1;
  margin: 28px calc(-1 * var(--dg-pad-x)) -56px auto;
}
.dg-cta-collage__p { position: absolute; display: block; object-fit: cover; background: #2a2a2a; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.dg-cta-collage__p--1 { left: 38.6%; top: 0;     width: 40%; height: 40.6%; z-index: 3; }
.dg-cta-collage__p--2 { left: 82%;   top: 11.8%; width: 18%; height: 30%;   z-index: 2; }
.dg-cta-collage__p--3 { left: 0;     top: 33.5%; width: 46%; height: 45%;   z-index: 1; }
.dg-cta-collage__p--4 { left: 50.9%; top: 44%;   width: 29%; height: 51.6%; z-index: 2; }
.dg-cta-collage__p--5 { left: 82%;   top: 45%;   width: 18%; height: 55%;   z-index: 2; }
.dg-cta-collage__p--6 { left: 30.4%; top: 69.3%; width: 31%; height: 30.7%; z-index: 4; }
.dg-cta-collage__p--7 { left: 14.4%; top: 83%;   width: 15%; height: 17%;   z-index: 2; }
@media (min-width: 1024px) {
  .dg-designer-cta__inner { padding-right: calc(var(--dg-pad-x) + min(34vw, 480px) + 32px); min-height: calc(min(34vw, 480px) + 56px); }
  .dg-cta-collage { position: absolute; right: 0; bottom: 0; width: min(34vw, 480px); margin: 0; }
}

@media (max-width: 767px) {
  /* Мобильная главная по макету (11.11). «Категории» — плитка 2+3 с картинками,
     «Все категории» — под плиткой; лента (как на десктопе) — только шире 767px. */
  .dg-home-cats { display: flex; flex-direction: column; }
  .dg-home-cats__head { order: 2; justify-content: flex-end; margin: 16px 0 0; }
  .dg-home-cats__head .dg-sec-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dg-home-cats__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; overflow: visible; padding-bottom: 0; border-top: 0.8px solid var(--dg-line); }
  .dg-cat-card { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; min-height: 150px; padding: 12px 12px 0; border-right: 0.8px solid var(--dg-line); border-bottom: 0.8px solid var(--dg-line); overflow: hidden; }
  .dg-cat-card:nth-child(-n+2) { grid-column: span 3; }
  .dg-cat-card:nth-child(2), .dg-cat-card:nth-child(5) { border-right: 0; }
  .dg-cat-card:nth-child(n+6) { display: none; }
  .dg-cat-card__name { order: -1; font: 400 14px/1.25 var(--dg-ff); margin-bottom: 10px; }
  .dg-cat-card__media { width: 74%; aspect-ratio: 1 / 1; margin: auto -12px 0 auto; }

  /* «Комплектуете объект?»: заголовок → текст → кнопки во всю ширину → коллаж. */
  .dg-designer-cta__inner { display: flex; flex-direction: column; }
  .dg-designer-cta__title { order: 1; margin: 0 0 24px; }
  .dg-designer-cta__body { order: 2; flex-direction: column; align-items: stretch; padding-bottom: 0; border-bottom: 0; }
  .dg-cta-collage { order: 3; }
  .dg-designer-cta__actions { flex-direction: column; }
  .dg-designer-cta__actions .dg-btn-lg { width: 100%; justify-content: center; }
}