/* 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/137-hc-pgrid.css */
/* =================== hc-pgrid.css =================== */
/* hc-pgrid - product grid container. Wraps .pcard children. Used on catalog,
 * search results, favorites, related-product rails, etc. Adapts column count
 * to viewport with sensible breakpoints. Strictly .hc-pgrid / .hc-pgrid__*. */

.hc-pgrid {
  display: grid;
  /* `1fr` here sized *every* row to the tallest row in the whole grid, not just
     the cards within one row. Cards look the same either way — align-items
     below already stretches them to their own row — but an in-grid banner,
     260px tall in a 490px row, left a 230px hole under itself. `auto` gives
     each row its own height and stretch still equalises the cards inside it. */
  grid-auto-rows: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  /* Uniform row heights — cards stretch to the row baseline. The hoverband
     is an absolute float, so only the hovered card visibly extends below
     the row (siblings stay at row height). */
  align-items: stretch;
}

/* Column count = divisors of PAGE_SIZE (24): 2 / 3 / 4 — never 5 or 7,
   so the last grid row is always full (24 % 5 = 4 left an empty cell). */
@media (min-width: 600px) { .hc-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .hc-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The catalog used to fall to a single column below 480px. Two columns hold on
   a 320px screen and let a visitor compare decors by scrolling instead of by
   memory; the row gap tightens to pay for it. */
@media (max-width: 479px) { .page-catalog #cat-results .hc-pgrid { gap: 10px; } }

/* List view toggle. Single column → rows must be content-height. (The base
   used to be `grid-auto-rows: 1fr`, which stretched each row to an equal slice
   of the tall results column and blew every card up into an empty panel; the
   base is `auto` now, so this repeats it only to stay explicit.) */
.hc-pgrid[data-view="list"] {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  align-content: start;
}
.hc-pgrid[data-view="compact"] {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--hc-sp-2);
}

/* List view — every catalog card is forced to variant 'a' (editorial: a media
   row + 1fr body row, 468px min-height). Flip it to a horizontal media|body row.
   We MUST reset grid-template-rows AND min-height too: overriding only the
   columns leaves the editorial `auto 1fr` rows + 468px min in place, so the card
   grows a tall empty second row under the content. (The previous rules here
   targeted .pcard-shell / .pcard-stage, which variant 'a' does not emit, so the
   override never landed and the empty panel showed.) */
#cat-results .hc-pgrid[data-view="list"] {
  grid-template-columns: 1fr;
}

#cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] {
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  grid-template-rows: auto;
  min-height: 0;
}

/* Divider moves from under the image (vertical card) to its right edge. */
#cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__media-wrap {
  border-bottom: 0;
  border-right: 1px solid rgba(141, 109, 71, 0.12);
}

/* Image fills the row height (dictated by the taller body column) instead of a
   fixed 16:10 ratio, so there is no gradient gap below a short image. */
#cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 132px;
}

/* Body: vertically centre content; CTA reads as a button, not a full-width bar. */
#cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__body {
  justify-content: center;
  gap: 5px;
  padding: 14px 20px;
}

/* List row stays compact: drop the long editorial caption (and its reserved
   3-line min-height) — the spec chips below carry the key info. */
#cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__caption {
  display: none;
}

/* Grid view pins the footer to the bottom; in the centred list row that would
   fight justify-content, so let the footer sit in normal flow. */
#cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__foot {
  margin-top: 0;
}

#cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__cta {
  margin-top: 12px;
  width: auto;
  min-width: 220px;
  max-width: 320px;
}

/* Compact view — hide only the long caption; KEEP the spec chips
   (.pcard-a__props) so the dense 6-up grid still shows decor / size / series. */
#cat-results .hc-pgrid[data-view="compact"] .pcard-a__caption {
  display: none;
}

#cat-results .hc-pgrid[data-view="compact"] .pcard-a__body {
  padding: 10px 12px 12px;
}

/* Inline marketing banner inside the grid spans the full row */
.hc-pgrid__banner {
  grid-column: 1 / -1;
  max-height: 260px;
  overflow: hidden;
  border-radius: 14px;
}

/* Inside PDP cross-sell rails, gaps are tighter */
.pdp-commerce-sections .hc-pgrid,
.hc-pdp .hc-pgrid {
  gap: clamp(12px, 1.2vw, 18px);
}

.hc-pgrid > .pcard {
  min-width: 0;
}

/* List view: lift the editorial a card price + cart into a right rail at the
   card edge (content stays left, footer centred vertically). Wide screens only;
   compact/mobile keep the stacked footer. Matches the existing list-a selector
   specificity so this grid override wins over the flex body above. */
@media (min-width: 760px) {
  #cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 228px);
    column-gap: 24px;
    row-gap: 5px;
    align-content: center;
  }
  #cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__body > * { grid-column: 1; min-width: 0; }
  #cat-results .hc-pgrid[data-view="list"] .pcard[data-pcard-variant="a"] .pcard-a__foot {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding-left: 24px;
    border-left: 1px solid rgba(141, 109, 71, 0.14);
  }
}

/* css/blocks/138-hc-ph.css */
/* =================== hc-ph.css =================== */
.hc-ph {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
}

.hc-ph__orbit-out {
  transform-origin: 140px 140px;
  animation: hcPhSpin 22s linear infinite;
}

.hc-ph__orbit-in {
  transform-origin: 140px 140px;
  animation: hcPhSpinR 32s linear infinite;
}

.hc-ph__dot {
  animation: hcPhDot 2.6s ease-in-out infinite;
}

.hc-ph__schema {
  animation: hcPhSchema 4s ease-in-out infinite;
}

.hc-cat-illo__avntos-facade {
  transform-origin: 200px 180px;
  transform-box: fill-box;
}

.hc-ph text[font-family*="Mono"] {
  opacity: 0.4;
  font-size: 8px;
}

.hc-pcard__ph-wrap .hc-ph,
.pcard-a__ph .hc-ph,
.pcard-b__ph .hc-ph,
.pcard-c__ph .hc-ph,
.pcard-d__ph .hc-ph,
.pcard-media__placeholder .hc-ph {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.hc-pcard__media .hc-ph,
.hc-pcard__ph-wrap .hc-ph,
.pcard-media__placeholder .hc-ph,
.pcard-c__ph .hc-ph {
  filter: drop-shadow(0 4px 8px rgba(122, 101, 72, 0.16));
  transition: filter 0.45s ease, transform 0.45s ease;
}

.hc-pdp-gallery__main .hc-ph {
  filter: drop-shadow(0 12px 24px rgba(122, 101, 72, 0.18));
  transition: filter 0.55s ease, transform 0.55s ease;
}

.hc-pdp-gallery__main:hover .hc-ph {
  filter: drop-shadow(0 22px 40px rgba(122, 101, 72, 0.28));
}

.hc-pcard:hover .hc-ph__orbit-in {
  animation-duration: 18s;
}

.hc-pcard:hover .hc-ph__orbit-out {
  animation-duration: 12s;
}

@media (max-width: 920px) {
  .hc-pcard__media .hc-ph,
  .hc-pcard__ph-wrap .hc-ph {
    position: absolute;
    inset: 0;
  }

  .pcard--c .pcard-c__media .hc-ph {
    aspect-ratio: 1;
  }
}

/* css/blocks/197-pcard.css */
/* =================== pcard.css =================== */
/* Shared product-card primitives + canonical variant C implementation.
 * Variants A/B/D/MINI live in 260/261/263/264 and do not get overridden here. */

.pcard {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}

.pcard a {
  color: inherit;
  text-decoration: none;
}

.pcard:hover,
.pcard:focus-within {
  z-index: 8;
}

.pcard-badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2a2018, #4a3d2a);
  color: #fff;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px -2px rgba(40, 30, 15, 0.25);
}

.pcard-badge--sale {
  background: linear-gradient(135deg, #8b3f32, #6f3329);
}

.pcard-badge--hot {
  background: linear-gradient(135deg, #e8c896 0%, #c9a878 55%, #b89a6f 100%);
  color: #2a2018;
}

.pcard-badge--new {
  background: linear-gradient(135deg, #3d6b4f, #2c5039);
}

.pcard-act {
  position: relative;
  z-index: 3;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid rgba(141, 109, 71, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: rgba(26, 23, 20, 0.78);
  box-shadow: 0 2px 8px -4px rgba(40, 30, 15, 0.22);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pcard-act svg {
  width: 14px;
  height: 14px;
}

.pcard-act:hover {
  background: #1a1714;
  border-color: #1a1714;
  color: #fff;
  transform: scale(1.08);
}

.pcard-act--fav.is-active,
.hc-atc-fav.is-active {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

.pcard-c__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 178px);
  min-height: 23px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  background: rgba(252, 248, 240, 0.92);
  color: #5b4732;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
/* chip tile-effect: warm-up on card hover, lift + gold accent on chip hover */
.pcard:hover .pcard-c__pill {
  border-color: rgba(141, 109, 71, 0.34);
  background: rgba(255, 253, 248, 0.97);
}
.pcard-c__pill:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 169, 97, 0.62);
  background: linear-gradient(180deg, var(--hc-paper), #f5edde);
  color: #3a2c1c;
  box-shadow: 0 5px 12px -6px rgba(184, 154, 111, 0.55), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.pcard-c__pill:hover,
.pcard-c__pill:focus-visible {
  border-color: rgba(141, 109, 71, 0.42);
  background: rgba(255, 255, 255, 0.98);
  color: #2c241d;
  box-shadow: 0 8px 18px -14px rgba(26, 23, 20, 0.38);
  transform: translateY(-1px);
}

/* Variant C (default catalog card) */
.pcard[data-pcard-variant="c"] {
  --pc-c-min-h: 446px;
  min-height: var(--pc-c-min-h);
}

.pcard[data-pcard-variant="c"] .pcard-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: var(--pc-c-min-h);
  height: 100%;
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px -20px rgba(24, 18, 12, 0.5);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pcard[data-pcard-variant="c"]:hover .pcard-shell,
.pcard[data-pcard-variant="c"]:focus-within .pcard-shell {
  transform: translateY(-4px);
  border-color: rgba(141, 109, 71, 0.34);
  box-shadow: 0 24px 36px -26px rgba(24, 18, 12, 0.6);
}

.pcard[data-pcard-variant="c"] .pcard-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid rgba(141, 109, 71, 0.12);
  background: linear-gradient(180deg, var(--hc-paper) 0%, var(--hc-bg-warm) 100%);
  overflow: hidden;
}

.pcard[data-pcard-variant="c"] .pcard-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10%;
}

.pcard[data-pcard-variant="c"] .pcard-media__placeholder,
.pcard[data-pcard-variant="c"] .pcard-media picture,
.pcard[data-pcard-variant="c"] .pcard-media__img {
  position: absolute;
  inset: 0;
}

.pcard[data-pcard-variant="c"] .pcard-media__placeholder {
  display: grid;
  place-items: center;
  padding: 10%;
}

.pcard[data-pcard-variant="c"] .pcard-media__img,
.pcard[data-pcard-variant="c"] .pcard-media picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 10%;
  transition: transform 0.26s ease;
}

.pcard[data-pcard-variant="c"]:hover .pcard-media__img,
.pcard[data-pcard-variant="c"]:focus-within .pcard-media__img,
.pcard[data-pcard-variant="c"]:hover .pcard-media picture img,
.pcard[data-pcard-variant="c"]:focus-within .pcard-media picture img {
  transform: scale(1.03);
}

.pcard[data-pcard-variant="c"] .pcard-media--has-img .pcard-media__placeholder {
  display: none;
}

.pcard[data-pcard-variant="c"] .pcard-media--has-img.hc-media-fallback .pcard-media__placeholder {
  display: grid;
}

.pcard[data-pcard-variant="c"] .pcard-media__img.hc-img-broken {
  display: none;
}

.pcard[data-pcard-variant="c"] .pcard-overlay {
  position: absolute;
  inset: 10px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.pcard[data-pcard-variant="c"] .pcard-overlay__badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcard[data-pcard-variant="c"] .pcard-overlay__actions {
  width: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.86;
  transform: translateX(0);
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.pcard[data-pcard-variant="c"]:hover .pcard-overlay__actions,
.pcard[data-pcard-variant="c"]:focus-within .pcard-overlay__actions {
  opacity: 1;
  transform: translateX(-2px);
}

.pcard[data-pcard-variant="c"] .pcard-c__body {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 8px;
  padding: 13px 14px 14px;
  min-width: 0;
}

.pcard[data-pcard-variant="c"] .pcard-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.pcard[data-pcard-variant="c"] .pcard-series,
.pcard[data-pcard-variant="c"] .pcard-sku {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard[data-pcard-variant="c"] .pcard-sku {
  flex-shrink: 0;
}

.pcard[data-pcard-variant="c"] .pcard-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  min-height: calc(19px * 1.16 * 2);
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 18px;
  line-height: 1.16;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 0.18s ease;
}

.pcard[data-pcard-variant="c"]:hover .pcard-title,
.pcard[data-pcard-variant="c"]:focus-within .pcard-title {
  color: #6b563c;
}

.pcard[data-pcard-variant="c"] .pcard-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  min-height: calc(12px * 1.35);
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(26, 23, 20, 0.66);
}

.pcard[data-pcard-variant="c"] .pcard-props {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.pcard[data-pcard-variant="c"] .pcard-props::-webkit-scrollbar {
  display: none;
}

.pcard[data-pcard-variant="c"] .pcard-props .pcard-c__pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.pcard[data-pcard-variant="c"] .pcard-footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(141, 109, 71, 0.2);
}

.pcard[data-pcard-variant="c"] .pcard-pricebox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.pcard[data-pcard-variant="c"] .pcard-pricebox__old {
  color: rgba(26, 23, 20, 0.44);
  font-size: 12px;
  text-decoration: line-through;
}

.pcard[data-pcard-variant="c"] .pcard-pricebox__current {
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(24px, 1.75vw, 30px);
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}

.pcard[data-pcard-variant="c"] .pcard-pricebox__current.is-sale {
  color: #8b3f32;
}

.pcard[data-pcard-variant="c"] .pcard-pricebox__current.is-request {
  font-size: 15px;
  color: rgba(26, 23, 20, 0.55);
  font-style: italic;
}

.pcard[data-pcard-variant="c"] .pcard-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(61, 107, 79, 0.26);
  background: rgba(61, 107, 79, 0.09);
  color: #2f6f4c;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.pcard[data-pcard-variant="c"] .pcard-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pcard[data-pcard-variant="c"] .pcard-c__cta {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #1a1714;
  border-radius: 10px;
  background: #1a1714;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.pcard[data-pcard-variant="c"] .pcard-c__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -12px rgba(40, 30, 15, 0.45);
}

.pcard[data-pcard-variant="c"] .pcard-c__cta--request {
  background: #fff;
  color: #1a1714;
}

.pcard[data-pcard-variant="c"] .pcard-c__cta--request:hover {
  background: #1a1714;
  color: #fff;
}

@media (max-width: 1200px) {
  .pcard[data-pcard-variant="c"] {
    --pc-c-min-h: 430px;
  }
}

@media (max-width: 920px) {
  .pcard[data-pcard-variant="c"] {
    --pc-c-min-h: 402px;
  }
  .pcard[data-pcard-variant="c"] .pcard-title {
    font-size: 17px;
  }
  .pcard[data-pcard-variant="c"] .pcard-overlay__actions {
    opacity: 1;
    transform: none;
  }
}

/* "Снято с производства" — non-buyable CTA label on the card for discontinued
   products (stock_status='discontinued'); keeps the CTA footprint but muted. */
.pcard-discont {
  background: rgba(150, 90, 60, 0.10);
  color: #8a4b2f;
  border: 1px solid rgba(150, 90, 60, 0.24);
  cursor: default;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  pointer-events: none;
}
.pcard-discont:hover { background: rgba(150, 90, 60, 0.10); }

/* css/blocks/275-pcard-type-actions.css */
/* =================== pcard-type-actions.css =================== */
/* Secondary lead actions block for all product card variants. */

.pcard-type-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.pcard-type-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: rgba(26, 23, 20, 0.72);
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.pcard-type-actions__btn:hover,
.pcard-type-actions__btn:focus-visible {
  border-color: #1a1714;
  background: #1a1714;
  color: #fff;
  transform: translateY(-1px);
}

/* css/blocks/276-pcard-type-modes.css */
/* =================== pcard-type-modes.css =================== */
/* Type badges and color accents only. No card media/swatch geometry here. */

.pcard-type-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.pcard-type-badge,
.pcard-mini__type {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 23px;
  padding: 4px 9px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 999px;
  background: rgba(246, 241, 232, 0.86);
  color: rgba(26, 23, 20, 0.64);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Material / board / timber — calm green. (real types: sheet_material/material/lumber) */
:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber) .pcard-type-badge,
:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber) .pcard-mini__type {
  border-color: rgba(99, 126, 92, 0.24);
  background: rgba(232, 239, 226, 0.86);
  color: #4d6944;
}

/* Шпон и панели — warm wood/gold. */
.pcard--type-veneer_panel .pcard-type-badge,
.pcard--type-veneer_panel .pcard-mini__type {
  border-color: rgba(166, 116, 38, 0.26);
  background: rgba(248, 238, 220, 0.9);
  color: #8a5a1c;
}

/* ЛКМ — amber/lacquer. */
.pcard--type-wood_finish .pcard-type-badge,
.pcard--type-wood_finish .pcard-mini__type {
  border-color: rgba(189, 143, 51, 0.24);
  background: rgba(252, 244, 219, 0.9);
  color: #815f16;
}

/* Клеевые материалы — cool blue. */
.pcard--type-adhesive .pcard-type-badge,
.pcard--type-adhesive .pcard-mini__type {
  border-color: rgba(82, 105, 142, 0.22);
  background: rgba(230, 237, 246, 0.88);
  color: #455f86;
}

.pcard--type-furniture .pcard-type-badge,
.pcard--type-furniture .pcard-mini__type {
  border-color: rgba(137, 94, 126, 0.22);
  background: rgba(244, 232, 239, 0.88);
  color: #744c68;
}

.pcard--type-lighting .pcard-type-badge,
.pcard--type-lighting .pcard-mini__type {
  border-color: rgba(189, 143, 51, 0.24);
  background: rgba(252, 244, 219, 0.9);
  color: #815f16;
}

.pcard--type-service .pcard-type-badge,
.pcard--type-service .pcard-mini__type {
  border-color: rgba(82, 105, 142, 0.22);
  background: rgba(230, 237, 246, 0.88);
  color: #455f86;
}

/* css/blocks/252-pcard-type-material.css */
/* =================== pcard-type-material.css =================== */
/* Owns material card media/swatch treatment only.
 * Type badges stay in 276-pcard-type-modes.css.
 *
 * Material / board / timber cards (ЛДСП, пластики, плиты, кромка, пиломатериал)
 * use a full-bleed swatch media instead of a tiny centered preview — this kills
 * the "empty beige tile" look for flat-colour decor images and keeps the catalog
 * grid premium. Veneer keeps its own treatment (253). Product-photo families
 * (ЛКМ/клей/фурнитура/инструмент) intentionally stay on `contain`.
 *
 * The `.pcard[data-pcard-variant]` prefix is intentional: it raises specificity
 * above the per-variant base `object-fit:contain`/`padding` (260-264, which load
 * later in the bundle) so the cover swatch actually wins. Real product_type
 * values are sheet_material / material / lumber. */

.pcard[data-pcard-variant]:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber)
  :is(.pcard-a__media, .pcard-b__media, .pcard-d__media, .pcard-media) {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(250, 246, 236, 0.72), rgba(239, 229, 211, 0.78));
}

.pcard[data-pcard-variant]:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber)
  :is(.pcard-a__media picture img, .pcard-b__media picture img, .pcard-d__media picture img, .pcard-media__img) {
  object-fit: cover;
  object-position: center;
  padding: 0;
}

.pcard[data-pcard-variant]:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber)
  :is(.pcard-a__media, .pcard-b__media, .pcard-d__media, .pcard-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
  opacity: 0.78;
  transition: opacity 0.25s ease;
}

.pcard[data-pcard-variant]:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber):hover
  :is(.pcard-a__media, .pcard-b__media, .pcard-d__media, .pcard-media)::after {
  opacity: 0.55;
}

.pcard[data-pcard-variant]:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber)
  :is(.pcard-a__ph, .pcard-b__ph, .pcard-d__ph, .pcard-media__placeholder) {
  background: transparent;
}

/* css/blocks/253-pcard-type-veneer.css */
/* =================== 253-pcard-type-veneer.css =================== */
/* Premium card type for «Шпонированный МДФ» (natural wood veneer panels).
 * Material-led: species is the hero (serif), warm-paper photo mount blends the
 * white-bg studio shots, light-sweep gloss on hover simulates light over polished
 * veneer. Scoped strictly to .pcard--type-veneer_panel — no cascade leakage. */

/* ---- card surface: warm paper ---- */
.pcard--type-veneer_panel.pcard--a {
  background: linear-gradient(180deg, #fffdf9 0%, #fbf6ee 100%);
  border-color: rgba(var(--hc-accent-rgb), 0.18);
}

/* ---- media: warm mount so white-bg studio shots blend; cover the frame ---- */
.pcard--type-veneer_panel .pcard-a__media {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 8%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #faf6ee 0%, #f0e6d5 100%);
}
.pcard--type-veneer_panel .pcard-a__media picture img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pcard--type-veneer_panel .pcard-a__media .pcard-a__ph { background: transparent; }

/* light-sweep gloss across the grain on hover */
.pcard--type-veneer_panel .pcard-a__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.5) 47%,
    rgba(255, 255, 255, 0) 64%);
  transform: translateX(-120%);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pcard--type-veneer_panel:hover .pcard-a__media::after { transform: translateX(120%); }
.pcard--type-veneer_panel:hover .pcard-a__media picture img { transform: scale(1.045); }

/* ---- body: eyebrow ---- */
.pcard--type-veneer_panel .pcard-vn__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 7px;
}
.pcard--type-veneer_panel .pcard-vn__natural {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent, var(--hc-accent));
}
.pcard--type-veneer_panel .pcard-vn__natural::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 7 4 11 4 15a8 8 0 0 0 16 0c0-4-3-8-8-13z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 7 4 11 4 15a8 8 0 0 0 16 0c0-4-3-8-8-13z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pcard--type-veneer_panel .pcard-vn__rare {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7d6122;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--hc-gold-rgb), 0.28), rgba(201, 169, 97, 0.18));
  border: 1px solid rgba(201, 169, 97, 0.5);
}

/* ---- species: the hero ---- */
.pcard--type-veneer_panel .pcard-vn__species {
  display: block;
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 21px;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  transition: color 0.2s ease;
}
.pcard--type-veneer_panel .pcard-vn__species:hover { color: var(--hc-accent, var(--hc-accent)); }

/* ---- spec chips ---- */
.pcard--type-veneer_panel .pcard-vn__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.pcard--type-veneer_panel .pcard-vn__chip {
  font-size: 11.5px;
  line-height: 1;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(var(--hc-accent-rgb), 0.07);
  border: 1px solid rgba(var(--hc-accent-rgb), 0.16);
  white-space: nowrap;
}
.pcard--type-veneer_panel .pcard-vn__chip--grade {
  font-weight: 600;
  color: #7a5e22;
  background: linear-gradient(180deg, rgba(var(--hc-gold-rgb), 0.24), rgba(201, 169, 97, 0.16));
  border-color: rgba(201, 169, 97, 0.45);
}

/* ---- "each sheet is unique" narrative ---- */
.pcard--type-veneer_panel .pcard-vn__unique {
  margin: 9px 0 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.005em;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.52));
}

@media (max-width: 600px) {
  .pcard--type-veneer_panel .pcard-vn__species { font-size: 18px; }
  .pcard--type-veneer_panel .pcard-vn__chip { font-size: 11px; padding: 3px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard--type-veneer_panel .pcard-a__media::after,
  .pcard--type-veneer_panel .pcard-a__media picture img { transition: none; }
  .pcard--type-veneer_panel:hover .pcard-a__media::after { transform: translateX(-120%); }
  .pcard--type-veneer_panel:hover .pcard-a__media picture img { transform: none; }
}

/* css/blocks/260-pcard-variant-a.css */
/* =================== pcard-variant-a.css =================== */
/* Variant A: editorial premium card for hero-like products and featured SKUs. */

.pcard[data-pcard-variant="a"] {
  --pc-a-media-ratio: 16 / 10;
  --pc-a-min-h: 468px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: var(--pc-a-min-h);
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px -20px rgba(24, 18, 12, 0.5);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pcard[data-pcard-variant="a"]:hover,
.pcard[data-pcard-variant="a"]:focus-within {
  transform: translateY(-4px);
  border-color: rgba(141, 109, 71, 0.34);
  box-shadow: 0 24px 38px -26px rgba(24, 18, 12, 0.62);
}

.pcard[data-pcard-variant="a"] .pcard-a__media-wrap {
  position: relative;
  border-bottom: 1px solid rgba(141, 109, 71, 0.12);
  background: linear-gradient(180deg, var(--hc-paper) 0%, var(--hc-bg-warm) 100%);
}

.pcard[data-pcard-variant="a"] .pcard-a__media {
  position: relative;
  display: block;
  aspect-ratio: var(--pc-a-media-ratio);
  overflow: hidden;
}

.pcard[data-pcard-variant="a"] .pcard-a__ph,
.pcard[data-pcard-variant="a"] .pcard-a__media picture,
.pcard[data-pcard-variant="a"] .pcard-a__media img {
  position: absolute;
  inset: 0;
}

.pcard[data-pcard-variant="a"] .pcard-a__ph {
  display: grid;
  place-items: center;
  padding: 10%;
}

.pcard[data-pcard-variant="a"] .pcard-a__media picture img,
.pcard[data-pcard-variant="a"] .pcard-a__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 6%;
  transition: transform 0.26s ease;
}

.pcard[data-pcard-variant="a"]:hover .pcard-a__media img,
.pcard[data-pcard-variant="a"]:focus-within .pcard-a__media img {
  transform: scale(1.04);
}

.pcard[data-pcard-variant="a"] .pcard-a__media.is-has-img .pcard-a__ph {
  display: none;
}

.pcard[data-pcard-variant="a"] .pcard-a__media.is-has-img.hc-media-fallback .pcard-a__ph {
  display: grid;
}

.pcard[data-pcard-variant="a"] .pcard-a__chips {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pcard[data-pcard-variant="a"] .pcard-a__chip {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #1a1714;
  color: #fff;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pcard[data-pcard-variant="a"] .pcard-a__chip--sale {
  background: #8b3f32;
}

.pcard[data-pcard-variant="a"] .pcard-a__rail {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcard[data-pcard-variant="a"] .pcard-a__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 13px;
  min-width: 0;
  min-height: 0;
}

.pcard[data-pcard-variant="a"] .pcard-type-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.pcard[data-pcard-variant="a"] .pcard-a__series,
.pcard[data-pcard-variant="a"] .pcard-a__sku {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard[data-pcard-variant="a"] .pcard-a__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(17px * 1.25 * 3);
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none;
}

.pcard[data-pcard-variant="a"] .pcard-a__rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(141, 109, 71, 0.2), transparent);
}

.pcard[data-pcard-variant="a"] .pcard-a__caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin: 0;
  min-height: calc(12px * 1.35);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(26, 23, 20, 0.66);
}

.pcard[data-pcard-variant="a"] .pcard-a__props {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 27px;
  overflow: hidden;
}

.pcard[data-pcard-variant="a"] .pcard-a__props::-webkit-scrollbar {
  display: none;
}

/* The base pill is an inline-flex box centred with justify-content, and
   text-overflow is ignored on a flex container — a long property value was cut
   mid-word on BOTH sides ("ilent System, петли SlideOn, Петля для складны").
   Fall back to inline-block + left-aligned text so the ellipsis actually
   renders; line-height keeps the 23px pill height that flex centring gave. */
.pcard[data-pcard-variant="a"] .pcard-a__props .pcard-c__pill {
  flex: 0 1 auto;
  display: inline-block;
  max-width: 100%;
  line-height: 13px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  scroll-snap-align: start;
}

/* Footer (price + CTA + secondary action) pinned to the card bottom. This is
   what keeps prices aligned across a row: the variable-height props/chips block
   above absorbs the slack via this margin-top:auto, so every card's price+CTA
   sits at the same baseline regardless of how many chip rows it has. */
.pcard[data-pcard-variant="a"] .pcard-a__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcard[data-pcard-variant="a"] .pcard-a__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 24px;
  gap: 6px 8px;
}

.pcard[data-pcard-variant="a"] .pcard-a__price-old {
  font-size: 12px;
  color: rgba(26, 23, 20, 0.42);
  text-decoration: line-through;
}

.pcard[data-pcard-variant="a"] .pcard-a__stock {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-height: 21px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(61, 107, 79, 0.24);
  background: rgba(61, 107, 79, 0.08);
  color: #2f6f4c;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard[data-pcard-variant="a"] .pcard-a__stock--low {
  border-color: rgba(166, 116, 38, 0.24);
  background: rgba(166, 116, 38, 0.1);
  color: #8d5d18;
}

.pcard[data-pcard-variant="a"] .pcard-a__stock--out {
  border-color: rgba(140, 57, 48, 0.24);
  background: rgba(140, 57, 48, 0.1);
  color: #8b3f32;
}

/* To-order: neutral (not alarming) — the common case for made-to-order stock. */
.pcard[data-pcard-variant="a"] .pcard-a__stock--order {
  border-color: rgba(26, 23, 20, 0.16);
  background: rgba(26, 23, 20, 0.04);
  color: rgba(26, 23, 20, 0.62);
}

.pcard[data-pcard-variant="a"] .pcard-a__price {
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(22px, 1.35vw, 26px);
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}

.pcard[data-pcard-variant="a"] .pcard-a__price--sale {
  color: #8b3f32;
}

.pcard[data-pcard-variant="a"] .pcard-a__price--ask {
  font-size: 15px;
  color: rgba(26, 23, 20, 0.58);
  font-style: italic;
}

.pcard[data-pcard-variant="a"] .pcard-a__cta {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #1a1714;
  border-radius: 10px;
  background: #1a1714;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.pcard[data-pcard-variant="a"] .pcard-a__cta:hover {
  transform: translateY(-1px);
}

.pcard[data-pcard-variant="a"] .pcard-a__cta--ghost {
  background: #fff;
  color: #1a1714;
}

.pcard[data-pcard-variant="a"] .pcard-a__cta--ghost:hover {
  background: #1a1714;
  color: #fff;
}

@media (max-width: 920px) {
  .pcard[data-pcard-variant="a"] {
    --pc-a-min-h: 430px;
  }
  .pcard[data-pcard-variant="a"] .pcard-a__title {
    font-size: 16px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pcard[data-pcard-variant="a"] .pcard-type-actions {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.22s ease, margin-top 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
  }

  .pcard[data-pcard-variant="a"]:hover .pcard-type-actions,
  .pcard[data-pcard-variant="a"]:focus-within .pcard-type-actions {
    max-height: 48px;
    margin-top: 2px;
    opacity: 1;
    transform: translateY(0);
  }
}

/* css/blocks/261-pcard-variant-b.css */
/* =================== pcard-variant-b.css =================== */
/* Variant B: compact premium rail card for tools/lighting/service positions. */

.pcard[data-pcard-variant="b"] {
  --pc-b-min-h: 432px;
  position: relative;
  display: grid;
  /* 6 content rows (media·series·title·caption·props·footer); the footer lands
     on the 1fr track so it pins to the card bottom and prices stay aligned. */
  grid-template-rows: auto auto auto auto auto 1fr auto;
  min-height: var(--pc-b-min-h);
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px -20px rgba(24, 18, 12, 0.5);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pcard[data-pcard-variant="b"]:hover,
.pcard[data-pcard-variant="b"]:focus-within {
  transform: translateY(-4px);
  border-color: rgba(141, 109, 71, 0.34);
  box-shadow: 0 24px 36px -26px rgba(24, 18, 12, 0.6);
}

.pcard[data-pcard-variant="b"] .pcard-b__media-wrap {
  position: relative;
  border-bottom: 1px solid rgba(141, 109, 71, 0.12);
  background: linear-gradient(180deg, var(--hc-paper) 0%, var(--hc-bg-warm) 100%);
}

.pcard[data-pcard-variant="b"] .pcard-b__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.pcard[data-pcard-variant="b"] .pcard-b__ph,
.pcard[data-pcard-variant="b"] .pcard-b__media picture,
.pcard[data-pcard-variant="b"] .pcard-b__media img {
  position: absolute;
  inset: 0;
}

.pcard[data-pcard-variant="b"] .pcard-b__ph {
  display: grid;
  place-items: center;
  padding: 10%;
}

.pcard[data-pcard-variant="b"] .pcard-b__media picture img,
.pcard[data-pcard-variant="b"] .pcard-b__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 10%;
  transition: transform 0.26s ease;
}

.pcard[data-pcard-variant="b"]:hover .pcard-b__media img,
.pcard[data-pcard-variant="b"]:focus-within .pcard-b__media img {
  transform: scale(1.03);
}

.pcard[data-pcard-variant="b"] .pcard-b__media.is-has-img .pcard-b__ph {
  display: none;
}

.pcard[data-pcard-variant="b"] .pcard-b__media.is-has-img.hc-media-fallback .pcard-b__ph {
  display: grid;
}

.pcard[data-pcard-variant="b"] .pcard-b__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pcard[data-pcard-variant="b"] .pcard-b__badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #1a1714;
  color: #fff;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pcard[data-pcard-variant="b"] .pcard-b__badge--sale {
  background: #8b3f32;
}

.pcard[data-pcard-variant="b"] .pcard-b__badge--new {
  background: #2f6f4c;
}

.pcard[data-pcard-variant="b"] .pcard-b__rail {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcard[data-pcard-variant="b"] .pcard-b__series,
.pcard[data-pcard-variant="b"] .pcard-b__title,
.pcard[data-pcard-variant="b"] .pcard-b__caption,
.pcard[data-pcard-variant="b"] .pcard-b__props,
.pcard[data-pcard-variant="b"] .pcard-type-actions,
.pcard[data-pcard-variant="b"] .pcard-b__bottom {
  margin-left: 13px;
  margin-right: 13px;
}

.pcard[data-pcard-variant="b"] .pcard-b__series {
  margin-top: 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.pcard[data-pcard-variant="b"] .pcard-b__series > span:first-child,
.pcard[data-pcard-variant="b"] .pcard-b__sku {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard[data-pcard-variant="b"] .pcard-b__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(18px * 1.16 * 2);
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 18px;
  line-height: 1.16;
  text-decoration: none;
}

.pcard[data-pcard-variant="b"] .pcard-b__caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin-top: 2px;
  margin-bottom: 0;
  min-height: calc(12px * 1.35);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(26, 23, 20, 0.66);
}

.pcard[data-pcard-variant="b"] .pcard-b__props {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.pcard[data-pcard-variant="b"] .pcard-b__props::-webkit-scrollbar {
  display: none;
}

.pcard[data-pcard-variant="b"] .pcard-b__prop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 23px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  background: rgba(252, 248, 240, 0.9);
  scroll-snap-align: start;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.pcard[data-pcard-variant="b"] .pcard-b__prop:hover {
  border-color: rgba(141, 109, 71, 0.42);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 18px -14px rgba(26, 23, 20, 0.38);
  transform: translateY(-1px);
}

.pcard[data-pcard-variant="b"] .pcard-b__prop span {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.52);
}

.pcard[data-pcard-variant="b"] .pcard-b__prop b {
  font-size: 11px;
  line-height: 1.2;
  color: #1a1714;
}

.pcard[data-pcard-variant="b"] .pcard-b__bottom {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(141, 109, 71, 0.2);
}

.pcard[data-pcard-variant="b"] .pcard-b__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pcard[data-pcard-variant="b"] .pcard-b__price {
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(24px, 1.7vw, 30px);
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}

.pcard[data-pcard-variant="b"] .pcard-b__rating {
  color: rgba(26, 23, 20, 0.62);
  font-size: 12px;
  white-space: nowrap;
}

.pcard[data-pcard-variant="b"] .pcard-b__cta {
  width: 100%;
  min-height: 44px;
  border: 1px solid #1a1714;
  border-radius: 10px;
  background: #1a1714;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 920px) {
  .pcard[data-pcard-variant="b"] {
    --pc-b-min-h: 404px;
  }
  .pcard[data-pcard-variant="b"] .pcard-b__title {
    font-size: 17px;
  }
}

/* css/blocks/263-pcard-variant-d.css */
/* =================== pcard-variant-d.css =================== */
/* Variant D: dense tagbar card for LKM kits and compatibility-heavy positions. */

.pcard[data-pcard-variant="d"] {
  --pc-d-min-h: 440px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: var(--pc-d-min-h);
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px -20px rgba(24, 18, 12, 0.5);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pcard[data-pcard-variant="d"]:hover,
.pcard[data-pcard-variant="d"]:focus-within {
  transform: translateY(-4px);
  border-color: rgba(141, 109, 71, 0.34);
  box-shadow: 0 24px 36px -26px rgba(24, 18, 12, 0.6);
}

.pcard[data-pcard-variant="d"] .pcard-d__media-wrap {
  position: relative;
  border-bottom: 1px solid rgba(141, 109, 71, 0.12);
  background: linear-gradient(180deg, var(--hc-paper) 0%, var(--hc-bg-warm) 100%);
}

.pcard[data-pcard-variant="d"] .pcard-d__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.pcard[data-pcard-variant="d"] .pcard-d__ph,
.pcard[data-pcard-variant="d"] .pcard-d__media picture,
.pcard[data-pcard-variant="d"] .pcard-d__media img {
  position: absolute;
  inset: 0;
}

.pcard[data-pcard-variant="d"] .pcard-d__ph {
  display: grid;
  place-items: center;
  padding: 10%;
}

.pcard[data-pcard-variant="d"] .pcard-d__media picture img,
.pcard[data-pcard-variant="d"] .pcard-d__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 10%;
  transition: transform 0.26s ease;
}

.pcard[data-pcard-variant="d"]:hover .pcard-d__media img,
.pcard[data-pcard-variant="d"]:focus-within .pcard-d__media img {
  transform: scale(1.03);
}

.pcard[data-pcard-variant="d"] .pcard-d__media.is-has-img .pcard-d__ph {
  display: none;
}

.pcard[data-pcard-variant="d"] .pcard-d__media.is-has-img.hc-media-fallback .pcard-d__ph {
  display: grid;
}

.pcard[data-pcard-variant="d"] .pcard-d__pill-row {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}

.pcard[data-pcard-variant="d"] .pcard-d__pills-l {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pcard[data-pcard-variant="d"] .pcard-d__pill {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  background: rgba(252, 248, 240, 0.92);
  color: #5b4732;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pcard[data-pcard-variant="d"] .pcard-d__pill--sale {
  border-color: rgba(139, 63, 50, 0.4);
  background: rgba(139, 63, 50, 0.9);
  color: #fff;
}

.pcard[data-pcard-variant="d"] .pcard-d__rail {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcard[data-pcard-variant="d"] .pcard-d__body {
  display: grid;
  /* top·title·caption·tag-bar·footer — footer on the 1fr track so it pins to the
     bottom; the tag-bar above can wrap to 2 rows without shifting the price. */
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 8px;
  padding: 13px 14px 14px;
  min-width: 0;
}

.pcard[data-pcard-variant="d"] .pcard-d__top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.pcard[data-pcard-variant="d"] .pcard-d__series,
.pcard[data-pcard-variant="d"] .pcard-d__sku {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard[data-pcard-variant="d"] .pcard-d__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(18px * 1.16 * 2);
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 18px;
  line-height: 1.16;
  text-decoration: none;
}

.pcard[data-pcard-variant="d"] .pcard-d__caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin: 0;
  min-height: calc(12px * 1.35);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(26, 23, 20, 0.66);
}

.pcard[data-pcard-variant="d"] .pcard-d__tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
  max-height: 62px;
  overflow: hidden;
}

.pcard[data-pcard-variant="d"] .pcard-d__tag {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  min-height: 23px;
  padding: 4px 8px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  border-radius: 999px;
  background: rgba(252, 248, 240, 0.9);
}

.pcard[data-pcard-variant="d"] .pcard-d__tag-k {
  flex: 0 0 auto;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.52);
}

.pcard[data-pcard-variant="d"] .pcard-d__tag-v {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.2;
  color: #1a1714;
}

.pcard[data-pcard-variant="d"] .pcard-d__bottom {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(141, 109, 71, 0.2);
}

.pcard[data-pcard-variant="d"] .pcard-d__price {
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(24px, 1.7vw, 30px);
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}

.pcard[data-pcard-variant="d"] .pcard-d__price--ask {
  font-size: 15px;
  color: rgba(26, 23, 20, 0.55);
  font-style: italic;
}

.pcard[data-pcard-variant="d"] .pcard-d__cta {
  width: 100%;
  min-height: 44px;
  border: 1px solid #1a1714;
  border-radius: 10px;
  background: #1a1714;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 920px) {
  .pcard[data-pcard-variant="d"] {
    --pc-d-min-h: 408px;
  }
  .pcard[data-pcard-variant="d"] .pcard-d__title {
    font-size: 17px;
  }
}

/* css/blocks/264-pcard-variant-mini.css */
/* =================== pcard-variant-mini.css =================== */
/* Variant MINI: compact card for side rails and recommendation strips. */

.pcard[data-pcard-variant="mini"] {
  --pc-mini-min-h: 366px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  max-width: 100%;
  min-height: var(--pc-mini-min-h);
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 20px -18px rgba(24, 18, 12, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pcard[data-pcard-variant="mini"]:hover,
.pcard[data-pcard-variant="mini"]:focus-within {
  transform: translateY(-3px);
  border-color: rgba(141, 109, 71, 0.3);
  box-shadow: 0 18px 28px -20px rgba(24, 18, 12, 0.56);
}

.pcard[data-pcard-variant="mini"] .pcard-mini__media {
  position: relative;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, var(--hc-paper) 0%, var(--hc-bg-warm) 100%);
  overflow: hidden;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__ph,
.pcard[data-pcard-variant="mini"] .pcard-mini__img {
  position: absolute;
  inset: 0;
  max-width: 100%;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__ph {
  display: grid;
  place-items: center;
  padding: 10%;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 10%;
  transition: transform 0.24s ease;
}

.pcard[data-pcard-variant="mini"]:hover .pcard-mini__img,
.pcard[data-pcard-variant="mini"]:focus-within .pcard-mini__img {
  transform: scale(1.03);
}

.pcard[data-pcard-variant="mini"] .pcard-mini__discount,
.pcard[data-pcard-variant="mini"] .pcard-mini__hit {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #1a1714;
  color: #fff;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__discount {
  background: #8b3f32;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__hit--new {
  background: #2f6f4c;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__body {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 11px;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  min-height: calc(15px * 1.18 * 2);
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 15px;
  line-height: 1.18;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__type,
.pcard[data-pcard-variant="mini"] .pcard-mini__sku {
  min-width: 0;
  max-width: 100%;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__price-row {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding-top: 8px;
  border-top: 1px dashed rgba(141, 109, 71, 0.18);
}

.pcard[data-pcard-variant="mini"] .pcard-mini__old {
  font-size: 11px;
  color: rgba(26, 23, 20, 0.42);
  text-decoration: line-through;
}

.pcard[data-pcard-variant="mini"] .pcard-mini__price {
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 22px;
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 920px) {
  .pcard[data-pcard-variant="mini"] {
    --pc-mini-min-h: 300px;
  }
}

/* v8.7 — mini card converted from <a> to <article> + stretched-link + quick-order button.
 * Title link covers the whole card via ::after; quick-order button sits above it. */
.pcard[data-pcard-variant="mini"] .pcard-mini__link {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  outline-offset: 3px;
}
.pcard[data-pcard-variant="mini"] .pcard-mini__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Quick-view eye — top-right over media, reveals on hover (touch: always on). */
.pcard[data-pcard-variant="mini"] .pcard-mini__qv {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  color: #1a1714;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.18s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pcard[data-pcard-variant="mini"]:hover .pcard-mini__qv,
.pcard[data-pcard-variant="mini"]:focus-within .pcard-mini__qv {
  opacity: 1;
  transform: translateY(0);
}
.pcard[data-pcard-variant="mini"] .pcard-mini__qv:hover {
  background: #fff;
  border-color: rgba(141, 109, 71, 0.4);
}

/* Primary cart / notify action — always visible, full width, pinned to bottom. */
.pcard[data-pcard-variant="mini"] .pcard-mini__cart {
  position: relative;
  z-index: 3;
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: #15120f;
  color: #fff;
  font-family: var(--hc-sans, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.pcard[data-pcard-variant="mini"] .pcard-mini__cart svg {
  flex: none;
}
.pcard[data-pcard-variant="mini"] .pcard-mini__cart:hover {
  background: #000;
  transform: translateY(-1px);
}
.pcard[data-pcard-variant="mini"] .pcard-mini__cart--notify {
  background: transparent;
  color: #1a1714;
  border: 1px solid rgba(141, 109, 71, 0.32);
}
.pcard[data-pcard-variant="mini"] .pcard-mini__cart--notify:hover {
  background: rgba(141, 109, 71, 0.08);
  color: #1a1714;
}
.pcard[data-pcard-variant="mini"] .pcard-mini__price--ask {
  font-size: 15px;
  font-style: italic;
  color: rgba(26, 23, 20, 0.6);
}

@media (max-width: 480px) {
  .pcard[data-pcard-variant="mini"],
  .pcard[data-pcard-variant="mini"] .pcard-mini__media,
  .pcard[data-pcard-variant="mini"] .pcard-mini__body,
  .pcard[data-pcard-variant="mini"] .pcard-mini__link,
  .pcard[data-pcard-variant="mini"] .pcard-mini__title,
  .pcard[data-pcard-variant="mini"] .pcard-mini__type,
  .pcard[data-pcard-variant="mini"] .pcard-mini__sku,
  .pcard[data-pcard-variant="mini"] .pcard-mini__price-row,
  .pcard[data-pcard-variant="mini"] .pcard-mini__cart {
    min-width: 0;
    max-width: 100%;
  }
}

/* css/blocks/297-pcard-ind.css */
/* ===== 297-pcard-ind.css — IND product card (industrial layout family) =====
   Fresh class namespace .pcard-ind → zero collisions with a/b/c/d/mini.
   Tokens-driven: on the industrial theme accents are green, corners sharp. */

.pcard-ind {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hc-paper);
  border: 1px solid var(--hc-line-2);
  border-radius: var(--hc-r-xs);
  transition: border-color var(--hc-dur-base) var(--hc-ease), box-shadow var(--hc-dur-base) var(--hc-ease), transform var(--hc-dur-base) var(--hc-ease);
}
.pcard-ind:hover {
  border-color: var(--hc-accent);
  box-shadow: 0 14px 34px -22px rgba(var(--hc-accent-rgb), 0.55);
  transform: translateY(-2px);
}

/* top spec row */
.pcard-ind__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hc-line);
}
.pcard-ind__sku {
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-xs);
  letter-spacing: 0.04em;
  color: var(--hc-ink-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-ind__stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--hc-fs-xxs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hc-ink-soft);
  white-space: nowrap;
}
.pcard-ind__stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hc-accent);
}
.pcard-ind__stock--out::before,
.pcard-ind__stock--none::before { background: var(--hc-ink-muted); }
.pcard-ind__stock--low::before { background: var(--hc-warning); }

/* media */
.pcard-ind__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--hc-paper-3);
  overflow: hidden;
}
.pcard-ind__ph,
.pcard-ind__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pcard-ind__ph { display: grid; place-items: center; }
.pcard-ind__img { object-fit: contain; padding: 10px; }
.pcard-ind__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-xxs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-paper);
  background: var(--hc-ink);
  border-radius: var(--hc-r-xs);
}
.pcard-ind__badge--sale { background: var(--hc-danger); }
.pcard-ind__badge--new { background: var(--hc-accent); }
.pcard-ind__qv {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--hc-ink-soft);
  background: var(--hc-paper);
  border: 1px solid var(--hc-line-2);
  border-radius: var(--hc-r-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--hc-dur-fast) var(--hc-ease), color var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease);
}
.pcard-ind:hover .pcard-ind__qv,
.pcard-ind__qv:focus-visible { opacity: 1; }
.pcard-ind__qv:hover { color: var(--hc-accent); border-color: var(--hc-accent); }

/* body */
.pcard-ind__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 12px;
}
.pcard-ind__link { text-decoration: none; color: inherit; }
.pcard-ind__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard-ind__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--hc-serif);
  font-size: var(--hc-fs-md);
  font-weight: 600;
  line-height: var(--hc-lh-snug);
  color: var(--hc-ink);
  min-height: calc(2 * 1.25em);
}
.pcard-ind__type {
  font-size: var(--hc-fs-xs);
  color: var(--hc-ink-mid);
}

/* footer: price + square cta */
.pcard-ind__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hc-line);
}
.pcard-ind__price-w { display: flex; flex-direction: column; }
.pcard-ind__old {
  font-size: var(--hc-fs-xs);
  color: var(--hc-ink-muted);
  text-decoration: line-through;
}
.pcard-ind__price {
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-lg);
  font-weight: 600;
  color: var(--hc-ink);
  white-space: nowrap;
}
.pcard-ind__price small { font-size: 0.72em; color: var(--hc-ink-soft); }
.pcard-ind__price--ask { font-size: var(--hc-fs-sm); font-weight: 500; color: var(--hc-ink-soft); }
.pcard-ind__cart {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: var(--hc-paper);
  background: var(--hc-accent);
  border: 1px solid var(--hc-accent);
  border-radius: var(--hc-r-xs);
  cursor: pointer;
  transition: background var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease), transform var(--hc-dur-fast) var(--hc-ease);
}
.pcard-ind__cart:hover { background: var(--hc-accent-dark); border-color: var(--hc-accent-dark); transform: translateY(-1px); }
.pcard-ind__cart--ask { color: var(--hc-ink-soft); background: var(--hc-paper); border-color: var(--hc-line-2); }
.pcard-ind__cart--ask:hover { color: var(--hc-accent); background: var(--hc-paper); border-color: var(--hc-accent); }

/* css/blocks/302-pcard-sc.css */
/* ===== 302-pcard-sc.css — SC borderless card (V5 · HAY reference) =====
   Image is the card; no chrome. Quick-add pill on hover. Tokens-driven. */

/* flex-колонка: инфо-блок тянется, ряд «цена+корзина» прижат к низу —
   карточки в гриде заканчиваются на одной линии */
.pcard-sc { position: relative; display: flex; flex-direction: column; height: 100%; }

.pcard-sc__media {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--hc-r-md);
  overflow: hidden;
  background: var(--hc-paper-3);
}
.pcard-sc__ph,
.pcard-sc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s var(--hc-ease);
}
.pcard-sc__ph { display: grid; place-items: center; }
/* One treatment for every card. The fit used to be chosen by product type:
   texture swatches filled the tile while hardware, furniture, finishes and
   tools were contained, padded and scaled up to compensate for supplier
   packshots with white margins. Side by side in the same rail — and they always
   are, these rails mix types — that reads as two different card designs, and
   the type is the wrong signal anyway: a photograph of a fitted kitchen is
   filed under "furniture" and got packshot treatment. */
.pcard-sc__img { object-fit: cover; transform: scale(1); }
.pcard-sc:hover .pcard-sc__ph { transform: scale(1.04); filter: brightness(1.03); }
.pcard-sc:hover .pcard-sc__img { transform: scale(1.04); filter: brightness(1.03); }


.pcard-sc__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hc-ink);
  background: var(--hc-paper);
  border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgba(29, 29, 27, 0.4);
}
.pcard-sc__badge--sale { color: #fff; background: var(--hc-danger); }
.pcard-sc__badge--low { color: var(--hc-warning); }

.pcard-sc__quick {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3; /* above the stretched .pcard-sc__info::after link */
  display: flex;
  justify-content: center;
  padding: 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hc-ink);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s;
}
.pcard-sc:hover .pcard-sc__quick,
.pcard-sc__quick:focus-visible { opacity: 1; transform: none; outline: none; }
.pcard-sc__quick:hover { color: #fff; background: var(--hc-accent); }
.pcard-sc__quick--ask:hover { color: #fff; background: var(--hc-ink); }
/* touch devices: pill always visible */
@media (hover: none) {
  .pcard-sc__quick { opacity: 1; transform: none; }
}

.pcard-sc__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 12px 2px 2px;
}
/* txt is the product link; ::after stretches it over the whole card, the
   bottom row (price + cart) floats above it via z-index */
.pcard-sc__txt {
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.pcard-sc__txt::after { content: ""; position: absolute; inset: 0; }
/* нижний ряд: цена слева, корзина справа, прижат к низу карточки */
.pcard-sc__side {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}
/* always-visible add-to-cart with a drawn cart icon; .is-added (set by the
   hx-on handler) morphs it into a checkmark for 1.6s */
.pcard-sc__cart {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--hc-accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s var(--hc-ease), transform 0.16s var(--hc-ease);
}
.pcard-sc__cart:hover { background: var(--hc-accent-dark); transform: translateY(-1px); }
.pcard-sc__cart:active { transform: scale(0.94); }
.pcard-sc__cart .scCart { width: 19px; height: 19px; overflow: visible; }
.pcard-sc__cart .scCart__body { stroke-dasharray: 44; stroke-dashoffset: 0; }
.pcard-sc__cart:hover .scCart__body { animation: scCartDraw 0.6s var(--hc-ease); }
@keyframes scCartDraw { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }
.pcard-sc__cart .scCart__check {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  opacity: 0;
  transition: stroke-dashoffset 0.28s var(--hc-ease) 0.08s, opacity 0.1s ease 0.08s;
}
.pcard-sc__cart.is-added .scCart__check { opacity: 1; stroke-dashoffset: 0; }
.pcard-sc__cart.is-added .scCart__body,
.pcard-sc__cart.is-added .scCart__wheel { opacity: 0.28; transition: opacity 0.15s ease; }
.pcard-sc__cart.is-added { background: var(--hc-accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .pcard-sc__cart:hover .scCart__body { animation: none; }
}
.pcard-sc__txt b {
  /* имя во всю ширину карточки, максимум 3 строки */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hc-ink);
}
.pcard-sc__txt em {
  /* до 2 значений свойств через «·» — строго одной строкой, длинные
     значения обрезаются, чтобы низ карточек не расползался */
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--hc-ink-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .pcard-sc__pr / .pcard-sc__pr s defined once below («accent price») */

/* stock pill in meta row */
.sc-stock {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--hc-success-soft);
  color: var(--hc-accent-dark);
  vertical-align: 1px;
}
.sc-stock--low { background: var(--hc-warning-soft); color: var(--hc-warning); }
.sc-stock--order, .sc-stock--out, .sc-stock--none { background: var(--hc-paper-3); color: var(--hc-ink-mid); }

/* hover action cluster: quickview + one-click */
.pcard-sc__acts {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 1;
  transition: opacity 0.22s var(--hc-ease), transform 0.22s var(--hc-ease);
}
.pcard-sc__media:hover .pcard-sc__acts,
.pcard-sc__acts:focus-within { opacity: 1; transform: none; }
.pcard-sc__act {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--hc-ink);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 22px -10px rgba(29, 29, 27, 0.4);
  cursor: pointer;
  transition: color 0.15s var(--hc-ease), transform 0.15s var(--hc-ease);
}
.pcard-sc__act:hover { color: var(--hc-accent); transform: scale(1.08); }
.pcard-sc__act:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }
@media (hover: none) { .pcard-sc__acts { opacity: 1; transform: none; } }

/* badge stack: stable top-left position */
.pcard-sc__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.pcard-sc__badges .pcard-sc__badge { position: static; }
.pcard-sc__badge--new { color: var(--hc-accent-dark); }
.pcard-sc__badge--st { background: rgba(255, 255, 255, 0.92); color: var(--hc-accent-dark); }
.pcard-sc__badge--st.sc-stock--low { color: var(--hc-warning); }
.pcard-sc__badge--st.sc-stock--order, .pcard-sc__badge--st.sc-stock--out { color: var(--hc-ink-mid); }
/* props panel on hover */
.pcard-sc__props {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 64px;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--hc-ink-soft);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  box-shadow: 0 14px 30px -18px rgba(29, 29, 27, 0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s var(--hc-ease), transform 0.22s var(--hc-ease);
  pointer-events: none;
}
.pcard-sc__media:hover .pcard-sc__props { opacity: 1; transform: none; }
.pcard-sc__props i {
  font-style: normal;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-sc__props i b { font-weight: 600; color: var(--hc-ink); font-variant-numeric: tabular-nums; }
/* accent price */
.pcard-sc__pr {
  font-size: 17px;
  font-weight: 800;
  color: var(--hc-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pcard-sc__pr s { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 500; color: var(--hc-ink-muted); }
.pcard-sc__info:hover .pcard-sc__pr { color: var(--hc-accent-dark); }

/* action cluster: always visible + toggle states (fav = red, compare = accent) */
.pcard-sc__act.hc-atc-fav.is-active { background: #c0392b; color: #fff; }
.pcard-sc__act.hc-atc-fav.is-active svg { fill: currentColor; }
.pcard-sc__act.hc-atc-cmp.is-active { background: var(--hc-accent); color: #fff; }

/* css/blocks/303-pcard-row.css */
/* ===== 303-pcard-row.css — ROW spec card + "pro" catalog view (V8 · McMaster) =====
   .pcard-row works standalone; .page-catalog--pro turns the results grid into
   a single-column spec table with warm row-hover. Tokens-driven, no !important. */

.pcard.pcard-row {
  position: relative;
  display: grid;
  /* Fixed buy column: with `auto` its width varied per row («305 ₽ +» vs
     «по запросу ?»), so the specs column started at a different x in every
     row and the table read as if columns "danced". */
  grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  background: var(--hc-paper);
  border-bottom: 1px solid var(--hc-line);
  transition: background 0.12s var(--hc-ease);
}
.pcard.pcard-row:hover { background: #fbf7e8; }
.pcard-row__link { position: absolute; inset: 0; z-index: 1; }
.pcard-row__link:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: -2px; }

.pcard-row__thumb {
  position: relative;
  width: 96px;
  height: 72px;
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-sm);
  background: var(--hc-paper-2);
  overflow: hidden;
}
.pcard-row__ph,
.pcard-row__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcard-row__ph { display: grid; place-items: center; transform: scale(0.62); }
.pcard-row__img { object-fit: contain; padding: 4px; }

.pcard-row__name b {
  /* Clamp to 2 lines: plain overflow/ellipsis never truncated wrapping text,
     so long names grew rows unevenly and pushed columns around. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hc-ink);
}
.pcard-row__name span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--hc-ink-mid);
}

.pcard-row__specs {
  /* Aligned label/value columns (McMaster look). The old space-between flex
     pushed values to the far right edge, so mixed-length labels and values
     read as two disconnected ragged columns. display:contents lifts each
     <i><span>label</span><b>value</b></i> pair into this shared grid. */
  display: grid;
  /* Fixed label column so labels/values line up ACROSS rows, not only inside
     one card (max-content gave every card its own label width). 120px: long
     labels ellipsize, values get the freed width. */
  grid-template-columns: 120px minmax(0, 1fr);
  /* Every row reserves the same two spec lines.  Products with one fallback
     value (for example, a product type) must not vertically re-centre that
     value while products with dimensions use two lines. */
  grid-template-rows: repeat(2, minmax(18px, auto));
  min-height: 40px;
  column-gap: 16px;
  row-gap: 4px;
  align-content: start;
  font-size: 12.5px;
  color: var(--hc-ink-soft);
  min-width: 0;
}
.pcard-row__specs i {
  font-style: normal;
  display: contents;
}
.pcard-row__specs i span {
  max-width: 190px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.pcard-row__specs i b {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-weight: 600;
  color: var(--hc-ink);
  font-variant-numeric: tabular-nums;
}

.pcard-row__buy {
  position: relative;
  z-index: 2;
  /* Fixed inner columns keep price and action aligned across every product:
     «по запросу» previously moved the question button relative to «147 ₽». */
  display: grid;
  /* 90px fitted «В НАЛИЧИИ» and nothing longer: «НАЛИЧИЕ ПОДТВЕРЖДЕНО» and
     «СНЯТ С ПРОИЗВОДСТВА» are twice that, and with nowrap they ran straight
     out of the column and over the price. Wider column, and the badge is
     allowed to wrap instead of escaping. */
  grid-template-columns: 112px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pcard-row__st {
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 9px;
  border-radius: var(--hc-r-xs);
  background: var(--hc-success-soft);
  color: var(--hc-accent-dark);
  overflow: hidden;
  overflow-wrap: anywhere;
}
.pcard-row__st--w { background: var(--hc-warning-soft); color: var(--hc-warning); }
.pcard-row__pr {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--hc-ink);
  font-variant-numeric: tabular-nums;
}
.pcard-row__pr-sale {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}
.pcard-row__pr-sale s {
  color: var(--hc-ink-mid);
  text-decoration-thickness: 1px;
}
.pcard-row__pr-sale em {
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--hc-danger-soft, #f8e6e2);
  color: var(--hc-danger, #9e3d2f);
  font-style: normal;
  font-weight: 800;
}
.pcard-row__pr-now {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard-row__pr small { font-weight: 600; color: var(--hc-ink-mid); }
.pcard-row__add {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: var(--hc-accent);
  border: 0;
  border-radius: var(--hc-r-sm);
  cursor: pointer;
  transition: background 0.13s var(--hc-ease), transform 0.13s var(--hc-ease);
}
.pcard-row__add:hover { background: var(--hc-accent-dark); transform: scale(1.05); }
.pcard-row__add--ask { color: var(--hc-ink-soft); background: var(--hc-paper); box-shadow: inset 0 0 0 1.5px var(--hc-line-2); }
.pcard-row__add--ask:hover { color: var(--hc-accent); background: var(--hc-paper); box-shadow: inset 0 0 0 1.5px var(--hc-accent); transform: none; }

/* ── PRO catalog view: grid → spec table ── */
.page-catalog--pro .hc-pgrid:not(.hc-pgrid--cards) {
  display: block;
  border: 1px solid var(--hc-line-2);
  border-radius: var(--hc-r-md);
  overflow: hidden;
  background: var(--hc-paper);
}
.page-catalog--pro .hc-pgrid > .pcard-row:last-child { border-bottom: 0; }
/* card view (?view=grid): sc-cards in a responsive grid */
.page-catalog--pro .hc-pgrid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
/* A 230px minimum fits exactly once in the 358px a phone leaves, so the whole
   catalogue came down one card per screen: a 358x358 photograph, a name, and
   scroll again for the next. This rule carries two classes and quietly beat the
   two-column default in hc-pgrid.css, which is why raising that default did
   nothing here. Two columns, and the gap comes down to pay for them. */
@media (max-width: 560px) {
  .page-catalog--pro .hc-pgrid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
/* search focus: warm highlight ring (McMaster signature) */
.page-catalog--pro .hc-cat-head__search:focus-within { box-shadow: 0 0 0 3px #ffe9a8; }

@media (max-width: 860px) {
  .pcard.pcard-row { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .pcard-row__specs { display: none; }
  .pcard-row__thumb { width: 72px; height: 56px; }
}
@media (max-width: 560px) {
  .pcard.pcard-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 10px; }
  .pcard-row__thumb { width: 56px; height: 46px; }
  .pcard-row__buy { grid-column: 1 / -1; justify-content: flex-end; }
}

/* css/blocks/306-product-media-outline.css */
/* Real light/solid decors can look like empty placeholders on warm cards, so a
   faint contour keeps white HPL, paint and swatch images readable.
   It used to be drawn 8-20px INSIDE the media box. On a flat swatch that is a
   frame; on a photograph — a kitchen interior, a packshot — it is a rounded
   rectangle ruled across the picture, which is what it looked like. It now
   traces the edge of the tile, where a frame belongs. */
.pcard-a__media.is-has-img::after,
.pcard-b__media.is-has-img::after,
.pcard-c__media.pcard-media--has-img::after,
.pcard-d__media.is-has-img::after,
.pcard-ind__media:has(.pcard-ind__img)::after,
.pcard-mini__media:has(.pcard-mini__img)::after,
.pcard-sc__media:has(.pcard-sc__img)::after,
.pcard-row__thumb:has(.pcard-row__img)::after,
.hc-pdp-gallery__thumb:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(74, 58, 38, 0.12);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

/* css/blocks/307-pcard-stability.css */
/* Stable product interactions.
 *
 * Product tiles are reading surfaces, not floating controls.  Moving the
 * card, image, chip or CTA on hover makes the grid shimmer and causes nearby
 * controls to jump under the pointer.  Keep the premium colour/shadow states
 * from the component modules, but pin their geometry.
 */
.pcard[data-pcard-variant="a"]:hover,
.pcard[data-pcard-variant="a"]:focus-within,
.pcard[data-pcard-variant="b"]:hover,
.pcard[data-pcard-variant="b"]:focus-within,
.pcard[data-pcard-variant="c"]:hover .pcard-shell,
.pcard[data-pcard-variant="c"]:focus-within .pcard-shell,
.pcard[data-pcard-variant="d"]:hover,
.pcard[data-pcard-variant="d"]:focus-within,
.pcard[data-pcard-variant="mini"]:hover,
.pcard[data-pcard-variant="mini"]:focus-within,
.pcard-ind:hover { transform: none; }

.pcard[data-pcard-variant="a"]:hover .pcard-a__media img,
.pcard[data-pcard-variant="a"]:focus-within .pcard-a__media img,
.pcard[data-pcard-variant="b"]:hover .pcard-b__media img,
.pcard[data-pcard-variant="b"]:focus-within .pcard-b__media img,
.pcard[data-pcard-variant="c"]:hover .pcard-media__img,
.pcard[data-pcard-variant="c"]:focus-within .pcard-media__img,
.pcard[data-pcard-variant="c"]:hover .pcard-media picture img,
.pcard[data-pcard-variant="c"]:focus-within .pcard-media picture img,
.pcard[data-pcard-variant="d"]:hover .pcard-d__media img,
.pcard[data-pcard-variant="d"]:focus-within .pcard-d__media img,
.pcard[data-pcard-variant="mini"]:hover .pcard-mini__img,
.pcard[data-pcard-variant="mini"]:focus-within .pcard-mini__img,
.pcard--type-veneer_panel:hover .pcard-a__media picture img { transform: none; }

/* Packshots keep their static compensation for white inner margins; only the
 * hover zoom is removed. */
.pcard-sc:hover .pcard-sc__ph { transform: none; }
.pcard-sc:hover .pcard-sc__img { transform: scale(1); }

/* The vertical action rail used to slide two pixels on hover.  That is enough
 * to make an icon evade a pointer on small cards, so retain the opacity state
 * only. */
.pcard[data-pcard-variant="c"]:hover .pcard-overlay__actions,
.pcard[data-pcard-variant="c"]:focus-within .pcard-overlay__actions { transform: none; }

.pcard-act:hover,
.pcard-c__pill:hover,
.pcard[data-pcard-variant="a"] .pcard-a__cta:hover,
.pcard[data-pcard-variant="b"] .pcard-b__prop:hover,
.pcard[data-pcard-variant="c"] .pcard-c__cta:hover,
.pcard[data-pcard-variant="d"] .pcard-d__cta:hover,
.pcard[data-pcard-variant="mini"] .pcard-mini__cart:hover,
.pcard-ind__cart:hover,
.pcard-sc__cart:hover,
.pcard-sc__act:hover,
.pcard-row__add:hover,
.pcard-type-actions__btn:hover,
.pcard-type-actions__btn:focus-visible { transform: none; }

.pcard-sc__quick { transform: none; transition: opacity .28s ease, background .15s ease; }
.pcard-sc__quick:focus-visible,
.pcard-sc:hover .pcard-sc__quick { transform: none; }
.pcard-sc__acts,
.pcard-sc__props { transform: none; }
.pcard-sc__media:hover .pcard-sc__acts,
.pcard-sc__acts:focus-within,
.pcard-sc__media:hover .pcard-sc__props { transform: none; }

/* ── Narrow cards ───────────────────────────────────────────────────────────
   The catalogue keeps two columns on a phone, which leaves each card about
   175px of body width. At that size the type badge ("ЛИСТОВЫЕ МАТЕРИАЛЫ") and
   the article number run past the card edge, the price and the stock chip
   fight over one nowrap row, and the price breaks after the digits leaving a
   lone "₽" on its own line. Give the card a narrow reading: identity and price
   stay, the redundant taxonomy goes — the visitor is standing in that
   category already. */
@media (max-width: 479px) {
  /* The variant modules set these with `.pcard[data-pcard-variant=...]`, which
     outranks a two-class selector — match their specificity to win. */
  .hc-pgrid .pcard[data-pcard-variant] .pcard-type-head,
  .hc-pgrid .pcard[data-pcard-variant] .pcard-d__top-row,
  .hc-pgrid .pcard[data-pcard-variant] .pcard-a__sku,
  .hc-pgrid .pcard[data-pcard-variant] .pcard-d__sku {
    display: none;
  }
  .hc-pgrid .pcard[data-pcard-variant] .pcard-a__price,
  .hc-pgrid .pcard[data-pcard-variant] .pcard-a__price-old,
  .hc-pgrid .pcard[data-pcard-variant] .pcard-d__price {
    white-space: nowrap;
    font-size: 19px;
  }
  .hc-pgrid .pcard[data-pcard-variant] .pcard-a__row {
    flex-wrap: wrap;
  }
  .hc-pgrid .pcard[data-pcard-variant] .pcard-a__stock {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* css/blocks/218-tile-badge.css */
/* =================== tile-badge.css =================== */
.hc-pcard:hover .tile-badge, .iconcard:hover .tile-badge, .delivery-stats__item:hover .tile-badge {transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 18px rgba(27, 20, 13, 0.10); background: linear-gradient(180deg, rgba(var(--hc-gold-rgb), 0.32), rgba(var(--hc-gold-rgb), 0.16))}
.hc-pcard:hover .tile-badge {opacity: 1; transform: translateY(-3px) scale(1.06)}
.iconcard .tile-badge {display: none}
.delivery-stats__item .tile-badge {position: absolute; top: 50%; right: 16px; left: auto; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42)); display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 8px rgba(var(--hc-accent-rgb), 0.10)}
.delivery-stats__item .tile-badge .tile-badge__ring {opacity: 0.25; stroke: currentColor}
.delivery-stats__item .tile-badge .tile-badge__shape {stroke: currentColor; opacity: 0.85; animation: none}

/* css/blocks/221-hc-qv.css */
/* =================== hc-qv.css =================== */
body.hc-modal-open {
  overflow: hidden;
}

.hc-qv {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
  background: rgba(26, 23, 20, 0.48);
  backdrop-filter: blur(10px);
}

.hc-qv__panel {
  position: relative;
  width: min(1100px, 100%);
  max-height: calc(100dvh - 64px);
  overflow: hidden;
  border-radius: var(--sf-radius-xl, 24px);
  border: 1px solid rgba(224, 210, 190, 0.9);
  background: var(--hc-paper, #fffaf2);
  box-shadow: 0 34px 90px rgba(26, 23, 20, 0.28);
}

.hc-qv__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(54, 45, 34, 0.14);
  border-radius: 50%;
  background: rgba(255, 252, 247, 0.92);
  color: var(--sf-ink, #1a1714);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(26, 23, 20, 0.12);
}

.hc-qv__close:hover {
  background: #fff;
}

.hc-qv__body {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  max-height: inherit;
  padding: clamp(22px, 2.8vw, 42px);
}

.hc-qv__gallery {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  max-height: 570px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 80%, rgba(184, 154, 112, 0.14) 0 20%, transparent 21%),
    radial-gradient(circle at 86% 16%, rgba(120, 137, 115, 0.14) 0 19%, transparent 20%),
    linear-gradient(145deg, #fbf6ea 0%, #eadbc4 100%);
}

.hc-qv__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hc-qv__gallery picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-qv__placeholder {
  display: grid;
  place-items: center;
  width: min(74%, 280px);
  aspect-ratio: 1 / 1;
}

.hc-qv__placeholder .hc-ph {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(26, 23, 20, 0.1));
}

.hc-qv__badge {
  position: absolute;
  top: 18px;
  left: 18px;
}

.hc-qv__info {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  max-height: calc(100dvh - 148px);
  overflow: auto;
  padding-right: 10px;
}

.hc-qv__title {
  margin: 0;
  color: var(--sf-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 2.35vw, 40px);
  font-weight: 500;
  line-height: 1.02;
}

.hc-qv__price {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
}

.hc-qv__old {
  color: rgba(26, 23, 20, 0.48);
  text-decoration: line-through;
  font-size: 16px;
}

.hc-qv__cur {
  color: var(--sf-red, #c7442e);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 500;
  line-height: 1;
}

.hc-qv__cur--ask {
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.62));
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
}

.hc-qv__desc {
  margin: 0;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.68));
  font-size: 15px;
  line-height: 1.5;
}

.hc-qv__specs {
  display: grid;
  gap: 0;
  margin: 0;
}

.hc-qv__spec {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(54, 45, 34, 0.14);
}

.hc-qv__spec dt {
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.58));
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hc-qv__spec dd {
  margin: 0;
  color: var(--sf-ink, #1a1714);
  font-weight: 600;
}

.hc-qv__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.hc-qv__buy {
  display: grid;
  gap: 10px;
}

.hc-qv__actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.hc-qv__secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.hc-qv__secondary .hc-btn {
  min-width: 0;
}

/* артикул + статус наличия одной строкой под заголовком */
.hc-qv__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 2px;
}

.hc-qv__oneclick {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(54, 45, 34, 0.12);
  background: rgba(255, 255, 255, 0.74);
}

.hc-qv__msg {
  min-height: 0;
}

@media (max-width: 860px) {
  .hc-qv {
    align-items: end;
    padding: 10px;
  }

  .hc-qv__panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 22px 22px 12px 12px;
  }

  .hc-qv__body {
    --hc-qv-pad: 18px;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: var(--hc-qv-pad);
    overflow: auto;
  }

  .hc-qv__gallery {
    min-height: 180px;
    max-height: none;
    aspect-ratio: 16 / 10;
  }

  .hc-qv__placeholder {
    width: min(54%, 170px);
  }

  .hc-qv__info {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .hc-qv__title {
    font-size: clamp(25px, 8vw, 31px);
  }

  .hc-qv__specs {
    order: 7;
  }

  .hc-qv__assurance {
    order: 5;
  }

  /* On a phone the sheet fills the screen and looks complete, while the only
     action sits below the fold: measured on an iPhone 13 viewport of 664px,
     "В корзину" was at 758px. It was reachable — by scrolling inside a sheet
     that gives no hint it scrolls — so from the customer's seat the quick order
     button did nothing. The row is pinned to the bottom and the card scrolls
     behind it. Only the primary row: pinning the one-click and details buttons
     too took more than half the screen and hid the product name, so those were
     lifted out of this block in the template. */
  .hc-qv__buy {
    order: 8;
    position: sticky;
    bottom: calc(-1 * var(--hc-qv-pad, 18px));
    z-index: 3;
    margin: 0 calc(-1 * var(--hc-qv-pad, 18px));
    padding: 10px var(--hc-qv-pad, 18px) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--hc-paper, #fffaf2);
    border-top: 1px solid rgba(224, 210, 190, 0.9);
    box-shadow: 0 -14px 26px -22px rgba(26, 23, 20, 0.5);
  }

  .hc-qv__actions {
    grid-template-columns: 1fr;
  }

  .hc-qv__secondary {
    grid-template-columns: 1fr;
    order: 6;
  }

  .hc-qv__spec {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* css/blocks/055-hc-qty.css */
/* =================== hc-qty.css — shared quantity stepper (− / value / +) ===================
   Single source for .hc-qty, used by the cart page AND the global quick-view modal.
   Was previously buried in 054-hc-cart-table.css (cart-only set), so the modal's
   stepper was unstyled when opened from catalog/home. Registered in css_shop_cards
   (modal) + css_cart_checkout (cart). Native number spinners hidden — the −/+ buttons
   are the controls. */
.hc-qty {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid rgba(180, 151, 115, 0.32);
  border-radius: 100px;
  overflow: hidden;
  background: #fff;
}
.hc-qty__btn {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: rgba(26, 23, 20, 0.65);
  transition: background 0.18s ease, color 0.18s ease;
}
.hc-qty__btn:hover {
  background: rgba(var(--hc-gold-rgb), 0.1);
  color: var(--hc-ink, #1a1714);
}
.hc-qty__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.hc-qty__val {
  width: 42px;
  min-width: 42px;
  text-align: center;
  border: 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.hc-qty__val::-webkit-outer-spin-button,
.hc-qty__val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* css/blocks/069-hc-cat-sm.css */
/* =================== hc-cat-sm.css =================== */
/* Home category cards: framed media panel (fixed ratio, contained image) +
 * body (count + name). Framed media gives every tile an identical image frame
 * regardless of the source thumbnail's aspect/whitespace — no more "dancing". */

.hc-cat-sm {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(var(--hc-accent-rgb), 0.18);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: #1a1714;
  box-shadow: 0 8px 24px -20px rgba(24, 18, 12, 0.5);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.hc-cat-sm:hover,
.hc-cat-sm:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(185, 154, 111, 0.5);
  box-shadow: 0 22px 40px -26px rgba(24, 18, 12, 0.6);
}

.hc-cat-sm__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(196, 158, 103, 0.14), transparent 42%),
    linear-gradient(160deg, #fbf6ec 0%, #ece0cc 100%);
  border-bottom: 1px solid rgba(var(--hc-accent-rgb), 0.12);
}

.hc-cat-sm__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(4px, 0.7vw, 12px);
  transform: scale(1.08);
  transition: transform 0.5s ease;
}

.hc-cat-sm:hover .hc-cat-sm__media img,
.hc-cat-sm:focus-visible .hc-cat-sm__media img {
  transform: scale(1.12);
}

.hc-cat-sm__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 14px 16px 16px;
}

.hc-cat-sm__count {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(94, 75, 48, 0.72);
}

.hc-cat-sm__title {
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: 0;
  color: #1a1714;
  text-wrap: balance;
}

@media (max-width: 1024px) {
  .hc-cat-sm__title {
    font-size: clamp(16px, 4vw, 20px);
  }
}

/* Home category tiles now render the rich category_scene SVG (same as catalog),
   filling the 4/3 media panel with a subtle hover lift. */
.hc-cat-sm__media .hc-cat-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.02);
  transition: transform 0.5s ease;
}
.hc-cat-sm:hover .hc-cat-sm__media .hc-cat-scene,
.hc-cat-sm:focus-visible .hc-cat-sm__media .hc-cat-scene {
  transform: scale(1.05);
}

/* css/blocks/245-hc-cat-sections.css */
/* =================== hc-cat-sections.css =================== */
/* Category section cards on /catalog (root only). Isolated block:
 * .hc-cat-sections-* — LIGHT framed style, consistent with the home
 * category cards (.hc-cat-sm): white card, framed media panel (contained
 * animated SVG cover) on top, body (title + desc) below. */

.hc-cat-sections-card__count {
  display: block;
  margin-top: 4px;
  color: var(--hc-ink-soft, #6f6b64);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.hc-cat-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
}

.hc-cat-sections-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  text-decoration: none;
  color: #1a1714;
  background: #fff;
  border: 1px solid rgba(var(--hc-accent-rgb), 0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px -20px rgba(24, 18, 12, 0.5);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hc-cat-sections-card:hover,
.hc-cat-sections-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(185, 154, 111, 0.62);
  box-shadow: 0 28px 52px -24px rgba(24, 18, 12, 0.55), 0 0 0 1px rgba(185, 154, 111, 0.16);
}

.hc-cat-sections-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(196, 158, 103, 0.14), transparent 42%),
    linear-gradient(160deg, #fbf6ec 0%, #ece0cc 100%);
  /* The caption used to be fenced off from the illustration by a full-width
     rule, so each tile read as two stacked strips — a table row rather than a
     card. The tint change is enough of a boundary. */
  transition: background 0.3s ease;
}

.hc-cat-sections-card:hover .hc-cat-sections-card__media,
.hc-cat-sections-card:focus-visible .hc-cat-sections-card__media {
  background:
    radial-gradient(circle at 70% 18%, rgba(196, 158, 103, 0.28), transparent 48%),
    linear-gradient(160deg, #fdf9f0 0%, #e6d6bc 100%);
}

.hc-cat-sections-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(4px, 0.6vw, 10px);
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hc-cat-sections-card:hover .hc-cat-sections-card__img,
.hc-cat-sections-card:focus-visible .hc-cat-sections-card__img {
  transform: scale(1.08);
}

.hc-cat-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hc-cat-scene__bg {
  fill: #f4e3c2;
  opacity: 0.2;
}

.hc-cat-scene__orb {
  fill: rgba(185, 154, 111, 0.2);
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-orb 7s ease-in-out infinite;
}

.hc-cat-scene__orb--b {
  animation-delay: -2.5s;
}

.hc-cat-scene__shadow {
  fill: rgba(51, 39, 27, 0.14);
}

.hc-cat-scene__panel {
  stroke: rgba(85, 62, 36, 0.42);
  stroke-width: 2;
}

.hc-cat-scene__panel--one { fill: #f4dfb7; }
.hc-cat-scene__panel--two { fill: #e4c48f; }
.hc-cat-scene__panel--three { fill: #c99b5a; }

.hc-cat-scene__board-stack {
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-float 5s ease-in-out infinite;
}

.hc-cat-scene__edge,
.hc-cat-scene__grain,
.hc-cat-scene__measure {
  fill: none;
  stroke: rgba(69, 48, 27, 0.58);
  stroke-width: 2;
  stroke-linecap: round;
}

.hc-cat-scene__grain {
  stroke-dasharray: 22 12;
  animation: hc-cat-dash 5.5s linear infinite;
}

.hc-cat-scene__measure {
  stroke: rgba(69, 48, 27, 0.42);
}

.hc-cat-scene__rail,
.hc-cat-scene__drawer,
.hc-cat-scene__sample,
.hc-cat-scene__shelf {
  fill: rgba(61, 51, 40, 0.86);
}

.hc-cat-scene__blade {
  fill: #efe4d0;
  stroke: rgba(61, 51, 40, 0.86);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-spin 9s linear infinite;
}

.hc-cat-scene__blade-hole {
  fill: #c99b5a;
  stroke: none;
}

.hc-cat-scene__spark {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  animation: hc-cat-spark 2.4s ease-in-out infinite;
}

.hc-cat-scene__spark--b { animation-delay: 0.35s; }
.hc-cat-scene__spark--c { animation-delay: 0.7s; }

.hc-cat-scene__drawer-front,
.hc-cat-scene__box {
  fill: #ead6b4;
  stroke: rgba(61, 51, 40, 0.34);
  stroke-width: 2;
}

.hc-cat-scene__runner,
.hc-cat-scene__hinge path {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 8;
  stroke-linecap: round;
}

.hc-cat-scene__runner--one {
  animation: hc-cat-runner 3.8s ease-in-out infinite;
}

.hc-cat-scene__runner--two {
  animation: hc-cat-runner 3.8s ease-in-out infinite;
  animation-delay: -1.1s;
}

.hc-cat-scene__hinge circle {
  fill: #efe4d0;
  stroke: rgba(61, 51, 40, 0.78);
  stroke-width: 3;
}

.hc-cat-scene__hinge {
  transform-box: fill-box;
  transform-origin: 242px 70px;
  animation: hc-cat-hinge 4.5s ease-in-out infinite;
}

.hc-cat-scene__sample {
  fill: #efe4d0;
}

.hc-cat-scene__coating {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: hc-cat-coat 4s ease-in-out infinite;
}

.hc-cat-scene__brush {
  fill: #3d3328;
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-brush 4s ease-in-out infinite;
}

.hc-cat-scene__brush path {
  fill: #d9b06e;
}

.hc-cat-scene__drop {
  fill: rgba(185, 154, 111, 0.52);
  transform-box: fill-box;
  transform-origin: center;
  animation: hc-cat-drop 4s ease-in-out infinite;
}

.hc-cat-scene__route {
  fill: none;
  stroke: #c99b5a;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 14 12;
  animation: hc-cat-dash 5s linear infinite;
}

@keyframes hc-cat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes hc-cat-orb {
  0%, 100% { transform: scale(1); opacity: 0.22; }
  50% { transform: scale(1.18); opacity: 0.34; }
}

@keyframes hc-cat-dash {
  to { stroke-dashoffset: -68; }
}

@keyframes hc-cat-spin {
  to { transform: rotate(360deg); }
}

@keyframes hc-cat-spark {
  0%, 100% { opacity: 0; transform: translateX(0); }
  45% { opacity: 1; transform: translateX(6px); }
}

@keyframes hc-cat-runner {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(18px); }
}

@keyframes hc-cat-hinge {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(8deg); }
}

@keyframes hc-cat-coat {
  0% { stroke-dashoffset: 260; }
  50%, 100% { stroke-dashoffset: 0; }
}

@keyframes hc-cat-brush {
  0%, 100% { transform: translate(-8px, -6px) rotate(-5deg); }
  50% { transform: translate(16px, 8px) rotate(4deg); }
}

@keyframes hc-cat-drop {
  0%, 100% { transform: translateY(-4px) scale(0.92); opacity: 0.45; }
  50% { transform: translateY(8px) scale(1.05); opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-cat-scene *,
  .hc-cat-scene {
    animation: none !important;
  }
}

.hc-cat-sections-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 11px 12px 13px;
}

.hc-cat-sections-card__title {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0;
  color: #1a1714;
}

.hc-cat-sections-card__desc {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: rgba(94, 75, 48, 0.72);
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 1280px) {
  .hc-cat-sections-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .hc-cat-sections-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .hc-cat-sections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .hc-cat-sections-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── hardware sub-scenes (runners / hinges / handles / fasteners) ─── */
.hc-cat-scene__roller,
.hc-cat-scene__bolt-head {
  fill: #efe4d0;
  stroke: rgba(61, 51, 40, 0.78);
  stroke-width: 3;
}
.hc-cat-scene__bolt-pin { fill: #c99b5a; stroke: none; }
.hc-cat-scene__bolt-slot {
  fill: none;
  stroke: rgba(61, 51, 40, 0.7);
  stroke-width: 5;
  stroke-linecap: round;
}
.hc-cat-scene__handle-bar { fill: rgba(61, 51, 40, 0.86); }
.hc-cat-scene__handle-foot { fill: rgba(61, 51, 40, 0.55); }

/* Hinge rotation pivots — moved off inline style= (per-instance transform-origin). */
.hc-cat-scene__hinge--p1 { transform-origin: 176px 84px; }
.hc-cat-scene__hinge--p2 { transform-origin: 188px 150px; }

/* css/blocks/072-hc-cats.css */
/* =================== hc-cats.css =================== */
.hc-cats {display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 1.6vw, 22px); margin-top: 20px}

/* ─── folded from hc-cats-sec.css ─── */
.hc-cats-sec {padding: clamp(48px, 6vw, 88px) 0}

/* css/blocks/041-hc-b2b.css */
/* =================== hc-b2b.css =================== */
.hc-b2b {padding: var(--hc-sp-8) 0; background: linear-gradient(135deg, #2c2820, #4a3f30); color: var(--hc-paper, #ffffff)}
.hc-b2b__grid {display: grid; grid-template-columns: 1fr 1fr; gap: var(--hc-sp-7); align-items: center}
.hc-b2b__eyebrow {color: var(--hc-gold); font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); letter-spacing: var(--hc-ls-ultra); text-transform: uppercase}
.hc-b2b__title {font-size: var(--hc-fs-5xl); color: var(--hc-paper, #ffffff); margin: var(--hc-sp-2) 0 var(--hc-sp-3)}
.hc-b2b__desc {color: rgba(255,255,255,.72); font-size: var(--hc-fs-md); margin-bottom: var(--hc-sp-5); max-width: 52ch}
.hc-b2b__list {display: flex; flex-direction: column; gap: var(--hc-sp-3)}
.hc-b2b__item {display: grid; grid-template-columns: 32px 1fr; gap: var(--hc-sp-3); padding: var(--hc-sp-3) var(--hc-sp-4); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--hc-r-md)}
.hc-b2b__item svg {color: var(--hc-gold)}
.hc-b2b__item strong {display: block; font-family: var(--hc-serif); font-size: var(--hc-fs-md); color: var(--hc-paper, #ffffff)}
.hc-b2b__item small {display: block; font-size: var(--hc-fs-xs); color: rgba(255,255,255,.58); margin-top: 2px}
.hc-b2b__ctas {display: flex; flex-wrap: wrap; gap: var(--hc-sp-3, 14px)}

/* css/blocks/043-hc-bestsellers.css */
/* =================== hc-bestsellers.css =================== */
/* hc-bestsellers — home "Популярное у мебельщиков" unified product showcase
 * (Хиты · Новинки · Со скидкой · Товар дня · Для вас). Left column is a
 * branded promo card (one of 4 palettes), right column is a 3-col rail of
 * .pcard mini cards. Strictly .hc-bestsellers / .hc-bestsellers__*.
 *
 * Previous file had every promo rule wrapped in @media(max-width:920px),
 * leaving the promo card on desktop completely unstyled (no gradient bg,
 * no body layout, no bgfx). This rewrite places all base rules outside the
 * media-query and uses @media only for responsive breakpoints. */

.hc-bestsellers__tabs {
display: flex;
  flex-wrap: wrap;
  gap: var(--hc-sp-1, 6px);
  margin-bottom: var(--hc-sp-4, 20px);
}

/* base grid: promo (left) + product rail (right) */
.hc-bestsellers__grid {
display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.4vw, 20px);
  align-items: start;
  margin-top: var(--hc-sp-4, 20px);
}

/* product rail — 3-col grid of mini pcards */
.hc-bestsellers__rail {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 16px);
  align-content: start;
  align-items: stretch;
}

.hc-bestsellers__recs {
margin-top: var(--hc-sp-4, 20px);
  min-height: 160px;
}

@media (max-width: 1360px) {
  .hc-bestsellers__grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .hc-bestsellers__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* v8.6 — на phone (<=560px) bestsellers — горизонтальный scroll-snap rail.
   Не вертикальный 1-col stack — компактнее и видны 1.2 карты сразу как
   подсказка свайпа. */
@media (max-width: 560px) {
  .hc-bestsellers__rail {
    grid-template-columns: none;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 4px 16px 16px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .hc-bestsellers__rail::-webkit-scrollbar { display: none; }
  .hc-bestsellers__rail > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

.hc-bestsellers__recs .hc-text-center {
  text-align: center;
  padding: 40px 0;
}

/* css/blocks/044-hc-blog-card.css */
/* =================== hc-blog-card.css =================== */
.hc-blog-card {background: var(--hc-paper); border: 1px solid var(--hc-line); border-radius: var(--hc-r-md); overflow: hidden; transition: transform 0.22s ease, box-shadow 0.32s ease}
.hc-blog-card:hover {transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,23,20,0.06)}
.hc-blog-card__cover {aspect-ratio: 3 / 2; background: linear-gradient(135deg, #f8f1e6, #eadcc8); position: relative; overflow: hidden; border-radius: 12px}
.hc-blog-card__cat {position: absolute; top: 10px; left: 10px; padding: 3px 10px; background: rgba(var(--hc-gold-rgb),.9); color: var(--hc-ink-2); border-radius: var(--hc-r-xs); font-size: var(--hc-fs-xxs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase}
.hc-blog-card__body {padding: var(--hc-sp-4)}
.hc-blog-card__meta {display: flex; gap: var(--hc-sp-2); font-size: var(--hc-fs-xxs); color: var(--hc-ink-mid); margin-bottom: 6px}
.hc-blog-card__title {font-size: var(--hc-fs-lg); margin-bottom: 6px; line-height: 1.2}
.hc-blog-card__desc {font-size: var(--hc-fs-xs); color: var(--hc-ink-soft); line-height: var(--hc-lh-base); margin-bottom: var(--hc-sp-3)}
.hc-blog-card__cover-img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain}
@media(max-width:920px) {
  .hc-blog-card__cover img, .hc-blog-card__cover-img {width: 100%; height: 100%; object-fit: contain}
}

.hc-blog-card:hover .hc-blog-card__cover img {
transform:scale(1.05);
}
.hc-blog-card__cover img {
transition:transform 0.62s cubic-bezier(0.22,1,0.36,1);
}

/* css/blocks/047-hc-blog.css */
/* =================== hc-blog.css =================== */
/* v7.61.16 — Blog page premium styling.
   Fixes: signals strip slipping, TOC margin, share button polish. */

/* ─── INDEX PAGE ─────────────────────────────────────────────── */

.hc-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hc-sp-4);
}

.hc-blog-latest-slot { min-height: 0; }
.hc-blog-latest-slot:empty { display: none; }

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











/* ─── DETAIL PAGE ────────────────────────────────────────────── */





































/* v7.66 — blog detail: desktop TOC sidebar grid (base rule was missing, so the
   2-col magazine layout never rendered on desktop). */
.page-blog-detail .blog-detail__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.page-blog-detail .blog-detail__layout:has(.blog-toc.is-hidden) {
  grid-template-columns: minmax(0, 1fr);
}
.page-blog-detail .blog-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

@media (max-width: 980px) {
  .page-blog-detail .blog-detail__layout,
  .page-blog-detail .blog-detail__layout:has(.blog-toc.is-hidden) { grid-template-columns: 1fr; }
  .page-blog-detail .blog-toc {
    position: static;
    max-height: none;
    padding: 14px 4px 14px 14px;
  }
}

/* ==========================================================
   v7.61.20 · Blog premium polish
   ========================================================== */

/* Index · featured card hover effect */
.hc-blog-featured {
position:relative;
  overflow:hidden;
  transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.hc-blog-featured:hover {
transform:translateY(-2px);
}
.hc-blog-featured__cover {
transition:transform 0.62s cubic-bezier(0.22,1,0.36,1);
}


/* Index · topic chip count badge */
.hc-blog-topic-chip {
position:relative;
}
.hc-blog-topic-chip__count {
display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  background:rgba(180,151,115,0.14);
  border-radius:100px;
  font:500 10px/1.4 "JetBrains Mono",ui-monospace,monospace;
  color:rgba(26,23,20,0.55);
}

/* Detail · reading progress bar (top of page) */
.hc-blog-progress {
position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:transparent;
  z-index:99;
  pointer-events:none;
}
.hc-blog-progress__fill {
height:100%;
  background:linear-gradient(90deg,#c8a96a,#a78648);
  width:0%;
  transition:width 0.05s linear;
}

/* Detail · TOC scroll-spy active */
.hc-blog-toc__item {
display:block;
  padding:6px 12px;
  color:rgba(26,23,20,0.62);
  font-size:13px;
  text-decoration:none;
  border-left:2px solid transparent;
  transition:color 0.18s ease, border-color 0.18s ease;
}
.hc-blog-toc__item:hover {
color:var(--hc-ink, #1a1714);
}
.hc-blog-toc__item.is-active {
color:var(--hc-ink, #1a1714);
  border-left-color:#c8a96a;
  font-weight:500;
}

/* Detail · pull-quote with decorative marks */
.hc-blog-quote {
position:relative;
  padding:24px 32px;
  font:italic 400 18px/1.5 "Playfair Display",Georgia,serif;
  color:var(--hc-ink, #1a1714);
  text-align:center;
  border-top:0.5px solid rgba(180,151,115,0.22);
  border-bottom:0.5px solid rgba(180,151,115,0.22);
  margin:24px 0;
}
.hc-blog-quote::before, .hc-blog-quote::after {
font:400 38px/1 "Playfair Display",Georgia,serif;
  color:#c8a96a;
  position:absolute;
}
.hc-blog-quote::before {
content:"«"; left:8px; top:8px;
}
.hc-blog-quote::after {
content:"»"; right:8px; bottom:0;
}

/* Detail · callout variants (warning/info/pro-tip) */
.hc-blog-callout {
display:flex;
  gap:12px;
  padding:14px 18px;
  border-radius:10px;
  margin:18px 0;
  border-left:3px solid;
  font-size:14px;
  line-height:1.5;
}
.hc-blog-callout--warning {
background:rgba(184,115,28,0.06);
  border-color:#b8731c;
  color:var(--hc-ink, #1a1714);
}
.hc-blog-callout--warning::before {
content:"⚠"; font-size:18px; color:#b8731c;
}
.hc-blog-callout--info {
background:rgba(180,151,115,0.06);
  border-color:#c8a96a;
}
.hc-blog-callout--info::before {
content:"ℹ"; font-size:18px; color:#c8a96a;
}
.hc-blog-callout--tip {
background:rgba(61,107,79,0.06);
  border-color:var(--hc-success, #3d6b4f);
}
.hc-blog-callout--tip::before {
content:"✦"; font-size:16px; color:var(--hc-success, #3d6b4f);
}

/* Detail · share buttons hover */
.hc-blog-share__btn {
transition:transform 0.18s ease, color 0.18s ease;
}
.hc-blog-share__btn:hover {
transform:translateY(-1px);
  color:var(--hc-ink, #1a1714);
}
.hc-blog-share__btn.is-copied {
color:var(--hc-success, #3d6b4f);
}
.hc-blog-share__btn.is-copied::after {
content:" ✓";
}

/* Detail · author byline */
.hc-blog-author {
display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:18px;
  background:rgba(var(--hc-gold-rgb),0.06);
  border-radius:12px;
  margin:24px 0;
}
.hc-blog-author__avatar {
width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#c8a96a,#a78648);
  color:var(--hc-ink, #1a1714);
  display:grid;
  place-items:center;
  font:600 16px/1 "Inter",sans-serif;
}
.hc-blog-author__name {
font:500 14px/1.2 "Inter",sans-serif;
  color:var(--hc-ink, #1a1714);
}
.hc-blog-author__role {
font:500 11px/1.2 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(26,23,20,0.55);
}

/* ──────────────────────────────────────────────────────────────
   Article prose — typography for the editorial body of a blog post.
   Scoped to .blog-detail__body .trust-content so it only affects the
   rendered article HTML (post.body) and nothing else on the page.
   Built on project design tokens (serif headings / sans body / gold
   accent) for a magazine-grade reading rhythm.
   ────────────────────────────────────────────────────────────── */
.blog-detail__body .trust-content {
  width: 100%;
  max-width: 72ch;
  min-width: 0;
  font-family: var(--hc-sans);
  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));
  overflow-wrap: anywhere;
}

/* Vertical rhythm: space comes from the *top* of block elements so
   the flow stays even regardless of which tag follows which. */
.blog-detail__body .trust-content > * + * {
  margin-top: var(--hc-sp-4, 16px);
}

.blog-detail__body .trust-content p {
  margin: 0;
}

.blog-detail__body .trust-content h2,
.blog-detail__body .trust-content h3,
.blog-detail__body .trust-content h4 {
  font-family: var(--hc-serif);
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
  line-height: var(--hc-lh-snug, 1.25);
  letter-spacing: -0.01em;
}

.blog-detail__body .trust-content h2 {
  margin-top: var(--hc-sp-8, 64px);
  font-size: var(--hc-fs-3xl, 28px);
  padding-bottom: var(--hc-sp-3, 12px);
  border-bottom: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
}

.blog-detail__body .trust-content h3 {
  margin-top: var(--hc-sp-7, 48px);
  font-size: var(--hc-fs-2xl, 22px);
}

.blog-detail__body .trust-content h4 {
  margin-top: var(--hc-sp-6, 32px);
  font-size: var(--hc-fs-xl, 18px);
}

/* First heading shouldn't push a huge gap below the cover/meta. */
.blog-detail__body .trust-content > h2:first-child,
.blog-detail__body .trust-content > h3:first-child {
  margin-top: 0;
}

.blog-detail__body .trust-content ul,
.blog-detail__body .trust-content ol {
  margin: var(--hc-sp-4, 16px) 0 0;
  padding-left: var(--hc-sp-5, 24px);
  display: grid;
  gap: var(--hc-sp-2, 8px);
}

.blog-detail__body .trust-content li {
  padding-left: var(--hc-sp-1, 4px);
}

.blog-detail__body .trust-content ul li::marker {
  color: var(--hc-accent, var(--hc-accent));
}

.blog-detail__body .trust-content a {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.blog-detail__body .trust-content strong,
.blog-detail__body .trust-content b {
  color: var(--hc-ink, #1a1714);
  font-weight: 600;
}

.blog-detail__body .trust-content img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--hc-sp-5, 24px);
  border-radius: 14px;
}

/* Restored donor galleries: compact, predictable and mobile-safe. */
.blog-detail__body .trust-content .legacy-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hc-sp-3, 12px);
  width: 100%;
}

.blog-detail__body .trust-content .legacy-gallery figure {
  min-width: 0;
  margin: 0;
}

.blog-detail__body .trust-content .legacy-gallery img {
  width: 100%;
  height: clamp(180px, 28vw, 360px);
  margin: 0;
  object-fit: cover;
}

@media (max-width: 560px) {
  .blog-detail__body .trust-content .legacy-gallery {
    grid-template-columns: 1fr;
  }

  .blog-detail__body .trust-content .legacy-gallery img {
    height: auto;
  }
}

.blog-detail__body .trust-content blockquote {
  margin: var(--hc-sp-5, 24px) 0 0;
  padding: var(--hc-sp-4, 16px) var(--hc-sp-5, 24px);
  border-left: 3px solid var(--hc-gold, var(--hc-gold));
  background: var(--hc-gold-soft, rgba(var(--hc-gold-rgb), 0.15));
  border-radius: 0 12px 12px 0;
  font-size: var(--hc-fs-xl, 18px);
  color: var(--hc-ink, #1a1714);
}

.blog-detail__body .trust-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-collapse: collapse;
  margin-top: var(--hc-sp-5, 24px);
  font-size: var(--hc-fs-md, 14px);
  -webkit-overflow-scrolling: touch;
}

.blog-detail__body .trust-content th,
.blog-detail__body .trust-content td {
  padding: var(--hc-sp-3, 12px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  text-align: left;
  overflow-wrap: normal;
}

.blog-detail__body .trust-content th {
  background: var(--hc-bg-warm, var(--hc-bg-warm));
  color: var(--hc-ink, #1a1714);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
   Article meta bar — author / date / reading-time / tag pills that
   sit under the H1. The template emits .article-meta-pill spans with
   no styling, so they collapse into one run of text. Lay them out as
   spaced chips.
   ────────────────────────────────────────────────────────────── */
.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hc-sp-2, 8px);
  margin-top: var(--hc-sp-4, 16px);
}

/* The row now opens the article column, so it needs room under itself —
   previously it sat above the layout and the gap came from the grid. */
.page-blog-detail .blog-detail__head {
  margin: 0 0 var(--hc-sp-5, 24px);
  /* The prose is capped at 72ch; without the same cap the pill row ran
     322px past the right edge of the text it introduces. */
  max-width: 72ch;
}
.page-blog-detail .blog-detail__head .article-meta-bar { margin-top: 0; }

.article-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-sp-1, 4px);
  padding: 6px var(--hc-sp-3, 12px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 999px;
  font: 500 var(--hc-fs-xs, 12px) / 1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  white-space: nowrap;
}

.article-meta-pill--accent {
  background: var(--hc-gold-soft, rgba(var(--hc-gold-rgb), 0.15));
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.38));
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}

/* ──────────────────────────────────────────────────────────────
   Table of contents — built client-side from h2/h3. Until JS runs it
   carries .is-hidden; style both the hidden state and the rendered
   list so it never shows as a raw run of link text.
   ────────────────────────────────────────────────────────────── */
.blog-toc.is-hidden { display: none; }

/* The contents block had no container at all: a bare heading and a run of
   links against the page edge, beside a row of pill-shaped chips. It read as
   leftover text rather than a panel. Give it the same plate the rest of the
   site uses. */
.page-blog-detail .blog-toc {
  padding: 16px 4px 18px 16px;
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 26px -22px rgba(40, 30, 15, 0.35);
}

.blog-toc__title {
  font: 600 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);
  /* Links carry a 2px indicator rail plus 12px inset; without the same
     offset the heading hung 14px to the left of its own list. */
  padding-left: 14px;
}

.blog-toc__link {
  display: block;
  padding: var(--hc-sp-1, 4px) 0;
  font-size: var(--hc-fs-md, 14px);
  line-height: var(--hc-lh-snug, 1.25);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--hc-sp-3, 12px);
  transition: color var(--hc-dur-fast, 0.15s) var(--hc-ease, ease),
              border-color var(--hc-dur-fast, 0.15s) var(--hc-ease, ease);
}

.blog-toc__link:hover {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  border-left-color: var(--hc-gold, var(--hc-gold));
}

.blog-toc__link--lvl3 {
  padding-left: var(--hc-sp-5, 24px);
  font-size: var(--hc-fs-sm, 13px);
}

/* Article share buttons (#blogShare .share-btn) had no styles → raw SVG + bare
   text. Clean outline pills with icon + label. */
.share-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.3));
  border-radius: 999px;
  background: var(--hc-paper, #ffffff);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.share-btn:hover {
  border-color: var(--hc-accent, var(--hc-accent));
  color: var(--hc-accent, var(--hc-accent));
}
.share-btn svg {
  flex: 0 0 auto;
}

/* css/blocks/097-hc-hero-slider.css */
/* =================== hc-hero-slider.css =================== */
.hc-hero-slider {position: relative; min-height: min(700px, 82vh); overflow: hidden; background: #14110e; color: var(--hc-paper, #ffffff)}
.hc-hero-slider__track {position: relative; height: 100%; min-height: inherit}
.hc-hero-slide {position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 0; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s}
.hc-hero-slider:not(.is-ready) .hc-hero-slide:first-child {opacity: 1; visibility: visible; z-index: 1; pointer-events: auto; transition: none}
.hc-hero-slide.is-active {opacity: 1; visibility: visible; z-index: 1; pointer-events: auto; transition: opacity .5s ease, visibility 0s linear 0s}
.hc-hero-slide__bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center}
.hc-hero-slide__bg--mobile {display: none}
/* Scrim kept light so the watercolour banner reads through — just enough
   contrast for the dark text on the left, fully clear on the right. */
.hc-hero-slide::after {content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(12,10,9,.42) 0%, rgba(12,10,9,.18) 42%, rgba(12,10,9,0) 72%)}
.hc-hero-slide__body {position: relative; z-index: 2; min-height: min(700px, 82vh); display: grid; align-items: center}
.hc-hero-slide__content {max-width: min(760px, 86vw); padding: clamp(34px, 4vw, 58px) 0}
.hc-hero-slide__eyebrow {display:inline-flex; padding: 8px 14px; border-radius: 999px; border:1px solid rgba(255,255,255,.35); background: rgba(20,16,13,.34); font-size:11px; letter-spacing:.12em; text-transform: uppercase}
.hc-hero-slide__title {margin: 14px 0 14px; font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(34px, 5.2vw, 66px); line-height: 1.02; letter-spacing: 0; text-wrap: balance; max-width: 16ch}
.hc-hero-slide__desc {margin: 0 0 24px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; color: rgba(255,255,255,.92); max-width: 52ch}
.hc-hero-slide__btns {display:flex; flex-wrap:wrap; gap: 12px}
.hc-hero-slide__btns .hc-btn {min-height: 48px; border-radius: 12px; padding-inline: 20px}
.hc-hero-slide__btns .hc-btn--primary {background: #f6f2e8; color: #1a1714; border-color: #f6f2e8}
.hc-hero-slide__btns .hc-btn--ghost {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color:#fff}
.hc-hero-slide__link-overlay {position:absolute; inset:0; z-index:1}
/* Dark translucent nav so arrows read on light watercolour banners (white-on-light was invisible). */
.hc-hero-slider__nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(20,16,13,.42); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(10px); border-radius: 50%; color: var(--hc-paper, #ffffff); box-shadow: 0 4px 16px rgba(20,16,13,.25); cursor: pointer; transition: background var(--hc-dur-fast), transform var(--hc-dur-fast)}
.hc-hero-slider__nav:hover {background: rgba(20,16,13,.62); transform: translateY(-50%) scale(1.06)}
.hc-hero-slider__nav--prev {left: var(--hc-sp-4)}
.hc-hero-slider__nav--next {right: var(--hc-sp-4)}
.hc-hero-slider__dots {position: absolute; left: 50%; bottom: var(--hc-sp-4); transform: translateX(-50%); z-index: 5; display: flex; gap: 6px}
.hc-hero-slider__dot {width: 28px; height: 4px; background: rgba(20,16,13,.38); border-radius: 2px; cursor: pointer; box-shadow: 0 1px 4px rgba(20,16,13,.2); transition: background var(--hc-dur-fast), width var(--hc-dur-fast)}
.hc-hero-slider__dot.is-active {background: var(--hc-gold); width: 40px}
.hero-slider__dot.is-active {background: var(--hc-paper, #ffffff); transform: scale(1.4)}
@media (max-width: 900px) {
  .hc-hero-slider {min-height: 76vh}
  .hc-hero-slide__body {min-height: 76vh}
  .hc-hero-slide__bg {display:none}
  .hc-hero-slide__bg--mobile {display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .hc-hero-slide__title {font-size: clamp(30px, 8.5vw, 46px)}
  .hc-hero-slide__desc {font-size: 15px}
  .hc-hero-slider__nav {display:none}
}

.hc-hero-slider__pause{position:absolute;right:18px;bottom:18px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,18,16,.45);color:#fff;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .15s}
.hc-hero-slider__pause:hover{background:rgba(20,18,16,.7)}

/* css/blocks/099-hc-home-contact.css */
/* =================== hc-home-contact.css =================== */
.hc-home-contact__grid {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start}
.hc-home-contact__info {max-width: 520px}
.hc-home-contact__lede {margin-top: var(--hc-sp-3, 14px); font-size: 15px; line-height: 1.55; max-width: 48ch}
.hc-home-contact__list {display: grid; gap: var(--hc-sp-2, 10px); margin-top: var(--hc-sp-5, 28px)}
.hc-home-contact__row {display: flex; gap: var(--hc-sp-3, 14px); align-items: center; padding: var(--hc-sp-3, 14px) var(--hc-sp-4, 20px); text-decoration: none}
.hc-home-contact__ico {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--hc-accent-rgb), 0.10); color: var(--hc-accent, var(--hc-accent)); flex: none}
.hc-home-contact__row-body {display: flex; flex-direction: column; gap: 2px; min-width: 0}
.hc-home-contact__row-body strong {font-size: 16px; font-weight: 500; color: var(--hc-ink, #1a1714)}
.hc-home-contact__row-body small {font-size: 12px; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
.hc-home-contact__form {padding: clamp(20px, 2.4vw, 28px)}
.hc-home-contact__legal {margin-top: var(--hc-sp-2, 10px); text-align: center}
.hc-home-contact {padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px); margin-block: clamp(24px, 3vw, 48px); background: var(--hc-bg-2, rgba(var(--hc-accent-rgb),0.04)); border-radius: 16px; text-align: center}

/* v7.66 — keep left-info left-aligned inside the centered contact section */
.hc-home-contact__info { text-align: left; }

/* css/blocks/113-hc-newsletter.css */
/* =================== hc-newsletter.css =================== */
/* Premium framed subscription block (журнал мебельщика). Single source of truth —
   the previous file stacked several conflicting .hc-newsletter__form / form
   overrides; this is one clean layout. */

.hc-newsletter {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  border-radius: 24px;
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(var(--hc-gold-rgb), 0.2), transparent 58%),
    linear-gradient(135deg, rgba(255, 252, 247, 0.94), rgba(247, 243, 236, 0.7));
  box-shadow: 0 36px 90px -54px rgba(80, 60, 30, 0.45);
}

.hc-newsletter__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hc-newsletter__eyebrow-ico {
  color: var(--hc-accent, var(--hc-accent));
}

.hc-newsletter__title {
  margin: 10px 0 12px;
  max-width: 18ch;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  color: var(--hc-ink, #1a1714);
}

.hc-newsletter__desc {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.65));
}

.hc-newsletter__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.hc-newsletter__perks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}
.hc-newsletter__perks li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hc-accent, var(--hc-accent));
}

.hc-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hc-newsletter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.hc-newsletter__input {
  flex: 1 1 220px;
  min-width: 180px;
  height: 50px;
  padding: 0 18px;
  font-size: 15px;
  color: var(--hc-ink, #1a1714);
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hc-newsletter__input:focus {
  border-color: rgba(141, 109, 71, 0.55);
  box-shadow: 0 0 0 3px rgba(141, 109, 71, 0.12);
  background: var(--hc-paper, #ffffff);
  outline: none;
}
.hc-newsletter__submit {
  flex: 0 0 auto;
  height: 50px;
  white-space: nowrap;
}

.hc-newsletter__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

@media (max-width: 860px) {
  .hc-newsletter {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* css/blocks/145-hc-rev.css */
/* =================== hc-rev.css =================== */
/* hc-rev - premium reviews grid (home + PDP). Each card has stars, body text,
 * a "who" footer with avatar (initials gold-on-dark), name + role/date,
 * verified-badge (Yandex/manual moderation). Strictly .hc-rev / .hc-rev__*. */

.hc-rev__score--label { font-size: 28px; line-height: 1.15; }

.hc-rev__grid {
  display: grid;
  /* 4-up so the home block's 4 reviews fill one row (was 3-col → 3+1 orphan). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
}

.hc-rev__card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid rgba(141, 109, 71, 0.16);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.03),
    0 14px 32px -18px rgba(40, 30, 15, 0.10);
  transition: transform 0.28s cubic-bezier(0.22, 1.2, 0.36, 1), border-color 0.22s ease, box-shadow 0.32s ease;
}
.hc-rev__card:hover {
  transform: translateY(-4px);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
  box-shadow:
    0 2px 4px rgba(40, 30, 15, 0.04),
    0 28px 56px -22px rgba(184, 154, 111, 0.32);
}
.hc-rev__card::before {
  content: "\201C";
  position: absolute;
  top: -16px;
  right: 18px;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 100px;
  line-height: 1;
  color: rgba(var(--hc-gold-rgb), 0.32);
  pointer-events: none;
  user-select: none;
}

.hc-rev__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--hc-gold, var(--hc-gold));
  text-shadow: 0 1px 0 rgba(184, 154, 111, 0.32);
}

.hc-rev__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hc-ink-2, #3a3128);
}

.hc-rev__who {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-rev__who > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hc-rev__av {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
  color: #2a2018;
  border-radius: 50%;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px -2px rgba(var(--hc-accent-rgb), 0.42);
  text-transform: uppercase;
}
.hc-rev__name {
  font-family: var(--hc-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hc-ink, #1a1714);
}
.hc-rev__date {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-rev__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(61, 107, 79, 0.16), rgba(107, 164, 128, 0.10));
  border: 0.5px solid rgba(61, 107, 79, 0.32);
  border-radius: var(--hc-r-pill, 999px);
  font-family: var(--hc-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hc-success, #3d6b4f);
  align-self: center;
  white-space: nowrap;
}
.hc-rev__verified::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

@media (max-width: 1100px) {
  .hc-rev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .hc-rev__grid { grid-template-columns: 1fr; }
}

/* v7.66 — real customer-photo strip (pulled from Yandex card) */
.hc-rev__photos { margin-top: clamp(20px,3vw,32px); }
.hc-rev__photos-label { display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--hc-accent-dark,#7a6548); margin-bottom:12px; }
.hc-rev__photos-strip { display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.hc-rev__photo { flex:0 0 auto; width:120px; height:120px; border-radius:12px; overflow:hidden; border:.5px solid rgba(141,109,71,.2); display:block; }
.hc-rev__photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.hc-rev__photo:hover img { transform:scale(1.06); }
.hc-rev__photo--more { display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; font-weight:600; color:var(--hc-accent-dark,#7a6548); background:linear-gradient(135deg,rgba(var(--hc-gold-rgb),.14),rgba(var(--hc-accent-rgb),.08)); text-decoration:none; line-height:1.3; }
.hc-rev__photo--more:hover { color:var(--hc-ink,#1a1714); }

/* css/blocks/165-hc-trust-cards.css */
/* =================== hc-trust-cards.css =================== */
/* hc-trust-cards — premium 4-cell trust grid on home page below hero.
 *
 * Each card: gold-tinted icon → big serif number → mono uppercase label
 * → soft sans description. Visible on >= 720px, stacks 2×2 on tablet,
 * single column on phone. Cards animate in via `.hz-fx-reveal` (handled
 * by global reveal IO observer).
 *
 * Strict isolation: .hc-trust-cards / .hc-trust-cards__* / .hc-trust-card / .hc-trust-card__*. */

.hc-trust-cards {
  display: block;
  padding: clamp(28px, 4vw, 56px) 0;
  background: linear-gradient(180deg, transparent, rgba(var(--hc-gold-rgb), 0.05) 40%, transparent);
}

.hc-trust-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
  max-width: var(--hc-wrap, 1344px);
  margin: 0 auto;
  padding: 0 clamp(20px, 2.4vw, 40px);
  box-sizing: border-box;
}

.hc-trust-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 20px;
  border: 1px solid rgba(26,23,20,.09);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,246,238,.9));
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.hc-trust-card:hover,
.hc-trust-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(141,109,71,.34);
  box-shadow: 0 18px 36px -26px rgba(26,23,20,.45);
}
.hc-trust-card--link {
  display: block;
  text-decoration: none;
}
.hc-trust-card::after {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  border-radius: 50%;
  border: 1px dashed rgba(var(--hc-gold-rgb), 0);
  pointer-events: none;
  transition: border-color 0.32s ease, transform 14s linear;
}
.hc-trust-card:hover::after {
  border-color: rgba(var(--hc-gold-rgb), 0.32);
  transform: rotate(360deg);
}

.hc-trust-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(var(--hc-gold-rgb), 0.18), rgba(184, 154, 111, 0.08));
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.45));
  border-radius: 12px;
  color: var(--hc-accent-dark, #7a6548);
}

.hc-trust-card__num {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hc-ink, #1a1714);
  margin-bottom: 6px;
}

.hc-trust-card__lbl {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
  margin-bottom: 10px;
}

.hc-trust-card__sub {
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
  max-width: 28ch;
}

@media (max-width: 920px) {
  .hc-trust-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .hc-trust-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* v7.66 — accent the +/5 in the big trust number */
.hc-trust-card__num small { font-size: .5em; vertical-align: super; color: var(--hc-accent, var(--hc-accent)); font-weight: 700; }

/* css/blocks/170-hc-why.css */
/* =================== hc-why.css =================== */
.hc-why__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hc-sp-3)
}
.hc-why__card {
padding: var(--hc-sp-5); background: var(--hc-paper); border: 1px solid var(--hc-line); border-radius: var(--hc-r-md)
}
.hc-why__num {
font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); color: var(--hc-accent); letter-spacing: var(--hc-ls-wide)
}
.hc-why__ico {
width: 40px; height: 40px; border-radius: var(--hc-r-sm); background: var(--hc-gold-soft); color: var(--hc-accent-dark); display: inline-flex; align-items: center; justify-content: center; margin: var(--hc-sp-2) 0 var(--hc-sp-3)
}
.hc-why__title {
font-size: var(--hc-fs-lg); margin-bottom: var(--hc-sp-2)
}
.hc-why__desc {
font-size: var(--hc-fs-sm); color: var(--hc-ink-soft)
}
.hc-why__spec {
margin-top: var(--hc-sp-3); padding-top: var(--hc-sp-2); border-top: 1px solid var(--hc-line); font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); color: var(--hc-ink-mid); letter-spacing: 0.04em
}

.hc-why__ico {
width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--hc-gold-rgb), 0.32), rgba(141, 109, 71, 0.18));
  border: 1px solid rgba(141, 109, 71, 0.22);
  position: relative;
  margin-bottom: 12px;
}
.hc-why__ico > * {
display: none;
}
.hc-why__ico::after {
content: "";
  width: 26px;
  height: 26px;
  background: var(--hc-ink, #1a1714);
  -webkit-mask: var(--hc-why-icon) center/contain no-repeat;
          mask: var(--hc-why-icon) center/contain no-repeat;
}

.hc-why__card:nth-child(1) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3'/><circle cx='12' cy='12' r='4'/></svg>");
}

.hc-why__card:nth-child(2) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12h4l3-9 4 18 3-9h6'/></svg>");
}

.hc-why__card:nth-child(3) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l9-4 9 4-9 4-9-4z'/><path d='M3 12l9 4 9-4M3 18l9 4 9-4'/></svg>");
}

.hc-why__card:nth-child(4) .hc-why__ico {
--hc-why-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 12l2 2 4-4M12 2l3 3 4-1-1 4 3 3-3 3 1 4-4-1-3 3-3-3-4 1 1-4-3-3 3-3-1-4 4 1z'/></svg>");
}

/* 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/183-or.css */
/* =================== or.css =================== */
.or {text-align: center; color: var(--hc-ink-mid); font-size: var(--hc-fs-sm); margin: var(--hc-sp-3) 0; position: relative}
.or::before, .or::after {content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--hc-line)}
.or::before {left: 0}
.or::after {right: 0}
.page-hero__surface .or, .hc-sec .or {max-width: 300px; margin-left: auto; margin-right: auto}

/* css/blocks/293-hc-brands.css */
/* =================== hc-brands.css — partner-brands trust band (home) ===================
   Monogram-badge icons + brand name; on hover both colorize to that brand's accent.
   Clean: design tokens + per-brand --b via [data-brand]; no inline styles, no !important. */
.hc-brands {
  padding: clamp(28px, 4vw, 56px) 0;
}
.hc-brands__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  text-align: center;
}
.hc-brands__label {
  font-family: var(--hc-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hc-muted);
}
.hc-brands__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px) clamp(18px, 3vw, 42px);
}
.hc-brands__item {
  --b: var(--hc-accent, #9a7b4f);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: default;
}
.hc-brands__ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--hc-line);
  background: var(--hc-paper, #fff);
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--hc-muted);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hc-brands__name {
  font-family: var(--hc-serif, Georgia, serif);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .04em;
  /* Muted at 72% opacity on a white band, the brand names read as greyed-out
     placeholders rather than as the manufacturers we stock — the one thing
     this band exists to say. */
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
  opacity: 1;
  transition: color .25s ease, opacity .25s ease;
}
.hc-brands__item:hover .hc-brands__ic,
.hc-brands__item:focus-visible .hc-brands__ic {
  color: #fff;
  background: var(--b);
  border-color: var(--b);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--b) 65%, transparent);
}
.hc-brands__item:hover .hc-brands__name,
.hc-brands__item:focus-visible .hc-brands__name {
  color: var(--b);
  opacity: 1;
}
/* per-brand accent colours */
.hc-brands__item[data-brand="egger"]     { --b: #b5121b; }
.hc-brands__item[data-brand="kronospan"] { --b: #0a4c9e; }
.hc-brands__item[data-brand="kastamonu"] { --b: #00833e; }
.hc-brands__item[data-brand="cleaf"]     { --b: #3a3a3a; }
.hc-brands__item[data-brand="arpa"]      { --b: #e1251b; }
.hc-brands__item[data-brand="fenix"]     { --b: #1d1d1b; }
.hc-brands__item[data-brand="hettich"]   { --b: #e2001a; }

@media (max-width: 640px) {
  .hc-brands__ic { width: 32px; height: 32px; font-size: 15px; }
  .hc-brands__name { font-size: 14px; }
  .hc-brands__row { gap: 12px 18px; }
}

/* css/blocks/188-page-home.css */
/* =================== page-home.css =================== */
.page-home .hc-day-spotlight {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(246,241,232,0.58));
}
.page-home .hc-cats.hc-cats--premium {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(164px, auto);
  gap: clamp(12px, 1.1vw, 18px);
  align-items: stretch;
}
.page-home .hc-cats.hc-cats--premium .hc-cat-feat {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 360px;
}
.page-home .hc-cats.hc-cats--premium .hc-cat-sm {
  min-height: 164px;
}

@media (max-width: 1180px) {
  .page-home .hc-cats.hc-cats--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .hc-cats.hc-cats--premium .hc-cat-feat {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .page-home .hc-cats.hc-cats--premium {
    grid-template-columns: 1fr;
  }

  .page-home .hc-cats.hc-cats--premium .hc-cat-feat {
    grid-column: auto;
    grid-row: auto;
    min-height: 300px;
  }
}

/* v9 — uniform categories grid: equal framed cards, content-sized rows. */
.page-home .hc-cats.hc-cats--grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1.1vw, 18px);
  align-items: stretch;
  margin-top: 20px;
}

.page-home .hc-cats.hc-cats--grid .hc-cat-sm--wide-feature {
  grid-column: span 2;
}

@media (max-width: 1180px) {
  .page-home .hc-cats.hc-cats--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .hc-cats.hc-cats--grid .hc-cat-sm--wide-feature { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-home .hc-cats.hc-cats--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .hc-cats.hc-cats--grid .hc-cat-sm--wide-feature { grid-column: span 2; }
}
@media (max-width: 460px) {
  .page-home .hc-cats.hc-cats--grid { grid-template-columns: 1fr; }
  .page-home .hc-cats.hc-cats--grid .hc-cat-sm--wide-feature { grid-column: auto; }
}

/* Home tizer strip (value props between Товар дня and bestsellers). */
.hc-tizer-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px auto 28px}
.hc-tizer{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid rgba(141,109,71,.16);border-radius:16px;background:linear-gradient(180deg,rgba(255,253,250,.9),rgba(250,246,240,.5));text-decoration:none;transition:transform .16s,border-color .16s,box-shadow .16s}
.hc-tizer:hover{transform:translateY(-2px);border-color:var(--hc-accent,#b8895a);box-shadow:0 14px 30px -22px rgba(60,46,30,.5)}
.hc-tizer__ic{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(var(--hc-gold-rgb),.16);color:var(--hc-accent-dark,var(--hc-accent-dark))}
.hc-tizer__ic svg{width:21px;height:21px}
.hc-tizer__txt{display:grid;gap:2px}
.hc-tizer__txt b{font-family:var(--hc-serif,Georgia,serif);font-weight:500;color:var(--hc-ink,#1a1714);font-size:16px}
.hc-tizer__txt small{color:var(--hc-ink-mid,rgba(26,23,20,.55));font-size:12.5px}
@media(max-width:760px){.hc-tizer-strip{grid-template-columns:1fr}}

/* css/blocks/267-page-home-day.css */
/* =================== page-home-day.css =================== */
/* «Товар дня» — Aspro-style aligned grid: 2 standard cards + 1 big (×2 width)
   on the right, ONE row, EQUAL height. The media is flex-fill, so the big and
   the small cards always end at the same baseline — no column is ever empty. */

.page-home .hc-day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); /* BIG (крупная) · 3 small в ряд */
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
}

.page-home .hc-day-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px -38px rgba(47, 35, 20, 0.42);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.page-home .hc-day-prod:hover {
  transform: translateY(-3px);
  border-color: rgba(141, 109, 71, 0.30);
  box-shadow: 0 28px 64px -36px rgba(47, 35, 20, 0.50);
}
.page-home .hc-day-prod--big {
  grid-column: 1;
  grid-row: 1;
}

/* Media fills the leftover height → every card ends at the same baseline. */
.page-home .hc-day-prod__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  display: block;
  background: linear-gradient(145deg, #fffaf0, #efe4cf);
  overflow: hidden;
}
.page-home .hc-day-prod__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.page-home .hc-day-prod:hover .hc-day-prod__img { transform: scale(1.04); }
.page-home .hc-day-prod__ph { position: absolute; inset: 0; display: grid; place-items: center; }

.page-home .hc-day-prod__badge,
.page-home .hc-day-prod__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  font: 700 10px/1 var(--hc-mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #15120f;
  color: #fff;
}
.page-home .hc-day-prod__badge--sale { background: #8b3f32; }
.page-home .hc-day-prod__tag { background: var(--hc-accent, var(--hc-accent)); }

.page-home .hc-day-prod__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}
.page-home .hc-day-prod__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 600 10px/1 var(--hc-mono, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(94, 75, 48, 0.70);
}
.page-home .hc-day-prod__name {
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-home .hc-day-prod__name:hover { color: var(--hc-accent-dark, var(--hc-accent-dark)); }
.page-home .hc-day-prod__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(26, 23, 20, 0.62);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-home .hc-day-prod__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.page-home .hc-day-prod__price {
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  color: var(--hc-ink, #1a1714);
}
.page-home .hc-day-prod__price--ask {
  font-size: 15px;
  font-style: italic;
  color: rgba(26, 23, 20, 0.60);
}
.page-home .hc-day-prod__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #15120f;
  color: #fff;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.page-home .hc-day-prod__cta:hover { background: #000; transform: translateY(-1px); }

/* BIG card — larger media + roomier body + bigger type. */
.page-home .hc-day-prod--big .hc-day-prod__media { min-height: 240px; }
.page-home .hc-day-prod--big .hc-day-prod__body { padding: 20px 22px 22px; gap: 12px; }
.page-home .hc-day-prod--big .hc-day-prod__name {
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.12;
  -webkit-line-clamp: 3;
}
.page-home .hc-day-prod--big .hc-day-prod__price { font-size: clamp(22px, 2.2vw, 30px); }
.page-home .hc-day-prod--big .hc-day-prod__cta { min-height: 46px; padding: 0 26px; font-size: 14px; }

@media (max-width: 920px) {
  .page-home .hc-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .hc-day-prod--big { grid-column: 1 / -1; grid-row: auto; }
  .page-home .hc-day-prod--big .hc-day-prod__media { min-height: 220px; }
}
@media (max-width: 560px) {
  .page-home .hc-day-grid { grid-template-columns: 1fr; }
}

/* css/blocks/268-page-home-blog.css */
/* =================== page-home-blog.css =================== */
/* Extracted from 188-page-home.css: home blog latest slot layout. */

.page-home .hc-blog-latest-slot .post-card__media img, .page-home .hc-blog-latest-slot .post-card__media .post-card__ph {width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;}
.page-home .hc-blog-latest-slot .post-card__title a {text-decoration: none;
  color: var(--sf-ink);}
.page-home .hc-blog-latest-slot .blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.page-home .hc-blog-latest-slot .post-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border-radius: var(--sf-radius-xl);
  border: 1px solid var(--sf-line);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 236, 0.96));
  box-shadow: var(--sf-shadow);}
.page-home .hc-blog-latest-slot .post-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  min-height: 0;
  max-height: 280px;
  background: linear-gradient(145deg, #e7d3ab, #efe2c6);
}
.page-home .hc-blog-latest-slot .post-card__body {display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px 20px 20px;}
.page-home .hc-blog-latest-slot .post-card__title {margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 2.1vw, 34px);
  line-height: 1.04;
  font-weight: 500;}
.page-home .hc-blog-latest-slot .post-card__excerpt {margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sf-muted);}
.page-home .hc-blog-latest-slot .post-card--feature { grid-row: auto; }
@media (max-width: 980px) {
  .page-home .hc-blog-latest-slot .blog__grid {
    grid-template-columns: 1fr;
  }
}

/* css/blocks/287-hc-hero-slide-product.css */
/* =================== hc-hero-slide-product.css =================== */
/* Hero attached product (banner-product): price + CTA + HTMX ATC feedback. */

.hc-hero-slide__product {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  max-width: 420px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  background: rgba(15, 12, 9, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hc-hero-slide__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 30px;
}

.hc-hero-slide__cur {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: #fff;
}

.hc-hero-slide__old {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: line-through;
}

.hc-hero-slide__product .hc-util-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hc-hero-slide__product .atc-ok,
.hc-hero-slide__product .atc-err {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hc-hero-slide__product .atc-ok {
  color: #dcfbe7;
  background: rgba(52, 115, 79, 0.4);
  border: 1px solid rgba(175, 241, 207, 0.38);
}

.hc-hero-slide__product .atc-err {
  color: #ffe6de;
  background: rgba(143, 58, 36, 0.42);
  border: 1px solid rgba(255, 188, 165, 0.4);
}

@media (max-width: 900px) {
  .hc-hero-slide__product {
    max-width: 100%;
    margin-bottom: 14px;
  }
}

/* css/blocks/298-home-ind.css */
/* ===== 298-home-ind.css — INDUSTRIAL home layout (timb) =====
   Scoped to .page-home--ind → inert everywhere else. Fresh ind-* namespace,
   tokens-driven, no !important. */

/* ── hero: graphite, typographic ── */
.page-home--ind .ind-hero {
  background: var(--hc-b2b-grad);
  color: #fff;
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 3px solid var(--hc-accent);
}
.ind-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.ind-hero__eyebrow {
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}
.ind-hero__title {
  margin: 0 0 18px;
  font-family: var(--hc-serif);
  font-size: clamp(29px, 5.4vw, 72px); /* 29px min: «Комплектующие.» must fit a 390px viewport */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--hc-ls-tight);
  color: #fff; /* explicit: global h1 rule paints ink, inheritance won't win */
}
.ind-hero__title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hc-accent);
}
.ind-hero__lede {
  max-width: 52ch;
  margin: 0 0 26px;
  font-size: var(--hc-fs-lg);
  line-height: var(--hc-lh-base);
  color: rgba(255, 255, 255, 0.7);
}
.ind-hero__search {
  display: flex;
  max-width: 560px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--hc-r-xs);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color var(--hc-dur-fast) var(--hc-ease);
}
.ind-hero__search:focus-within { border-color: var(--hc-accent); }
.ind-hero__input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  font-size: var(--hc-fs-md);
  color: #fff;
  background: none;
  border: 0;
  outline: none;
}
.ind-hero__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.ind-hero__submit {
  padding: 0 26px;
  font: inherit;
  font-size: var(--hc-fs-md);
  font-weight: 600;
  color: #fff;
  background: var(--hc-accent);
  border: 0;
  cursor: pointer;
  transition: background var(--hc-dur-fast) var(--hc-ease);
}
.ind-hero__submit:hover { background: var(--hc-accent-dark); }
.ind-hero__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.ind-hero__chip {
  padding: 7px 13px;
  font-size: var(--hc-fs-sm);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--hc-r-xs);
  transition: color var(--hc-dur-fast) var(--hc-ease), border-color var(--hc-dur-fast) var(--hc-ease);
}
.ind-hero__chip:hover { color: #fff; border-color: var(--hc-accent); }
.ind-hero__chip--all { color: var(--hc-accent); border-color: rgba(var(--hc-accent-rgb), 0.5); }
.ind-hero__chip--all:hover { color: #fff; background: var(--hc-accent); border-color: var(--hc-accent); }

/* hero spec column */
.ind-hero__specs {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ind-spec {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ind-spec__num {
  font-family: var(--hc-mono);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}
.ind-spec__num sup {
  font-size: 0.5em;
  color: var(--hc-accent);
}
.ind-spec__cap {
  margin-top: 4px;
  font-size: var(--hc-fs-sm);
  color: rgba(255, 255, 255, 0.55);
}

/* ── marquee ── */
.ind-marquee {
  overflow: hidden;
  padding: 12px 0;
  background: var(--hc-paper);
  border-bottom: 1px solid var(--hc-line);
}
.ind-marquee__track {
  display: flex;
  width: max-content;
  animation: ind-marquee 38s linear infinite;
}
.ind-marquee__seq {
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent);
  white-space: nowrap;
  padding-right: 12px;
}
@keyframes ind-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ind-marquee__track { animation: none; }
}

/* ── numbered sections ── */
.ind-sec { padding: clamp(40px, 6vw, 72px) 0 0; }
.ind-sec__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--hc-ink);
}
.ind-sec__idx {
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-md);
  font-weight: 600;
  color: var(--hc-accent);
}
.ind-sec__title {
  margin: 0;
  font-family: var(--hc-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: var(--hc-ls-tight);
  color: var(--hc-ink);
}
.ind-sec__more {
  margin-left: auto;
  font-size: var(--hc-fs-sm);
  font-weight: 600;
  color: var(--hc-accent);
  text-decoration: none;
  white-space: nowrap;
}
.ind-sec__more:hover { color: var(--hc-accent-dark); }

/* ── categories: dense index grid ── */
.ind-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  border-top: 1px solid var(--hc-line-2);
  border-left: 1px solid var(--hc-line-2);
}
.ind-cat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num name" "num count";
  column-gap: 14px;
  align-content: center;
  min-height: 92px;
  padding: 16px 44px 16px 18px;
  text-decoration: none;
  border-right: 1px solid var(--hc-line-2);
  border-bottom: 1px solid var(--hc-line-2);
  background: var(--hc-paper);
  transition: background var(--hc-dur-fast) var(--hc-ease);
}
.ind-cat:hover { background: var(--hc-accent-soft); }
.ind-cat__num {
  grid-area: num;
  align-self: center;
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-sm);
  color: var(--hc-ink-muted);
}
.ind-cat__name {
  grid-area: name;
  align-self: end;
  font-family: var(--hc-serif);
  font-size: var(--hc-fs-lg);
  font-weight: 600;
  color: var(--hc-ink);
  line-height: var(--hc-lh-snug);
}
.ind-cat__count {
  grid-area: count;
  font-size: var(--hc-fs-xs);
  color: var(--hc-ink-mid);
}
.ind-cat__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--hc-fs-lg);
  color: var(--hc-line-strong);
  transition: color var(--hc-dur-fast) var(--hc-ease), transform var(--hc-dur-fast) var(--hc-ease);
}
.ind-cat:hover .ind-cat__arrow { color: var(--hc-accent); transform: translateY(-50%) translateX(3px); }

/* ── popular rail ── */
.ind-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.ind-rail > * { scroll-snap-align: start; }

/* ── services band ── */
.ind-serv {
  margin-top: clamp(48px, 7vw, 80px);
  padding: clamp(36px, 5vw, 64px) 0;
  background: var(--hc-b2b-grad);
  color: #fff;
}
.ind-serv__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.ind-serv__cell h3 {
  margin: 12px 0 6px;
  font-family: var(--hc-serif);
  font-size: var(--hc-fs-xl);
  font-weight: 600;
  color: #fff; /* explicit: global h3 rule paints ink */
}
.ind-serv__cell p {
  margin: 0;
  font-size: var(--hc-fs-sm);
  line-height: var(--hc-lh-base);
  color: rgba(255, 255, 255, 0.62);
}
.ind-serv__ico {
  width: 30px;
  height: 30px;
  color: var(--hc-accent);
}
.ind-serv__cta {
  justify-self: end;
  padding: 14px 26px;
  font-weight: 600;
  font-size: var(--hc-fs-md);
  color: #fff;
  text-decoration: none;
  background: var(--hc-accent);
  border-radius: var(--hc-r-xs);
  white-space: nowrap;
  transition: background var(--hc-dur-fast) var(--hc-ease);
}
.ind-serv__cta:hover { background: var(--hc-accent-dark); }

/* ── journal rows ── */
.ind-blog { border-top: 1px solid var(--hc-line-2); }
.ind-blog__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 4px;
  text-decoration: none;
  border-bottom: 1px solid var(--hc-line-2);
  transition: background var(--hc-dur-fast) var(--hc-ease);
}
.ind-blog__row:hover { background: var(--hc-accent-soft); }
.ind-blog__title {
  font-family: var(--hc-serif);
  font-size: var(--hc-fs-lg);
  font-weight: 600;
  color: var(--hc-ink);
  line-height: var(--hc-lh-snug);
}
.ind-blog__date {
  margin-left: auto;
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-xs);
  color: var(--hc-ink-mid);
  white-space: nowrap;
}
.ind-blog__arrow { color: var(--hc-accent); }

/* ── CTA band ── */
.ind-cta {
  margin-top: clamp(48px, 7vw, 80px);
  padding: clamp(36px, 5vw, 64px) 0;
  background: var(--hc-paper);
  border-top: 3px solid var(--hc-accent);
}
.ind-cta__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ind-cta__title {
  margin: 0 0 8px;
  font-family: var(--hc-serif);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: var(--hc-ls-tight);
  color: var(--hc-ink);
}
.ind-cta__text {
  margin: 0;
  max-width: 56ch;
  color: var(--hc-ink-soft);
}
.ind-cta__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ind-cta__btn {
  padding: 15px 28px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--hc-accent);
  border-radius: var(--hc-r-xs);
  transition: background var(--hc-dur-fast) var(--hc-ease);
}
.ind-cta__btn:hover { background: var(--hc-accent-dark); }
.ind-cta__phone {
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-lg);
  font-weight: 600;
  color: var(--hc-ink);
  text-decoration: none;
}
.ind-cta__phone:hover { color: var(--hc-accent); }

/* ── responsive ── */
@media (max-width: 900px) {
  .ind-hero__grid { grid-template-columns: 1fr; }
  .ind-hero__specs {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }
  .ind-serv__grid { grid-template-columns: 1fr; }
  .ind-serv__cta { justify-self: start; }
}
@media (max-width: 560px) {
  .ind-hero__specs { grid-template-columns: 1fr; }
  .ind-cats { grid-template-columns: 1fr; }
  .ind-blog__date { display: none; }
}

/* css/blocks/301-home-scandi.css */
/* ===== 301-home-scandi.css — SCANDI home layout (V5) =====
   Scoped to .page-home--sc + sc-* namespace → inert elsewhere. No !important. */

.sc-defs { position: absolute; }
.sc-tex { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* shared atoms */
.sc-btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--hc-ink);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--hc-dur-base) var(--hc-ease), transform var(--hc-dur-base) var(--hc-ease);
}
.sc-btn:hover { background: var(--hc-accent); transform: translateY(-1px); }
.sc-btn--ghost { color: var(--hc-ink); background: none; box-shadow: inset 0 0 0 1.5px var(--hc-line-strong); }
.sc-btn--ghost:hover { color: #fff; background: var(--hc-ink); box-shadow: inset 0 0 0 1.5px var(--hc-ink); }
.sc-underline {
  font-size: 14px;
  font-weight: 600;
  color: var(--hc-ink);
  text-decoration: none;
  background: linear-gradient(var(--hc-ink), var(--hc-ink)) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 3px;
  transition: background-size 0.3s var(--hc-ease);
}
.sc-underline:hover, .sc-underline:focus-visible { background-size: 100% 1.5px; outline: none; }
.sc-underline--on { background-size: 100% 1px; font-size: 13.5px; }

/* hero */
.page-home--sc .sc-hero {
  background: var(--hc-bg);
  border-bottom: 1px solid var(--hc-line);
}
.sc-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  min-height: 440px;
}
.sc-hero__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 3.4vw, 48px) clamp(36px, 5vw, 64px) 0;
}
.sc-hero__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hc-ink-mid);
  margin-bottom: 18px;
}
.sc-hero__title {
  margin: 0 0 16px;
  font-family: var(--hc-serif);
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--hc-ink);
  text-wrap: balance;
}
.sc-hero__lede {
  max-width: 44ch;
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: var(--hc-lh-base);
  color: var(--hc-ink-soft);
}
.sc-hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sc-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--hc-r-lg);
  margin: clamp(18px, 2.6vw, 34px) 0;
  min-height: 300px;
}
.sc-hero__tag {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-radius: var(--hc-r-md);
  box-shadow: 0 16px 40px -18px rgba(29, 29, 27, 0.5);
}
.sc-hero__tag b { font-size: 14px; font-weight: 600; color: var(--hc-ink); }
.sc-hero__tag span { font-size: 12.5px; color: var(--hc-ink-mid); }

/* sections */
.sc-sec { padding-top: clamp(30px, 4.4vw, 52px); }
.sc-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sc-sechead h2 {
  margin: 0;
  font-family: var(--hc-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hc-ink);
}

/* category texture tiles */
.sc-cats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.sc-cat {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--hc-r-md);
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.sc-cat__tx { position: absolute; inset: 0; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.sc-cat:hover .sc-cat__tx, .sc-cat:focus-visible .sc-cat__tx { transform: scale(1.05); }
.sc-cat:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }
/* The tile is a sample of the material itself, so nothing may sit on top of it
   and change its colour.  The caption carries its own opaque plate instead of
   the scrim that used to darken the whole photograph. */
.sc-cat b {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: var(--hc-r-sm);
  background: rgba(253, 251, 247, 0.94);
  color: var(--hc-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* product grid (sc cards live in 302) */
.sc-pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.sc-cats[data-count="1"],
.sc-pgrid[data-count="1"],
.sc-news[data-count="1"] {
  grid-template-columns: minmax(220px, 399px);
  justify-content: center;
}
.sc-cats[data-count="2"],
.sc-pgrid[data-count="2"],
.sc-news[data-count="2"] {
  grid-template-columns: repeat(2, minmax(220px, 399px));
  justify-content: center;
}
.sc-cats[data-count="3"],
.sc-pgrid[data-count="3"],
.sc-news[data-count="3"] {
  grid-template-columns: repeat(3, minmax(220px, 399px));
  justify-content: center;
}
.sc-pgrid .pcard-sc__media { aspect-ratio: 1 / 1; }

/* services quiet strip */
.sc-serv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(16px, 2.6vw, 34px);
  align-items: center;
  padding: clamp(18px, 2.6vw, 28px) clamp(18px, 2.6vw, 30px);
  background: var(--hc-paper);
  border-radius: var(--hc-r-lg);
  box-shadow: 0 1px 0 rgba(29, 29, 27, 0.05), 0 18px 44px -34px rgba(29, 29, 27, 0.4);
}
.sc-serv__cell {
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: var(--hc-r-md);
  transition: background-color 0.18s ease;
}
.sc-serv__cell:hover { background: var(--hc-bg); }
.sc-serv__tile {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(var(--hc-accent-rgb), 0.09);
  display: grid;
  place-items: center;
  transition: background-color 0.18s ease;
}
.sc-serv__cell:hover .sc-serv__tile { background: rgba(var(--hc-accent-rgb), 0.16); }
.sc-serv__ico { width: 24px; height: 24px; color: var(--hc-accent); }
.sc-serv__txt { min-width: 0; }
.sc-serv__txt b { display: block; font-size: 15px; font-weight: 600; color: var(--hc-ink); margin-bottom: 2px; transition: color 0.18s ease; }
.sc-serv__cell:hover .sc-serv__txt b { color: var(--hc-accent-dark); }
.sc-serv__txt > span { display: block; font-size: 13px; color: var(--hc-ink-mid); line-height: 1.45; }
.sc-serv__arr {
  flex: none;
  width: 17px;
  height: 17px;
  margin-left: auto;
  color: var(--hc-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sc-serv__cell:hover .sc-serv__arr { opacity: 1; transform: none; }
.sc-serv__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 11px 20px;
  border: 1px solid var(--hc-ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hc-ink);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.sc-serv__cta svg { width: 15px; height: 15px; transition: transform 0.18s ease; }
.sc-serv__cta:hover { background: var(--hc-ink); color: #fff; }
.sc-serv__cta:hover svg { transform: translateX(3px); }
.sc-serv-sec { margin: clamp(30px, 4vw, 46px) 0 10px; }

/* journal rows */
.sc-blog { border-top: 1px solid var(--hc-line-2); }
.sc-blog__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  justify-content: space-between;
  padding: 15px 4px;
  text-decoration: none;
  border-bottom: 1px solid var(--hc-line-2);
  transition: background var(--hc-dur-fast) var(--hc-ease);
}
.sc-blog__row:hover { background: var(--hc-paper); }
.sc-blog__row b { font-size: 15.5px; font-weight: 600; color: var(--hc-ink); line-height: 1.4; }
.sc-blog__row time { font-size: 12.5px; color: var(--hc-ink-mid); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* CTA band */
.sc-cta {
  margin-top: clamp(36px, 5vw, 60px);
  padding: 0 0 clamp(40px, 6vw, 80px);
  background: var(--hc-bg);
}
.sc-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 6vw, 100px);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 68px);
  color: #fff;
  background: linear-gradient(120deg, #1d2820 0%, #243a2b 58%, #2f563a 100%);
  border-radius: var(--hc-r-lg);
  box-shadow: 0 18px 38px rgba(30, 43, 33, .14);
}
.sc-cta__copy { max-width: 680px; }
.sc-cta__eyebrow { display: block; margin-bottom: 13px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #b9d8be; }
.sc-cta__title {
  margin: 0 0 12px;
  font-family: var(--hc-serif);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.sc-cta__text { margin: 0; max-width: 58ch; color: rgba(255,255,255,.76); }
.sc-cta__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sc-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--hc-ink);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--hc-dur-base) var(--hc-ease), background var(--hc-dur-base) var(--hc-ease);
}
.sc-cta__btn:hover { background: #ddecde; transform: translateY(-2px); }
.sc-cta__phone {
  display: grid;
  gap: 3px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-cta__phone span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.sc-cta__phone:hover { color: #bfe1c5; }

@media (max-width: 900px) {
  .sc-hero__grid { grid-template-columns: 1fr; }
  .sc-hero__txt { padding-right: 0; }
  .sc-hero__media { margin-top: 0; }
  .sc-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sc-serv { grid-template-columns: 1fr; }
  .sc-serv__cta { justify-self: stretch; justify-content: center; }
  .sc-serv__arr { display: none; }
  .sc-cta__grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 540px) {
  /* One card per row turned a 390px screen into a stack of 340x340 tiles: two
     products filled the whole viewport, and a shop with 19 522 SKUs read as a
     very short list. Two columns is what a phone catalogue is for. */
  .sc-pgrid { gap: 10px; }
  .sc-cta { padding-bottom: 40px; }
  .sc-cta__grid { padding: 26px 22px; border-radius: var(--hc-r-md); }
  .sc-cta__actions { align-items: stretch; }
  .sc-cta__btn { justify-content: center; width: 100%; }
  .sc-cta__phone { text-align: center; width: 100%; }
}

/* ── hero slider (shop_hero_slides, timb structure) ── */
.page-home--sc .sc-slider { padding-top: 18px; }
.sc-slider__frame {
  position: relative;
  height: clamp(340px, 34vw, 480px);
  border-radius: var(--hc-r-lg);
  overflow: hidden;
  background: var(--hc-paper-3);
}
.sc-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.7s var(--hc-ease);
  pointer-events: none;
}
.sc-slide.is-on { opacity: 1; pointer-events: auto; }
.sc-slide__picture { display: block; width: 100%; height: 100%; }
.sc-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sc-slide__glass {
  position: absolute;
  left: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 36px);
  max-width: min(460px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--hc-r-md);
  box-shadow: 0 22px 48px -24px rgba(29, 29, 27, 0.45);
  color: var(--hc-ink);
}
.sc-slide__glass em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent-dark);
  font-weight: 600;
}
.sc-slide__glass b {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.sc-slide__desc { font-size: 13.5px; color: var(--hc-ink-soft); line-height: 1.45; }
.sc-slide__glass .sc-btn--sm { margin-top: 4px; }
.sc-slider__dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  gap: 7px;
}
.sc-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(29, 29, 27, 0.18);
  cursor: pointer;
  transition: transform 0.15s var(--hc-ease), background 0.15s var(--hc-ease);
}
.sc-slider__dot:hover { transform: scale(1.25); }
.sc-slider__dot.is-on { background: var(--hc-accent); }
.sc-slider__dot:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sc-slide { transition: none; } }

/* ── search strip under the slider ── */
.page-home--sc .sc-search { padding-top: 14px; }
/* The floating chat launcher sits 20px from the bottom-right of the viewport.
   With one page container the search strip now reaches within 12px of that
   corner, and the "Найти" button ended up a quarter under the bubble. Hold the
   strip clear of the launcher on the screens where they can meet. */
@media (min-width: 1025px) {
  .page-home--sc .sc-search__form { margin-right: 72px; }
}
.sc-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 18px;
  background: var(--hc-paper);
  border: 1px solid var(--hc-line-2);
  border-radius: 999px;
  color: var(--hc-ink-mid);
  transition: border-color 0.15s var(--hc-ease), box-shadow 0.15s var(--hc-ease);
}
.sc-search__form:focus-within {
  border-color: var(--hc-accent);
  box-shadow: 0 0 0 3px var(--hc-accent-soft);
}
.page-home--sc .sc-search__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--hc-ink);
  background: none;
  border: 0;
  outline: none;
  box-shadow: none;
}
.page-home--sc .sc-search__input::placeholder { color: var(--hc-ink-muted); }

@media (max-width: 480px) {
  .sc-search__form {
    gap: 8px;
    padding: 5px 6px 5px 14px;
  }
  .page-home--sc .sc-search__input {
    font-size: 14px;
  }
  .sc-search__form .sc-btn {
    flex: none;
    padding: 13px 19px;
  }
}

/* ── about / seo text ── */
.page-home--sc .sc-about { padding-top: clamp(36px, 5vw, 56px); }
.sc-about__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1.6fr;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(22px, 3vw, 34px);
  background: var(--hc-paper);
  border-radius: var(--hc-r-lg);
  box-shadow: 0 1px 0 rgba(29, 29, 27, 0.05), 0 18px 44px -34px rgba(29, 29, 27, 0.35);
}
.sc-about__title {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hc-ink);
  text-wrap: balance;
}
.sc-about__body { color: var(--hc-ink-soft); font-size: 14.5px; line-height: 1.6; }
.sc-about__body p { margin: 0 0 10px; }
.sc-about__body p:last-child { margin-bottom: 0; }
.sc-about__body a { color: var(--hc-accent-dark); font-weight: 600; text-decoration: none; }
.sc-about__body a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .sc-about__grid { grid-template-columns: 1fr; }
  .sc-slide__glass b { font-size: 17px; }
  .sc-slide__desc { display: none; }
}

/* real section photos in category tiles (fallback = procedural texture) */
.sc-cat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-cat__tx picture,
.sc-news__media picture { display: block; width: 100%; height: 100%; }

/* sc-grid mobile 2col: избегаем гигантских одиночных карточек */
@media (max-width: 640px) {
  .page-home--sc .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* line-draw animation for service icons (matches category scenes vibe) */
.sc-draw {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: sc-draw 2.4s ease forwards;
}
.sc-serv__cell:nth-child(2) .sc-draw { animation-delay: 0.25s; }
.sc-serv__cell:nth-child(3) .sc-draw { animation-delay: 0.5s; }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
.sc-serv__cell:hover .sc-draw { animation: sc-draw 1s ease forwards; }
@media (prefers-reduced-motion: reduce) { .sc-draw { animation: none; stroke-dashoffset: 0; } }


/* sc-cat__img hover zoom */
.sc-cat__img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.sc-cat:hover .sc-cat__img { transform: scale(1.05); }

/* ── USP-тизеры под hero (структура донора) ── */
.sc-teasers { background: var(--hc-paper, #fff); border-bottom: 1px solid var(--hc-line, #e7e4df); margin: 26px 0 6px; padding: 26px 0 24px; }
.sc-teasers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.sc-teasers__item { display: block; text-decoration: none; color: inherit; }
.sc-teasers__ico { display: inline-flex; width: 46px; height: 46px; color: var(--hc-accent, #2e7d46); transition: transform .18s var(--hc-ease, ease); }
.sc-teasers__ico svg { width: 100%; height: 100%; }
/* глобальные svg-правила заливают path'ы — тизеры строго line-art */
.sc-teasers__ico svg :not(circle) { fill: none; }
.sc-teasers__item:hover .sc-teasers__ico { transform: translateY(-3px); }
/* Reserve two lines for the title. "Раскрой ЛДСП онлайн" wraps in the
   2-column mobile layout while "Колеровка красок" does not, so the two
   descriptions beside each other started at different heights and the row read
   as crooked. A fixed box aligns them whatever the wording. */
.sc-teasers__title { display: flex; align-items: flex-end; min-height: 2.5em; margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; color: var(--hc-ink, #1d1d1b); }
.sc-teasers__item:hover .sc-teasers__title { color: var(--hc-accent-dark, #235f36); }
.sc-teasers__text { display: block; margin-top: 4px; font-size: 13px; color: var(--hc-ink-soft, #6f6b64); }
@media (max-width: 900px) { .sc-teasers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 480px) { .sc-teasers { padding: 20px 0 18px; } .sc-teasers__ico { width: 40px; height: 40px; } }

/* ── HERO premium: ken burns, glass arrows, progress dots, counter ── */
.sc-slide.is-on .sc-slide__img { animation: scKenburns 12s ease-out forwards; }
@keyframes scKenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.sc-slide__glass { backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 18px 50px -18px rgba(29,29,27,.35); }
.sc-slider__arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  color: var(--hc-ink, #1d1d1b); background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 999px; cursor: pointer;
  opacity: 0; transition: opacity .2s var(--hc-ease, ease), background .15s, transform .15s;
}
.sc-slider__arr svg { width: 20px; height: 20px; }
.sc-slider__arr--prev { left: 18px; }
.sc-slider__arr--next { right: 18px; }
.sc-slider__frame:hover .sc-slider__arr, .sc-slider__arr:focus-visible { opacity: 1; }
.sc-slider__arr:hover { background: rgba(255,255,255,.92); transform: translateY(-50%) scale(1.06); }
@media (max-width: 900px), (hover: none) { .sc-slider__arr { display: none; } }
.sc-slider__dot { position: relative; overflow: hidden; transition: width .25s var(--hc-ease, ease); }
.sc-slider__dot.is-on { width: 30px; border-radius: 999px; }
.sc-slider__dot.is-on::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--hc-accent, #2e7d46); transform-origin: left;
  animation: scDotFill 6s linear forwards;
}
@keyframes scDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sc-slider__count {
  position: absolute; right: 20px; bottom: 16px; z-index: 4;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(29,29,27,.42); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums;
  /* The visual counter overlaps the dot row on compact hero layouts.  It is
     purely presentational, so it must never take a tap from a slide tab. */
  pointer-events: none;
}
.sc-slider__count i { font-style: normal; opacity: .55; }
.sc-slider__count b + i { margin-left: 1px; }
@media (prefers-reduced-motion: reduce) {
  .sc-slide.is-on .sc-slide__img { animation: none; }
  .sc-slider__dot.is-on::after { animation: none; transform: none; }
}

/* ── NEWS cards (главная): compact equal-size grid ── */
.sc-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sc-news__card { display: block; min-width: 0; text-decoration: none; color: inherit; }
.sc-news__media {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--hc-r-md, 14px); background: var(--hc-paper-2, #e9e6e0);
}
.sc-news__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--hc-ease, ease); }
.sc-news__card:hover .sc-news__media img { transform: scale(1.05); }
.sc-news__media time {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 700; color: var(--hc-ink, #1d1d1b); letter-spacing: .03em;
}
.sc-news__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.35;
  transition: color .15s var(--hc-ease, ease);
}
.sc-news__card:hover .sc-news__title { color: var(--hc-accent-dark, #235f36); }
@media (max-width: 900px) {
  .sc-news { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 540px) {
  .sc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc-cat { aspect-ratio: 4 / 3; }
  .sc-news { grid-template-columns: 1fr; gap: 16px; }
  /* The centring rules above give short grids 220px-wide tracks, which overflow
     a phone, so they are reset here.  Written as a bare [data-count] this also
     caught a full category list and stacked all twelve tiles one per screen —
     match only the counts the centring actually applies to. */
  .sc-cats:is([data-count="1"], [data-count="2"], [data-count="3"]),
  .sc-pgrid:is([data-count="1"], [data-count="2"], [data-count="3"]),
  .sc-news[data-count] {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

/* 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/211-sec-divider.css */
/* =================== sec-divider.css =================== */
.sec-divider {border: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(180, 151, 115, 0.18) 50%, transparent 100%); margin: clamp(24px, 3vw, 40px) 0}

/* css/blocks/244-hc-day-spotlight.css */
/* =================== hc-day-spotlight.css =================== */
.hc-day-spotlight .hc-pgrid[data-view="list"] {
  grid-template-columns: 1fr;
}

.hc-day-spotlight .hc-pgrid[data-view="list"] .pcard {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 56px -30px rgba(30, 22, 12, 0.36);
}

.hc-day-spotlight .hc-pgrid[data-view="list"] .pcard-shell {
  min-height: clamp(340px, 42vw, 520px);
}

/* ── Header aside: "до конца дня" countdown + catalog link ─────────────────── */
.hc-day-spotlight__aside {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hc-day-countdown {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.9), rgba(var(--hc-gold-rgb), 0.12));
  color: var(--hc-ink, #1a1714);
  font-size: 12px;
  white-space: nowrap;
}
.hc-day-countdown__ico {
  color: var(--hc-accent, var(--hc-accent));
}
.hc-day-countdown__lbl {
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
}
.hc-day-countdown__time {
  font-family: var(--hc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}

@media (max-width: 560px) {
  .hc-day-countdown__lbl {
    display: none;
  }
}

/* css/blocks/220-news-block.css */
/* =================== news-block.css =================== */
.news-block {
  background: var(--hc-bg, #f7f2e8);
}

.news-block .hc-sec-h {
  align-items: end;
  margin-bottom: clamp(20px, 2.4vw, 34px);
}

.news-block .hc-sec-h__title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.news-block .hc-sec-h__title h2,
.news-block__aside h2 {
  margin: 0;
  color: var(--sf-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(34px, 3vw, 52px);
  font-weight: 500;
  line-height: 0.98;
}

.news-grid,
.news-block__main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
  align-items: stretch;
}

.news-block__split {
  display: grid;
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: start;
}

.news-block__aside {
  display: grid;
  gap: 14px;
  align-content: start;
  position: sticky;
  top: 96px;
}

.news-item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 0 0 18px;
  overflow: hidden;
  border-radius: var(--sf-radius-xl, 24px);
  border: 1px solid var(--sf-line, rgba(54, 45, 34, 0.14));
  background: rgba(255, 252, 247, 0.92);
  box-shadow: var(--sf-shadow, 0 18px 50px rgba(35, 28, 20, 0.08));
}

.news-item__cover-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 0;
  background: linear-gradient(135deg, #f2eadb 0%, #e4d4bd 100%);
}

.news-item__cover,
.news-item__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.news-item__cover {
  object-fit: cover;
  object-position: center;
}

.news-item__placeholder {
  position: relative;
  background:
    radial-gradient(circle at 22% 78%, rgba(184, 154, 112, 0.12) 0 20%, transparent 21%),
    radial-gradient(circle at 82% 18%, rgba(120, 137, 115, 0.13) 0 18%, transparent 19%),
    linear-gradient(135deg, #fbf5e9 0%, #dfcbb1 100%);
}

.news-item__placeholder::before {
  content: "TIMB";
  position: absolute;
  left: 26px;
  top: 24px;
  color: rgba(122, 94, 61, 0.8);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.34em;
}

.news-item__date,
.news-item h3,
.news-item p {
  margin-left: 22px;
  margin-right: 22px;
}

.news-item__date {
  align-self: end;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.58));
  font-size: 12px;
  line-height: 1;
}

.news-item h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--sf-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(19px, 1.45vw, 26px);
  font-weight: 500;
  line-height: 1.08;
}

.news-item h2 {
  margin: 0 22px;
  color: var(--sf-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(19px, 1.45vw, 26px);
  font-weight: 500;
  line-height: 1.08;
}

.news-item h2 a {
  color: inherit;
  text-decoration: none;
}

.news-item h2 a:hover {
  color: var(--sf-gold, #b9945f);
}

.news-item h3 a {
  color: inherit;
  text-decoration: none;
}

.news-item h3 a:hover {
  color: var(--sf-gold, #b9945f);
}

.news-item p {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.66));
  font-size: 15px;
  line-height: 1.55;
}

.news-block--t2 .news-block__main,
.news-block--t4 .news-block__main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-block--t4 .news-item {
  padding-top: 22px;
}

.news-block--t5 .news-item {
  padding-top: 22px;
}

.company-news-page .company-news-page__head {
  align-items: end;
  margin: clamp(20px, 3vw, 38px) 0;
}

.company-news-page .company-news-page__head h1 {
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 0.98;
}

.company-news-page .company-news-page__head p {
  max-width: 62ch;
  margin: 10px 0 0;
}

.company-news-page .news-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .news-grid,
  .news-block__main,
  .news-block--t2 .news-block__main,
  .news-block--t4 .news-block__main {
    grid-template-columns: 1fr;
  }

  .news-block__split {
    grid-template-columns: 1fr;
  }

  .news-block__aside {
    position: static;
  }

  .company-news-page .news-grid {
    grid-template-columns: 1fr;
  }
}