/* 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;
  grid-auto-rows: 1fr;
  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)); } }

/* List view toggle. Single column → rows must be content-height; the base
   `grid-auto-rows: 1fr` otherwise stretches each row to an equal slice of the
   (tall) results column, blowing every card up into a huge empty panel. */
.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%;
  filter: grayscale(1) contrast(0.98) brightness(0.97);
  transition: transform 0.26s ease, filter 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);
  filter: grayscale(0) saturate(1.06) contrast(1.02) brightness(1);
}

.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;
  filter: grayscale(1) contrast(1) brightness(0.97);
}

.pcard[data-pcard-variant]:is(.pcard--type-sheet_material, .pcard--type-material, .pcard--type-lumber):hover
  :is(.pcard-a__media picture img, .pcard-b__media picture img, .pcard-d__media picture img, .pcard-media__img) {
  filter: grayscale(0) saturate(1.05) contrast(1.02) brightness(1);
}

.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:
    linear-gradient(180deg, rgba(24, 20, 16, 0.08), rgba(24, 20, 16, 0.38)),
    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%;
  filter: grayscale(1) contrast(0.98) brightness(0.97);
  transition: transform 0.26s ease, filter 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);
  filter: grayscale(0) saturate(1.06) contrast(1.02) brightness(1);
}

.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;
}

.pcard[data-pcard-variant="a"] .pcard-a__props .pcard-c__pill {
  flex: 0 1 auto;
  max-width: 100%;
  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%;
  filter: grayscale(1) contrast(0.98) brightness(0.97);
  transition: transform 0.26s ease, filter 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);
  filter: grayscale(0) saturate(1.06) contrast(1.02) brightness(1);
}

.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%;
  filter: grayscale(1) contrast(0.98) brightness(0.97);
  transition: transform 0.26s ease, filter 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);
  filter: grayscale(0) saturate(1.06) contrast(1.02) brightness(1);
}

.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;
}

/* Availability pill. It sits beside the promo badge rather than instead of it:
   as an elif, a sale or bestseller label hid availability entirely, and so did
   simply being in stock. Colours follow stock_kind from _data.html — the same
   four states every other card variant uses. */
.pcard[data-pcard-variant="d"] .pcard-d__pill--stock {
  text-transform: none;
  letter-spacing: 0.02em;
}

.pcard[data-pcard-variant="d"] .pcard-d__pill--stock-in {
  border-color: rgba(15, 122, 74, 0.28);
  background: rgba(232, 247, 239, 0.94);
  color: #0f7a4a;
}

.pcard[data-pcard-variant="d"] .pcard-d__pill--stock-low {
  border-color: rgba(176, 118, 20, 0.3);
  background: rgba(253, 245, 228, 0.94);
  color: #8a5c10;
}

.pcard[data-pcard-variant="d"] .pcard-d__pill--stock-out {
  border-color: rgba(176, 42, 42, 0.28);
  background: rgba(253, 236, 236, 0.94);
  color: #a12727;
}

.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%;
  filter: grayscale(1) contrast(0.98) brightness(0.97);
  transition: transform 0.24s ease, filter 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);
  filter: grayscale(0) saturate(1.06) contrast(1.02) brightness(1);
}

.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; }
.pcard-sc__img { object-fit: cover; }
/* product photos (hardware, finishes, adhesives, tools) stay contained + padded
   so they are not cropped; texture swatches fill the tile edge-to-edge */
.pcard--type-hardware .pcard-sc__img,
.pcard--type-wood_finish .pcard-sc__img,
.pcard--type-finish .pcard-sc__img,
.pcard--type-adhesive .pcard-sc__img,
.pcard--type-lacquer_kit .pcard-sc__img,
.pcard--type-tooling .pcard-sc__img { object-fit: contain; padding: 12px; }
.pcard-sc:hover .pcard-sc__ph,
.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, 18px);
  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: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-row__specs i b {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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;
  grid-template-columns: 90px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pcard-row__st {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--hc-r-xs);
  background: var(--hc-success-soft);
  color: var(--hc-accent-dark);
  white-space: nowrap;
}
.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;
}
/* 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/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(1160px, 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(280px, 0.72fr) minmax(350px, 1fr) 300px;
  gap: clamp(18px, 2vw, 28px);
  max-height: inherit;
  padding: clamp(22px, 2.8vw, 42px);
}

/* Рейл без коробки: рамка с заливкой давала внутри окна вторую карточку —
   тяжёлый прямоугольник рядом с лёгким текстом. У донора здесь просто
   колонка: цена, кнопка, дальше действия текстом. */
.hc-qv__rail {
  align-self: start;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 22px 18px 18px;
  border: 1px solid rgba(47, 99, 214, 0.13);
  border-radius: 18px;
  background: #f7f9fd;
}

/* Полоса миниатюр под снимком. */
.hc-qv__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.hc-qv__thumb {
  width: 62px;
  height: 62px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(54, 45, 34, 0.14);
  border-radius: 8px;
  transition: border-color .16s ease;
}

.hc-qv__thumb:hover,
.hc-qv__thumb:focus-visible { border-color: var(--hc-accent, #2f63d6); }

.hc-qv__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Снимок и полоса миниатюр — одна колонка окна. Без обёртки миниатюры
   становились отдельной ячейкой сетки и выталкивали текст с покупкой
   в чужие колонки. */
.hc-qv__figure {
  display: grid;
  align-content: start;
  min-width: 0;
}

.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: contain;
  object-position: center;
}

/* Снимок кладётся в рамку по её размеру, а не тянется процентами: у рамки
   высота задана пропорцией, а картинка внутри центрированной сетки считала
   свои 100% от самой себя и вырастала в полторы тысячи пикселей — видно было
   только середину, обрезанную рамкой. */
.hc-qv__gallery picture {
  position: absolute;
  inset: 0;
  display: block;
}

.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__kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--hc-accent, #2f63d6);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hc-qv__kicker b {
  padding-left: 9px;
  border-left: 1px solid rgba(47, 99, 214, 0.22);
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.58));
  font: inherit;
}

.hc-qv__title {
  margin: 0;
  color: var(--sf-ink, #1a1714);
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  /* Сорок пунктов — размер для половины окна; в средней колонке из трёх
     название «ЛДСП 25 мм 2800*2070 мм Текстиль бежевый F416 ST10 8 Egger»
     занимало ими четыре строки и вытесняло характеристики. */
  font-size: clamp(21px, 1.5vw, 27px);
  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-ink, #1a1714);
  font-family: inherit;
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  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__unit {
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.58));
  font-size: 14px;
  white-space: nowrap;
}

.hc-qv__desc {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.68));
  font-size: 15px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 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;
}

/* Внутри рейла всё в столбик. Счётчик рядом с кнопкой и три кнопки в ряд —
   раскладка для широкой колонки; в 268 пикселях от «В корзину» оставалось
   восемьдесят, и надпись обрезалась до «корзин». */
.hc-qv__actions {
  display: grid;
  gap: 10px;
  align-items: stretch;
}

/* Счётчик и «В корзину» — крупные: это главное действие окна, и рядом с
   ценой в 38 пикселей кнопка в 44 читалась как второстепенная. */
.hc-qv__actions .hc-qty {
  display: flex;
  justify-content: space-between;
  height: 54px;
}

.hc-qv__actions .hc-qty__btn {
  height: 52px;
  font-size: 20px;
}

.hc-qv__actions .hc-qty__val {
  flex: 1 1 auto;
  height: 52px;
  font-size: 17px;
}

.hc-qv__actions .hc-btn {
  min-height: 54px;
  font-size: 16px;
}

/* Столбик второстепенных действий под кнопкой покупки. */
.hc-qv__secondary {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(54, 45, 34, 0.12);
}

/* Второстепенные действия — строками, а не кнопками. Три обведённые кнопки
   под синей спорили с ней за внимание; строкой они читаются как то, чем и
   являются: «ещё можно вот так». Подчёркивание выезжает на наведении, чтобы
   строку было видно как нажимаемую. */
.hc-qv__line {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid rgba(54, 45, 34, 0.1);
  background: none;
  color: var(--sf-ink, #1a1714);
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease;
}

.hc-qv__line::after {
  content: "→";
  flex: 0 0 auto;
  color: var(--hc-accent, #2f63d6);
  font-size: 17px;
}

.hc-qv__line:hover {
  color: var(--hc-accent, #2f63d6);
}

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

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

/* От 861 до 1100 трём колонкам уже тесно: средняя сжималась до тридцати
   символов, «Герметики» обрезалось краем, а под характеристиками появлялась
   вторая полоса прокрутки. Снимок и текст уходят в одну колонку друг под
   друга, покупка остаётся сбоку — до неё по-прежнему не надо листать. */
@media (max-width: 1100px) {
  .hc-qv__body {
    grid-template-columns: minmax(0, 1fr) 272px;
    grid-template-areas:
      "figure rail"
      "info rail";
    align-items: start;
    overflow: auto;
  }

  .hc-qv__figure {
    grid-area: figure;
  }

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

  .hc-qv__rail {
    grid-area: rail;
  }

  /* Колонка стала широкой и низкой: квадратный снимок занял бы пол-экрана. */
  .hc-qv__gallery {
    aspect-ratio: 16 / 9;
  }
}

@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 {
    grid-template-columns: 1fr;
    /* Раскладку по областям задаёт шаг выше — в одной колонке она не нужна,
       иначе снимок и покупка так и остались бы разложены по двум. */
    grid-template-areas: none;
    gap: 20px;
    padding: 18px;
    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__figure { grid-area: auto; order: 1; }
  .hc-qv__rail {
    grid-area: auto;
    order: 2;
    padding: 14px;
    border-radius: 12px;
  }
  .hc-qv__info { grid-area: auto; order: 3; }

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

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

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

/* «В избранное» — строка того же роста, но со значком: сердце и есть её
   опознавательный знак. Контурное, а не залитое: заливка прилетала правилом
   на svg и делала из тихой строки чёрное пятно. */
.hc-qv__fav {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
  border: 0;
  background: none;
  color: var(--sf-ink, #1a1714);
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.18s ease;
}

.hc-qv__fav::after {
  content: "+";
  margin-left: auto;
  color: var(--hc-accent, #2f63d6);
  font-size: 18px;
}

.hc-qv__fav svg {
  fill: none;
  stroke: currentColor;
}

.hc-qv__fav:hover {
  color: var(--hc-accent, #2f63d6);
}

/* 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;
}
/* 44 on the stepper: it sits a few pixels from «Удалить», and on a phone a
   miss between them costs the line rather than a unit of it. */
.hc-qty__btn {
  width: 44px;
  height: 44px;
  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/057-hc-cat-filter-aside.css */
/* =================== hc-cat-filter-aside.css =================== */
/* hc-cat-filter-aside — обёртка вокруг формы фильтров (.hc-cat-filters)
 * на странице каталога /shop.
 *
 * Desktop (>1024px): sticky-aside в левой колонке .hc-cat-page.
 * Mobile/tablet (<=1024px): fixed slide-in drawer слева, открывается
 * по клику на кнопку "ОТКРЫТЬ ФИЛЬТР" (Alpine `filtersOpen` → `.is-open`).
 *
 * Strict isolation: .hc-cat-filter-aside / .hc-cat-filter-aside__*.
 * Содержимое (.hc-cat-filters) живёт отдельным block-файлом. */

.hc-cat-filter-aside {
  position: sticky;
  top: calc(var(--hc-hdr-h, 68px) + 12px);
  align-self: start;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - var(--hc-hdr-h, 68px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* Все дочерние элементы внутри aside никогда не превышают его ширину. */
.hc-cat-filter-aside > *,
.hc-cat-filter-aside *:not(svg):not(path):not(g):not(rect):not(circle):not(line) {
  max-width: 100%;
  box-sizing: border-box;
}

/* Длинные слова/SKU/категории переносятся, не вылезают за edge. */
.hc-cat-filter-aside a,
.hc-cat-filter-aside span,
.hc-cat-filter-aside label,
.hc-cat-filter-aside button,
.hc-cat-filter-aside h4,
.hc-cat-filter-aside p {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 1024px) {
  .hc-cat-filter-aside {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(360px, 92vw);
    max-width: 92vw;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    background: var(--hc-paper, #ffffff);
    box-shadow: 0 30px 80px -30px rgba(27, 20, 13, 0.5);
    z-index: var(--hc-z-drawer, 80);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hc-cat-filter-aside.is-open {
    transform: translateX(0);
  }
  /* Inner .hc-cat-filters в drawer-mode уже имеет padding 16px — этого достаточно */
}

/* css/blocks/058-hc-cat-filter-backdrop.css */
/* =================== hc-cat-filter-backdrop.css =================== */
/* hc-cat-filter-backdrop — full-screen dimmer behind the catalog filter
   drawer. Visible only on ≤1024px while the drawer is open. Display is
   toggled by Alpine `x-show="filtersOpen"`; CSS just provides the visual
   surface and ensures the layer stacks below the drawer. */

.hc-cat-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--hc-z-drawer, 80) - 1);
  background: rgba(27, 20, 13, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 1024px) {
  .hc-cat-filter-backdrop {
    display: block;
  }
}

/* css/blocks/061-hc-cat-filters.css */
/* =================== hc-cat-filters.css =================== */
/* hc-cat-filters — форма фильтров на /shop. Размещается внутри
 * .hc-cat-filter-aside (desktop sticky / mobile drawer — отдельный block).
 * Только normal flow, без negative margins, без overflow-hacks.
 * Strict isolation: .hc-cat-filters / .hc-cat-filters__*. */

/* ─── root ─── */
.hc-cat-filters {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 16px;
  box-sizing: border-box;
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid rgba(141, 109, 71, 0.16);
  border-radius: 14px;
}
.hc-cat-filters::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, var(--hc-gold-1, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
  border-radius: 1px;
}
.hc-cat-filters__form {
  display: grid;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* ─── head ─── */
.hc-cat-filters__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid rgba(141, 109, 71, 0.20);
}
.hc-cat-filters__head .hc-cat-filters__label {
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--hc-ink, #1a1714);
}
.hc-cat-filters__close {
  display: none;
}
@media (max-width: 1024px) {
  .hc-cat-filters__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 0.5px solid rgba(141, 109, 71, 0.22);
    border-radius: 999px;
    font-family: var(--hc-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--hc-ink-soft);
    cursor: pointer;
  }
}

/* ─── section ─── */
.hc-cat-filters__section {
  padding: 8px 0 12px;
  border-bottom: 0.5px dashed rgba(141, 109, 71, 0.20);
}
.hc-cat-filters__section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.hc-cat-filters__section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* v8.6 — collapsible-вариант (<details>) для facet'ов с >5 значениями. */
.hc-cat-filters__section--collapsible {
  list-style: none;
}
.hc-cat-filters__section--collapsible > .hc-cat-filters__section-head {
  cursor: pointer;
  user-select: none;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.hc-cat-filters__section--collapsible > .hc-cat-filters__section-head::-webkit-details-marker {
  display: none;
}
.hc-cat-filters__section--collapsible > .hc-cat-filters__section-head::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.4px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
  border-bottom: 1.4px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.hc-cat-filters__section--collapsible[open] > .hc-cat-filters__section-head::after {
  transform: translateY(-30%) rotate(225deg);
}
.hc-cat-filters__section-count {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
  margin-left: auto;
}
.hc-cat-filters__section-head h4,
.hc-cat-filters .hc-cat-filters__label {
  margin: 0;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-cat-filters__section-head h4::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hc-gold-1, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
  vertical-align: middle;
}

/* ─── categories stack ─── */
.hc-cat-filters__category-stack,
.hc-cat-filters__category-scroll {
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: 100%;
}
.hc-cat-filters__category-scroll {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(141, 109, 71, 0.3) transparent;
}
.hc-cat-filters__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: background 0.16s ease, color 0.16s ease;
}
.hc-cat-filters__cat:hover {
  background: rgba(var(--hc-gold-rgb), 0.14);
  color: var(--hc-ink, #1a1714);
}
.hc-cat-filters__cat.hc-chip--active,
.hc-cat-filters__cat[aria-current="true"] {
  background: rgba(var(--hc-gold-rgb), 0.22);
  color: var(--hc-ink, #1a1714);
  font-weight: 600;
}
.hc-cat-filters__cat .hc-chip__count {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
}

/* ─── quick grid (В наличии / Со скидкой / Новинки / Хиты) ─── */
.hc-cat-filters__quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  width: 100%;
}

/* ─── facet (checkbox row) ─── */
.hc-cat-filters__facet {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: background 0.16s ease;
}
.hc-cat-filters__facet:hover {
  background: rgba(var(--hc-gold-rgb), 0.14);
}
/* У цветных значений перед названием стоит кружок-образец, и он четвёртый
   ребёнок в сетке на три колонки: счётчик уезжал на вторую строку, а строка
   становилась выше соседних. «COMFORT GREY», «CROCO GREY», «ELITE GREY» —
   все, у кого образец есть, стояли криво. */
.hc-cat-filters__facet:has(.ldsp-swatch) {
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
}
.hc-cat-filters__facet-label {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.hc-cat-filters__facet--tile {
  flex-wrap: wrap;
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  padding: 9px 11px;
  background: var(--hc-paper, #ffffff);
}
.hc-cat-filters__facet input[type="checkbox"],
.hc-cat-filters__facet .hc-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  background: var(--hc-paper, #ffffff);
  border: 1.4px solid rgba(141, 109, 71, 0.42);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.hc-cat-filters__facet input[type="checkbox"]:hover,
.hc-cat-filters__facet .hc-checkbox:hover {
  border-color: var(--hc-accent-dark, var(--hc-accent-dark));
}
.hc-cat-filters__facet input[type="checkbox"]:checked,
.hc-cat-filters__facet .hc-checkbox:checked {
  background: linear-gradient(135deg, var(--hc-gold-1, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
  border-color: var(--hc-accent-dark, var(--hc-accent-dark));
}
.hc-cat-filters__facet input[type="checkbox"]:checked::after,
.hc-cat-filters__facet .hc-checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--hc-paper, #ffffff);
  -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.6' 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.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.hc-cat-filters__facet small {
  margin-left: auto;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
  flex-shrink: 0;
}

/* ─── facet-stack (vertical list of facets для group) ─── */
.hc-cat-filters__facet-stack {
  display: grid;
  gap: 2px;
  width: 100%;
}

/* ─── price ─── */
.hc-cat-filters__price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hc-cat-filters__price-input {
  height: 36px;
  padding: 8px 12px;
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid rgba(141, 109, 71, 0.22);
  border-radius: 10px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 13px;
  color: var(--hc-ink, #1a1714);
}
.hc-cat-filters__price-input:focus {
  outline: none;
  border-color: var(--hc-accent, var(--hc-accent));
  box-shadow: 0 0 0 3px rgba(var(--hc-gold-rgb), 0.20);
}

/* ─── actions (sticky bottom) ─── */
/* Repeat the apply CTA at the TOP of the filter, sticky, so long facet lists
   never force a scroll to the bottom to apply. Opaque so facets don't bleed. */
.hc-cat-filters__apply-top {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 0 14px;
  padding: 8px 0 12px;
  background: var(--hc-paper, #fffaf2);
  border-bottom: 0.5px solid rgba(141, 109, 71, 0.18);
}

.hc-cat-filters__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 0 12px;
  /* Opaque: a transparent-top gradient let the facets above scroll through and
     read as the button "overlapping" the properties. Solid paper + soft top
     shadow makes it a clean sticky footer. */
  background: var(--hc-paper, #fffaf2);
  border-top: 0.5px solid rgba(141, 109, 71, 0.22);
  box-shadow: 0 -10px 18px -12px rgba(26, 23, 20, 0.12);
}

/* ─── applied chips strip ─── */
.hc-cat-filters__applied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  padding: 12px;
  margin: 0 0 12px;
  background: linear-gradient(180deg, rgba(var(--hc-gold-rgb), 0.14), rgba(184, 154, 111, 0.06));
  border: 0.5px solid var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42));
  border-radius: 12px;
  box-sizing: border-box;
}
.hc-cat-filters__applied-label {
  font-family: var(--hc-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}
.hc-cat-filters__applied-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-family: var(--hc-mono);
  font-size: 10px;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  cursor: pointer;
}

/* ── Applied-filters bar above results (was unstyled) ─────────────────────── */
.hc-applied-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.hc-applied-filters__clear {
  margin-left: 4px;
  color: var(--hc-accent-dark, #6a573f);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.hc-applied-filters__clear:hover {
  color: var(--hc-ink, #1a1714);
}

/* long-facet collapse toggle */
/* 44px of target on a phone without 44px of ink: the link is 19px of text in
   a column of filter rows, and a miss lands on a checkbox instead. The extra
   height is taken back with a negative margin so the filter list keeps its
   rhythm. */
.hc-cat-filters__more {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -8px 0 -2px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hc-accent, #2e7d46);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hc-cat-filters__more:hover { text-decoration: none; }

/* =================== группы фильтров: сворачивание =================== */
/* У донора каждое свойство — свёрнутая строка со стрелкой; развёрнуты только
   первые две группы и те, где что-то выбрано. Без этого колонка фильтров
   уходит на полторы страницы вниз мимо товаров, и найти нужное свойство
   можно только прокруткой.
   Строго .hc-cat-filters__group / __group-head / __group-body / __chev. */
.hc-cat-filters__group {
  border-top: 1px solid var(--hc-line, rgba(26, 23, 20, 0.1));
}

.hc-cat-filters__group-head {
  width: 100%;
  min-height: 42px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
  text-align: left;
}

/* Стрелка: вправо у свёрнутой, вниз у раскрытой — как у донора. */
.hc-cat-filters__chev {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
  border-bottom: 1.5px solid var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

.hc-cat-filters__group.is-open .hc-cat-filters__chev {
  transform: rotate(45deg);
}

.hc-cat-filters__group-body {
  padding-bottom: 10px;
}

.hc-cat-filters__group-head:focus-visible {
  outline: 2px solid var(--hc-accent, #2f63d6);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hc-cat-filters__chev { transition: none; }
}

/* css/blocks/063-hc-cat-head.css */
/* =================== hc-cat-head.css =================== */
/* hc-cat-head - premium catalog page header. Owns breadcrumbs slot, eyebrow,
 * editorial title, lede, big serif stats, quick-filter chip row, and the 3-up
 * guide grid (How to choose / What to look for / If in doubt). Strictly
 * .hc-cat-head / .hc-cat-head__*. */

.hc-cat-head {
position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 14px;
  padding: 20px 26px 16px;
  background:
    radial-gradient(700px 360px at 100% -20%, rgba(var(--hc-gold-rgb), 0.18), transparent 55%),
    linear-gradient(150deg, var(--hc-paper, #ffffff) 0%, rgba(247, 241, 230, 0.92) 100%);
  border: 0.5px solid rgba(185, 154, 111, 0.22);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.03),
    0 12px 32px -22px rgba(40, 30, 15, 0.14);

  /* 2-col grid: title+lede left, stats top-right, chips full-width below.
     Eliminates the empty top-right whitespace the user flagged. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(20px, 2vw, 36px);
  row-gap: 6px;
  align-items: start;
}
.hc-cat-head > .hc-crumbs {
grid-column: 1 / -1;
z-index: 20;
}
.hc-cat-head__title {
grid-column: 1; grid-row: 2;
}
.hc-cat-head__desc {
grid-column: 1; grid-row: 3;
}
.hc-cat-head__stats {
grid-column: 2; grid-row: 2 / span 2; align-self: end; margin-top: 0;
}
.hc-cat-head > .hc-cat-head__guide {
grid-column: 1 / -1; grid-row: 4;
}
.hc-cat-head::before {
content: "";
  position: absolute;
  right: -8%;
  top: -40%;
  width: 420px;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(199, 155, 96, 0.24), transparent 64%);
  border-radius: 50%;
  filter: blur(20px);
}
.hc-cat-head > * {
position: relative; z-index: 1;
}

.hc-cat-head__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hc-ink, #1a1714);
  margin: 0 0 var(--hc-sp-1);
}
.hc-cat-head__desc {
max-width: 56ch;
  margin: 0 0 var(--hc-sp-3);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
}

.hc-cat-head__stats {
display: inline-flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 24px);
  margin-top: 0;
  padding: 12px 18px;
  background: rgba(255, 252, 247, 0.78);
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 12px;
}
.hc-cat-head__stat {
display: flex;
  flex-direction: column;
  gap: 3px;
}
.hc-cat-head__stat b {
display: block;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--hc-ink, #1a1714);
  font-variant-numeric: tabular-nums;
}
.hc-cat-head__stat span {
display: block;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

/* "Быстрый фильтр:" chip row — tightly packed below stats */
.hc-cat-head__quick-row {
display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  margin-bottom: var(--hc-sp-3);
}
.hc-cat-head__quick-label {
display: inline-flex;
  align-items: center;
  margin-right: 8px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
}
.hc-cat-head__filter-btn {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 7px 13px;
  border: 1px solid rgba(47, 111, 78, 0.24);
  border-radius: var(--hc-r-pill, 999px);
  background: rgba(47, 111, 78, 0.08);
  color: var(--hc-accent-dark, #2f6f4e);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px -12px rgba(47, 111, 78, 0.45);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hc-cat-head__filter-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  mask: linear-gradient(#000 0 0) 1px 2px / 11px 2px no-repeat,
        linear-gradient(#000 0 0) 3px 6px / 7px 2px no-repeat,
        linear-gradient(#000 0 0) 5px 10px / 3px 2px no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) 1px 2px / 11px 2px no-repeat,
                linear-gradient(#000 0 0) 3px 6px / 7px 2px no-repeat,
                linear-gradient(#000 0 0) 5px 10px / 3px 2px no-repeat;
}
.hc-cat-head__filter-btn:hover {
  border-color: rgba(47, 111, 78, 0.38);
  background: rgba(47, 111, 78, 0.12);
  transform: translateY(-1px);
}

/* guide block — HIDDEN by default. The 3 "How to choose / What to watch /
   If in doubt" tips were eating vertical space in the hero. They live in
   the catalog FAQ section instead. The container's chip row stays visible
   (we lift the .hc-cat-head__quick-row out of the visual frame below). */
.hc-cat-head__guide {
margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.hc-cat-head__guide-grid {
display: none;
}
.hc-cat-head__guide-cell {
position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  row-gap: 6px;
  padding-left: 0;
  transition: transform 0.22s ease;
}
.hc-cat-head__guide-cell:hover {
transform: translateY(-2px);
}

.hc-cat-head__guide-ico {
grid-row: 1 / span 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(var(--hc-gold-rgb), 0.18);
  color: var(--hc-accent-dark, #7a6548);
  border-radius: 8px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.hc-cat-head__guide-ico svg {
width: 18px;
  height: 18px;
}
.hc-cat-head__guide-cell strong, .hc-cat-head__guide-grid strong {
display: block;
  font-family: var(--hc-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
}
.hc-cat-head__guide-text {
margin: 0;
  max-width: 38ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .hc-cat-head {
    padding: var(--hc-sp-5) var(--hc-sp-4);
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .hc-cat-head__stats {
    gap: var(--hc-sp-3);
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
    width: fit-content;
    max-width: 100%;
  }
  .hc-cat-head__guide-grid {
    grid-template-columns: 1fr;
    gap: var(--hc-sp-3);
  }
  .hc-cat-head__title {
    font-size: clamp(28px, 8vw, 38px);
  }
  .hc-cat-head__filter-btn {
    display: inline-flex;
  }
  .hc-cat-head__quick-label {
    flex-basis: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hc-cat-head__filter-btn {
    display: inline-flex;
  }
}

@media (max-width: 480px) {
  .hc-cat-head {
    padding: var(--hc-sp-4) var(--hc-sp-3);
    border-radius: 14px;
  }
}

.hc-cat-head__guide-cell:hover .hc-cat-head__guide-ico {
background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), #b89a6f);
  color: #2a2018;
  transform: rotate(-6deg) scale(1.08);
}

/* v7.66 — editable search box on results head */
.hc-cat-head__search { grid-column: 1 / -1; grid-row: auto; display: flex; gap: 10px; margin: 14px 0 4px; max-width: 540px; }
.hc-cat-head__search .hc-input { flex: 1; min-width: 0; }

/* «Все разделы каталога» — back to the full catalog from any category/landing hero */
.hc-cat-head__allcats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid var(--hc-line, rgba(141,109,71,.28));
  border-radius: 999px;
  background: var(--hc-paper, #fff);
  color: var(--hc-ink, #1a1714);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.hc-cat-head__allcats:hover { border-color: var(--hc-accent, #9a7b4f); transform: translateY(-1px); }
.hc-cat-head__allcats-ic { flex: 0 0 auto; opacity: .7; }

/* SEO-landing: rich SEO body (tiles/FAQ/CTA) now renders below the product grid,
   so keep the landing hero compact — drop the generic how-to guide grid. */
.hc-cat-head--landing .hc-cat-head__guide-grid { display: none; }
.hc-cat-head--landing .hc-cat-head__guide { padding-block: 14px; }

/* css/blocks/065-hc-cat-page.css */
/* =================== hc-cat-page.css =================== */
/* hc-cat-page — catalog page outer grid (aside + main). Owns the layout that
   wraps the filter sidebar and the results column. Below 1024px it collapses
   to a single column; the sidebar then becomes a slide-in drawer (rules in
   hc-cat-filter-aside.css). Strictly .hc-cat-page*. */

.hc-cat-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(18px, 2.1vw, 30px);
  align-items: start;
}

.hc-cat-results-wrap {
  position: relative;
  min-height: 200px;
}

.hc-cat-grid > *,
.g4 > *,
.products-grid > *,
.hc-cat-grid__item {
  height: 100%;
}

@media (max-width: 1024px) {
  .hc-cat-page {
    grid-template-columns: 1fr;
    gap: var(--hc-sp-4);
  }
}

/* css/blocks/066-hc-cat-postgrid.css */
/* =================== hc-cat-postgrid.css =================== */
.hc-cat-postgrid--premium {margin-top: var(--hc-sp-5); padding: var(--hc-sp-4); overflow: hidden; background: linear-gradient(135deg,var(--hc-paper),var(--hc-paper-2))}
.hc-cat-postgrid__grid {display: grid; grid-template-columns: minmax(260px,1.15fr) minmax(220px,.85fr) minmax(210px,.7fr); align-items: center; gap: var(--hc-sp-3)}
.hc-cat-postgrid__copy {min-width: 0}
.hc-cat-postgrid__title {margin-top: var(--hc-sp-1)}
.hc-cat-postgrid__muted {margin-top: 6px}
.hc-cat-postgrid__visual {display: flex; justify-content: center; align-items: center; min-height: 116px}
.hc-cat-postgrid__svg {width: min(260px,100%); height: auto; overflow: visible}
.hc-cat-postgrid__orbit {fill: none; stroke: rgba(var(--hc-accent-rgb),.28); stroke-width: 1.5; stroke-dasharray: 5 9; animation: hcPostgridOrbit 11s linear infinite}
.hc-cat-postgrid__line {fill: none; stroke: url(#kitLine); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 120; animation: hcPostgridLine 2.8s ease-in-out infinite}
.hc-cat-postgrid__line--b {animation-delay: .35s}
.hc-cat-postgrid__node {fill: #fffaf1; stroke: rgba(var(--hc-accent-rgb),.35); stroke-width: 1.4; filter: drop-shadow(0 10px 16px rgba(28,24,20,.12))}
.hc-cat-postgrid__node--top, .hc-cat-postgrid__node--bottom {fill: #f7fbf5}
.hc-cat-postgrid__dot {fill: #2f6f4e; transform-origin: center; animation: hcPostgridPulse 2s ease-in-out infinite}
.hc-cat-postgrid__dot--b {animation-delay: .28s}
.hc-cat-postgrid__dot--c {animation-delay: .56s}
.hc-cat-postgrid__check {fill: none; stroke: #2f6f4e; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; animation: hcPostgridCheck 2.6s ease-in-out infinite}
.hc-cat-postgrid__cta-wrap {display: flex; align-items: center; justify-content: center}
.hc-cat-postgrid__cta {min-width: 210px; justify-content: center}
@keyframes hcPostgridOrbit {to {stroke-dashoffset: -140}}
@keyframes hcPostgridLine {0%,100% {stroke-dashoffset: 120; opacity: .38} 45%,70% {stroke-dashoffset: 0; opacity: 1}}
@keyframes hcPostgridPulse {0%,100% {transform: scale(1); opacity: .75} 50% {transform: scale(1.35); opacity: 1}}
@keyframes hcPostgridCheck {0%,20% {stroke-dashoffset: 46} 48%,100% {stroke-dashoffset: 0}}
@media (max-width: 900px) {
  .hc-cat-postgrid__grid {grid-template-columns: 1fr; text-align: center}
  .hc-cat-postgrid__cta-wrap {justify-content: center}
}

/* css/blocks/067-hc-cat-results-loading.css */
/* =================== hc-cat-results-loading.css =================== */
.hc-cat-results-loading {display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--hc-paper, #ffffff); padding: 12px 0; border-radius: 12px}

/* css/blocks/071-hc-cat-toolbar.css */
/* =================== hc-cat-toolbar.css =================== */
/* hc-cat-toolbar — sticky horizontal bar above the catalog grid. Owns count,
   trust-signal chips, filter-trigger button, view switcher, and sort select.
   Trust signals + view switcher are hidden on small viewports to keep the
   bar reachable; the filter-trigger button is shown only ≤1024px since the
   sidebar is always visible above that. */

.hc-cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 252, 247, 0.86);
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 12px;
  margin-bottom: var(--hc-sp-3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hc-cat-toolbar__count {
  font-size: var(--hc-fs-sm);
}
.hc-cat-toolbar__count b {
  font-family: var(--hc-serif);
  font-size: var(--hc-fs-lg);
  font-weight: 500;
}
.hc-cat-toolbar__signals {
  display: flex;
  gap: var(--hc-sp-1);
  flex-wrap: wrap;
}
.hc-cat-toolbar__filter-trigger {
  display: none;
}
.hc-cat-toolbar__view {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-left: auto;
  background: var(--hc-paper-3);
  border-radius: var(--hc-r-pill);
}
.hc-cat-toolbar__view-btn {
  position: relative;
  padding: 5px 9px;
  border-radius: var(--hc-r-pill);
  font-size: var(--hc-fs-xs);
  color: var(--hc-ink-mid);
  cursor: pointer;
  transition: background var(--hc-dur-fast), color var(--hc-dur-fast);
}
.hc-cat-toolbar__view-btn:hover {
  color: var(--hc-ink);
}
.hc-cat-toolbar__view-btn.is-active {
  background: var(--hc-ink);
  color: var(--hc-paper, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 12px -7px rgba(26, 23, 20, 0.48);
}
.hc-cat-toolbar__view-btn.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--hc-ink, #1a1714);
  transform: translateX(-50%);
}
.hc-cat-toolbar__sort {
  width: auto;
  padding: 7px 30px 7px 12px;
  font-size: var(--hc-fs-sm);
}

@media (max-width: 1024px) {
  .hc-cat-toolbar__filter-trigger { display: inline-flex; }
  .hc-cat-toolbar__signals        { display: none; }
}

@media (max-width: 480px) {
  .hc-cat-toolbar {
    padding: var(--hc-sp-2) var(--hc-sp-3);
    gap: var(--hc-sp-2);
  }
  .hc-cat-toolbar__view { display: none; }
}

/* 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/092-hc-filter-help.css */
/* =================== hc-filter-help.css =================== */
.hc-filter-help {margin-top: var(--hc-sp-4); padding: var(--hc-sp-3); background: var(--hc-paper-2)}
.hc-filter-help__text {margin-top: 6px}
.hc-filter-help__cta {margin-top: var(--hc-sp-2)}

.hc-filter-help {
  margin-top: 16px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(var(--hc-gold-rgb), 0.14), rgba(var(--hc-gold-rgb), 0.04));
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: 12px;
}
.hc-filter-help strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 4px;
}
.hc-filter-help__text {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(26, 23, 20, 0.60);
}
.hc-filter-help__cta {
  font-size: 12px;
  height: 36px;
}

/* css/blocks/143-hc-price-slider.css */
/* =================== hc-price-slider.css =================== */
/* Single-source range slider styles for catalog filters (no internal overrides). */

.hc-price-slider {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
}

.hc-price-slider__track {
  position: relative;
  height: 28px;
  margin: 8px 0 12px;
}

.hc-price-slider__track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: rgba(141, 109, 71, 0.16);
  border-radius: 999px;
}

.hc-price-slider__fill {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--hc-gold, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
  border-radius: 999px;
  pointer-events: none;
}

/* 44px of track for a finger to land on, with the visible dot still 14px.
   The rail is drawn by the element behind this one, so growing the input only
   grows the area that accepts the drag. */
.hc-price-slider__thumb {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  border: 0;
  outline: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.hc-price-slider__thumb::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid var(--hc-paper, #ffffff);
  border-radius: 50%;
  background: var(--hc-ink, #1a1714);
  box-shadow: 0 2px 6px rgba(20, 17, 14, 0.18);
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.hc-price-slider__thumb::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid var(--hc-paper, #ffffff);
  border-radius: 50%;
  background: var(--hc-ink, #1a1714);
  box-shadow: 0 2px 6px rgba(20, 17, 14, 0.18);
  cursor: pointer;
  pointer-events: auto;
}

.hc-price-slider__bounds {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: rgba(26, 23, 20, 0.50);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.hc-cat-filters .hc-price-slider {
  padding: 8px 4px 0;
}

.hc-cat-filters--premium .hc-price-slider__track::before {
  height: 3px;
  border-radius: 2px;
  background: rgba(180, 151, 115, 0.20);
}

.hc-cat-filters--premium .hc-price-slider__fill {
  height: 3px;
  border-radius: 2px;
}

.hc-cat-filters--premium .hc-price-slider__thumb::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hc-ink, #1a1714);
  background: var(--hc-paper, #ffffff);
}

.hc-cat-filters--premium .hc-price-slider__thumb::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hc-ink, #1a1714);
  background: var(--hc-paper, #ffffff);
}

/* css/blocks/185-page-catalog.css */
/* =================== page-catalog.css =================== */
.page-catalog .hc-cat-head__guide-grid > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.page-catalog .hc-cat-head__guide-grid strong {
  display: block;
  line-height: 1.22;
}

.page-catalog .pcard.pcard-mini .pcard-mini__ph svg {
width: 100%;
  height: 100%;
  display: block;
}
.page-catalog .hc-cat-main {min-width: 0}
.page-catalog #cat-results .pcard-body,
.page-catalog #cat-results .pcard-c__body {
  min-height: 0;
}
.page-catalog #cat-results .pcard-footer,
.page-catalog #cat-results .pcard-c__bottom {
  margin-top: 10px;
}

@media (max-width: 920px) {
  .page-catalog .hc-cat-head,
  .page-catalog .hc-cat-head__row,
  .page-catalog .hc-cat-head__meta {
    min-width: 0;
  }

  .page-catalog .hc-cat-head__title,
  .page-catalog .hc-cat-head h1 {
    overflow-wrap: anywhere;
  }
}

/* css/blocks/299-catalog-ind.css */
/* ===== 299-catalog-ind.css — INDUSTRIAL catalog view =====
   Activated by body class .page-catalog--ind (app_settings layout.catalog='industrial').
   Light structural layer on top of the industrial theme: denser grid, sharp tiles,
   flat filter rail. Scoped → inert on classic. */

/* category tiles: sharp + flat */
.page-catalog--ind .hc-cat-sm {
  border-radius: var(--hc-r-xs);
  box-shadow: none;
  border: 1px solid var(--hc-line-2);
}
.page-catalog--ind .hc-cat-sm:hover {
  border-color: var(--hc-accent);
  box-shadow: 0 12px 30px -22px rgba(var(--hc-accent-rgb), 0.5);
}
.page-catalog--ind .hc-cat-sm__media { border-radius: var(--hc-r-xs) var(--hc-r-xs) 0 0; }

/* product grid: denser */
.page-catalog--ind .hc-cat-grid,
.page-catalog--ind [data-catalog-grid] {
  gap: 14px;
}

/* filters rail: flat, hairline */
.page-catalog--ind .hc-filters,
.page-catalog--ind [data-filters] {
  border-radius: var(--hc-r-xs);
  box-shadow: none;
}

/* generic cards inside catalog get sharp corners */
.page-catalog--ind .hc-card { border-radius: var(--hc-r-sm); box-shadow: none; }

/* css/blocks/246-hc-mkt-banner.css */
/* =================== hc-mkt-banner.css =================== */
/* Marketing banners (top + inline grid) isolated block.
 * Owns only .hc-mkt-banner* selectors and does not cascade into cards. */

.hc-mkt-banner-row {
  display: grid;
  gap: clamp(10px, 1.15vw, 16px);
  margin: 0 0 var(--hc-sp-4, 18px);
}

.hc-mkt-banner-row--top {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hc-mkt-banner-row--grid {
  grid-template-columns: 1fr;
}

.hc-mkt-banner {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 16px;
  background: #171410;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 36px -24px rgba(26, 23, 20, 0.42);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.hc-mkt-banner:hover,
.hc-mkt-banner:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--hc-gold-rgb), 0.5);
  box-shadow: 0 22px 48px -24px rgba(26, 23, 20, 0.52);
}

.hc-mkt-banner__mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.74);
}

.hc-mkt-banner__mesh svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hc-mkt-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.hc-mkt-banner__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.04) brightness(0.82);
  transform: scale(1.001);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

.hc-mkt-banner:hover .hc-mkt-banner__media img,
.hc-mkt-banner:focus-visible .hc-mkt-banner__media img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.05) brightness(0.9);
}

.hc-mkt-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 13, 10, 0.05) 0%, rgba(15, 13, 10, 0.46) 55%, rgba(15, 13, 10, 0.82) 100%);
}

.hc-mkt-banner__body {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: clamp(176px, 20vw, 280px);
  padding: clamp(14px, 1.3vw, 18px);
}

.hc-mkt-banner__body strong {
  margin: 0;
  color: #fff;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: 0;
  text-wrap: balance;
}

.hc-mkt-banner__body p {
  margin: 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.38;
}

.hc-mkt-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
}

.hc-mkt-banner--light {
  color: #1a1714;
}

.hc-mkt-banner--light::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.28) 58%, rgba(255, 255, 255, 0.58) 100%);
}

.hc-mkt-banner--light .hc-mkt-banner__mesh {
  color: rgba(26, 23, 20, 0.55);
}

.hc-mkt-banner--light .hc-mkt-banner__body strong {
  color: #15120f;
}

.hc-mkt-banner--light .hc-mkt-banner__body p,
.hc-mkt-banner--light .hc-mkt-banner__cta {
  color: rgba(26, 23, 20, 0.78);
}

.hc-mkt-banner--grid {
  min-height: 0;
}

.hc-mkt-banner--grid .hc-mkt-banner__body {
  min-height: clamp(140px, 18vw, 220px);
}

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

  .hc-mkt-banner__body strong {
    font-size: clamp(20px, 6.2vw, 28px);
  }

  .hc-mkt-banner__body p {
    font-size: 13px;
  }
}

/* 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-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%);
  border-bottom: 1px solid rgba(var(--hc-accent-rgb), 0.12);
  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/287-hc-subcat-chips.css */
/* =================== hc-subcat-chips.css =================== */
/* Subcategory chips on a category page (above the toolbar): a wrapping row of
 * pills, each = round animated-SVG icon dot + name, linking to the child
 * category. Strictly .hc-subcat*. WDL tokens, no !important. */

.hc-subcat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 22px);
}

.hc-subcat__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  padding: 5px 14px 5px 5px;
  border: 1px solid rgba(var(--hc-accent-rgb), 0.2);
  border-radius: 999px;
  background: #fff;
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  box-shadow: 0 6px 18px -16px rgba(24, 18, 12, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hc-subcat__chip:hover,
.hc-subcat__chip:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(185, 154, 111, 0.55);
  background: linear-gradient(180deg, #fffdf9, #f7f0e3);
  box-shadow: 0 14px 26px -20px rgba(24, 18, 12, 0.55);
}

.hc-subcat__ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(196, 158, 103, 0.16), transparent 45%),
    linear-gradient(160deg, #fbf6ec, #ece0cc);
  border: 1px solid rgba(var(--hc-accent-rgb), 0.14);
}

.hc-subcat__ic-fb {
  width: 19px;
  height: 19px;
  color: var(--hc-accent, var(--hc-accent));
}

.hc-subcat__ic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* covers are drawn at 55% inner-scale for the big cards; zoom the icon in the
     small chip dot so it reads (transparent margins are clipped by the dot). */
  transform: scale(1.6);
}

.hc-subcat__name {
  font-size: 14px;
  line-height: 1.1;
  font-weight: 500;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .hc-subcat__name { font-size: 13px; }
  .hc-subcat__ic { width: 28px; height: 28px; }
}

/* css/blocks/290-hc-seo-links.css */
/* SEO quick-links — themed facet chip blocks on a category page. Internal
   cross-links to the category's SEO landing pages (/catalog/l/<slug>). Premium
   panel: gold top accent, serif eyebrow, gold-dot group labels, gradient pills. */
.hc-seo-links {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 18px 22px 16px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(var(--hc-gold-rgb), 0.14), transparent 55%),
    linear-gradient(180deg, rgba(255, 253, 250, 0.92), rgba(250, 246, 240, 0.6));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 44px -34px rgba(60, 46, 30, 0.5);
}

/* thin gold accent line along the top edge */
.hc-seo-links::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--hc-accent, #b8895a), transparent);
  opacity: 0.55;
}

.hc-seo-links__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.hc-seo-links__eyebrow {
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
  letter-spacing: 0.01em;
}

.hc-seo-links__hint {
  font-family: var(--hc-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
}

.hc-seo-links__row {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: 8px 18px;
  align-items: baseline;
  padding-top: 9px;
  border-top: 1px solid rgba(141, 109, 71, 0.1);
}

.hc-seo-links__row:first-of-type {
  padding-top: 3px;
  border-top: none;
}

.hc-seo-links__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-top: 6px;
  font-family: var(--hc-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

.hc-seo-links__label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  background: var(--hc-accent, #b8895a);
  opacity: 0.7;
}

.hc-seo-links__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hc-seo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, rgba(250, 246, 240, 0.7));
  color: var(--hc-ink, #1a1714);
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.16s ease, border-color 0.16s ease,
    box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.hc-seo-link:hover {
  transform: translateY(-1px);
  border-color: var(--hc-accent, #b8895a);
  background: #ffffff;
  box-shadow: 0 7px 18px -11px rgba(141, 109, 71, 0.65);
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}

.hc-seo-link.is-active {
  border-color: var(--hc-ink, #1a1714);
  background: linear-gradient(180deg, #2a2521, var(--hc-ink, #1a1714));
  color: var(--hc-paper, #ffffff);
  box-shadow: 0 7px 18px -11px rgba(26, 23, 20, 0.7);
}

.hc-seo-link__n {
  font-family: var(--hc-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
}

.hc-seo-link:hover .hc-seo-link__n {
  color: inherit;
}

.hc-seo-link.is-active .hc-seo-link__n {
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 640px) {
  .hc-seo-links {
    padding: 15px 16px;
  }

  .hc-seo-links::before {
    left: 16px;
    right: 16px;
  }

  .hc-seo-links__row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .hc-seo-links__label {
    padding-top: 0;
  }
}

/* SEO landing body text (shop_seo_landings.body_html) — bottom prose block. */
.hc-cat-seo-body {
  margin-top: 22px;
  padding: 24px 26px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.74));
  font-size: 15px;
  line-height: 1.7;
}

.hc-cat-seo-body :where(h2, h3) {
  font-family: var(--hc-serif, Georgia, serif);
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
  margin: 18px 0 8px;
}

.hc-cat-seo-body :where(h2, h3):first-child {
  margin-top: 0;
}

.hc-cat-seo-body p {
  margin: 0 0 12px;
}

.hc-cat-seo-body :where(ul, ol) {
  margin: 0 0 12px;
  padding-left: 20px;
}

.hc-cat-seo-body li {
  margin: 4px 0;
}

.hc-cat-seo-body a {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hc-cat-seo-body .hc-btn--primary,
.hc-cat-seo-body .hc-btn--primary:hover,
.hc-cat-seo-body .hc-btn--primary:focus-visible {
  color: var(--hc-paper, #ffffff);
  text-decoration: none;
}

.hc-cat-seo-body .lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--hc-ink, #1a1714);
}

/* Infographic — spec cards (icon + key fact). */
.hc-cat-seo-body .hc-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
}

.hc-cat-seo-body .hc-info__card {
  display: grid;
  gap: 5px;
  justify-items: start;
  padding: 16px 18px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(var(--hc-gold-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 253, 250, 0.9), rgba(250, 246, 240, 0.5));
}

.hc-cat-seo-body .hc-info__ic {
  width: 26px;
  height: 26px;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}

.hc-cat-seo-body .hc-info__v {
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--hc-ink, #1a1714);
}

.hc-cat-seo-body .hc-info__l {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

/* FAQ — native accordion, premium styling + FAQPage JSON-LD alongside. */
.hc-cat-seo-body .hc-faq {
  display: grid;
  gap: 8px;
  margin: 10px 0 6px;
}

.hc-cat-seo-body .hc-faq__item {
  padding: 0 16px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 12px;
  background: rgba(255, 253, 250, 0.6);
}

.hc-cat-seo-body .hc-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--hc-sans, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
}

.hc-cat-seo-body .hc-faq__item summary::-webkit-details-marker {
  display: none;
}

.hc-cat-seo-body .hc-faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--hc-accent, #b8895a);
}

.hc-cat-seo-body .hc-faq__item[open] summary::after {
  content: "\2212";
}

.hc-cat-seo-body .hc-faq__item > div {
  padding: 0 0 14px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
  font-size: 14px;
  line-height: 1.6;
}


/* Direct landing editorial blocks rendered from shop_seo_landings.body_html. */
.hc-cat-seo-body--landing {
  margin: 18px 0 22px;
}
.hc-cat-seo-body .ld-hero {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  margin: 0 0 22px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(var(--hc-gold-rgb), 0.18), transparent 62%),
    linear-gradient(180deg, rgba(255, 253, 250, 0.94), rgba(250, 246, 240, 0.56));
}
.hc-cat-seo-body .ld-lead {
  max-width: 860px;
  margin: 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--hc-ink, #1a1714);
}
.hc-cat-seo-body .ld-usp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.hc-cat-seo-body .ld-usp li,
.hc-cat-seo-body .ld-tiles a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
}
.hc-cat-seo-body .ld-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
}
.hc-cat-seo-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(141, 109, 71, 0.14);
}
.hc-cat-seo-body :where(th, td) {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(141, 109, 71, 0.12);
  text-align: left;
  vertical-align: top;
}
.hc-cat-seo-body th {
  background: rgba(var(--hc-gold-rgb), 0.13);
  color: var(--hc-ink, #1a1714);
  font-weight: 650;
}
.hc-cat-seo-body tr:last-child td { border-bottom: 0; }
.hc-cat-seo-body .ld-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.hc-cat-seo-body .ld-links {
  padding-top: 12px;
  border-top: 1px solid rgba(141, 109, 71, 0.14);
}
@media (max-width: 760px) {
  .hc-cat-seo-body--landing {
    padding: 18px 16px;
  }
  .hc-cat-seo-body .ld-hero {
    padding: 18px 16px;
    border-radius: 14px;
  }
  .hc-cat-seo-body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* Keep ad landing copy above catalog controls in the catalog head grid. */
.hc-cat-head--landing > .hc-cat-seo-body--landing {
  grid-column: 1 / -1;
  grid-row: 4;
}
.hc-cat-head--landing > .hc-cat-head__search {
  grid-column: 1;
  grid-row: 5;
}
.hc-cat-head--landing > .hc-cat-head__allcats {
  grid-column: 2;
  grid-row: 5;
  justify-self: end;
  align-self: center;
}
.hc-cat-head--landing > .hc-cat-head__guide {
  grid-column: 1 / -1;
  grid-row: 6;
}
.hc-cat-head--landing > * {
  min-width: 0;
}
.hc-cat-head--landing .hc-cat-head__title,
.hc-cat-head--landing .ld-lead,
.hc-cat-head--landing .ld-usp li,
.hc-cat-head--landing .ld-tiles a {
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .hc-cat-head--landing > .hc-cat-seo-body--landing,
  .hc-cat-head--landing > .hc-cat-head__search,
  .hc-cat-head--landing > .hc-cat-head__allcats,
  .hc-cat-head--landing > .hc-cat-head__guide {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* css/blocks/312-ldsp-catalog-rail.css */
/* Планка разделов каталога и колонка под ней.
 *
 * Планка была разложена целиком: двенадцать разделов и все их подразделы
 * подряд — 98 ссылок в одном столбце, полтора экрана прокрутки до конца.
 * У донора видны только разделы, а подразделы выезжают панелью вправо.
 * Так и сделано: подразделы остаются в разметке (это ссылки, которые должен
 * видеть поисковик), но лежат в панели, открытой по наведению и по фокусу.
 *
 * Ниже — колонка блоков. Её состав задаётся в /admin/settings, здесь только
 * то, как каждый вид блока выглядит.
 */

/* ── Планка ──────────────────────────────────────────────────────────── */
.ldsp-root-nav {
  position: relative;
  z-index: 5;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
/* Панель выезжает за пределы планки, поэтому обрезать нечего: скругление
   держится на самой нижней строке. */
.ldsp-root-nav__group { position: relative; }
.ldsp-root-nav__group:last-child .ldsp-root-nav__root { border-bottom: 0; border-radius: 0 0 6px 6px; }

.ldsp-root-nav__root {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  gap: 12px;
  align-items: center;
  padding: 6px 14px;
  color: #3b4658;
  border-bottom: 1px solid var(--ldsp-line);
  text-decoration: none;
}
.ldsp-root-nav__root::after {
  content: '›';
  color: #b3bcc9;
  font-size: 20px;
  line-height: 1;
}
.ldsp-root-nav__root b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ldsp-root-nav__pic {
  width: 28px;
  height: 28px;
  overflow: hidden;
  background: #f4f6f9;
  border: 1px solid var(--ldsp-line);
  border-radius: 4px;
}
.ldsp-root-nav__pic img { width: 100%; height: 100%; object-fit: cover; }

/* ── Панель подразделов ──────────────────────────────────────────────── */
.ldsp-root-nav__subs {
  position: absolute;
  top: -1px;
  left: 100%;
  z-index: 6;
  display: none;
  min-width: 300px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: 0 6px 6px 6px;
  box-shadow: 6px 10px 30px rgba(16, 24, 40, .16);
}
/* :focus-within, а не :focus-visible — панель должна открыться и когда фокус
   уже внутри неё, иначе Tab по подразделам её закрывает. */
.ldsp-root-nav__group:hover .ldsp-root-nav__subs,
.ldsp-root-nav__group:focus-within .ldsp-root-nav__subs { display: block; }
.ldsp-root-nav__group:hover { z-index: 7; }
.ldsp-root-nav__group:hover .ldsp-root-nav__root,
.ldsp-root-nav__group:focus-within .ldsp-root-nav__root { color: var(--ldsp-blue); background: #f3f6fb; }

.ldsp-root-nav__sub {
  min-height: 34px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 16px;
  color: #4a5567;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.ldsp-root-nav__sub:hover { color: var(--ldsp-blue); background: #f3f6fb; }
.ldsp-root-nav__ico {
  flex: none;
  width: 22px;
  height: 22px;
  overflow: hidden;
  background: #f2f5f9;
  border: 1px solid var(--ldsp-line);
  border-radius: 3px;
}
.ldsp-root-nav__ico img { width: 100%; height: 100%; object-fit: cover; }
.ldsp-root-nav__all {
  display: block;
  margin-top: 4px;
  padding: 9px 16px 4px;
  color: var(--ldsp-blue);
  border-top: 1px solid var(--ldsp-line);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.ldsp-root-nav__all:hover { text-decoration: underline; }

/* Ниже 900px сайдбар превращается в выдвижную шторку шириной 390px — панели
   вправо там некуда выезжать; на сенсорном экране её нечем открыть. В обоих
   случаях подразделы возвращаются в поток, с отступом под иконку. */
@media (max-width: 900px), (hover: none) {
  .ldsp-root-nav__subs {
    position: static;
    display: block;
    min-width: 0;
    padding: 2px 0 6px;
    background: #fbfcfe;
    border: 0;
    border-bottom: 1px solid var(--ldsp-line);
    border-radius: 0;
    box-shadow: none;
  }
  .ldsp-root-nav__sub { padding-left: 26px; white-space: normal; }
  .ldsp-root-nav__all { display: none; }
  .ldsp-root-nav__group:last-child .ldsp-root-nav__subs { border-bottom: 0; }
  .ldsp-root-nav__group:last-child .ldsp-root-nav__root { border-bottom: 1px solid var(--ldsp-line); border-radius: 0; }
}

/* ── Колонка под планкой ─────────────────────────────────────────────── */
.ldsp-side { display: grid; gap: 22px; }

.ldsp-side-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
}
.ldsp-side-banner img { width: 100%; height: auto; display: block; }
.ldsp-side-banner__cta {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 14px;
  color: #fff;
  background: var(--ldsp-blue);
  border-radius: 4px;
  font-size: 13px;
}

.ldsp-side-block {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: 6px;
}
.ldsp-side-block__title {
  margin: 0;
  padding: 14px 16px;
  color: #1f2937;
  border-bottom: 1px solid var(--ldsp-line);
  font-size: 15px;
  font-weight: 600;
}
.ldsp-side-block__body { padding: 6px 0; }
.ldsp-side-block__all {
  display: block;
  padding: 10px 16px 6px;
  color: var(--ldsp-blue);
  text-decoration: none;
  font-size: 13px;
}
.ldsp-side-block__all:hover { text-decoration: underline; }

.ldsp-side-product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  color: inherit;
  text-decoration: none;
}
.ldsp-side-product:hover { background: #f6f8fc; }
.ldsp-side-product__pic {
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: #f4f6f9;
  border: 1px solid var(--ldsp-line);
  border-radius: 4px;
}
.ldsp-side-product__pic img { width: 100%; height: 100%; object-fit: cover; }
.ldsp-side-product__text { display: grid; gap: 4px; min-width: 0; }
.ldsp-side-product__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #3b4658;
  font-size: 13px;
  line-height: 1.35;
}
.ldsp-side-product__price { display: flex; gap: 8px; align-items: baseline; }
.ldsp-side-product__price b { color: #1f2937; font-size: 14px; }
.ldsp-side-product__price del { color: #98a2b3; font-size: 12px; }

.ldsp-side-link {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  color: #4a5567;
  text-decoration: none;
  font-size: 13px;
}
.ldsp-side-link:hover { color: var(--ldsp-blue); background: #f6f8fc; }
.ldsp-side-link__pic {
  flex: none;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background: #f4f6f9;
  border: 1px solid var(--ldsp-line);
  border-radius: 4px;
}
.ldsp-side-link__pic img { width: 100%; height: 100%; object-fit: cover; }

.ldsp-side-post {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 16px;
  color: inherit;
  text-decoration: none;
}
.ldsp-side-post:hover { background: #f6f8fc; }
/* Обложка есть не у всех статей: без неё заголовок занимает обе колонки, а не
   оставляет дыру слева. */
.ldsp-side-post__pic {
  width: 64px;
  height: 48px;
  overflow: hidden;
  background: #f4f6f9;
  border-radius: 4px;
}
.ldsp-side-post__pic img { width: 100%; height: 100%; object-fit: cover; }
.ldsp-side-post__name {
  grid-column: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #3b4658;
  font-size: 13px;
  line-height: 1.35;
}
.ldsp-side-post__date { grid-column: 2; color: #98a2b3; font-size: 12px; }
.ldsp-side-post:not(:has(.ldsp-side-post__pic)) { grid-template-columns: minmax(0, 1fr); }
.ldsp-side-post:not(:has(.ldsp-side-post__pic)) .ldsp-side-post__name,
.ldsp-side-post:not(:has(.ldsp-side-post__pic)) .ldsp-side-post__date { grid-column: 1; }

/* ── Разделы каталога на главной каталога ───────────────────────────── */
.ldsp-root-groups { display: grid; gap: 16px; }
/* Photo left, list right — the donor's order. A section with one subsection
   used to fill the screen: 230px floor, a 38px heading and two columns for a
   single link. */
.ldsp-root-group { display: grid; grid-template-columns: minmax(220px,30%) minmax(0,1fr); overflow: hidden; background: #fff; border: 1px solid var(--ldsp-line, #e2e8f0); border-radius: 6px; }
/* contain, not cover: these are product shots on white, and cover blew a
   bottle of glue up to the full height of the row and cropped it. */
/* Одинаковая рамка у всех разделов. Раньше высота была только минимальной, а
   картинке разрешалось 160px: банка клея занимала весь блок, а полоска кромки
   — тридцать пикселей, и ряд выглядел рваным. Рамка теперь фиксированная и
   слегка подложена, а картинка вписывается в неё, не растягиваясь. */
.ldsp-root-group__media { height: 172px; display: grid; place-items: center; overflow: hidden; padding: 16px; background: #f7f9fc; box-shadow: inset 0 0 0 1px rgba(29,41,61,.08); }
/* Один бокс на все карточки. Ширина была свободной, а высота потолком в
   128px: лента 440×106 занимала 269×65, квадрат 700×700 — 128×128, банка
   800×600 — 171×128. Картинки прыгали и по ширине, и по высоте, ряд выглядел
   рассыпанным. Теперь бокс общий, а сама картинка вписывается в него. */
/* Общий квадрат под картинку раздела. Ширина была во всю плитку, а высота
   фиксированной: квадратные снимки (700×700, 900×900) вставали посередине
   узкой полосой, а лента кромки 440×106 растягивалась во всю ширину пустой
   рамкой. Одинаковый бокс — одинаковый вид у всех разделов. */
.ldsp-root-group__media img,
.ldsp-root-group__media svg { width: 128px; height: 128px; object-fit: contain; object-position: center; transition: transform .28s ease; }
.ldsp-root-group__media:hover img { transform: scale(1.04); }
.ldsp-root-group__body { display: flex; flex-direction: column; justify-content: center; padding: 22px 28px; }
.ldsp-root-group__body h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.ldsp-root-group__body h2 a { color: var(--ldsp-ink, #1f2937); text-decoration: none; }
.ldsp-root-group__body h2 a:hover { color: var(--ldsp-blue, #2f63d6); }
/* Three columns like the donor, and only as many as there are links: a lone
   subsection in a three-track grid leaves two empty tracks beside it. */
.ldsp-root-group__links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 28px; }
.ldsp-root-group__links:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ldsp-root-group__links:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0,1fr); }
.ldsp-root-group__links a { min-height: 44px; display: flex; gap: 10px; align-items: center; color: #536176; border-bottom: 1px solid var(--ldsp-line, #e2e8f0); text-decoration: none; font-size: 14px; }
.ldsp-root-group__links a:hover { color: var(--ldsp-blue, #2f63d6); }
/* The donor puts a thumbnail beside every subsection; ours come from the
   category image, and the box holds its place when there is none so the
   labels stay on one line. */
/* A hairline round the thumbnail: half these categories are pale decors —
   white and beige laminate — and at 26px on white they read as nothing. */
.ldsp-root-group__ico { flex: none; width: 26px; height: 26px; overflow: hidden; background: #f2f5f9; border: 1px solid var(--ldsp-line, #e2e8f0); border-radius: 4px; }
.ldsp-root-group__ico img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .ldsp-root-group { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ldsp-root-groups { gap: 12px; }
  .ldsp-root-group__media { height: 132px; padding: 14px; }
  .ldsp-root-group__media img,
  .ldsp-root-group__media svg { width: min(118px, 64vw); height: min(118px, 64vw); }
  .ldsp-root-group__body { padding: 16px 18px 18px; }
  .ldsp-root-group__body h2 { margin-bottom: 8px; font-size: 16px; }
  .ldsp-root-group__links,
  .ldsp-root-group__links:not(:has(> :nth-child(3))),
  .ldsp-root-group__links:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0,1fr); gap: 0; }
  .ldsp-root-group__links a { min-width: 0; min-height: 40px; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
  .ldsp-root-group__ico { width: 24px; height: 24px; }
}

/* ── Планка на странице раздела ──────────────────────────────────────── */
/* На витрине каталога планка стоит первой и продолжает синюю шапку. На
   листинге она идёт после уточнения и фильтра — там ей нужна своя рамка
   сверху и заголовок, иначе она читается как продолжение фильтра. */
.ldsp-root-nav-fold {
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: 6px;
}
.ldsp-root-nav-fold > summary {
  min-height: 46px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ldsp-root-nav-fold > summary::-webkit-details-marker { display: none; }
.ldsp-root-nav-fold > summary::after {
  content: '⌄';
  margin-left: auto;
  color: #9aa5b5;
  font-size: 18px;
  line-height: 1;
}
.ldsp-root-nav-fold[open] > summary::after { content: '⌃'; }
.ldsp-root-nav--aside {
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid var(--ldsp-line);
  border-radius: 0 0 6px 6px;
}
/* Где мы сейчас: без отметки список из пятнадцати ссылок не говорит, из
   какого раздела человек смотрит. */
.ldsp-root-nav__group.is-here .ldsp-root-nav__root {
  color: var(--ldsp-blue);
  background: #f3f6fb;
  font-weight: 600;
}
.ldsp-root-nav__group.is-here .ldsp-root-nav__root::after { color: var(--ldsp-blue); }
.ldsp-root-nav__sub[aria-current="page"] { color: var(--ldsp-blue); font-weight: 600; }

/* css/blocks/313-ldsp-faq.css */
/* Вопросы и ответы — на карточке товара и на странице раздела.
 *
 * Блок был обрезан по 980px и прижат влево — на экране 1920 рядом с четырьмя
 * вопросами стояло 880px пустоты. Ширина снята, а от 1200px вопросы идут в две
 * колонки: строка ответа остаётся читаемой длины, а место используется.
 *
 * Блок звался «pdp» и подключался только к карточке товара, хотя тот же
 * список стоит и на странице раздела: там он выходил голыми <details> с
 * треугольниками. Имя нейтральное, файл отдаётся обеим страницам.
 */
.ldsp-faq { margin-top: 40px; }
.ldsp-faq h2 { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ldsp-faq__list { display: grid; gap: 8px; align-items: start; }
.ldsp-faq details { margin-bottom: 8px; background: #fff; border: 1px solid var(--ldsp-line, #e2e8f0); border-radius: 8px; }
.ldsp-faq summary { padding: 14px 18px; color: var(--ldsp-ink, #1f2937); font-weight: 500; cursor: pointer; list-style: none; }
.ldsp-faq summary::before { content: '+'; margin-right: 10px; color: var(--ldsp-blue, #2f63d6); font-weight: 700; }
.ldsp-faq details[open] summary::before { content: '−'; }
.ldsp-faq details p { margin: 0; padding: 0 18px 16px 38px; color: #555; font-size: 14px; line-height: 1.55; }

@media (min-width: 1200px) {
  .ldsp-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
}

/* css/blocks/314-ldsp-catalog-list.css */
/* Каталог: вид списком, отметка товаров и кнопка «Запросить цену».
 *
 * В списке карточка была плиткой, положенной набок: текст, цена и кнопка
 * жались к левому краю, а справа от них на экране 1500 оставалось 570px
 * пустоты. Здесь три колонки — фото, описание, покупка, — и покупка стоит
 * там же, где её ищут глазами: у правого края строки.
 *
 * Отметка нужна, чтобы набрать несколько позиций сразу: в списке смотрят
 * длинные однотипные ряды кромки и панелей, и класть их по одной — работа
 * руками. Отмеченное уходит в корзину одной кнопкой.
 *
 * «Запросить цену» выглядела ссылкой — белая, без рамки, синим текстом,
 * — хотя это единственное действие карточки без цены.
 */

/* ── Строка списка ───────────────────────────────────────────────────── */
/* Селекторы вида списка несут ту же обёртку body[data-theme]…page-catalog,
   что и правила плитки в теме, откуда они вынесены. Без неё сетка каталога
   из темы перевешивала по весу, и строка списка складывалась в колонку
   шириной 262px. Это не слой поверх — это то же самое единственное описание,
   просто в своём файле. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-grid--catalog { grid-template-columns: 1fr; }

body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile {
  min-height: 0;
  display: grid;
  position: relative;
  display: flex;
  /* Плитка в сетке — колонка; без явного row она осталась бы колонкой, и
     flex-basis фотографии стал бы её высотой. */
  flex-direction: row;
  gap: 22px;
  align-items: center;
  padding-right: 276px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
/* Ряд — flex, а не одна сетка на всё. В сетке фото высотой 150px, растянутое
   на все строки текста, раздувало первую из них до своей высоты: между «арт.»
   и названием зияло полтораста пикселей. Текст и блок покупки делят свою
   сетку, фото в неё не входит и ничего не растягивает. */
/* Контур карточки рисует box-shadow (border у неё нулевой), поэтому
   border-color здесь не значил ничего, а одна тень затирала кольцо: при
   наведении строка теряла обводку. Держим оба слоя. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile:hover {
  box-shadow: 0 0 0 1px #b9caf0, 0 10px 28px rgba(22, 43, 79, .10);
}
/* Плотность списка. Строка занимала 186 пикселей, и на экран помещалось
   пять с половиной товаров — против двенадцати-пятнадцати у любого магазина,
   где список выбирают именно ради сравнения. Фотография в списке нужна как
   опознавательный знак, а не как витрина: 168 на 108 вместо 230 на 150.
   Свойства здесь встают в одну строку — ширины на них 880 пикселей, переносить
   нечего, а вторая строка добавляла к каждой позиции 36 пикселей пустоты. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__media-wrap { flex: 0 0 168px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__media { height: 108px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__props {
  min-height: 0;
  max-height: var(--chip-row, 30px);
  flex-wrap: nowrap;
  margin: 6px 0 0;
}
/* Покупка — своей колонкой у правого края, а не строкой под текстом.
   display: contents убирает коробку __body, и его дети становятся ячейками
   сетки строки. Вложенная сетка тут не годилась: блок покупки, растянутый на
   все её строки, раздувал первую до своей высоты, и между «арт.» и названием
   зияло сто пикселей. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__body {
  flex: 1;
  min-width: 0;
  display: grid;
  /* Колонка с явным minmax(0, …): у ячеек сетки минимальная ширина по
     содержимому, и на 420 пикселях название с артикулом требовали 303 при
     доступных 182 — текст вылезал за карточку, хотя сама колонка ужалась. */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-content: center;
  padding: 0;
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__title { min-height: 0; }
/* Раздел и артикул — рядом, а не по разным краям строки. Плитка узкая, и
   разнести их в стороны там правильно; в списке между ними оказывалось
   девятьсот пикселей, и артикул читался как часть блока с ценой. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__meta {
  justify-content: flex-start;
  gap: 14px;
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__meta > span + span::before {
  content: "·";
  margin-right: 14px;
  color: #c3cad6;
}
/* Блок покупки — рейка у правого края, вынутая из потока. В одной сетке с
   текстом он, растянутый на все строки, отдавал свой излишек первой из них:
   между «арт.» и названием оставалось ещё сто пикселей. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__bottom {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 240px;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__buyline { display: grid; gap: 8px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__actions { grid-template-columns: minmax(0, 1fr) 42px; }

/* ── Отметка ─────────────────────────────────────────────────────────── */
.ldsp-pick {
  flex: none;
  display: none;
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-pick { display: block; }
.ldsp-pick input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ldsp-blue, #2f63d6);
  cursor: pointer;
}

/* Панель появляется, только когда что-то отмечено, и не перекрывает
   последнюю строку списка: под ней остаётся её собственная высота. */
.ldsp-bulk__bar {
  position: sticky;
  bottom: var(--hc-tabbar-clearance, 16px);
  z-index: 20;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--ldsp-line, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(22, 43, 79, .16);
}
.ldsp-bulk__bar[hidden] { display: none; }
.ldsp-bulk__count { color: #536176; font-size: 14px; }
.ldsp-bulk__count b { color: var(--ldsp-ink, #1f2937); }
.ldsp-bulk__add {
  min-height: 42px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  padding: 0 20px;
  color: #fff;
  background: var(--ldsp-blue, #2f63d6);
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s ease;
}
.ldsp-bulk__add:hover { background: var(--ldsp-blue-dark, #2455bd); }
.ldsp-bulk__add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ldsp-bulk__clear {
  padding: 0;
  color: #667085;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ldsp-bulk__clear:hover { color: var(--ldsp-blue, #2f63d6); }

/* ── «Запросить цену» ────────────────────────────────────────────────── */
/* Общий вид кнопки запроса цены вне карточки товара. Внутри плитки её
   дорисовывает тема: там рядом лежит правило с body[data-theme], и обычный
   класс ему проигрывал — заливка не применялась. */
.hc-cta-quote {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--ldsp-blue, #2f63d6);
  background: #eef3fd;
  border: 1px solid #c9d8f5;
}
.hc-cta-quote:hover {
  color: #fff;
  background: var(--ldsp-blue, #2f63d6);
  border-color: var(--ldsp-blue, #2f63d6);
}
.hc-cta-quote svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Наличие ─────────────────────────────────────────────────────────── */
/* Метка стояла и на фото, и отдельной строкой под кнопками — вторая
   висела у правого края и съезжала вместе с ним. Осталась одна, с точкой
   и на своём месте. */
.ldsp-product-tile__stock i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.ldsp-product-tile__stock {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.ldsp-product-tile__stock svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── Строка «В избранное · К сравнению» ──────────────────────────────── */
/* Значки были типографскими символами разного веса и высоты, и строка
   выглядела кривой; текст к тому же прижимался к разным краям. Теперь это
   две одинаковые кнопки на общей базовой линии. */
.ldsp-product-tile__mobile-actions button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.ldsp-product-tile__mobile-actions svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1100px) {
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile { gap: 16px; padding-right: 18px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__media-wrap { flex: 0 0 160px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__media { height: 120px; }
  /* Покупка остаётся справа, просто уже: в поток под текст она уводила строку
     на 261 пиксель — три товара на экран, при том что список выбирают ради
     сравнения. На 1000 пикселях ширины хватает: фото 160, текст, покупка 200. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile { padding-right: 232px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__bottom { width: 200px; }
}

@media (max-width: 720px) {
  /* Телефон. Переключателя вида на этой ширине нет, но выбор хранится в
     браузере: кто включил список на большом экране, тот открывает каталог
     списком и с телефона.

     Строку разворачивали в колонку — и фотография, растянутая во всю ширину
     с соотношением 1:1, давала на 420 пикселях плитку в четыреста двадцать
     высотой: список превращался в череду огромных карточек. Строка остаётся
     строкой, фотография ужимается до 104 пикселей — тексту остаётся больше
     двухсот, этого хватает. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile { gap: 12px; padding: 12px 14px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__media-wrap { flex: 0 0 104px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__media { height: 104px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__bottom {
    position: static;
    width: auto;
    margin-top: 10px;
    transform: none;
  }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__title { font-size: 14px; }
  /* Чипы свойств в списке стоят в одну строку и не переносятся — на широкой
     строке это правильно, а на телефоне неразрывная строка не давала колонке
     текста сжаться: она требовала 303 пикселя при доступных 214, и содержимое
     вылезало за карточку. В плиточном виде на этой ширине их тоже нет. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__props { display: none; }
  /* «В избранное» и «К сравнению» отдельной парой кнопок добавляли к каждой
     строке ещё 96 пикселей — на телефоне список из них и состоял. В списке их
     нет: оба действия остаются на карточке товара и в плиточном виде. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results.is-list .ldsp-product-tile__mobile-actions { display: none; }
}

/* ── Быстрый просмотр: запрос цены ───────────────────────────────────── */
/* Стояли две кнопки во всю ширину и сердечко рядом — три элемента разной
   ширины друг под другом. Стал один блок: значок, строка объяснения,
   кнопка. Значок дышит, чтобы блок читался как приглашение к действию,
   а не как заглушка вместо цены. */
.hc-qv-quote {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 22px 20px;
  text-align: center;
  background: linear-gradient(180deg, #f4f8ff, #eef3fd);
  border: 1px solid #d7e3f8;
  border-radius: 12px;
}
.hc-qv-quote__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--ldsp-blue, #2f63d6);
  background: #fff;
  border: 1px solid #d7e3f8;
  border-radius: 50%;
  animation: hc-qv-quote-pulse 2.6s ease-in-out infinite;
}
.hc-qv-quote__ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hc-qv-quote__text {
  max-width: 34ch;
  margin: 0;
  color: #536176;
  font-size: 13px;
  line-height: 1.5;
}
.hc-qv-quote__btn {
  min-height: 48px;
  width: 100%;
  max-width: 320px;
  padding: 0 22px;
  color: #fff;
  background: var(--ldsp-blue, #2f63d6);
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.hc-qv-quote__btn:hover { background: var(--ldsp-blue-dark, #2455bd); transform: translateY(-1px); }

@keyframes hc-qv-quote-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 99, 214, .22); }
  50%      { box-shadow: 0 0 0 10px rgba(47, 99, 214, 0); }
}
/* Анимация — украшение, а не сообщение: у кого выключено движение, тот
   видит тот же блок без пульсации. */
@media (prefers-reduced-motion: reduce) {
  .hc-qv-quote__ico { animation: none; }
  .hc-qv-quote__btn:hover { transform: none; }
  .ldsp-root-group__media:hover img { transform: none; }
}

/* css/blocks/316-ldsp-fav-compare-state.css */
/* «Уже в избранном» и «уже в сравнении».
 *
 * Скрипт hc-pcard-actions.js вешает на кнопку класс is-active, но вида у этого
 * класса не было нигде: товар добавлялся, счётчик в шапке рос, а кнопка
 * выглядела ровно как до нажатия. Читалось это как «кнопка не работает».
 *
 * Один блок на оба места, где такие кнопки живут: карточка товара и плитка в
 * каталоге — состояние должно выглядеть одинаково.
 */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__tools button.is-active { color: var(--ldsp-blue); background: #eaf1ff; border-color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__tools [data-atc-fav].is-active svg { fill: currentColor; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__top-actions button.is-active { color: var(--ldsp-blue); background: #eaf1ff; border-color: var(--ldsp-blue); opacity: 1; transform: none; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__top-actions [data-atc-fav].is-active svg { fill: currentColor; }

/* Favorites is a short saved list, not a catalogue wall. Auto-fit used by the
   shared product grid reserved empty tracks and stretched two products into
   enormous columns. Keep cards at a readable storefront width and expose the
   destructive action without requiring hover. */
body[data-theme="ldsp-classic"].page-favorites .ldsp-product-grid--favorites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 360px));
  justify-content: start;
  align-items: stretch;
  gap: 20px;
  margin-top: 24px;
  background: transparent;
  border: 0;
}

body[data-theme="ldsp-classic"].page-favorites .ldsp-product-grid--favorites .ldsp-product-tile {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ldsp-line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(24, 48, 86, .07);
}

body[data-theme="ldsp-classic"].page-favorites .ldsp-product-tile__media { height: 220px; }
body[data-theme="ldsp-classic"].page-favorites .ldsp-product-tile__body { flex: 1; }
body[data-theme="ldsp-classic"].page-favorites .ldsp-product-tile__top-actions {
  z-index: 8;
  opacity: 1;
  transform: none;
}
body[data-theme="ldsp-classic"].page-favorites .ldsp-product-tile__top-actions [data-atc-fav] {
  width: auto;
  min-width: 42px;
  padding: 0 12px;
  gap: 7px;
  color: #a83232;
  background: #fff;
  border-color: #e7caca;
  border-radius: 999px;
}
body[data-theme="ldsp-classic"].page-favorites .ldsp-product-tile__top-actions [data-atc-fav] span {
  display: inline;
  font-size: 12px;
  font-weight: 600;
}
body[data-theme="ldsp-classic"].page-favorites .ldsp-product-tile__top-actions [data-atc-fav] svg { fill: currentColor; }

@media (max-width: 640px) {
  body[data-theme="ldsp-classic"].page-favorites .ldsp-product-grid--favorites {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* css/blocks/280-pdp-lkm.css */
/* =================== pdp-lkm.css — ЛКМ развес/тара переключатель =================== */
.pdp-lkm__tabs{display:inline-flex;gap:4px;background:rgba(var(--hc-gold-rgb),.12);border:1px solid rgba(141,109,71,.16);border-radius:999px;padding:3px;margin-bottom:8px}
.pdp-lkm__tab{appearance:none;border:0;background:transparent;cursor:pointer;font:600 12px/1 var(--hc-sans,"Outfit",sans-serif);color:var(--hc-ink-soft,rgba(26,23,20,.6));padding:7px 14px;border-radius:999px;transition:background .18s ease,color .18s ease}
.pdp-lkm__tab--on{background:var(--hc-paper,#fff);color:var(--hc-ink,#1a1714);box-shadow:0 1px 2px rgba(27,20,13,.1)}
.pdp-lkm__u{font-size:13px;color:var(--hc-ink-soft,rgba(26,23,20,.5));margin-left:4px;font-weight:400}

/* css/blocks/281-hettich-cfg.css */
/* =================== hettich-cfg.css — узел-конфигуратор Hettich (scoped .htcfg) =================== */
.htcfg{margin:22px 0;padding:22px;border:1px solid var(--hc-line-2,rgba(180,151,115,.22));border-radius:18px;background:linear-gradient(180deg,#fff,#fbf7ec)}
.htcfg .cfg__head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.htcfg .cfg__head svg{width:22px;height:22px;color:var(--hc-accent-dark,#7a6548)}
.htcfg .cfg__head h2{margin:0;font:600 19px/1.2 var(--hc-serif,"Playfair Display",Georgia,serif);color:var(--hc-ink,#1a1714)}
.htcfg .compat{margin-left:auto;font:600 11px/1 var(--hc-mono,monospace);color:#2e7d4f;background:rgba(46,125,79,.1);padding:6px 10px;border-radius:999px}
.htcfg .cfg__sub{font-size:13px;color:var(--hc-ink-soft,rgba(26,23,20,.62));margin-bottom:16px;max-width:62ch}
.htcfg .cfg__bar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding:14px 16px;background:rgba(var(--hc-gold-rgb),.1);border-radius:12px;margin-bottom:16px}
.htcfg .qty-wrap small,.htcfg .tot small{display:block;font:600 10px/1 var(--hc-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--hc-ink-soft,rgba(26,23,20,.5));margin-bottom:5px}
.htcfg .qty{display:inline-flex;align-items:center;border:1px solid var(--hc-line-2,rgba(180,151,115,.3));border-radius:10px;overflow:hidden;background:#fff}
.htcfg .qty button{appearance:none;border:0;background:transparent;width:34px;height:36px;font-size:18px;cursor:pointer;color:var(--hc-ink,#1a1714)}
.htcfg .qty input{width:46px;height:36px;border:0;text-align:center;font:600 15px/1 var(--hc-sans,"Outfit",sans-serif);-moz-appearance:textfield}
.htcfg .qty input::-webkit-outer-spin-button,.htcfg .qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.htcfg .qty__u{padding:0 8px 0 2px;font-size:12px;color:var(--hc-ink-soft,rgba(26,23,20,.5))}
.htcfg .note{font-size:12px;color:var(--hc-ink-soft,rgba(26,23,20,.6));line-height:1.4}
.htcfg .tot{text-align:right}.htcfg .tot b{font:600 22px/1 var(--hc-serif,"Playfair Display",Georgia,serif);color:var(--hc-ink,#1a1714)}
.htcfg .btn--gold{appearance:none;border:0;cursor:pointer;background:linear-gradient(180deg,#caa86a,#b4925f);color:#2a2113;font:600 13px/1 var(--hc-sans,"Outfit",sans-serif);padding:13px 20px;border-radius:10px;white-space:nowrap}
.htcfg .selrow{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:14px;padding:11px 0;border-bottom:1px dashed var(--hc-line-2,rgba(180,151,115,.2))}
.htcfg .selrow .l{font:600 13px/1.3 var(--hc-sans,"Outfit",sans-serif);color:var(--hc-ink,#1a1714)}
.htcfg .selbox{width:100%;padding:10px 12px;border:1px solid var(--hc-line-2,rgba(180,151,115,.3));border-radius:9px;background:#fff;font-size:13px;color:var(--hc-ink,#1a1714)}
.htcfg .dchips{display:flex;flex-wrap:wrap;gap:6px}
.htcfg .dchip{cursor:pointer;padding:8px 12px;border:1px solid var(--hc-line-2,rgba(180,151,115,.3));border-radius:8px;background:#fff;font:600 13px/1 var(--hc-sans,"Outfit",sans-serif);color:var(--hc-ink,#1a1714)}
.htcfg .dchip small{font-weight:400;color:var(--hc-ink-soft,rgba(26,23,20,.5))}
.htcfg .dchip.sel{background:var(--hc-ink,#1a1714);color:#fff;border-color:var(--hc-ink,#1a1714)}
.htcfg .dchip.sel small{color:rgba(255,255,255,.7)}
.htcfg .dchip.na{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.htcfg .warnmp{font-size:11px;color:#b4502a;margin-left:8px}
.htcfg .kit{margin-top:16px}
.htcfg .kit__t{font:600 11px/1 var(--hc-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--hc-accent-dark,#7a6548);margin-bottom:8px}
.htcfg .kit__row{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--hc-line-2,rgba(180,151,115,.18))}
.htcfg .kit__row .nm b{display:block;font-size:13px;font-weight:600;line-height:1.25;color:var(--hc-ink,#1a1714)}
.htcfg .kit__row .nm small{font-size:11px;color:var(--hc-ink-soft,rgba(26,23,20,.5))}
.htcfg .role{font:600 9.5px/1 var(--hc-mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--hc-accent-dark,#7a6548);border:1px solid var(--hc-line-2,rgba(180,151,115,.3));padding:4px 8px;border-radius:999px;white-space:nowrap}
.htcfg .kit__row .q{font:600 13px/1 var(--hc-mono,monospace);color:var(--hc-ink,#1a1714);white-space:nowrap}
.htcfg .addon{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--hc-line-2,rgba(180,151,115,.18))}
.htcfg .addon .nm b{display:block;font-size:13px;font-weight:600;color:var(--hc-ink,#1a1714)}
.htcfg .addon .nm small{font-size:11px;color:var(--hc-ink-soft,rgba(26,23,20,.5))}
.htcfg .mini{padding:7px 9px;border:1px solid var(--hc-line-2,rgba(180,151,115,.3));border-radius:8px;background:#fff;font-size:12px}
.htcfg .pr{font:600 13px/1 var(--hc-mono,monospace);color:var(--hc-accent-dark,#7a6548);white-space:nowrap}
@media(max-width:720px){
  .htcfg{padding:16px}
  .htcfg .cfg__bar{grid-template-columns:1fr}
  .htcfg .selrow{grid-template-columns:1fr}
  .htcfg .kit__row{grid-template-columns:44px minmax(0,1fr);align-items:start}
  .htcfg .kit__row .nm{min-width:0}
  .htcfg .role,
  .htcfg .kit__row .q{grid-column:2;justify-self:start;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .htcfg .btn--gold{width:100%;white-space:normal;line-height:1.2}
}
.htcfg .swatches{display:flex;gap:10px;flex-wrap:wrap}
.htcfg .sw{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:6px 8px;border:1.5px solid transparent;border-radius:10px}
.htcfg .sw i{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.1);display:block}
.htcfg .sw span{font:600 11px/1 var(--hc-sans,"Outfit",sans-serif);color:var(--hc-ink-soft,rgba(26,23,20,.65))}
.htcfg .sw.sel{border-color:var(--hc-accent-dark,#7a6548);background:rgba(var(--hc-gold-rgb),.12)}
.htcfg .hchip{cursor:pointer;padding:8px 12px;border:1px solid var(--hc-line-2,rgba(180,151,115,.3));border-radius:8px;background:#fff;font:600 13px/1 var(--hc-sans,"Outfit",sans-serif);color:var(--hc-ink,#1a1714)}
.htcfg .hchip small{font-weight:400;color:var(--hc-ink-soft,rgba(26,23,20,.5))}
.htcfg .hchip.sel{background:var(--hc-ink,#1a1714);color:#fff;border-color:var(--hc-ink,#1a1714)}
.htcfg .hchip.sel small{color:rgba(255,255,255,.7)}

/* bundle-graph: миниатюра товара в строках комплекта + чипы выбора (вместо дропдаунов) */
.htcfg .kit__img{width:44px;height:44px;border-radius:8px;border:1px solid var(--hc-line-2,rgba(180,151,115,.2));background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.htcfg .kit__img img{width:100%;height:100%;object-fit:contain}
.htcfg .bg-chips{display:flex;flex-wrap:wrap;gap:6px}
.htcfg .bg-chip{cursor:pointer;padding:8px 12px;border:1px solid var(--hc-line-2,rgba(180,151,115,.3));border-radius:8px;background:#fff;font:600 13px/1 var(--hc-sans,"Outfit",sans-serif);color:var(--hc-ink,#1a1714);transition:background .15s ease,border-color .15s ease,color .15s ease}
.htcfg .bg-chip:hover{border-color:var(--hc-accent-dark,#7a6548)}
.htcfg .bg-chip.is-on{background:var(--hc-ink,#1a1714);color:#fff;border-color:var(--hc-ink,#1a1714)}
.htcfg .bg-selpair{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.htcfg .bg-selpair .selbox{flex:1 1 200px;min-width:0;cursor:pointer}

/* drawer side-color swatches (moved from inline template) */
.htcfg .sw[data-c="Антрацит"] i{background:linear-gradient(145deg,#54585c,#2c2f33)}
.htcfg .sw[data-c="Серебристый"] i{background:linear-gradient(145deg,#cfd2d4,#a9adb0)}
.htcfg .sw[data-c="Белый"] i{background:linear-gradient(145deg,#fff,#e9e6df)}

/* [hidden]-строки конфигуратора должны прятаться: .selrow display:grid перебивал атрибут → пустой «Вариант» при <2 вариантах */
.htcfg [hidden],
.htcfg .selrow[hidden]{display:none}

/* css/blocks/283-lkm-cfg.css */
/* =================== lkm-cfg.css — ЛКМ комплектатор по рецептуре (scoped .lkmcfg) =================== */
.lkmcfg{margin:22px 0;padding:22px;border:1px solid var(--hc-line-2,rgba(180,151,115,.22));border-radius:18px;background:linear-gradient(180deg,#fff,#fbf7ec)}
.lkmcfg__head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.lkmcfg__head svg{width:22px;height:22px;color:var(--hc-accent-dark,#7a6548);flex:none}
.lkmcfg__head h2{margin:0;font:600 19px/1.2 var(--hc-serif,"Playfair Display",Georgia,serif);color:var(--hc-ink,#1a1714)}
.lkmcfg__compat{margin-left:auto;font:600 11px/1 var(--hc-mono,monospace);color:#2e7d4f;background:rgba(46,125,79,.1);padding:6px 10px;border-radius:999px;white-space:nowrap}
.lkmcfg__sub{font-size:13px;line-height:1.5;color:var(--hc-ink-soft,rgba(26,23,20,.62));margin:0 0 16px;max-width:64ch}

.lkmcfg__kit{margin-bottom:16px}
.lkmcfg__kit-t{font:600 11px/1 var(--hc-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--hc-accent-dark,#7a6548);margin-bottom:8px}
.lkmcfg__row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--hc-line-2,rgba(180,151,115,.18))}
.lkmcfg__nm b{display:block;font-size:13px;font-weight:600;line-height:1.25;color:var(--hc-ink,#1a1714)}
.lkmcfg__nm a{text-decoration:none}
.lkmcfg__nm a:hover b{color:var(--hc-accent-dark,#7a6548)}
.lkmcfg__nm small{font-size:11px;color:var(--hc-ink-soft,rgba(26,23,20,.5))}
.lkmcfg__role{font:600 9.5px/1 var(--hc-mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--hc-accent-dark,#7a6548);border:1px solid var(--hc-line-2,rgba(180,151,115,.3));padding:4px 8px;border-radius:999px;white-space:nowrap}
.lkmcfg__row--base .lkmcfg__role{color:var(--hc-ink,#1a1714);border-color:var(--hc-ink,#1a1714)}
.lkmcfg__q{font:600 13px/1 var(--hc-mono,monospace);color:var(--hc-ink,#1a1714);white-space:nowrap;text-align:right;min-width:78px}

.lkmcfg__bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:14px 16px;background:rgba(var(--hc-gold-rgb),.1);border-radius:12px}
.lkmcfg__qty-wrap{margin-right:auto}
.lkmcfg__qty-wrap small,.lkmcfg__tot small{display:block;font:600 10px/1 var(--hc-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--hc-ink-soft,rgba(26,23,20,.5));margin-bottom:5px}
.lkmcfg__qty{display:inline-flex;align-items:center;border:1px solid var(--hc-line-2,rgba(180,151,115,.3));border-radius:10px;overflow:hidden;background:#fff}
.lkmcfg__qty button{appearance:none;border:0;background:transparent;width:34px;height:36px;font-size:18px;cursor:pointer;color:var(--hc-ink,#1a1714)}
.lkmcfg__qty input{width:46px;height:36px;border:0;text-align:center;font:600 15px/1 var(--hc-sans,"Outfit",sans-serif);-moz-appearance:textfield}
.lkmcfg__qty input::-webkit-outer-spin-button,.lkmcfg__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lkmcfg__tot{text-align:right}
.lkmcfg__tot b{font:600 22px/1 var(--hc-serif,"Playfair Display",Georgia,serif);color:var(--hc-ink,#1a1714)}
.lkmcfg__btn{appearance:none;border:0;cursor:pointer;background:linear-gradient(180deg,#caa86a,#b4925f);color:#2a2113;font:600 13px/1 var(--hc-sans,"Outfit",sans-serif);padding:13px 20px;border-radius:10px;white-space:nowrap}
.lkmcfg__btn:hover{background:linear-gradient(180deg,#d3b27a,#b89a63)}
.lkmcfg__btn:disabled{opacity:.6;cursor:default}
.lkmcfg__note{margin:12px 0 0;font-size:11.5px;line-height:1.45;color:var(--hc-ink-soft,rgba(26,23,20,.55))}

@media(max-width:720px){
  .lkmcfg__qty-wrap{margin-right:0}
  .lkmcfg__tot{margin-left:auto}
  .lkmcfg__btn{flex:1 1 100%;width:100%}
}

/* css/blocks/118-hc-pdp-bc-signals.css */
/* =================== hc-pdp-bc-signals.css =================== */
.hc-pdp-bc-signals {display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-sp-2); margin-bottom: var(--hc-sp-3)}
.hc-pdp-bc-signals__dot {color: var(--hc-accent)}
.hc-pdp-bc-signals__badges {display: flex; flex-wrap: wrap; gap: 6px}

/* css/blocks/120-hc-pdp-delivery.css */
/* =================== hc-pdp-delivery.css =================== */
/* hc-pdp-delivery — premium PDP delivery section. 3 method tiles (Самовывоз
 * / Курьер / Транспортная компания) + payment-pills strip + small ETA hint.
 * Strictly .hc-pdp-delivery / .hc-pdp-delivery__*. */

.hc-pdp-delivery__methods {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: 22px;
}
@media (max-width: 920px) {
  .hc-pdp-delivery__methods { grid-template-columns: 1fr; }
}

.hc-pdp-delivery__tile {
position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 22px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.94) 100%);
  border: 0.5px solid rgba(141, 109, 71, 0.22);
  border-radius: 16px;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.03),
    0 14px 32px -22px rgba(40, 30, 15, 0.14);
  transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s, box-shadow 0.28s;
}
.hc-pdp-delivery__tile::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(360px 200px at 80% -10%, rgba(var(--hc-gold-rgb), 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.hc-pdp-delivery__tile:hover {
transform: translateY(-4px);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
  box-shadow: 0 28px 56px -22px rgba(184, 154, 111, 0.32);
}
.hc-pdp-delivery__tile:hover::before {
opacity: 1;
}

.hc-pdp-delivery__tile-title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
  margin: 4px 0 0;
}
.hc-pdp-delivery__tile-desc {
margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.hc-pdp-delivery__tile-eta {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
}
.hc-pdp-delivery__tile-price {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
  letter-spacing: -0.01em;
}
.hc-pdp-delivery__tile-price--free {
font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-success, #3d6b4f);
}

.hc-pdp-delivery__tile:hover .hc-pdp-delivery__tile-ico {
background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), #b89a6f);
  color: #2a2018;
  transform: rotate(-6deg) scale(1.06);
}

/* css/blocks/121-hc-pdp-desc.css */
/* =================== hc-pdp-desc.css =================== */
/* hc-pdp-desc — premium description panel for PDP "Описание" tab/chapter.
 * Composed of: hero lede paragraph, key-features icon grid (3-up), and a
 * checked spec list with gold accent. Replaces flat <p>/<ul> markup.
 * Strictly .hc-pdp-desc / .hc-pdp-desc__*. */

.hc-pdp-desc {
display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  min-width: 0;
  max-width: 100%;
}

/* ─── Lede: oversized editorial paragraph ─── */
.hc-pdp-desc__lede {
position: relative;
  margin: 0;
  padding: 12px 0 12px 24px;
  min-width: 0;
  max-width: 100%;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
  overflow-wrap: anywhere;
  word-break: normal;
}
.hc-pdp-desc__lede::before {
content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hc-gold, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
}
.hc-pdp-desc__lede em {
color: var(--hc-accent-dark, #7a6548);
  font-style: italic;
}

/* ─── Feature grid: 3-up cards на всю ширину panel с большими tiles ─── */
.hc-pdp-desc__features {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.hc-pdp-desc__feature {
position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2.2vw, 32px);
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
  border: 0.5px solid rgba(141, 109, 71, 0.20);
  border-radius: clamp(14px, 1.2vw, 18px);
  min-height: 190px;
  min-width: 0;
  max-width: 100%;
  isolation: isolate;
  transition: transform 0.28s cubic-bezier(0.2, 0.84, 0.3, 1), border-color 0.22s, box-shadow 0.28s;
}
@media (max-width: 720px) {
  .hc-pdp-desc__features { grid-template-columns: 1fr; gap: 12px; }
  .hc-pdp-desc__feature { min-height: 0; padding: 22px; }
}
.hc-pdp-desc__feature::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(280px 160px at 80% -10%, rgba(var(--hc-gold-rgb), 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.hc-pdp-desc__feature:hover {
transform: translateY(-3px);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
  box-shadow: 0 18px 36px -22px rgba(184, 154, 111, 0.32);
}
.hc-pdp-desc__feature:hover::before {
opacity: 1;
}

.hc-pdp-desc__feature-title {
margin: 4px 0 0;
  min-width: 0;
  max-width: 100%;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
  overflow-wrap: anywhere;
}
.hc-pdp-desc__feature-text {
margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
  overflow-wrap: anywhere;
}
.hc-pdp-desc__feature-num {
position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(141, 109, 71, 0.35);
}

.hc-pdp-desc__feature-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--hc-accent-dark, #7a6548);
  background: rgba(var(--hc-gold-rgb), 0.16);
  transition: transform 0.28s cubic-bezier(0.2,0.84,0.3,1), background 0.22s, color 0.22s;
}
.hc-pdp-desc__feature:hover .hc-pdp-desc__feature-ico {
transform: rotate(-5deg) scale(1.06);
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), #b89a6f);
  color: #2a2018;
}

/* ─── Rich formatted body (format_description filter): p / h4 / ul ─── */
.hc-pdp-desc__rich {
  min-width: 0;
  max-width: 74ch;
}
.hc-pdp-desc__rich > :first-child { margin-top: 0; }
.hc-pdp-desc__rich > :last-child { margin-bottom: 0; }
.hc-pdp-desc__rich p {
  margin: 0 0 14px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.82));
  overflow-wrap: anywhere;
}
.hc-pdp-desc__h {
  margin: 26px 0 12px;
  padding-bottom: 8px;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
  border-bottom: 0.5px solid rgba(141, 109, 71, 0.18);
  overflow-wrap: anywhere;
}
.hc-pdp-desc__h:first-child { margin-top: 0; }
.hc-pdp-desc__ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.hc-pdp-desc__ul li {
  position: relative;
  padding-left: 26px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.82));
  overflow-wrap: anywhere;
}
.hc-pdp-desc__ul li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
}

/* ─── Рецептура смешивания: технологическая связка ЛКМ (v7.65) ───
 * Rebuilt from the legacy flat-text grid: component / purpose / mix-ratio
 * by weight & volume, with each component code linking to its product.
 * Strictly .hc-recipe / .hc-recipe__*. */
.hc-recipe-wrap {
  margin: 4px 0 2px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hc-recipe__cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-left: 16px;
  position: relative;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
}
.hc-recipe__cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 1.5px;
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
}
.hc-recipe {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  color: var(--hc-ink, #1a1714);
  background: linear-gradient(180deg, var(--hc-paper, #fff) 0%, rgba(252, 248, 240, 0.55) 100%);
  border: 0.5px solid rgba(141, 109, 71, 0.20);
  border-radius: 14px;
  overflow: hidden;
}
.hc-recipe thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
  background: rgba(var(--hc-gold-rgb), 0.12);
  border-bottom: 0.5px solid rgba(141, 109, 71, 0.22);
  white-space: nowrap;
}
.hc-recipe thead th:nth-child(3),
.hc-recipe thead th:nth-child(4),
.hc-recipe tbody td:nth-child(3),
.hc-recipe tbody td:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hc-recipe tbody td {
  padding: 13px 16px;
  vertical-align: middle;
  border-bottom: 0.5px solid rgba(141, 109, 71, 0.12);
}
.hc-recipe tbody tr:last-child td { border-bottom: 0; }
.hc-recipe tbody tr { transition: background 0.18s ease; }
.hc-recipe tbody tr:hover { background: rgba(var(--hc-gold-rgb), 0.08); }
.hc-recipe tbody td:nth-child(2) {
  color: var(--hc-muted, #6b5d4d);
  line-height: 1.4;
}
.hc-recipe tbody td:nth-child(3),
.hc-recipe tbody td:nth-child(4) {
  font-weight: 600;
  color: var(--hc-accent-dark, #7a6548);
  white-space: nowrap;
}
/* component code — chip; clickable when the отвердитель/разбавитель is in stock */
.hc-recipe__code {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--hc-accent-dark, #7a6548);
  border: 0.5px solid rgba(141, 109, 71, 0.30);
  background: var(--hc-paper, #fff);
  white-space: nowrap;
}
a.hc-recipe__code {
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
a.hc-recipe__code:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
  border-color: transparent;
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  .hc-recipe { font-size: 13.5px; min-width: 460px; }
  .hc-recipe thead th, .hc-recipe tbody td { padding: 10px 12px; }
}

/* css/blocks/123-hc-pdp-gallery.css */
/* =================== hc-pdp-gallery.css =================== */
/* hc-pdp-gallery - premium PDP gallery: tabs (Фото/360/Видео), big main image
 * with subtle gold-tinted bg and zoom-on-hover, thumbnail grid below with
 * gold-accent active state, and empty-state SVG placeholder when no images.
 * Strictly .hc-pdp-gallery / .hc-pdp-gallery__*. */

.hc-pdp-gallery {
position: relative;
  min-width: 0;
}

/* tabs (Фото / 360° / Видео / Схема) */
.hc-pdp-gallery__tabs {
display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.hc-pdp-gallery__tab {
display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 252, 247, 0.86);
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: var(--hc-r-pill, 999px);
  font: inherit;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hc-pdp-gallery__tab:hover {
background: rgba(var(--hc-gold-rgb), 0.16);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.4));
  color: var(--hc-ink, #1a1714);
}
.hc-pdp-gallery__tab.is-active {
background: linear-gradient(180deg, rgba(28, 24, 20, 0.98), rgba(17, 14, 12, 1));
  color: var(--hc-paper, #ffffff);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.28);
}

/* main image — large, premium gold-tinted bg, smooth hover zoom */
.hc-pdp-gallery__main {
position: relative;
  aspect-ratio: 1 / 1;
  padding: clamp(8px, 1.8vw, 20px);
  background:
    radial-gradient(circle at 50% 108%, rgba(199, 155, 96, 0.12), transparent 58%),
    linear-gradient(160deg, var(--hc-paper) 0%, var(--hc-bg-warm) 100%);
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: clamp(20px, 2vw, 28px);
  overflow: hidden;
  isolation: isolate;
  cursor: zoom-in;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.03),
    0 28px 70px -28px rgba(40, 30, 15, 0.22);
}
.hc-pdp-gallery__main::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.65), transparent 55%);
}
.hc-pdp-gallery__main--empty {
cursor: default;
}
.hc-pdp-gallery__main--zoomable {
--hc-zoom-x: 50%;
  --hc-zoom-y: 50%;
}
.hc-pdp-gallery__main img, .hc-pdp-gallery__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: var(--hc-zoom-x, 50%) var(--hc-zoom-y, 50%);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    filter 0.55s ease;
}
.hc-pdp-gallery__main:hover img {
transform: scale(1.06);
  filter: drop-shadow(0 28px 50px rgba(40, 30, 15, 0.22));
}


.hc-pdp-gallery__zoom {
position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 50%;
  color: var(--hc-ink, #1a1714);
  pointer-events: none;
  box-shadow: 0 6px 14px -4px rgba(40, 30, 15, 0.18);
  opacity: 0.85;
  transition: opacity 0.22s ease;
}

.hc-pdp-gallery__counter {
position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(26, 23, 20, 0.84);
  color: var(--hc-paper, #ffffff);
  border-radius: var(--hc-r-pill);
  font-family: var(--hc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hc-pdp-gallery__sale {
position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}


/* thumbnails grid — tight 7-column row под gallery, по mock M1.
   Лишние превью (>7) скрываются вместо переноса во вторую строку. */
.hc-pdp-gallery__thumbs {
display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 0;
}
.hc-pdp-gallery__thumbs > :nth-child(n+8) {
display: none;
}
.hc-pdp-gallery__thumb {
aspect-ratio: 1;
  padding: 6px;
  background: var(--hc-paper-3, var(--hc-paper-3));
  border: 1px solid rgba(141, 109, 71, 0.14);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.hc-pdp-gallery__thumb img {
width: 100%;
  height: 100%;
  object-fit: contain;
}
.hc-pdp-gallery__thumb:hover {
transform: translateY(-2px);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
  box-shadow: 0 8px 18px -8px rgba(184, 154, 111, 0.32);
}
.hc-pdp-gallery__thumb.is-active {
border-color: var(--hc-accent, var(--hc-accent));
  background: rgba(var(--hc-gold-rgb), 0.18);
  box-shadow: 0 8px 22px -6px rgba(var(--hc-accent-rgb), 0.32);
}

/* empty state — no images, SVG placeholder + CTA */
.hc-pdp-gallery__empty {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: 420px;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(160deg, var(--hc-paper-2) 0%, var(--hc-bg-warm) 100%);
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: clamp(20px, 2vw, 28px);
  color: var(--hc-ink-mid);
  text-align: center;
}
.hc-pdp-gallery__empty-art {
width: 100%;
  max-width: 420px;
  margin: 0 auto;
  opacity: 0.85;
}
.hc-pdp-gallery__empty-msg {
display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  text-align: center;
}
.hc-pdp-gallery__empty-msg strong {
display: block;
  font-family: var(--hc-serif, "Playfair Display", serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--hc-ink, #1a1714);
  margin-bottom: 4px;
}
.hc-pdp-gallery__empty-msg span {
display: block;
  max-width: 44ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
  margin-bottom: 10px;
}

.hc-pdp-gallery__content[hidden] {
  display: none;
}

.hc-pdp-gallery__empty--runtime[hidden] {
  display: none;
}

@media (max-width: 920px) {
  .hc-pdp-gallery__img.hc-img-broken { display: none; }
  .hc-pdp-gallery__thumbs {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .hc-pdp-gallery__thumbs > :nth-child(n+6) {
    display: none;
  }
}

@media (max-width: 480px) {
  .hc-pdp-gallery__main { padding: clamp(10px, 3vw, 18px); }
  .hc-pdp-gallery__zoom { width: 32px; height: 32px; top: 12px; right: 12px; }
}

.hc-pdp-gallery__main:hover .hc-pdp-gallery__img {
  transform: scale(1.06);
  filter: drop-shadow(0 28px 50px rgba(40, 30, 15, 0.22));
}
.hc-pdp-gallery__main.is-zooming .hc-pdp-gallery__img {
  transform: scale(2.2);
}
.hc-pdp-gallery__main:hover .hc-pdp-gallery__zoom {
  opacity: 1;
}
.pdp-rich-media {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.pdp-rich-media__item {
  overflow: hidden;
  border: 1px solid var(--hc-line-2);
  border-radius: 14px;
  background: var(--hc-surface, #fff);
}
.pdp-rich-media__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hc-line);
}
.pdp-rich-media__head span {
  color: var(--hc-ink-mid);
  font-size: 12px;
}
.pdp-rich-media__frame,
.pdp-rich-media__video iframe,
.pdp-rich-media__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  object-fit: contain;
  background: #fff;
}
.pdp-rich-media__range {
  width: calc(100% - 28px);
  margin: 10px 14px 14px;
  accent-color: var(--hc-accent);
}

/* css/blocks/125-hc-pdp-m1.css */
/* =================== hc-pdp-m1.css =================== */
/* Canonical PDP M1 layout. Single source of truth for hero/buy/tabs rhythm. */

.hc-pdp-m1__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.92fr);
  align-items: start;
  gap: clamp(18px, 2vw, 30px);
  max-width: 100%;
  margin: 16px 0 26px;
}

.hc-pdp-m1__gallery {
  min-width: 0;
}

.hc-pdp-m1__aside {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 10px;
  align-content: start;
}

.hc-pdp-m1__head .hc-eyebrow {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hc-pdp-m1__title {
  margin: 0;
  max-width: 100%;
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(33px, 2.75vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hc-pdp-m1__buy {
  position: sticky;
  top: calc(var(--hc-hdr-h, 72px) + 10px);
  min-width: 0;
  max-width: 100%;
  padding: 16px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--hc-paper) 0%, var(--hc-paper-2) 100%);
  box-shadow: 0 18px 40px -28px rgba(40, 30, 15, 0.28);
}

.hc-pdp-m1__sku-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  margin: 0 0 12px;
  border: 1px solid rgba(var(--hc-gold-rgb), 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--hc-gold-rgb), 0.2), rgba(var(--hc-gold-rgb), 0.08));
}

.hc-pdp-m1__sku-key {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.56);
}

.hc-pdp-m1__sku-val {
  min-width: 0;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1714;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.hc-pdp-m1__sku-copy {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #7a6548;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hc-pdp-m1__sku-copy:hover {
  transform: scale(1.08);
  background: #1a1714;
  border-color: #1a1714;
  color: #fff;
}

.hc-pdp-m1__sku-copy svg {
  width: 11px;
  height: 11px;
}

.hc-pdp-m1__sku-copy-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.hc-pdp-m1__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.hc-pdp-m1__price {
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(34px, 2.75vw, 46px);
  line-height: 0.98;
  letter-spacing: 0;
}

.hc-pdp-m1__price-old {
  color: rgba(26, 23, 20, 0.42);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 14px;
  text-decoration: line-through;
}

.hc-pdp-m1__sale-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 8px;
  background: #8b3f32;
  color: #fff;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hc-pdp-m1__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin: 10px 0 14px;
  padding: 5px 10px;
  border: 1px solid rgba(61, 107, 79, 0.26);
  border-radius: 999px;
  background: rgba(61, 107, 79, 0.1);
  color: #3d6b4f;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hc-pdp-m1__stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hc-pdp-m1__ctas {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 10px;
  align-items: stretch;
}
/* Compact qty (col 1) sits inline with the primary «В корзину» (col 2);
   secondary CTAs span the full width below. Keeps the buy action dominant. */
.hc-pdp-m1__cta-primary {
  grid-column: 2;
}
.hc-pdp-m1__cta-outline,
.hc-pdp-m1__cta-kit {
  grid-column: 1 / -1;
}

.hc-pdp-m1__cta-kit {
  border-color: rgba(47, 111, 76, 0.30);
  background: rgba(47, 111, 76, 0.08);
  color: #2f6f4c;
  text-decoration: none;
}

.hc-pdp-m1__cta-kit:hover {
  background: #2f6f4c;
  color: #fff;
}

.hc-pdp-m1__qty {
  grid-column: 1;
  display: grid;
  /* Fixed-min middle column: an <input type=number> has ~34px of intrinsic
     width, so minmax(0,1fr) let flex parents collapse the column to 0 and the
     input visually overlapped the "+" button. min-width guards the whole box
     in flex rows (.hc-pdp-m1__bar-buy). */
  grid-template-columns: 40px minmax(46px, 1fr) 40px;
  flex: 0 0 132px;
  min-width: 132px;
  min-height: 52px;
  border: 1px solid rgba(141, 109, 71, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  overflow: hidden;
}

.hc-pdp-m1__qty-btn {
  border: 0;
  background: transparent;
  color: rgba(26, 23, 20, 0.72);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.hc-pdp-m1__qty-btn:hover {
  background: rgba(var(--hc-gold-rgb), 0.18);
  color: #1a1714;
}

.hc-pdp-m1__qty input.hc-pdp-m1__qty-input {
  width: 100%;
  max-width: 100%;
  min-width: 46px;
  height: 100%;
  padding: 0;
  border: 0;
  border-inline: 1px solid rgba(141, 109, 71, 0.14);
  background: transparent;
  text-align: center;
  color: #1a1714;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 15px;
  font-weight: 700;
  appearance: textfield;
}

.hc-pdp-m1__qty input.hc-pdp-m1__qty-input::-webkit-inner-spin-button,
.hc-pdp-m1__qty input.hc-pdp-m1__qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hc-pdp-m1__qty input.hc-pdp-m1__qty-input:focus {
  outline: none;
}

.hc-pdp-m1__atc-form {
  display: contents;
}

.hc-pdp-m1__cta-primary,
.hc-pdp-m1__cta-outline {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hc-pdp-m1__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1a1714;
  background: #1a1714;
  color: #fff;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hc-pdp-m1__cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(40, 30, 15, 0.48);
}

.hc-pdp-m1__cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 23, 20, 0.24);
  background: #fff;
  color: #1a1714;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Type-specific service tools (раскрой / подбор / …) — modal triggers. */
.hc-pdp-m1__tools {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(141, 109, 71, 0.22);
}
.hc-pdp-m1__tools-label {
  display: block;
  margin-bottom: 9px;
  font: 700 10px/1 var(--hc-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(94, 75, 48, 0.7);
}
.hc-pdp-m1__tools-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.hc-pdp-m1__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(141, 109, 71, 0.3);
  border-radius: 11px;
  background: #fff;
  color: #1a1714;
  font: 600 13px/1.15 var(--hc-sans, "Outfit", sans-serif);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hc-pdp-m1__tool:hover {
  border-color: #1a1714;
  background: #1a1714;
  color: #fff;
  transform: translateY(-1px);
}

/* Plates: single link to the online cut service (cut.holzcom-mebel.ru) */
.hc-pdp-m1__tool--cut {
  grid-column: 1 / -1;
  border-color: rgba(176, 138, 79, 0.5);
  background: linear-gradient(135deg, var(--hc-paper) 0%, #fbf3e4 100%);
  color: #6b5526;
  text-decoration: none;
}
.hc-pdp-m1__tool--cut:hover {
  border-color: #b08a4f;
  background: linear-gradient(135deg, #1f1a12 0%, #342817 100%);
  color: #f6e9cf;
}
.hc-pdp-m1__tool-ext {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}
.hc-pdp-m1__tool--cut:hover .hc-pdp-m1__tool-ext {
  transform: translate(2px, -2px);
}

.hc-pdp-m1__cta-outline:hover {
  border-color: #1a1714;
  background: #1a1714;
  color: #fff;
}

.hc-pdp-m1__acts {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(141, 109, 71, 0.22);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hc-pdp-m1__act {
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: 10px;
  background: #fff;
  color: rgba(26, 23, 20, 0.76);
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.22;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.hc-pdp-m1__act:hover {
  transform: translateY(-1px);
  border-color: rgba(141, 109, 71, 0.38);
  background: rgba(252, 248, 240, 0.94);
}

.hc-pdp-m1__act-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(var(--hc-gold-rgb), 0.16);
  color: #7a6548;
}

.hc-pdp-m1__act-ico svg {
  width: 13px;
  height: 13px;
}

/* Tabs */
.hc-pdp-m1__tabs {
  margin-top: 20px;
}

.hc-pdp-m1__tabs-bar {
  position: sticky;
  top: calc(var(--hc-hdr-h, 72px) + 6px);
  z-index: 18;
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid rgba(141, 109, 71, 0.18);
  border-bottom: 1px solid rgba(141, 109, 71, 0.18);
  background: rgba(245, 242, 236, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hc-pdp-m1__tabs-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hc-pdp-m1__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  border-radius: 999px;
  background: #fff;
  color: rgba(26, 23, 20, 0.78);
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.hc-pdp-m1__tab:hover {
  border-color: rgba(141, 109, 71, 0.42);
  background: rgba(var(--hc-gold-rgb), 0.14);
  color: #1a1714;
}

.hc-pdp-m1__tab.is-active {
  border-color: #1a1714;
  background: linear-gradient(180deg, #1f1a15, #14110d);
  color: #fff;
}

.hc-pdp-m1__tab__c {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--hc-gold-rgb), 0.22);
  color: #7a6548;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hc-pdp-m1__tab.is-active .hc-pdp-m1__tab__c {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.hc-pdp-m1__panel {
  /* Readable measure: description HTML used to run edge-to-edge (~1340px lines,
     glued to the left). Cap and center the prose column. */
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 0 16px;
}

.hc-pdp-m1__panel > h3,
.hc-pdp-m1__panel h2 {
  margin: 0 0 12px;
  color: #1a1714;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(21px, 1.6vw, 25px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
}

.hc-pdp-m1__panel h2 { margin-top: 28px; }
.hc-pdp-m1__panel h2:first-child { margin-top: 0; }

.hc-pdp-m1__panel h3:not(:first-child) { margin-top: 22px; }

.hc-pdp-m1__panel p,
.hc-pdp-m1__panel li {
  color: rgba(26, 23, 20, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

.hc-pdp-m1__panel p { margin: 0 0 14px; }
.hc-pdp-m1__panel li { margin: 5px 0; }
.hc-pdp-m1__panel li::marker { color: var(--hc-accent, #2f6f4c); }

.hc-pdp-m1__panel ul {
  margin: 0 0 18px;
  padding-left: 20px;
}

@media (max-width: 960px) {
  .hc-pdp-m1__hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hc-pdp-m1__buy {
    position: static;
    top: auto;
  }
}

@media (max-width: 420px) {
  .hc-pdp-m1__ctas {
    grid-template-columns: 1fr;
  }
  .hc-pdp-m1__qty,
  .hc-pdp-m1__cta-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 920px) {
  .hc-pdp-m1__title {
    font-size: clamp(28px, 8.8vw, 38px);
  }
  .hc-pdp-m1__acts {
    grid-template-columns: 1fr;
  }
  .hc-pdp-m1__tabs-inner {
    gap: 6px;
  }
  .hc-pdp-m1__tab {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .hc-pdp-m1__panel {
    padding: 24px 16px 16px;
  }
}

/* css/blocks/279-hc-pdp-m1-motion.css */
/* =================== hc-pdp-m1-motion.css =================== */
/* Extracted from 125-hc-pdp-m1.css: icon and interaction animation layer. */

@keyframes hc-pdp-m1-shake {
  0%,
  100% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-14deg);
  }

  40% {
    transform: rotate(12deg);
  }

  60% {
    transform: rotate(-8deg);
  }

  80% {
    transform: rotate(6deg);
  }
}

.hc-pdp-m1__act:hover .hc-pdp-m1__act-ico {
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), #b89a6f);
  color: #2a2018;
}

.hc-pdp-m1__act[data-modal-open="telegram"]:hover .hc-pdp-m1__act-ico {
  transform: rotate(-12deg);
}

.hc-pdp-m1__act[data-modal-open="project"]:hover .hc-pdp-m1__act-ico {
  transform: translateY(-2px);
}

.hc-pdp-m1__act[data-modal-open="cheaper"]:hover .hc-pdp-m1__act-ico {
  transform: rotate(360deg);
  transition-duration: 0.8s;
}

.hc-pdp-m1__act[data-modal-open="stock"]:hover .hc-pdp-m1__act-ico {
  animation: hc-pdp-m1-shake 0.55s ease;
}

.hc-pdp-m1__act[data-modal-open="price"]:hover .hc-pdp-m1__act-ico {
  transform: translateY(2px);
}

.hc-pdp-m1__act[data-modal-open="engineer"]:hover .hc-pdp-m1__act-ico {
  transform: scale(1.18);
}

.hc-pdp-m1__act[data-modal-open="favorite"]:hover .hc-pdp-m1__act-ico {
  background: linear-gradient(135deg, #ff6b6b, #c0392b);
  color: var(--hc-paper, #ffffff);
  transform: scale(1.16);
}

.hc-pdp-m1__act[data-modal-open="docs"]:hover .hc-pdp-m1__act-ico {
  transform: translateY(-2px) rotate(-4deg);
}

/* css/blocks/269-hc-pdp-specs.css */
/* =================== hc-pdp-specs.css =================== */
/* Extracted from 125-hc-pdp-m1.css. */

/* ---- folded from 130-hc-pdp-specs.css ---- */
/* =================== hc-pdp-specs.css =================== */
/* hc-pdp-specs — premium clickable specification list. Each value is a
 * pill-link that filters the catalog on click (e.g. "Накладная" →
 * /shop?overlay=overlay-full). Used inside PDP tab panel "Характеристики"
 * across all PDP layouts (M1/M2/M3). Strict isolation: .hc-pdp-specs / *. */

.hc-pdp-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  width: 100%;
  background: rgba(141, 109, 71, 0.16);
  border: 0.5px solid rgba(141, 109, 71, 0.20);
  border-radius: 16px;
  overflow: hidden;
}

.hc-pdp-specs__row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0;
  background: var(--hc-paper, #ffffff);
  transition: background 0.18s ease;
}
.hc-pdp-specs__row:hover { background: rgba(252, 248, 240, 0.96); }

.hc-pdp-specs__key {
  margin: 0;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
}

.hc-pdp-specs__val {
  margin: 0;
  min-width: 0;
}

.hc-pdp-specs__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 12px;
  background: rgba(var(--hc-gold-rgb), 0.16);
  border: 0.5px solid rgba(141, 109, 71, 0.22);
  border-radius: 999px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
  cursor: pointer;
}
.hc-pdp-specs__chip:hover {
  background: linear-gradient(135deg, rgba(var(--hc-gold-rgb), 0.42), rgba(184, 154, 111, 0.22));
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.62));
  color: var(--hc-ink, #1a1714);
  transform: translateY(-1px);
}
.hc-pdp-specs__chip::after {
  content: "→";
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 400;
  opacity: 0;
  transform: translateX(-4px);
  margin-left: -4px;
  color: var(--hc-accent-dark, #7a6548);
  transition: opacity 0.20s ease, transform 0.20s ease, margin 0.20s ease;
}
.hc-pdp-specs__chip:hover::after {
  opacity: 1;
  transform: translateX(0);
  margin-left: 0;
}

/* Static value (not filterable — e.g. proprietary numbers, manufacturer name) */
.hc-pdp-specs__static {
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
  padding-left: 12px;
}

/* Tone variants for special values */
.hc-pdp-specs__chip--num {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* Brand chip: same light palette as every other chip (consistent), with a
   subtle accent dot + bold weight instead of a jarring dark fill. */
.hc-pdp-specs__chip--brand {
  font-weight: 700;
}
.hc-pdp-specs__chip--brand::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hc-accent, var(--hc-accent));
  flex: 0 0 auto;
}

.hc-pdp-specs__row--wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(160px, 0.6fr) minmax(0, 2fr);
}

@media (max-width: 920px) {
  .hc-pdp-specs {
    grid-template-columns: 1fr;
  }
  .hc-pdp-specs__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 16px;
  }
  .hc-pdp-specs__row--wide { grid-template-columns: 1fr; }
}

/* css/blocks/270-hc-pdp-base.css */
/* =================== hc-pdp-base.css =================== */
/* Extracted from 125-hc-pdp-m1.css: shared PDP layout primitives. */

/* ---- folded from 136-hc-pdp.css ---- */
/* PDP base layout primitives. Variants own visual skin in 125/126/127. */

.hc-pdp {
  padding-top: var(--hc-sp-5);
}

.hc-pdp__main,
.hc-pdp__grid {
  display: grid;
  gap: clamp(14px, 1.3vw, 22px);
  align-items: start;
}

.page-pdp .hc-pdp__grid {
  grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 1fr) minmax(320px, 0.95fr);
  margin-top: var(--hc-sp-4, 20px);
  margin-bottom: clamp(40px, 4vw, 64px);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.hc-pdp__title-col,
.hc-pdp__info,
.hc-pdp__main {
  min-width: 0;
}

.hc-pdp__title {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.hc-pdp__related {
  margin: 32px 0 12px;
}

.hc-pdp__related-title {
  font-size: 18px;
  margin: 0 0 12px;
  font-weight: 500;
}

@media (max-width: 1360px) {
  .page-pdp .hc-pdp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .hc-pdp__title-col,
  .hc-pdp__info {
    min-width: 0;
  }
}

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

/* css/blocks/129-hc-pdp-region.css */
/* =================== hc-pdp-region.css =================== */
.hc-pdp-region { position: relative; display: inline-block; }
.hc-pdp-region__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hc-pdp-region__chev {
  transition: transform 0.2s ease;
  margin-left: 2px;
  color: var(--hc-accent-dark, var(--hc-accent-dark));
}
.hc-pdp-region__chev.is-open { transform: rotate(180deg); }
.hc-pdp-region__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  padding: 10px;
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid rgba(26, 23, 20, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(26, 23, 20, 0.12), 0 2px 8px rgba(26, 23, 20, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hc-pdp-region__hint {
  display: block;
  padding: 4px 10px 8px;
  font: 400 11px/1.3 var(--hc-sans, 'Outfit', sans-serif);
  color: rgba(26, 23, 20, 0.55);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 0.5px solid rgba(26, 23, 20, 0.08);
  margin-bottom: 6px;
}
.hc-pdp-region__opt {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font: 500 13px/1.2 var(--hc-sans, 'Outfit', sans-serif);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hc-pdp-region__opt:hover {
  background: rgba(193, 159, 104, 0.10);
}
.hc-pdp-region__opt.is-active {
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #ffffff);
}

/* css/blocks/159-hc-tabs.css */
/* =================== hc-tabs.css =================== */
.hc-tabs__nav {
display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--hc-line); scrollbar-width: none
}
.hc-tabs__btn.is-active {
color: var(--hc-ink); border-bottom-color: var(--hc-ink)
}

.hc-tabs__panel {
padding-top: var(--hc-sp-5)
}
.hc-tabs__loader {
margin: var(--hc-sp-5) auto
}

.hc-tabs {
display: flex;
  border-bottom: 1px solid var(--hc-line);
  gap: var(--hc-sp-2);
  overflow-x: auto;
}
.hc-tabs__tab {
position: relative;
  padding: var(--hc-sp-3) var(--hc-sp-5);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--hc-fs-md);
  font-weight: 500;
  color: var(--hc-ink-soft);
  transition: color var(--hc-dur-base) var(--hc-ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-tabs__tab:hover {
color: var(--hc-ink);
}
.hc-tabs__tab.is-active {
color: var(--hc-ink);
}
.hc-tabs__tab.is-active::after {
content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hc-ink);
  animation: hcTabSlide var(--hc-dur-base) var(--hc-ease);
}
.hc-tabs__panel {
display: none;
  animation: hcFadeIn var(--hc-dur-base) var(--hc-ease);
}
.hc-tabs__panel.is-active {
display: block;
}
.hc-tabs.hc-tabs--premium {
border-bottom: 1px solid rgba(141, 109, 71, 0.16);
}
.hc-tabs__btn.is-active {
color: var(--hc-ink, #1a1714);
  border-bottom-color: var(--hc-accent, var(--hc-accent));
  font-weight: 500;
}

.hc-tabs__btn.is-active .hc-tabs__count {
background: var(--hc-ink); color: var(--hc-paper, #ffffff)
}

/* css/blocks/200-pdp-kit-products.css */
/* =================== pdp-kit-products.css =================== */
/* pdp-kit-products — grid container for the "Для этого фасада обычно нужно"
 * bundle. Each tile is a standard .pcard.pcard--c (same template as catalog,
 * cross-sell, recently-viewed). The only kit-specific addition is the count
 * badge (×1 / ×4 / опц.) placed inside .pcard-overlay__badges using
 * .pcard-badge--count (a gold-gradient variant). Strictly .pdp-kit-* */

.pdp-kit-section {
  margin: clamp(28px, 3.4vw, 44px) 0 clamp(20px, 2.4vw, 32px);
}
.pdp-kit-section > .hc-sec-h {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.pdp-kit-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
}
@media (max-width: 1280px) { .pdp-kit-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px)  { .pdp-kit-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pdp-kit-products { grid-template-columns: 1fr; } }

/* Count badge — kit-specific extension of .pcard-badge.
   Lives inside .pcard-overlay__badges; gold-gradient pill with crisp number. */
.pcard-badge--count {
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), #b89a6f);
  color: #2a2018;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px -1px rgba(184, 154, 111, 0.42);
}

/* css/blocks/201-pdp-product-rail.css */
/* =================== pdp-product-rail.css =================== */
/* pdp-product-rail - 4-column grid of related products on the PDP
 * ("С этим товаром покупают", "Совместимые", "Похожие"). Each child is a
 * .pcard (variant typically forced to "c"). Maintains consistent card
 * heights and tight gaps. Strictly .pdp-product-rail. */

.pdp-product-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  margin: clamp(20px, 2.4vw, 36px) 0;
}

.pdp-product-rail--premium {
  padding: clamp(12px, 1.4vw, 20px);
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.6) 0%, transparent 100%);
  border-radius: clamp(14px, 1.4vw, 20px);
}

.pdp-product-rail > .pcard {
  min-width: 0;
  max-width: 100%;
  height: 100%;
}

.pdp-product-rail .pcard[data-pcard-variant="c"],
.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-c__body,
.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-meta-row,
.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-title,
.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-caption,
.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-props,
.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-footer {
  min-width: 0;
  max-width: 100%;
}

.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-meta-row > * {
  min-width: 0;
}

.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-sku {
  flex: 1 1 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-title,
.pdp-product-rail .pcard[data-pcard-variant="c"] .pcard-caption {
  overflow-wrap: anywhere;
}

.pdp-product-rail:has(> .pcard:only-child) {
  grid-template-columns: minmax(260px, 360px);
  justify-content: start;
}

.pdp-product-rail[data-count="1"] {
  grid-template-columns: minmax(260px, 360px);
  justify-content: start;
}

.pdp-product-rail[data-count="2"] {
  grid-template-columns: repeat(2, minmax(260px, 360px));
  justify-content: start;
}

.pdp-product-rail[data-count="3"] {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
}

@media (max-width: 1280px) {
  .pdp-product-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .pdp-product-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pdp-product-rail { grid-template-columns: 1fr; }
}

/* css/blocks/205-pdp-variants.css */
/* =================== pdp-variants.css =================== */
/* pdp-variants — visual differences between three PDP layouts (M1/M2/M3)
 * driven by [data-pdp-variant] attribute on .hc-pdp and `pdp-variant-{m1,m2,m3}
[data-pdp-variant="m2"] .hc-pdp__grid {
  gap: clamp(20px, 1.6vw, 28px);
}
[data-pdp-variant="m2"] .pdp-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(247, 240, 226, 0.86) 100%);
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 12px;
  margin: 16px 0;
}
[data-pdp-variant="m2"] .pdp-trust-strip__item {
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font-size: 12px;
}
[data-pdp-variant="m2"] .pdp-trust-strip__item b {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-pdp-variant="m2"] .pdp-trust-strip__item span {
  font-size: 11px;
}

/* ===================== M3 — Chapters + Jump-nav ===================== */
[data-pdp-variant="m3"] {
  position: relative;
}
[data-pdp-variant="m3"] .pdp-anchor-nav a:hover,
[data-pdp-variant="m3"] .pdp-anchor-nav a.is-active {
  background: rgba(var(--hc-gold-rgb), 0.16);
  color: var(--hc-ink, #1a1714);
}
[data-pdp-variant="m3"] .pdp-anchor-nav a:hover::before,
[data-pdp-variant="m3"] .pdp-anchor-nav a.is-active::before {
  background: linear-gradient(135deg, var(--hc-gold-1, var(--hc-gold, var(--hc-gold))), var(--hc-gold-2, #b89a6f));
  transform: translateY(-50%) scale(1.4);
}
[data-pdp-variant="m3"] .hc-pdp .hc-wrap > :not(.pdp-anchor-nav):not(:first-child) {
  padding-left: clamp(0px, 14vw, 200px);
}

/* css/blocks/240-pdp-qa.css */
/* PDP Q&A list + ask form */

.qa-list-wrap {
  display: grid;
  gap: 18px;
}

.qa-list {
  display: grid;
  gap: 12px;
}

.qa-item {
  border: 1px solid var(--sf-line, rgba(120, 102, 80, 0.22));
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.84);
}

.qa-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.qa-item__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: rgba(31, 25, 19, 0.1);
}

.qa-item__meta time {
  display: block;
  font-size: 12px;
  color: rgba(26, 23, 20, 0.62);
}

.qa-item__q {
  margin: 0 0 8px;
}

.qa-item__a {
  border-top: 1px solid rgba(120, 102, 80, 0.18);
  padding-top: 8px;
}

.qa-item__a-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(26, 23, 20, 0.72);
  margin-bottom: 6px;
}

.qa-item__a p {
  margin: 0;
}

.qa-item__pending {
  font-size: 13px;
  color: rgba(26, 23, 20, 0.6);
}

.qa-ask-form {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(120, 102, 80, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 247, 242, 0.82)),
    var(--hc-paper, #fff);
  box-shadow: 0 18px 46px -34px rgba(42, 32, 24, 0.34);
}

.qa-ask-form__head {
  display: grid;
  gap: 5px;
  width: min(100%, 760px);
  overflow-wrap: anywhere;
}

.qa-ask-form__head strong {
  font-family: var(--hc-serif, inherit);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 500;
  line-height: 1.12;
  color: var(--hc-ink, #1a1714);
}

.qa-ask-form__head span {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(26, 23, 20, 0.62);
}

.qa-ask-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.qa-ask-form .hc-field {
  display: grid;
  gap: 7px;
}

.qa-ask-form .hc-label {
  display: inline-flex;
  width: fit-content;
  padding: 0;
  background: transparent;
  color: rgba(26, 23, 20, 0.58);
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.qa-ask-form .hc-input,
.qa-ask-form .hc-textarea {
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid rgba(120, 102, 80, 0.20);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.qa-ask-form .hc-input:focus,
.qa-ask-form .hc-textarea:focus {
  border-color: rgba(93, 77, 58, 0.62);
  box-shadow: 0 0 0 4px rgba(184, 154, 111, 0.16);
  outline: none;
}

.qa-ask-form .hc-textarea {
  min-height: 132px;
  resize: vertical;
}

.qa-ask-form .hc-btn {
  justify-self: start;
  min-width: 220px;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .qa-ask-form__grid {
    grid-template-columns: 1fr;
  }

  .qa-ask-form .hc-btn {
    width: 100%;
  }
}

/* css/blocks/241-pdp-bundles.css */
/* PDP bundles rail — premium cards, unified vertical rhythm */

.hc-bundles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hc-bundles__grid:has(> .hc-bundle-card:only-child) {
  grid-template-columns: 1fr;
}

.hc-bundle-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 246, 238, 0.96));
}

.hc-bundle-card__head {
  display: grid;
  gap: 4px;
}

.hc-bundle-card__title {
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hc-bundle-card__price {
  margin: 0;
  font-size: 28px;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
}

.hc-bundle-card__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.hc-bundle-card__item {
  position: relative;
  display: block;
}

.hc-bundle-card__thumb {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(141, 109, 71, 0.18);
  background: #f1f0f0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hc-bundle-card__thumb img,
.hc-bundle-card__thumb svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hc-bundle-card__qty {
  position: absolute;
  left: -4px;
  bottom: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
}

.hc-bundle-card__foot {
  margin-top: auto;
}

.hc-bundle-card__foot .hc-btn {
  width: 100%;
}

.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card {
  grid-template-columns: minmax(220px, 0.55fr) minmax(280px, 1fr) minmax(220px, 0.42fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  padding: clamp(20px, 2.4vw, 30px);
}

.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__head {
  align-self: start;
}

.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__items {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}

.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__foot {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 100%;
  align-self: center;
}

.hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-small {
  grid-column: 1;
}

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

@media (max-width: 760px) {
  .hc-bundles__grid {
    grid-template-columns: 1fr;
  }
  .hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__items,
  .hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-bundle-card__foot,
  .hc-bundles__grid:has(> .hc-bundle-card:only-child) .hc-small {
    grid-column: auto;
    grid-row: auto;
  }
}

/* css/blocks/249-pdp-benefits.css */
/* =================== pdp-benefits.css =================== */
/* PDP clickable advantages: animated SVG + category-aware teaser cards. */

.pdp-benefits {
  margin: 16px 0 20px;
}

.pdp-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pdp-benefit-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 128px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  background:
    radial-gradient(140px 80px at 100% 100%, rgba(199, 155, 96, 0.15), transparent 60%),
    linear-gradient(180deg, var(--hc-paper) 0%, #f8f2e7 100%);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.pdp-benefit-card:hover {
  transform: translateY(-2px);
  border-color: rgba(120, 88, 56, 0.48);
  box-shadow: 0 14px 32px -24px rgba(23, 18, 12, 0.48);
}

.pdp-benefit-card__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(141, 109, 71, 0.25);
  overflow: hidden;
}

.pdp-benefit-card__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pdp-benefit-card__title {
  display: block;
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.pdp-benefit-card__text {
  display: block;
  color: rgba(26, 23, 20, 0.72);
  font-size: 13px;
  line-height: 1.35;
}

.pdp-benefit-card__cta {
  display: inline-block;
  margin-top: 2px;
  color: #74563a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pdp-benefit-ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #5e4730;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pdp-benefit-ico path,
.pdp-benefit-ico circle,
.pdp-benefit-ico rect {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s ease, transform 0.45s ease, opacity 0.3s ease;
  transform-origin: center;
}

.pdp-benefit-card:hover .pdp-benefit-ico path,
.pdp-benefit-card:hover .pdp-benefit-ico circle,
.pdp-benefit-card:hover .pdp-benefit-ico rect {
  stroke-dashoffset: 60;
  animation: pdp-benefit-draw 0.9s ease forwards;
}

.pdp-benefit-card:hover .pdp-benefit-ico {
  animation: pdp-benefit-float 0.9s ease;
}

@keyframes pdp-benefit-draw {
  0% { stroke-dashoffset: 60; opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes pdp-benefit-float {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-1px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

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

@media (max-width: 760px) {
  .pdp-benefits__grid {
    grid-template-columns: 1fr;
  }
  .pdp-benefit-card {
    min-height: 0;
  }
}

/* css/blocks/251-pdp-type-profiles.css */
/* =================== pdp-type-profiles.css =================== */
/* Isolated PDP visual profiles by product type.
 * Scope: .page-pdp .hc-pdp[data-product-type="..."] only. */

.page-pdp .hc-pdp[data-product-type="lacquer_kit"] .hc-eyebrow {
  color: #2f6f4c;
}

.page-pdp .hc-pdp[data-product-type="lacquer_kit"] .hc-pdp-m1__stock {
  background: rgba(47, 111, 76, 0.11);
  color: #2f6f4c;
  border-color: rgba(47, 111, 76, 0.22);
}

.page-pdp .hc-pdp[data-product-type="lacquer_kit"] .hc-pdp-m1__cta-kit {
  border-color: rgba(47, 111, 76, 0.34);
  color: #2f6f4c;
}

.page-pdp .hc-pdp[data-product-type="sheet_material"] .hc-pdp-m1__price-row {
  align-items: baseline;
}

.page-pdp .hc-pdp[data-product-type="sheet_material"] .hc-pdp-m1__price::after {
  content: " / лист";
  font-size: 15px;
  color: rgba(26, 23, 20, 0.52);
  margin-left: 5px;
}

.page-pdp .hc-pdp[data-product-type="material"] .hc-pdp-bc-signals__badges .hc-badge:first-child {
  background: rgba(var(--hc-accent-rgb), 0.15);
}

.page-pdp .hc-pdp[data-product-type="hardware"] .hc-pdp-m1__acts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-pdp .hc-pdp[data-product-type="service"] .hc-pdp-m1__cta-primary {
  background: linear-gradient(135deg, #2b2218, #3f3022);
}

.page-pdp .hc-pdp[data-product-type="service"] .hc-pdp-m1__cta-outline {
  border-color: rgba(59, 45, 30, 0.26);
}

/* css/blocks/254-pdp-type-veneer.css */
/* =================== 254-pdp-type-veneer.css =================== */
/* Premium product page for «Шпонированный МДФ» (natural wood veneer): species-led
 * serif hero, warm-paper photo mount, natural-veneer narrative. Scoped strictly to
 * the veneer product type via the PDP root [data-product-type] — no leakage. */

/* ---- hero: eyebrow ---- */
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-vn__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-vn__leaf {
  width: 14px;
  height: 14px;
  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;
}

/* ---- hero: species title + descriptor ---- */
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-vn__species {
  margin: 7px 0 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--hc-ink, #1a1714);
}
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-vn__descriptor {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

/* ---- gallery: warm paper mount so white-bg veneer shots blend ---- */
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-gallery__main,
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-gallery__thumb {
  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%);
}
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-vn__gallery-note {
  margin: 12px 4px 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

/* ---- description lede: premium narrative ---- */
.hc-pdp[data-product-type="veneer_panel"] .hc-pdp-desc__lede {
  font-size: 16px;
  line-height: 1.66;
  color: var(--hc-ink-2, #3a3128);
}

@media (max-width: 600px) {
  .hc-pdp[data-product-type="veneer_panel"] .hc-pdp-vn__descriptor { font-size: 13.5px; }
}

/* css/blocks/248-services-crosslinks.css */
/* =================== services-crosslinks.css =================== */
/* Services pages and PDP/blog cross-link blocks. */

.services-hero,
.service-detail-hero {
  padding: 28px 0 18px;
  background: linear-gradient(180deg, var(--hc-paper) 0%, #f8f4ec 100%);
}

.services-hero__grid,
.service-detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 18px;
}

.services-hero__copy,
.service-detail-hero__copy {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: 34px;
  border: 1px solid rgba(141, 109, 71, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 60px -44px rgba(26, 23, 20, 0.28);
}

.services-hero__title,
.service-detail-hero__title {
  margin: 0;
  color: var(--hc-ink, #1a1714);
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.02;
}

.services-hero__text,
.service-detail-hero__text,
.service-card__text {
  margin: 0;
  color: rgba(26, 23, 20, 0.68);
  font-size: 16px;
  line-height: 1.55;
}

.services-hero__actions,
.service-detail-hero__actions,
.service-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.services-hero__img,
.service-detail-hero__img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(141, 109, 71, 0.22);
  background: #f8f4ec;
  box-shadow: 0 24px 60px -44px rgba(26, 23, 20, 0.28);
  filter: saturate(1.18) contrast(1.1);
}

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

.service-card {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(141, 109, 71, 0.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px -34px rgba(26, 23, 20, 0.24);
  overflow: hidden;
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease, background 0.26s ease;
  transform: translateZ(0);
}
/* premium hover: lift + warm glow (diz-grade) */
.service-card::before {
  content: "";
  position: absolute;
  inset: auto -10% -45% auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(199, 155, 96, 0.14), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(141, 109, 71, 0.30);
  box-shadow: 0 30px 56px -32px rgba(26, 23, 20, 0.36);
  background: linear-gradient(180deg, #fff, #faf7f1);
}
.service-card:hover::before { opacity: 1; transform: translateY(0); }

.service-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  background: #f5efe5;
}
/* animated icon badge on the media corner */
.service-card__iconbadge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--hc-accent, var(--hc-accent));
  background: rgba(255, 252, 247, 0.92);
  border: 1px solid rgba(141, 109, 71, 0.18);
  box-shadow: 0 8px 22px -14px rgba(26, 23, 20, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.26s ease, background 0.26s ease;
}
.service-card:hover .service-card__iconbadge {
  transform: translateY(-2px) scale(1.06);
  background: var(--hc-paper);
}

.service-card__img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  padding: 0;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card__img {
  transform: scale(1.04);
}

.service-card__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}


.service-card__title {
  margin: 0;
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

.service-card__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.service-card__steps span {
  padding: 6px 9px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 999px;
  background: #fbf7ef;
  color: rgba(26, 23, 20, 0.68);
  font-size: 12px;
}

.service-card__products {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(141, 109, 71, 0.18);
}

.service-card__product {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.service-card__product img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
  background: #fbf7ef;
}

.service-card__product span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-detail {
  display: grid;
  gap: 28px;
}

.service-detail__article {
  display: grid;
  gap: 18px;
  max-width: 980px;
}

.service-detail__body {
  color: rgba(26, 23, 20, 0.72);
  font-size: 19px;
  line-height: 1.65;
}

.service-detail__steps,
.pdp-service-links__grid,
.pdp-blog-links__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-detail__step,
.pdp-service-card,
.pdp-blog-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(141, 109, 71, 0.14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 38px -32px rgba(26, 23, 20, 0.24);
  color: inherit;
  text-decoration: none;
}

.service-detail__step span {
  color: #8d6d47;
  font-family: var(--hc-mono, monospace);
  letter-spacing: 0.12em;
}

.pdp-service-card__img,
.pdp-blog-card__img {
  display: block;
  width: 100%;
  height: 186px;
  min-height: 186px;
  max-height: 186px;
  object-fit: cover;
  border-radius: 10px;
  background: #f8f4ec;
  overflow: hidden;
}

.pdp-service-card__title,
.pdp-blog-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
}

.pdp-service-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: rgba(26, 23, 20, 0.66);
  font-size: 14px;
  line-height: 1.45;
}

.pdp-tag-products__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .services-hero__grid,
  .service-detail-hero__grid,
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .pdp-tag-products__grid,
  .pdp-service-links__grid,
  .pdp-blog-links__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .services-hero__copy,
  .service-detail-hero__copy {
    padding: 22px;
  }

  .services-hero__title,
  .service-detail-hero__title {
    font-size: 34px;
  }

  .services-hero__img,
  .service-detail-hero__img {
    min-height: 220px;
  }

  .service-card,
  .service-card__products,
  .service-detail__steps,
  .pdp-tag-products__grid,
  .pdp-service-links__grid,
  .pdp-blog-links__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── External service card (онлайн-раскрой → cut.holzcom-mebel.ru) ─── */
.service-card--external {
  position: relative;
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow: 0 2px 6px rgba(40, 30, 15, 0.05), 0 26px 50px -30px rgba(184, 154, 111, 0.45);
}
.service-card--external:hover {
  border-color: rgba(201, 169, 97, 0.78);
  transform: translateY(-4px);
}
.service-card__ext-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hc-gold), #b89a6f);
  color: #2a2018;
  font: 600 10.5px/1 var(--hc-sans, "Outfit", sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(184, 154, 111, 0.7);
}
.service-card__ext-badge::before {
  content: "";
  width: 11px;
  height: 11px;
  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' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%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' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/contain no-repeat;
}
a.service-card__ext-cta {
  background: linear-gradient(135deg, var(--hc-accent-dark, var(--hc-accent-dark)), #2a2018);
  color: #fff;
  border-color: transparent;
}
a.service-card__ext-cta:hover {
  background: linear-gradient(135deg, #6b5944, #1f1813);
}

/* css/blocks/271-page-pdp.css */
/* =================== page-pdp.css =================== */
/* Extracted from 125-hc-pdp-m1.css: page-level PDP helpers. */

/* ---- folded from 189-page-pdp.css ---- */
/* =================== page-pdp.css =================== */
.page-pdp .hc-pdp-engineer__grid a,
.page-pdp .hc-pdp-engineer__grid button {
  min-height: 76px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--sf-line);
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  gap: 2px;
  text-align: left;
}

.page-pdp .hc-pdp-engineer__grid b {
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  font-weight: 500;
  color: var(--sf-ink, var(--hc-ink, #1a1714));
}

.page-pdp .hc-pdp-engineer__grid span,
.page-pdp .hc-pdp-engineer__grid b {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-pdp .pdp-anchor-nav a {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 23, 20, 0.62);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.page-pdp .pdp-anchor-nav a:hover {
  color: var(--sf-ink, var(--hc-ink, #1a1714));
  border-bottom-color: rgba(180, 151, 115, 0.45);
}
.page-pdp .pdp-trust-strip__ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: var(--hc-accent-dark, #7a6548);
  background: rgba(var(--hc-gold-rgb), 0.16);
  transition: transform 0.24s ease, background 0.22s ease;
}
.page-pdp .pdp-trust-strip__item:hover .pdp-trust-strip__ico {
  transform: translateY(-1px) scale(1.05);
  background: rgba(var(--hc-gold-rgb), 0.26);
}
.page-pdp .pdp-trust-strip__item b {
  font-family: var(--hc-serif, 'Playfair Display', Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--sf-ink, var(--hc-ink, #1a1714));
  line-height: 1.25;
}
.page-pdp .pdp-trust-strip__item span {
  font-size: 12px;
  color: rgba(26, 23, 20, 0.60);
  line-height: 1.45;
}

/* folded from 198-pdp-anchor-nav.css */
.page-pdp .pdp-anchor-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 8px 0;
  margin: 0 0 22px;
  border-bottom: 1px solid rgba(180, 151, 115, 0.22);
  position: sticky;
  top: var(--hc-hdr-h, 72px);
  z-index: 8;
  background: rgba(248, 246, 243, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.page-pdp .pdp-anchor-nav a.is-active,
.page-pdp .pdp-anchor-nav a:target {
  color: var(--sf-ink, var(--hc-ink, #1a1714));
  border-bottom-color: var(--hc-accent, var(--hc-accent));
}

/* folded from 199-pdp-cta-row.css (page-scoped part only) */
.page-pdp .pdp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}

/* folded from 203-pdp-sec-title.css */
.page-pdp .pdp-sec-title {
  max-width: 16ch;
  margin-top: var(--hc-sp-1);
}

/* folded from 202-pdp-sec-block.css */
.page-pdp .pdp-sec-block { margin-top: clamp(42px, 5vw, 78px); }
.page-pdp .pdp-sec-block + .pdp-sec-block { margin-top: clamp(54px, 6.2vw, 96px); }
.page-pdp .pdp-sec-block--spacious { margin-top: clamp(62px, 7vw, 112px); }

.page-pdp .hc-pdp__grid > .pdp-anchor-nav { margin-bottom: 16px; }
.page-pdp .pdp-trust-strip { margin-top: clamp(32px, 4vw, 56px); }
.page-pdp .hc-pdp-m1__desc { margin-top: 12px; }
.page-pdp .hc-pdp-m1__why { margin-top: 16px; }
.page-pdp .hc-pdp-m1__why + .pdp-sec-block { margin-top: 20px; }

.page-pdp .pdp-analogs__grid,
.page-pdp .pdp-tag-products__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-pdp .pdp-analogs__grid > .pcard,
.page-pdp .pdp-tag-products__grid > .pcard {
  min-width: 0;
  max-width: 100%;
}

.page-pdp .pdp-analogs__grid .pcard[data-pcard-variant="c"] .pcard-shell,
.page-pdp .pdp-analogs__grid .pcard[data-pcard-variant="c"] .pcard-c__body,
.page-pdp .pdp-analogs__grid .pcard[data-pcard-variant="c"] .pcard-meta-row,
.page-pdp .pdp-analogs__grid .pcard[data-pcard-variant="c"] .pcard-title,
.page-pdp .pdp-analogs__grid .pcard[data-pcard-variant="c"] .pcard-caption,
.page-pdp .pdp-analogs__grid .pcard[data-pcard-variant="c"] .pcard-footer,
.page-pdp .pdp-tag-products__grid .pcard[data-pcard-variant="c"] .pcard-shell,
.page-pdp .pdp-tag-products__grid .pcard[data-pcard-variant="c"] .pcard-c__body,
.page-pdp .pdp-tag-products__grid .pcard[data-pcard-variant="c"] .pcard-meta-row,
.page-pdp .pdp-tag-products__grid .pcard[data-pcard-variant="c"] .pcard-title,
.page-pdp .pdp-tag-products__grid .pcard[data-pcard-variant="c"] .pcard-caption,
.page-pdp .pdp-tag-products__grid .pcard[data-pcard-variant="c"] .pcard-footer {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 920px) {
  .page-pdp .hc-pdp__grid > .pdp-anchor-nav { margin-bottom: 12px; }

  .page-pdp .pdp-analogs__grid,
  .page-pdp .pdp-tag-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .page-pdp .pdp-analogs__grid,
  .page-pdp .pdp-tag-products__grid {
    grid-template-columns: 1fr;
  }
}

/* folded from 204-pdp-trust-strip.css */
.page-pdp .pdp-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 24px);
  padding: clamp(18px, 2.3vw, 28px);
  margin: clamp(34px, 4vw, 58px) 0 clamp(34px, 4vw, 58px);
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.95), rgba(248, 244, 237, 0.86));
  border: 1px solid rgba(180, 151, 115, 0.22);
  border-radius: 18px;
}
@media (max-width: 760px)  {
  .page-pdp .pdp-trust-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-pdp .pdp-anchor-nav a {
    padding: 10px 12px;
    font-size: 12px;
  }
}
.page-pdp .pdp-trust-strip__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  min-height: 88px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 12px 28px -26px rgba(24, 18, 12, 0.42);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.page-pdp .pdp-trust-strip__item:hover,
.page-pdp .pdp-trust-strip__item:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(141, 109, 71, 0.34);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 24px 38px -28px rgba(24, 18, 12, 0.56);
}

.page-pdp .hc-recently-block {
  margin-bottom: clamp(54px, 7vw, 110px);
  min-width: 0;
  max-width: 100%;
}

.page-pdp .hc-recent {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.page-pdp .hc-recent__grid {
  min-width: 0;
  max-width: 100%;
}

.page-pdp .hc-recent__grid > .pcard[data-pcard-variant="mini"] {
  min-width: 0;
  max-width: 100%;
}

.page-pdp .hc-recent__head {
  display: flex;
  justify-content: flex-end;
  min-height: 32px;
}

.page-pdp .hc-recent__clear {
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(141, 109, 71, 0.24);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
  color: rgba(26, 23, 20, 0.72);
  font: 650 12px/1 var(--hc-sans, "Outfit", sans-serif);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.page-pdp .hc-recent__clear:hover,
.page-pdp .hc-recent__clear:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(141, 109, 71, 0.42);
  background: #fff;
  color: var(--hc-ink, #1a1714);
}

.page-pdp .pdp-product-rail--recent {
  margin-top: 0;
  margin-bottom: 0;
}

.page-pdp .pdp-product-rail--recent .pcard[data-pcard-variant="mini"] {
  min-height: 100%;
}

/* Leroy-style sticky bar: appears at the top once the buy-box scrolls away. */
.hc-pdp-sticky-dock {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: rgba(255, 252, 247, 0.97);
  border-bottom: 1px solid rgba(141, 109, 71, 0.2);
  box-shadow: 0 12px 34px -26px rgba(40, 30, 15, 0.5);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hc-pdp-sticky-dock.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hc-pdp-sticky-dock__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.hc-pdp-sticky-dock__lead {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.hc-pdp-sticky-dock__thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #fbf6ec, #ece0cc);
  border: 1px solid rgba(141, 109, 71, 0.16);
}
.hc-pdp-sticky-dock__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.hc-pdp-sticky-dock__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hc-pdp-sticky-dock__name {
  font: 600 15px/1.2 var(--hc-sans, "Outfit", sans-serif);
  color: var(--hc-ink, #1a1714);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.hc-pdp-sticky-dock__sku {
  font: 600 10px/1.1 var(--hc-mono, "JetBrains Mono", monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-pdp-sticky-dock__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
}
.hc-pdp-sticky-dock__nav a,
.hc-pdp-sticky-dock__nav button {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(26, 23, 20, 0.7);
  font: 600 13px/1 var(--hc-sans, "Outfit", sans-serif);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.hc-pdp-sticky-dock__nav a:hover,
.hc-pdp-sticky-dock__nav button:hover {
  background: rgba(141, 109, 71, 0.1);
  color: #1a1714;
}
.hc-pdp-sticky-dock__buy {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
@media (max-width: 1080px) {
  .hc-pdp-sticky-dock__nav { display: none; }
}
.hc-pdp-sticky-dock__price {
  font: 700 20px/1 var(--hc-serif, "Playfair Display", Georgia, serif);
  color: var(--hc-ink, #1a1714);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hc-pdp-sticky-dock__cta {
  min-height: 42px;
  padding: 0 22px;
  border-radius: 10px;
  border: 0;
  background: #15120f;
  color: #fff;
  font: 600 14px/1 var(--hc-sans, "Outfit", sans-serif);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.hc-pdp-sticky-dock__cta:hover { background: #000; transform: translateY(-1px); }
@media (max-width: 720px) {
  .hc-pdp-sticky-dock__sku { display: none; }
  .hc-pdp-sticky-dock__name { max-width: 40vw; font-size: 13px; }
  .hc-pdp-sticky-dock__thumb { width: 38px; height: 38px; }
  .hc-pdp-sticky-dock__price { font-size: 17px; }
  .hc-pdp-sticky-dock__cta { padding: 0 14px; min-height: 40px; }
  .hc-pdp-sticky-dock__buy { gap: 10px; }
}

/* The desktop purchase dock consumes almost a quarter of an iPhone viewport
   and covers tabs/content. The PDP already has its own mobile purchase flow. */
@media (max-width: 640px) {
  .hc-pdp-sticky-dock,
  .hc-pdp-sticky-dock.is-visible {
    display: none;
  }
}

/* css/blocks/272-hc-pdp-buybox-bar.css */
/* =================== hc-pdp-buybox-bar.css =================== */
/* PDP buy-box "checkout-bar" layout (V3, chosen by client). Extends
   125-hc-pdp-m1.css: horizontal price+qty+cart bar, chip tools, trust row.
   Scoped to .hc-pdp-m1__buy--bar. WDL tokens, no !important. */

.hc-pdp-m1__buy--bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}
.hc-pdp-m1__buy--bar .hc-pdp-m1__sku-row,
.hc-pdp-m1__buy--bar .hc-pdp-m1__stock { margin: 0; }

.hc-pdp-m1__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

/* price + qty + cart in one horizontal bar */
.hc-pdp-m1__bar {
  display: flex;
  align-items: center;
  gap: 14px 20px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  padding: 18px 20px;
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf9, var(--hc-bg-warm));
  box-shadow: 0 18px 40px -32px rgba(31, 23, 12, 0.4);
}
.hc-pdp-m1__bar-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.hc-pdp-m1__bar-price .hc-pdp-m1__price {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}
.hc-pdp-m1__bar-buy {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}
/* qty must never donate its width to the CTA (input overlapped "+") */
.hc-pdp-m1__bar-buy .hc-pdp-m1__qty { flex: 0 0 auto; }
.hc-pdp-m1__bar-buy .hc-pdp-m1__atc-form { flex: 0 0 auto; margin: 0; }
.hc-pdp-m1__bar-buy .hc-pdp-m1__cta-primary { min-height: 50px; padding: 0 30px; white-space: nowrap; }

/* secondary actions row: 1-click (stretch) + favorite (icon) */
.hc-pdp-m1__secondary {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}
.hc-pdp-m1__secondary .hc-pdp-m1__cta-outline { flex: 1; }
.hc-pdp-m1__fav {
  flex: 0 0 auto;
  width: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(141, 109, 71, 0.28);
  border-radius: 12px;
  background: #fff;
  color: var(--hc-accent, var(--hc-accent));
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.hc-pdp-m1__fav svg { width: 20px; height: 20px; }
.hc-pdp-m1__fav:hover { border-color: rgba(141, 109, 71, 0.5); transform: translateY(-1px); }
.hc-pdp-m1__fav.is-active,
.hc-pdp-m1__fav[aria-pressed="true"] {
  background: var(--hc-accent, var(--hc-accent));
  color: #fff;
  border-color: var(--hc-accent, var(--hc-accent));
}

/* tools as chips */
.hc-pdp-m1__tools--chips { display: flex; flex-direction: column; gap: 10px; }
.hc-pdp-m1__tools--chips .hc-pdp-m1__tools-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hc-pdp-m1__tools--chips .hc-pdp-m1__tool {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 14px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 14px;
  font-weight: 650;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.95), rgba(246, 239, 226, 0.78));
  border: 1px solid rgba(141, 109, 71, 0.24);
  color: var(--hc-ink, #1a1714);
  box-shadow: 0 10px 24px -24px rgba(24, 18, 12, 0.5);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hc-pdp-m1__tools--chips .hc-pdp-m1__tool:hover {
  background: linear-gradient(180deg, #fff, rgba(246, 239, 226, 0.9));
  border-color: rgba(199, 155, 96, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -24px rgba(24, 18, 12, 0.58);
}

/* notify — subtle full-width */
.hc-pdp-m1__notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(141, 109, 71, 0.2);
  border-radius: 12px;
  background: #fff;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.hc-pdp-m1__notify:hover { border-color: rgba(141, 109, 71, 0.4); color: var(--hc-ink, #1a1714); }
.hc-pdp-m1__notify .hc-pdp-m1__act-ico { display: inline-flex; }
.hc-pdp-m1__notify .hc-pdp-m1__act-ico svg { width: 18px; height: 18px; }

/* trust row */
.hc-pdp-m1__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(141, 109, 71, 0.14);
}
/* Teaser pills (.hc-trust = animated SVG icon + per-category text) are styled
   in 285-hc-trust-ico.css; the container above only handles layout. */

@media (max-width: 560px) {
  .hc-pdp-m1__bar { flex-direction: column; align-items: stretch; padding: 16px; }
  .hc-pdp-m1__bar-buy {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .hc-pdp-m1__bar-buy .hc-pdp-m1__atc-form { flex: 1; }
  .hc-pdp-m1__bar-buy .hc-pdp-m1__cta-primary { width: 100%; }
  .hc-pdp-microtrust { margin: 0; text-align: left; }
}

/* "Выведено из коллекции" — buy-box replacement for discontinued products
   (stock_status='discontinued'); the in-stock analogs render in #pdp-analogs. */
.pdp-discont {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(150, 90, 60, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #fbf3ea, #f3e3d3);
}
.pdp-discont__badge {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(150, 90, 60, 0.14);
  color: #8a4b2f;
  font: 600 11px/1 var(--hc-sans, "Outfit", sans-serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pdp-discont__title {
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 500;
  line-height: 1.12;
  color: var(--hc-ink, #1a1714);
}
.pdp-discont__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(26, 23, 20, 0.72);
}
.pdp-discont__cta {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
}
.pdp-discont__sku {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(141, 109, 71, 0.16);
}

.pdp-analogs { margin-top: clamp(20px, 3vw, 34px); }

/* css/blocks/295-pdp-service-upsell.css */
/* =================== 295-pdp-service-upsell.css =================== */
/* Inline buy-box "Добавить услугу" upsell — checkbox rows whose values are
   carried into the /cart/add form via hx-include="#pdp-upsell".
   Extends 125-hc-pdp-m1.css / 272-hc-pdp-buybox-bar.css. WDL tokens, no !important. */

.hc-pdp-upsell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf9, #f8f1e6);
}
.hc-pdp-upsell .hc-eyebrow {
  margin-bottom: 2px;
}

.hc-pdp-upsell__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.hc-pdp-upsell__row:hover {
  border-color: rgba(199, 155, 96, 0.5);
  transform: translateY(-1px);
}
.hc-pdp-upsell__row:has(.hc-pdp-upsell__cb:checked) {
  border-color: var(--hc-accent, var(--hc-accent));
  background: linear-gradient(180deg, #fff, rgba(246, 239, 226, 0.7));
}

/* real checkbox: visually hidden, kept accessible + focusable */
.hc-pdp-upsell__cb {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hc-pdp-upsell__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1.6px solid rgba(141, 109, 71, 0.4);
  border-radius: 6px;
  background: #fff;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.hc-pdp-upsell__box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -1px);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.hc-pdp-upsell__cb:checked + .hc-pdp-upsell__box {
  background: var(--hc-accent, var(--hc-accent));
  border-color: var(--hc-accent, var(--hc-accent));
}
.hc-pdp-upsell__cb:checked + .hc-pdp-upsell__box::after { opacity: 1; }
.hc-pdp-upsell__cb:focus-visible + .hc-pdp-upsell__box {
  outline: 2px solid rgba(199, 155, 96, 0.7);
  outline-offset: 2px;
}

.hc-pdp-upsell__name {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 14px/1.25 var(--hc-sans, "Outfit", sans-serif);
  color: var(--hc-ink, #1a1714);
}
.hc-pdp-upsell__price {
  flex: 0 0 auto;
  font: 700 14px/1 var(--hc-sans, "Outfit", sans-serif);
  color: var(--hc-accent, var(--hc-accent));
  white-space: nowrap;
}

@media (max-width: 560px) {
  .hc-pdp-upsell { padding: 12px; }
  .hc-pdp-upsell__name { font-size: 13.5px; }
}

/* css/blocks/308-ldsp-pdp-tools.css */
/* "Под задачу" chips in the LDSP product buy box.
 *
 * One block, described once. The other theme's chips live in 125-hc-pdp-m1.css
 * under .hc-pdp-m1__tool*; those selectors are scoped to .hc-pdp and never
 * match here, so nothing is overridden and nothing needs to be — this file is
 * the only place .ldsp-pdp-tools* is defined.
 *
 * Two shapes, both explicit modifiers, never one restyled into the other:
 *   __link — an external service (the online cut at cut.holzcom-mebel.ru)
 *   __btn  — opens the lead modal
 */

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__label {
  color: var(--ldsp-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The external one leads off the row on its own line: it leaves the site, and
   a link that leaves the site should not look like the buttons that do not. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__link {
  display: inline-flex;
  flex: 1 0 100%;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--ldsp-blue);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: var(--ldsp-mist);
  border: 1px solid rgba(47, 99, 214, 0.28);
  border-radius: var(--ldsp-radius);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__link:hover {
  color: #fff;
  background: var(--ldsp-blue);
  border-color: var(--ldsp-blue-dark);
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__ext {
  flex: none;
  width: 15px;
  height: 15px;
  transition: transform 0.18s ease;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__link:hover .ldsp-pdp-tools__ext {
  transform: translate(2px, -2px);
}

/* 44px minimum on the tap target: the buy box is the part of the page a phone
   actually uses, and these sit directly under the cart button. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--ldsp-ink);
  font: inherit;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: var(--ldsp-radius);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__btn:hover {
  color: var(--ldsp-blue);
  border-color: var(--ldsp-blue);
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__link:focus-visible,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tools__btn:focus-visible {
  outline: 2px solid var(--ldsp-blue);
  outline-offset: 2px;
}

/* css/blocks/310-ldsp-pdp-rails.css */
/* Column counts for the product rails on a card — «Похожие товары»,
 * «Покупают вместе», «Вы смотрели». They render the same tile in the same
 * grid, so the count is decided here once for all three.
 *
 * Its own file rather than another block in the theme: the theme is the
 * layout, this is one component, and the theme has a size budget the visual
 * contract enforces.
 */

/* Fixed counts, not auto-fit.
 *
 * auto-fit with a 240px minimum lays as many tracks as fit and then stretches
 * the filled ones over the rest: on a 1920px screen four products came out
 * 452px wide each — a card at twice the size it needs, with three empty tracks
 * beside it. The rails carry four to eight items, so the column count is a
 * decision, not something to derive from the width. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-showcase .ldsp-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Wide screens have room for the donor-like denser rail: five visible cards
   keep PDP recommendations compact instead of growing oversized tiles. */
@media (min-width: 1600px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-showcase .ldsp-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-showcase .ldsp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-showcase .ldsp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Вы смотрели» is a single row that scrolls, not a grid that wraps.
 *
 * It holds up to eight items and, unlike the other two rails, its contents are
 * whatever this visitor happened to open — so a second row of leftovers reads
 * as clutter rather than as a selection. One row, swiped or scrolled, with the
 * tiles wide enough to stay legible: the grid is overridden here rather than
 * given a modifier upstream because the rail is the thing that differs, not
 * the tile. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-recent .ldsp-product-grid {
  --rail-gap: 1px;
  --rail-per-view: 4;
  grid-auto-flow: column;
  /* Ширина колонки — доля видимой части, а не заданное число пикселей. С
     minmax(232px, 1fr) семь плиток по 280 не помещались в 1814, и последняя
     обрывалась на 127-м пикселе: карточка, разрезанная краем панели, читается
     как поломка, а не как «дальше есть ещё». Теперь в видимой части всегда
     целое число карточек, а остальные приходят прокруткой. */
  grid-auto-columns: calc((100% - (var(--rail-per-view) - 1) * var(--rail-gap)) / var(--rail-per-view));
  grid-template-columns: none;
  gap: var(--rail-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: thin;
}
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-recent .ldsp-product-tile {
  scroll-snap-align: start;
}
/* Столько же карточек, сколько у соседних лент на той же ширине: «Вы
   смотрели» отличается прокруткой, а не плотностью. */
@media (min-width: 1600px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-recent .ldsp-product-grid { --rail-per-view: 5; }
}
@media (max-width: 1100px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-recent .ldsp-product-grid { --rail-per-view: 3; }
}
@media (max-width: 760px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-recent .ldsp-product-grid { --rail-per-view: 2; }
}

/* css/blocks/311-ldsp-pdp-facts.css */
/* Delivery, payment and pickup under the short specification list.
 *
 * The middle column of a product card holds the specifications, and on a
 * product with seven of them it ran out a few hundred pixels above the buy box
 * beside it — a white gap in the middle of the page. These three lines are the
 * questions that follow "подходит ли": they answer them where the decision is
 * made, and they repeat what the delivery section further down already says
 * rather than introducing anything new.
 *
 * Its own file, its own namespace; nothing here overrides another block.
 */

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts {
  display: grid;
  gap: 2px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: var(--ldsp-radius);
}

/* One rounded stack rather than three separate cards: the column above it is a
   single table, and three floating boxes read as three unrelated offers. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts li + li {
  margin-top: -1px;
}
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts li:not(:first-child):not(:last-child) {
  border-radius: 0;
}
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts li:first-child {
  border-radius: var(--ldsp-radius) var(--ldsp-radius) 0 0;
}
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts li:last-child {
  border-radius: 0 0 var(--ldsp-radius) var(--ldsp-radius);
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts__ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ldsp-blue);
  background: var(--ldsp-mist);
  border-radius: 50%;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts__ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts b {
  display: block;
  color: var(--ldsp-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-facts small {
  display: block;
  margin-top: 2px;
  color: var(--ldsp-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* css/blocks/315-ldsp-pdp-description.css */
/* Описание товара на карточке.
 *
 * Раздел появился, когда выяснилось, что текст лежит в базе у 7 089 товаров и
 * не печатается ни на одной странице. Оформление повторяет соседний блок
 * характеристик — тот же заголовок, тот же отступ сверху, — чтобы страница не
 * распадалась на два разных по виду куска.
 *
 * Текст донорский: внутри встречаются <p>, <ul>, <table>, <img>. Поэтому
 * правила заданы для содержимого блока, а не для абстрактных элементов
 * страницы.
 */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description { margin-top: 40px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description h2 { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body { max-width: 900px; color: #354052; font-size: 15px; line-height: 1.65; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body > :first-child { margin-top: 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body > :last-child { margin-bottom: 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body p { margin: 0 0 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body h2,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body h3,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body h4 { margin: 22px 0 10px; color: var(--ldsp-blue); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body ul,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body ol { margin: 0 0 14px; padding-left: 22px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body li { margin-bottom: 6px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body a { color: var(--ldsp-blue); text-decoration: underline; }
/* Донорская вёрстка приносит таблицы шире колонки — прокрутка у таблицы, а не
   у страницы. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body table { display: block; width: 100%; margin: 0 0 14px; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body td,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body th { padding: 8px 12px; border: 1px solid var(--ldsp-line); text-align: left; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__body img { max-width: 100%; height: auto; border-radius: 8px; }
/* Список фактов у товаров без своего текста: пара «свойство — значение»
   вместо перечисления через запятую. Маркеров нет — это не перечень доводов,
   а короткая выжимка карточки. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__facts { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__facts li { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 12px; margin: 0; padding: 7px 0; border-bottom: 1px dashed var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__facts li:last-child { border-bottom: 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__facts strong { color: var(--ldsp-muted); font-weight: 400; }
@media (max-width: 720px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-description__facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}