/* put here your custom css styles */

/* Global utility gallery rows (add to your theme stylesheet or “Additional CSS”) */
/* Universal gallery rows — works for:
   1) <div class="image-row cols-N"><img>…</div>
   2) <div class="image-row cols-N"><div><img><p>caption</p></div>…</div>
*/
.image-row{
  --gap:5px;                /* единая переменная отступов (поддержи темой, если нужно 3px — просто поменяй здесь) */
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
  margin:14px 0;
}

/* Дочерние элементы (и <img>, и <div>‑обёртки) */
.image-row > *{
  box-sizing:border-box;
}

/* Вариант 1: когда <img> идут напрямую внутри .image-row */
.image-row > img{
  width:100%;
  height:auto;
  display:block;
}

/* Вариант 2: когда есть обёртка с подписью */
.image-row > div{
  display:flex;
  flex-direction:column;
  align-items:center; /* подпись по центру */
}
.image-row > div > img{
  width:100%;
  height:auto;
  display:block;
}
.image-row > div > p{
  margin:6px 0 0;
  line-height:1.35;
  font-size:0.95em;
}

/* Колонки: применяем к ЛЮБОМУ прямому ребёнку (.image-row > *) */
.image-row.cols-1 > *{
  flex:1 1 100%;
  max-width:100%;
}
.image-row.cols-2 > *{
  flex:1 1 calc(49% - var(--gap));
  max-width:calc(50% - var(--gap));
}
.image-row.cols-3 > *{
  flex:1 1 calc(32% - var(--gap));
  max-width:calc(33% - var(--gap));
}
.image-row.cols-4 > *{
  flex:1 1 calc(24% - var(--gap));
  max-width:calc(25% - var(--gap));
}

/* Мобильная стопка */
@media (max-width:768px){
  .image-row.cols-2 > *,
  .image-row.cols-3 > *,
  .image-row.cols-4 > *{
    flex:1 1 100%;
    max-width:100%;
  }
}


/* ===== Product tables (scoped) =====
   Add a wrapper around your product content:
   <div class="prod-desc"> ...tables here... </div>
*/

.prod-desc table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;            /* keeps columns aligned and prevents wobble */
  border: 1px solid #d9d9d9;      /* visible outer border */
  margin: 16px 0;
}

.prod-desc thead th {
  background: #f0f0f0;            /* header background */
  font-weight: 600;
  text-align: left;
}

.prod-desc th,
.prod-desc td {
  padding: 10px 12px;
  border: 1px solid #d9d9d9;      /* cell borders */
  vertical-align: top;
  word-break: break-word;         /* avoids overflow on long words */
}

/* Zebra striping: one white, one light gray */
.prod-desc tbody tr:nth-child(odd)  { background: #ffffff; }
.prod-desc tbody tr:nth-child(even) { background: #f7f7f7; }

/* Optional caption styling (if you use <caption>) */
.prod-desc table caption {
  caption-side: bottom;
  color: #666;
  font-size: 0.9rem;
  padding-top: 8px;
}

/* Responsive: allow horizontal scroll on small screens without breaking layout */
@media (max-width: 768px) {
  .prod-desc table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;          /* keep columns tidy while scrolling */
  }
  .prod-desc th,
  .prod-desc td {
    white-space: nowrap;
  }
}

/* ===== (Optional) Global fallback =====
   If you can't add the .prod-desc wrapper, uncomment the block below
   to style all tables site-wide in the same way. Use with care. */

/*
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #d9d9d9;
  margin: 16px 0;
}
thead th {
  background: #f0f0f0;
  font-weight: 600;
  text-align: left;
}
th, td {
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  vertical-align: top;
  word-break: break-word;
}
tbody tr:nth-child(odd)  { background: #ffffff; }
tbody tr:nth-child(even) { background: #f7f7f7; }

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  th, td { white-space: nowrap; }
}
*/

table td:first-child, table th:first-child {
  text-align: center;
}