/* 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(auto-fill, minmax(200px, 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;
}

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

/* 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;
  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, #fffdf8, #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, #fffdf8 0%, #f6efe2 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. No variant 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 =================== */
/* 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(139, 115, 85, 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(--c-accent-warm, #8b7355);
}
.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(212, 184, 150, 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(--c-accent-warm, #8b7355); }

/* ---- 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(139, 115, 85, 0.07);
  border: 1px solid rgba(139, 115, 85, 0.16);
  white-space: nowrap;
}
.pcard--type-veneer_panel .pcard-vn__chip--grade {
  font-weight: 600;
  color: #7a5e22;
  background: linear-gradient(180deg, rgba(212, 184, 150, 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, #fffdf8 0%, #f6efe2 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 0 auto;
  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: wrap;
  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;
}

.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, #fffdf8 0%, #f6efe2 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, #fffdf8 0%, #f6efe2 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;
}

.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, #fffdf8 0%, #f6efe2 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/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(212, 184, 150, 0.32), rgba(212, 184, 150, 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(212, 184, 150, 0.42)); display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 8px rgba(139, 115, 85, 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(980px, 100%);
  max-height: calc(100dvh - 64px);
  overflow: hidden;
  border-radius: var(--sf-radius-xl, 24px);
  border: 1px solid rgba(224, 210, 190, 0.9);
  background: var(--hc-paper, #fffaf2);
  box-shadow: 0 34px 90px rgba(26, 23, 20, 0.28);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hc-qv__ship {
  align-self: start;
}

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

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

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

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

  .hc-qv__body {
    grid-template-columns: 1fr;
    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__specs {
    order: 7;
  }

  .hc-qv__assurance {
    order: 5;
  }

  .hc-qv__buy {
    order: 6;
  }

  .hc-qv__ship {
    order: 8;
  }

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

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

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

/* 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;
    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, #d4b896), var(--hc-accent, #8b7355));
  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 h4 {
  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 h4 {
  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, #d4b896), var(--hc-accent, #8b7355));
  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(212, 184, 150, 0.14);
  color: var(--hc-ink, #1a1714);
}
.hc-cat-filters__cat.hc-chip--active,
.hc-cat-filters__cat[aria-current="true"] {
  background: rgba(212, 184, 150, 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(212, 184, 150, 0.14);
}
.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, #5d4d3a);
}
.hc-cat-filters__facet input[type="checkbox"]:checked,
.hc-cat-filters__facet .hc-checkbox:checked {
  background: linear-gradient(135deg, var(--hc-gold-1, #d4b896), var(--hc-accent, #8b7355));
  border-color: var(--hc-accent-dark, #5d4d3a);
}
.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, #8b7355);
  box-shadow: 0 0 0 3px rgba(212, 184, 150, 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(212, 184, 150, 0.14), rgba(184, 154, 111, 0.06));
  border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 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, #5d4d3a);
}
.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, #5d4d3a);
  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);
}

/* 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(212, 184, 150, 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;
}
.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);
}

/* 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(212, 184, 150, 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);
  }
}

@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, #d4b896), #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; }

/* 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); background: linear-gradient(135deg,var(--hc-paper),var(--hc-paper-2))}
.hc-cat-postgrid__grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--hc-sp-3)}
.hc-cat-postgrid__title {margin-top: var(--hc-sp-1)}
.hc-cat-postgrid__muted {margin-top: 6px}
.hc-cat-postgrid__cta-wrap {display: flex; align-items: 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(212, 184, 150, 0.14), rgba(212, 184, 150, 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, #d4b896), var(--hc-accent, #8b7355));
  border-radius: 999px;
  pointer-events: none;
}

.hc-price-slider__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  border: 0;
  outline: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.hc-price-slider__thumb::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  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: 14px;
  height: 14px;
  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/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(212, 184, 150, 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(139, 115, 85, 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(139, 115, 85, 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: 7px 16px 7px 7px;
  border: 1px solid rgba(139, 115, 85, 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: 36px;
  height: 36px;
  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(139, 115, 85, 0.14);
}

.hc-subcat__ic-fb {
  width: 19px;
  height: 19px;
  color: var(--c-accent-warm, #8b7355);
}

.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: 32px; height: 32px; }
}

/* 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(212, 184, 150, 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, #5d4d3a);
}

.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, #5d4d3a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.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(212, 184, 150, 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, #5d4d3a);
}

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