/* cart.css — the cart as a reservation and «бронь принята» (019, build P6, agent cart, 28.09).
   Language of the home page (blue world P10): blue ground → lighter blue panel → rows on hairlines, products on plates, cream action, yellow price.
   Refs: S06 hookah-market cart_1440 (list left, «Итого» right, «Купить в один клик» = name + phone),
         S01 moze cart_1440 (a separate overview block, one bright full-width button). Motion: transform/opacity only. */

.p-cart main { padding-bottom: clamp(8px, 1vw, 24px); }

/* ---------- head: crumbs, H1 «Корзина», count ---------- */
.cart__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 14px; }
.phead .cart__title .h1 { margin-top: 0; }
.cart__count { font: 500 var(--fs-2)/1.2 var(--f-text); color: var(--ink-3); }

/* ---------- the cart: list + form (8 columns) · total (4 columns, sticky) ---------- */
.cart__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.cart__main { grid-column: 1 / span 8; display: grid; gap: var(--gutter); min-width: 0; }
.cbox { padding: clamp(18px, 1.8vw, 40px); border-radius: var(--r-xl); background: var(--panel); min-width: 0; }

/* list rows — on hairlines inside the panel, each product on its plate, like the set on the home page (kit__item) */
.clist__rows { display: grid; gap: 0; }
.citem { display: grid; grid-template-columns: clamp(92px, 7vw, 150px) minmax(0, 1fr) auto clamp(118px, 9vw, 200px); align-items: center;
  column-gap: clamp(14px, 1.4vw, 32px); padding: 14px 0; border-bottom: 1px solid var(--line); }
.citem:last-child { border-bottom: 0; }
.citem__ph { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-m); overflow: hidden; }
.citem__ph img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform var(--t-h) var(--ease-h); }
.citem:hover .citem__ph img { transform: scale(.972); }
.citem__ph .tile__noimg svg { width: 46%; }
.citem__info { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.citem__cap { font: 600 13px/1.2 var(--f-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.citem__name { font: 500 var(--fs-2)/1.3 var(--f-text); max-width: 48ch; }
.citem__name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.citem__props { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.citem__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 4px; }
.citem__del { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font: 500 var(--fs-0)/1 var(--f-text); color: var(--ink-2); }
.citem__del svg { width: 16px; height: 16px; transition: transform var(--t-h) var(--ease-h); }
.citem__del:hover { color: var(--ink); }
.citem__del:hover svg { transform: rotate(90deg); }
.citem .qty button[disabled] { opacity: .3; cursor: default; }
.citem__sum { display: grid; justify-items: end; gap: 6px; text-align: right; }
.citem__sum .price { font-size: var(--fs-3); }
.citem__each { min-height: 1.3em; font-size: 14px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; }

/* form — S06 «Купить в один клик»: name and phone, nothing else required */
.cform__head { display: grid; gap: 4px; }
.cform__t { font: 600 var(--fs-3)/1.2 var(--f-text); letter-spacing: -.01em; }
.cform__d { font-size: var(--fs-0); color: var(--ink-2); }
.cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gutter); margin-top: clamp(16px, 1.4vw, 28px); align-items: start; }
.cform__via, .cform__note { grid-column: 1 / -1; }
.cform__via { margin: 0; padding: 0; border: 0; min-width: 0; }
.cform__via legend { padding: 0; margin-bottom: 6px; font: 500 var(--fs-0)/1.2 var(--f-text); color: var(--ink-2); }
.cform .seg label:hover span { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.cform .seg input:checked + span { box-shadow: inset 0 0 0 2px var(--ink); }
.cform .seg input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 3px; }
.cform .field input, .cform .field textarea { font-size: var(--fs-1); }
.cform .field.is-err input { border-color: #ff7a7a; }
.cform textarea { min-height: 84px; }
@media (min-width: 1800px) {
  .cform__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cform__via { grid-column: auto; }
}

/* total — one bright action, the promise, three steps, the ID line (S01 overview block, S06 «Итого» + one button) */
.csum { grid-column: 9 / span 4; position: sticky; top: calc(var(--hdr) + 24px); min-width: 0; }
.csum__card { display: grid; gap: clamp(14px, 1.2vw, 22px); padding: clamp(22px, 2vw, 44px); border-radius: var(--r-xl); background: var(--panel);
  box-shadow: none; }
.csum__total { display: grid; gap: 8px; }
.csum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.csum__n { font-size: var(--fs-0); color: var(--ink-3); }
.csum__sum { font-size: clamp(32px, 2.4vw, 60px); }
.csum__go { width: 100%; }
.csum__promise .promise__big { font-weight: 700; letter-spacing: -.01em; }
.csum__next { display: grid; gap: 12px; padding-top: clamp(14px, 1.2vw, 22px); border-top: 1px solid var(--line); }
.steps { display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.steps__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper);
  font: 700 14px/1 var(--f-text); }
.steps p { padding-top: 3px; font-size: var(--fs-1); line-height: 1.4; }
.csum__id { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.csum__id svg { width: 20px; height: 20px; flex: none; color: var(--ink); }

/* payment in the store — cart total and the reservation list */
.cpay { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-1); line-height: 1.4; color: var(--ink-2); }
.cpay svg { width: 22px; height: 22px; flex: none; color: var(--ink); margin-top: -1px; }

/* ---------- empty cart ---------- */
.cempty__card { display: grid; justify-items: center; gap: 14px; padding: clamp(48px, 5vw, 120px) clamp(24px, 3vw, 72px); border-radius: var(--r-xl);
  background: var(--panel); text-align: center; }
.cempty__ic { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px; border-radius: 50%; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(244, 239, 232, .34); }
.cempty__ic svg { width: 36px; height: 36px; }
.cempty__t { max-width: 18ch; }
.cempty__d { font-size: var(--fs-2); color: var(--ink-2); }
.cempty__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }

/* ---------- «бронь принята»: number + what is reserved (7 columns) · how to get there + contact (5 columns) ---------- */
.done__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.done__main { grid-column: 1 / span 7; display: grid; gap: var(--gutter); min-width: 0; }
.done__side { grid-column: 8 / span 5; display: grid; gap: var(--gutter); min-width: 0; }
.done__head { display: grid; justify-items: start; gap: clamp(12px, 1.1vw, 22px); padding: clamp(26px, 2.6vw, 60px); border-radius: var(--r-xl); background: var(--mist); }
.done__ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ok); color: var(--navy); }
.done__ok svg { width: 28px; height: 28px; }
.done__h { font: 700 clamp(30px, 2.55vw, 62px)/1.06 var(--f-text); letter-spacing: -.025em; }
.done__h .num { white-space: nowrap; }
.done__lead { max-width: 60ch; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-2); }

.dbox { display: grid; gap: 14px; }
.dbox__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dbox__n { font-size: var(--fs-0); color: var(--ink-3); }
.dbox__rows { display: grid; gap: 0; }
.drow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drow__ph { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.drow__ph img { width: 84%; height: 84%; object-fit: contain; }
.drow__ph .tile__noimg svg { width: 50%; }
.drow__nm { display: grid; gap: 2px; font-weight: 500; line-height: 1.3; min-width: 0; }
.drow__nm small { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.drow__pr { font-weight: 700; color: var(--price); white-space: nowrap; }
.dbox__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; font: 600 var(--fs-2)/1 var(--f-text); }
.dbox__sum .price { font-size: clamp(28px, 2vw, 46px); }
.dbox__more { justify-self: start; font-weight: 600; }

.route { display: grid; border-radius: var(--r-xl); background: var(--panel); overflow: hidden; }
.route__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 42%; }
.route__body { display: grid; justify-items: start; gap: 10px; padding: clamp(22px, 2vw, 40px); }
.route__addr { font: 600 var(--fs-3)/1.25 var(--f-text); }
.route__in { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-1); line-height: 1.4; color: var(--ink-2); }
.route__in svg { width: 20px; height: 20px; flex: none; color: var(--ink); }
.route__go { margin-top: 8px; }
.talk { display: grid; gap: 16px; padding: clamp(22px, 2vw, 40px); border-radius: var(--r-xl); background: var(--panel); }
.talk__t { font: 500 var(--fs-2)/1.4 var(--f-text); }
.talk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.talk__tel { font: 600 var(--fs-2)/1.2 var(--f-text); white-space: nowrap; }
.talk__tel:hover { color: var(--link); }

/* ---------- narrow screens: one column (the site is built for 1440+, this only keeps it readable) ---------- */
@media (max-width: 1100px) {
  .cart__main, .csum, .done__main, .done__side { grid-column: 1 / -1; }
  .csum { position: static; }
}
@media (max-width: 640px) {
  .citem { grid-template-columns: 76px minmax(0, 1fr); row-gap: 10px; }
  .citem .qty { grid-column: 2; justify-self: start; }
  .citem__sum { grid-column: 2; justify-items: start; text-align: left; }
  .cform__grid { grid-template-columns: minmax(0, 1fr); }
}