*,
*::before,
*::after{
  box-sizing: border-box;
}

.product-options-column{
  flex: 1;
  background: var(--fridge-bg, #121212);
  border-radius: 10px;
  /* единый паддинг как переменная */
  --fridge-pad: 1rem;
  /* внешний отступ сверху для всего холодильника */
  --fridge-gap-top: clamp(12px, 2.2vw, 28px);
  margin-top: var(--fridge-gap-top);
  padding: var(--fridge-pad);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  position: relative;
  /* величина наезда групп на картинку */
  --groups-overlap: clamp(80px, 15vw, 140px);
}

#optionsContainer{
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* тянем группы наверх, наезжая на картинку */
  margin-top: calc(10px - var(--groups-overlap));
  position: relative;
  z-index: 2; /* выше затемняющего градиента изображения */
}

.group-block{
  border-radius: 0px;
  padding: 5px;
}

/* Заголовок группы: текст + линия справа */
.group-block h4.option-group-title{
  color: #fff;
  font-size: 20px;
  margin: 4px 0 8px 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-block h4.option-group-title::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #333;
  /* линия начинается сразу после текста/хинта и тянется до конца */
}
/* Если заголовка нет — линию не рисуем вообще */
.group-block h4.option-group-title:empty::after{
  display: none;
}
/* У самой верхней группы полоски нет */
.group-block h4.option-group-title.is-first::after{
  display: none;
}

.checkbox-label{
  flex: 1;
  color: white;
  font-weight: 500;
}

.checkbox-price{
  color: #bbb;
  font-weight: 500;
  margin-left: auto;
}

 /* базово 2 колонки; классом включаем 3 */
 .radio-buttons{
   display: grid;
   gap: 10px;
   align-items: stretch;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .radio-buttons.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .radio-buttons.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

 @media (max-width: 600px){
   .radio-buttons{ grid-template-columns: 1fr; } /* мобилка — столбцом */
 }

 .radio-buttons .option-wrapper{ min-width: 0; } /* позволяет тексту переноситься корректно */

.radio-button{ display:flex; width:100%; height:100%; cursor:pointer; }

 /* содержимое плитки  */
 .radio-button > span{
   display:flex;
   align-items:center;
   justify-content:center;
   column-gap:6px;              /* горизонтальный зазор */
   row-gap:0;                   /* без зазора между строками */
   flex-wrap:wrap;              /* цена переедет на новую строку при нехватке места */
   width:100%;
   min-height:44px;
   padding:12px 16px;
   border:1px solid var(--nt-border);
   border-radius:12px;
   background:var(--nt-bg-mid);
   line-height:1.2;
   text-align:center;
   transition:background .2s, border-color .2s, color .2s;
 }
 .radio-button > span .rb-label{
   flex:1 1 auto;
   min-width:0;
   white-space:nowrap;          /* держим подпись в одну строку */
   overflow:hidden;
   text-overflow:ellipsis;      /* обрезаем, если уж совсем длинно */
   transition: font-size .12s ease;
 }
 
  /* если разметка без .rb-label — плавно меняем размер текста всей плитки */
  .radio-button > span{
    transition: font-size .12s ease;
  }
 .radio-button > span .rb-price{
   flex:0 0 auto;
   white-space:nowrap;          /* цена не ломается посередине */
 }

 .radio-button > span:hover{ border-color: var(--nt-accent); }
 .radio-button input:focus-visible + span{
   outline: 2px solid var(--nt-accent);
   outline-offset: 2px;
 }

 .radio-button > span.active,
 .radio-button input:checked + span{
   background: var(--nt-accent);
   color: #fff;
   border-color: var(--nt-accent);
 }

.quantity-control{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quantity-minmax{
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #aaa;
}

.range-calculator{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.range-slider{
  height: 10px !important;
  background: #333 !important;
  border-radius: 4px !important;
  margin: 8px 0 !important;
  position: relative !important;
  border: none !important;
  box-shadow: none !important;  
}

.range-slider .noUi-target{
  border: none !important;
  box-shadow: none !important;
}

.range-slider .noUi-handle:hover{
  background: #e0d9ff;
}

/* базовые старые стили оставляем, но грид ниже их переопределит */
.range-values{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.range-values{ gap:12px; align-items:flex-end; }
.range-values > div{ display:flex; flex-direction:column; flex:1 1 0; }
.range-values > div:first-child{ align-items:flex-start !important; text-align:left; }
.range-values > div:last-child{  align-items:flex-end !important;  text-align:right; }
.range-values .range-arrow{ flex:0 0 auto; }    

.range-input{
  background: var(--nt-bg-dark);;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 10px 14px;
  width: 120px;
  font-size: 1.1rem;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

/* Hide number spinners (range / quantity / calculator) */
.range-input,
.quantity-count,
.calculator-count{
  -moz-appearance: textfield;
  appearance: textfield;
}
.range-input::-webkit-outer-spin-button,
.range-input::-webkit-inner-spin-button,
.quantity-count::-webkit-outer-spin-button,
.quantity-count::-webkit-inner-spin-button,
.calculator-count::-webkit-outer-spin-button,
.calculator-count::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.range-minmax{
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #888;
  padding: 0 2px;
}
/* === Range-calculator в стиле rank: 3-колоночная сетка === */
.range-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 18px;
  align-items: center;
}
.range-row-labels{}
.range-row-inputs{}

.range-label{
  font-size: 14px;
  font-weight: 600;
  opacity: .9;
}
.range-label.start{ justify-self: start; text-align: left; }
.range-label.end  { justify-self: end;   text-align: right; }

.range-mid-arrow{
  font-size: 30px;
  line-height: 1;
  justify-self: center;
}
.range-row-inputs .range-input{
  width: 100%;
  max-width: 220px;
}

/* Мобильный: сохраняем 3 колонки и ужимаем элементы */
@media (max-width:560px){
  .range-grid{
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 10px;
  }
  .range-row-inputs .range-input{
    font-size: 14px;
    padding: 8px 12px;
  }
  .range-mid-arrow{ font-size: 22px; }
}

.textblock-content{
  font-size: 1rem;
  color: #ddd;
  background: #1e1e2f;
  padding: 10px;
  border-radius: 8px;
  border-left: 4px solid #6b46c1;
}

.custom-dropdown{
  position: relative;
  width: 100%;
}

.selected{
  background-color: var(--nt-bg-dark);
  padding: 10px 12px;
  border: 1px solid #3a3a52;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-label{
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-price{
  margin-left: 8px;
  color: #ccc;
  white-space: nowrap;
}

.dropdown-item-label{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-item-price{
  flex-shrink: 0;
  margin-left: 12px;
  color: #bbb;
  white-space: nowrap;
}

.selected-price{
  margin-left: 10px;
  color: #bbb;
  white-space: nowrap;
}

#totalPriceDisplay{
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 2px;
}

#price-sticky-block,
#price-sticky-block *{
  line-height: 1.15;
}

#price-sticky-block h4{
  font-size: 15px;
  margin: 2px 0 0 0;
  padding: 0;
  line-height: 1.18;
}

#price-sticky-block strong{
  font-size: 14px;
  line-height: 1.12;
}

#price-sticky-block .eta-wrapper{
  margin-top: 10px;      
  margin-bottom: 12px;   
  padding: 0;
  text-align: left;
}

#totalPriceDisplay{
  text-align: left;
  margin-bottom: 10px;   
}


#price-sticky-block .add-to-cart{
  margin-top: 14px !important;
  display: block;
  width: 100%;
  box-sizing: border-box; 
}

.guarantee-line{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;            
  color: #34d184;              
  font-size: 13px;
  font-weight: 600;
  opacity: .95;
}
.guarantee-line .g-ico{
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 14px;
}

.product-options-column form{
  flex-grow: 1;
}

.product-options-column button{
  margin-top: 1rem;
  background: linear-gradient(90deg, #2563EB 0%, #720FFE 56%, #7709FF 100%);
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.product-options-column button:hover{
 background: linear-gradient(90deg, #7709FF 0%, #720FFE 56%, #2563EB 100%);
 transition: background 0.2s ease;
}
/* лёгкая кнопка очистки поиска в listbox */
.product-options-column button.checkbox-listbox-clear{
  margin-top: 0;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 1.3rem;
}

.toast{
  position: fixed;
  left: 50%;
  top: calc(var(--header-h, 72px) + env(safe-area-inset-top, 0px) + 12px);
  transform: translate(-50%, -8px);

  max-width: min(560px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;

  background: rgba(28, 31, 50, 0.96);
  color: #fff;
  border: 1px solid rgba(119, 9, 255, 0.28);
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);

  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10100;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}

.toast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.hidden{
  display: none;
}


.rank-calculator{
  margin: 0;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
}

.rank-selects-vertical{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.rank-imgs-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  width: 100%;
  margin-bottom: 4px;
}

.rank-selects-row{
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  justify-content: center;
}

.rank-select{
  width: 100%;
  background: #222645;
  border: 1px solid #3b4080;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  padding: 10px 16px;
  padding-right: 40px;
  appearance: none;
  outline: none;
  transition: border 0.2s;
}

.rank-preview-img{
  height: 50px;
  width: 50px;
  border-radius: 7px;
  object-fit: contain;
  justify-content: center;
  margin: 15px 2px;
}

.rank-select-wrapper.open .rank-select-arrow{
  transform: translateY(-50%) rotate(-135deg);
}

.rank-select-wrapper{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 220px;
}

.rank-preview-img[hidden]{ display:none; } 

/* === Rank-calculator: === */
.rank-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap:18px;
  align-items: center;
}
/* Rank-calculator: three-row layout helpers */
.rank-row-labels,
.rank-row-images,
.rank-row-selects{
  /* All rows share the same 1fr auto 1fr grid via .rank-grid */
}

.rank-label.start{ justify-self: start; text-align: left; }
.rank-label.end  { justify-self: end;   text-align: right; }

.rank-row-images .rank-preview-img{
  justify-self: center;
  align-self: center;
}

.rank-col{
  display:grid;
  grid-auto-rows:auto;
  gap:10px;
}
.rank-col.start .rank-label{ text-align:left; }
.rank-col.end   .rank-label{ text-align:right; }
.rank-label{
  font-size:14px;
  font-weight:600;
  opacity:.9;
}
.rank-mid-arrow{ font-size:30px; }

/* Mobile: сохраняем 3-колоночную сетку в каждой строке и ужимаем элементы */
@media (max-width:560px){
  /* остаётся 3 колонки: селект — стрелка — селект */
  .rank-grid{
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap:10px;
  }
  /* лейблы: Start слева, End справа */
  .rank-label.start{ justify-self:start; text-align:left; }
  .rank-label.end{   justify-self:end;   text-align:right; }
  /* картинки компактнее, над своими селектами */
  .rank-row-images .rank-preview-img{
    width:40px; height:40px; margin:6px 2px;
  }
  /* селекты занимают всю ширину своих ячеек, без max-width-зажима */
  .rank-row-selects .rank-select-wrapper{
    width:100%; max-width:none; min-width:0;
  }
  .rank-select{
    font-size:14px; padding:8px 12px; padding-right:32px;
  }
  .rank-select-arrow{
    right:10px; width:10px; height:10px; border-width:0 2px 2px 0;
  }
  /* центральная стрелка компактнее, но остаётся между селектами */
  .rank-mid-arrow{ font-size:22px; line-height:1; }
}

.custom-text-block{
  margin-top: 10px;
  padding: 16px 20px 16px 24px;
  /* мягкий фоновый градиент в зелёной гамме */
  background: linear-gradient(180deg, rgba(67,236,129,.10) 0%, rgba(67,236,129,.05) 100%);
  border-radius: 8px;
  color: #e8e8f8;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: block;
  overflow: hidden; /* чтобы правые полосы аккуратно обрезались по радиусу */
}

.custom-text-block strong,
.custom-text-block b{
  font-weight: 700;
}
.custom-text-block p{ margin: 0; }
.custom-text-block a{
  color: var(--nt-success, var(--nt-green, #43ec81));
  text-decoration: underline dotted;
}

.custom-text-block::before{
  content: "";
  position: absolute;
  left: 4px; top: 12px; bottom: 12px;
  width: 4px; border-radius: 2px;
  background: var(--nt-success, var(--nt-green, #43ec81));
}
/* правые декоративные ДИАГОНАЛЬНЫЕ линии — под текстом */
.custom-text-block::after{
  content:"";
  position:absolute;
  right:-62px;                       /* чуть за правым краем */
  top:50%;                           /* якорь по центру */
  width:160px;
  /* всегда хватает высоты даже у 1 строки */
  height:max(300px, 260%);
  pointer-events:none;
  z-index:0;                         /* под контентом */
  transform: translateY(-50%) rotate(16deg);
  transform-origin: center right;
  /* две параллельные диагонали, чуть прозрачнее */
  background:
    linear-gradient(90deg, rgba(67,236,129,.28), rgba(67,236,129,.28)) 28px 0 / 6px 100% no-repeat,
    linear-gradient(90deg, rgba(67,236,129,.12), rgba(67,236,129,.12)) 56px 0 / 3px 100% no-repeat;
  filter: drop-shadow(0 0 8px rgba(67,236,129,.12));
  opacity:.25;
}

/* контент поверх декоративных линий */
.custom-text-block > *{ position:relative; z-index:1; }

.calendar-group-block .calendar-date-btn,
.calendar-group-block .calendar-slot-btn{
  background: var(--nt-bg-dark) !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  min-width: 0 !important;
  min-height: 28px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: background .18s, color .18s, border-color .18s;
  outline: none !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  display: inline-block !important;
}

.calendar-group-block .calendar-date-select{
  background: #232642 !important;
  color: #b2c5e5 !important;
  border: 2px solid #232642 !important;
  border-radius: 7px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  outline: none !important;
  margin-left: 7px !important;
  margin-top: 15px !important;
  min-width: 70px !important;
  height: 28px !important;
}

.calendar-group-block .calendar-selected-label{
  margin-top: 8px !important;
  color: #7eb7ff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Spots left under time grid */
.calendar-group-block .calendar-spots-left{
  margin-top:8px;
  color:#f2f6ff; font-size:13px; font-weight:600;
  display:none; align-items:center; gap:8px;
}
.calendar-group-block .calendar-spots-left .spots-ico{
  width:16px; height:16px; display:inline-block;
}
.calendar-group-block .calendar-spots-left .spots-text{
  line-height:1;
}

/* Help + Chat */
.calendar-group-block .calendar-help.custom-text-block{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.calendar-group-block .calendar-help .help-chat-btn{
  margin: 0 !important;
  background: var(--nt-bg-dark);
  border: 1px solid #333;
  border-radius: 8px;
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
}
.calendar-group-block .calendar-help .help-chat-btn:hover{
  background: var(--nt-accent);
}

.calendar-group-block .calendar-dates-container{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  width: 100%;
  min-height: 34px;
}

.calendar-group-block .calendar-dates-row{
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 0 !important;
}

.your-local-time-label{
  display:block;
  font-size:13px; color:#cfe2ff;
  margin:4px 0 10px 0; font-weight:500; letter-spacing:.2px;
}
.your-local-time-label .tz-pill{
  display:inline-block;
  background:#22304a;
  color:#d8e7ff;
  border:1px solid #2d3f67;
  padding:6px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1;
}
.your-local-time-label .tz-your-row{
  display:flex; align-items:baseline; gap:6px;
  margin-top:6px;
}
.your-local-time-label .tz-yourtime{ color:#cfe2ff; }
.your-local-time-label .tz-name{ color:#b4c8ff; opacity:.9; }
.your-local-time-label .tz-now{ color:#fff; font-weight:600; }

.calendar-class-select{
  display: inline-block;
  background: #20223a;
  color: #fff;
  border: 1px solid #2b5ff7;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 1rem;
  margin-bottom: 10px;
  outline: none;
  margin-right: 16px;
  transition: border 0.2s, box-shadow 0.2s;
}

.calendar-class-select:focus{
  border-color: #7289da;
  box-shadow: 0 0 0 2px #2b5ff733;
}

label[for="calendar-class-select"], .calendar-group-block label{
  color: #b4b6cd;
  font-size: 0.97rem;
  margin-right: 10px;
  font-weight: 500;
}

.calendar-group-block .calendar-time-blocks{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  margin-top: 3px !important;
}

.checkbox-line{
  transition: background 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 8px;
  gap: 10px;
  background: var(--nt-bg-dark);
}

.checkbox-line:hover{
  background: var(--nt-bg-light);
}

.radio-button > span{
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px 4px;
  min-width: 20px;
  text-align: center;
  transition: all 0.2s ease;
  background: var(--nt-bg-dark);
  border-color: #333;
  color: #ccc;
}

.radio-button > span:hover{
  background: var(--nt-bg-light);
  border-color: var(--nt-accent);
  color: #fff;
}

.radio-button > span.active,
.radio-button input:checked+span{
  background: var(--nt-accent);
  border-color: var(--nt-accent);
}


.quantity-count{
  width: 25%;
  padding: 10px 14px;
  font-size: 1.1rem;
  border-radius: 6px;
  border: 1px solid #444;
  color: #fff;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  background: var(--nt-bg-dark);
  margin-bottom: 12px;
}

.dropdown-list{
  padding: 0;
  margin: 0;
  position: absolute;
  background-color: #1f1f2e;
  border: 1px solid var(--nt-accent)!important;
  border-radius: 6px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  display: none;
  flex-direction: column;
  left: 0;
  top: 100%;
  box-sizing: border-box;
  background: var(--nt-bg-dark);
}

:root{--nt-primary: #7709FF;
  --nt-primary-dim: #8d3bff;
  --nt-bg-dark: #1a1d26;
  --nt-bg-mid: #222434;
  --nt-bg-light: #2b2b3f;
  --nt-border: rgba(255,255,255,.08);
  --nt-accent: var(--nt-primary);
  --nt-primary-hover: #6a24ff;
  --nt-primary-dark: #4a00c8;
  --nt-accent-light: #b48cff;
  --nt-accent-dim: #9a5dff;
  --nt-bg-control: #1e1e2f;
}

.checkbox-line input[type="checkbox"]{
  margin-right: 12px;
  transform: scale(1.2);
  accent-color: var(--nt-accent);
}

.radio-button span.active,
.radio-button input:checked+span,
.radio-button span:hover{
  border-color: var(--nt-accent);
}

.radio-button span.active,
.radio-button input:checked+span{
  background: var(--nt-accent);
}

.range-slider .noUi-connect{
  background: var(--nt-accent);
}

.range-slider .noUi-handle{
  background: #fff;
  border: 2px solid #6b46c1;
  height: 20px !important;
  width: 20px !important;
  right: -11px !important;
  top: -4px !important;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  cursor: grab;
  border-color: var(--nt-accent);
}
.noUi-handle:after, .noUi-handle:before {
  display: none !important;
}


.quantity-count:hover,
.quantity-count:focus{
  outline: none;
  border-color: var(--nt-accent);
  box-shadow: 0 0 5px var(--nt-accent);
}

.range-input:hover,
.range-input:focus{
  outline: none;
  border-color: var(--nt-accent);
  box-shadow: 0 0 5px var(--nt-accent);
}

.range-arrow{
  font-size: 40px;
  margin: 0 6px;
  font-weight: bold;
  vertical-align: middle;
  color: #fff;
  padding-top: 20px;
}

/* Left-align content in sticky price bar */
/* ширина и «пролив» стики-блока считаем от того же паддинга */
#price-sticky-block{
  margin-bottom: 0px;
  background: #121212;
  padding: 1.5rem;
  z-index: 10;
  text-align: left;
  min-width: 280px;
  position: sticky;
  bottom: 0;
  width: calc(100% + (var(--fridge-pad) * 2));
  max-width: none;
  margin-left: calc(-1 * var(--fridge-pad));
  margin-right: calc(-1 * var(--fridge-pad));
  border-radius: 0 0 10px 10px;
}

/* Открыт, но пуст — подсвечиваем фиолетовым (accent) */
.custom-dropdown.open:not(.has-value) .selected{
  border-color: var(--nt-accent) !important;
}
/* Открыт и заполнен — тоже акцент (без изменений) */
.custom-dropdown.has-value.open .selected{
  border-color: var(--nt-accent) !important;
}

.dropdown-arrow{
  transition: transform 0.3s ease;
  margin-left: 8px;
  display: inline-block;
  border: solid #aaa;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  border-color: #aaa;
}

.custom-dropdown.open .dropdown-arrow{ transform: rotate(-135deg); }
/* стрелка тоже фиолетовая, когда открыт и пуст */
.custom-dropdown.open:not(.has-value) .dropdown-arrow{
  border-color: var(--nt-accent);
}
.custom-dropdown.has-value.open .dropdown-arrow{
  border-color: var(--nt-accent);
}
/* при открытом и пустом — рамка списка тоже фиолетовая */
.custom-dropdown.open:not(.has-value) .dropdown-list{
  border-color: var(--nt-accent);
}

.rank-select-arrow{
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  pointer-events: none;
  border: solid #aa9cff;
  border-width: 0 2.5px 2.5px 0;
  padding: 2.5px;
  background: transparent !important;
  transition: transform 0.3s;
  z-index: 3;
  border-color: var(--nt-accent);
}

.rank-select:focus{
  border: 1.5px solid var(--nt-accent);
}

.calendar-date-select,
.calendar-class-select{
  background: var(--nt-bg-control);
  color: #fff;
  border: 1px solid var(--nt-accent);
  border-radius: 8px;
  padding: 6px 10px;
}

.calendar-slot-btn.active{
  border: 2px solid var(--nt-accent);
}

.dropdown-item,
.dropdown-item-label,
.dropdown-item-price{
  color: #e8e8e8;
}

.calendar-group-block .calendar-date-btn:hover:not(.active),
.calendar-group-block .calendar-slot-btn:hover:not(.active){
  background: var(--nt-accent)!important;
}

.product-options-column select{
  background: var(--nt-bg-control);
  color: #fff;
  border: 1px solid var(--nt-accent);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
}

.dropdown-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  width: 100%;
  transition: background .18s,color .18s;
  color: #e8e8e8;
}

.dropdown-item:hover:not(.selected){
  background: #3a3a52;
  color: #fff;
}


/* Когда реально выбрано значение */
.custom-dropdown.has-value .selected{
  border-color: var(--nt-accent) !important;
}


/* Внутри списка выделяем цветом, без обводки */
.dropdown-item.selected{
  border: 0 !important;
  background: var(--nt-accent) !important;
  color: #fff !important;
}

/* (необязательно) стрелка получает акцент только при выбранном значении */
.custom-dropdown.open .dropdown-arrow{ border-color: #aaa; }
.custom-dropdown.has-value.open .dropdown-arrow{ border-color: var(--nt-accent); }

.quantity-slider::-webkit-slider-runnable-track,
.quantity-slider::-moz-range-track,
.quantity-slider::-ms-track{
  height: 12px;
  background: #444;
  border-radius: 6px;
}

.calendar-group-block .calendar-date-select {
  background: #1e1e2f !important;
  color: #fff !important;
  border: 1px solid var(--nt-accent) !important;
  border-radius: 8px !important;
}

.calendar-group-block button.active{
  background: var(--nt-accent) !important;
  color: #fff !important;
}

select option{
  background: #1e1e2f!important;
  color: #fff!important;
}

.quantity-slider::-ms-track{
  height: 14px;
  background: #444;
  border-radius: 7px;
  color: transparent;
}

.quantity-slider::-ms-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nt-accent);
  border: 2px solid #fff;
}

.quantity-message{
  font-size: 16px;
  font-weight: 500;
  color: #f7f7f7;
  margin-top: 14px;
  padding: 14px 28px 14px 16px;
  background: linear-gradient(180deg, rgba(67,236,129,.10) 0%, rgba(67,236,129,.05) 100%);
  border: 1px solid rgba(67,236,129,.35);
  border-radius: 8px;
  position: relative;
  overflow: hidden; /* чтобы диагонали обрезались по радиусу */
}

.quantity-slider::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
              var(--nt-accent) var(--fill),
              #444 var(--fill));
}

.quantity-slider::-moz-range-track{
  background: #444;
  border-radius: 4px;
  height: 8px;
}

.quantity-slider::-moz-range-progress{
  background: var(--nt-accent);
  height: 8px;
  border-radius: 4px;
}

.calculator-control{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calculator-control .quantity-slider{
  width: 100%;
}

.calculator-control .quantity-minmax{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: .75;
}

.calculator-control input.calculator-count.invalid{
  border: 1px solid #d9534f;
  background: #2b1e20;
}

.calculator-control.reversed .quantity-minmax span:first-child{
  order: 0;
}

.calculator-control.reversed .quantity-minmax span:last-child{
  order: 1;
}

.quantity-slider{
  accent-color: var(--nt-accent);
  appearance: none;
  margin-bottom: 12px;
  --slider-fill: var(--nt-accent-light);
  --fill: 0%;
  width: 100%;
  cursor: pointer;
  background: linear-gradient(90deg,#577bff var(--fill,0%),#2e364a var(--fill,0%));
  height: 6px;
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
}

.quantity-slider::-webkit-slider-thumb{
  margin-top: -5px;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #577bff;
  cursor: pointer;
}

.quantity-slider::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #577bff;
  cursor: pointer;
}

#oldPriceDisplay{
  font-size: 22px;
  color: #bbb;
  text-align: left;
  margin-bottom: 6px;    
  margin-top: 2px;
  font-weight: 500;
}

.old-price-strike{
  text-decoration: line-through;
  color: #bbb;
  opacity: 0.7;
  margin-right: 8px;
}

.discount-label{
  color: #21b459;
  font-weight: bold;
  font-size: 16px;
}

.hint{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.hint-q{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #556;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #bfc5ff;
  opacity: .9;
  user-select: none;
  background: #1a1d2698;
}

.hint{ position:relative; display:inline-flex; align-items:center; }
.hint-tooltip{
  display: none !important;
}

/* Показ по hover/focus (как было), только без сдвигов */
.hint:hover .hint-tooltip,
.hint:focus-within .hint-tooltip{
  opacity: 1;
}


/* === Портальный поповер для .hint — не выходит за экран === */
.nt-hint-popover{
  position: fixed;
  max-width: min(360px, 92vw);
  background: rgb(28, 31, 50);
  color: #fff;
  border: 1px solid rgba(73, 65, 138, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  padding-right: 30px;                  /* место под × */
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  z-index: 10050;
  line-height: 1.2;
  font-size: 13px;
}
.nt-hint-popover .nt-hint-close{
  position: absolute; top:2px; right:6px;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent;
  color:#cfd3ff; font-size:18px; cursor:pointer; line-height:1;
  border-radius:6px;
}


/* Триггер: кликабелен на мобилке, без выделения текста */
.hint-q{
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}



@media (max-width: 600px){
.custom-text-block{
  font-size: 16px;
  padding: 14px 28px 14px 12px; /* тоже даём место для правых полос */
}

}

@media(max-width:480px){
.product-options-column{
  max-width: 100%!important;
  min-width: 0!important;
  width: 100%!important;
}

#price-sticky-block{
  max-width: none!important;
}

}

@media(max-width:600px){
.product-options-column{
  width: 100%!important;
}

}

#product-image-container { position: relative; }

.share-actions{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Product image: пролив на всю ширину без влияния на sticky ======= */
.product-options-column #product-image-container{
  /* убираем нижнюю линию и свой фон */
  border-bottom: 0 !important;
  background: var(--fridge-bg, #121212) !important;
  /* делаем реальный пролив: расширяем ширину на 2*паддинг и компенсируем отступами */
  width: calc(100% + (var(--fridge-pad) * 2));
  margin-left: calc(-1 * var(--fridge-pad));
  margin-right: calc(-1 * var(--fridge-pad));
  margin-top: calc(-1 * var(--fridge-pad)); /* без отступа сверху */
  margin-bottom: 0;
  padding: 0 !important; 
  border-radius: 10px 10px 0 0;   /* скругления совпадают с холодильником */
  overflow: hidden;               /* режем только картинку, sticky не трогаем */
  aspect-ratio: 3 / 2;
}
.product-image-block { position: relative; border-radius: 0; }

/* Плавный фейд нижних 50% картинки в фон холодильника */
.product-image-block::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0; 
  top: var(--fridge-fade-start, 15%); /* у середины — минимальное затемнение */
  background: linear-gradient(
    to bottom,
    rgba(18,18,18,0.00)  0%,
    rgba(18, 18, 18, 0.219) 18%,
    rgba(18, 18, 18, 0.37) 36%,
    rgba(18, 18, 18, 0.541) 54%,
    rgba(18, 18, 18, 0.815) 74%,
    rgba(18, 18, 18, 0.938) 90%,
    rgba(18, 18, 18, 0.952) 95%,
    var(--fridge-bg, #121212) 100%    /* внизу — полностью в фон (0 видимости картинки) */
  );
  pointer-events:none;
  z-index:1; /* ниже бейджей/кнопок на изображении */
}

/* гарантия корректного рендера картинки */
.product-image-block .product-header-image{ display:block; width:100%; height:auto; }

.product-image-block .share-actions{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}


.product-image-block .icon-btn{
  width: 37px !important;
  height: 37px !important;
  margin: 0 !important;                 
  padding: 0 !important;                
  display: grid !important;              
  place-items: center !important;
  border: none !important;               
  border-radius: 8px !important;        
  background: rgba(10, 10, 10, 0.568) !important;  
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer;
  transition: background .12s ease;
}

.product-image-block .icon-btn:hover{
  background: rgba(82, 82, 82, 0.63) !important;  
}

.product-image-block .icon-btn:active{
  background: rgba(0, 0, 0, 0.575) !important;
}


.product-image-block .share-actions img.icon{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  pointer-events: none !important;
}

@media (max-width:600px){
  .product-image-block .icon-btn{ width: 30px !important; height: 30px !important; }
  .product-image-block .share-actions img.icon{ width: 16px !important; height: 16px !important; }
  /* на мобилке наезд делаем помягче */
  .product-options-column{ --groups-overlap: clamp(60px, 22vw, 160px); }
}

#product-image-container .share-actions #createCustomOrderBtn[hidden],
#product-image-container .share-actions #createCustomOrderBtn[style*="display: none"]{
  display: none !important;
}

/* === Tiny tooltips for icon buttons =================================== */
.product-image-block .icon-btn[data-tooltip]::before,
.product-image-block .icon-btn[data-tooltip]::after{ display:none !important; }

/* === Global floating tooltip (appended to <body>) ==================== */
#nt-tooltip{
  position: fixed;
  left: 0; top: 0;
 transform: translate(-50%,-100%);
  background: rgba(28,31,50,.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 9999;
}

#nt-tooltip.is-visible{
  opacity: 1;
}

/* Страховка от горизонтального скролла из-за абсолютов */
.product-page, .right-content, .game-layout{ overflow-x: clip; } /* можно hidden, если clip недоступен */


/* Портал для списков дропдаунов (над sticky блоками) */
.dropdown-portal{
  position: fixed;
  inset: 0;
  z-index: 10060;               /* выше sticky */
  pointer-events: none;         /* не блокируем клики по странице */
}
/* сам список должен принимать клики */
.dropdown-portal .dropdown-list{
  pointer-events: auto;
}

/* ===== Fridge local loader / skeleton =================================== */
/* Скелетон исчезает, когда на обёртке стоит .is-ready */
.product-options-column.is-ready .fridge-skeleton,
.fridge-mount.is-ready .fridge-skeleton { display: none !important; }

.fridge-skeleton{
  --sk-gap: 12px;
  --sk-border: rgba(255,255,255,0.07);
  --sk-sh: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%);
  display: grid;
  gap: var(--sk-gap);
  padding: 6px 0;
}
.sk-shimmer{
  background: var(--sk-sh);
  background-size: 220% 100%;
  animation: fridgeShimmer 1.15s linear infinite;
}
/* group header */
.sk-h4{ height:18px; width:42%; border-radius:6px; opacity:.9; }
.sk-group{ display:grid; gap:10px; }
/* radio buttons row (platform) */
.sk-radio-row{ display:flex; gap:10px; }
.sk-radio-pill{
  height:40px; width:100%; max-width:120px;
  border-radius:10px; border:1px solid var(--sk-border);
}
/* checkbox line (bundle/additional options) */
.sk-checkbox-line{ display:flex; align-items:center; gap:10px; }
.sk-checkbox-box{ width:18px; height:18px; border-radius:4px; border:1px solid var(--sk-border); }
.sk-line{ height:18px; border-radius:8px; }          /* generic shimmer bar */
.sk-w-60{ width:60%; } .sk-w-40{ width:40%; }
.sk-price{ width:56px; height:18px; margin-left:auto; border-radius:6px; }
/* select (weapon) */
.sk-select{ height:44px; border-radius:10px; border:1px solid var(--sk-border); }
/* quantity */
.sk-qty-row{
  display:flex; align-items:center; gap:10px;
}
.sk-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--sk-border);
}
.sk-input-wide{ flex:1 1 0; max-width:180px; }

/* dual selects (rank-like) */
.sk-dual{  display:grid;  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);  gap:12px; align-items:center;
}
.sk-arrow-big{  width:26px; height:26px;  border:1px solid var(--sk-border);  transform:rotate(-45deg);  border-left:0; border-top:0;
}

/* text / note block */
.sk-textblock{  height:64px; border-radius:8px; border:1px dashed var(--sk-border);
}

/* range calculator */
.sk-range{ display:grid; gap:10px; }
.sk-range-inputs{ display:flex; align-items:center; gap:10px; }
.sk-input{ height:44px; flex:0 0 90px; border-radius:10px; border:1px solid var(--sk-border); }
.sk-arrow{ width:22px; height:22px; border:1px solid var(--sk-border); transform:rotate(45deg); border-left:0; border-top:0; }
.sk-slider{ position:relative; height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.sk-track{ position:absolute; left:18%; right:18%; top:0; bottom:0; background:rgba(255,255,255,.16); }
.sk-handle{ position:absolute; top:-5px; width:18px; height:18px; border-radius:50%; background:#fff; opacity:.85; border:2px solid rgba(107,70,193,.8); }
.sk-slider .sk-handle:nth-of-type(2){ left:16%; }
.sk-slider .sk-handle:nth-of-type(3){ right:16%; }
.sk-minmax{ display:flex; justify-content:space-between; }
.sk-min, .sk-max{ width:20px; height:14px; border-radius:4px; }
/* apply shimmer to all parts */
.fridge-skeleton .sk-h4,
.fridge-skeleton .sk-radio-pill,
.fridge-skeleton .sk-checkbox-box,
.fridge-skeleton .sk-price,
.fridge-skeleton .sk-select,
.fridge-skeleton .sk-input,
.fridge-skeleton .sk-arrow,
.fridge-skeleton .sk-slider,
.fridge-skeleton .sk-min,
.fridge-skeleton .sk-max,
.fridge-skeleton .sk-line{ background: var(--sk-sh); background-size:220% 100%; animation: fridgeShimmer 1.15s linear infinite; }
@keyframes fridgeShimmer {
  0% { background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}

@media (max-width:600px){
  .sk-radio-row{ gap:8px; }
  .sk-radio-pill{ max-width:none; }
}

/* === Checkbox Listbox layout === */
.checkbox-listbox{
  display:block;
}
.checkbox-listbox-header{
  align-items:center;
  background: var(--nt-bg-dark);
  border:1px solid var(--line-soft, #3a3a52);
  border-radius:8px;
  padding:10px 12px;
  /* резерв под крестик справа */
  padding-right: 40px;
  margin-bottom:8px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
  position:relative;
}
.checkbox-listbox-header:focus-within{
  border-color: var(--nt-accent, #7709FF);
  box-shadow:0 0 0 1px rgba(119,9,255,.45);
}
.checkbox-listbox-input{
  flex:1 1 auto;
  width:100%;
  min-width:140px;
  outline:none;
  border:none;
  background:transparent;
  color: var(--text, #eaeaf2);
  font: inherit;
}
.checkbox-listbox-summary{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  white-space:nowrap;
  color: var(--muted, #aeb2c7);
}
.checkbox-listbox-right{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
/* когда есть выбранные пункты и поиск не активен — показываем summary и прячем инпут */
.checkbox-listbox-header.has-summary:not(.is-searching) .checkbox-listbox-summary{ display:flex; }
.checkbox-listbox-header.has-summary:not(.is-searching) .checkbox-listbox-input{
  position:absolute; inset:10px 12px; width:auto; height:calc(100% - 20px);
  opacity:0; pointer-events:none;   /* кликабельна область — но инпут не мешает */
}
.checkbox-listbox-summary-price{
  font-weight:600;
  color: var(--text, #eaeaf2);
}
.checkbox-listbox-clear{
  appearance:none;
  border:none;
  background:none;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  color: var(--muted, #aeb2c7);
}
/* переопределение глобального правила для кнопок внутри колонки */
.product-options-column .checkbox-listbox-clear{
  all: unset;
  cursor: pointer;
  font-size:1.1rem;
  line-height:1;
  color: var(--muted, #aeb2c7);
}
/* крестик в правом краю хэдера (виден и в режиме поиска) */
.checkbox-listbox-header .checkbox-listbox-clear{
  position:absolute;
  right:12px;
  top:50%;
  transform: translateY(-50%);
}
.checkbox-listbox-body{
  display:block;
}
.checkbox-listbox-select-all{
  /* визуально как обычная строка чекбокса */
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap:10px;
  padding:7px 10px;
  margin-bottom:8px;
  user-select:none;
}
.checkbox-listbox-scroll{
  max-height:300px;
  overflow-y:auto;
  padding-right:4px;
}

/* === Roulette hint card ================================================== */
.roulette-hint-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 14px; border-radius:12px;
  background: linear-gradient(90deg, rgba(119,9,255,0.18), rgba(119,9,255,0.06));
  margin: 10px 0 4px;
}
.roulette-hint-card .rh-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.roulette-hint-card .rh-ico{
  width:28px; height:28px; border-radius:8px;
  background-color:#7709FF22;
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
  /* можно переопределить: style="--rh-icon-url:url('/img/product/my-icon.svg')" */
  background-image: var(--rh-icon-url, url('/img/product/ticket.svg'));
  flex:0 0 28px;
}
.roulette-hint-card .rh-text{ min-width:0; }
.roulette-hint-card .rh-title{ font-weight:700; font-size:14px; color:#fff; }
.roulette-hint-card .rh-sub{ font-size:12px; color:#b0b3c7; margin-top:2px; }
.roulette-hint-card .rh-actions{ flex:0 0 auto; }
.roulette-hint-card .rh-btn{
  /* полностью отрываемся от глобальных стилей кнопок в колонке */
  all: unset;
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 14px; border-radius:10px;
  text-decoration:none; cursor:pointer; user-select:none;
  background: linear-gradient(90deg, #2563EB 0%, #720FFE 56%, #7709FF 100%);
  color:#fff; font-weight:700; font-size:13px;
}
.roulette-hint-card .rh-btn:hover{
  filter: brightness(1.08);
}
.roulette-hint-card .rh-btn.rh-ghost{
  background: transparent; border:1px solid rgba(255,255,255,0.18); color:#fff;
}
.roulette-hint-card.is-cd{ opacity: .95; }
.roulette-hint-card.is-guest{ background: linear-gradient(90deg, rgba(39,174,96,.18), rgba(39,174,96,.06)); }

/* === Проливаем карточку подсказки на всю ширину холодильника ============ */
.product-options-column .roulette-hint-card{
  position: relative;
  /* как у hero-изображения: игнорируем внутренний паддинг холодильника */
  width: calc(100% + (var(--fridge-pad) * 2));
  margin-left: calc(-1 * var(--fridge-pad));
  margin-right: calc(-1 * var(--fridge-pad));
  margin-top: calc(-1 * var(--fridge-pad)); /* упираемся в верх холодильника */
  margin-bottom: 8px; /* небольшой зазор до картинки */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;  
}

/* Когда подсказка есть — картинку не тянем отрицательным margin-top */
.product-options-column .roulette-hint-card + #product-image-container{
  margin-top: 8px;
  border-top-left-radius: 0;
  border-top-right-radius: 0; 
}