/* One spacing and alignment system for the homepage and every catalog. */
:root {
  --ap-content-width: 1296px;
  --ap-content-gutter: max(clamp(18px, 5vw, 72px), calc((100cqw - var(--ap-content-width)) / 2));
  --ap-section-space: clamp(32px, 4vw, 52px);
}

html:has(.redesign-hero),
html:has(.redesign-category) { container-type: inline-size; }

html:has(.redesign-hero) .wrap,
html:has(.redesign-category) .wrap {
  padding-inline: var(--ap-content-gutter);
}

/* Full-width color bands share the exact same inner edges as the content grid. */
html:has(.redesign-hero) .redesign-hero,
html:has(.redesign-hero) .redesign-works,
html:has(.redesign-hero) .redesign-stand-cta,
html:has(.redesign-hero) #reviews,
html:has(.redesign-hero) #quote,
html:has(.redesign-hero) #contacts,
html:has(.redesign-category) .category-hero,
html:has(.redesign-category) .press-quote {
  box-sizing: border-box;
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
  padding-inline: var(--ap-content-gutter);
}

/* Keep adjacent sections connected; their breathing room lives inside each band. */
html:has(.redesign-hero) #catalog {
  margin-top: 0;
  padding-block: var(--ap-section-space);
}

html:has(.redesign-hero) .redesign-works {
  margin-block: 0;
  padding-block: var(--ap-section-space);
}

html:has(.redesign-hero) .redesign-stand-cta {
  margin-block: 0;
  padding-block: clamp(28px, 4vw, 52px);
}

html:has(.redesign-hero) #reviews,
html:has(.redesign-hero) #quote,
html:has(.redesign-hero) #contacts,
html:has(.redesign-category) .press-quote {
  margin-block: 0;
  padding-block: var(--ap-section-space);
}

html:has(.redesign-hero) #reviews { background: var(--ap-paper); }
html:has(.redesign-hero) #quote,
html:has(.redesign-category) .press-quote { background: var(--ap-surface); }

html:has(.redesign-hero) #contacts {
  background: var(--ap-dark);
  box-shadow: none;
  clip-path: none;
}

/* Align heading groups and keep the catalog tiles on a single grid. */
#catalog .catalog-intro {
  margin: 0 0 clamp(18px, 2vw, 26px);
  gap: 12px clamp(18px, 3vw, 40px);
}

#catalog .catalog-intro h2,
.redesign-works h2,
.reviews-heading h2,
#quote h2,
#contacts h2,
.catalog-page .redesign-models-heading h2,
.catalog-page .press-quote h2 {
  margin-top: 0;
}

#catalog .category-index {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

#catalog .category-card {
  height: 100%;
  min-width: 0;
}

.redesign-work-grid { align-items: start; row-gap: clamp(14px, 2vw, 26px); }
.redesign-work img { aspect-ratio: 4 / 3; }
.redesign-works h2 { margin-bottom: clamp(18px, 2vw, 24px); }
.redesign-works .portfolio-open { margin-top: 20px; }

.catalog-page .redesign-models-heading {
  margin-top: var(--ap-section-space);
}

.catalog-page .redesign-category .product-grid {
  align-items: stretch;
}

.catalog-page .redesign-category .product {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.catalog-page .redesign-category .product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.catalog-page .redesign-category .model-order { margin-top: auto; }

/* Compact product cards while keeping the full construction visible. */
.catalog-page .redesign-category .product-grid .product-art {
  aspect-ratio: 5 / 3;
}

.catalog-page .redesign-category .product-body {
  padding: clamp(14px, 1.6vw, 20px);
}

.catalog-page .redesign-category .product-body h3 {
  min-height: 0;
  margin: 0 0 6px;
  font-size: clamp(22px, 1.8vw, 24px);
  line-height: 1.25;
}

.catalog-page .redesign-category .product-body .model-summary {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
}

.catalog-page .redesign-category .product-body .spec,
.catalog-page .redesign-category .product-body .product-measurements {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}

.catalog-page .redesign-category .model-order {
  padding-top: 12px;
}

.catalog-page .redesign-category .model-price {
  margin-bottom: 0;
}

/* Keep each product price and its existing action aligned at the card foot. */
.catalog-page .redesign-category .model-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line, #d8d0be);
  padding-top: 12px;
}

/* Product copy stays clean; the single divider belongs above the price row. */
.catalog-page .redesign-category .product-body > .spec,
.catalog-page .redesign-category .product-body > .product-measurements {
  border-top: 0;
}

.catalog-page .redesign-category .product-body details {
  border: 0;
  padding: 0;
}

.catalog-page .redesign-category .product-body .model-summary {
  color: #625b51;
  font-weight: 400;
}

/* Pop Up Classic has two price-table actions instead of a price row. */
.catalog-page .redesign-category .pop-up-price-links {
  box-sizing: border-box;
  width: 100%;
  border-top: 1px solid var(--line, #d8d0be);
  padding-top: 12px;
}

.catalog-page .redesign-category .model-price {
  flex: 0 1 auto;
  margin: 0;
}

.catalog-page .redesign-category .model-quote {
  flex: 0 0 auto;
  background-color: #DFE68F;
  border-color: #DFE68F;
  color: #292D26;
}

@media (max-width: 840px) {
  :root { --ap-section-space: 28px; }

  html:has(.redesign-hero) .redesign-hero {
    margin-bottom: 0;
  }

  html:has(.redesign-hero) .redesign-works {
    padding-block: var(--ap-section-space);
  }

  html:has(.redesign-hero) .redesign-stand-cta {
    gap: 16px;
    padding-block: 28px;
  }

  html:has(.redesign-hero) #reviews,
  html:has(.redesign-hero) #quote,
  html:has(.redesign-hero) #contacts,
  html:has(.redesign-category) .press-quote {
    padding-block: var(--ap-section-space);
  }

  #catalog .catalog-intro { margin-bottom: 16px; }
  .redesign-work-grid { row-gap: 14px; }
  .redesign-works h2 { margin-bottom: 18px; }
  html:has(.redesign-hero) #quote { gap: 16px; }

  .catalog-page .redesign-category .product-grid {
    gap: 16px;
  }

  .catalog-page .redesign-models-heading { margin-top: 32px; }
}

@media (max-width: 620px) {
  :root { --ap-section-space: 24px; }
  #catalog .category-index { gap: 12px; }
  #catalog .category-card .product-body { padding: 12px; }
  #catalog .category-card h3 { font-size: clamp(15px, 4vw, 18px); }
  #catalog .category-card .spec { font-size: 12px; }
  .redesign-works h2 { margin-bottom: 16px; }

  .catalog-page .redesign-category .product-body {
    padding: 14px;
  }
}