/* Загальні стилі для карток товарів */


/* Базові стилі картки */
	.gb-product-card {
		border: 1px solid #eaeaea;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
		transition: transform 0.2s, box-shadow 0.2s;
		overflow: hidden;
		position: relative;
        margin-top: 15px;
		margin-bottom: 15px;
        margin-left: 55px;
        margin-left: 55px;

        
	}
	.gb-product-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
	} /*легкий підйом*/

	/* «Рухома» декоративна смужка зверху */
	.gb-product-card:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 4px;
		background: linear-gradient(90deg,#009bb5,#f7c052);
		background-size: 300% 100%;
		animation: gradientMove 6s linear infinite;
	}
	@keyframes gradientMove {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 300% 0;
		}
	}

	/* Зображення: квадрат 1:1, міститься повністю */
	.gb-product-card .product-img {
		margin: 10px;
		border-radius: 8px;
		overflow: hidden;
		height: 0;
		padding-bottom: 100%; /* квадрат */
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		background-color: #fff;
		transition: transform 0.3s ease;
	}
	.gb-product-card:hover .product-img {
		transform: scale(1.05);
	} /* зум */

	/* Текст */
	.gb-product-card .product-title {
		display: block;
		font-size: 15px;
		line-height: 1.3;
		margin: 18px 0;
		font-weight: 600;
		min-height: 38px;
	}

	/* Повністю округла кнопка */
	.gb-product-card .btn {
		border-radius: 50px;
		font-weight: 600;
	}

	/* Центруємо та обмежуємо ширину картки на мобільних */
	@media(max-width:767px) {
		.gb-product-card {
			max-width: 320px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 20px;
		}
	}

	@media(min-width:768px) {
		.gb-product-card .product-title {
			font-size: 17px;
			margin: 20px 0;
		}
	} 

    /*--------КАРТКИ ТОВАРІВ В НОВИНАХ--------*/

/* ===== Шапка під стиль сайту ===== */
.mtbl-head { background:#00a5a0; color:#fff; }
.mtbl-head th { color:#fff !important; }

/* ===== Обгортка ===== */
/* На ПК: ширина по контенту (але не більше контейнера). На мобілці: 100% */
.marathon-table-wrap{
  display:inline-block;
  width:auto;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #e5e5e5;
  border-radius:10px;
  background:#fff;
  position:relative;

  /* керування плавним fade праворуч */
  --fadeW: 0px; /* ширина прозорого краю (JS буде змінювати 0px…14px) */
}

/* На мобільних — wrap тягнеться на всю ширину */
@media (max-width: 991px){
  .marathon-table-wrap{ display:block; width:100%; }
}

/* Плавний “натяк на скрол” ПРАВОРУЧ (лише коли реально треба) */
@media (max-width: 991px){
  /* за замовчуванням маски нема */
  .marathon-table-wrap { -webkit-mask-image:none; mask-image:none; }

  /* коли контент ширший — показуємо маску, її ширина = var(--fadeW) */
  .marathon-table-wrap.scrollable{
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - var(--fadeW, 14px)),
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - var(--fadeW, 14px)),
      transparent 100%
    );
    /* невеличка плавність у візуальному оновленні (допоміжна) */
    transition: -webkit-mask-image 80ms linear, mask-image 80ms linear;
  }
}

/* ===== Таблиця ===== */
.marathon-table{
  width:100%;
  margin:0;
  table-layout:auto;
  border-collapse:separate;
  border-spacing:0;
}
.marathon-table>thead>tr>th,
.marathon-table>tbody>tr>td{
  vertical-align:middle;
  padding:12px 12px;
  border-right:1px solid #e9e9e9;
}
.marathon-table>thead>tr>th:last-child,
.marathon-table>tbody>tr>td:last-child{ border-right:none; }

/* Декор */
.marathon-table>thead>tr>th{
  font-weight:600;
  border-bottom:1px solid #009189;
}
.marathon-table>tbody>tr:nth-child(even){ background:#f9fafa; }
.marathon-table>tbody>tr:hover{ background:#e8f7f6; }

/* Утиліти */
.m-nowrap{ white-space:nowrap !important; }
.m-yes{ color:#0a8f3c; font-weight:700; }
.m-no { color:#d62828; font-weight:700; }

/* Bootstrap 3 fix */
.table-responsive{ margin-bottom:15px; }

/* Заголовки: коректні переноси + мінімальна ширина */
.marathon-table > thead > tr > th{
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto;
  line-height:1.25;
  min-width:100px;
}

/* Тіло: м’якші переноси */
.marathon-table > tbody > tr > td{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ===== Мобільний поліш: липка шапка + перший стовпець ===== */
@media (max-width: 991px){
  .marathon-table>thead>tr>th,
  .marathon-table>tbody>tr>td{ padding:10px 10px; font-size:13px; line-height:1.35; }

  .marathon-table > thead > tr > th{
    position:sticky; top:0; z-index:3;
    background:#00a5a0; color:#fff;
  }
  .marathon-table > thead > tr > th:first-child,
  .marathon-table > tbody > tr > td:first-child{
    position:sticky; left:0; z-index:2;
    background:#fff;
    border-right:1px solid #e9e9e9;
  }
  .marathon-table > thead > tr > th:first-child{
    background:#00a5a0; color:#fff; z-index:4;
  }
  .marathon-table > tbody > tr > td:first-child{
    box-shadow:2px 0 0 rgba(0,0,0,0.04);
  }

  /* перекриваємо bootstrap nowrap в .table-responsive */
  .marathon-table-wrap.table-responsive > .marathon-table > thead > tr > th,
  .marathon-table-wrap.table-responsive > .marathon-table > tbody > tr > td{
    white-space: normal !important;
  }
}

@media (max-width: 480px){
  .marathon-table>thead>tr>th,
  .marathon-table>tbody>tr>td{ padding:9px 8px; font-size:12.5px; }
  .marathon-table > thead > tr > th{ min-width:90px; }
}

/* Якщо на th задано width або min-width — підхоплюємо (опційно) */
.marathon-table th[style*="width"],
.marathon-table th[style*="min-width"] { white-space: normal; }
.marathon-table th[style*="width"] ~ td,
.marathon-table th[style*="min-width"] ~ td { white-space: normal; }


    /*--------END-------*/


     /* 1. Головний контейнер */
.upgrade-card {
  display: flex; /* Магія Flexbox */
  flex-direction: row;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  overflow: hidden; /* Закруглює кути для фону */
  position: relative; /* Щоб стрілка знала, від чого центруватися */
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  max-width: 100%;
  margin: 30px 0;
  font-family: sans-serif; /* Або ваш шрифт сайту */
}

/* 2. Половинки картки */
.card-side {
  flex: 1; /* Обидві частини займають порівну місця */
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Центруємо все по горизонталі */
  justify-content: center; /* Центруємо по вертикалі */
  text-align: center;
}

/* Стилі лівої частини (Старе) */
.old-model {
  background-color: #f8f9fa;
  border-right: 1px dashed #ddd; /* Розділювач */
  color: #777;
}

/* Стилі правої частини (Нове) */
.new-model {
  background-color: #fff;
  z-index: 1; /* Щоб бути вище стрілки, якщо треба */
}

/* 3. Стрілка по центру */
.arrow-connector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Ідеальний центр */
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #009eb3; /* Ваш бірюзовий */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #009eb3;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 4. Типографіка та Деталі */
.card-title {
  margin: 10px 0;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}
.card-title.muted { color: #999; }

.card-desc {
  font-size: 14px;
  color: #888;
  max-width: 250px;
  line-height: 1.5;
}

/* Бейджі */
.badge-status, .badge-new {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.badge-status { background: #888; color: #fff; }
.badge-new { color: #009eb3; background: rgba(0, 158, 179, 0.1); }

/* Список переваг */
.features-list {
  list-style: none;
  padding: 0;
  margin: 15px 0 25px 0;
  text-align: left;
}
.features-list li {
  margin-bottom: 8px;
  color: #444;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.check-icon {
  width: 16px;
  height: 16px;
  color: #009eb3;
  margin-right: 8px;
}

/* Кнопка */
.btn-action {
  background-color: #009eb3;
  color: white;
  text-decoration: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 158, 179, 0.25);
  display: inline-block;
}

.btn-action:hover {
  background-color: #008ca0;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 158, 179, 0.35);
}

/* 5. Мобільна адаптація (Дуже важливо!) */
/* 5. Мобільна адаптація (ВИПРАВЛЕНО) */
@media (max-width: 768px) {
  .upgrade-card {
    flex-direction: column; /* Блоки один під одним */
  }
  
  .old-model {
    border-right: none;
    border-bottom: 1px dashed #ddd;
    /* Відступ знизу, щоб текст не наїжджав на стрілку */
    padding-bottom: 20px; 
  }
  
  .new-model {
    /* Відступ зверху, щоб текст не наїжджав на стрілку */
    padding-top: 20px; 
  }
  
  .arrow-connector {
    /* СКИДАЄМО абсолютне позиціонування */
    position: relative; 
    top: auto;
    left: auto;
    
    /* Центруємо стрілку по горизонталі */
    margin: 0 auto; 
    
    /* ГОЛОВНИЙ ФІКС: 
       Піднімаємо стрілку вгору на 25px (половина її висоти),
       щоб вона сіла рівно на лінію розрізу */
    margin-top: -25px; 
    margin-bottom: -25px; /* Підтягуємо нижній блок вгору */
    
    /* Просто повертаємо стрілку вниз (без translate, бо ми вже не в абсолюті) */
    transform: rotate(90deg);
  }
}