/* ===================== БАЗОВЫЕ СТИЛИ (десктоп/та블) ===================== */

/* Панель количества в карточке */
.sp-qty-panel {
    display: none;
    background: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: .5rem;
    padding: .75rem;
    margin-top: .75rem;
}

.sp-qty-panel.show {
    display: block;
}

/* Плавающая кнопка перехода в корзину */
.sp-floating-cart {
    position: fixed;
    z-index: 1050;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding: 1rem 1.25rem;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, .12);
}

@media (min-width: 992px) {
    .sp-floating-cart {
        width: auto;
        left: auto;
        right: 24px;
        bottom: auto;
        top: 100px;
        border-radius: .75rem;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    }
}

/* Заголовок карточки (две строки) */
.sp-title {
    line-height: 1.1;
}

.sp-title-main {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .2px;
}

.sp-title-accent {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: .6px;
    /* text-transform: uppercase; */
}

/* Фото в карточке */
.sp-card-thumb {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Ряд товара в корзине */
.sp-cart-item {
    border-bottom: 1px solid #e9ecef;
    padding: .75rem 0;
}

.sp-cart-item:last-child {
    border-bottom: 0;
}

.sp-cart-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: .5rem;
    /* border: 1px solid #e5e7eb; */
    flex: 0 0 auto;
}
.sp-card-thumb {
        display: block;
        width: 260px;
        height: 260px;
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
        max-width: none;
    }

.sp-cart-title .sp-title-main {
    display: block;
    font-size: .95rem;
    font-weight: 700;
}

.sp-cart-title .sp-title-accent {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .6px;
    /* text-transform: uppercase; */
}

/* Бейдж количества в шапке */
.sp-cart.btn .badge {
    font-size: .7rem;
    min-width: 1.35rem;
    height: 1.35rem;
    line-height: 1.35rem;
    padding: 0px 8px 0px 8px;
}

/* Ограничение ширины инпут-группы на больших экранах */
.sp-cart-item .input-group {
    max-width: 100px;
}

/* ===================== МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */

@media (max-width: 576.98px) {

    /* Перестановка колонок: сначала итоги/форма, потом список товаров */
    #spCartContent {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #spCartContent>.col-12.col-lg-4 {
        order: -1;
    }

    /* блок з підсумком нагору */

    /* Уплотняем карточки, убираем лишние отступы у контейнеров */
    .card .card-body {
        padding: .9rem;
    }

    /* Строка товара — в колонку, всё тянется по ширине */
    .sp-cart-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        padding: .75rem 0;
    }

    /* Левая часть: миниатюра + заголовок — в один ряд, потом переносятся */
    .sp-cart-item .d-flex.align-items-center.gap-3.flex-grow-1 {
        gap: 4rem !important;
    }

    .sp-cart-thumb {
        width: 120px;
        height: 100px;
        border-radius: .4rem;
    }

    /* Фото в карточке — строго по центру 200x200 */
    .sp-card-thumb {
        display: block;
        width: 240px;
        height: 240px;
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
        max-width: none;
    }

    /* Тексты не должны вываливаться по ширине */
    .sp-cart-title {
        min-width: 0;
        /* важный хак для обрезки */
        word-break: break-word;
    }

    .sp-cart-title .sp-title-main,
    .sp-cart-title .sp-title-accent {
        font-size: .92rem;
        line-height: 1.15;
    }

    /* Правая часть (кол-во/сумма/удалить) — переносим и растягиваем */
    .sp-cart-item .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        gap: .5rem !important;
        justify-content: space-between;
    }

    /* Инпут-группа на всю ширину, чтобы не вылезала */
    .sp-cart-item .input-group {
        max-width: 40% !important;
    }

    .sp-cart-item .input-group .form-control {
        text-align: center;
        font-size: 16px;
        /* фиксим зум на iOS при фокусе */
    }

    .sp-cart-item [data-role="sum"] {
        margin-left: auto;
    }

    /* Кнопка "Удалить" — компактнее, но кликабельная */
    .sp-cart-item .btn-link.text-danger {
        padding: .25rem 0 !important;
    }

    /* Формы: крупнее поля, чтобы не было зума и легче тачить */
    #spCheckout .form-control {
        font-size: 16px;
        /* предотвращает авто-zoom iOS */
        padding: .625rem .75rem;
    }

    /* Заголовки и цифры подсумков поменьше, чтобы не переносились уродливо */
    .card .h5 {
        font-size: 1.05rem;
    }

    #spSumSubtotal,
    #spSumTotal {
        font-size: 1.05rem;
    }

    /* Плавающая кнопка уже фиксируется снизу — оставляем как есть */
}

/* ===================== СРЕДНИЕ ЭКРАНЫ (доп. полировка) ===================== */

@media (min-width: 577px) and (max-width: 767.98px) {

    /* немного шире поля количества */
    .sp-cart-item .input-group {
        max-width: 150px;
    }
}

/* ===================== МЕЛКИЕ УЛУЧШЕНИЯ УНИВЕРСАЛЬНО ===================== */

/* Безопасная обрезка очень длинных слов (артикулы, номенклатура) */
.sp-cart-title,
.sp-cart-title * {
    overflow-wrap: anywhere;
}

/* Ссылки "Удалить" не должны тянуть верстку */
.sp-cart-item .btn-link {
    white-space: nowrap;
}

.sp-cart-item .btn-link.text-danger .fa-trash-can{ vertical-align: -0.05em; }
@media (max-width: 576.98px){
  .sp-cart-item .btn-link.text-danger{ padding: 0 .125rem !important; }
}

/* Крупные кнопки +/- и поле количества в корзине */
.sp-cart-item .input-group{
  max-width: 150px !important;
}
.sp-cart-item .input-group .btn{
  padding: 0 !important;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;            /* размер знаков − / + */
}
.sp-cart-item .input-group .form-control{
  height: 40px;
  font-size: 18px;
  text-align: center;
}

/* Чуть компактнее на очень узких экранах */
@media (max-width: 576.98px){
  .sp-cart-item .input-group{ max-width: 150px !important; }
  .sp-cart-item .input-group .btn{
    width: 36px; height: 36px; line-height: 36px; font-size: 18px;
  }
  .sp-cart-item .input-group .form-control{
    height: 36px; font-size: 17px;
  }
}



/* === Qty panel: стеклянная карточка + анимации === */
.sp-qty-panel{
  /* визуал */
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  /* отступы */
  padding: .9rem;
  margin-top: .75rem;

  /* анимация появления */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .35s cubic-bezier(.2,.8,.2,1),
    opacity .28s ease,
    transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: max-height, opacity, transform;
}
.sp-qty-panel.show{
  max-height: 320px;         /* достаточно для контента */
  opacity: 1;
  transform: translateY(0);
}

/* подпись */
.sp-qty-panel .form-label{
  font-weight: 600;
  color: #111827;            /* slate-900 */
  margin-bottom: .5rem !important;
}

/* === Инпут-группа: крупнее, с тенями и обводкой === */
.sp-qty-panel .input-group{
  max-width: 150px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) inset;
  overflow: hidden;
}
.sp-qty-panel .input-group .btn{
  background: linear-gradient(180deg, #ffaf01, #f3f4f6);
  border: 1px solid #e5e7eb;
  width: 42px;
  height: 42px;
  line-height: 42px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  color: #374151;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
.sp-qty-panel .input-group .btn:hover{
  filter: brightness(1.02);
}
.sp-qty-panel .input-group .btn:active,
.sp-qty-panel .input-group .btn.sp-tap{
  transform: scale(.96);
  filter: brightness(.98) contrast(1.02);
}
.sp-qty-panel .input-group .form-control{
  height: 42px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  text-align: center;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.sp-qty-panel .input-group .form-control:focus{
  box-shadow: 0 0 0 4px rgba(59,130,246,.15); /* soft focus ring */
  border-color: #93c5fd;
}

/* сумма под панелью */
.sp-qty-panel .small{
  color: #6b7280;            /* slate-500 */
}

/* === Адаптив === */
@media (max-width: 576.98px){
  .sp-qty-panel{ padding: .8rem; border-radius: 12px; }
  .sp-qty-panel .input-group{ max-width: 100%; }
  .sp-qty-panel .input-group .btn,
  .sp-qty-panel .input-group .form-control{
    height: 45px;
  }
  .sp-qty-panel .input-group .btn{ width: 40px; font-size: 18px; }
}
@media (min-width: 992px){
  /* немного плотнее на десктопе */
  .sp-qty-panel{ padding: .9rem 1rem; }
}

/* === Тёмные темы (если страница dark) — лёгкая компенсация контраста === */
@media (prefers-color-scheme: dark){
  .sp-qty-panel{
    background: transparent;
    border-color: rgba(255,255,255,.06);
  }
  .sp-qty-panel .form-label{ color: #353e4e; }
  .sp-qty-panel .input-group .btn{ background: linear-gradient(180deg, #374151, #1f2937); color:#e5e7eb; border-color:#374151; }
  .sp-qty-panel .input-group .form-control{ background:#111827; color:#f9fafb; border-color:#374151; }
  .sp-qty-panel .small{ color:#9ca3af; }
}

/* === Уважение к reduce motion === */
@media (prefers-reduced-motion: reduce){
  .sp-qty-panel{ transition: none !important; }
  .sp-qty-panel .input-group .btn{ transition: none !important; }
  .sp-qty-panel .input-group .form-control{ transition: none !important; }
}

/* === CART: стиль +/- как в sp-qty-panel === */
#spCartItems .sp-cart-item .input-group{
  max-width: 150px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) inset;
  overflow: hidden;
}

#spCartItems .sp-cart-item .input-group .btn{
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  border: 1px solid #e5e7eb;
  width: 42px;
  height: 42px;
  line-height: 42px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  color: #374151;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
#spCartItems .sp-cart-item .input-group .btn:hover{
  filter: brightness(1.02);
}
#spCartItems .sp-cart-item .input-group .btn:active,
#spCartItems .sp-cart-item .input-group .btn.sp-tap{
  transform: scale(.96);
  filter: brightness(.98) contrast(1.02);
}

#spCartItems .sp-cart-item .input-group .form-control{
  height: 42px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  text-align: center;
  border: 1px solid #e5e7eb;
  background: #fff;
}
#spCartItems .sp-cart-item .input-group .form-control:focus{
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
  border-color: #93c5fd;
}

/* Адаптив */
@media (max-width: 576.98px){
  #spCartItems .sp-cart-item .input-group{ max-width: 100%; }
  #spCartItems .sp-cart-item .input-group .btn,
  #spCartItems .sp-cart-item .input-group .form-control{ height: 40px; }
  #spCartItems .sp-cart-item .input-group .btn{ width: 40px; font-size: 18px; }
}

/* Тёмная тема */
@media (prefers-color-scheme: dark){
  #spCartItems .sp-cart-item .input-group .btn{
    background: linear-gradient(180deg, #374151, #1f2937);
    color:#e5e7eb; border-color:#374151;
  }
  #spCartItems .sp-cart-item .input-group .form-control{
    background:#111827; color:#f9fafb; border-color:#374151;
  }
}

/* Уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  #spCartItems .sp-cart-item .input-group .btn,
  #spCartItems .sp-cart-item .input-group .form-control{ transition: none !important; }
}