/* ===== Pages (Home + Shop) ===== */

/* Home hero */
.home-hero{background:linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 25%, #fff), #fff);}
.home-hero__inner{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; padding:32px 0}
.home-hero h1{margin:0 0 8px}
.home-hero__text{color:var(--color-text-muted); margin:0 0 16px}
.home-hero__cta{display:flex; gap:10px; flex-wrap:wrap}
.home-hero__media{border-radius:16px; overflow:hidden; background:var(--color-muted); min-height:220px}

/* Categories grid */
.home-cats{padding:24px 0}
.home-cats__grid{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px}
.cat-card{display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:12px; text-decoration:none; color:var(--color-text) text-align:center;}
.cat-card:hover{box-shadow:var(--shadow-md);}
.cat-card__thumb{aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#FFF; display:flex; align-items:center; justify-content:center}
.cat-card__thumb img{width:100%; height:100%; object-fit:contain}
.cat-card__title{font-weight:700; font-size:14px}

@media (max-width: 1024px){ .home-cats__grid{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width: 640px){ .home-cats__grid{grid-template-columns:repeat(2, minmax(0,1fr));} .home-hero__inner{grid-template-columns:1fr} }

/* Shop (archive/category) */
.shop-layout{display:grid; grid-template-columns:280px 1fr; gap:24px; padding:24px 0}
@media (max-width: 1024px){ .shop-layout{grid-template-columns:1fr} .shop-sidebar{display:none} .shop-sidebar.is-open{display:block} }
.shop-sidebar{position:sticky; top:90px; align-self:start}
.shop-filters__toggle{display:none}
@media (max-width: 1024px){
  .shop-filters__toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--color-border); border-radius:8px; background:#fff; margin-bottom:12px}
}
.shop-seo{margin-top:16px; color:var(--color-text-muted)}

.sale-banner{margin:24px 0; padding:16px; border-radius:16px; background:linear-gradient(135deg, #FFF7E6, #FFF); border:1px dashed #F59E0B}


/* ===== CGM Banner ===== */
.cgm-banner{border:1px solid var(--color-border); border-radius:16px; background:linear-gradient(120deg, color-mix(in oklab, var(--color-primary) 14%, #fff), #fff); overflow:hidden; box-shadow:var(--shadow-sm);}
.cgm-banner__inner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; align-items:center; padding:24px;}
.cgm-banner__content h2{margin:8px 0 6px; font-size:clamp(22px, 2.4vw, 32px); font-weight:800; color:var(--color-text)}
.cgm-banner__text{color:var(--color-text-muted); margin:0 0 12px}
.cgm-banner__cta{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 8px}
.cgm-banner__bullets{list-style:none; padding:0; margin:0; display:flex; gap:14px; flex-wrap:wrap; color:var(--color-text-muted); font-size:14px}
.cgm-banner__bullets li{display:inline-flex; align-items:center; gap:6px}
.cgm-banner__bullets li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--color-primary)}
.cgm-banner__media{display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(24,181,196,.08), rgba(24,181,196,.02)); border-left:1px solid var(--color-border); padding:12px}
.cgm-banner__img{max-width:100%; height:auto; object-fit:contain; border-radius:12px; background:#fff; padding:6px; border:1px solid var(--color-border)}
.cgm-banner__svg{width:100%; height:auto; display:block}
@media (max-width: 1024px){
  .cgm-banner__inner{grid-template-columns:1fr}
  .cgm-banner__media{border-left:none; border-top:1px solid var(--color-border)}
}


 
/* === Home hero: fix overflow on mobile === */

/* Пусть буллеты в герое переносятся и не срывают ширину */
.home-hero .site-topbar__bullets{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;        /* row/column gap */
  overflow: visible;
  margin: 12px 0 0;
}
.home-hero .site-topbar__bullets li{
  white-space: normal;   /* ВАЖНО: разрешаем перенос строк */
  flex: 0 1 auto;
}

/* Мобильная компоновка героя */
@media (max-width: 768px){
  .home-hero__inner{
    display: block;      /* одну колонку вместо grid-2 */
  }

  /* Если правый столбец пуст (media), просто скрываем его на мобилке */
  .home-hero__media{ display: none; }

  /* Full-bleed фон, но контент в гаттерах */
  .home-hero{
    --gutter: 16px;
    --radius: 12px;
   width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    border-radius: var(--radius);
    overflow: hidden;
  }

  /* Если внутри у секции есть .container — убираем двойной padding */
  .home-hero > .container{ padding-left: 0; padding-right: 0; }
}