/* ================================
   Steel&Spark Studio — Catalog Page Sections
   ================================ */

/* Shared section styles (локально для 2-й страницы) */

.ss-section {
  padding: 72px 0;
  position: relative;
}

.ss-section-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-color-metal-soft);
}

.ss-section-title {
  margin: 0 0 12px;
  font-family: "SSDisplay", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--ss-color-metal);
}

.ss-section-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ss-color-ink-soft);
}

.ss-section-text--compact {
  max-width: 520px;
}

/* ================================
   Section 1 — Catalog hero
   ================================ */

.sc-hero {
  background: radial-gradient(circle at 0 0, #fff7ea 0, #f5f2ec 45%, #ece7de 100%);
  border-bottom: 1px solid var(--ss-color-line);
}

.sc-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.sc-hero-title {
  font-size: clamp(24px, 2.8vw, 32px);
}

.sc-hero-lead {
  max-width: 580px;
}

.sc-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}

.sc-hero-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.9);
  border: 1px solid rgba(194, 106, 58, 0.35);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ss-color-metal-soft);
}

.sc-hero-note {
  font-size: 13px;
  color: var(--ss-color-ink-soft);
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(245, 242, 236, 0.9);
  border: 1px dashed rgba(62, 67, 76, 0.2);
}

/* Hero gallery */

.sc-hero-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-right: 6px;
}

.sc-hero-card {
  position: relative;
  width: min(100%, 340px);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.75), rgba(240, 233, 223, 0.98));
  box-shadow: var(--ss-shadow-subtle);
  padding: 8px;
  overflow: hidden;
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}

.sc-hero-card img {
  width: 100%;
  max-width: 340px; /* <= 350px */
  border-radius: 18px;
}

.sc-hero-card--top {
  transform: translateX(-6px) rotate(-2deg);
}
.sc-hero-card--middle {
  transform: translateX(4px) rotate(1.5deg);
}
.sc-hero-card--bottom {
  transform: translateX(-2px) rotate(-1deg);
}

.sc-hero-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 48px rgba(10, 12, 20, 0.28);
}

.sc-hero-label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(21, 22, 30, 0.82);
  color: #fff7ed;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ================================
   Section 2 — Category strip
   ================================ */

.sc-categories {
  background: #f5f2ec;
}

.sc-cat-head {
  max-width: 620px;
  margin-bottom: 18px;
}

.sc-cat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sc-cat-item {
  border-radius: 20px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.sc-cat-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
  background: #ebe5da;
  box-shadow: 0 8px 20px rgba(10, 12, 20, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-cat-icon img {
  width: 100%;
  height: 100%;
  max-width: 64px; /* << 350px */
  object-fit: cover;
}

.sc-cat-item--decor .sc-cat-icon {
  display: none;
}

.sc-cat-item--decor {
  grid-template-columns: minmax(0, 1fr);
}

.sc-cat-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #ffe4c5 0, #c26a3a 55%, #3e434c 100%);
  box-shadow: 0 0 18px rgba(194, 106, 58, 0.8);
}

.sc-cat-title {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--ss-color-metal);
}

.sc-cat-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Section 3 — Highlighted pieces
   ================================ */

.sc-highlight {
  background: linear-gradient(180deg, #f5f2ec 0, #f3efe7 48%, #f5f2ec 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-highlight-head {
  max-width: 620px;
  margin-bottom: 18px;
}

.sc-highlight-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-highlight-list {
  display: grid;
  gap: 10px;
}

.sc-high-item {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.12);
}

.sc-high-title {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--ss-color-metal);
}

.sc-high-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* Highlight gallery */

.sc-highlight-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-highlight-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.75), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-highlight-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-highlight-photo--front {
  z-index: 2;
}

.sc-highlight-photo--back {
  transform: translateX(-12px) translateY(-6px);
  opacity: 0.9;
}

/* ================================
   Responsive — sections 1–3
   ================================ */

@media (max-width: 1024px) {
  .sc-hero-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 28px;
  }

  .sc-highlight-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
  }

  .sc-cat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .sc-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-hero-gallery {
    margin-top: 18px;
    align-items: center;
    padding-right: 0;
  }

  .sc-hero-card {
    width: min(100%, 320px);
  }

  .sc-hero-card img {
    max-width: 320px;
  }

  .sc-hero-card--top,
  .sc-hero-card--middle,
  .sc-hero-card--bottom {
    transform: translateX(0) rotate(0);
  }

  .sc-cat-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-highlight-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-highlight-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-highlight-photo {
    width: min(100%, 300px);
  }

  .sc-highlight-photo img {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  .ss-section {
    padding: 56px 0;
  }

  .sc-cat-item {
    padding: 8px 10px;
  }

  .sc-high-item {
    padding: 8px 10px;
  }
}
/* ================================
   Section 4 — Wall systems catalog
   ================================ */

.sc-wall-sets {
  background: linear-gradient(180deg, #f5f2ec 0, #f2eee7 45%, #f5f2ec 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-wall-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-wall-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.sc-wall-gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.sc-wall-photo {
  position: relative;
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.75), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-wall-photo img {
  width: 100%;
  max-width: 330px; /* <= 350px */
  border-radius: 18px;
}

.sc-wall-photo--main::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -40px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  border: 1px dashed rgba(194, 106, 58, 0.6);
  opacity: 0.6;
}

.sc-wall-side {
  display: grid;
  gap: 8px;
}

/* ================================
   Section 5 — Tables & consoles
   ================================ */

.sc-tables {
  background: #f5f2ec;
  border-top: 1px solid var(--ss-color-line);
}

.sc-tables-head {
  max-width: 640px;
  margin-bottom: 18px;
}

.sc-tables-board {
  display: grid;
  gap: 12px;
}

.sc-table-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 10px 12px;
  border-radius: 20px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  align-items: center;
}

.sc-table-photo {
  width: 108px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  background: #ebe5da;
  box-shadow: 0 10px 22px rgba(10, 12, 20, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-table-photo img {
  width: 100%;
  height: 100%;
  max-width: 108px; /* << 350px */
  object-fit: cover;
}

.sc-table-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-table-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.sc-table-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.9);
  border: 1px solid rgba(194, 106, 58, 0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ss-color-metal-soft);
}

.sc-table-size {
  font-size: 12px;
  color: var(--ss-color-ink-soft);
}

.sc-table-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Section 6 — Bar & cafe line
   ================================ */

.sc-bar {
  background: linear-gradient(180deg, #f5f2ec 0, #f3efe7 50%, #f5f2ec 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-bar-head {
  max-width: 640px;
  margin-bottom: 18px;
}

.sc-bar-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sc-bar-card {
  border-radius: 20px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.sc-bar-photo {
  border-radius: var(--ss-radius-md);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 6px;
}

.sc-bar-photo img {
  width: 100%;
  max-width: 260px; /* <= 350px */
  border-radius: 14px;
  display: block;
  margin: 0 auto;
}

.sc-bar-title {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--ss-color-metal);
}

.sc-bar-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

/* ================================
   Responsive — sections 4–6
   ================================ */

@media (max-width: 1024px) {
  .sc-wall-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
  }

  .sc-bar-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .sc-wall-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-wall-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-bar-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-table-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-table-photo {
    width: 100%;
    max-width: 260px;
    height: 150px;
  }

  .sc-table-photo img {
    max-width: 260px;
  }
}

@media (max-width: 600px) {
  .sc-wall-list {
    font-size: 12px;
  }

  .sc-table-row {
    padding: 8px 10px;
  }

  .sc-bar-card {
    padding: 8px 10px;
  }
}
/* ================================
   Section 7 — Room sets grid
   ================================ */

.sc-roomsets {
  background: radial-gradient(circle at 0 100%, #fff7ea 0, #f5f2ec 45%, #ece7de 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-roomsets-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-roomsets-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.sc-roomsets-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-roomsets-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.75), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-roomsets-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-roomsets-photo--living {
  transform: translateX(-8px);
  z-index: 2;
}

.sc-roomsets-photo--bedroom {
  transform: translateX(4px) translateY(-6px);
  opacity: 0.94;
}

/* ================================
   Section 8 — Joinery & details
   ================================ */

.sc-details {
  background: #f5f2ec;
  border-top: 1px solid var(--ss-color-line);
}

.sc-details-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-details-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sc-details-item {
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px dashed rgba(62, 67, 76, 0.3);
}

.sc-details-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.sc-details-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.sc-details-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-details-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-details-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-details-photo--front {
  z-index: 2;
}

.sc-details-photo--back {
  transform: translateX(-12px) translateY(-6px);
  opacity: 0.92;
}

/* ================================
   Section 9 — Small spaces showcase
   ================================ */

.sc-smallspaces {
  background: linear-gradient(180deg, #f5f2ec 0, #f3efe7 50%, #f5f2ec 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-small-head {
  max-width: 640px;
  margin-bottom: 18px;
}

.sc-small-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-small-lines {
  display: grid;
  gap: 10px;
}

.sc-small-line {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.sc-small-m2 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ss-color-metal-soft);
}

.sc-small-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.sc-small-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-small-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-small-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-small-photo--main {
  z-index: 2;
}

.sc-small-photo--balcony {
  transform: translateX(-12px) translateY(-4px);
  opacity: 0.93;
}

/* ================================
   Responsive — sections 7–9
   ================================ */

@media (max-width: 1024px) {
  .sc-roomsets-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
  }

  .sc-details-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .sc-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-small-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .sc-roomsets-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-roomsets-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-roomsets-photo {
    width: min(100%, 300px);
  }

  .sc-roomsets-photo img {
    max-width: 300px;
  }

  .sc-details-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-details-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-details-photo {
    width: min(100%, 300px);
  }

  .sc-details-photo img {
    max-width: 300px;
  }

  .sc-details-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-small-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-small-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-small-photo {
    width: min(100%, 300px);
  }

  .sc-small-photo img {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  .sc-roomsets-list {
    font-size: 12px;
  }

  .sc-details-item {
    padding: 8px;
  }

  .sc-small-line {
    padding: 8px 9px;
  }

  .sc-small-text {
    font-size: 12px;
  }
}
/* ================================
   Section 10 — Size & finish options
   ================================ */

.sc-config {
  background: #f5f2ec;
  border-top: 1px solid var(--ss-color-line);
}

.sc-config-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-config-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 8px;
}

.sc-config-chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.96);
  border: 1px solid rgba(194, 106, 58, 0.42);
  font-size: 11px;
  color: var(--ss-color-metal-soft);
}

.sc-config-note {
  font-size: 13px;
}

.sc-config-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-config-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-config-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-config-photo--swatches {
  transform: translateX(-6px);
  z-index: 2;
}

.sc-config-photo--sizes {
  transform: translateX(4px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 11 — Ready bundles
   ================================ */

.sc-bundles {
  background: linear-gradient(180deg, #f5f2ec 0, #f3efe7 50%, #f5f2ec 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-bundles-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-bundles-board {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.sc-bundle-line {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.sc-bundle-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ss-color-metal-soft);
}

.sc-bundle-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.sc-bundles-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-bundles-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-bundles-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-bundles-photo--living {
  z-index: 2;
}

.sc-bundles-photo--cafe {
  transform: translateX(-12px) translateY(-6px);
  opacity: 0.93;
}

/* ================================
   Section 12 — Decor micro-catalog
   ================================ */

.sc-decor {
  background: radial-gradient(circle at 100% 100%, #fff7ea 0, #f5f2ec 45%, #ece7de 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-decor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-decor-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.sc-decor-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-decor-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-decor-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-decor-photo--tray {
  z-index: 2;
}

.sc-decor-photo--lamp {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 10–12
   ================================ */

@media (max-width: 1024px) {
  .sc-config-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }

  .sc-bundles-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }

  .sc-decor-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 880px) {
  .sc-config-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-config-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-config-photo {
    width: min(100%, 300px);
  }

  .sc-config-photo img {
    max-width: 300px;
  }

  .sc-bundles-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-bundles-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-bundles-photo {
    width: min(100%, 300px);
  }

  .sc-bundles-photo img {
    max-width: 300px;
  }

  .sc-decor-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-decor-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-decor-photo {
    width: min(100%, 300px);
  }

  .sc-decor-photo img {
    max-width: 300px;
  }
}

@media (max-width: 600px) {
  .sc-bundle-line {
    padding: 8px;
  }

  .sc-decor-list {
    font-size: 12px;
  }
}
/* ================================
   Section 13 — Materials & sourcing
   ================================ */

.sc-materials {
  background: linear-gradient(180deg, #f5f2ec 0, #f2eee7 50%, #f5f2ec 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-materials-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-materials-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sc-materials-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
}

.sc-materials-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.sc-materials-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.sc-materials-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-materials-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-materials-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-materials-photo--stack {
  z-index: 2;
}

.sc-materials-photo--fabric {
  transform: translateX(-12px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 14 — Catalog timeline
   ================================ */

.sc-timeline {
  background: #f5f2ec;
  border-top: 1px solid var(--ss-color-line);
}

.sc-timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-timeline-steps {
  margin-top: 12px;
  position: relative;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.sc-timeline-steps::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(62, 67, 76, 0.12), rgba(194, 106, 58, 0.6));
}

.sc-timeline-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.sc-timeline-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(253, 247, 237, 0.95);
  border: 1px solid rgba(194, 106, 58, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ss-color-metal);
}

.sc-timeline-text {
  margin: 0;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.sc-timeline-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-timeline-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-timeline-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-timeline-photo--drawing {
  z-index: 2;
}

.sc-timeline-photo--pack {
  transform: translateX(-12px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 15 — Tech spec preview
   ================================ */

.sc-specs {
  background: linear-gradient(180deg, #f5f2ec 0, #f3efe7 50%, #f5f2ec 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-specs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-specs-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.sc-specs-item {
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px dashed rgba(62, 67, 76, 0.3);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.sc-specs-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ss-color-metal-soft);
}

.sc-specs-text {
  margin: 0;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.sc-specs-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-specs-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-specs-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-specs-photo--page {
  z-index: 2;
}

.sc-specs-photo--icons {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 16 — Catalog FAQ
   ================================ */

.sc-catalog-faq {
  background: #f5f2ec;
  border-top: 1px solid var(--ss-color-line);
}

.sc-catalog-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-catalog-faq-items {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.sc-catalog-faq-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(245, 242, 236, 0.96);
  border: 1px solid rgba(62, 67, 76, 0.14);
}

.sc-catalog-faq-q {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--ss-color-metal);
}

.sc-catalog-faq-a {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ss-color-ink-soft);
}

.sc-catalog-faq-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-catalog-faq-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-catalog-faq-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-catalog-faq-photo--corner {
  z-index: 2;
}

.sc-catalog-faq-photo--hands {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Section 17 — Final catalog CTA
   ================================ */

.sc-finalcall {
  background: radial-gradient(circle at 100% 0, #fff7ea 0, #f5f2ec 45%, #ece7de 100%);
  border-top: 1px solid var(--ss-color-line);
}

.sc-finalcall-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.sc-finalcall-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ss-color-ink-soft);
}

.sc-finalcall-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sc-finalcall-gallery {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: flex-end;
}

.sc-finalcall-photo {
  position: relative;
  width: min(100%, 320px);
  border-radius: var(--ss-radius-lg);
  background: linear-gradient(145deg, rgba(245, 242, 236, 0.8), rgba(240, 233, 223, 0.98));
  padding: 8px;
  box-shadow: var(--ss-shadow-subtle);
  overflow: hidden;
}

.sc-finalcall-photo img {
  width: 100%;
  max-width: 320px; /* <= 350px */
  border-radius: 18px;
}

.sc-finalcall-photo--mood {
  z-index: 2;
}

.sc-finalcall-photo--corner {
  transform: translateX(-10px) translateY(-4px);
  opacity: 0.94;
}

/* ================================
   Responsive — sections 13–17
   ================================ */

@media (max-width: 1024px) {
  .sc-materials-layout,
  .sc-timeline-layout,
  .sc-specs-layout,
  .sc-catalog-faq-layout,
  .sc-finalcall-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
  }

  .sc-materials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .sc-materials-layout,
  .sc-timeline-layout,
  .sc-specs-layout,
  .sc-catalog-faq-layout,
  .sc-finalcall-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-materials-gallery,
  .sc-timeline-gallery,
  .sc-specs-gallery,
  .sc-catalog-faq-gallery,
  .sc-finalcall-gallery {
    justify-items: center;
    margin-top: 10px;
  }

  .sc-materials-photo,
  .sc-timeline-photo,
  .sc-specs-photo,
  .sc-catalog-faq-photo,
  .sc-finalcall-photo {
    width: min(100%, 300px);
  }

  .sc-materials-photo img,
  .sc-timeline-photo img,
  .sc-specs-photo img,
  .sc-catalog-faq-photo img,
  .sc-finalcall-photo img {
    max-width: 300px;
  }

  .sc-materials-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .sc-materials-item {
    padding: 8px;
  }

  .sc-timeline-text,
  .sc-specs-text,
  .sc-catalog-faq-a {
    font-size: 12px;
  }

  .sc-finalcall-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}