/* ===== WC Pack Tabs + Dosage Table (CSS) ===== */

/* Vars & note */
.wc-ptdt{
  --tabs-per-row: 8;
  --tab-gap: 8px;
  margin: 10px 0 12px;
}
.wc-ptdt-note{
  font-size: .85rem;
  color: #6c757d;
  margin: .25rem 0 .5rem;
}

/* ---------- Tabs: fixed width, up to 8 per row ---------- */
.wc-ptdt-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--tab-gap);
  justify-content: flex-start; /* слева-направо, без растягивания */
}
.wc-ptdt-tab{
  width: calc((100% - (var(--tabs-per-row) - 1) * var(--tab-gap)) / var(--tabs-per-row));
  flex: 0 0 auto;             /* фиксированная ширина */
  min-width: 88px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  line-height: 1.1;
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: #f6f8fa;
  color: #111;
  border: 1px solid #d0d7de;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  user-select: none;
}
.wc-ptdt-tab:hover{ background:#eef2f6; }
.wc-ptdt-tab[aria-selected="true"]{
  background: var(--fs-color-primary);
  color: #111;
  border-color: #d0d7de;
  border-bottom-color: #fff;
  position: relative;
  z-index: 2;
  box-shadow: 5px 3px 5px #d0d7de;
}

/* ---------- Panel (full width) ---------- */
.wc-ptdt-panel{
  width: 100%;
  box-sizing: border-box;
  border: 3px solid var(--fs-color-primary);
  border-radius: 10px;
  background: #fff;
  box-shadow: 10px 5px 5px #d0d7de;
}

/* было: у всех th/td background:#fff; */
.wc-ptdt-table th,
.wc-ptdt-table td{
  border-top:1px solid #e6e8eb;
  vertical-align:middle;
  text-align: center;
  color: #111;
  background:transparent;        /* пусть фон берется от <tr> */
}

/* заголовок оставляем с фоном */
.wc-ptdt-table thead th{
  background:#f8f9fa;
  border-top:0;
  white-space:normal;
}

/* было: делали последнюю колонку flex -> ломалась высота */
.wc-ptdt-table th:nth-child(4),
.wc-ptdt-table td:nth-child(4){ 
  text-align:center;              /* выравниваем цену справа */
  white-space:nowrap;
}

/* rounded corners */
.wc-ptdt-table thead tr th:first-child{ border-top-left-radius: 8px; }
.wc-ptdt-table thead tr th:last-child { border-top-right-radius: 8px; }
.wc-ptdt-table tbody tr:last-child td:first-child{ border-bottom-left-radius: 8px; }
.wc-ptdt-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }

/* badge */
.wc-ptdt-badge{
  display: inline-block;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #d9534f;
  color: #fff;
  padding: .15rem .45rem;
  border-radius: .35rem;
  font-size: .78rem;
}

/* ensure full width under common themes' .summary column */
.summary .wc-ptdt,
.summary .wc-ptdt-panel,
.summary .wc-ptdt-table { max-width: none; }
/* align the PRICE header right like the cells */
.wc-ptdt-table thead th:nth-child(4){ text-align:center; }

/* strip any theme backgrounds/shadows/pseudo-elements inside price cells */
.wc-ptdt-table td:nth-child(4),
.wc-ptdt-table td:nth-child(4) *{
  background: transparent !important;
  box-shadow: none !important;
}
.wc-ptdt-table td:nth-child(4)::before,
.wc-ptdt-table td:nth-child(4)::after{
  content: none !important;
}

/* на всякий случай — скрыть hr/progress, если тема их вставляет */
.wc-ptdt-table td:nth-child(4) hr,
.wc-ptdt-table td:nth-child(4) progress{ display:none !important; }
.wc-ptdt-price{ background:transparent !important; }

/* Прячем таблицу вариантов и reset везде, включая QuickView Flatsome */
form.variations_form .variations,
form.variations_form .reset_variations,
.wc-ptdt-hidden-attr {
  display: none !important;
  visibility: hidden !important;
}

/* На всякий случай: контент в модальном окне Flatsome */
.mfp-content form.variations_form .variations,
.mfp-content .reset_variations {
  display: none !important;
  visibility: hidden !important;
}

.wc-ptdt-ghost {
  opacity: 0;          /* делаем цифру невидимой, но сохраняем размер ячейки */
  user-select: none;
  pointer-events: none;
}

.product-summary table tr + tr:nth-child(2n) {
  border-top: 1px dashed #ddd;
  background-color: #f4f4f4;
}

td input[type="radio"] {
  accent-color: var(--fs-color-primary);
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
}