:root{
    --gold:#CF4520;
    --gold-light:rgba(207, 69, 32, 0.25);
    --text-main:#1A1A1A;
    --text-gray:#6B7280;
    --border:#DADADA;
    --radius-pill:9999px;
    --radius-card:16px;
    --fs-base:16px;
    --fs-lg:18px;
    --layout-max:1360px;
    --ff-serif: "PT Serif", "Times New Roman", Times, serif;
    --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
  }

  body {
    padding-top: 32px;
  }
  .checkout-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:var(--layout-max);
    margin:32px auto;
    padding: 24px 24px 0;
  }
  .checkout-header,
  .checkout-wrapper {
    padding: 0 24px;
    max-width: var(--layout-max);
    margin: 0 auto;
  }  
  .header-logo{height:60px;width:auto}
  .header-back{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#000;
    color:#fff;
    font-weight:600;
    font-size:14px;
    padding:12px 28px;
    border-radius:9999px;
    text-decoration:none;
    transition:opacity .2s;
  }
  .header-back:hover{opacity:.85}
  .header-back svg{width:18px;height:18px;stroke:#fff}
  @media(max-width:640px){
    .header-logo{height:32px}
    .header-back{padding:10px 22px;font-size:13px}
  }
  .checkout-wrapper{
    display:flex;
    gap:5vw;
    max-width:var(--layout-max);
    margin:clamp(24px,5vw,56px) auto 96px;
    padding:0 24px;
    font-family:"Nunito Sans",sans-serif;
    color:var(--text-main)
  }
  
/* базовое выравнивание пусть остаётся */
.checkout-right .cr-card { margin-top: 8px; }

/* больше воздуха именно для upsell */
.checkout-right #upsell-container.cr-card{
  margin-top: 48px !important;     /* перебивает 8px сверху */
  margin-bottom: 48px !important;  /* добавляем низ */
}

/* чуть компактнее на мобильных, если нужно */


  .checkout-left,
  .checkout-wrapper>aside {
    flex: 1 1 0;

    max-width: none;
  }
  @media(max-width:1024px){
    .checkout-wrapper{flex-direction:column}
    .checkout-left,
    .checkout-wrapper>aside{max-width:100%;flex:none}
  }
  .cl-heading{
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight:700;
    margin-bottom:32px
  }
  .cl-subtitle{
    font-size:var(--fs-lg);
    font-weight:700;
    margin:32px 0 20px
  }
  .cl-toggle{
    position:relative;
    display:flex;
    height:48px;
    background:#fff;
    border:1px solid var(--gold);
    border-radius:var(--radius-pill);
    margin-bottom:40px
  }
  .cl-toggle__slider{
    position:absolute;
    inset:0 50% 0 0;
    background:var(--gold);
    border-radius:var(--radius-pill);
    transition:transform .35s
  }
  .cl-toggle__btn{
    flex:1;
    z-index:1;
    border:none;
    background:none;
    font-weight:600;
    cursor:pointer;
    color:var(--text-main);
    font-size:var(--fs-base)
  }
  .cl-toggle__btn.is-active{color:#fff}
  .cl-toggle__slider.slide-right{transform:translateX(100%)}
  .cl-grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 20px;
    margin-bottom:24px
  }
  .cl-grid2 input,
  #comment{
    width:100%;
    font-size:14px;
    padding:14px 20px;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    outline:none;
    transition:border-color .2s
  }
  .cl-grid2 input:focus,
  #comment:focus{border-color: black}
  #comment{min-height:120px;border-radius:var(--radius-card);resize:vertical}
  .cl-checkbox,
  .cl-radio-row{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:var(--fs-base);
    margin-bottom:14px
  }
  input[type=checkbox],
  input[type=radio]{
    appearance:none;
    width:18px;
    height:18px;
    border:2px solid var(--text-main);
    border-radius:4px;
    display:grid;
    place-content:center;
    cursor:pointer
  }
  input[type=radio]{border-radius:50%}
  input[type=checkbox]:checked::before,
  input[type=radio]:checked::before{
    content:'';
    width:8px;
    height:8px;
    background:var(--text-main);
    border-radius:inherit
  }
  input[type=checkbox]:checked::before{border-radius:2px}
  .delivery-card,
  .payment-card{
    border:1px solid black;
    border-radius:var(--radius-card);
    padding:32px 32px 28px;
    margin-bottom:48px
  }
  .delivery-body{margin-left:40px}
  .payment-card{border:none;padding:0}
  .payment-card .cl-radio-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    width:100%;
    min-height:72px;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    padding:18px 32px;
    margin-bottom:20px;
    cursor:pointer;
    white-space:nowrap;
    transition:border-color .15s
  }
  .payment-card .cl-radio-row:last-child{margin-bottom:0}
  @supports(selector(:has(*))){
    .payment-card .cl-radio-row:has(input[type=radio]:checked){border-color:black
  }
  .payment-card .cl-radio-row.is-active{border-color:var(--gold)}
  .payment-card .cl-radio-row input[type=radio]{
    margin-right:18px;
    border-color:var(--border)
  }
  .payment-card .cl-radio-row input[type=radio]:checked{border-color:var(--text-main)}
  .payment-card img{height:28px;width:auto}
  .payment-card .liqpay-logo{height:20px!important}
  .payment-card .mono-badge{display:inline-flex}
  .mono-label{display:inline-flex;align-items:center;gap:10px}
  .mono-logo{height:24px;width:auto}
  .mono-note{font-size:inherit;line-height:1}
  #warehouse-block input{cursor:pointer}
  #warehouse-block input[disabled]{opacity:.4;cursor:not-allowed}
  #cod-warning{margin-top:16px;font-size:14px;color:var(--text-gray)}
  
/* === «Накладений платіж» === */
/* === «Накладений платіж» (з плавною анімацією) =============================== */
.cl-radio-cod{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  width:100%;
  min-height:72px;
  padding:18px 32px;
  border:1px solid var(--border);
  border-radius: var(--radius-pill); /* закрито: «пилюля» */
  background:#fff;
  transition:
    border-color .25s ease,
    border-radius .25s ease,
    padding .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

/* підказка: тримаємо в потоці, але схлопнута */
.cod-note{
  flex-basis:100%;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  overflow:hidden;
  margin-top:0;
  font-size:14px;
  color:var(--text-gray);
  transition:
    max-height .35s ease,
    opacity .25s ease,
    transform .35s ease,
    margin-top .25s ease;
}

/* розкрито: «квадратик» з м’якими кутами + показ підказки */
.cl-radio-cod:has(input[type=radio]:checked){
  border-color: var(--gold);
  border-radius: var(--radius-card);
  padding-bottom:14px;
}
.cl-radio-cod:has(input[type=radio]:checked) .cod-note{
  max-height:120px;            /* достатньо для одного-двох рядків */
  opacity:1;
  transform:translateY(0);
  margin-top:8px;
}

/* стрілочка (якщо є) — легке обертання при розкритті */
.accordion-arrow{ margin-left:auto; transition: transform .25s ease; }
.cl-radio-cod:has(input[type=radio]:checked) .accordion-arrow{ transform: rotate(180deg); }

/* контейнери підказок під полями */
.cl-grid2 > div{ position:relative; }

/* випадаючі списки */
.cl-grid2 > 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 10px 15px rgba(0,0,0,.1);
  max-height:200px;
  overflow-y:auto;
  margin:0; padding:0;
  list-style:none;
  z-index:20;
}
.cl-grid2 > div ul li{
  padding:12px 16px;
  cursor:pointer;
  transition:background .2s;
  color:var(--text-main);
  font-size:14px;
}
.cl-grid2 > div ul li:hover{ background:var(--gold-light); }

.cl-grid2 > div ul::-webkit-scrollbar{ width:6px; }
.cl-grid2 > div ul::-webkit-scrollbar-track{ background:transparent; }
.cl-grid2 > div ul::-webkit-scrollbar-thumb{
  background-color:var(--border);
  border-radius:3px;
}

/* np-ui spinner */
.np-field{ position:relative; }
.np-field .np-spin{
  position:absolute; right:12px; top:50%;
  width:16px; height:16px; margin-top:-8px;
  border-radius:50%;
  border:2px solid #E5E7EB; border-top-color: var(--gold);
  animation:npspin .6s linear infinite;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.np-field.loading .np-spin{ opacity:1; }
@keyframes npspin{ to{ transform:rotate(360deg); } }

/* щоб текст не потрапляв під спінер */
.np-field > input{ padding-right:40px !important; }

  
  /* ==================== Правая колонка ==================== */
.checkout-right {
  flex: 1 1 50%;
  max-width: 50%;
}
@media (max-width: 1024px) {
  .checkout-right {
    max-width: 100%;
    margin-top: 40px;
  }
}

/* Заголовок */
.cr-heading {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  margin-bottom: 0px !important; 
  color: var(--text-main);
}

/* 1) убираем негативный отступ под правым заголовком */
.cr-card > .cr-heading { 
  margin-bottom: -20px !important;  /* было -20px */
}


/* Основная «карточка» */
.cr-card {
  background: #fff;
  border: 1px solid black;
  border-radius: var(--radius-card);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Подзаголовок внутри карточки */
.cr-subtitle {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  color: var(--text-main);
}

/* Аккордеоны */
.cr-accordions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cr-accordion {
  display: flex;
  flex-direction: column;
}
.cr-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 12px 16px;
  font-size: var(--fs-base);
  color: var(--text-main);
  cursor: pointer;
  transition: background .2s;
}
/* .cr-accordion__btn:hover {
  background: var(--gold-light);
} */
.cr-accordion__icon {
  font-size: 16px;
  line-height: 1;
  transition: transform .3s;
}
.cr-accordion__btn[aria-expanded="true"] .cr-accordion__icon {
  transform: rotate(180deg);
}

/* Панель (скрыта по умолчанию) */
.cr-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease, padding .3s ease;
}
.cr-accordion__panel:not(.cr-panel--hidden) {
  max-height: 200px; /* достаточно для textarea + promo */
  margin-top: 8px;
  padding-left: 16px;
}

/* Текстовое поле комментария */
#comment {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
#comment:focus {
  border-color: var(--gold);
}

/* Список промокодов (рендерит JS) */
.cr-promo-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Итоги */
.cr-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cr-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-base);
  color: var(--text-main);
}
.cr-row--total {
  font-weight: 500;
  font-size: var(--fs-lg);
  margin-top: 4px;
}
.cr-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-gray);
  margin-top: 12px;
}

/* Кнопка оплаты */
.cr-pay-btn {
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity .2s;
}
.cr-pay-btn:hover:not([disabled]) {
  opacity: .9;
}
.cr-pay-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* ----------------------------------------
   Общий контейнер для двух аккордеонов
-------------------------------------------*/
.cr-accordions {
    border: 1px solid black;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #fff;
    margin-bottom: 0; /* компактнее снизу */
  }
  
  /* разделительная линия между двумя аккордеонами */
  .cr-accordion + .cr-accordion {
    border-top: 1px solid black;
  }
  
  /* === Заголовок аккордеона (компактнее) === */
  .cr-accordion__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 24px; /* было 16px 24px */
    background: transparent;
    border: none;
    font-size: var(--fs-lg);
    color: var(--text-main);
    cursor: pointer;
  }
  .cr-accordion__btn:focus { outline: none; }
  
  /* стрелка */
  .cr-accordion__icon {
    transition: transform .2s;
  }
  .cr-accordion__btn[aria-expanded="true"] .cr-accordion__icon {
    transform: rotate(180deg);
  }
  
  /* === Панель содержимого: без лишних отступов в закрытом виде === */
  .cr-accordion__panel {
    display: none;
    padding: 0 24px 0; /* без нижнего паддинга, когда закрыт */
    margin: 0;
  }
  .cr-accordion__panel:not(.cr-panel--hidden) {
    display: block;
    padding: 8px 24px 12px; /* аккуратные отступы при раскрытии */
  }
  
  /* === Поле для комментария (примітки) === */
  #comment,
  .cr-accordion__panel textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    font-size: var(--fs-base);
    resize: none;
    min-height: 80px;
    background: #fafafa;
  }
  #comment:focus,
  .cr-accordion__panel textarea:focus {
    border-color: black !important;
  }
  
  /* === Промокод: строка ввода + кнопка === */
  .cr-accordion__panel .cr-promo-entry {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  .cr-accordion__panel .cr-promo-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 9999px 0 0 9999px;
    font-size: var(--fs-base);
    background: #fff;
    outline: none;
  }
  .cr-accordion__panel .cr-promo-btn {
    padding: 12px 24px;
    background: var(--gold);
    color: #fff;
    border: 1px solid var(--gold);
    border-left: none;
    border-radius: 0 9999px 9999px 0;
    font-size: var(--fs-base);
    cursor: pointer;
  }
  .cr-accordion__panel .cr-promo-input:focus {
    border-color: black !important;
    outline: none;
  }
  
  /* обнуляем лишние внешние отступы внутри строки */
  .cr-accordion__panel .cr-promo-entry > * {
    margin: 0 !important;
  }
  
  /* Доп. ужатие снизу у закрытого аккордеона (если :has поддерживается) */
  @supports(selector(:has(*))) {
    .cr-accordion { padding-bottom: 0; }
    .cr-accordion:has([aria-expanded="true"]) { padding-bottom: 6px; }
  }
  @media (min-width:600px){
  .cr-accordion + .cr-accordion {
  border-top: 1px solid black;
  margin-top: -10px; /* перекрываем толщину линии */
}
}


 /* ============ строки корзины ================ */
 .cart-line {
    display: grid;
    grid-template-columns:
      5rem    /* картинка */
      1fr     /* инфо */
      8rem    /* qty-контрол */
      6rem    /* цена */;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid black;
  }
  .cart-line:last-child {
    border-bottom: none;
  }
  #order-summary .ttl {
    white-space: normal !important;
    overflow-wrap: break-word;
  }
  /* 1) картинка */
  .cart-line__img {
    grid-column: 1;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }
  
  /* 2) инфо */
  .cart-line__info {
    grid-column: 2;
    min-width: 0;
  }
  .cart-line__title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cart-line__subtitle {
    font-size: 0.75rem;
    color: #6B7280;
    margin: 0.25rem 0 0;
  }
  
  /* 3) qty-контрол */
  .cart-line__qty {
    grid-column: 3;
    justify-self: center;
    display: flex;
    align-items: center;
    padding: 0.7rem;
    border: 1px solid #E5E7EB;
    border-radius: 9999px;
    background: #fff;
    gap: 0.5rem;
  }
  .cart-line__qty .qty-value {
    font-size: 1rem;
    font-weight: 500;
    min-width: 1.5rem;
    text-align: center;
  }
  
  /* контейнер для стрелок */
  .cart-line__qty .qty-arrows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  /* общие стили кнопок-стрелок */
  .cart-line__qty .qty-arrows button {
    width: 1rem;
    height: 1rem;
    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.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--text-main);
    border-bottom: 2px 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);
  }
  
  /* 4) цена */
  .cart-line__price {
    grid-column: 4;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
  }

  .cart-line__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  
  /* 2) Делаем заголовок чуть меньше и полегче */
  .cr-heading {
    font-size: clamp(20px, 1.5vw, 24px) !important;
    font-weight: 600 !important;
  }
  
/* ====================== СЕКЦІЯ: upsell (повна заміна) ====================== */

/* Контейнер блоку upsell */
#upsell-container.cr-card{
    background:#f7f7f7;
    border:none;
    padding:30px;
    gap:12px;
  }
  
  /* Хедер секції + навігація — менший відступ під заголовком */
  .upsell-header{
    padding:0 16px;
    margin-bottom:4px !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  /* Кнопки навігації */
  .upsell-arrow{
    background:none;
    border:none;
    font-size:28px;
    color:var(--gold);
    cursor:pointer;
    padding:4px;
    line-height:1;
  }
  .upsell-arrow:disabled{ color:var(--border); cursor:default; }
  
  /* Картка пропозиції */
  #upsell-card{
    padding:10px 12px;
    border-radius:10px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:12px;
    opacity:0;
    transform:translateX(20px);
    animation:upsellFadeSlide .6s ease forwards;
  }
  #upsell-container #upsell-card{
    background:#f7f7f7 !important;
    border:none !important;
  }
  
  /* Посилання-зона з картинкою та текстом */
  #upsell-card a{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1 1 auto;
    min-width:0;                 /* дозволяє заголовку переноситись */
  }
  #upsell-card img{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:8px;
    flex:0 0 72px;
  }
  
  /* Текстові стилі */
  #upsell-card .font-medium{ font-size:14px !important; line-height:1.25; }
  #upsell-card .text-sm{    font-size:12px !important; color:var(--text-gray); }
  #upsell-card .font-semibold{
    font-size:14px !important;
    font-variant-numeric:tabular-nums;
  }
  #upsell-card .font-semibold::before{ content:"₴ "; }
  
  /* КНОПКА «Купити» — ПИЛЮЛЯ з текстом (не коло) */
  .upsell-add-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 18px;
    min-height:40px;
    border-radius:9999px;         /* робимо «кнопку-пилюлю» */
    background:var(--gold);
    color:#fff;
    border:none;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:opacity .2s, transform .1s ease;
  }
  .upsell-add-btn:hover:not([disabled]){ opacity:.9; }
  .upsell-add-btn:active{ transform:translateY(1px); }
  .upsell-add-btn:disabled{ opacity:.6; cursor:not-allowed; }
  
  
/* ====================== UPSell: плавный горизонтальный вход ====================== */
#upsell-container{ overflow:hidden; }

#upsell-card{
  opacity: 0;
  transform: translate3d(24px,0,0);
  transition:
    transform 520ms cubic-bezier(.22,.61,.36,1),
    opacity   520ms cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

#upsell-card.is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* фиксируем размеры, чтобы не было «прыжка» при загрузке картинки */
#upsell-card img{
  width: 80px; height: 80px;
  object-fit: cover; border-radius: 8px; flex: 0 0 80px;
}
  
    /* Pop up window*/

  .cm-open { overflow: hidden; }

.cm-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}

.cm-modal{
  width:min(92vw, 480px);
  background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  padding:22px; text-align:center;
}

.cm-title{
  font:500 16px/1.4 "Inter", system-ui, sans-serif;
  color:#111; margin-bottom:18px;
}

.cm-actions{
  display:flex; gap:12px; justify-content:center;
}

.btn-black{
  background:#111; color:#fff; border:1px solid #111;
  border-radius: var(--radius-pill); padding:10px 18px; font-weight:600; cursor:pointer;
}

.cm-modal .btn-gold{
    background: var(--gold, #bfa46f);
    color: #fff;                          /* ← было #111 */
    border: 1px solid var(--gold, #bfa46f);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
  }
  

.np-hint{color:#6b7280;padding:.5rem 1rem;pointer-events:none}

/* ====================== СЕКЦІЯ: телефон — відступ перед прапором + підказка праворуч ====================== */
.iti{
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  .iti .iti__flag-container{
    left: 8px !important;
  }
  .iti .iti__selected-flag{
    padding-left: 8px !important;
  }
  .iti--allow-dropdown input,
  .iti--separate-dial-code input{
    padding-left: calc(50px + 8px) !important;
  }
  
  /* invalid-стан + базова підказка */
  .is-invalid{
    border-color:#DC2626 !important;
    box-shadow: inset 0 0 0 1px #DC2626 !important;
  }
  .field-hint{
    font-size:12px;
    line-height:1.3;
    color:#DC2626;
    margin-top:6px;
  }
  
  /* data icons */
.field-wrap{
  position:relative;
  --icon:16px;
  --right:16px;
  --gap:12px;
  --err-pad:12px;
}
.field-wrap>input,
.field-wrap>textarea{
  padding-right:calc(var(--right) + var(--icon) + var(--gap));
}
.field-wrap::after{
  content:"";
  position:absolute;
  right:var(--right);
  top:0;
  bottom:var(--err-pad);
  margin:auto 0;
  width:var(--icon);
  height:var(--icon);
  background-repeat:no-repeat;
  background-size:var(--icon) var(--icon);
  opacity:.8;
  pointer-events:none;
}

/* базовые иконки */
.field-wrap:has(> input[data-icon="phone"])::after{background-image:url("/img/telephone.png")}
.field-wrap:has(> input[data-icon="email"])::after{background-image:url("/img/mail.png")}
.field-wrap:has(> input[data-icon="city"])::after{background-image:url("/img/skyline.png")}
.field-wrap:has(> input[data-icon="user"])::after{background-image:url("/img/user.png")}

/* оранжевые при фокусе */
.field-wrap:focus-within:has(> input[data-icon="phone"])::after{background-image:url("/img/telephone_orange.png")}
.field-wrap:focus-within:has(> input[data-icon="email"])::after{background-image:url("/img/mail_orange.png")}
.field-wrap:focus-within:has(> input[data-icon="city"])::after{background-image:url("/img/skyline_orange.png")}
.field-wrap:focus-within:has(> input[data-icon="user"])::after{background-image:url("/img/user_orange.png")}

/* принудительно оранжевые */
.field-wrap:has(> input[data-icon="phone-o"])::after{background-image:url("/img/telephone_orange.png")}
.field-wrap:has(> input[data-icon="email-o"])::after{background-image:url("/img/mail_orange.png")}
.field-wrap:has(> input[data-icon="city-o"])::after{background-image:url("/img/skyline_orange.png")}
.field-wrap:has(> input[data-icon="user-o"])::after{background-image:url("/img/user_orange.png")}

/* ошибка */
.field-wrap:has(> input.is-invalid)::after,
.field-wrap:has(> textarea.is-invalid)::after{
  opacity:1;
  background-image:url("/img/exclamation-mark.png");
}

/* мобильные правки — оставить как было: 18px-иконка, правый = 10, общая подушечка = 38 */
@media (max-width:640px){
  .field-wrap{--err-pad:0}
}
@media (max-width:360px){
  .field-wrap{--icon:18px; --right:10px; --gap:10px}
}


/* только интерактивные элементы */
html.wand a[href],
html.wand button,
html.wand [role="button"],
html.wand label,
html.wand summary,
html.wand .cl-radio-row,        /* твои радиоряды */
html.wand .cr-accordion__btn,
html.wand .cr-promo-btn,
html.wand .cr-pay-btn,
html.wand input,
html.wand select,
html.wand textarea{
  cursor:
    url("/img/wand.png") 8 2,
    url("/img/wand.svg") 8 2,
    pointer !important;
}

/* текстовые поля — I-beam как fallback */
html.wand input[type="text"],
html.wand input[type="email"],
html.wand input[type="tel"],
html.wand input[type="search"],
html.wand input[type="password"],
html.wand input:not([type]),
html.wand textarea{
  cursor:
    url("/img/wand.png") 8 2,
    url("/img/wand.svg") 8 2,
    text !important;
}

/* запрещённые */
html.wand :disabled{
  cursor: not-allowed !important;
}