/* ========================= Мобильная версия (≤600px) ========================= */
@media (max-width: 600px) {

    /* ====================== СЕКЦИЯ: базовые настройки ====================== */
    :root{
      --fz:   clamp(13px, 3.6vw, 16px);
      --gap:  clamp(8px, 3.2vw, 16px);
      --pad:  clamp(10px, 3.8vw, 18px);
      --rad:  12px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-btm: env(safe-area-inset-bottom, 0px);
    }
    html, body { font-size: var(--fz); line-height: 1.4; }
    body { padding-top: 0; margin: 0; color: var(--text-main); }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    img, video { max-width: 100%; height: auto; display: block; }
    .hidden { display: none !important; }
  /* ====================== СЕКЦИЯ: хедер ====================== */
:root{
    --logo-h: 32px; /* высота логотипа и иконки корзины */
  }
  
  .checkout-header{
    position: sticky; top: 0; z-index: 40;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid var(--border);
  }
  
  .header-logo{
    height: var(--logo-h);
    width: auto;
    display: block;
  }
  
  /* превращаем кнопку в чистую иконку */
  .checkout-header .header-back{
    display: inline-grid;
    place-items: center;
    width: max(var(--logo-h), 44px);
    height: max(var(--logo-h), 44px);
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    color: #000 !important;                  /* ← чёрная иконка */
    border: 0 !important;
    border-radius: 50%;
    text-decoration: none;
    gap: 0;
  }
  
  /* скрываем текст, оставляем SVG */
  .checkout-header .header-back span{
    display: none !important;
  }
  
  /* размер SVG = логотипу */
  .checkout-header .header-back svg{
    width: var(--logo-h) !important;
    height: var(--logo-h) !important;
    display: block;
  }
  
  /* форсим чёрный штрих/заливку (переопределяет старое stroke:#fff) */
  .checkout-header .header-back svg,
  .checkout-header .header-back svg *{
    stroke: currentColor !important;
    fill: currentColor !important;  /* на случай, если в SVG есть залитые элементы */
  }
  
  /* hover/focus */
  .checkout-header .header-back:hover{ opacity: .85; }
  .checkout-header .header-back:focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  
  /* мобайл ≤600px */
  @media (max-width: 600px){
    :root{ --logo-h: 28px; }
    .checkout-header{ padding: 12px 16px; gap: 12px; }
  }
  
  /* очень узкие ≤360px */
  @media (max-width: 360px){
    :root{ --logo-h: 24px; }
    .checkout-header{ padding: 10px 12px; }
  }  
  
 @media (max-width: 600px){
  .checkout-right #upsell-container.cr-card{
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

  
    /* ====================== СЕКЦИЯ: обёртка и колонки ====================== */
    .checkout-wrapper{
      display: block; padding: 0 var(--pad) calc(24px + var(--safe-btm));
      margin: var(--pad) auto;
      max-width: 100%;
    }
    .checkout-left,
    .checkout-wrapper>aside{
      max-width: 100%; width: 100%;
    }
    .cl-heading{ font-size: clamp(18px, 5vw, 22px); margin-bottom: 16px; }
  
    /* ====================== СЕКЦИЯ: переключатель отримувача ====================== */
    .cl-toggle{
      height: 44px; margin-bottom: 20px; border-width: 1.5px;
    }
    .cl-toggle__btn{ font-size: 14px; }
    .cl-toggle__slider{
      inset: 0 50% 0 0; border-radius: var(--radius-pill); transition: transform .25s ease;
    }
    .cl-toggle__slider.slide-right{ transform: translateX(100%); }
  
    /* ====================== СЕКЦИЯ: контактна інформація ====================== */
    .cl-subtitle{ font-size: 15px; margin: 18px 0 12px; }
    .cl-grid2{
      display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px;
    }
    .cl-grid2 input,
    #comment{
      font-size: 14px; padding: 12px 14px; min-height: 44px; border-radius: var(--radius-pill);
    }
    .cl-checkbox, .cl-radio-row{ gap: 10px; font-size: 14px; margin-bottom: 10px; }
    input[type=checkbox], input[type=radio]{ min-width: 18px; height: 18px; }
  
    /* intl-tel-input контейнер на всю ширину */
    .iti{ width: 100%; }
    .iti .iti__selected-flag{ padding-left: 10px; }
    .iti input[type="tel"].iti__tel-input{ width: 100%; padding-left: 58px !important; }

    /* ====================== СЕКЦИЯ: Телефон — выпадающий список стран (intl-tel-input) ====================== */

/* якорим выпадающий к самому инпуту */
.iti{
    position: relative;
  }
  
  /* контейнер списка стран — как компактный дропдаун под полем */
  .iti .iti__country-list{
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
  
    max-height: 40vh !important;
    overflow-y: auto !important;
  
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
    z-index: 999 !important; /* выше карточек/хинтов */
    padding: 6px 0 !important;
  }
  
  /* элементы списка */
  .iti .iti__country-list .iti__country{
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
  }
  .iti .iti__country-list .iti__country:hover,
  .iti .iti__country-list .iti__country[aria-selected="true"]{
    background: var(--gold-light) !important;
  }
  
  /* строка поиска вверху выпадающего */
  .iti .iti__country-list .iti__search-input{
    position: sticky !important;
    top: 0 !important;
    margin: 0 6px 6px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #fff !important;
  }
  
  /* фиксируем «dropup» поведение — всегда вниз */
  .iti .iti__country-list.iti__country-list--dropup{
    top: calc(100% + 4px) !important;
    bottom: auto !important;
  }
  
  /* прячем полноэкранный слой, если вдруг плагин его включил (fallback) */
  .iti--container.iti--fullscreen-popup{
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    display: none !important; /* если useFullscreenPopup забыли отключить */
  }
  
  /* сам «попап» внутри фуллскрина тоже на всякий случай выравниваем как дропдаун */
  .iti--container.iti--fullscreen-popup .iti__country-list{
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important; right: 0 !important; bottom: auto !important;
    max-height: 40vh !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
  }
  
  /* чтобы поле с dial code не перекрывалось и было место для флага */
  .iti .iti__selected-flag{ padding-left: 10px; }
  .iti input[type="tel"].iti__tel-input{
    width: 100%;
    padding-left: 58px !important;   /* под separateDialCode */
    min-height: 44px;
  }
  
  /* тонкая прокрутка (как у подсказок Нової пошти) */
  .iti .iti__country-list::-webkit-scrollbar{ width: 6px; }
  .iti .iti__country-list::-webkit-scrollbar-track{ background: transparent; }
  .iti .iti__country-list::-webkit-scrollbar-thumb{
    background-color: var(--border); border-radius: 3px;
  }
  
  /* узкие экраны */
  @media (max-width: 360px){
    .iti .iti__country-list{ max-height: 50vh !important; }
    .iti .iti__country-list .iti__country{ padding: 9px 10px !important; }
  }
  
  
    /* ====================== СЕКЦИЯ: Нова Пошта — адресна доставка ====================== */

#address-fields.hidden{
    display: none !important;                 /* лишаємось схованими до вибору режиму */
  }
  
  #address-fields{
    display: grid;                             /* вертикальний стек на всіх ширинах */
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
  }
  
  /* інпуты — на всю ширину */
  #address-fields > input,
  #address-fields > div > input{
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color .2s;
  }
  #address-fields > input:focus,
  #address-fields > div > input:focus{
    border-color: var(--gold);
  }
  
  /* «По батькові» не розтягуємо в 2 колонки навіть якщо є col-span-2 */
  #address-fields #patronymic{
    grid-column: auto !important;
  }
  
  /* обгортки для полів з підказками (місто/вулиця) */
  #address-fields > div{
    position: relative;
  }
  
  /* лист підказок — прив’язаний до інпута, акуратний на мобайлі */
  #address-fields > div > ul{
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    max-height: 40vh;
    overflow-y: auto;
    margin: 0; padding: 0; list-style: none;
    z-index: 30;
  }
  #address-fields > div > ul li{
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
  }
  #address-fields > div > ul li:hover{
    background: var(--gold-light);
  }
  
  /* підказка «почніть вводити…» */
  #address-fields .np-hint{
    padding: 10px 12px;
    color: var(--text-gray);
    pointer-events: none;
  }
  
  /* дрібні коригування для вузьких екранів */
  @media (max-width: 360px){
    #address-fields{ gap: 10px; }
    #address-fields > input,
    #address-fields > div > input{ padding: 11px 12px; }
  }
  
    /* ====================== СЕКЦИЯ: методи оплати ====================== */
    .payment-card{ padding: 0; border: none; }
    .payment-card .cl-radio-row{
      gap: 10px; min-height: 56px; padding: 12px 16px; margin-bottom: 10px;
    }
    .payment-card img{ height: 22px; }
    .payment-card .liqpay-logo{ height: 18px !important; }
  
    /* ====================== СЕКЦИЯ: Накладений платіж (pill) — центр опису ====================== */
.cl-radio-cod{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color .2s, padding-bottom .2s;
    box-sizing: border-box;
    white-space: normal !important;          /* переопределяем возможный nowrap */
    max-width: 100%;
  }
  
  .cl-radio-cod input[type=radio]{ flex: 0 0 auto; }
  
  .cl-radio-cod .cod-title{
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(14px, 3.7vw, 15px);
    white-space: normal;
  }
  
  .cl-radio-cod .accordion-arrow{
    flex: 0 0 auto;
    margin-left: auto;
  }
  
  /* Описание — по умолчанию СКРЫТО */
  .cod-note{
    display: none !important;                /* скрыто, пока не выбрано */
    flex-basis: 100%;
    align-self: stretch;                     /* занимает всю ширину пилюли */
    width: 100%;
    margin-top: 6px;
    font-size: clamp(10px, 2.7vw, 12px);     /* компактный размер для 400px и ниже */
    line-height: 1.35;
    color: var(--text-gray);
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    box-sizing: border-box;
    text-align: center;                      /* ← центрируем текст относительно пилюли */
  }
  .cod-note strong{
    font-weight: 700;
    font-size: 0.92em;                       /* «200 грн» не выпирает */
  }
  
  /* Подсветка выбранной пилюли + показываем описание */
  @supports(selector(:has(*))){
    .cl-radio-cod:has(input[type=radio]:checked){
      border-color: var(--gold);
      padding-bottom: 10px;
    }
    .cl-radio-cod:has(input[type=radio]:checked) .cod-note{
      display: block !important;
    }
  }
  
  /* Мобайл ≤600px */
  @media (max-width: 600px){
    .cl-radio-cod{ gap: 10px; padding: 12px 14px; }
    .cl-radio-cod .cod-title{ font-size: clamp(13px, 4vw, 14px); }
    .cod-note{ font-size: clamp(10px, 2.6vw, 11.5px); }
  }
  
  /* Очень узкие ≤400px — ещё компактнее */
  @media (max-width: 400px){
    .cl-radio-cod{ padding: 10px 12px; }
    .cod-note{ font-size: clamp(9.5px, 2.4vw, 11px); margin-top: 4px; }
  }
  
    /* ====================== СЕКЦИЯ: корзина (права колонка) ====================== */
/* Ещё компактнее qty-редактор и меньше зазор между стрелками. */

.checkout-right{ margin-top: 20px; max-width: 100%; }
.cr-card{ padding: 16px; gap: 16px; border-radius: var(--radius-card); }
.cr-heading{ font-size: 18px !important; font-weight: 600 !important; }

/* Строка: img | info/price | qty */
.cart-line{
  display: grid;
  grid-template-columns: 68px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "img info qty"
    "img price qty";
  gap: 10px 12px;
  padding: 12px 0;
  align-items: center;
  border-bottom: 1px solid black;
}
.cart-line:last-child{ border-bottom: none; }

/* Картинка */
.cart-line__img{
  grid-area: img;
  width: 68px; height: 68px;
  object-fit: cover;
  border-radius: 8px;
}

/* Инфо */
.cart-line__info{
  grid-area: info;
  min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.cart-line__title{
  font-size: 14px; font-weight: 600; margin: 0;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
.cart-line__subtitle{ font-size: 12px; color: var(--text-gray); margin: 0; }

/* Цена — под инфо, слева */
.cart-line__price{
  grid-area: price;
  justify-self: start;
  align-self: start;
  font-size: 13.5px; font-weight: 700;
  margin-top: 2px;
}

/* Qty — ещё менее громоздкий */
.cart-line__qty{
  grid-area: qty;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 3px;                       /* было 4px */
  padding: 6px;               /* было 4px 8px */
  min-height: 40px;               /* было 30px */
  border: 1px solid #E5E7EB;
  border-radius: 9999px;
  background: #fff;
  touch-action: manipulation;
}

/* Значение */
.cart-line__qty .qty-value{
  font-size: 12.5px;              /* было 13px */
  font-weight: 500;
  min-width: 1.1rem;              /* чуть уже */
  text-align: center;
  line-height: 1;
}

/* Колонка стрелок — с совсем маленьким отступом */
.cart-line__qty .qty-arrows{
  display: flex;
  flex-direction: column;
  gap: 1px;                        /* было 2px — меньше зазор между стрелками */
  line-height: 0;
}

/* Кнопки-стрелки — меньше */
.cart-line__qty .qty-arrows button{
  width: 25px; height: 15px;       /* было 12px */
  padding: 0;
  background: none; border: none;
  cursor: pointer; position: relative;
}

/* «Уголки» стрелок — компактнее, но читаемые */
.cart-line__qty .qty-arrows .inc::before,
.cart-line__qty .qty-arrows .dec::before{
  content: "";
  display: block;
  width: 0.44rem; height: 0.44rem; /* было ~0.5rem */
  border-right: 1.8px solid var(--text-main);
  border-bottom: 1.8px solid var(--text-main);
  position: absolute; top: 50%; left: 50%;
  transform-origin: center;
}
.cart-line__qty .qty-arrows .inc::before{ transform: translate(-50%, -50%) rotate(-135deg); }
.cart-line__qty .qty-arrows .dec::before{ transform: translate(-50%, -50%) rotate(45deg); }

/* Узкие экраны: ещё компактнее */
@media (max-width: 400px){
  .cart-line{ grid-template-columns: 60px 1fr auto; gap: 8px 10px; }
  .cart-line__img{ width: 60px; height: 60px; }
  .cart-line__title{ font-size: 13.5px; }
  .cart-line__subtitle{ font-size: 11.5px; }
  .cart-line__price{ font-size: 13px; }

  .cart-line__qty{
    grid-column: 3;
    justify-self: center;
    display: flex;
    align-items: center;
    padding: 2px 5px;
    min-height: 50px;
    min-width: 70px;
    gap: 8px;
  }
  .cart-line__qty .qty-value{ font-size: 12px; min-width: 1rem; }
  .cart-line__qty .qty-arrows button{ width: 15px; height: 15px; }
  .cart-line__qty .qty-arrows .inc::before,
  .cart-line__qty .qty-arrows .dec::before{ width: 0.4rem; height: 0.4rem; }
}

/* Очень узкие (≤340px) */
@media (max-width: 340px){
  .cart-line{ grid-template-columns: 56px 1fr auto; }
  .cart-line__img{ width: 56px; height: 56px; }
  .cart-line__price{ font-size: 12.5px; }
} 
    /* ====================== СЕКЦИЯ: аккордеоны (примітка / промокод) ====================== */
.cr-accordions{ gap:0; border-radius:var(--radius-card); }
.cr-accordion + .cr-accordion{ border-top:1px solid black; }
.cr-accordion__btn{ padding:12px var(--pad); min-height:44px; font-size:14px; }
.cr-accordion__icon{ font-size:16px; }
.cr-accordion__panel{ padding:0 var(--pad) var(--pad); }

.cr-accordion__panel .cr-promo-entry{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:0;
}
.cr-accordion__panel .cr-promo-input{
  padding:8px 12px; min-height:36px; font-size:13px;
  border:1px solid var(--border); border-right:none;
  border-radius:9999px 0 0 9999px; line-height:1;
}
.cr-accordion__panel .cr-promo-btn{
  padding:8px 14px; min-height:36px; font-size:13px; line-height:1;
  background:var(--gold); color:#fff; border:1px solid var(--gold); border-left:none;
  border-radius:0 9999px 9999px 0; white-space:nowrap; cursor:pointer;
}

#comment{ padding:12px 14px; min-height:90px; border-radius:var(--radius-card) !important; }

/* Мобайл: промокод как обычные поля (по высоте) */
@media (max-width: 600px){
  .cr-accordion__panel .cr-promo-entry{
    align-items: stretch;              /* чтобы и инпут, и кнопка были одной высоты */
  }
  .cr-accordion__panel .cr-promo-input,
  .cr-accordion__panel .cr-promo-btn{
    min-height: 44px !important;
    height: 44px !important;           /* фиксируем высоту, ширину не трогаем */
  }
}


@media (max-width:600px){
  .cr-accordion__panel .cr-promo-input{ padding:7px 10px; min-height:34px; font-size:12.5px; }
  .cr-accordion__panel .cr-promo-btn{ padding:7px 12px; min-height:34px; font-size:12.5px; }
}

@media (max-width:400px){
  .cr-accordion__panel .cr-promo-input{ padding:6px 10px; min-height:32px; font-size:12px; }
  .cr-accordion__panel .cr-promo-btn{ padding:6px 10px; min-height:32px; font-size:12px; }
}

@media (max-width:340px){
  .cr-accordion__panel .cr-promo-input{ padding:6px 9px; min-height:30px; font-size:9.5px; }
  .cr-accordion__panel .cr-promo-btn{ padding:6px 9px; min-height:30px; font-size:9.5px; }
}

/* ====================== СЕКЦИЯ: застосовані промокоди (піллюлі) ====================== */
/* Делаем «пилюлю» компактнее: уменьшаем паддинги и шрифты, следим за переполнением. */

#promo-pills{ display: flex; flex-direction: column; gap: 8px; }

/* сама пилюля */
.promo-pill{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px 12px !important;         /* ↓ меньше, чем px-6 py-4 */
  border-radius: var(--radius-pill);
  background: var(--gold-light);         /* цвет как и был */
  color: #000;

  line-height: 1.2;
  margin-bottom: 0 !important;           /* переопределяем mb-2, управляем через gap контейнера */
}

/* левый текст с кодом — ужимаемый, с троеточием */
.promo-pill .font-medium{
  font-size: 13px !important;
  font-weight: 600 !important;
  min-width: 0;                          /* чтобы работало с flex */
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* правая часть с суммой/процентом */
.promo-pill .font-semibold{
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* кнопка «Видалити» — ещё компактнее */
.promo-pill button{
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  background: transparent !important;
  border: 0 !important;
  white-space: nowrap;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Мобайл ≤600px ── */
@media (max-width: 600px){
  .promo-pill{ padding: 7px 10px !important; gap: 8px; }
  .promo-pill .font-medium{ font-size: 12.5px !important; max-width: 52%; }
  .promo-pill .font-semibold{ font-size: 12.5px !important; }
  .promo-pill button{ font-size: 11.5px !important; padding: 3px 6px !important; }
}

/* ── Узкие ≤400px ── */
@media (max-width: 400px){
  .promo-pill{ padding: 10px 10px !important; gap: 6px; }
  .promo-pill .font-medium{ font-size: 12px !important; max-width: 50%; }
  .promo-pill .font-semibold{ font-size: 12px !important; }
  .promo-pill button{ font-size: 11px !important; padding: 2px 5px !important; }
}

    /* ====================== СЕКЦИЯ: итоги + оплата ====================== */
    .cr-totals{ gap: 6px; }
    .cr-row{ font-size: 14px; }
    .cr-row--total{ font-size: 16px; margin-top: 2px; }
    .cr-note{ font-size: 11px; margin-top: 8px; }
  
    .cr-pay-btn{
      position: relative;
      width: 100%; margin-top: 8px; padding: 14px;
      border-radius: var(--radius-pill); font-size: 15px; min-height: 48px;
    }
    /* Отступ под safe-area снизу, если кнопка последняя */
    .cr-card.cr-totals{ padding-bottom: calc(16px + var(--safe-btm)); }
    
    @media (max-width: 600px){
  /* оставляем .cr-row флексом, но выравниваем по верху на случай двух строк справа */
  .cr-row { align-items: flex-start; }

  /* правый элемент — тянется, текст выравнивается вправо, перенос разрешён */
  .cr-row .cr-delivery-value{
    margin-left: auto;      /* упрётся в правый край */
    flex: 1 1 auto;         /* может расширяться, чтобы правый край совпадал с краем контейнера */
    min-width: 0;           /* чтобы перенос работал корректно в флексе */
    text-align: right;      /* строки выравниваются вправо */
    white-space: normal;    /* разрешаем перенос */
    overflow-wrap: anywhere;/* на очень узких — ломаем длинные слова */
    max-width: 70%;         /* чтобы не «наезжало» на левый лейбл; подстрой при желании */
  }
}

  
  /* ====================== Upsell (мобайл ≤600px) ====================== */
@media (max-width: 600px){

  /* Контейнер */
  #upsell-container.cr-card{
    background:#f7f7f7;
    border:none;
    padding:14px;
    margin-top:16px;
    margin-bottom:16px;
    border-radius: var(--radius-card);
  }

  /* Заголовок из твоего HTML */
  #upsell-container .cr-subtitle{
    font-size: clamp(14px, 3.8vw, 16px) !important;
    font-weight: 600 !important;
    line-height: 1.2;
    margin: 0 0 8px !important;
    color: var(--text-main);
  }

  /* Стек карточек */
  #upsell{
    display: flex;
    flex-direction: column;
    gap: 10px;               /* расстояние между карточками */
  }

  /* Карточка предложения (поддерживаем и #upsell-card, и .upsell-card) */
  #upsell-card,
  #upsell .upsell-card{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    /* на мобиле иногда старая анимация мешала — гасим */
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Зона-ссылка с картинкой и текстом */
  #upsell-card > a,
  #upsell .upsell-card > a{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;           /* чтобы текст нормально переносился */
    color: inherit;
    text-decoration: none;
  }

  /* Картинка */
  #upsell-card img,
  #upsell .upsell-card img{
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
  }

  /* Текстовые блоки внутри ссылки */
  #upsell-card a > div,
  #upsell .upsell-card a > div{
    min-width: 0;
  }

  /* Заголовок товара — 2 строки, line-clamp */
  #upsell-card .font-medium,
  #upsell .upsell-card .font-medium{
    font-size: 13.5px !important;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* WebKit */
    line-clamp: 2;          /* Standard */
    overflow: hidden;
  }

  /* Подзаголовок/арт. */
  #upsell-card .text-sm,
  #upsell .upsell-card .text-sm{
    font-size: 11.5px !important;
    color: var(--text-gray);
  }

  /* Цена */
  #upsell-card .font-semibold,
  #upsell .upsell-card .font-semibold{
    font-size: 13.5px !important;
    font-variant-numeric: tabular-nums;
  }

  /* Кнопка «Купити» — ПИЛЮЛЯ */
  #upsell-card .upsell-add-btn,
  #upsell .upsell-card .upsell-add-btn{
    padding: 8px 12px;
    min-height: 34px;
    border-radius: var(--radius-pill);
    background: var(--gold);
    color: #fff;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  #upsell-card .upsell-add-btn:hover,
  #upsell .upsell-card .upsell-add-btn:hover{
    opacity:.9;
  }

  /* Узкие экраны ≤380px — ещё компактнее */
  @media (max-width: 380px){
    #upsell-card,
    #upsell .upsell-card{ gap:8px; }

    #upsell-card img,
    #upsell .upsell-card img{
      width:52px; height:52px;
    }

    #upsell-card .font-medium,
    #upsell .upsell-card .font-medium{ font-size: 13px !important; }

    #upsell-card .font-semibold,
    #upsell .upsell-card .font-semibold{ font-size: 13px !important; }

    #upsell-card .upsell-add-btn,
    #upsell .upsell-card .upsell-add-btn{
      min-height: 32px;
      padding: 8px 10px;
      font-size: 12.5px;
    }
  }
}

    /* ====================== СЕКЦИЯ: прочие фиксы ====================== */
    /* Блоки слева/справа — минимальные отступы */
    .checkout-header,
    .checkout-wrapper{ padding-left: var(--pad); padding-right: var(--pad); }
  
    /* Минимизируем внешние отступы карточек */
    .cr-card:not(:last-child){ margin-bottom: 14px; }
  
    /* Ссылки без «hover-мигания» на тач-устройствах */
    a:hover{ opacity: 1; }
  
    /* Клики по крупным таргетам */
    /*button, .header-back, .cl-radio-row, .cl-checkbox label{ min-height: 44px; }*/
  
    /* Подправляем svg в кнопках/иконках */
    .icon-pay{ font-size: 18px; line-height: 1; }
  
    /* Без горизонтального скролла страницы */
    body{ overflow-x: hidden; }
  }
  

  @media (max-width: 360px){
    .header-logo{ height: 24px; }
    .header-back span{ display: none; } /* оставляем только иконку на сверхузких */
    .header-back{ padding: 10px; }
  
    .cart-line{
      grid-template-columns: 64px 1fr;
    }
    .cart-line__img{ width: 64px; height: 64px; }
  
    #upsell-card{ gap: 10px; }
    #upsell-card .upsell-add-btn{ padding: 8px 10px; }
  }