:root {
  --cart-glow-shadow: 0 0 10px rgba(255,255,255,.18), 0 0 22px rgba(255,255,255,.08);
  --cart-label-opacity: .92;
  --cart-sep-color: rgba(255,255,255,.14);
  --cart-sep-total: rgba(255,255,255,.22);
  --cart-label-gap: .45rem;
  --cart-label-size: 13.5px;
}


#cart-btn, .cart, .topbar .cart-btn, [data-role="cart-btn"] {
  position: relative;
  outline: none;
  box-shadow: var(--cart-glow-shadow);
  transition: box-shadow .2s ease, transform .12s ease;
  border-radius: 10px;
}
#cart-btn:hover,
.cart:hover,
.topbar .cart-btn:hover,
[data-role="cart-btn"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(255,255,255,.26), 0 0 30px rgba(255,255,255,.12);
}


.cart-label {
  margin-left: var(--cart-label-gap);
  font-weight: 600;
  letter-spacing: .06em;
  opacity: var(--cart-label-opacity);
  font-size: var(--cart-label-size);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}


#cart-drawer, 


.cart-items .cart-item,
.cart-list .cart-item,
.cart-body .cart-row {
  border-bottom: 1px dashed var(--cart-sep-color);
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}


.cart-totals, .cart-footer, .cart-summary {
  border-top: 1px solid var(--cart-sep-total);
  margin-top: .75rem;
  padding-top: .75rem;
}


.cart-actions .btn,
.cart-footer .btn,
.cart-summary .btn {
  transition: transform .12s ease, box-shadow .2s ease;
}
.cart-actions .btn:hover,
.cart-footer .btn:hover,
.cart-summary .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--cart-glow-shadow);
}


:root{
  --neon-color: #24ffd7;
  --neon-soft:  rgba(36,255,215,.32);
  --neon-strong:rgba(36,255,215,.95);
}
#cartDialog [data-cart-row]{ position:relative; padding-top:14px; margin-top:14px; }
#cartDialog [data-cart-row]::before{ content:none; }
#cartDialog [data-cart-row] + [data-cart-row]::before,
#cartDialog [data-cart-rows] > [data-cart-row]:not(:first-child)::before{
  content:""; position:absolute; left:8px; right:8px; top:0; height:2px; border-radius:999px;
  background: linear-gradient(90deg, transparent 0%, var(--neon-soft) 12%, var(--neon-strong) 50%, var(--neon-soft) 88%, transparent 100%);
  box-shadow: 0 0 6px var(--neon-color), 0 0 14px var(--neon-soft), inset 0 0 6px var(--neon-soft);
  opacity: .95;
}













.cart-line{
  display:grid; grid-template-columns: 56px 1fr auto auto 28px; gap:12px; align-items:center;
  padding:12px; border-radius:14px; position:relative; background:rgba(255,255,255,.02);
}

.cart-line + .cart-line::before{
  content:""; position:absolute; left:12px; right:12px; top:-6px; height:2px;
  background: radial-gradient(closest-side, rgba(77,146,255,.9), rgba(77,146,255,.35) 60%, transparent 70%),
              linear-gradient(90deg, rgba(77,146,255,.0), rgba(77,146,255,.85), rgba(77,146,255,.0));
  filter: drop-shadow(0 0 6px rgba(77,146,255,.65));
}
.c-thumb img{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:#121826; }
.c-title{ color:#e6eeff; font-weight:600; }
.c-price{ color:#a9b7d9; font-weight:600; }
.c-qty{ display:flex; align-items:center; gap:6px; }
.c-qty input{ width:52px; background:#0b101a; color:#e7efff; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px; }
.c-qty button{ width:28px; height:28px; border-radius:9px; background:#111a2a; color:#bfd1ff; border:1px solid rgba(255,255,255,.08); }
.c-remove{ cursor:pointer; color:#ff9aa5; text-align:center; }
.no-scroll{ overflow:hidden; }


.tile .cat-img, .category-card img{ width:100%; height:130px; object-fit:cover; border-radius:12px; background:#0e1320; }




.mini-cart, .mini_cart, .cart-drawer, .cart_drawer, .cart-popup, .cart_popup {
  display: none !important;
  visibility: hidden !important;
}


/* Мобильная корзина — фиксим высоту и скролл тела */
#cartDialog::backdrop {
  background: rgba(0,0,0,.5);
}

#cartDialog .sheet {
  /* убираем жёсткие отступы и клиппинг из inline-стиля */
  margin: 8px auto !important;
  width: min(92vw, 720px);
  max-height: calc(100dvh - 16px); /* 100dvh = реальная высота экрана с клавиатурой */
  display: flex;
  flex-direction: column;
  overflow: visible !important; /* разрешаем потомку прокручиваться */
}

/* шапка — фиксируем сверху, чтобы всегда была видна */
#cartDialog .sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface, #0f141c);
}

/* тело — даём скролл вместо обрезания */
#cartDialog .sheet-body {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

/* нижняя панель с кнопками — фиксируем у низа видимой области тела */
#cartDialog .sheet-body > div:last-child {
  position: sticky;
  bottom: 0;
  background: var(--surface, #0f141c);
  padding: 8px 0;
}

/* fallback для старых браузеров без 100dvh */
@supports not (height: 100dvh) {
  #cartDialog .sheet { max-height: calc(100vh - 16px); }
}

/* компактнее на очень узких экранах */
@media (max-width: 400px) {
  #cartDialog .sheet { width: 94vw; }
  #cartDialog .pd-title { font-size: 18px; line-height: 1.2; }
}




/* ====== MOBILE CART READABILITY ====== */

/* Общая типографика модалки */
#cartDialog .sheet {
  letter-spacing: .1px;
}
#cartDialog .pd-title { /* Заголовок "Кошик" и "Итого" */
  font-weight: 800;
  letter-spacing: .2px;
}

/* Строка корзины: гибкая трёхзонная сетка */
#cartList > * {
  display: grid;
  grid-template-columns: 56px 1fr auto;   /* фото | название | сумма */
  grid-template-rows: auto auto;          /* 1: название (+цена за шт), 2: qty/кнопки */
  grid-column-gap: 10px;
  grid-row-gap: 8px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Фото */
#cartList img, #cartList .thumb, #cartList [data-thumb] {
  width: 56px; height: 56px; object-fit: cover; border-radius: 10px;
  background: var(--photo-bg, #0d1220);
  grid-row: 1 / span 2;
}

/* Название товара — максимум 3 строки, компактнее */
#cartList .title, #cartList [data-title] {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  color: #e9eef9;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Цена за единицу (рядом с названием, поменьше и полегче) */
#cartList .price-each, #cartList [data-price-each] {
  font-size: 12px; opacity: .75; margin-top: 4px;
}

/* Сумма по строке — всегда справа, акцент */
#cartList .sum, #cartList [data-sum] {
  grid-column: 3; grid-row: 1 / span 2;
  text-align: right;
  font-weight: 800; font-size: 15px;
  white-space: nowrap;
  align-self: center;
}

/* Блок счётчика */
#cartList .qty, #cartList [data-qty-wrap] {
  grid-column: 2; grid-row: 2;
  display: inline-flex; gap: 6px; align-items: center;
}

/* Кнопки − / + — крупные тап-зоны */
#cartList .qty .btn, #cartList .btn-qty, 
#cartList button[aria-label*="-"], #cartList button[aria-label*="+"] {
  width: 40px; height: 36px; min-width: 40px;
  border-radius: 12px;
}

/* Поле количества */
#cartList .qty input, #cartList [data-qty] {
  width: 56px; height: 36px;
  text-align: center; border-radius: 12px;
  font-weight: 700;
}

/* Иконка удалить — выносим ближе к сумме, чтобы не прыгала */
#cartList .del, #cartList [data-del] {
  opacity: .7; margin-left: 8px;
}
#cartList .sum + .del, #cartList [data-sum] + [data-del] {
  display: inline-flex; vertical-align: middle;
}

/* Подвал с кнопками — читаемый, не прилипает к краю */
#cartDialog .sheet-body > div:last-child {
  gap: 10px;
}
#cartDialog .sheet-body > div:last-child .btn {
  height: 42px; border-radius: 12px; padding: 0 16px;
  font-weight: 700;
}

/* Компактный режим для очень узких экранов */
@media (max-width: 380px) {
  #cartList > * {
    grid-template-columns: 48px 1fr auto;
  }
  #cartList img, #cartList .thumb, #cartList [data-thumb] {
    width: 48px; height: 48px; border-radius: 8px;
  }
  #cartList .title, #cartList [data-title] { font-size: 13px; }
  #cartList .sum, #cartList [data-sum] { font-size: 14px; }
  #cartList .qty .btn, #cartList .btn-qty { width: 36px; height: 34px; }
  #cartList .qty input, #cartList [data-qty] { width: 50px; height: 34px; }
}

/* Повышаем контраст разделителей и сумм на тёмной теме */
#cartDialog .sheet { --divider: rgba(255,255,255,.08); }
#cartList > * { border-bottom-color: var(--divider); }
#cartDialog #cartTotal { font-weight: 900; letter-spacing: .3px; }









/* === MOBILE CART • COMPACT & NEAT === */

/* строка корзины:  название | цена/шт | сумма */
#cartList > *{
  display:grid;
  grid-template-columns: 1fr auto auto;  /* title | price-each | sum */
  grid-template-rows: auto auto;         /* row1: title+prices, row2: qty */
  align-items:center;
  column-gap:10px;
  row-gap:8px;
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* название товара — меньше, максимум 2 строки */
#cartList .title, #cartList [data-title]{
  grid-column:1; grid-row:1;
  font-size:13px;           /* ↓ было крупно */
  line-height:1.25;
  font-weight:600;
  color:#e9eef9;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
  margin-right:4px;
}

/* цена за штуку (слева от суммы) — полегче, компактнее */
#cartList .price-each, #cartList [data-price-each]{
  grid-column:2; grid-row:1;
  text-align:right;
  font-size:12px;
  opacity:.75;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

/* сумма по строке — акцент, справа */
#cartList .sum, #cartList [data-sum]{
  grid-column:3; grid-row:1 / span 2;
  text-align:right;
  font-size:14.5px;
  font-weight:800;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

/* блок количества — под названием, по сетке */
#cartList .qty, #cartList [data-qty-wrap]{
  grid-column:1 / span 2; grid-row:2;
  display:inline-flex; gap:8px; align-items:center;
  margin-top:2px;
}

/* кнопки −/+ и поле количества — компактные, но тач-удобные */
#cartList .qty .btn, #cartList .btn-qty,
#cartList button[aria-label*="-"], #cartList button[aria-label*="+"]{
  width:36px; height:34px; min-width:36px;
  border-radius:10px;
}
#cartList .qty input, #cartList [data-qty]{
  width:52px; height:34px;
  text-align:center;
  border-radius:10px;
  font-weight:700;
}

/* иконка удаления — возле суммы, аккуратно выровнена */
#cartList .del, #cartList [data-del]{
  margin-left:8px; opacity:.7;
}
#cartList .sum + .del, #cartList [data-sum] + [data-del]{ display:inline-flex; }

/* подвал: ровные кнопки */
#cartDialog .sheet-body > div:last-child{
  gap:10px;
}
#cartDialog .sheet-body > div:last-child .btn{
  height:42px; border-radius:12px; padding:0 16px; font-weight:700;
}

/* очень узкие экраны */
@media (max-width:360px){
  #cartList .title, #cartList [data-title]{ font-size:12.5px; }
  #cartList .price-each{ font-size:11.5px; }
  #cartList .sum{ font-size:14px; }
  #cartList .qty .btn{ width:34px; height:32px; }
  #cartList .qty input{ width:48px; height:32px; }
}





#cartList .price-each, #cartList [data-price-each]{ font-size: 11.5px; }
#cartList .sum, #cartList [data-sum]{ font-size: 13.5px; }

/* 4) Кнопки количества остаются тач-удобными, но компактнее */
#cartList .qty .btn, #cartList .btn-qty,
#cartList button[aria-label*="-"], #cartList button[aria-label*="+"]{
  width: 32px; height: 30px; min-width: 32px; border-radius: 10px;
}
#cartList .qty input, #cartList [data-qty]{
  width: 46px; height: 30px; border-radius: 10px; font-weight: 700;
}








/* === MOBILE CART • SHRINK INSIDE ONLY (container stays same) === */

/* Базово уменьшаем типографику и отступы внутри корзины */
#cartDialog .sheet { font-size: .90rem; }              /* -10% ко всему контенту */
#cartDialog .sheet-head { padding: 8px 10px; }
#cartDialog .sheet-body { padding: 8px 10px; }

/* Строки корзины: компактная сетка и отступы */
#cartList > *{
  display: grid;
  grid-template-columns: 1fr auto auto;   /* title | price-each | sum */
  grid-template-rows: auto auto;          /* 1: title+prices, 2: qty */
  column-gap: 8px; row-gap: 6px;
  padding: 8px 6px;                       /* было больше */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Название — меньше и максимум 2 строки */
#cartList .title, #cartList [data-title]{
  grid-column:1; grid-row:1;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}

/* Цена за шт. — компактная */
#cartList .price-each, #cartList [data-price-each]{
  grid-column:2; grid-row:1;
  text-align:right;
  font-size: 11.5px;
  opacity:.8; white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

/* Сумма — акцент, но чуть меньше */
#cartList .sum, #cartList [data-sum]{
  grid-column:3; grid-row:1 / span 2;
  text-align:right;
  font-size: 13.5px;
  font-weight: 800; white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

/* Блок количества: компактнее, но тач-удобный */
#cartList .qty, #cartList [data-qty-wrap]{ grid-column:1 / span 2; grid-row:2; display:inline-flex; gap:6px; align-items:center; }
#cartList .qty .btn, #cartList .btn-qty,
#cartList button[aria-label*="-"], #cartList button[aria-label*="+"]{
  width: 32px; height: 30px; min-width: 32px; border-radius: 10px;
}
#cartList .qty input, #cartList [data-qty]{
  width: 46px; height: 30px; text-align:center; border-radius:10px; font-weight:700;
}

/* Иконка удалить — компактнее */
#cartList .del, #cartList [data-del]{ transform: scale(.9); margin-left:6px; opacity:.75; }

/* Подвал: кнопки ниже и компактнее */
#cartDialog .sheet-body > div:last-child{ gap:8px; padding: 8px 0; }
#cartDialog .sheet-body > div:last-child .btn{
  height: 38px; border-radius: 10px; padding: 0 14px; font-weight: 700; font-size: .95em;
}

/* Сумма итога — чуть меньше, но жирная */
#cartDialog #cartTotal{ font-weight: 900; font-size: 15px; }

/* Очень узкие телефоны — ещё на шаг компактнее */
@media (max-width: 360px){
  #cartDialog .sheet { font-size: .88rem; }
  #cartList .title{ font-size: 12px; }
  #cartList .price-each{ font-size: 11px; }
  #cartList .sum{ font-size: 13px; }
  #cartList .qty .btn{ width: 30px; height: 28px; }
  #cartList .qty input{ width: 44px; height: 28px; }
}