/*
 * pillows-headboard.css — страница «Калькулятор ткани для подушек и изголовья». copyright salonoboev.com
 * Подключается после sobc-base.css. Все правила начинаются с .sobc--pillows-headboard.
 */

.sobc--pillows-headboard {
  --sobc-ph-front: #51738f;
  --sobc-ph-back: #7f9bb2;
  --sobc-ph-half: #a9bccb;
  --sobc-ph-piping: #0e7e99;
  --sobc-ph-hb-front: #1a3f5d;
  --sobc-ph-hb-back: #c5d0d9;
  --sobc-ph-red: #e01b2d;
  --sobc-ph-figure: #e6eaee;
  --sobc-ph-figure-line: #8796a3;
}

/* ---------- Вступление ---------- */

.sobc--pillows-headboard .sobc-ph-intro {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Нумерация шагов (скрытые шаги не считаются) ---------- */

.sobc--pillows-headboard .sobc-ph__form {
  counter-reset: sobc-ph-step;
}

.sobc--pillows-headboard .sobc-ph__step {
  counter-increment: sobc-ph-step;
}

.sobc--pillows-headboard .sobc-ph__step .sobc-section__num::before {
  content: counter(sobc-ph-step);
}

/* ---------- Иконки вариантов ---------- */

.sobc--pillows-headboard .sobc-ph-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sobc--pillows-headboard .sobc-ph-icon__dot {
  fill: currentColor;
  stroke: none;
}

.sobc--pillows-headboard .sobc-ph__modes {
  grid-template-columns: minmax(0, 1fr);
}

.sobc--pillows-headboard .sobc-ph__modes .sobc-option__box {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}

.sobc--pillows-headboard .sobc-ph__modes .sobc-option__icon {
  grid-row: 1 / span 2;
  margin: 0;
}

.sobc--pillows-headboard .sobc-ph__modes .sobc-option__meta {
  margin-top: 0;
}

/* ---------- Размеры, застёжки, чекбоксы ---------- */

.sobc--pillows-headboard .sobc-ph__sizes .sobc-option__box {
  min-width: 64px;
  align-items: center;
  text-align: center;
}

.sobc--pillows-headboard .sobc-ph__closures .sobc-option {
  flex: 1 1 100%;
}

.sobc--pillows-headboard .sobc-fieldset .sobc-hint {
  margin-top: 8px;
}

.sobc--pillows-headboard .sobc-ph__checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.sobc--pillows-headboard .sobc-check__text .sobc-muted {
  font-size: 13px;
}

.sobc--pillows-headboard .sobc-ph__thickness {
  margin-top: 14px;
  align-items: end;
}

.sobc--pillows-headboard .sobc-ph__thickness-hint {
  margin: 0;
  align-self: center;
}

.sobc--pillows-headboard .sobc-field--disabled .sobc-label,
.sobc--pillows-headboard .sobc-field--disabled .sobc-unit {
  opacity: 0.55;
}

.sobc--pillows-headboard .sobc-ph__step .sobc-actions {
  margin-top: 18px;
}

/* ---------- Результат ---------- */

.sobc--pillows-headboard .sobc-ph-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sobc--pillows-headboard .sobc-ph-stats .sobc-stat {
  padding: 9px 10px;
}

.sobc--pillows-headboard .sobc-ph-stats .sobc-stat__value {
  font-size: 18px;
}

.sobc--pillows-headboard .sobc-ph-breakdown__row--total {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px dashed var(--sobc-line);
}

.sobc--pillows-headboard .sobc-ph-breakdown__row--total .sobc-breakdown__name,
.sobc--pillows-headboard .sobc-ph-breakdown__row--total .sobc-breakdown__value {
  font-weight: 500;
  color: var(--sobc-primary-dark);
}

.sobc--pillows-headboard .sobc-ph-explain {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--sobc-white);
  border-radius: var(--sobc-radius-small);
}

.sobc--pillows-headboard .sobc-ph-explain__title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sobc-heading);
}

.sobc--pillows-headboard .sobc-ph-steps {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sobc-text);
}

.sobc--pillows-headboard .sobc-ph-steps__item {
  margin: 0;
  padding: 2px 0;
}

.sobc--pillows-headboard .sobc-ph-steps__item::marker {
  color: var(--sobc-primary);
  font-weight: 500;
}

/* ---------- Схема раскроя ---------- */

.sobc--pillows-headboard .sobc-ph-cut {
  margin: 28px 0 0;
}

.sobc--pillows-headboard .sobc-ph-cut__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sobc-heading);
  text-align: left;
}

.sobc--pillows-headboard .sobc-ph-cut__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sobc--pillows-headboard .sobc-ph-cut__svg {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  overflow: visible;
}

.sobc--pillows-headboard .sobc-ph-cut__roll {
  fill: #fafafa;
  stroke: #c9c9c9;
  stroke-width: 0.6;
  stroke-dasharray: 2 1.5;
}

.sobc--pillows-headboard .sobc-ph-cut__piece {
  stroke: var(--sobc-white);
  stroke-width: 0.4;
  transition: opacity 0.15s ease;
}

.sobc--pillows-headboard .sobc-ph-cut__item:hover .sobc-ph-cut__piece {
  opacity: 0.82;
}

.sobc--pillows-headboard .sobc-ph-cut__item--pillow-front .sobc-ph-cut__piece {
  fill: var(--sobc-ph-front);
}

.sobc--pillows-headboard .sobc-ph-cut__item--pillow-back .sobc-ph-cut__piece {
  fill: var(--sobc-ph-back);
}

.sobc--pillows-headboard .sobc-ph-cut__item--pillow-half .sobc-ph-cut__piece {
  fill: var(--sobc-ph-half);
}

.sobc--pillows-headboard .sobc-ph-cut__item--piping .sobc-ph-cut__piece {
  fill: var(--sobc-ph-piping);
}

.sobc--pillows-headboard .sobc-ph-cut__item--hb-front .sobc-ph-cut__piece {
  fill: var(--sobc-ph-hb-front);
}

.sobc--pillows-headboard .sobc-ph-cut__item--hb-back .sobc-ph-cut__piece {
  fill: var(--sobc-ph-hb-back);
}

.sobc--pillows-headboard .sobc-ph-cut__label {
  font-family: var(--sobc-font);
  font-weight: 500;
  fill: var(--sobc-white);
  pointer-events: none;
}

.sobc--pillows-headboard .sobc-ph-cut__label--dim {
  font-weight: 400;
  fill: rgba(255, 255, 255, 0.85);
}

.sobc--pillows-headboard .sobc-ph-cut__item--pillow-half .sobc-ph-cut__label,
.sobc--pillows-headboard .sobc-ph-cut__item--hb-back .sobc-ph-cut__label {
  fill: var(--sobc-primary-dark);
}

.sobc--pillows-headboard .sobc-ph-cut__axis,
.sobc--pillows-headboard .sobc-ph-cut__tick {
  stroke: #9a9a9a;
  stroke-width: 0.5;
}

.sobc--pillows-headboard .sobc-ph-cut__ruler {
  font-family: var(--sobc-font);
  fill: var(--sobc-muted);
}

.sobc--pillows-headboard .sobc-ph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sobc-text);
}

.sobc--pillows-headboard .sobc-ph-legend:empty {
  display: none;
}

.sobc--pillows-headboard .sobc-ph-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.sobc--pillows-headboard .sobc-ph-legend__swatch {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--sobc-ph-front);
}

.sobc--pillows-headboard .sobc-ph-legend__swatch--pillow-back {
  background: var(--sobc-ph-back);
}

.sobc--pillows-headboard .sobc-ph-legend__swatch--pillow-half {
  background: var(--sobc-ph-half);
}

.sobc--pillows-headboard .sobc-ph-legend__swatch--piping {
  background: var(--sobc-ph-piping);
}

.sobc--pillows-headboard .sobc-ph-legend__swatch--hb-front {
  background: var(--sobc-ph-hb-front);
}

.sobc--pillows-headboard .sobc-ph-legend__swatch--hb-back {
  background: var(--sobc-ph-hb-back);
}

/* ---------- Статья ---------- */

.sobc--pillows-headboard .sobc-article {
  margin: 20px 0 30px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
  background: var(--sobc-white);
  border-radius: var(--sobc-radius);
  box-shadow: var(--sobc-shadow);
}

.sobc--pillows-headboard .sobc-article p {
  margin: 0 0 12px;
  line-height: 1.6;
}

.sobc--pillows-headboard .sobc-article__h2 {
  margin: 30px 0 14px;
  padding: 0;
  font-family: var(--sobc-font);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sobc-heading);
  text-align: center;
  text-transform: none;
  background: none;
}

.sobc--pillows-headboard .sobc-article__h2::before,
.sobc--pillows-headboard .sobc-article__h2::after {
  content: none;
  display: none;
}

.sobc--pillows-headboard .sobc-article .sobc-article__h2:first-child {
  margin-top: 0;
}

.sobc--pillows-headboard .sobc-article .sobc-table-wrap {
  margin: 16px 0 12px;
}

.sobc--pillows-headboard .sobc-article .sobc-table tbody th {
  font-weight: 500;
  white-space: nowrap;
  background: var(--sobc-white);
}

.sobc--pillows-headboard .sobc-article .sobc-table tbody tr:nth-child(even) th {
  background: #fafafa;
}

.sobc--pillows-headboard .sobc-article .sobc-table-wrap + .sobc-ph-table-note {
  margin: -4px 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sobc-muted);
}

.sobc--pillows-headboard .sobc-ph-measure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 20px;
  margin: 6px 0 4px;
}

.sobc--pillows-headboard .sobc-ph-measure__item {
  margin: 10px 0;
}

.sobc--pillows-headboard .sobc-ph-measure .sobc-figure__media {
  background: #fbfbfb;
}

.sobc--pillows-headboard .sobc-ph-fig {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.sobc--pillows-headboard .sobc-ph-fig__body {
  fill: var(--sobc-ph-figure);
  stroke: var(--sobc-ph-figure-line);
  stroke-width: 2;
  stroke-linejoin: round;
}

.sobc--pillows-headboard .sobc-ph-fig__seam {
  fill: none;
  stroke: var(--sobc-ph-figure-line);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}

.sobc--pillows-headboard .sobc-ph-fig__dot {
  fill: var(--sobc-ph-figure-line);
}

.sobc--pillows-headboard .sobc-ph-fig__ext {
  fill: none;
  stroke: #b5b5b5;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.sobc--pillows-headboard .sobc-ph-fig__arrow {
  fill: none;
  stroke: var(--sobc-ph-red);
  stroke-width: 2;
}

.sobc--pillows-headboard .sobc-ph-fig__head {
  fill: var(--sobc-ph-red);
}

.sobc--pillows-headboard .sobc-ph-fig__plate {
  fill: var(--sobc-primary);
}

.sobc--pillows-headboard .sobc-ph-fig__plate-text {
  font-family: var(--sobc-font);
  font-size: 14px;
  font-weight: 500;
  fill: var(--sobc-white);
  text-anchor: middle;
}

.sobc--pillows-headboard .sobc-ph-fig__note {
  font-family: var(--sobc-font);
  font-size: 12px;
  fill: var(--sobc-muted);
  text-anchor: middle;
}

.sobc--pillows-headboard .sobc-faq {
  margin: 0;
  border-top: 1px solid var(--sobc-line-soft);
}

.sobc--pillows-headboard .sobc-faq__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--sobc-line-soft);
}

.sobc--pillows-headboard .sobc-faq__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sobc--pillows-headboard .sobc-faq__q {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--sobc-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sobc-heading);
  text-align: left;
  text-transform: none;
  background: none;
}

.sobc--pillows-headboard .sobc-article .sobc-faq__a {
  margin: 0;
}

/* ---------- Телефон: таблица карточками ---------- */

@media (max-width: 767.98px) {
  .sobc--pillows-headboard .sobc-table--stack tbody th {
    display: block;
    padding: 8px 12px 4px;
    text-align: left;
    color: var(--sobc-heading);
    background: transparent;
  }

  .sobc--pillows-headboard .sobc-table--stack tbody th::before {
    content: none;
    display: none;
  }

  .sobc--pillows-headboard .sobc-article .sobc-table tbody tr:nth-child(even) th {
    background: transparent;
  }
}

/* ---------- ≥ 480px ---------- */

@media (min-width: 480px) {
  .sobc--pillows-headboard .sobc-article {
    padding: 20px;
  }

  .sobc--pillows-headboard .sobc-ph__closures .sobc-option {
    flex: 1 1 0;
  }
}

/* ---------- ≥ 768px ---------- */

@media (min-width: 768px) {
  .sobc--pillows-headboard .sobc-ph-intro,
  .sobc--pillows-headboard .sobc-article {
    font-size: 15px;
  }

  .sobc--pillows-headboard .sobc-article {
    padding: 24px 28px;
  }

  .sobc--pillows-headboard .sobc-ph__modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sobc--pillows-headboard .sobc-ph__modes .sobc-option__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sobc--pillows-headboard .sobc-ph__modes .sobc-option__icon {
    margin: 0 0 8px;
  }

  .sobc--pillows-headboard .sobc-ph__modes .sobc-option__meta {
    margin-top: 2px;
  }

  .sobc--pillows-headboard .sobc-article__h2 {
    margin: 36px 0 18px;
    font-size: 23px;
  }

  .sobc--pillows-headboard .sobc-ph-measure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sobc--pillows-headboard .sobc-faq__q {
    font-size: 17px;
  }
}

/* ---------- ≥ 992px ---------- */

@media (min-width: 992px) {
  .sobc--pillows-headboard .sobc-ph-intro,
  .sobc--pillows-headboard .sobc-article {
    font-size: 16px;
  }

  .sobc--pillows-headboard .sobc-article {
    padding: 28px 40px 32px;
  }

  .sobc--pillows-headboard .sobc-ph__thickness {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

@media print {
  .sobc--pillows-headboard .sobc-article {
    margin: 10px 0;
    padding: 12px;
    box-shadow: none;
    border: 1px solid #cccccc;
  }

  .sobc--pillows-headboard .sobc-ph-cut__svg {
    break-inside: avoid;
  }
}