/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* Мобільна версія — товари в 2 колонки */
@media (max-width: 768px) {
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-5,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}
/* ============================================================
   VIP Comfort: глобальний фікс ширини контейнера Blocksy
   Дефолт Blocksy: --theme-container-edge-spacing: 90vw
   (5% порожнього простору з кожного боку на широкому екрані).
   Встановлюємо майже 100% з мінімальними відступами 20px.
   ============================================================ */
:root {  /* DISABLED: breaks homepage — kept for reference
  --theme-container-edge-spacing: calc(100vw - 40px); */
}

/* ============================================================
   VIP Comfort: Header і nav — прибираємо зайві бічні відступи.
   Blocksy-контейнери у шапці тримають padding що дає "порожні поля".
   Встановлюємо 100% ширину + 20px відступ від краю.
   ============================================================ */
.site-header,
.site-header .ct-container,
.ct-header-row,
.ct-header-row .ct-container,
.nav .ct-container,
.site-navigation .ct-container,
.ct-header .ct-container {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ════════════════════════════════════════════════════════════════
   Full-width layout — всі контейнери на 100% з полями 20px
   ════════════════════════════════════════════════════════════════ */
:root {
  --theme-normal-container-max-width: 100%;
  --theme-content-vertical-spacing: 0px;
}

.ct-container,
[class*="ct-container"] {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.site-header .ct-container,
.header-main-area .ct-container,
.ct-header .ct-container {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}