:root {
      --bg: #ffffff;
      --text: #222222;
      --muted: #6c6c6c;
      --olive: #7e8033; /* оливковая подложка */
      --hero: #dcdcdc; /* серые плейсхолдеры */
      --card: #efefef;
      --radius: 14px;
      --container: 1120px;
    }
    /* Кнопки */
    .btn { 
      display: inline-flex; align-items: center; justify-content: center;
      padding: 8px 40px; border-radius: 6px; border: 0; cursor: pointer;
      font-weight: 400; letter-spacing: .02em; text-decoration: none;
      transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease; 
      user-select: none; white-space: nowrap; 

      transform: scale(1.5);
    }
    .btn:active { transform: translateY(1px) scale(1.5); }
    .btn--light { background: #f4f4f4; color: #1e1e1e; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.06); }
    .btn--light:hover { background: #e9e9e9; }
    .btn--olive { background: var(--olive); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 20px rgba(124,128,66,.35); transform: scale(1.5); }
    .btn--olive:hover { filter: brightness(.95); }
    .main__banner--slider .btn.btn--transparent {
            padding: 8px 40px;
                  background: white;
    }
    .main__banner--main_page {
        height: 470px;
    }

    /* 1. Hero */
    .hero { background: var(--hero); min-height: clamp(260px, 48vw, 560px); display: grid; align-items: end; justify-content: center; position: relative; }
    .hero__cta { position: relative; top: -50px; }

    /* 2. Intro text on olive band */
    .intro { background: var(--olive); color: #fff; padding: clamp(24px, 4vw, 40px) 0; }
    .intro__text { font-size: clamp(14px, 1.45vw, 18px);     opacity: .95;
                padding: 0 10vw;
    text-align: left;
    line-height: 1.33;
    font-size: 23px; }

    /* 3. Story (image + text) */
    .story { padding: clamp(28px, 6vw, 64px) 0; }
    .story__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .story__media { background: var(--hero); border-radius: var(--radius); aspect-ratio: 3/4; width: 100%; }
    .story__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
    .story__thumb { background: var(--card); border-radius: 10px; aspect-ratio: 1/1; }
    .story__title { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; margin: 0 0 16px; }
    .story__lead { color: var(--muted);     max-width: 60ch;
    font-size: 20px;
    padding-right: 110px;
    line-height: 1.5;}
    .story__cta {   
    text-align: center;
    margin-top: 60px;
    padding-right: 110px; }

    @media(max-width: 640px) {
        .story__cta {margin-bottom: 60px; }
        .btn { transform: scale(1.2); }
        .btn:active { transform: translateY(1px) scale(0.95); }
        .hero__cta {        top: -20px;}
        .intro__text {font-size: 18px; padding: 0 4vw;}
        .story__lead, .story__cta {padding-right: 0; }
        .intro {    margin-top: -5px;}
        body .cats__img_wrap {
    width: 178px;
}
        .main__banner--slider .btn.btn--transparent {display: block; background: var(--bg);     color: black;}
        .main__banner--main_page {
            height: auto;
        }
    }

    @media (min-width: 900px) {
      .story__grid { grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.2fr); gap: clamp(28px, 5vw, 64px); }
    }

    /* 4. Products */
    .products { padding: 12px 0 clamp(48px, 8vw, 80px); }
    .products__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .product-card { text-align: center; }
    .product-card__media { background: var(--hero); border-radius: var(--radius); aspect-ratio: 5/4; margin-bottom: 12px; }
    .product-card__title { font-weight: 600; margin: 0; }
    .product-card__price { margin: 2px 0 0; color: #111; letter-spacing: .01em; }

    @media (min-width: 640px) {
      .products__grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 1024px) {
      .products__grid { grid-template-columns: repeat(4, 1fr); }
    }

    /* BEM utility classes for placeholders (optional image hooks) */
    .ph { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, #e8e8e8, #d8d8d8); border-radius: inherit;     background-size: cover !important; }
    .container--mobile { padding-left: 0!important;}


/* gallery: CSS-only scroll-snap + thumbs */
.gallery{--thumb:var(--thumb-size)}
.gallery__viewport{
  display:flex;overflow:auto;scroll-snap-type:x mandatory;gap:12px;
  border-radius:var(--radius);
  aspect-ratio: 3 / 4;
}
.gallery__slide{min-width:100%;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden}
.gallery__slide img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.gallery__thumbs{display:flex;gap:8px;margin-top:10px}
.gallery__thumb{padding:0;border:0;background:transparent;border-radius:4px;overflow:hidden;cursor:pointer}
.gallery__thumb img{width:var(--thumb);height:var(--thumb);object-fit:cover;display:block}