/* cart.css — корзина и оформление одной страницей (sketch 4.B2–B8): steps left, total right and sticky. */
.page-h { padding: calc(26 * var(--px)) 0 calc(34 * var(--px)); }
.co { display: grid; grid-template-columns: minmax(0, 1fr) calc(400 * var(--px)); gap: calc(60 * var(--px)); align-items: start; }
.co__steps { display: grid; gap: calc(18 * var(--px)); }
.step { border: 1px solid var(--line); border-radius: calc(14 * var(--px)); padding: calc(28 * var(--px)) calc(30 * var(--px)); }
.step__h { display: flex; align-items: center; gap: 10px; font: 300 calc(24 * var(--px))/1.1 var(--f-mono); text-transform: uppercase; margin-bottom: calc(20 * var(--px)); }
.step__h .tag { font-size: calc(14 * var(--px)); }
.lines { display: grid; }
.line { display: grid; grid-template-columns: calc(86 * var(--px)) 1fr auto auto auto; align-items: center; gap: calc(20 * var(--px)); padding: calc(14 * var(--px)) 0;
  border-bottom: 1px solid var(--line); }
.line:first-child { padding-top: 0; }
.line .card__ph { aspect-ratio: 1; border-radius: 8px; }
.line__n { font-size: calc(15 * var(--px)); line-height: 1.35; }
.line__n small { display: block; color: var(--ink-2); font-size: calc(13 * var(--px)); margin-top: 3px; }
.line__sum { font-weight: 700; min-width: calc(96 * var(--px)); text-align: right; white-space: nowrap; }
.line__del { font-size: calc(13 * var(--px)); color: var(--ink-2); border-bottom: 1px solid currentColor; }
.line__del:hover { color: #b0124f; }
.line .qty { height: calc(40 * var(--px)); }
.line .qty button { width: calc(30 * var(--px)); height: calc(30 * var(--px)); }
.cempty { display: grid; justify-items: start; gap: 12px; padding: 10px 0; }
.co__add { margin-top: calc(18 * var(--px)); }
.co__addlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.mini { display: grid; grid-template-columns: calc(54 * var(--px)) 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--pill); }
.mini .card__ph { aspect-ratio: 1; border-radius: 8px; }
.mini__t { font-size: calc(12.5 * var(--px)); line-height: 1.3; }
.mini__t b { display: block; margin-top: 2px; font-size: calc(13 * var(--px)); }
.mini__b { width: calc(34 * var(--px)); height: calc(34 * var(--px)); border-radius: 50%; background: var(--white); display: grid; place-items: center; color: var(--violet);  }
.mini__b:hover { background: var(--violet); color: var(--white); }
.mini__b .ico { width: 16px; height: 16px; }
.opts { display: grid; gap: 10px; }
.opts--4 { grid-template-columns: repeat(2, 1fr); }
.opts--2 { grid-template-columns: repeat(2, 1fr); }
.opts--col { grid-template-columns: 1fr; align-content: start; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt__b { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: calc(16 * var(--px)) calc(18 * var(--px)); border: 1px solid var(--line); border-radius: 12px;
   }
.opt__b b { font-weight: 700; font-size: calc(15 * var(--px)); }
.opt__b small { font-size: calc(13.5 * var(--px)); color: var(--ink-2); line-height: 1.45; }
.opt__b .lbl { align-self: flex-start; font-style: normal; box-shadow: inset 0 0 0 1px var(--lilac); }
.opt input:checked + .opt__b { border-color: var(--violet); background: #faf7fc; box-shadow: inset 0 0 0 1px var(--violet); }
.opt input:focus-visible + .opt__b { outline: 2px solid var(--magenta); outline-offset: 2px; }
.when { display: grid; grid-template-columns: calc(330 * var(--px)) 1fr; gap: calc(24 * var(--px)); align-items: start; }
.cal { border: 1px solid var(--line); border-radius: 12px; padding: calc(14 * var(--px)); }
.cal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal__top b { font: 400 calc(14 * var(--px))/1 var(--f-mono); text-transform: uppercase; }
.cal__top button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.cal__top button:hover { background: var(--pill); }
.cal__top .ico { width: 18px; height: 18px; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal__dow span { font-size: calc(11.5 * var(--px)); color: var(--ink-2); padding: 4px 0; }
.cal__grid button, .cal__grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: calc(13.5 * var(--px)); }
.cal__grid button:hover { background: var(--pill); }
.cal__grid button[disabled] { color: #c9c2ce; pointer-events: none; }
.cal__grid button.on { background: var(--violet); color: #fff; }
.cal__grid button.today { box-shadow: inset 0 0 0 1px var(--violet); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--px)) calc(16 * var(--px)); }
.fgrid__w { grid-column: 1 / -1; }
.fgrid .micro { margin-top: 2px; }
.sum { position: sticky; top: calc(var(--hdr) + 16px); }
.sum__in { border-radius: calc(14 * var(--px)); background: var(--powder); padding: calc(28 * var(--px)); display: grid; gap: calc(16 * var(--px)); }
.sum__rows { display: grid; gap: 10px; margin: 0; }
.sum__rows div { display: flex; justify-content: space-between; gap: 14px; font-size: calc(15 * var(--px)); }
.sum__rows dt { color: var(--ink-2); }
.sum__rows dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.sum__rows dd.sum__note { white-space: normal; font-weight: 400; font-size: calc(13 * var(--px)); color: var(--ink-2); max-width: 60%; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid rgba(42, 30, 51, .12); }
.sum__total span { font: 300 calc(20 * var(--px))/1 var(--f-mono); text-transform: uppercase; }
.sum__total b { font-size: calc(26 * var(--px)); }
.sum__after { display: grid; gap: 8px; font-size: calc(13.5 * var(--px)); }
.sum__after li { display: flex; gap: 8px; align-items: center; }
.sum__after .mask-ico { color: var(--magenta); width: 18px; height: 18px; }
.sum__help { line-height: 1.5; }
.co.is-pick [data-addrblock] { display: none; }