/* «Мягкая стена к этой кровати» — 11.10.2026 («Дизайн»), сборка tools/wall-upsell.py.
   Колонки 38,2 : 61,8, кадр 1,618 : 1, отступы 8/13/21/34/55/89. Темы — как у «Похожих моделей». */
:root {
  --sfw-bg: #17100B; --sfw-card: #1C140F; --sfw-strong: #F5ECE2; --sfw-nav: #CFC3B4; --sfw-muted: #A08E7C;
  --sfw-line: rgba(200,118,60,.18); --sfw-accent: #C8763C; --sfw-shadow: 0 34px 89px rgba(0,0,0,.45);
}
html[data-theme="light"] {
  --sfw-bg: #EFE6DA; --sfw-card: #FFFFFF; --sfw-strong: #20150E; --sfw-nav: #4A3A2E; --sfw-muted: #6E5B4B;
  --sfw-line: rgba(140,85,40,.18); --sfw-shadow: 0 34px 89px rgba(60,35,20,.14);
}
.sfw { position: relative; background: var(--sfw-bg); border-top: 1px solid var(--sfw-line); padding: 89px 0; font-family: 'Onest', system-ui, sans-serif; overflow: hidden; }
.sfw::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 61.8% 61.8% at 76% 50%, rgba(200,118,60,.10), transparent 70%); }
.sfw-in { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 34px; display: grid;
  grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); grid-template-areas: "txt vis" "act vis"; column-gap: 55px; align-items: start; }
.sfw-txt { grid-area: txt; align-self: end; padding-top: 21px; }
.sfw-vis { grid-area: vis; }
.sfw-act { grid-area: act; }
.sfw-k { display: block; font: 400 11px/1 'Onest', sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--sfw-accent); }
.sfw-h { margin: 21px 0 0; font: 300 clamp(28px, 3.1vw, 44px)/1.14 'Unbounded', sans-serif; letter-spacing: -.01em; color: var(--sfw-strong); text-transform: none; }
.sfw-h em { font-style: normal; color: var(--sfw-accent); }
.sfw-ld { margin: 21px 0 0; font: 300 17px/1.7 'Onest', sans-serif; color: var(--sfw-nav); max-width: 34em; }
.sfw-ld b { font-weight: 400; color: var(--sfw-strong); }
.sfw-facts { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--sfw-line); }
.sfw-facts li { display: flex; align-items: baseline; gap: 21px; padding: 13px 0; border-bottom: 1px solid var(--sfw-line); }
.sfw-facts b { flex: 0 0 38.2%; font: 300 18px/1.3 'Unbounded', sans-serif; color: var(--sfw-strong); white-space: nowrap; }
.sfw-facts span { font: 300 14px/1.5 'Onest', sans-serif; color: var(--sfw-muted); }
.sfw-btns { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.sfw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 55px; padding: 0 34px; border-radius: 999px;
  font: 400 15px/1 'Onest', sans-serif; text-decoration: none; border: 1px solid var(--sfw-accent); transition: background .3s ease, color .3s ease, transform .3s ease; }
.sfw-btn.is-p { background: var(--sfw-accent); color: #fff; }
.sfw-btn.is-p:hover { background: #B5662F; transform: translateY(-2px); }
.sfw-btn.is-g { background: transparent; color: var(--sfw-strong); border-color: var(--sfw-line); }
.sfw-btn.is-g:hover { border-color: var(--sfw-accent); color: var(--sfw-accent); }
.sfw-note { margin: 21px 0 0; font: 300 13px/1.6 'Onest', sans-serif; color: var(--sfw-muted); }

.sfw-stage { position: relative; aspect-ratio: 1.618 / 1; border-radius: 21px; overflow: hidden; background: var(--sfw-card); box-shadow: var(--sfw-shadow); }
.sfw-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  opacity: 0; transform: scale(1.04); transition: opacity 1s ease, transform 8s cubic-bezier(.2,.7,.2,1); }
.sfw-stage img.on { opacity: 1; transform: scale(1); }
.sfw-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38.2%; pointer-events: none;
  background: linear-gradient(to top, rgba(15,10,8,.72), transparent); }
.sfw-lab { position: absolute; z-index: 2; left: 21px; top: 21px; padding: 5px 13px; border-radius: 999px; background: rgba(15,10,8,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 11px 'Onest', sans-serif; letter-spacing: .04em; color: #F5ECE2; }
.sfw-cap { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 21px; display: flex; align-items: baseline; justify-content: space-between; gap: 13px; color: #F5ECE2; }
.sfw-cap b { font: 300 21px/1.2 'Unbounded', sans-serif; }
.sfw-cap a { font: 400 13px 'Onest', sans-serif; color: #F5ECE2; text-decoration: none; border-bottom: 1px solid rgba(245,236,226,.45); padding-bottom: 2px; white-space: nowrap; }
.sfw-cap a:hover { color: var(--sfw-accent); border-color: var(--sfw-accent); }
.sfw-pats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; margin-top: 21px; }
.sfw-pat { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--sfw-muted); font: 400 12px/1.3 'Onest', sans-serif; }
.sfw-pat i { display: block; aspect-ratio: 1 / 1; border-radius: 13px; overflow: hidden; border: 1px solid var(--sfw-line); transition: border-color .3s ease, transform .3s ease; }
.sfw-pat i img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sfw-pat:hover i { transform: translateY(-3px); }
.sfw-pat.on { color: var(--sfw-strong); }
.sfw-pat.on i { border-color: var(--sfw-accent); box-shadow: 0 0 0 1px var(--sfw-accent); }

/* подсказка в конфигураторе */
.sfw-tip { display: flex; align-items: center; gap: 13px; margin: 0 0 21px; padding: 13px; border-radius: 13px; text-decoration: none;
  border: 1px solid var(--sfw-line); background: linear-gradient(100deg, rgba(200,118,60,.10), transparent 61.8%); transition: border-color .3s ease; }
.sfw-tip:hover { border-color: var(--sfw-accent); }
.sfw-tip img { flex: none; width: 55px; height: 55px; border-radius: 8px; object-fit: cover; object-position: 50% 30%; }
.sfw-tip span { display: flex; flex-direction: column; gap: 3px; min-width: 0; font: 300 13px/1.45 'Onest', sans-serif; color: var(--sfw-nav); }
.sfw-tip b { font: 400 14px/1.3 'Onest', sans-serif; color: var(--sfw-strong); }

.sfw-tip { align-items: stretch; padding: 0; }
.sfw-tip-l { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; padding: 13px; text-decoration: none; }
.sfw-tip u { text-decoration: none; color: var(--sfw-accent); }
.sfw-chk { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 13px; border-left: 1px solid var(--sfw-line);
  font: 400 13px 'Onest', sans-serif; color: var(--sfw-strong); cursor: pointer; user-select: none; }
.sfw-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sfw-chk i { width: 21px; height: 21px; border-radius: 6px; border: 1px solid var(--sfw-accent); display: grid; place-items: center; transition: background .2s ease; }
.sfw-chk i::after { content: ""; width: 10px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity .2s ease; }
.sfw-chk input:checked + i { background: var(--sfw-accent); }
.sfw-chk input:checked + i::after { opacity: 1; }
.sfw-chk input:focus-visible + i { outline: 2px solid var(--sfw-accent); outline-offset: 2px; }
.sfw-tip.is-on { border-color: var(--sfw-accent); }
.sfw-add { display: inline; margin: 0 8px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 13px/1.6 'Onest', sans-serif; color: var(--sfw-accent); border-bottom: 1px solid rgba(200,118,60,.45); }
.sfw-add:hover { border-bottom-color: var(--sfw-accent); }
@keyframes sfw-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,118,60,0); } 30% { box-shadow: 0 0 0 5px rgba(200,118,60,.35); } }
.sfw-tip.is-flash { animation: sfw-flash 1.2s ease 2; }
@media (max-width: 1023px) {
  .sfw { padding: 55px 0; }
  .sfw-in { grid-template-columns: 1fr; grid-template-areas: "txt" "vis" "act"; padding: 0 21px; }
  .sfw-txt { padding: 0 0 34px; }
  .sfw-act { padding-top: 13px; }
}
@media (max-width: 700px) {
  .sfw-in { padding: 0 16px; }
  .sfw-stage { aspect-ratio: 1 / 1; border-radius: 13px; }
  .sfw-cap { left: 21px; right: 21px; }
  .sfw-cap b { font-size: 17px; }
  .sfw-pats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sfw-ld { font-size: 15px; }
  .sfw-facts b { font-size: 15px; }
  .sfw-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .sfw-stage img { transition: opacity .3s ease; transform: none; } }
/* 14.10: шаг «Мягкие стеновые панели» в конфигураторе кровати + SB-370 строкой (tools/bed-wall-step.py) */
.sfw-sb { margin: 8px 2px 0; font: 300 12.5px/1.55 'Onest', sans-serif; color: var(--sfw-muted); }
.sfw-sb a, .sfw-step-a { color: var(--sfw-accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sfw-step { margin-top: 21px; padding: 13px; border: 1px solid rgba(200,118,60,.45); border-radius: 8px;
  background: linear-gradient(135deg, rgba(200,118,60,.10), rgba(200,118,60,.02)); }
.sfw-step.is-on { border-color: var(--sfw-accent); }
.sfw-step.is-flash { animation: sfw-flash 1.2s ease 2; }
.sfw-step-hd { display: flex; gap: 13px; align-items: center; margin-bottom: 13px; }
.sfw-step-pics { display: flex; flex: none; }
.sfw-step-pics img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sfw-card); margin-left: -10px; }
.sfw-step-pics img:first-child { margin-left: 0; }
.sfw-step-k { font: 400 14px/1.3 'Onest', sans-serif; color: var(--sfw-strong); }
.sfw-step-t { font: 300 12.5px/1.45 'Onest', sans-serif; color: var(--sfw-muted); margin-top: 3px; }
.sfw-step-a { display: inline-block; margin-top: 13px; font: 300 12.5px 'Onest', sans-serif; }