/* Настенный перекидной — превью на стене */
.calc-client-layout--wall-cal {
  display: grid;
  gap: 20px;
}
@media (min-width: 992px) {
  .calc-client-layout--wall-cal {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }
  .wc-preview {
    order: 0;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--cmykos-topbar-h, 56px) + 12px);
  }
  .calc-client-layout--wall-cal > .calc-client-form {
    grid-column: 1;
    grid-row: 1;
  }
}

.wc-preview-card-wrap {
  background: var(--ds-surface, #fff);
  border: 1px solid var(--ds-border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.wc-preview-title {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0 0 10px;
}

.wc-preview-stage {
  --wc-w: 168px;
  --wc-h: 236px;
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #d7e0ec;
  gap: 8px;
}

.wc-wall {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 30%),
    repeating-linear-gradient(
      90deg,
      #d0dbe8 0,
      #d0dbe8 1px,
      #dde5ef 1px,
      #dde5ef 26px
    ),
    #d7e0ec;
  pointer-events: none;
}

.wc-canvas {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  width: 100%;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 38px 36px 28px;
}

/* Ригель + пружина + лист — один узел, без щели в потоке */
.wc-hang {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: var(--wc-w);
  padding-top: 18px;
  transition: width 0.28s ease;
}

.wc-hook {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  z-index: 8;
  pointer-events: none;
}
.wc-hook i {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border: 0;
  border-radius: 50%;
  background: #7d8694;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.35);
}

.wc-riegel {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 9px;
  height: 9px;
  z-index: 7;
  pointer-events: none;
}
.wc-riegel-bar {
  display: block;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d8dde4, #9aa3b0 55%, #7d8694);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}
.wc-riegel-loop {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 10px;
  margin-left: -7px;
  border: 2px solid #8b93a0;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.wc-flipped {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 6px;
  height: 12px;
  z-index: 4;
  pointer-events: none;
}
.wc-flipped i {
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  border-radius: 2px 2px 0 0;
  background: #eef2f7;
  border: 1px solid #c5ceda;
  transform-origin: 50% 100%;
}
.wc-flipped i:nth-child(1) { top: 5px; transform: rotate(-3deg); }
.wc-flipped i:nth-child(2) { top: 2px; transform: rotate(2.4deg); opacity: 0.85; }
.wc-flipped i:nth-child(3) { top: 0; transform: rotate(-1deg); opacity: 0.7; }

.wc-spring {
  position: absolute;
  left: -3px;
  right: -3px;
  top: 16px;
  height: 10px;
  z-index: 9;
  margin: 0;
  border-radius: 999px;
  background:
    radial-gradient(
      closest-side circle at 50% 45%,
      #f8fafc 0 55%,
      #94a3b8 58%,
      transparent 62%
    )
    0 50% / 7px 10px repeat-x;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(15, 23, 42, 0.2),
    0 1px 2px rgba(15, 23, 42, 0.2);
  pointer-events: none;
}
.wc-preview[data-spring="color"] .wc-spring,
.wc-preview[data-spring="black"] .wc-spring {
  background:
    radial-gradient(
      closest-side circle at 50% 45%,
      #5b6472 0 55%,
      #1f2430 58%,
      transparent 62%
    )
    0 50% / 7px 10px repeat-x;
}

.wc-stack {
  position: relative;
  width: 100%;
  height: var(--wc-h);
  flex-shrink: 0;
  transition: height 0.28s ease;
}

.wc-backing {
  position: absolute;
  inset: 4px -5px -6px 5px;
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(180deg, #c5b8a4, #a89880);
  box-shadow: 2px 4px 10px rgba(15, 23, 42, 0.22);
}
.wc-preview[data-backing="0"] .wc-backing { display: none; }

.wc-fan i {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: calc(var(--wc-h) - 8px);
  border-radius: 0 0 3px 3px;
  background: #f4f6fa;
  border: 1px solid #d5dde8;
  box-shadow: 1px 2px 4px rgba(15, 23, 42, 0.12);
}
.wc-fan i:nth-child(1) { transform: translate(3px, 3px) rotate(1.2deg); }
.wc-fan i:nth-child(2) { transform: translate(6px, 6px) rotate(2.1deg); opacity: 0.92; }
.wc-fan i:nth-child(3) { transform: translate(9px, 8px) rotate(3deg); opacity: 0.8; }
.wc-fan i:nth-child(4) { transform: translate(12px, 10px) rotate(3.8deg); opacity: 0.65; }
.wc-preview[data-sheets="6"] .wc-fan i:nth-child(4) { display: none; }

.wc-sheet {
  position: absolute;
  inset: 0;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
}

.wc-art {
  position: relative;
  flex: 1 1 58%;
  min-height: 0;
  overflow: hidden;
  background: #1e3a5f;
}
.wc-art-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 18%, #fde68a 0 8%, transparent 28%),
    linear-gradient(180deg, #7dd3fc 0%, #38bdf8 42%, #0369a1 100%);
}
.wc-art-hill {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 48%;
  background: #166534;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 -8px 0 #15803d;
}
.wc-art-mark {
  position: absolute;
  left: 10px;
  top: 14px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}
.wc-art-title {
  position: absolute;
  left: 10px;
  bottom: 22px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.45);
}
.wc-art-year {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.85);
}
.wc-print-cmyk {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 2px;
}
.wc-print-cmyk i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.wc-print-cmyk .c { background: #06b6d4; }
.wc-print-cmyk .m { background: #db2777; }
.wc-print-cmyk .y { background: #eab308; }
.wc-print-cmyk .k { background: #111827; }
.wc-preview[data-cover-inks="1"] .wc-print-cmyk { display: none; }
.wc-preview[data-cover-inks="0"] .wc-art-sky,
.wc-preview[data-cover-inks="0"] .wc-art-hill,
.wc-preview[data-cover-inks="0"] .wc-art-mark,
.wc-preview[data-cover-inks="0"] .wc-art-title,
.wc-preview[data-cover-inks="0"] .wc-art-year,
.wc-preview[data-cover-inks="0"] .wc-print-cmyk { display: none; }
.wc-preview[data-cover-inks="0"] .wc-art { background: #f1f5f9; }

.wc-month {
  flex: 0 0 42%;
  padding: 6px 8px 8px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}
.wc-month-head {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.wc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.wc-cell {
  font-size: 6px;
  line-height: 1.45;
  text-align: center;
  color: #94a3b8;
  background: #f8fafc;
  border-radius: 1px;
}
.wc-cell.is-head {
  font-weight: 700;
  color: #64748b;
  background: transparent;
}

.wc-lam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.3s ease;
}
.wc-preview[data-lam="gloss"] .wc-lam,
.wc-preview[data-lam="matte"] .wc-lam,
.wc-preview[data-lam="soft_touch"] .wc-lam {
  opacity: 1;
}
.wc-preview[data-lam="gloss"] .wc-lam {
  background: linear-gradient(
    118deg,
    transparent 12%,
    rgba(255, 255, 255, 0.18) 28%,
    rgba(255, 255, 255, 0.78) 40%,
    transparent 55%,
    rgba(255, 255, 255, 0.32) 72%,
    transparent 88%
  );
  mix-blend-mode: soft-light;
  background-size: 180% 100%;
  animation: wc-gloss-sweep 3.6s ease-in-out infinite;
}
.wc-preview[data-lam="matte"] .wc-lam {
  background: rgba(248, 250, 252, 0.32);
  box-shadow: inset 0 0 40px rgba(148, 163, 184, 0.16);
}
.wc-preview[data-lam="soft_touch"] .wc-lam {
  background: rgba(100, 116, 139, 0.16);
  box-shadow: inset 0 0 30px rgba(15, 23, 42, 0.18);
}
@keyframes wc-gloss-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* УФ — выборочное пятно на фото обложки, не заливка всего листа */
.wc-uv {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  background: none;
  transition: opacity 0.3s ease;
}
.wc-uv::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 34%;
  width: 52%;
  height: 14%;
  border-radius: 3px;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.98) 48%,
      rgba(180, 230, 255, 0.7) 52%,
      transparent 62%,
      transparent 100%
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72) 0 18%,
      rgba(255, 255, 255, 0.12) 18% 36%
    ),
    rgba(255, 255, 255, 0.22);
  background-size: 240% 100%, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 2px 10px rgba(15, 23, 42, 0.2);
  mix-blend-mode: overlay;
  animation: wc-uv-shine 2.8s ease-in-out infinite;
}
.wc-uv::after {
  content: "УФ";
  position: absolute;
  left: 10%;
  top: 35%;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(14, 165, 233, 0.95);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  opacity: 0.9;
}
.wc-preview[data-uv="1+0"] .wc-uv,
.wc-preview[data-uv="1+1"] .wc-uv {
  opacity: 1;
}
@keyframes wc-uv-shine {
  0%, 100% { background-position: -10% 50%, 0 0, 0 0; }
  50% { background-position: 110% 50%, 0 0, 0 0; }
}

/* Тиснение — металлическая плашка-логотип на фото обложки */
.wc-foil {
  position: absolute;
  left: 9%;
  top: 10%;
  width: 46%;
  height: 13%;
  z-index: 4;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    #6b4e12 0%,
    #f8e7a0 18%,
    #c9a227 40%,
    #fff8d0 55%,
    #a67c1a 78%,
    #6b4e12 100%
  );
  background-size: 220% 100%;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: opacity 0.3s ease;
  animation: wc-foil-shine 2.4s linear infinite;
}
.wc-foil::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 36%;
  height: 26%;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.2);
}
.wc-preview[data-foil="1"] .wc-foil,
.wc-preview[data-foil="silver"] .wc-foil {
  opacity: 1;
}
.wc-preview[data-foil="silver"] .wc-foil {
  background: linear-gradient(
    110deg,
    #4b5563 0%,
    #f3f4f6 20%,
    #9ca3af 42%,
    #ffffff 58%,
    #6b7280 80%,
    #4b5563 100%
  );
  background-size: 220% 100%;
}
.wc-preview[data-foil="1"] .wc-art-mark,
.wc-preview[data-foil="silver"] .wc-art-mark {
  opacity: 0;
}
@keyframes wc-foil-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* Конгрев — выпуклая плашка на фото */
.wc-emboss {
  position: absolute;
  right: 8%;
  top: 16%;
  width: 36%;
  height: 38%;
  z-index: 3;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.8),
    inset -3px -3px 6px rgba(15, 23, 42, 0.42),
    0 2px 5px rgba(15, 23, 42, 0.22);
  transition: opacity 0.3s ease;
}
.wc-emboss::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 16%;
  width: 28%;
  height: 48%;
  border-radius: 2px;
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.75),
    inset -2px -2px 3px rgba(15, 23, 42, 0.38);
  border: 1px solid rgba(15, 23, 42, 0.12);
}
.wc-emboss::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 22%;
  width: 42%;
  height: 20%;
  border-radius: 2px;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.7),
    inset -1px -1px 2px rgba(15, 23, 42, 0.32);
  border: 1px solid rgba(15, 23, 42, 0.1);
}
.wc-preview[data-emboss="1"] .wc-emboss {
  opacity: 1;
}

.wc-dim-w,
.wc-dim-h {
  position: absolute;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wc-dim-w {
  left: 38px;
  right: 38px;
  bottom: 10px;
  justify-content: center;
}
.wc-dim-w i,
.wc-dim-h i {
  flex: 1;
  height: 1px;
  background: #94a3b8;
}
.wc-dim-h {
  right: 6px;
  top: 28px;
  bottom: 40px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex-direction: column;
}

.wc-size-compare {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
  padding: 0 4px 2px;
}
.wc-sil {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: #64748b;
}
.wc-sil-bar {
  display: block;
  width: calc(var(--sil-w) * 0.16px);
  height: calc(var(--sil-h) * 0.16px);
  max-height: 36px;
  background: #cbd5e1;
  border-radius: 2px;
}
.wc-sil.is-on .wc-sil-bar { background: #0369a1; }
.wc-sil-lbl { font-size: 9px; font-weight: 650; }
.wc-sil.is-on { color: #0f172a; }

.wc-preview-meta {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ds-text-muted, #64748b);
  display: grid;
  gap: 2px;
}
.wc-preview-size { font-weight: 650; color: var(--ds-text, #0f172a); }
.wc-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.wc-preview-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ds-border, #e2e8f0);
  color: #94a3b8;
}
.wc-preview-chip.is-on {
  color: #0f172a;
  border-color: #94a3b8;
  background: #f1f5f9;
}

.calc-client-app--site-embed .wc-preview {
  position: static;
}
@media (max-width: 991.98px) {
  .wc-preview { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-lam,
  .wc-uv::before,
  .wc-foil {
    animation: none !important;
  }
}