/* Раскладка страниц каталога (catalog.html) и карточки товара (product.html). Только сетки и отступы — компоненты в components.css. */

/* ================= Категория ================= */
.page-hero .chips { margin-top: 22px; }
.cat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.cat-side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: var(--gap); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; scrollbar-width: thin; }
.cat-help { display: grid; gap: 12px; }
.cat-help p { font-size: var(--fs-xs); }
.cat-main { display: grid; gap: var(--sp-7); min-width: 0; }
.cat-block > h2 { font-size: var(--fs-h4); margin-bottom: 14px; }
.cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.cat-tiles .tile { min-height: 240px; }
.cat-seo { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .cat-main .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  .cat-side { position: static; max-height: none; overflow: visible; order: 2; }
}
@media (max-width: 640px) { .cat-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cat-main .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ================= Карточка товара ================= */
.pdp-top { padding-top: var(--sp-6); }
.pdp-top .crumbs { margin-bottom: var(--sp-6); }
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pdp-media { position: sticky; top: calc(var(--header-h) + 16px); }
.pdp-info { display: grid; gap: var(--sp-6); min-width: 0; }
.pdp-head { display: grid; gap: 12px; }
.pdp-head .cluster { gap: 8px 14px; }
.pdp-title { font-size: var(--fs-h1-long); line-height: 1.12; letter-spacing: -.03em; }
.pdp-type { font-size: var(--fs-lead); color: var(--ink-2); }
.pdp-summary { font-size: var(--fs-sm); }
.pdp-summary.prose { max-width: none; }
.pdp-buy { display: grid; gap: var(--sp-5); padding: clamp(18px, 2vw, 26px); border-radius: var(--r-m); background: var(--surface); }
.pdp-buy .cluster { gap: 12px 20px; }
.pdp-buy-note { font-size: var(--fs-xs); color: var(--ink-3); }
.pdp-part > h2 { font-family: var(--font-b); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.pdp-more { margin-top: 12px; font-size: 14px; }
.pdp-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.pdp-meta { display: grid; gap: 10px; font-size: var(--fs-xs); color: var(--ink-3); }
.pdp-meta > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pdp-meta a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.pdp-meta a:hover { color: var(--accent); }
.pdp-meta .chips { gap: 6px; }
@media (max-width: 1000px) {
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .pdp-media { position: static; }
}
@media (max-width: 560px) { .pdp-meta > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Вкладки описания */
.pdp-tabs .tabs-panel { padding-top: var(--sp-7); }
.pdp-doc { display: grid; gap: var(--sp-8); }
.pdp-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.pdp-lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 72ch; padding: clamp(18px, 2vw, 26px); border-radius: var(--r-m); background: var(--surface); }
.pdp-sec { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-4) var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.pdp-sec--wide { grid-template-columns: minmax(0, 1fr); }
.pdp-sec > h3 { font-size: var(--fs-h4); line-height: 1.25; }
.pdp-sec > div { display: grid; gap: var(--sp-5); min-width: 0; }
.pdp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pdp-cards .card h3 { font-size: var(--fs-h4); margin-bottom: 12px; }
.pdp-cards .prose { font-size: var(--fs-sm); }
.pdp-cards .prose p { color: var(--ink); font-size: inherit; }
.pdp-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); align-items: start; }
.pdp-specs > .pdp-wide { grid-column: 1 / -1; }
.pdp-drawing { border-radius: var(--r-m); background: var(--surface); padding: clamp(14px, 2vw, 28px); }
.pdp-drawing img { margin-inline: auto; width: 100%; max-width: 1100px; mix-blend-mode: multiply; }
@media (max-width: 820px) {
  .pdp-sec { grid-template-columns: minmax(0, 1fr); }
  .pdp-cards, .pdp-specs, .pdp-intro { grid-template-columns: minmax(0, 1fr); }
}