.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 24px; padding-bottom: 80px; align-items: start; }

.gallery-main {
  aspect-ratio: 1/1; border-radius: 20px; border: 1px solid var(--card-line); background: var(--card);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
/* Цвет+текстуру даёт .panel-surface (components.css). Свой background тут НЕ
   задаём — иначе shorthand из этого (более позднего) файла перебил бы
   background-color:var(--panel-color) из .panel-surface, и панель была бы серой. */
.panel-shape { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 10px 24px rgba(23,24,28,.12); transition: width .25s ease, height .25s ease; }
.panel-shape.swapping, .panel-photo.swapping { animation: panelSwap .38s cubic-bezier(.3,1.3,.4,1); }
.panel-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; display: block; }
@keyframes panelSwap { 0%{transform:scale(1) rotate(0deg);} 40%{transform:scale(.82) rotate(-5deg);} 70%{transform:scale(1.05) rotate(2deg);} 100%{transform:scale(1) rotate(0deg);} }
/* Пол — квадрат; стена — горизонтальный прямоугольник (шире, чем выше —
   исправление: раньше стена по ошибке была портретной). */
.shape-floor { width: 54%; aspect-ratio: 1/1; height: auto; }
.shape-wall { width: 74%; aspect-ratio: 8/5; height: auto; }
.ph-note { position: absolute; bottom: 14px; left: 16px; font-size: 11px; color: var(--muted); background: var(--paper); border: 1px solid var(--card-line); padding: 4px 10px; border-radius: 100px; }

.p-eyebrow { font-size: 13px; font-weight: 600; color: var(--orange-dark); margin-bottom: 8px; }
.p-title { font-size: 26px; font-weight: 600; margin-bottom: 4px; }
.p-filament { font-size: 13px; color: var(--muted); margin-bottom: 10px; min-height: 1.1em; }
.p-price { font-size: 20px; font-weight: 700; margin-bottom: 24px; }

/* Свотчи, сгруппированные по семействам (attributes.group). Если групп нет —
   один .swatch-row внутри, выглядит как раньше. */
.swatch-groups { display: flex; flex-direction: column; gap: 12px; }
.swatch-group-block { display: flex; flex-direction: column; gap: 2px; }
.swatch-group-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

.panel-group { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.panel-group:last-of-type { border-bottom: none; }
.swatch-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.fit-tag { font-size: 10.5px; font-weight: 500; color: var(--muted); background: var(--card); border: 1px solid var(--card-line); padding: 3px 9px; border-radius: 100px; }
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 8px; }
.swatch-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; border: none; background: none; }
.swatch-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; }
.swatch-btn.active .swatch-dot { border-color: var(--orange); }
.swatch-btn span.sw-name { font-size: 10px; color: var(--muted); }
.show-all-link { font-size: 12px; color: var(--orange-dark); background: none; border: none; text-decoration: underline; }

.product-layout .btn { padding: 14px 22px; width: 100%; }
.product-layout .btn:active { transform: scale(.96); }

#swatchModal .modal-box { max-width: 460px; padding: 26px; }
#swatchModal .modal-close { top: 16px; right: 16px; width: 28px; height: 28px; font-size: 14px; }

@media (max-width: 860px) {
  .product-layout { grid-template-columns: 1fr; gap: 28px; }
}