/**
 * CSS Styles - Auto-migrated
 * Generated: 2026-02-06 05:25:12
 * Updated: 2026-03-23 — container queries for adaptive cards
 *
 * ⚠ ORPHAN FILE — NOT ENQUEUED in inc/enqueue.php (станом на 2026-05-03).
 * Catalog-card responsive rules фактично живуть у responsive.css
 * (рядки ~1075-1170 для ≤62em, ~1798-1830 для ≤48em, ~2120+ для ≤30em).
 *
 * Якщо повернути в enqueue — спочатку пройтись по rules ≤1366em /
 * ≤1199em / ≤992em (підозрілі: row-gap: 168px, padding-top: 40px),
 * багато з них дублюють/конфліктують з responsive.css.
 *
 * TODO: або повністю інтегрувати з cleanup, або видалити файл.
 */

/* ========== Container Queries (progressive enhancement) ========== */
@supports (container-type: inline-size) {
  .catalogBox,
  .catalogBoxPage {
    container-type: inline-size;
    container-name: catalog;
  }

  /* Cards adapt to container width, not viewport */
  @container catalog (max-width: 600px) {
    .catalogItem {
      width: calc(50% - 5px);
      min-width: 140px;
    }
    .catalogImage {
      height: 140px;
      min-height: 120px;
    }
    .catalogName {
      font-size: 0.75rem;
      -webkit-line-clamp: 2;
    }
  }

  @container catalog (max-width: 400px) {
    .catalogItem {
      width: 100%;
    }
  }

  @container catalog (min-width: 900px) {
    .catalogItem {
      width: calc(33.333% - 16px);
    }
  }
}

/* ========== max-width: 1366px ========== */
@media screen and (max-width: 85.375em) {
  .catalogBox {
    row-gap: 168px;
  }

  .woocommerce-shop .site-main.catalogBox {
    row-gap: 64px;
  }

  .catalogItem {
    width: calc(50% - 12px);
    min-width: 144px;
  }

}

/* ========== max-width: 1199px ========== */
@media screen and (max-width: 74.9375em) {
  .catalogBox {
    justify-content: center;
  }

  .related.products .catalogBoxPage .catalogItemPage {
    width: calc(50% - 30px);
  }

}

/* ========== max-width: 992px ========== */
@media screen and (max-width: 62em) {
  .catalogItem {
    width: calc(50% - 12px);
  }

  .catalogItem:last-of-type {
    margin-bottom: 0;
  }

  .catalogItem {
    min-height: 285px;
  }

  .promoSlider .catalogItem,
  .recommendSlider .catalogItem {
    min-height: 320px;
  }

  .catalogName {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 150%;
    -webkit-line-clamp: 3;
    min-height: calc(14px * 1.5 * 2);
  }

  .catalogImage {
    height: 180px;
    min-height: 160px;
    max-height: 180px;
  }

  .catalogImage img {
    max-height: 160px;
  }

  .single-product .catalogPrice {
    align-items: flex-start;
  }

  .catalogCart a.button {
    min-width: 44px;
    min-height: 44px;
    width: 48px;
    height: 48px;
  }

  .catalogMarks {
    gap: 8px;
    margin-bottom: 8px;
  }

  .catalogBox .catalogQuality,
  .catalogBoxPage .catalogQuality {
    top: auto;
    left: auto;
    position: relative;
    transform: none;
    margin-bottom: 12px;
    align-self: center;
  }

  .catalogMarks img {
    width: 25px;
    height: 25px;
  }

  .related.products .catalogBoxPage .catalogItemPage {
    width: calc(50% - 15px);
  }

  .catalogItem {
    padding: 16px;
    padding-top: 40px;
    padding-bottom: 16px;
    margin-top: 64px;
  }

  .catalogQuality {
    top: -16px;
  }

  .promoSlider .catalogItem,
    .recommendSlider .catalogItem {
    padding: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 48px;
  }

}

/* ========== max-width: 768px ========== */
@media screen and (max-width: 48em) {
  .catalogItem {
    min-width: 200px;
  }

  .catalogBox .catalogBoxPage {
    margin-top: 100px;
  }

  .catalogItem {
    width: calc(50% - 8px);
    flex: 0 0 auto;
    height: auto;
  }

  .catalogItem {
    padding: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 64px;
  }

  .catalogQuality {
    top: -8px;
  }

  .promoSlider .catalogItem,
    .recommendSlider .catalogItem {
    font-size: 0.875rem;
  }

}