/*
 * Блок «О товаре» на детальной карточке — \MDA\ProductAbout (03.10.2026).
 * Разметку целиком рендерит PHP (секция .mpa перед вкладками «Наличие / Как купить»).
 * Токены — эталон app.mda-platform.top; шрифты MC Unbounded/MC Onest объявлены в
 * product-v2.css/catalog-v2.css, здесь есть запасные семейства.
 */
.mpa{
  --mpa-surface:#1C1429; --mpa-surface-2:#241A35;
  --mpa-line:rgba(226,205,255,.12); --mpa-line-strong:rgba(226,205,255,.24);
  --mpa-text:#F2EAF9; --mpa-muted:#A899BD; --mpa-dim:#6E6183;
  --mpa-accent:#9B4DFF; --mpa-accent-soft:rgba(155,77,255,.16);
  --mpa-green:#43E38F; --mpa-green-ring:rgba(67,227,143,.18);
  --mpa-fd:"MC Unbounded","Unbounded",system-ui,sans-serif;
  --mpa-fb:"MC Onest","Onest",system-ui,sans-serif;
  clear:both;margin:clamp(28px,4vw,48px) 0 0;font-family:var(--mpa-fb);color:var(--mpa-text);min-width:0;
}
.mpa *,.mpa *::before,.mpa *::after{box-sizing:border-box}
html body .mpa h2.mpa-title{
  margin:0 0 18px;padding:0;font-family:var(--mpa-fd);font-weight:900;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(1.35rem,2.4vw,2rem);color:var(--mpa-text);text-transform:none;
}
.mpa-card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(8px,1.6vw,14px) clamp(18px,3vw,32px);border-radius:24px;
  background:var(--mpa-surface);border:1px solid var(--mpa-line);
}
.mpa-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 100% 0%,rgba(155,77,255,.12),transparent 70%);
}

/* описание из 1С/админки, если появится */
.mpa-text{padding:18px 0;color:var(--mpa-muted);font-size:1rem;line-height:1.65;max-width:72ch}
.mpa-text p{margin:0 0 12px}
.mpa-text p:last-child{margin-bottom:0}
.mpa-text b,.mpa-text strong{color:var(--mpa-text);font-weight:600}
.mpa-text + .mpa-list{border-top:1px solid var(--mpa-line)}

/* таблица «характеристика — значение» */
html body .mpa .mpa-list{margin:0;padding:0}
.mpa-row{display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr);gap:6px 20px;align-items:baseline;padding:14px 0;border-top:1px solid var(--mpa-line)}
.mpa-row:first-child{border-top:0}
html body .mpa .mpa-row dt{margin:0;font-weight:400;font-size:.92rem;line-height:1.4;color:var(--mpa-muted)}
html body .mpa .mpa-row dd{margin:0;font-weight:500;font-size:.98rem;line-height:1.45;color:var(--mpa-text);overflow-wrap:anywhere}
html body .mpa .mpa-row dd a{color:var(--mpa-text);text-decoration:none;border-bottom:1px solid var(--mpa-line-strong);transition:border-color .2s,color .2s}
html body .mpa .mpa-row dd a:hover{color:#fff;border-bottom-color:var(--mpa-accent)}
.mpa-row--chips{align-items:start}
.mpa-row--chips dt{padding-top:6px}

.mpa-stock{display:inline-flex;align-items:center;gap:10px}
.mpa-note{display:block;margin-top:4px;font-size:.82rem;font-weight:400;color:var(--mpa-dim)}
.mpa-stock i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--mpa-green);box-shadow:0 0 0 4px var(--mpa-green-ring)}

/* чипы вкусов/цветов/вариантов */
html body .mpa ul.mpa-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
html body .mpa ul.mpa-chips li{
  margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--mpa-line-strong);background:rgba(14,10,20,.35);
  font-size:.86rem;font-weight:500;line-height:1.25;color:var(--mpa-text);
}
html body .mpa ul.mpa-chips li::before,html body .mpa ul.mpa-chips li::marker{content:none!important;display:none!important}
.mpa-more{margin-top:6px}
.mpa-more[open]{display:block}
.mpa-more > summary{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;cursor:pointer;list-style:none;
  border:1px dashed var(--mpa-line-strong);color:#C9A6FF;font-size:.86rem;font-weight:600;-webkit-tap-highlight-color:transparent;
  transition:border-color .2s,background .2s;
}
.mpa-more > summary::-webkit-details-marker{display:none}
.mpa-more > summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.mpa-more > summary:hover{border-color:var(--mpa-accent);background:var(--mpa-accent-soft)}
.mpa-more[open] > summary{display:none}

/* телефон: подпись над значением, когда значение — чипы или длинное */
@media (max-width:600px){
  .mpa-row{grid-template-columns:minmax(96px,40%) minmax(0,1fr);gap:4px 14px;padding:12px 0}
  .mpa-row--chips{grid-template-columns:1fr}
  .mpa-row--chips dt{padding-top:0}
  html body .mpa .mpa-row dt{font-size:.88rem}
  html body .mpa .mpa-row dd{font-size:.95rem}
  html body .mpa ul.mpa-chips{gap:6px}
  html body .mpa ul.mpa-chips li{padding:5px 10px;font-size:.82rem}
  .mpa-more > summary{min-height:36px}
}