/* ========== CART UI NEW (simple always-visible) ========== */

:root {
  --cart-accent: #214a76;
  --cart-accent-2: #15314f;
  --cart-dark: #101828;
  --cart-border: rgba(16, 24, 40, .12);
  --cart-shadow: 0 10px 22px rgba(16, 24, 40, .10);
  --cart-soft: 0 6px 16px rgba(16,24,40,.08);
  --cart-radius: 12px;
  --cart-h: 44px;
  --cart-gap: 8px;
}

/* Наш блок управления */
.cart-ui-new {
  margin-top: 10px;
  position: relative;
  z-index: 5;
}

/* ===== Кнопка "В корзину" — ВСЕГДА ВИДНА (и на ПК, и на мобилке) ===== */
.cart-ui-new__add {
  width: 100%;
  height: var(--cart-h);
  border: 0;
  border-radius: var(--cart-radius);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, var(--cart-accent), var(--cart-accent-2));
  box-shadow: var(--cart-shadow);
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cart-ui-new__add{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.cart-ui-new__add i{
  font-size:16px;
  opacity:.95;
}

/* Shine при наведении */
@media (hover:hover) and (pointer:fine){
  .cart-ui-new__add::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-40%;
    width:40%;
    height:340%;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
    transform:rotate(18deg);
    opacity:0;
  }
  .cart-ui-new__add:hover::before{
    opacity:1;
    animation:cartShine .9s ease forwards;
  }
  @keyframes cartShine{
    0%{ transform:translateX(-40%) rotate(18deg); }
    100%{ transform:translateX(420%) rotate(18deg); }
  }
}

/* ===== Состояние is-in-cart ===== */
<!--.cart-ui-new.is-in-cart .cart-ui-new__add { display: none !important; }-->
.cart-ui-new__qty[hidden] { display: none !important; }
.cart-ui-new.is-in-cart .cart-ui-new__qty {display: grid !important;justify-items: center;}

.cart-ui-new__qty{
  width:100%;
  height:44px;
  display:grid;
  grid-template-columns:44px 1fr 44px 48px; /* стрелка чуть шире */
  gap:10px;
  align-items:center;
}

.cart-ui-new__btn{
  width: 34px;
  height: 34px;
  border-radius:12px;
  border:1px solid rgba(16,24,40,.12);
  background:#fff;
  color:#101828;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(16,24,40,.08);
}

.cart-ui-new__input{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(16,24,40,.12);
  background:#fff;
  text-align:center;
  font-weight:800;
  color:#101828;
  box-sizing:border-box;
  padding:0 8px;
}

/* Стрелка */
.cart-ui-new__go{
  width: 48px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  background: #fff;
  border: 1px solid rgba(16,24,40,.12);
  box-shadow: 0 6px 16px rgba(16,24,40,.08);
  color: #214a76;
  font-size: 18px;
}

/* УБРАТЬ это полностью если было:
.cart-ui-new__go::after { content:"→"; ... }
*/
.cart-ui-new__go::after{ content:none !important; }

@media (hover:hover) and (pointer:fine){
  .cart-ui-new__btn:hover,
  .cart-ui-new__go:hover{
    transform: translateY(-1px);
    transition: transform .12s ease;
  }
}
/* Fix: чтобы поле количества не схлопывалось до 18px */
.cart-ui-new.is-in-cart .cart-ui-new__qty{
  justify-items: stretch; /* вместо center */
}

.cart-ui-new__qty{
  gap: 6px; /* было 10px */
  grid-template-columns: 34px minmax(72px, 1fr) 34px 44px;
}

.cart-ui-new__btn{
  width: 34px;
  height: 34px;
}

.cart-ui-new__go{
  width: 44px; /* было 48px */
  height: 44px;
}

.cart-ui-new__input{
  min-width: 72px;     /* ключевое: не даём схлопнуться */
  font-size: 16px;     /* чтобы цифры читались */
  line-height: 44px;   /* визуально центрирует текст по высоте */
}
/* чтобы НЕ распирало карточку и инпут не схлопывался */
.cart-ui-new.is-in-cart .cart-ui-new__qty{
  justify-items: stretch; /* вместо center */
}

/* сетка должна уметь ужиматься в 0..N, а не требовать min-width */
.cart-ui-new__qty{
  gap: 6px; /* было 10px */
  grid-template-columns: 34px minmax(0, 1fr) 34px 44px; /* ключевое: minmax(0,1fr) */
}

/* кнопки компактнее (у вас .cart-ui-new__btn уже 34x34 :contentReference[oaicite:2]{index=2}) */
.cart-ui-new__go{
  width: 44px; /* было 48px :contentReference[oaicite:3]{index=3} */
}

/* инпут: разрешаем сжиматься, но сохраняем читабельность */
.cart-ui-new__input{
  min-width: 0;        /* важно: разрешить grid-сжатию */
  padding: 0 6px;      /* было 0 8px :contentReference[oaicite:4]{index=4} */
  font-size: 16px;
}
/* Chrome, Safari, Edge */
.cart-ui-new__input::-webkit-outer-spin-button,
.cart-ui-new__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.cart-ui-new__input{
  -moz-appearance: textfield;
}
.cart-ui-new__go{
  background: #ffffff;
  border: 1px solid #e4e4e4;
  color: #e31e24;               /* SVG возьмёт currentColor => будет белым */
  box-shadow: 0 10px 22px rgba(16,24,40,.12);
}

@media (hover:hover) and (pointer:fine){
  .cart-ui-new__go:hover{
    background: #f3f3f3;
    border-color: #e4e4e4;
  }
}

.cart-ui-new__go svg{
  display:block;
}
/* ===== Mobile tune: узкие карточки, чтобы цифра всегда была видна ===== */
@media (max-width: 480px){
  .cart-ui-new{
    margin-top: 8px;
  }

  /* В in-cart пусть элементы тянутся, не центрятся */
  .cart-ui-new.is-in-cart .cart-ui-new__qty{
    justify-items: stretch !important;
    gap: 6px !important;
    height: 40px !important;
    /* компактная сетка: фикс-кнопки меньше, поле с минимальной шириной */
    grid-template-columns: 32px minmax(44px, 1fr) 32px 40px !important;
  }

  .cart-ui-new__btn{
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(16,24,40,.08) !important;
  }

  .cart-ui-new__input{
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 4px !important;
    min-width: 44px !important;   /* именно для мобилки — чтобы цифра не пропадала */
    font-size: 16px !important;
    line-height: 40px !important;
  }

  .cart-ui-new__go{
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  /* “В корзину” тоже чуть ниже по высоте */
  .cart-ui-new__add{
    height: 40px !important;
    border-radius: 12px !important;
  }
}
@media (max-width: 480px){

  /* 1) Запрещаем карточке расширяться от содержимого */
  .product-item-container,
  .product-item,
  .product-item > *{
    min-width: 0;
  }

  /* 2) Сам контрол тоже не должен тянуть родителя */
  .cart-ui-new,
  .cart-ui-new__qty{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* 3) ВАЖНО: снимаем min-width с input (он и распирает) */
  .cart-ui-new__input{
    min-width: 0 !important;
  }

  /* 4) Чтобы цифра всё равно читалась — делаем элементы ещё компактнее */
  .cart-ui-new.is-in-cart .cart-ui-new__qty{
    gap: 6px !important;
    grid-template-columns: 30px minmax(0, 1fr) 30px 38px !important;
  }

  .cart-ui-new__btn{
    width: 30px !important;
    height: 30px !important;
  }

  .cart-ui-new__go{
    width: 38px !important;
    height: 38px !important;
  }

  .cart-ui-new__input{
    font-size: 16px !important;
    padding: 0 4px !important;
    text-align: center;
  }
}
.cart-ui-new__add{
  transition: transform .28s ease, opacity .18s ease;
}
.cart-ui-new__qty{
  transition: transform .28s ease, opacity .22s ease;
}

.cart-ui-new.is-switching .cart-ui-new__add{
  transform: translateX(18px);
  opacity: 0;
  pointer-events: none;
}

.cart-ui-new:not(.is-in-cart) .cart-ui-new__qty{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.cart-ui-new.is-in-cart .cart-ui-new__qty{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* переходы по data-атрибутам (точно совпадёт с JS) */
[data-cart-new-add]{
  transition: transform .28s ease, opacity .18s ease;
  will-change: transform, opacity;
}

[data-cart-new-qty]{
  transition: transform .28s ease, opacity .22s ease;
  will-change: transform, opacity;
}

.cart-ui-new.is-switching [data-cart-new-add]{
  transform: translateX(18px);
  opacity: 0;
  pointer-events: none;
}

.cart-ui-new:not(.is-in-cart) [data-cart-new-qty]{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.cart-ui-new.is-in-cart [data-cart-new-qty]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* По умолчанию hidden пусть реально скрывает */
[data-cart-new-qty][hidden] { display: none !important; }
[data-cart-new-add][hidden] { display: none !important; }

/* Но во время анимации мы покажем оба элемента */

/* Анимируем именно по data-атрибутам (точно попадёт в твой DOM) */
[data-cart-new-add]{
  transition: transform .30s ease, opacity .20s ease;
  transform-origin: right center;
  will-change: transform, opacity;
}

[data-cart-new-qty]{
  transition: transform .30s ease, opacity .22s ease;
  will-change: transform, opacity;
}

/* Старт: qty невидим, но занимает место только когда показан (не hidden) */
.cart-ui-new:not(.is-in-cart) [data-cart-new-qty]{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* Фаза "переключение": кнопка сжимается и уезжает вправо */
.cart-ui-new.is-switching [data-cart-new-add]{
  transform: translateX(24px) scaleX(.35);
  opacity: 0;
  pointer-events: none;
}

/* Финал: qty показываем */
.cart-ui-new.is-in-cart [data-cart-new-qty]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Не скрываем add через display:none — скрываем через hidden (JS ставит hidden после 300мс) */
[data-cart-new-add][hidden]{ display:none !important; }
[data-cart-new-qty][hidden]{ display:none !important; }

/* Анимация */
[data-cart-new-add]{
  transition: transform .30s ease, opacity .20s ease;
  transform-origin: right center;
  will-change: transform, opacity;
}
[data-cart-new-qty]{
  transition: transform .30s ease, opacity .22s ease;
  will-change: transform, opacity;
}

/* Переход: кнопка "уезжает вправо и сжимается" */
.cart-ui-new.is-switching [data-cart-new-add]{
  transform: translateX(24px) scaleX(.35);
  opacity: 0;
  pointer-events: none;
}

/* qty плавно появляется */
.cart-ui-new:not(.is-in-cart) [data-cart-new-qty]{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.cart-ui-new.is-in-cart [data-cart-new-qty]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* ===== Morph animation: big add button -> small right button ===== */

/* База */
[data-cart-new-add]{
  position: relative;
  overflow: hidden;
  will-change: transform, clip-path, opacity;
  transform: translateZ(0);
}

/* Чтобы текст/иконка плавно уходили */
[data-cart-new-add] *{
  will-change: transform, opacity;
}

/* ВАЖНО: определяем "маленькую" ширину и гэп (подгони при необходимости) */
:root{
  --cart-go-w: 44px;   /* ширина маленькой кнопки справа */
  --cart-gap: 8px;     /* расстояние между элементами */
}

/* На мобилке у тебя go меньше — можно так (если уже есть моб-правила, подстрой) */
@media (max-width: 480px){
  :root{ --cart-go-w: 40px; }
}

/* Стартовое состояние кнопки */
.cart-ui-new [data-cart-new-add]{
  clip-path: inset(0 0 0 0 round 12px);
  opacity: 1;
  transition:
    transform .32s cubic-bezier(.2,.9,.2,1),
    clip-path .22s cubic-bezier(.3,1.35,.5,1),
    opacity .18s ease;
}

/* Фаза переключения:
   - "съедаем" левую часть кнопки, оставляя справа полоску шириной var(--cart-go-w)
   - и сдвигаем вправо на (100% - var(--cart-go-w)), но т.к. 100% в transform нет,
     используем translateX и подбираем пикселями через calc от фактической ширины
     => поэтому делаем проще: сдвиг небольшой + clip-path делает основную работу
*/
.cart-ui-new.is-switching [data-cart-new-add]{
  /* оставляем справа кусок шириной var(--cart-go-w) */
  clip-path: inset(0 0 0 calc(100% - var(--cart-go-w)) round 12px);

  /* небольшой сдвиг вправо чтобы визуально "припарковать" */
  transform: translateX(10px);

  opacity: .0;
  pointer-events: none;
}

/* Текст/иконка внутри быстрее исчезают */
.cart-ui-new.is-switching [data-cart-new-add] .cart-ui-new__text,
.cart-ui-new.is-switching [data-cart-new-add] span,
.cart-ui-new.is-switching [data-cart-new-add] svg,
.cart-ui-new.is-switching [data-cart-new-add] i{
  opacity: 0;
  transform: translateX(8px);
  transition: transform .18s ease, opacity .18s ease;
}
/* ===== Stable morph animation: no mobile gap ===== */
.cart-ui-new{
  position: relative;
  min-height: var(--cart-h);
}

/* во время анимации qty накладывается поверх, а не добавляет высоту */
.cart-ui-new.is-switching [data-cart-new-qty]{
  position: absolute;
  inset: 0;
  margin: 0 !important;
}

/* НИКАКОГО padding-bottom на мобилке */
@media (max-width: 480px){
  .cart-ui-new{
    min-height: 40px;
  }

  .cart-ui-new.is-switching{
    padding-bottom: 0 !important;
  }
}
/* qty: плавное появление */
[data-cart-new-qty]{
  transition: transform .30s ease, opacity .22s ease;
  will-change: transform, opacity;
}

.cart-ui-new:not(.is-in-cart) [data-cart-new-qty]{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.cart-ui-new.is-in-cart [data-cart-new-qty]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* скрытие через hidden */
[data-cart-new-add][hidden],
[data-cart-new-qty][hidden]{
  display: none !important;
}
[data-cart-new-add]{
  position: relative;
  overflow: hidden;
  will-change: transform, clip-path, opacity;
  transform: translateZ(0);
  -webkit-clip-path: inset(0 0 0 0 round 12px);
  clip-path: inset(0 0 0 0 round 12px);
  transition:
    transform .32s cubic-bezier(.2,.9,.2,1),
    -webkit-clip-path .22s cubic-bezier(.3,1.35,.5,1),
    clip-path .22s cubic-bezier(.3,1.35,.5,1),
    opacity .18s ease;
}

:root{ --cart-go-w: 44px; }
@media (max-width:480px){ :root{ --cart-go-w: 40px; } }

.cart-ui-new.is-switching [data-cart-new-add]{
  -webkit-clip-path: inset(0 0 0 calc(100% - var(--cart-go-w)) round 12px);
  clip-path: inset(0 0 0 calc(100% - var(--cart-go-w)) round 12px);
  transform: translateX(10px);
  opacity: 0;
  pointer-events: none;
}