/* css/blocks/182-lead-block.css */
/* =================== lead-block.css =================== */
/* lead-block — final CTA "Нужна консультация по проекту?". Used on /about,
 * /contacts, /delivery as the closing conversion block. Premium two-column
 * card: editorial copy on the left, phone-input + manager CTA + Telegram
 * pill on the right. Ink-tinted card so it stands out from the cream page
 * background. Strictly .lead-block / .lead-block__*. */

.lead-block {
  padding: clamp(44px, 5vw, 72px) 0;
}

.lead-block__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
  padding: clamp(36px, 3.6vw, 56px) clamp(28px, 3.2vw, 64px);
  background:
    radial-gradient(900px 540px at 0% 0%, rgba(var(--hc-gold-rgb), 0.18), transparent 58%),
    radial-gradient(700px 460px at 100% 100%, rgba(184, 154, 111, 0.12), transparent 62%),
    linear-gradient(160deg, #1f1a16 0%, #14110e 100%);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.32);
  border-radius: clamp(20px, 1.8vw, 28px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 36px 80px -26px rgba(20, 14, 8, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  isolation: isolate;
  color: rgba(252, 248, 240, 0.92);
}
.lead-block__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(28px, 3.2vw, 64px);
  right: clamp(28px, 3.2vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hc-gold-1, var(--hc-gold, var(--hc-gold))) 30%, var(--hc-gold-2, #b89a6f) 50%, var(--hc-gold-1, var(--hc-gold, var(--hc-gold))) 70%, transparent);
  opacity: 0.72;
  pointer-events: none;
}
.lead-block__card::after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(var(--hc-gold-rgb), 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.lead-block__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.lead-block__eyebrow {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 18px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-gold-1, var(--hc-gold, var(--hc-gold)));
  background: rgba(var(--hc-gold-rgb), 0.08);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.28);
  border-radius: 999px;
}

.lead-block__title {
  margin: 0 0 16px;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--hc-paper);
}

.lead-block__desc {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: rgba(252, 248, 240, 0.68);
}

.lead-block__ctas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lead-block__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* `input.hc-input` in 101-hc-input.css carries a tag in the selector, so it
   outranks a plain class no matter which file lands later — the dark card
   kept the light .hc-input background while only `color` came from here.
   Match that weight to win back the component's own field. */
input.lead-block__phone {
  width: 100%;
  height: 56px;
  padding: 16px 20px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--hc-paper);
  background: rgba(255, 252, 247, 0.06);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.32);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input.lead-block__phone::placeholder {
  /* was 0.36 — a hint that faint is unreadable on the dark card */
  color: rgba(252, 248, 240, 0.62);
}
input.lead-block__phone:focus {
  outline: none;
  border-color: var(--hc-gold-1, var(--hc-gold, var(--hc-gold)));
  background: rgba(255, 252, 247, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(var(--hc-gold-rgb), 0.22);
}

.lead-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #2a2018;
  background: linear-gradient(135deg, #e8c896 0%, #c9a878 100%);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.55);
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 12px 28px -10px rgba(var(--hc-gold-rgb), 0.45),
    0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.lead-block__btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #f0d4a8 0%, var(--hc-gold, var(--hc-gold)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 18px 38px -10px rgba(var(--hc-gold-rgb), 0.60),
    0 2px 4px rgba(0, 0, 0, 0.18);
}

/* The consent line sits on the same dark card. Left to the browser default
   the box rendered as a bright system square with body-coloured text beside
   it — the one unstyled control in the block. */
.lead-block__consent {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(252, 248, 240, 0.72);
}
.lead-block__consent a {
  color: var(--hc-gold-1, var(--hc-gold));
  text-underline-offset: 3px;
}
.lead-block__check {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--hc-gold-1, var(--hc-gold));
}

@media (max-width: 920px) {
  .lead-block__card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* css/blocks/179-intent-chip.css */
/* =================== intent-chip.css =================== */
/* Quick-intent tiles (about / contacts "Почему выбирают нас" + каналы). */

.intent-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18));
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.intent-chip b,
.intent-chip > strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: 15px;
  color: var(--hc-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
}

.intent-chip span {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
}

/* Hover for all pointers — was trapped in @media(max-width:920px), so desktop
   had no hover feedback at all. */
.intent-chip:hover {
  transform: translateY(-2px);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  box-shadow: 0 10px 26px -14px rgba(var(--hc-accent-rgb), 0.2);
}

/* On the dark "Почему выбирают нас" card (premium-surface--highlight) stark
   white tiles clash — switch to a translucent gold-tinted card with light text. */
.premium-surface--highlight .intent-chip {
  background: rgba(255, 252, 247, 0.05);
  border-color: rgba(var(--hc-gold-rgb), 0.22);
}
.premium-surface--highlight .intent-chip b,
.premium-surface--highlight .intent-chip > strong {
  color: var(--hc-paper);
}
.premium-surface--highlight .intent-chip span {
  color: rgba(252, 248, 240, 0.72);
}
.premium-surface--highlight .intent-chip:hover {
  background: rgba(var(--hc-gold-rgb), 0.1);
  border-color: rgba(var(--hc-gold-rgb), 0.5);
}

/* css/blocks/225-about-visuals.css */
/* about-visuals - illustrated proof cards on /about. */
.about-visuals {
  padding-top: 32px;
}

.about-visuals__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* The paired cards here hold very different amounts of copy: measured on
   production, 379px next to 705px in the same row. align-items: start was
   chosen so the short card would not end in a large empty area — but a 326px
   step between two cards standing side by side reads as a layout fault, which
   is what it was reported as.
   Equal heights, and the spare room is shared between the card's own blocks
   instead of being dumped at the bottom, so the short card looks composed
   rather than padded. */
.page-about .premium-grid-2 {
  align-items: stretch;
}

.page-about .premium-grid-2 > .premium-surface {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 18px);
}

.page-about .premium-grid-2 > .premium-surface > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Spreading the list to fill the slack was worse than the gap it replaced:
   three items 130px apart read as a broken list. The copy keeps its own
   rhythm and the block sits centred in the taller card, so the spare room is
   split above and below instead of hanging off the bottom. */
.page-about .premium-grid-2 > .premium-surface {
  justify-content: center;
}

/* The pale card had no furniture at all. Beside a dark card carrying an
   eyebrow, a title, a stat row between two rules and three bordered tiles, it
   held three bare lines of text with a small mono number each, adrift in a lot
   of white — the flex gap stacked on top of the item's own padding put them
   ~85px apart. The list becomes tiles of the same family as .intent-chip
   opposite: same 14px radius, same hairline, same paper gradient, with the
   step number in a plate instead of hanging in the margin. The card now fills
   its own height, so the centring above has almost no slack left to hide. */
.page-about .premium-grid-2 > .premium-surface > ol,
.page-about .premium-grid-2 > .premium-surface > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
  /* Where the neighbouring card is taller, the slack goes into the tiles
     rather than between them: three plates 60px apart read as a broken list
     (which is what spreading the gaps looked like the last time), three
     slightly taller plates read as a list. */
  flex: 1 1 auto;
}

.page-about .premium-grid-2 > .premium-surface > :is(ol, ul).ed__list > li {
  flex: 1 1 auto;
}

.page-about .premium-grid-2 > .premium-surface > :is(ol, ul).ed__list > li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18));
  border-radius: 14px;
  background: linear-gradient(180deg, var(--hc-paper, #fff) 0%, rgba(252, 248, 240, 0.7) 100%);
  color: var(--hc-ink, #1a1714);
  font-size: 14px;
  line-height: 1.45;
}

.page-about .premium-grid-2 > .premium-surface > ol.ed__list > li::before {
  content: counter(ed-counter);
}

.page-about .premium-grid-2 > .premium-surface > :is(ol, ul).ed__list > li::before {
  position: static;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--hc-gold-rgb), 0.16);
  color: var(--hc-accent-dark, #6a573f);
  font-family: var(--hc-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
}

/* A bullet list gets a dot in the same plate — the counter would read "0." */
.page-about .premium-grid-2 > .premium-surface > ul.ed__list > li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 11px;
  background: var(--hc-accent, #2e7d46);
  opacity: 0.85;
}

.about-visual {
  background: var(--hc-paper, #ffffff);
  border: 1px solid rgba(180, 151, 115, 0.18);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.about-visual:hover {
  border-color: rgba(180, 151, 115, 0.42);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(26, 23, 20, 0.16);
}

.about-visual__art {
  aspect-ratio: 280 / 200;
  width: 100%;
  overflow: hidden;
  display: block;
}

.about-visual__art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.about-visual__title {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 17px;
  font-weight: 500;
  margin: 16px 22px 6px;
  line-height: 1.25;
  color: var(--hc-ink, #1a1714);
}

.about-visual__lede {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(26, 23, 20, 0.62);
  margin: 0 22px 22px;
}

@media (max-width: 980px) {
  .about-visuals__grid {
    grid-template-columns: 1fr;
  }
}

/* A half-width card is too narrow for the KPI and audience blocks on small
   laptops/tablets. Stack the pair before the generic 920px breakpoint. */
@media (max-width: 1180px) {
  .page-about .premium-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* css/blocks/187-page-hero.css */
/* =================== page-hero.css =================== */
.page-hero,
.cp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 32px) 0 clamp(16px, 2vw, 24px);
  margin-bottom: clamp(12px, 1.6vw, 20px);
  background: var(--hc-bg-warm, #f5efde);
}

.page-hero__bgfx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero__mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.page-hero__orb {
  position: absolute;
  width: clamp(220px, 28vw, 360px);
  height: clamp(220px, 28vw, 360px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hc-gold-rgb), 0.22) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: hz-orb-float 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.page-hero__orb--a {
  top: -8%;
  right: -6%;
}

.page-hero__orb--b {
  bottom: -10%;
  left: -8%;
  animation-delay: -4.5s;
}

/* The panel was capped at 960px while every other block on the same page runs
   the full 1344px container, so each of these heroes stopped two thirds of the
   way across against a bare decorative swoosh — and the cap landed at a
   different place per page depending on padding (1007px on contacts, 1025px on
   delivery, 1083px on about). The reading measure belongs on the text, which
   already carries it: .page-hero__title and .page-hero__lede. */
.page-hero__surface,
.cp-hero__body {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding: clamp(20px, 2.4vw, 32px);
  background: rgba(255, 252, 247, 0.7);
  border: 0.5px solid rgba(180, 151, 115, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(27, 20, 13, 0.04), 0 12px 40px rgba(27, 20, 13, 0.06);
}

.page-hero__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--hc-accent-dark, #7a6548);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hero__title {
  margin: 0 0 12px;
  color: var(--hc-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: var(--hc-ls-tight);
  line-height: 1.05;
}

.page-hero__lede {
  margin: 0 0 16px;
  max-width: 60ch;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.7));
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
}

.page-hero__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.page-hero__quicklink {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 6px 14px;
  /* Half-transparent white on the cream hero, with the text at 45% ink: the
     four links under every content hero read as disabled chips. They are the
     page's only navigation aid up there. */
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  border: 0.5px solid rgba(180, 151, 115, 0.32);
  border-radius: 999px;
  font-size: 13px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.page-hero__quicklink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at center, var(--hc-glow-color), transparent 60%);
  transition: opacity 0.3s ease;
}

.page-hero__quicklink:hover {
  transform: translateY(-1px);
  color: var(--hc-ink, #1a1714);
  background: var(--hc-paper, #ffffff);
  border-color: rgba(185, 154, 111, 0.42);
}

.page-hero__quicklink:hover::before {
  opacity: 1;
}

.page-hero:empty,
.page-hero > .hc-wrap:empty {
  display: none;
}

.page-blog-detail .page-hero__pill-bar {
  display: none;
}

.page-delivery .page-hero,
.page-static .page-hero {
  padding: clamp(26px, 3.4vw, 40px) 0 clamp(20px, 2.8vw, 32px);
  margin-bottom: clamp(14px, 1.8vw, 24px);
}

/* Delivery and static pages used to cap the panel at 980px while every other
   page capped it at 960 — the hero looked like a different width on each
   section. Only the padding differs now. */
.page-delivery .page-hero__surface,
.page-static .page-hero__surface {
  padding: clamp(18px, 2.1vw, 28px);
}

@media (max-width: 920px) {
  .page-hero,
  .cp-hero {
    padding: clamp(16px, 4vw, 24px) 0;
    border-radius: 20px;
  }

  .page-hero__surface,
  .cp-hero__body {
    border-radius: 14px;
    padding: clamp(16px, 4vw, 22px);
  }
}

/* css/blocks/121-hc-landings.css */
/* ════════════════════════════════════════════════════════════════
   Landing pages (brand / series / collection / promo / set / services)
   — premium layout for the entity-* / brand-adv-* / set-* / services-*
   component families.

   These templates (app/templates/landing/*.html) shipped with NO
   stylesheet for their custom classes, so the intro/advantage/items
   sections rendered as raw unstyled text. This file is the single
   source of truth for them. Built on project design tokens.
   ════════════════════════════════════════════════════════════════ */

/* ── Entity hero (brand/series/collection/promo intro card) ─────── */
.entity-hero {
  padding: var(--hc-sp-6, 32px);
  margin-bottom: var(--hc-sp-6, 32px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 20px;
  background: var(--hc-bg-2, #f7f3ec);
}

.entity-hero__eyebrow {
  display: inline-block;
  font: 500 var(--hc-fs-xs, 12px) / 1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  margin-bottom: var(--hc-sp-3, 12px);
}

.entity-hero__title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: var(--hc-fs-3xl, 28px);
  line-height: var(--hc-lh-snug, 1.25);
  color: var(--hc-ink, #1a1714);
  margin-bottom: var(--hc-sp-3, 12px);
}

.entity-hero__desc {
  max-width: 72ch;
  font-size: var(--hc-fs-lg, 16px);
  line-height: var(--hc-lh-loose, 1.7);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  margin-bottom: var(--hc-sp-5, 24px);
}

.entity-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hc-sp-4, 16px);
}

.entity-hero__card {
  display: grid;
  gap: var(--hc-sp-1, 4px);
  padding: var(--hc-sp-4, 16px);
  border-radius: 14px;
  background: var(--hc-bg, #fff);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
}

.entity-hero__card b { color: var(--hc-ink, #1a1714); font-size: var(--hc-fs-lg, 16px); }
.entity-hero__card span { font-size: var(--hc-fs-md, 14px); color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55)); line-height: var(--hc-lh-snug, 1.25); }

/* ── Section head (e.g. "Все товары Egger · N позиций") ─────────── */
.entity-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hc-sp-4, 16px);
  flex-wrap: wrap;
  margin: var(--hc-sp-7, 48px) 0 var(--hc-sp-5, 24px);
  padding-bottom: var(--hc-sp-3, 12px);
  border-bottom: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
}

.entity-head__title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: var(--hc-fs-2xl, 22px);
  color: var(--hc-ink, #1a1714);
}

.entity-head__meta {
  font: 500 var(--hc-fs-sm, 13px) / 1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

.entity-actions { display: flex; gap: var(--hc-sp-2, 8px); flex-wrap: wrap; }

.entity-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-sp-1, 4px);
  padding: 10px var(--hc-sp-4, 16px);
  border-radius: 999px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.14));
  font: 500 var(--hc-fs-md, 14px) / 1 var(--hc-sans);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  transition: border-color var(--hc-dur-fast, 0.15s) var(--hc-ease, ease);
}

.entity-btn:hover { border-color: var(--hc-accent, var(--hc-accent)); }

.entity-btn--accent {
  background: var(--hc-ink, #1a1714);
  color: #fff;
  border-color: var(--hc-ink, #1a1714);
}

/* ── Brand advantages grid (4 feature cards) ────────────────────── */
.brand-adv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hc-sp-4, 16px);
  margin: var(--hc-sp-5, 24px) 0 var(--hc-sp-7, 48px);
}

.brand-adv__item {
  padding: var(--hc-sp-5, 24px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 16px;
  background: var(--hc-bg, #fff);
}

.brand-adv__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: var(--hc-sp-3, 12px);
  background: var(--hc-gold-soft, rgba(var(--hc-gold-rgb), 0.15));
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}

.brand-adv__title {
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: var(--hc-fs-xl, 18px);
  color: var(--hc-ink, #1a1714);
  margin-bottom: var(--hc-sp-2, 8px);
}

.brand-adv__text {
  font-size: var(--hc-fs-md, 14px);
  line-height: var(--hc-lh-base, 1.5);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  margin: 0;
}

/* ── Brand index (/brands) ───────────────────────────────────────── */
.brand-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hc-sp-3, 12px);
}

.brand-index__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-sp-4, 16px);
  min-height: 64px;
  padding: 16px 18px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 8px;
  background: var(--hc-bg, #fff);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.brand-index__item:hover {
  transform: translateY(-2px);
  border-color: var(--hc-accent, #b99868);
  box-shadow: 0 14px 34px rgba(31, 24, 16, .08);
}

.brand-index__name {
  font-weight: 750;
}

.brand-index__count {
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  font-size: var(--hc-fs-sm, 13px);
  white-space: nowrap;
}

/* ── Legacy archive compatibility pages ───────────────────────────────── */
.legacy-archive__panel {
  display: grid;
  gap: var(--hc-sp-4, 16px);
  max-width: 920px;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 8px;
  background: var(--hc-bg, #fff);
}

.legacy-archive__meta {
  display: grid;
  gap: 8px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}

.legacy-archive__meta code {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 8px;
  background: var(--hc-bg-muted, #f6f2eb);
  color: var(--hc-ink, #1a1714);
}

.legacy-archive__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hc-sp-3, 12px);
}

.legacy-archive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-sp-3, 12px);
}

@media (max-width: 680px) {
  .legacy-archive__search { grid-template-columns: 1fr; }
}

/* ── Product set hero (/sets) ───────────────────────────────────── */
.set-hero { display: grid; gap: var(--hc-sp-3, 12px); }
.set-hero__body { font-size: var(--hc-fs-lg, 16px); color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); line-height: var(--hc-lh-base, 1.5); }
.set-hero__price { font-family: var(--hc-serif); font-size: var(--hc-fs-3xl, 28px); color: var(--hc-ink, #1a1714); }
.set-hero__was { font-size: var(--hc-fs-lg, 16px); color: var(--hc-ink-muted, rgba(26, 23, 20, 0.4)); text-decoration: line-through; margin-left: var(--hc-sp-2, 8px); }
.set-hero__discount { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--hc-accent, var(--hc-accent)); color: #fff; font-size: var(--hc-fs-sm, 13px); margin-left: var(--hc-sp-2, 8px); }
.set-hero__total { font-size: var(--hc-fs-lg, 16px); color: var(--hc-ink, #1a1714); }
.set-hero__cover { width: 100%; height: auto; border-radius: 16px; }

.set-items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hc-sp-3, 12px);
  margin-top: var(--hc-sp-5, 24px);
}

.set-item-card {
  display: grid;
  gap: var(--hc-sp-2, 8px);
  padding: var(--hc-sp-3, 12px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 14px;
  background: var(--hc-bg, #fff);
}

.set-item-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--hc-bg-warm, var(--hc-bg-warm)); }
.set-item-card__title { font-size: var(--hc-fs-md, 14px); line-height: var(--hc-lh-snug, 1.25); color: var(--hc-ink, #1a1714); }
.set-item-card__price { font-weight: 600; color: var(--hc-ink, #1a1714); }

@media (max-width: 900px) { .set-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .set-items-grid { grid-template-columns: 1fr; } }

/* NOTE: services landing (.services-hero__*, .services-grid, .service-card,
   .service-detail__*) is fully styled by its own canonical module
   248-services-crosslinks.css. Do NOT redefine those here — earlier
   duplicate rules in this file overrode the 2-column media+text layout
   and made the service cards collide. Left to 248 intentionally. */

/* ── Promo countdown timer ──────────────────────────────────────── */
.promo-timer { display: flex; gap: var(--hc-sp-3, 12px); margin: var(--hc-sp-4, 16px) 0; }
.promo-timer__cell { display: grid; gap: 2px; justify-items: center; min-width: 56px; padding: var(--hc-sp-3, 12px); border-radius: 12px; background: var(--hc-ink, #1a1714); color: #fff; }
.promo-timer__v { font-family: var(--hc-serif); font-size: var(--hc-fs-2xl, 22px); line-height: 1; }
.promo-timer__k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }

/* ── Trust strip ────────────────────────────────────────────────── */
.pdp-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-sp-2, 8px) var(--hc-sp-5, 24px);
  padding: var(--hc-sp-4, 16px) 0;
}

.pdp-trust-strip--compact { padding: var(--hc-sp-2, 8px) 0; }

.pdp-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-sp-2, 8px);
  font-size: var(--hc-fs-md, 14px);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}

/* css/blocks/178-iconcard.css */
/* =================== iconcard.css (consolidated v2) =================== */
.iconcard {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 4px;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff), #fbf7ec);
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 20, 13, 0.04), 0 8px 24px rgba(27, 20, 13, 0.04);
  overflow: hidden;
  isolation: isolate;
  min-height: 100px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.iconcard__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--hc-gold-rgb), 0.18);
  border-radius: 12px;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.iconcard__title {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: block;
  font: 500 16px/1.2 var(--hc-serif, "Playfair Display", Georgia, serif);
  color: var(--hc-ink, #1a1714);
  margin: 0 0 4px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.iconcard__text {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65));
}
.page-delivery .iconcard {
  height: 100%; min-height: 136px; grid-template-columns: 44px minmax(0, 1fr); display: grid; gap: 14px; width: 100%; min-width: 0;
}
.iconcard::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 0%, rgba(var(--hc-gold-rgb), 0.18), transparent 45%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.iconcard:hover {
  transform: translateY(-2px); border-color: rgba(141, 109, 71, 0.4); box-shadow: 0 18px 40px -28px rgba(27, 20, 13, 0.32);
}
.iconcard:hover::before { opacity: 1; }
.iconcard__icon::before {
  content: ""; position: absolute; inset: 2px; border-radius: 10px; border: 1px dashed rgba(var(--hc-gold-rgb), 0.55); opacity: 0.6; animation: hzCardIconRing 14s linear infinite; pointer-events: none;
}
.iconcard:hover .iconcard__icon::before { animation-duration: 7s; opacity: 1; border-color: rgba(var(--hc-gold-rgb), 0.85); }
.iconcard__icon svg { position: relative; z-index: 2; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.iconcard:hover .iconcard__icon svg { transform: scale(1.08) rotate(-3deg); }
@media(max-width:920px) {
  .iconcard > .iconcard__icon {grid-column: 1; grid-row: 1 / span 2; align-self: start}
  .iconcard > .iconcard__title {grid-column: 2; grid-row: 1; min-width: 0}
  .iconcard > .iconcard__text {grid-column: 2; grid-row: 2; min-width: 0}
  .iconcard {display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; min-width: 0}
  .iconcard > .iconcard__icon {grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; flex-shrink: 0}
  .iconcard > .iconcard__title {grid-column: 2; grid-row: 1; min-width: 0; word-break: normal; overflow-wrap: anywhere}
  .iconcard > .iconcard__text {grid-column: 2; grid-row: 2; min-width: 0; word-break: normal; overflow-wrap: anywhere; white-space: normal}
  .iconcard > *:nth-child(n+4) {grid-column: 2; grid-row: 3; min-width: 0}
}
[class*="shipping"] .iconcard:nth-child(3) .iconcard__icon, .delivery-methods .iconcard:nth-child(3) .iconcard__icon, .iconcard.iconcard--cdek .iconcard__icon {
  background: linear-gradient(135deg, #00b259, #008f43); color: var(--hc-paper, #ffffff); position: relative;
}
[class*="shipping"] .iconcard:nth-child(3) .iconcard__icon::after, .delivery-methods .iconcard:nth-child(3) .iconcard__icon::after {
  content: "СДЭК"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 10px/1 var(--hc-sans, "Outfit", sans-serif); letter-spacing: 0.06em; color: var(--hc-paper, #ffffff); background: linear-gradient(135deg, #00b259, #008f43); border-radius: inherit;
}
[class*="shipping"] .iconcard:nth-child(4) .iconcard__icon, .delivery-methods .iconcard:nth-child(4) .iconcard__icon, .iconcard.iconcard--dl .iconcard__icon {
  background: linear-gradient(135deg, #d52020, #a91414); color: var(--hc-paper, #ffffff);
}
[class*="shipping"] .iconcard:nth-child(4) .iconcard__icon::after, .delivery-methods .iconcard:nth-child(4) .iconcard__icon::after {
  content: "ДЛ"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--hc-sans, "Outfit", sans-serif); letter-spacing: 0.04em; color: var(--hc-paper, #ffffff); background: linear-gradient(135deg, #d52020, #a91414); border-radius: inherit;
}
.page-delivery .iconcard__text { line-height: 1.55; word-break: normal; overflow-wrap: anywhere; hyphens: none; white-space: normal; }
.page-delivery .iconcard > * { min-width: 0; }


/* служебные премиум-страницы (vacancy/partners/projects): сетка iconcard-плиток */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,1.6vw,20px); }

/* Project cards contain editorial images instead of compact service icons. */
.iconcard--project {
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 136px;
}
.iconcard--project .iconcard__media {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 112px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: #f2efe9;
}
.iconcard--project .iconcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iconcard--project .iconcard__title { grid-column: 2; }
.iconcard--project .iconcard__text { grid-column: 2; }
@media(max-width:560px) {
  .iconcard--project {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 16px;
  }
  .iconcard--project .iconcard__media {
    width: 84px;
    height: 76px;
  }
}
.iconcard--project-no-media { grid-template-columns: minmax(0, 1fr); }
.iconcard--project-no-media .iconcard__title,
.iconcard--project-no-media .iconcard__text { grid-column: 1; }

/* css/blocks/208-premium-kpis.css */
/* =================== premium-kpis.css =================== */
/* premium-kpis — stat-row block: serif metric + uppercase mono label.
 * Used on /about ("Почему выбирают нас"), /delivery ("Доставим по России")
 * and other content cards. Adapts to ink context (premium-surface--highlight)
 * with cream metric + gold label so values stay visible on dark cards.
 * Strictly .premium-kpis / .premium-kpis__*. */

/* Flex sized each stat by its own content, so a long label ("рейтинг
   Яндекс.Карт · 111 отзывов") pushed the stat after it far to the right and
   the row read as three values scattered rather than three columns. Equal
   columns line the numbers up and let the long label wrap under its own. */
.premium-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin: 18px 0;
  padding: 18px 0;
  border-top: 0.5px solid rgba(180, 151, 115, 0.18);
  border-bottom: 0.5px solid rgba(180, 151, 115, 0.18);
}
.premium-kpis > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 4px;
}
.premium-kpis strong {
  display: block;
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--hc-ink, #1a1714);
  font-variant-numeric: tabular-nums;
}
.premium-kpis span {
  display: block;
  margin-top: 2px;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  position: relative;
}
.premium-kpis span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--hc-gold-1, var(--hc-gold, var(--hc-gold))), var(--hc-gold-2, #b89a6f));
  border-radius: 999px;
}

/* Adaptation when KPIs live inside an ink-tinted card (premium-surface--highlight) */
.premium-surface--highlight .premium-kpis {
  border-top-color: rgba(var(--hc-gold-rgb), 0.22);
  border-bottom-color: rgba(var(--hc-gold-rgb), 0.22);
}
.premium-surface--highlight .premium-kpis strong {
  color: var(--hc-paper);
}
.premium-surface--highlight .premium-kpis span {
  color: rgba(252, 248, 240, 0.62);
}

/* css/blocks/190-panel.css */
/* =================== panel.css =================== */
.panel {padding: clamp(20px, 2.4vw, 28px); background: linear-gradient(180deg, rgba(255, 252, 247, 1), rgba(248, 244, 237, 0.6)); border: 0.5px solid rgba(180, 151, 115, 0.18); border-radius: 14px; margin-bottom: clamp(16px, 2vw, 24px)}