/* ───────────────────────────────────────────────────────
   size-modal.css — модалка «Руководство по размерам»
   Self-contained. Подключается на PDP и /size-guide/.
   ─────────────────────────────────────────────────────── */
.sizeModal{position:fixed;inset:0;z-index:100003;display:none;align-items:flex-start;justify-content:center;padding:min(5vh,48px) 16px;background:rgba(15,17,21,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
.sizeModal.is-open{display:flex}
.sizeModal__panel{position:relative;width:100%;max-width:760px;background:#fff;border-radius:24px;padding:36px 40px 40px;box-shadow:0 30px 80px rgba(15,17,21,.25);animation:sizeModalIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes sizeModalIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.sizeModal__close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:none;background:#ececec;color:#333;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;padding:0;z-index:2}
.sizeModal__close:hover{background:#ddd}
.sizeModal__close svg{width:14px;height:14px}
.sizeModal__title{font-family:'Unbounded','Plus Jakarta Sans','Space Grotesk',system-ui,sans-serif;font-size:clamp(22px,3vw,28px);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#0f0f0f;margin:0 0 8px;padding-right:48px}
.sizeModal__sub{color:#777;font-size:15px;line-height:1.55;margin:0 0 24px}

/* Визуализация силуэт + рамки */
.sizeViz{background:#faf7f3;border:1px solid #f0ebe3;border-radius:18px;padding:22px 24px;margin:0 0 24px;overflow:hidden}
.sizeViz__row{display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;min-height:280px;position:relative}
.sizeViz__sil{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center}
.sizeViz__sil-img{height:280px;width:auto;display:block;filter:drop-shadow(2px 4px 10px rgba(0,0,0,.08))}
.sizeViz__sil-label{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);background:rgba(15,15,15,.85);color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.06em}
.sizeViz__frames{display:flex;align-items:flex-end;gap:10px;flex:1}
.sizeViz__frame{background:#fde8f0;border:1px solid #f5cdd8;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#1a1a1a;flex-shrink:0;transition:transform .25s,background .25s}
.sizeViz__frame:hover{background:#fdd8e4;transform:translateY(-3px)}
.sizeViz__frame-label{writing-mode:horizontal-tb;padding:4px 6px;text-align:center;line-height:1.2}
.sizeViz__frame sup{font-size:9px;font-weight:500;color:#666}

/* Таблица размеров */
.sizeTable{width:100%;border-collapse:collapse;font-size:14px}
.sizeTable thead th{background:#f5f3ef;padding:12px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#555;text-align:left;border-bottom:1px solid #e5e1d7}
.sizeTable thead th:last-child{text-align:right}
.sizeTable tbody td{padding:16px;border-bottom:1px solid #efece3;vertical-align:middle}
.sizeTable tbody tr:last-child td{border-bottom:none}
.sizeTable tbody tr:hover td{background:#faf8f4}
.sizeTable tbody td:first-child{font-weight:700;color:#0f0f0f;white-space:nowrap;width:110px}
.sizeTable tbody td:nth-child(2){color:#444}
.sizeTable tbody td:last-child{text-align:right;font-weight:700;color:#0f0f0f;white-space:nowrap;width:110px}

/* Ссылка-триггер «Руководство по размерам» на PDP */
.sizeModal__trigger{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#555;text-decoration:none;border:none;background:transparent;padding:6px 0;cursor:pointer;transition:color .18s;font-family:inherit}
.sizeModal__trigger:hover{color:#ff5c35}
.sizeModal__trigger svg{width:14px;height:14px;flex-shrink:0}

/* Body lock when open */
body.sizeModal--locked{overflow:hidden}

@media (max-width:640px){
  .sizeModal__panel{padding:28px 22px 28px;border-radius:16px}
  .sizeViz{padding:14px 12px}
  .sizeViz__row{gap:8px;min-height:220px}
  .sizeViz__sil-img{height:220px}
  .sizeViz__frames{gap:6px}
  .sizeTable{font-size:13px}
  .sizeTable tbody td{padding:12px 10px}
  .sizeTable tbody td:first-child,.sizeTable tbody td:last-child{width:auto}
  .sizeTable thead th{padding:10px}
}

/* Embedded (non-modal) variant for /size-guide/ */
.sizeViz--embedded{max-width:820px;margin:0 auto 40px}
.sizeTable--embedded{max-width:820px;margin:0 auto}