/* ===== Sticky Buy Bar (mobile) ===== */
@media (max-width: 768px) {
  .vs-sticky-buybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -6px 20px rgba(16,24,40,0.08);
    border-top: 1px solid #ECEFF3;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(0);
    transition: transform .2s ease;
	justify-content: center;
  }
  .vs-sticky-buybar--hidden { transform: translateY(110%); }

  .vs-sticky-buybar__price {
    min-width: 36%;
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .vs-sticky-buybar__price .price {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    color: #111;
    white-space: nowrap;
	
  }
  .vs-sticky-buybar__note {
    font-size: 12px; color: #6B7280;
    line-height: 1.1;
  }


 /* ============ ЦІНА ============ */
  .vs-sticky-buybar__price{
    min-width:0;
    line-height:1.15;
  }

  /* НЕ перебиваємо сайтові стилі .price — лише дрібні правки відступів */
  .vs-sticky-buybar__price .price{
    margin:0;
    display:inline-flex; gap:8px; align-items:baseline; flex-wrap:wrap;
    white-space:nowrap;
	flex-direction:column;
  }
  /* Якщо на сайті використовується del/ins — узгодимо розміри */
  .vs-sticky-buybar__price .price del{
    opacity:.7; text-decoration:line-through;
    font-size:14px; font-weight:600;
  }
  .vs-sticky-buybar__price .price ins{
    text-decoration:none;
    font-size:18px; font-weight:800;
  }
  /* Підпис-підказка */
  .vs-sticky-buybar__note{ 
    margin-top:2px; font-size:12px; color:#6B7280;
  }


  .vs-sticky-buybar__qty {
    display: flex; align-items: center; gap: 8px;
  }
  .vs-sticky-buybar__qty .qty {
    width: 64px; height: 40px;
    text-align: center; font-weight: 700; font-size: 14px;
    border: 1px solid #D0D5DD; border-radius: 10px;
    -moz-appearance: textfield;
  }
  .vs-sticky-buybar__qty .qty::-webkit-outer-spin-button,
  .vs-sticky-buybar__qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .vs-sticky-buybar__btn {
    flex: 1 1 auto;
    height: 40px;
	max-width:150px;
    border: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 18px;
    font-size: 16px; font-weight: 800; letter-spacing: .02em;
    color: #fff; cursor: pointer;
   background: #10b981;
    box-shadow: 0 10px 24px rgba(6,193,103,.35);
    transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
  
  background-image: linear-gradient(9deg, #40830a, transparent) !important;
  
  
  
  }
  .vs-sticky-buybar__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(6,193,103,.42); }
  .vs-sticky-buybar__btn:active { transform: translateY(1px); box-shadow: 0 6px 16px rgba(6,193,103,.28); }
  .vs-sticky-buybar__btn[disabled] { opacity:.55; cursor:not-allowed; box-shadow:none; }

  /* Щоб контент не перекривався баром */
  .vs-sticky-buybar-spacer { height: 72px; }
}
@media (min-width: 768px) {
div#vsStickyBuybar{
	
	display:none;
}

}

header.vk-head .vk-title {
    font-weight: 800;
}



/* Стиль для бейджа "В наявності" */
.in-stock {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 6px;
  
 
  
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  animation: pulseInStock 1.8s infinite;
}

@keyframes pulseInStock {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}




/* === FIX: адаптив для форм "Повідомити / Підібрати аналог" === */
@media (max-width: 520px) {
  .vk-ocb__form .vk-ocb--notify,.vk-ocb__form .vk-ocb--analog  {
    flex-wrap: wrap;           /* дозволяємо перенос */
    gap: 8px 8px;
  }
  .vk-ocb__phone {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;           /* знімаємо жорстке обмеження ширини */
    min-width: 0;
  }
  .vk-ocb__btn {
    flex: 1 1 100%;
    width: 100%;               /* кнопка на всю ширину, під полем */
    white-space: normal;       /* дозволяємо перенос тексту */
  }
}

/* Якщо десь лишився дуже малий брейкпоінт — підстрахуємося */
@media (max-width: 360px) {
  .vk-ocb__btn { font-size: 13px; padding: 0 12px; }
}


/* Стиль для бейджа "В наявності" */
.in-stock {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 6px;
  
 
  
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  animation: pulseInStock 1.8s infinite;
}

@keyframes pulseInStock {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}




/* === FIX: адаптив для форм "Повідомити / Підібрати аналог" === */
@media (max-width: 520px) {
  .vk-ocb__form .vk-ocb--notify,.vk-ocb__form .vk-ocb--analog  {
    flex-wrap: wrap;           /* дозволяємо перенос */
    gap: 8px 8px;
  }
  .vk-ocb__phone {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;           /* знімаємо жорстке обмеження ширини */
    min-width: 0;
  }
  .vk-ocb__btn {
    flex: 1 1 100%;
    width: 100%;               /* кнопка на всю ширину, під полем */
    white-space: normal;       /* дозволяємо перенос тексту */
  }
}

/* Якщо десь лишився дуже малий брейкпоінт — підстрахуємося */
@media (max-width: 360px) {
  .vk-ocb__btn { font-size: 13px; padding: 0 12px; }
}




/* БАЗА */
.vk-ocb{ margin-top:14px; }
.vk-ocb__form{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.vk-ocb__phone{
  flex:1 1 auto; height:40px; padding:0 12px;
  border:1px solid #D0D5DD; border-radius:12px; font-size:15px; max-width: 230px;
}
.vk-ocb__btn{
  flex:0 0 auto; height:40px; padding:0 18px; border-radius:14px; border:0;
  font-weight:800; font-size:15px; letter-spacing:.01em; cursor:pointer; transition:.15s ease;
}

/* PRIMARY: “Купити в 1 клік” — зелена, але інша за головну кнопку (компактніша, інший радіус, без жирної тіні) */
.vk-ocb--primary .vk-ocb__btn{
    background: linear-gradient(90deg, #cccccc66, #ddddddb3);
    color: #000000;
    
	width:auto;
    height: 35px;
}
.vk-ocb--primary .vk-ocb__btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(6,193,103,.24); }
.vk-ocb--primary .vk-ocb__btn:active{ transform: translateY(0); }

/* ALT (коли немає в наявності): яскраві та з відступами */
.vk-ocb--alt + .vk-ocb--alt{ margin-top:20px; }

/* Повідомити — синя */
.vk-ocb--notify .vk-ocb__btn{
  background:#2563EB; color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.18);width:auto;
}
.vk-ocb--notify .vk-ocb__btn:hover{ background:#1E4ED8; }

/* Аналог — помаранчева */
.vk-ocb--analog .vk-ocb__btn{
  background:#F59E0B; color:#1F2937; box-shadow:0 6px 16px rgba(245,158,11,.22); width:auto;
}
.vk-ocb--analog .vk-ocb__btn:hover{ background:#D97706; color:#111; }

/* Модалка */
.vk-ocb-modal{ position:fixed; inset:0; background:rgba(17,24,39,.55); display:none; z-index:10000; }
.vk-ocb-modal__dialog{
  width:min(480px,92vw); margin:20vh auto 0; background:#fff; border-radius:16px;
  padding:18px; box-shadow:0 24px 48px rgba(2,6,23,.24); position:relative; text-align:center;
}
.vk-ocb-modal__close{ position:absolute; top:8px; right:10px; width:32px; height:32px; border:0; border-radius:8px; background:#F3F4F6; cursor:pointer; font-size:20px; }
.vk-ocb-modal__title{ font-weight:800; font-size:18px; margin-bottom:6px; }
.vk-ocb-modal__text{ color:#065F46; background:#F0FDF4; border-radius:12px; padding:10px; }

.vk-ocb.vk-ocb--primary .vk-ocb__phone {
    height: 35px;
}


/* Валідаційна «тряска» */
@keyframes vkShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.vk-ocb__phone.shake{ animation: vkShake .28s linear 1; }
.vs-variations-highlight{ outline:2px solid #06C167; outline-offset:4px; border-radius:10px; }


/* Базові стилі */
.vk-ocb__form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.vk-ocb__phone {
  flex: 1 1 auto;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #D0D5DD;
  border-radius: 10px;
  font-size: 15px;
  
}

.vk-ocb__btn {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Мобільна версія */
@media (max-width: 600px) {
  .vk-ocb__form {
    width: 100%;
    gap: 8px;
  }
  .vk-ocb__phone {
    width: auto;
    flex: 1 1 auto; /* займає все вільне місце */
    font-size: 15px;
    height: 40px;
  }
  .vk-ocb__btn {
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 14px;
    height: 40px;
  }
  
  .vk-ocb.vk-ocb--alt.vk-ocb--notify .vk-ocb__form, .vk-ocb.vk-ocb--alt.vk-ocb--analog .vk-ocb__form {
    display: flex
;
    flex-wrap: wrap;
    /* width: 100%; */
    justify-content: center;
}
  
  
}





/* === One-Click Buy: hard fix for ≤355px === */
@media (max-width: 355px){
  /* дозволяємо перенос рядка форми */
  .vk-ocb.vk-ocb--primary .vk-ocb__form{
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  

  /* поле телефону — на всю ширину, без верхніх лімітів */
  .vk-ocb.vk-ocb--primary .vk-ocb__phone{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;   /* перекриває 230px */
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* кнопка — теж на всю ширину, без min-width і з переносом тексту */
  .vk-ocb.vk-ocb--primary .vk-ocb__btn{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;      /* перекриває 150px */
    white-space: normal !important; 
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}




/* === БАЗА СЕКЦІЇ === */
#tab-category{
  padding: 12px 0;
}
#tab-category .content-desc-block{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Заголовки та текст */
#tab-category h2,
#tab-category h3{
  margin: 8px 0 10px;
  color: #111827;
}
#tab-category h2{ font-size: 20px; font-weight: 800; }
#tab-category h3{ font-size: 16px; font-weight: 800; }
#tab-category p{ margin: 8px 0; color: #374151; line-height: 1.6; }
#tab-category em{ font-style: italic; }
#tab-category strong,b{ font-weight: 700; }

/* Посилання */
#tab-category a{ color: #166534; text-decoration: underline; }
#tab-category a:hover{ color: #0f5132; }

/* Зображення (включно з WP-класами) */
#tab-category img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
#tab-category img.aligncenter{ margin-left: auto; margin-right: auto; }
#tab-category img.alignleft{ float: left; margin: 4px 12px 8px 0; }
#tab-category img.alignright{ float: right; margin: 4px 0 8px 12px; }
@media (max-width: 640px){
  #tab-category img.alignleft,
  #tab-category img.alignright{ float: none; margin: 8px auto; }
}

/* СПИСКИ */
#tab-category ul,
#tab-category ol{ margin: 8px 0 10px 18px; color: #111827; }
#tab-category ul{ list-style: disc; }
#tab-category ol{ list-style: decimal; }
#tab-category li{ margin: 6px 0; }
#tab-category li > ul,
#tab-category li > ol{ margin-top: 6px; }

/* ТАБЛИЦІ */
#tab-category table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}
#tab-category table th,
#tab-category table td{
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
#tab-category table thead th{
  background: #f3f4f6;
  font-weight: 700;
  color: #111827;
}
#tab-category table tr:nth-child(odd) td{ background: #fafafa; }

/* ВСТУПНІ Плашки/підпис */
#tab-category .note,
#tab-category .hint{
  display: block;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: #ffffffa6;
  color: #374151;
  font-size: 13px;
}

/* === АКОРДЕОН FAQ === */
#tab-category .answers-accordion{ margin-top: 8px; }
#tab-category .answers-accordion__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0px;
}
#tab-category .answers-accordion__item{
  position: relative;
  background:
    linear-gradient(0deg, #ffffff, #ffffff),
    radial-gradient(40rem 12rem at 10% 0%, #dcfce7 18%, transparent 60%),
    radial-gradient(30rem 10rem at 90% 10%, #bbf7d0 18%, transparent 60%);
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 12px 14px 12px 44px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(6,193,103,.08);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#tab-category .answers-accordion__item::before{
  content: '';
  position: absolute;
  left: 14px; top: 14px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #10b981, #59B210);
  box-shadow: 0 4px 10px rgba(16,185,129,.35);
}
#tab-category .answers-accordion__item.is-open{
  border-color: #10b981;
  box-shadow: 0 6px 16px rgba(16,185,129,.16);
}
#tab-category .answers-accordion__item .answers-accordion__inner{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: #ffffffa6;
  font-weight: 400;
  color: #334155;
}
#tab-category .answers-accordion__inner p{ margin: 6px 0; }

/* === КОНТЕНТ-ВАРІАНТИ: ТЕКСТОВІ ЕЛЕМЕНТИ У БЛОКАХ === */
#tab-category .content-desc-block h4{ font-size: 15px; font-weight: 700; margin: 6px 0; }
#tab-category .content-desc-block small{ font-size: 12px; color: #6b7280; }
#tab-category .content-desc-block hr{
  border: 0; height: 1px; background: #e5e7eb; margin: 10px 0;
}

/* Блоки попереджень/успіхів (якщо будуть) */
#tab-category .alert{
  padding: 10px 12px; border-radius: 10px; margin: 8px 0; font-size: 14px;
}
#tab-category .alert--success{ background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
#tab-category .alert--info{ background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
#tab-category .alert--warn{ background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* === АДАПТИВНІ ПІДГОТОВКИ === */
@media (max-width: 768px){
  #tab-category .content-desc-block{ padding: 10px; border-radius: 10px; }
  #tab-category h2{ font-size: 18px; }
  #tab-category h3{ font-size: 15px; }
  #tab-category table th, #tab-category table td{ padding: 7px 8px; }
  #tab-category .answers-accordion__item{ padding: 12px 12px 12px 42px; }
  #tab-category .answers-accordion__item::before{ left: 12px; top: 12px; }
  
  
 header.vk-head .vk-title{
	 
	 padding:10px;
 }
 
 .vk-subrow{
	 
	 gap:5px;
	 padding:0px 10px;
	
 }
 
 .vk-info-col{
	 
	 padding: 0px 10px 10px 10px;
 }
 
 
 
  
  
}