/* style.min.css — единый, переиспользуемый */
:root{--r:14px;--rs:10px;--w:#fff;--ws:#f7f8fa;--t:#0f1115;--m:#6b7280;--bd:#e7e9ee;--a:#111827;--ac:#fff;--dn:#e03131;--sh:0 8px 24px rgba(15,17,21,.06);--ss:0 2px 10px rgba(15,17,21,.05);--sb:360px;--gg:12px}
*{box-sizing:border-box}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
/* единый грид для всех страниц с сайдбаром */
.page-grid{display:grid;gap:var(--gg);grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.page-grid{grid-template-columns:minmax(0,1fr) var(--sb);align-items:start}}
/* единый «островок итога» — используется на cart/checkout/order */



.order-summary {
  background: var(--w);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: var(--ss);
  padding: 16px;
  position: sticky;
  top: 100px;
  align-self: start;
  width: 100%;
}

.order-summary__row,
.order-summary__total {
  display: flex;
  align-items: baseline;
  padding: 8px 0;
  font-size: 15px;
  justify-content: space-between;
}

.order-summary__total {
  font-weight: 700;
  font-size: 18px;
  padding: 4px 0 10px;
}

.filler-underline {
  flex: 1 1 auto;
  border-bottom: 1px dotted #b0b1b5;
  height: 0;        /* убираем лишнюю высоту */
  margin: 0;
}

.order-summary__row span:last-child,
.order-summary__total span:last-child {
  font-variant-numeric: tabular-nums;
}

.order-summary__hr {
  border: 0;
  height: 1px;
  background: var(--bd);
  margin: 8px 0 10px;
}

.summary__fineprint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--m);
}



/* промокод — общий */
.promo{display:grid;gap:8px;margin-top:8px}
.promo__inline {
  display: flex;
  gap: 8px; /* отступ между input и кнопкой */
}
.promo__input {
  flex: 2 1 0;          /* в два раза шире */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: 0;
  transition: .15s;
  width: 100%;
}
.promo__inline .btn {
  flex: 1 1 0;          /* в два раза уже */
  border-radius: 10px;
}
.promo__input:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(17,24,39,.12)}
.promo__chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd);background:var(--ws);border-radius:999px;padding:6px 10px;font-size:13px;color:var(--t)}
.promo__note{font-size:12px;color:var(--m)}.promo__remove-form{margin:0}.promo__remove{all:unset;display:inline-grid;place-items:center;width:18px;height:18px;font-size:16px;border-radius:50%;color:var(--m);cursor:pointer}
.promo__remove:hover{background:#e5e7eb;color:#111}
/* карточки корзины — используются и в order detail */
.cart-items{display:grid;gap:12px;justify-content:center;padding-bottom:4px}
.cart-item{width:100%;max-width:820px;display:grid;grid-template-columns:112px 1fr auto;gap:16px;align-items:center;background:var(--w);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--ss);padding:14px 16px;transition:.15s}
.cart-item:hover{transform:translateY(-1px);box-shadow:var(--sh);background:var(--ws)}
@media(max-width:640px){.cart-item{max-width:100%;grid-template-columns:76px 1fr;grid-template-areas:"img title" "img meta" "img controls";gap:12px;padding:12px}}
@media(max-width:300px){.cart-item{grid-template-columns:1fr;grid-template-areas:"img" "title" "meta" "controls"}}
.cart-item__image{width:112px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f2f3f5;border:1px solid var(--bd)}
.cart-item__image img{width:100%;height:100%;object-fit:contain}
@media(max-width:640px){.cart-item__image{grid-area:img;width:76px;border-radius:10px}}
.cart-item__title-link{text-decoration:none;color:inherit}.cart-item__title{font-weight:700;color:var(--t);line-height:1.25;font-size:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-item__meta{color:var(--m);font-size:12.5px;margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.meta-chip{background:#f3f4f6;border:1px solid #e5e7eb;color:#374151;padding:1px 6px;border-radius:999px;font-size:11px}
.cart-item__controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
@media(max-width:300px){.cart-item__controls{flex-direction:column}}
.cart-item__price{white-space:nowrap;font-weight:700;font-size:18px;color:var(--t)}
.remove-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}
.counter{display:inline-grid;grid-auto-flow:column;gap:8px;align-items:center;background:#fff;border:1px solid var(--bd);border-radius:var(--rs);padding:4px 6px}
.counter__btn{min-width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid #cfd3db;background:#fff;cursor:pointer}
.counter__value{min-width:30px;text-align:center;font-weight:600}
.cart-item--error{border-color:#fecaca;background:#fff5f5}
/* пусто */
.cart-empty{background:var(--w);border:1px dashed var(--bd);border-radius:var(--r);padding:28px;text-align:center;color:var(--m)}
.cart-empty__title{font-weight:800;color:var(--t);margin-bottom:6px}.cart-empty__text{font-size:14px}
/* формы */
.checkout-form{display:grid;gap:12px}.island{background:var(--w);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--ss);padding:16px}
.island__title{margin:0 0 12px;font-weight:700;color:var(--t)}.group{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.inline{display:flex;flex-wrap:wrap;gap:12px}.field{display:flex;flex-direction:column;gap:6px;flex:1 1}
.field__label{font-size:13px;color:var(--m)}.field__control{padding:10px 12px;border:1px solid var(--bd);border-radius:10px}
.field__error{font-size:12px;color:#dc2626}.is-invalid{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.08)}
.alert{padding:12px;border-radius:10px;border:1px solid #fecaca;background:#fef2f2;color:#7f1d1d}.alert--error{border-color:#fecaca}
/* доставка */
.delivery-panel{margin-top:12px}.delivery-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:12px 0 6px}
.delivery-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fafafa;cursor:pointer;transition:.2s}
.delivery-card input{position:absolute;inset:0;opacity:0}.delivery-card:hover{border-color:#2563eb;background:#f0f7ff}
.delivery-card:has(input:checked){border-color:var(--a);background:#fff;box-shadow:var(--ss)}
.delivery-card__title{font-weight:600;color:#111;margin-bottom:4px}.delivery-card__desc{font-size:12px;color:var(--m)}
#pvz-cdek-block{margin-top:12px}.pvz-box{font-size:.95rem;padding:10px;background:#f9fafb;border:1px solid var(--bd);border-radius:8px}.pvz-picked{font-weight:600;color:#111827;margin-left:4px}
/* статус/шаги (order) */
#OrderPage{margin-top:16px}.confirm__card{background:var(--w);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--ss);padding:20px;text-align:center}
.confirm__icon{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:24px}
.confirm__icon--created{background:#fff3e6;color:#ad5c00}.confirm__icon--paid,.confirm__icon--delivered{background:#e8f6ee;color:#1a7f49}
.confirm__icon--assembled{background:#e8f0fe;color:#1a3ea1}.confirm__icon--shipped{background:#e7f3ff;color:#0b5ed7}.confirm__icon--canceled{background:#fef2f2;color:#b91c1c}
.confirm__order{color:var(--m);margin:6px 0 12px}.confirm__actions{display:grid;gap:8px;margin-top:12px}
@media(min-width:560px){.confirm__actions{grid-template-columns:1fr}}
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--bd);background:var(--ws);color:var(--t)}
.status-badge--paid,.status-badge--delivered{border-color:#c7f0d8;background:#eefaf3;color:#166534}
.status-badge--shipped{border-color:#cfe8ff;background:#edf6ff;color:#0b5ed7}
.status-badge--assembled{border-color:#d7dcfb;background:#eef1ff;color:#1a3ea1}
.status-badge--created{border-color:#ffe0b2;background:#fff7ea;color:#ad5c00}
.status-badge--canceled{border-color:#fecaca;background:#fef2f2;color:#7f1d1d}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.steps__item{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:.5}
.steps__item.is-active,.steps__item.is-done{opacity:1}.steps__dot{width:10px;height:10px;border-radius:50%;background:#d1d5db}
.steps__item.is-active .steps__dot{background:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.18)}.steps__item.is-done .steps__dot{background:#10b981}
.steps__label{font-size:12px;color:var(--m)}
.error{margin:0;color:var(--dn);font-size:13px}
.detail-grid{display: grid;gap: 12px;}


/* ===== City suggest ===== */
.suggest { position: relative; }
.suggest__dropdown{
  position:absolute; left:0; top:100%;
  background:#fff; border:1px solid var(--bd); border-radius:var(--rs);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin-top:4px; padding:4px 0; z-index:50;
  max-height:300px; overflow:auto; display:none;
  /* стабильность геометрии */
  will-change: contents; contain: content;
}
.suggest__item{
  display:block; padding:10px 14px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .12s;
}
.suggest__item:hover,
.suggest__item.active{ background:#f3f4f6; }
.suggest__name{ font-weight:600; color:#0f1115; }
.suggest__region{ color:var(--m); font-size:13px; margin-left:8px; }
.suggest__item mark{ background:transparent; color:#2563eb; font-weight:700; }

.delivery-cards{display:grid;gap:12px}
.delivery-card{position:relative;display:flex;gap:12px;padding:16px;border:1px solid #e0e0e0;border-radius:12px;cursor:pointer;background:#fff}
.delivery-card:hover{border-color:#c7c7c7}
.delivery-card input{position:absolute;opacity:0;pointer-events:none}
.delivery-card__title{font-weight:600}
.delivery-card__desc{color:#666;font-size:14px;margin-top:2px}
.delivery-card--active{border-color:#1a73e8;box-shadow:0 0 0 3px rgba(26,115,232,.18)}
.delivery-panel{margin-top:12px}
.pvz-map{width:100%;height:380px;border-radius:12px;overflow:hidden;border:1px solid #e0e0e0}
.pvz-picked{margin-top:8px;font-size:14px}
.muted{color:#777}
/* модалка выбора города */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:1000}
.modal__card{background:#fff;width:min(720px,92vw);max-height:80vh;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.modal__head{padding:14px 16px;border-bottom:1px solid #eee;font-weight:600}
.modal__body{padding:12px 16px;overflow:auto}
.city-search{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:10px;margin-bottom:10px}
.city-item{padding:10px 12px;border-bottom:1px solid #f1f1f1;cursor:pointer}
.city-item:hover{background:#f7faff}
.clicklike{color:#1a73e8;cursor:pointer;border:0;background:transparent; padding: 3px 0 0 ;}


.pvz-balloon {
  font-family: sans-serif;
  padding: 8px 10px;
  max-width: 260px;
}
.pvz-balloon__title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
}
.pvz-balloon__address {
  font-size: 13px;
  color: #444;
  margin-bottom: 8px;
}
.pvz-balloon__btn {
  display: inline-block;
  padding: 6px 12px;
  background: #1a73e8;
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.pvz-balloon__btn:hover {
  background: #1557b0;
}

.delivery-card--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.collapsible { max-height: 420px; opacity: 1; overflow: hidden;
  transition: max-height .32s ease, opacity .24s ease; }
.collapsible.is-collapsed { max-height: 0; opacity: 0; }
.btn-link { border:0; background:transparent; color:#1a73e8; cursor:pointer; padding:0 0 0 8px; }
.btn-link:hover { text-decoration: underline; }

.track-box {
  display: inline-block;
  padding: 6px 12px;
  margin-left: 8px;
  font-weight: 600;
  font-family: monospace;
  background: #f0f4ff;
  border: 1px solid #ccd5ff;
  border-radius: 6px;
  color: #2a3a8c;
}

.track-copy {
  margin-left: 10px;
  padding: 6px 10px;
  font-size: 0.9rem;
  border: 1px solid #111;
  border-radius: 15px;
  background: whitesmoke;
  color: #111;
  cursor: pointer;
  transition: background 0.2s;
}

.track-copy:hover {
  background: #111;
  color: #fff;
}

.toast {
  visibility: hidden;
  min-width: 200px;
  background-color: whitesmoke;
  color: #111;
  text-align: center;
  border-radius: 15px;
  padding: 12px;
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.4s, bottom 0.4s;
  border: 1px solid #111;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  bottom: 70px;
}