@charset "UTF-8";

/* ===== «Магічні ампули»: тільки чіпи й обгортка — верстку карток дає гід ===== */
.mag{font-family:"PT Sans",sans-serif;color:#2A2233}
.mag-lede{margin:0 0 16px;color:#5B5566;font-size:15px;line-height:1.5}
.mag-load{color:#8C8494;font-size:15px;padding:24px 0;text-align:center}
.uzs-article.uzs-v2.ag-root.mag-cards{padding:16px 14px 4px}
/* угорі — вихід у повний каталог ампул */
.mag-top{margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid #ECE7EF}
.mag-all{display:inline-block;background:var(--dp-primary);color:#fff!important;text-decoration:none;
  border-radius:999px;padding:9px 18px;font:700 14px/1.2 "PT Sans",sans-serif}
.mag-all:hover,.mag-all:focus{background:var(--dp-primary);color:#fff!important;text-decoration:none}
.mag-all:focus-visible{outline:2px solid var(--dp-primary);outline-offset:2px}
.mag-cards .ag-sec{scroll-margin-top:96px}
/* заголовок групи: номер і стрілка тримаються першого рядка, коли назва переноситься */
/* назва групи вирівнюється ліворуч: тема центрує h2 на товарній сторінці,
   через це другий рядок довгих назв опинявся посередині */
.mag-cards .ag-sech{align-items:flex-start!important;gap:9px!important;text-align:left!important}
.mag-cards .ag-sech span{margin-top:2px;flex:0 0 auto}
.mag-cards .ag-sech .mag-chev{margin-top:6px}
/* згорнута група: лишається сам заголовок */
.mag-cards .mag-group.is-closed > *:not(.ag-sech){display:none}
/* перша група — одна картка, друга ледь привідкрита */
.mag-cards .mag-group.is-one > .ag-card:not(:first-of-type){display:none}
.mag-cards .mag-group.is-peek > .ag-card:not(:first-of-type){display:none}
.mag-cards .mag-group.is-peek > .ag-card:first-of-type{max-height:120px;overflow:hidden;position:relative}
.mag-cards .mag-group.is-peek > .ag-card:first-of-type::after{content:'';position:absolute;
  left:0;right:0;bottom:0;height:80px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 88%)}
.mag-more{display:block;width:100%;margin:10px 0 0;padding:9px 12px;border:1.5px solid #D9C7DC;
  border-radius:10px;background:#fff;color:var(--dp-primary);font:700 14px/1.2 "PT Sans",sans-serif;cursor:pointer}
.mag-more:hover{background:#F6ECF6;border-color:var(--dp-primary)}
.mag-more:focus-visible{outline:2px solid var(--dp-primary);outline-offset:2px}
/* вихід назад до товару в кінці вкладки */
.mag-back{display:block;width:100%;margin:22px 0 4px;padding:12px;border:0;border-radius:10px;
  background:#F3E4F3;color:var(--dp-primary);font:700 15px/1.2 "PT Sans",sans-serif;cursor:pointer}
.mag-back:hover{background:#E9D3E9}
.mag-back:focus-visible{outline:2px solid var(--dp-primary);outline-offset:2px}
.mag-cards .mag-group.is-closed .mag-more{display:none}
.mag-cards .ag-sech{cursor:pointer;user-select:none}
.mag-cards .ag-sech:focus-visible{outline:2px solid var(--dp-primary);outline-offset:3px}
.mag-chev{margin-left:auto;width:11px;height:11px;border-right:2.5px solid var(--dp-primary);
  border-bottom:2.5px solid var(--dp-primary);transform:rotate(45deg);transition:transform .18s ease;flex:0 0 auto}
.mag-cards .mag-group.is-closed .mag-chev{transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.mag-chev{transition:none}}
/* у вкладці лишаємо тільки суть: фото, назва, для чого, склад, ціна, кнопка */
.mag-cards .ag-num,
.mag-cards .ag-alt,
.mag-cards .ag-desc,
.mag-cards .ag-lbl,
.mag-cards .ag-meth,
.mag-cards .ag-rem{display:none!important}
.mag-cards .ag-purpose{margin-bottom:10px}
/* наявність дописуємо в цінник картки гіда */
.mag-stock{display:block;margin-top:5px;font-size:12px;font-weight:700;color:#1F7A4C;line-height:1.3}
.mag-stock.is-wait{color:#9A5B00}
/* крапка біля назви вкладки, поки її жодного разу не відкривали */
/* ховаємо через клас, а не інлайном: у блоку питань стоїть bootstrap-івський
   .visible-xs із display:block!important, інлайн проти нього безсилий */
.mag-hidden{display:none!important}
.mag-dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--dp-primary);margin-left:6px;vertical-align:middle}
.mag-dot.is-on{display:inline-block;animation:magPulse 1.6s ease-out 3}
@keyframes magPulse{0%{box-shadow:0 0 0 0 rgba(173,23,173,.55)}70%{box-shadow:0 0 0 7px rgba(173,23,173,0)}100%{box-shadow:0 0 0 0 rgba(173,23,173,0)}}
@media (prefers-reduced-motion:reduce){.mag-dot.is-on{animation:none}}
@media (max-width:480px){.mag-chip{font-size:13px;padding:6px 12px}}