/* 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/019-contact-intent-grid.css */
/* =================== contact-intent-grid.css =================== */
/* contact-intent-grid — 3-up grid of quick-intent cards on /contacts:
 * "Подбор по проекту" / "Опт и B2B" / "Доставка по РФ". Each card is an
 * <a> with <strong> + <span>; we paint an animated SVG icon via ::before
 * (per-nth-child mask-image) and apply premium hover with shimmer. */

.contact-intent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: 20px;
}

.contact-intent-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
  border: 0.5px solid rgba(141, 109, 71, 0.20);
  border-radius: 14px;
  text-decoration: none;
  color: var(--hc-ink, #1a1714);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s, box-shadow 0.28s;
}
.contact-intent-card::after {
  content: "";
  position: absolute;
  left: -120%;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(var(--hc-gold-rgb), 0.32) 50%, transparent 70%);
  transition: left 0.7s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.contact-intent-card:hover {
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.62));
  box-shadow: 0 2px 4px rgba(40, 30, 15, 0.04), 0 24px 50px -22px rgba(184, 154, 111, 0.32);
}
.contact-intent-card:hover::after { left: 120%; }

/* Icon tile (square gold-tint with mask-image SVG inside) */
.contact-intent-card::before {
  content: "";
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(var(--hc-gold-rgb), 0.20);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  position: relative;
  transition: background 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
}
/* Inner SVG icon via second pseudo on <strong> (since ::before is the tile bg) */
.contact-intent-card strong {
  position: relative;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--hc-ink, #1a1714);
  letter-spacing: -0.005em;
}
.contact-intent-card span {
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.contact-intent-card:hover::before {
  background-color: rgba(var(--hc-gold-rgb), 0.36);
  transform: rotate(-6deg) scale(1.06);
}

/* These three used mask-image, which masks the tile away as well and leaves a
   bare glyph — right under .hc-contact-channel rows wearing a tinted plate with
   a gold rim. Two treatments for the same kind of row, one under the other.
   The glyph is painted on the plate now, exactly as the channel rows do it. */
.contact-intent-card:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/><path d='M9 12l2 2 4-4'/></svg>");
}
.contact-intent-card:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
}
.contact-intent-card:nth-child(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='3' width='15' height='13' rx='2'/><polygon points='16 8 20 8 23 11 23 16 16 16 16 8'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>");
}
.contact-intent-card:hover::before {
  background-color: #2a2018;
}

/* A text-only instruction block needs its own stable card component; the
   generic two-column utility has no padding or icon treatment. */
.contact-response-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 16px;
}
.contact-response-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-height: 126px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}
.contact-response-card__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--hc-accent-rgb), 0.1);
  color: var(--hc-accent-dark, #7a6548);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.contact-response-card strong { display: block; margin-top: 2px; }
.contact-response-card p { margin: 7px 0 0; }

@media (max-width: 640px) {
  .contact-response-grid { grid-template-columns: 1fr; }
  .contact-response-card { min-height: 0; }
}

/* The channels card stands beside the address card, which carries a map, so it
   is stretched to a height its own content does not reach — 113px of it, all
   pooled under the last tile. The intent tiles take the slack instead: they
   grow a little rather than leaving the card looking unfinished at the bottom.
   Measured with scripts/audit_invariants.py's sibling check on a 1440 viewport. */
.page-contacts .premium-grid-2 {
  align-items: stretch;
}
.page-contacts .premium-grid-2 > .premium-surface {
  display: flex;
  flex-direction: column;
}
.page-contacts .premium-grid-2 > .premium-surface > .contact-intent-grid {
  flex: 1 1 auto;
  align-content: stretch;
}
.page-contacts .premium-grid-2 > .premium-surface > .contact-intent-grid > .contact-intent-card {
  align-content: center;
}

/* css/blocks/020-contact-list.css */
/* =================== contact-list.css =================== */
.contact-list {list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0}
.contact-list > li {padding: var(--hc-sp-2) 0; border-bottom: 1px solid var(--hc-line)}
.contact-list a {display: flex; align-items: flex-start; gap: 3px; padding: 11px 15px; text-decoration: none; color: var(--hc-ink, #1a1714); background: rgba(255, 255, 255, 0.6); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 12px; flex-direction: column; transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease}
.contact-list a:last-child {border-bottom: none}
/* Set in Playfair while the identical rows in .hc-contact-channel next to it
   were sans — two typefaces for one kind of row, side by side. */
.contact-list a strong {flex-shrink: 0; font: 500 16px/1.3 var(--hc-sans, 'Outfit', sans-serif); color: var(--hc-ink, #1a1714)}
.contact-list a span {color: var(--hc-accent-dark, var(--hc-accent-dark)); font-weight: 500; font-size: 12px}
.contact-list a:hover {border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.5)); background: rgba(255, 255, 255, 0.95); transform: translateX(2px)}
.contact-list a:hover span {text-decoration: underline}
.contact-list strong {margin-right: 8px}

/* On ink-tinted cards (premium-surface--highlight) keep links readable. */
.premium-surface--highlight .contact-list a {
  color: rgba(252, 248, 240, 0.92);
  background: rgba(255, 252, 247, 0.04);
  border-color: rgba(var(--hc-gold-rgb), 0.22);
}
.premium-surface--highlight .contact-list a strong {color: var(--hc-paper)}
.premium-surface--highlight .contact-list a span {color: var(--hc-gold-1, var(--hc-gold, var(--hc-gold)))}
.premium-surface--highlight .contact-list a:hover {
  background: rgba(var(--hc-gold-rgb), 0.10);
  border-color: rgba(var(--hc-gold-rgb), 0.55);
}


/* B2B-реквизиты: строки «метка → значение» (были без стилей → текст слипался) */
.contact-legal-grid{ display:grid; gap:0; margin-top:clamp(16px,2vw,22px); max-width:660px; }
.contact-legal-row{ display:grid; grid-template-columns:minmax(110px,170px) 1fr; gap:4px 22px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--hc-line, rgba(26,23,20,.08)); }
.contact-legal-row:first-child{ padding-top:0; }
.contact-legal-row:last-child{ border-bottom:0; }
.contact-legal-row > span{ font-size:13px; color:var(--hc-ink-soft, rgba(26,23,20,.6)); }
.contact-legal-row > b{ font-weight:600; color:var(--hc-ink, #1a1714); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
@media(max-width:520px){ .contact-legal-row{ grid-template-columns:1fr; gap:2px; padding:9px 0; } }

/* премиум-стрелка на ссылках-плитках адреса/доставки */
.contact-list a{ position:relative; padding-right:40px; }
.contact-list a::after{ content:"→"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--hc-gold, var(--hc-gold)); opacity:.55; transition:transform .22s ease, opacity .22s ease; }
.contact-list a:hover::after{ transform:translate(3px,-50%); opacity:1; }

/* css/blocks/021-contact-map-shell.css */
/* =================== contact-map-shell.css =================== */
/* contact-map-shell - container for the map on /contacts. When the Yandex
 * iframe hasn't loaded (or as a permanent backdrop), show a branded
 * topographic placeholder so the area never reads as "empty gray box".
 * Strictly .contact-map-shell. */

.contact-map-shell {
  position: relative;
  width: 100%;
  min-height: 360px;
  margin-top: clamp(16px, 2vw, 28px);
  background:
    /* Marker pin (CSS-painted) */
    radial-gradient(circle at 50% 38%, rgba(201, 67, 58, 0.92) 0, rgba(201, 67, 58, 0.92) 9px, transparent 10px),
    radial-gradient(circle at 50% 38%, rgba(201, 67, 58, 0.18) 0, rgba(201, 67, 58, 0.18) 22px, transparent 23px),
    /* Faux topographic contour lines */
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0,
      transparent 38px,
      rgba(122, 101, 72, 0.10) 39px,
      transparent 40px
    ),
    /* Faux road network grid */
    linear-gradient(35deg, transparent 49%, rgba(122, 101, 72, 0.14) 49.5%, rgba(122, 101, 72, 0.14) 50.5%, transparent 51%),
    linear-gradient(125deg, transparent 49%, rgba(122, 101, 72, 0.10) 49.5%, rgba(122, 101, 72, 0.10) 50.5%, transparent 51%),
    /* Base */
    radial-gradient(circle at 20% 30%, rgba(255, 252, 247, 0.7), transparent 50%),
    linear-gradient(160deg, #f7f3ea 0%, #efe8da 60%, #e3d9c4 100%);
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.04),
    0 22px 50px -28px rgba(40, 30, 15, 0.22);
}
.contact-map-shell::before {
  content: "Долгопрудный, Лихачёвский пр-д, 33с1";
  position: absolute;
  left: 50%;
  top: calc(38% + 32px);
  transform: translateX(-50%);
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(28, 24, 20, 0.96), rgba(17, 14, 12, 0.99));
  color: var(--hc-paper, #ffffff);
  border-radius: var(--hc-r-pill, 999px);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 8px 18px -6px rgba(40, 30, 15, 0.4);
  pointer-events: none;
  z-index: 1;
}
.contact-map-shell::after {
  /* Hours are rendered from admin settings in the page copy. Do not repeat a
   * hard-coded schedule in generated CSS content. */
  content: "Самовывоз и склад";
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(255, 252, 247, 0.94);
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  border-radius: var(--hc-r-pill, 999px);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}
/* If iframe or div with real map renders inside, it covers the placeholder */
.contact-map-shell iframe,
.contact-map-shell [class*="map"]:not(.contact-map-shell) {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  border-radius: inherit;
}

/* When real map is present, turn placeholder labels off so they never
 * overlap with live map controls / tiles. */
.contact-map-shell:has(iframe)::before,
.contact-map-shell:has(iframe)::after {
  opacity: 0;
}

/* css/blocks/083-hc-contact-channel.css */
/* =================== hc-contact-channel.css =================== */
/* Channels live in their OWN container (NOT .contact-list) — avoids the
 * .contact-list a card rules clobbering the icon padding/background. */
.hc-contact-channels { display:grid; grid-template-columns:1fr; gap:10px; margin:16px 0; }

.hc-contact-channel { position:relative; }
.hc-contact-channel__copy {
  display:none;
  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:0.5px solid rgba(180,151,115,0.32);
  color:rgba(26,23,20,0.55);
  border-radius:100px;
  padding:3px 9px;
  font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.04em;
  text-transform:uppercase;
  cursor:pointer;
}
.hc-contact-channel:hover .hc-contact-channel__copy { display:inline-flex; align-items:center; gap:4px; }
.hc-contact-channel__copy:hover { color:var(--hc-ink, #1a1714); border-color:var(--hc-accent-dark, var(--hc-accent-dark)); }
.hc-contact-channel__copy.is-copied { color:var(--hc-success, #3d6b4f); border-color:var(--hc-success, #3d6b4f); }
.hc-contact-channel__copy.is-copied::after { content:" ✓"; }

/* Premium contact card with animated SVG icon + shimmer-on-hover */
.hc-contact-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 22px 20px 78px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
  border: 0.5px solid rgba(141, 109, 71, 0.20);
  border-radius: 14px;
  text-decoration: none;
  color: var(--hc-ink, #1a1714);
  isolation: isolate;
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.hc-contact-channel::after {
  content: "";
  position: absolute;
  left: -120%;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(var(--hc-gold-rgb), 0.32) 50%, transparent 70%);
  transition: left 0.7s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-contact-channel:hover {
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.62));
  box-shadow:
    0 2px 4px rgba(40, 30, 15, 0.04),
    0 24px 50px -22px rgba(184, 154, 111, 0.32);
  transform: translateY(-3px);
}
.hc-contact-channel:hover::after { left: 120%; }
.hc-contact-channel::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(var(--hc-gold-rgb), 0.20);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  transition: background-color 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1);
}
.hc-contact-channel:hover::before {
  background-color: rgba(var(--hc-gold-rgb), 0.36);
  transform: translateY(-50%) rotate(-6deg) scale(1.08);
}
.hc-contact-channel[href^="tel:"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.hc-contact-channel[href^="mailto:"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.hc-contact-channel[href*="t.me"]::before,
.hc-contact-channel[href*="telegram"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b7355'><path d='M21.7 3.3 2.6 10.6c-1 .4-1 1 0 1.3l4.9 1.5 1.9 5.7c.2.6.4.7.9.4l3-2.7 5.4 4c.6.3 1 .1 1.2-.6L23 4.5c.2-.8-.3-1.5-1.3-1.2zm-3.4 4-9 6.4-3.6-1.1L18.3 7.3z'/></svg>");
}
.hc-contact-channel strong {
  font: 500 16px/1.3 var(--hc-sans, 'Outfit', sans-serif);
  color: var(--hc-ink, #1a1714);
}
.hc-contact-channel span {
  font-size: 13px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
}
.hc-contact-channel__copy {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(141, 109, 71, 0.28);
  border-radius: 8px;
  font-size: 12px;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  cursor: pointer;
}

/* 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/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)}