: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: "Nunito Sans", 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:grid;
    grid-template-columns:36px minmax(0,max-content) 36px;
    align-items:center;
    justify-content:stretch;
    column-gap:16px;
    width:100%;
    min-height:72px;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    padding:18px 32px;
    margin-bottom:20px;
    background:#fff;
    box-sizing:border-box;
    color:var(--text-main);
    font-family:"Nunito Sans",ui-sans-serif,system-ui;
    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]{
    grid-column:1;
    justify-self:start;
    margin-right:0;
    border-color:var(--border)
  }
  .payment-card .cl-radio-row input[type=radio]:checked{border-color:var(--text-main)}
  .payment-card .cl-radio-row > img,
  .payment-card .cl-radio-row > .mono-label{
    grid-column:2;
    justify-self:center;
    min-width:0;
  }
  .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)}
  
/* === Accordion payment rows === */
.payment-card .cl-radio-row.cl-radio-mono-parts,
.payment-card .cl-radio-row.cl-radio-cod{
  display:block;
  width:100%;
  min-height:72px;
  padding:18px 32px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:#fff;
  transition:border-color .15s;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-head,
.payment-card .cl-radio-row.cl-radio-cod .cod-head{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 36px;
  align-items:center;
  column-gap:16px;
  width:100%;
  min-width:0;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-head input[type=radio],
.payment-card .cl-radio-row.cl-radio-cod .cod-head input[type=radio]{
  grid-column:1;
  justify-self:start;
  flex:0 0 auto;
  margin-right:0;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mono-label,
.payment-card .cl-radio-row.cl-radio-cod .cod-titlewrap{
  grid-column:2;
  justify-self:start;
  display:flex;
  gap:2px;
  min-width:0;
  max-width:100%;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mono-label{
  align-items:center;
  gap:12px;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mono-label img{
  flex:0 0 auto;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-titlewrap,
.payment-card .cl-radio-row.cl-radio-cod .cod-titlewrap{
  flex-direction:column;
}
.payment-card .cl-radio-row.cl-radio-mono-parts:not(.is-open) .mp-head,
.payment-card .cl-radio-row.cl-radio-cod:not(.is-open) .cod-head{
  min-height:36px;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-title,
.payment-card .cl-radio-row.cl-radio-cod .cod-title{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-title{
  color:rgba(26,26,26,.72);
  font-weight:600;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-arrow,
.payment-card .cl-radio-row.cl-radio-cod .cod-arrow{
  grid-column:3;
  justify-self:end;
  margin-left:0;
  transition:transform .18s ease;
  flex:0 0 auto;
}
.payment-card .cl-radio-row.cl-radio-mono-parts.is-open .mp-arrow,
.payment-card .cl-radio-row.cl-radio-cod.is-open .cod-arrow{transform:rotate(180deg);}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-panel,
.payment-card .cl-radio-row.cl-radio-cod .cod-panel{
  width:100%;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .22s ease,opacity .18s ease;
}
.payment-card .cl-radio-row.cl-radio-mono-parts.is-open .mp-panel,
.payment-card .cl-radio-row.cl-radio-cod.is-open .cod-panel{
  opacity:1;
  max-height:260px;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-subline{
  margin-top:12px;
  padding:3px;
  color:#1A1A1A;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-subline strong{
  color:#CF4520;
  font-weight:700;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-warn,
.payment-card .cl-radio-row.cl-radio-cod .cod-note{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(207,69,32,.28);
  background:rgba(207,69,32,.06);
  border-radius:14px;
  font-size:13px;
  line-height:1.35;
  color:rgba(26,26,26,.92);
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-box{
  margin-top:10px;
  padding:0;
  background:transparent;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-track{
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  overflow:hidden;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-fill{
  height:100%;
  width:0%;
  background:rgba(206,63,26,.78);
  transition:width .25s ease;
}
.payment-card .cl-radio-row.cl-radio-mono-parts .mp-text{
  margin-top:8px;
  color:rgba(206,63,26,.9);
  font-size:13px;
  line-height:1.35;
}
.payment-card .cl-radio-row.cl-radio-mono-parts.is-eligible .mp-box,
.payment-card .cl-radio-row.cl-radio-mono-parts.is-disabled .mp-warn{
  display:none;
}
.payment-card .cl-radio-row.cl-radio-mono-parts.is-open,
.payment-card .cl-radio-row.cl-radio-cod.is-open{
  border-color:var(--gold);
  border-radius:20px;
}
.payment-card .cl-radio-row.cl-radio-mono-parts:not(.is-open),
.payment-card .cl-radio-row.cl-radio-cod:not(.is-open){
  border-radius:var(--radius-pill);
}
.payment-card .cl-radio-row.cl-radio-mono-parts.is-disabled,
.payment-card .cl-radio-row.cl-radio-cod.is-cod-disabled{
  opacity:.65;
}
.payment-card .cl-radio-row.cl-radio-cod.is-cod-disabled .cod-head input,
.payment-card .cl-radio-row.cl-radio-cod.is-cod-disabled .cod-title{
  cursor:not-allowed;
}
.payment-card .cl-radio-row.cl-radio-cod.is-cod-disabled .cod-note{
  color:#b42318;
}

/* контейнери підказок під полями */
.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;
}
.gift-summary-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 0;
  margin: 2px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(26, 26, 26, .18);
  color: var(--gold);
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.gift-summary-btn[hidden] {
  display: none !important;
}
.gift-summary-btn__plus {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.gift-summary-btn__plus::before,
.gift-summary-btn__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.gift-summary-btn__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.gift-summary-btn:hover {
  opacity: .86;
}
.gift-open {
  overflow: hidden;
}
.gift-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 26, 26, .42);
}
.gift-modal {
  position: relative;
  width: min(92vw, 640px);
  height: min(86vh, 620px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  padding: 28px;
}
.gift-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--text-main);
  cursor: pointer;
}
.gift-title {
  margin: 0 42px 22px;
  color: var(--text-main);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.24;
  text-align: center;
}
.gift-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
}
.gift-tab {
  min-height: 42px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}
.gift-tab.is-active {
  background: var(--gold);
  color: #fff;
}
.gift-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.gift-list::-webkit-scrollbar {
  width: 6px;
}
.gift-list::-webkit-scrollbar-track {
  background: transparent;
}
.gift-list::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 6px;
}
.gift-loading {
  padding: 36px 0;
  color: var(--text-gray);
  text-align: center;
}
.gift-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(26, 26, 26, .1);
}
.gift-item:last-child {
  border-bottom: 0;
}
.gift-item__media {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f6f6;
}
.gift-item__media img,
.gift-item__media span {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.gift-item__title {
  display: block;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.gift-item__title:hover {
  color: var(--gold);
}
.gift-item__vendor {
  margin-top: 6px;
  color: var(--text-gray);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.gift-item__side {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gift-item__price {
  min-width: 72px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gift-add {
  min-width: 104px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.gift-add:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.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;
}
html.pay-submitting body {
  cursor: progress;
}
html.pay-submitting .cr-pay-btn[disabled] {
  opacity: .92;
}
.pay-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(248,246,244,.64));
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  animation: payOverlayIn .18s ease-out both;
}
.pay-submit-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.08), rgba(255,255,255,.24));
}
.pay-submit-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111111;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .92);
  box-shadow: none;
}
.pay-submit-spinner {
  width: 76px;
  height: 76px;
  border: 6px solid rgba(207, 69, 32, .16);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: paySpin .8s linear infinite;
}
@keyframes payOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes paySpin {
  to { transform: rotate(360deg); }
}
@keyframes applePayTrace {
  0% {
    stroke-dashoffset: 120;
    opacity: .35;
  }
  48% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -120;
    opacity: .35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pay-submit-spinner {
    animation-duration: 1.6s;
  }
  .apple-pay-loader path {
    animation-duration: 2.8s;
  }
}

.wallet-express {
  margin-bottom: 20px;
}
.wallet-express-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.wallet-express-grid[data-wallet-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.wallet-express-grid[data-wallet-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wallet-express-grid[hidden],
.wallet-express-item[hidden] {
  display: none !important;
}
.wallet-express-item {
  min-width: 0;
}
.wallet-pay-radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.wallet-pay-shell {
  width: 100%;
  height: 52px;
  min-height: 52px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.wallet-pay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: #050505;
  color: #fff;
  font: 800 24px/1 "Nunito Sans", ui-sans-serif, system-ui;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 15, 15, .10);
  transition: opacity .15s ease, box-shadow .15s ease;
}
.wallet-pay-button:hover {
  box-shadow: 0 14px 28px rgba(15, 15, 15, .14);
}
.wallet-pay-button:active {
  opacity: .92;
}
.wallet-pay-button:disabled {
  cursor: default;
  opacity: .74;
  box-shadow: 0 8px 18px rgba(15, 15, 15, .08);
}
.wallet-pay-default,
.wallet-pay-loading {
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wallet-pay-default {
  display: inline-flex;
}
.wallet-pay-loading {
  display: none;
  min-width: 0;
}
.wallet-pay-loading-text {
  display: block;
  min-width: 0;
  line-height: 1;
}
.wallet-pay-loading-text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-pay-loading-text span {
  font-family: "Nunito Sans", ui-sans-serif, system-ui;
  font-size: 14px;
  font-weight: 800;
}
.wallet-pay-button.is-preparing {
  cursor: wait;
  opacity: .86;
}
.wallet-pay-button.is-preparing .wallet-pay-default {
  display: none;
}
.wallet-pay-button.is-preparing .wallet-pay-loading {
  display: inline-flex;
}
.apple-pay-mark {
  font-size: 31px;
  line-height: .75;
}
.apple-pay-loader {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: block;
  overflow: visible;
}
.apple-pay-loader-symbol {
  font: 400 50px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  fill: transparent;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  paint-order: stroke;
  animation: applePayTrace 2.25s cubic-bezier(.48, 0, .22, 1) infinite;
}
.wallet-sdk-slot {
  width: 100%;
  height: 52px;
  min-height: 52px;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
}
.wallet-express.is-sdk-ready.is-sdk-clickable .wallet-sdk-slot {
  opacity: .01;
  pointer-events: auto;
}
.wallet-sdk-slot[hidden] {
  display: none !important;
}
.wallet-sdk-slot > * {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
}
.wallet-sdk-slot .payment-element,
.wallet-sdk-slot iframe {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 14px !important;
}
.hutko-wallet-checkout {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  min-height: 52px;
  overflow: hidden;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
}
.wallet-express.is-sdk-ready.is-sdk-clickable .hutko-wallet-checkout {
  min-height: 52px;
  opacity: .01;
  pointer-events: auto;
}
.hutko-wallet-checkout[hidden] {
  display: none !important;
}
.hutko-wallet-checkout #f,
.hutko-wallet-checkout #f .f-container,
.hutko-wallet-checkout #f .f-layout {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hutko-wallet-checkout #f .f-footer {
  display: none !important;
}
.hutko-wallet-checkout #f .f-layout > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px !important;
  width: 100% !important;
}
.wallet-express-grid[data-wallet-count="2"] .hutko-wallet-checkout #f .f-layout > div {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.wallet-express-grid[data-wallet-count="1"] .hutko-wallet-checkout #f .f-layout > div {
  grid-template-columns: minmax(0, 1fr) !important;
}
.hutko-wallet-checkout #f .f-layout > div > div {
  width: 100% !important;
  min-width: 0 !important;
}
.hutko-wallet-checkout #f .f-btn,
.hutko-wallet-checkout #f .f-btn-block {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #050505 !important;
  box-shadow: 0 10px 22px rgba(15, 15, 15, .10) !important;
}
.hutko-wallet-checkout #f .f-btn:hover {
  box-shadow: 0 14px 28px rgba(15, 15, 15, .14) !important;
}
.hutko-wallet-checkout #f .f-btn > span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.hutko-wallet-checkout iframe,
.hutko-wallet-checkout button,
.hutko-wallet-checkout [role="button"] {
  min-height: 52px !important;
  border-radius: 14px !important;
}
.hutko-wallet-checkout #f iframe {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 52px !important;
  border: 0 !important;
}
.hutko-wallet-checkout #f [class*="button-pay-wallet-inner_click"] {
  inset: 0 !important;
}
.hutko-wallet-checkout button {
  font-family: "Nunito Sans", ui-sans-serif, system-ui !important;
}
.wallet-express-item .sdk-pay-status {
  width: 100%;
  margin: 10px 0 0;
}
.sdk-pay-status {
  width: min(100%, 520px);
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(228, 11, 45, .06);
  color: #c32126;
  font-size: 14px;
  line-height: 1.35;
}
.sdk-pay-status[data-tone="success"] {
  background: rgba(18, 146, 110, .08);
  color: #0b7f61;
}
.sdk-pay-status[data-tone="info"] {
  background: rgba(26, 26, 26, .04);
  color: var(--text-gray);
}

/* ----------------------------------------
   Общий контейнер для двух аккордеонов
-------------------------------------------*/
.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 "Nunito Sans", 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:0;
}
.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 */
@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;
}