/* css/product-modal.css
   Модальне вікно товару — спільне для каталогу (catalog.html)
   та блоку «Популярні товари» на головній (index.html).
   Стилі самодостатні: власні змінні, нічого не тягне зі style.css. */

.ch-modal {
  --sbm-white:  #ffffff;
  --sbm-bg:     #f7f8fa;
  --sbm-bg2:    #eef0f4;
  --sbm-ink:    #111827;
  --sbm-ink2:   #374151;
  --sbm-ink3:   #6b7280;
  --sbm-line:   #e5e7eb;
  --sbm-red:    #d62b2b;
  --sbm-red-dk: #b01e1e;

  position: fixed; inset: 0; z-index: 1000; display: none;
  box-sizing: border-box;
}
.ch-modal *, .ch-modal *::before, .ch-modal *::after { box-sizing: border-box; }
.ch-modal.on { display: block; }
.ch-modal__backdrop { position: absolute; inset: 0; background: rgba(17,24,39,.55); }
.ch-modal__sheet {
  position: relative; z-index: 2; background: var(--sbm-white);
  max-width: 640px; margin: 5vh auto; max-height: 90vh;
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
@media (max-width: 700px) {
  .ch-modal__sheet { margin: 0; max-height: 100vh; height: 100%; border-radius: 0; max-width: none; }
}
.ch-modal__head {
  padding: 22px 24px 18px; border-bottom: 1px solid var(--sbm-line);
  display: flex; gap: 16px; align-items: flex-start;
}
.chm-head-text { min-width: 0; }
.ch-modal__eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sbm-red); margin-bottom: 8px;
}
.ch-modal__head h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px;
  color: var(--sbm-ink); margin: 0 0 8px; line-height: 1.2; padding-right: 36px;
}
.ch-modal__spec {
  font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--sbm-ink3); margin: 0;
}
.ch-modal__x {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sbm-line);
  background: var(--sbm-white); color: var(--sbm-ink2); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.ch-modal__x:hover { background: var(--sbm-bg); }
.ch-modal__body { padding: 0; overflow: auto; flex: 1; }

/* ---- мініатюра товару в шапці модалки ---- */
.chm-thumb {
  width: 84px; height: 66px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--sbm-line); flex-shrink: 0; background: var(--sbm-bg); position: relative;
}
.chm-thumb svg, .chm-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.chm-thumb img { position: absolute; inset: 0; }
.chm-thumb img.is-fit { object-fit: contain; background: #fff; padding: 6%; }
.chm-thumb .chm-thumb__icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--sbm-ink3); font-size: 22px;
}

/* ---- таблиця цін ---- */
.ch-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; }
.ch-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sbm-ink3); background: var(--sbm-bg);
  padding: 10px 24px; border-bottom: 1px solid var(--sbm-line);
  position: sticky; top: 0; z-index: 1;
}
.ch-table th:last-child, .ch-table td:last-child { text-align: right; }
.ch-table td {
  font-size: 13.5px; color: var(--sbm-ink2); padding: 9px 24px; border-bottom: 1px solid #f1f2f5;
}
.ch-table td:last-child { font-weight: 700; color: var(--sbm-ink); white-space: nowrap; }
.ch-table tr.ch-group td {
  background: var(--sbm-bg); font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sbm-ink2); padding: 9px 24px;
}
.ch-table tbody tr:not(.ch-group):hover td { background: #fafbfc; }

/* ---- багатоколонковий прайс (бетон: Р1–Р3 / Р4 / Р5) ---- */
.ch-table--num th, .ch-table--num td { padding-left: 10px; padding-right: 10px; font-size: 12.5px; }
.ch-table--num th:first-child, .ch-table--num td:first-child { padding-left: 24px; }
.ch-table--num th:last-child,  .ch-table--num td:last-child  { padding-right: 24px; }
.ch-table--num th:not(:first-child), .ch-table--num td:not(:first-child) { text-align: right; }
.ch-table--num td:nth-child(n+3) { font-weight: 700; color: var(--sbm-ink); white-space: nowrap; }
.ch-table--num tr.ch-group td { padding-left: 24px; text-align: left; }
@media (max-width: 560px) {
  .ch-table--num th, .ch-table--num td { padding-left: 7px; padding-right: 7px; font-size: 11.5px; }
  .ch-table--num th:first-child, .ch-table--num td:first-child,
  .ch-table--num tr.ch-group td { padding-left: 14px; }
  .ch-table--num th:last-child, .ch-table--num td:last-child { padding-right: 14px; }
}

.ch-modal__note {
  padding: 14px 24px; font-family: 'Inter', sans-serif; font-size: 12.5px;
  color: var(--sbm-ink3); line-height: 1.6; background: var(--sbm-bg);
}
.ch-modal__foot {
  padding: 16px 24px; border-top: 1px solid var(--sbm-line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ch-btn {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
  padding: 11px 20px; border-radius: 9px; text-decoration: none; transition: background .15s;
}
.ch-btn--red { background: var(--sbm-red); color: #fff; }
.ch-btn--red:hover { background: var(--sbm-red-dk); }
.ch-btn--ghost { background: var(--sbm-bg); color: var(--sbm-ink); }
.ch-btn--ghost:hover { background: var(--sbm-bg2); }
.ch-modal__foot span {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--sbm-ink3); margin-left: auto;
}
body.ch-lock { overflow: hidden; }