/* Clean Clinic — общая корзина (assets/cart.js). Подключается на всех страницах, включая главную.
   Переменные — из стилей главной. Правила — DESIGN-SYSTEM.md, раздел 9.7. */

/* ---------- выбор позиций: чекбокс в строке прайса ---------- */
.pg-pickwrap{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start}
.pg-picklist{min-width:0}
.pg-pick-row{cursor:pointer}
.pg-pick-row > span:first-child,.pg-pick-row .pg-dr-n{flex-direction:row!important; align-items:center; gap:14px}
.pg-tn{display:flex; flex-direction:column; gap:3px; min-width:0}
.pg-tn small{font-weight:500; font-size:14.5px; color:var(--muted); line-height:1.35}
.pg-chk{appearance:none; -webkit-appearance:none; flex:none; width:24px; height:24px; margin:0; border-radius:7px; background:var(--surface); box-shadow:inset 0 0 0 2px var(--line); display:grid; place-items:center; cursor:pointer; transition:background .15s, box-shadow .15s}
.pg-chk::after{content:""; width:11px; height:6px; border:solid #fff; border-width:0 0 2.5px 2.5px; transform:rotate(-45deg) translate(1px,-1px); opacity:0}
.pg-chk:checked{background:var(--accent); box-shadow:none}
.pg-chk:checked::after{opacity:1}
.pg-chk:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pg-pick-row:has(.pg-chk:checked){background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}
/* кнопка «Записаться» в строке с чекбоксом: на телефоне и сенсорных экранах — отдельной строкой под названием */
@media (hover:none),(max-width:640px){ .pg-pick-row > span:first-child,.pg-pick-row .pg-dr-n{flex-wrap:wrap; row-gap:4px} .pg-pick-row .pg-tn{flex:1 1 calc(100% - 38px)} .pg-pick-row .pg-book{margin:4px 0 0 38px} }

/* ---------- кнопка «В корзину» (карточки, страницы капельниц, чекапы) ---------- */
.pg-add{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 16px; border-radius:var(--r-pill); background:var(--surface); color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,var(--line)); font:600 13.5px/1 var(--font-text); white-space:nowrap; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s}
.pg-add:hover{background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent)}
.pg-add svg{flex:none}
.pg-add .i-on{display:none}
.pg-add.in{background:var(--accent-soft); color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px var(--accent)}
.pg-add.in .i-on{display:block}
.pg-add.in .i-off{display:none}
.pg-add:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pg-add--lg{min-height:52px; padding:0 24px; font-size:15px}
.pg-add--ic{width:40px; height:40px; min-height:0; padding:0; border-radius:50%; flex:none}
.pg-add--ic svg{width:18px; height:18px}
.pg-add--corner{position:absolute; top:12px; right:12px; z-index:2; box-shadow:0 4px 14px rgba(27,22,32,.14), inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 35%,transparent)}
.pg-add--corner.in{background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(27,22,32,.14)}
.dcard:has(.pg-add--corner),.ck:has(.pg-add--corner){position:relative}
.ck:has(.pg-add--corner) h3{padding-right:44px}
.ck .pg-add--corner{top:16px; right:16px}
.ckm-acts{display:flex; gap:10px; margin-top:10px}
.ckm-acts .pg-add{flex:0 0 auto}
.ckm-acts .btn-block{flex:1; margin-top:0!important}
@media (max-width:480px){ .ckm-acts{flex-direction:column} }
.pg-dark .pg-add{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.pg-dark .pg-add:hover,.pg-dark .pg-add.in{background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- панель корзины ---------- */
.pg-cart{position:sticky; top:calc(var(--hdr-h,72px) + 16px); background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lift); overflow:hidden; text-align:left}
/* в колонке справа панель не выше экрана и заканчивается над кнопкой «Записаться онлайн» — прокручивается внутри */
@media (min-width:1081px){ .pg-cart:not(.pg-cart--float){display:flex; flex-direction:column; max-height:calc(100vh - var(--hdr-h,72px) - 126px)} .pg-cart:not(.pg-cart--float) .pg-cart-h{flex:none} }
.pg-cart-h{width:100%; display:flex; align-items:center; gap:10px; padding:18px 22px; background:linear-gradient(160deg,var(--accent-soft),var(--surface) 80%); color:var(--ink); text-align:left; cursor:default; border:0; font:inherit}
.pg-cart-ic{flex:none; color:var(--accent)}
.pg-cart-h b{font:600 1.25rem/1 var(--font-display); text-transform:uppercase; letter-spacing:.01em}
.pg-cart-n{min-width:26px; height:26px; padding:0 8px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-weight:700; font-size:13px; display:inline-grid; place-items:center}
.pg-cart-mini{display:none; margin-left:auto; font:600 1.15rem/1 var(--font-display); white-space:nowrap}
.pg-cart-chev{display:none; flex:none; color:var(--muted); transition:transform .2s}
.pg-cart.open .pg-cart-chev{transform:rotate(180deg)}
.pg-cart-body{padding:16px 22px 22px; display:flex; flex-direction:column; min-height:0; overflow:hidden}
.pg-cart-body > *{flex:none}
.pg-cart-body > .pg-cart-list{flex:0 1 auto; min-height:64px}
.pg-cart [hidden]{display:none!important}
.pg-cart-empty{font-size:14.5px; color:var(--muted); margin:0 0 12px}
.pg-cart-list{list-style:none; margin:0 0 12px; padding:0; max-height:min(36vh,300px); overflow:auto; overscroll-behavior:contain}
@media (min-width:1081px){ .pg-cart:not(.pg-cart--float) .pg-cart-list{max-height:none} }
.pg-cart-list li{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14px; line-height:1.35}
.pg-cart-list li span{flex:1; min-width:0}
.pg-cart-list li small{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.pg-cart-list li b{font:600 1rem/1.35 var(--font-display); white-space:nowrap}
.pg-cart-list li em{font:500 12.5px/1.6 var(--font-text); font-style:normal; color:var(--muted)}
.pg-cart-list li button{flex:none; width:24px; height:24px; border-radius:50%; color:var(--muted); display:grid; place-items:center; font-size:16px; line-height:1}
.pg-cart-list li button:hover{color:var(--accent); background:var(--accent-soft)}
.pg-cart-promo{display:flex; align-items:center; gap:10px; margin:4px 0 10px; padding:10px 12px; border-radius:var(--r-s); background:var(--accent); color:#fff; font-size:14px; font-weight:600; line-height:1.3}
.pg-cart-promo b{flex:none; padding:4px 9px; border-radius:var(--r-pill); background:rgba(255,255,255,.2); font:600 12px/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase}
.pg-cart-promo.pop{animation:pgPromo .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pgPromo{0%{transform:scale(.9); opacity:.4} 60%{transform:scale(1.04); opacity:1} 100%{transform:none}}
.pg-cart-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:15px}
.pg-cart-row b{font:600 1.2rem/1 var(--font-display); white-space:nowrap}
.pg-cart-disc{color:var(--accent-ink)}
.pg-cart-total{border-top:1px solid var(--line-2); margin-top:4px; padding-top:12px}
.pg-cart-total b{font-size:1.6rem; color:var(--accent)}
.pg-cart-hint{margin:10px 0 10px; font-size:13.5px; color:var(--ink-2); background:var(--accent-soft); border-radius:var(--r-s); padding:9px 12px}
.pg-cart-hint.ok{color:var(--accent-ink)}
.pg-cart-note{margin:0 0 12px; font-size:12.5px; line-height:1.45; color:var(--muted)}
.pg-cart-clear{display:block; margin:10px auto 0; font-size:13.5px; color:var(--muted); text-decoration:underline}
.pg-cart [data-order]:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* плавающая панель — на страницах без своего места под корзину; пустая не показывается */
.pg-cart--float{position:fixed; top:auto; right:28px; bottom:100px; width:340px; z-index:160; display:none}
.pg-cart--float.has-items{display:block}
.pg-cart--float .pg-cart-h{cursor:pointer; padding:14px 18px}
.pg-cart--float .pg-cart-mini,.pg-cart--float .pg-cart-chev{display:block}
.pg-cart--float .pg-cart-body{display:none; max-height:min(64vh,560px)}
.pg-cart--float.open .pg-cart-body{display:flex}
.pg-cart--float .pg-cart-list,.pg-cart.open .pg-cart-list{max-height:none}
.pg-cart.bump{animation:pgBump .45s ease}
@keyframes pgBump{0%,100%{transform:none} 40%{transform:translateY(-6px)}}

@media (max-width:1080px){
  .pg-pickwrap{grid-template-columns:minmax(0,1fr)}
  .pg-cart,.pg-cart--float{position:fixed; left:12px; right:12px; width:auto; top:auto; bottom:12px; z-index:160; border-radius:var(--r-l)}
  .pg-cart-h{cursor:pointer; padding:14px 18px}
  .pg-cart-mini,.pg-cart-chev{display:block}
  .pg-cart-body{display:none; max-height:60vh}
  .pg-cart.open .pg-cart-body{display:flex}
  .pg-cart:not(.has-items){display:none}
  .pg-picklist{padding-bottom:90px}
}
@media (min-width:769px) and (max-width:1080px){ .pg-cart,.pg-cart--float{bottom:100px} }  /* над кнопкой «Записаться онлайн» */
@media (max-width:768px){ .pg-cart,.pg-cart--float{bottom:84px} }  /* над нижней панелью */

/* ---------- окно оформления заказа ---------- */
.pg-order .field{margin-bottom:12px}
.pg-order textarea{width:100%; font:inherit; font-size:14.5px; line-height:1.45; padding:12px 14px; border-radius:var(--r-s); background:var(--surface-2); color:var(--ink); border:1px solid var(--line); resize:vertical; min-height:120px}
.pg-order .pg-order-sum{font:600 1.4rem/1.2 var(--font-display); color:var(--accent); margin:4px 0 12px}
.pg-order .consent{margin:6px 0 14px}
/* телефон: строка с чекбоксом — цена справа в той же строке, без подписи «Цена» */
@media (max-width:640px){
  .pg-table .pg-tr.pg-pick-row{grid-template-columns:minmax(0,1fr) auto!important; gap:10px; align-items:center; padding:14px 16px}
  .pg-table .pg-tr.pg-pick-row > span:not(:first-child){display:block; font-size:1.25rem; white-space:nowrap}
  .pg-table .pg-tr.pg-pick-row > span:not(:first-child)::before{content:none}
  .pg-pick-row > span:first-child{gap:12px}
  .pg-pick-row .pg-tn{flex:1 1 calc(100% - 36px)}
  .pg-pick-row .pg-book{margin-left:36px}
}