/* =====================================================================
   AVANCUS RUSSIA — ВЫДВИЖНАЯ КОРЗИНА
   Общий компонент для всех страниц. Разметку строит assets/cart.js,
   чтобы не копировать её в каждый html.
   Классы намеренно с префиксом drawer__ — не пересекаются со стилями
   страниц.
   ===================================================================== */

.drawer-veil{
  position:fixed; inset:0; z-index:120;
  background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s var(--ease, ease);
}
.drawer-veil[hidden]{ display:none; }
.drawer-veil.is-open{ opacity:1; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:130;
  width:min(480px,100%);
  display:flex; flex-direction:column;
  background:var(--paper,#fff); color:var(--ink,#000);
  transform:translateX(100%);
  transition:transform .3s var(--ease, ease);
  box-shadow:-14px 0 44px rgba(0,0,0,.18);
}
.drawer[hidden]{ display:none; }
.drawer.is-open{ transform:translateX(0); }

.drawer__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 24px 16px;
}
.drawer__title{
  margin:0; display:flex; align-items:center; gap:10px;
  font-size:1.05rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.drawer__badge{
  display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px;
  border-radius:999px; background:var(--ink,#000); color:var(--paper,#fff);
  font-size:.78rem; font-weight:700; letter-spacing:0;
}
.drawer__close{
  background:none; border:0; cursor:pointer; color:inherit;
  width:38px; height:38px; display:grid; place-items:center; padding:0;
}

/* Прогресс до бесплатной доставки */
.drawer__ship{ padding:0 24px 18px; }
.drawer__track{ height:4px; background:var(--rule,#E2E2E2); overflow:hidden; }
.drawer__fill{ height:100%; width:0; background:#159A6B; transition:width .35s var(--ease, ease); }
.drawer__shiptext{ margin:10px 0 0; font-size:.86rem; color:#333; }
.drawer__shiptext b{ font-weight:700; }
.drawer__shiptext mark{ background:rgba(163,43,51,.14); padding:1px 5px; }

.drawer__body{ flex:1; overflow-y:auto; padding:0 24px 20px; }

/* Позиция заказа */
.drawer__line{
  display:grid; grid-template-columns:88px 1fr; gap:16px;
  padding:20px 0; border-top:1px solid var(--rule,#E2E2E2);
}
.drawer__thumb{ position:relative; aspect-ratio:1/1; background:var(--haze,#F1F1F1); }
.drawer__head{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; }
.drawer__name{ margin:0; font-size:1rem; font-weight:700; line-height:1.2; }
.drawer__price{ font-size:1rem; font-weight:600; white-space:nowrap; }
.drawer__opts{ margin:6px 0 0; font-size:.85rem; color:var(--muted,#6E6E6E); }
.drawer__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px;
}
.drawer__qty{ display:inline-flex; align-items:center; border:1px solid var(--rule,#E2E2E2); }
.drawer__qty button{
  width:32px; height:32px; background:none; border:0; cursor:pointer;
  font-size:1.1rem; line-height:1; color:inherit;
}
.drawer__qty button:disabled{ opacity:.3; cursor:not-allowed; }
.drawer__qty span{ min-width:34px; text-align:center; font-size:.95rem; }
.drawer__remove{
  background:none; border:0; cursor:pointer; padding:0; color:var(--muted,#6E6E6E);
  font-family:inherit; font-size:.86rem; text-decoration:underline; text-underline-offset:3px;
}
.drawer__remove:hover{ color:var(--ink,#000); }

/* Пустая корзина */
.drawer__empty{
  flex:1; display:grid; align-content:center; justify-items:center;
  gap:22px; text-align:center; padding:40px 24px;
}
.drawer__empty h3{ margin:0; font-size:1.5rem; font-weight:700; }
.drawer__cta{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:var(--ink,#000); color:var(--paper,#fff); border:0;
  font-family:inherit; font-size:.84rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:16px 40px;
}
.drawer__login{ margin:0; font-size:.92rem; color:var(--muted,#6E6E6E); }
.drawer__login a{ color:var(--ink,#000); }

/* Рекомендация */
.drawer__also{ padding-top:20px; border-top:1px solid var(--rule,#E2E2E2); }
.drawer__also h4{
  margin:0 0 14px; font-size:.74rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted,#6E6E6E);
}
.drawer__rec{ display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; text-decoration:none; }
.drawer__rec .drawer__thumb{ aspect-ratio:1/1; }
.drawer__rec p{ margin:0; }
.drawer__recname{ font-size:.95rem; font-weight:600; }
.drawer__recprice{ font-size:.9rem; color:var(--muted,#6E6E6E); }

/* Низ корзины */
.drawer__bottom{ padding:18px 24px 22px; border-top:1px solid var(--ink,#000); }
.drawer__sum{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:6px;
}
.drawer__sumkey{ font-size:1rem; font-weight:600; }
.drawer__sumval{ font-size:1.3rem; font-weight:800; }
.drawer__hint{ margin:0 0 16px; font-size:.82rem; color:var(--muted,#6E6E6E); }
.drawer__checkout{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--ink,#000); color:var(--paper,#fff); border:0; cursor:pointer;
  font-family:inherit; font-size:.86rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:19px;
}
.drawer__checkout:hover{ background:#222; }
.drawer__pay{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.drawer__pay span{
  display:inline-grid; place-items:center; height:24px; padding:0 10px; border-radius:4px;
  background:var(--haze,#F1F1F1); color:var(--ink,#000);
  font-size:.62rem; font-weight:800; letter-spacing:.04em;
}

/* Заглушка под фото внутри корзины */
.drawer__ph{
  position:absolute; inset:0; display:grid; place-content:center;
  background-image:repeating-linear-gradient(58deg, rgba(0,0,0,.055) 0 1px, transparent 1px 13px);
  font-size:.55rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(0,0,0,.38); text-align:center; padding:4px;
}

@media (max-width:520px){
  .drawer__line{ grid-template-columns:70px 1fr; gap:12px; }
  .drawer__top,
  .drawer__ship,
  .drawer__body,
  .drawer__bottom{ padding-inline:18px; }
}
@media (prefers-reduced-motion:reduce){
  .drawer,
  .drawer-veil,
  .drawer__fill{ transition:none; }
}