:root{
  /* Цвета с ландшафтным акцентом */
  --c-bg:#072015;
  --c-bg-2:#0a2a1b;
  --c-panel:#0d2f20;
  --c-panel-2:#0f3725;
  --c-txt:#e6f2ec;
  --c-muted:#b7c8c1;
  --c-primary:#22d3a1;       /* мятно‑зелёный CTA */
  --c-primary-2:#5be7b0;
  --c-accent:#a7f3d0;
  --c-gold:#ffd166;
  --c-border:rgba(255,255,255,0.10);
  --rad:1.2rem;
  --shadow:0 0.2rem 1.2rem rgba(0,0,0,0.35);
  --gap:1.2rem;
  --container:88rem;
  --sidebar:23rem;
  --speed:200ms;

  /* Шрифты (без засечек) */
  --font-ui:"Montserrat",sans-serif;
  --font-accent:var(--font-ui);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  color:var(--c-txt);
  line-height:1.5;
  /* Ландшафтный фон: изображение + градиент + лёгкий шум */
  background:
    radial-gradient(120% 120% at 70% 0%, rgba(34,211,161,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(7,32,21,0.9), rgba(7,32,21,0.9)),
    url("/images/jpg/bg-garden.jpg") center / cover fixed no-repeat;
  position:relative;
}
body::after{
  /* едва заметный шум */
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:url("/images/png/noise.png");
  opacity:.07; mix-blend-mode:soft-light;
}

.btn-ripple{ text-transform:none }

/* Контейнер */
.container{ width:min(100% - 2rem, var(--container)); margin:0 auto }

/* Breadcrumbs */
.breadcrumbs{ margin:1.2rem auto 0; font-size:.9rem; color:var(--c-muted) }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:0 }
.breadcrumbs a{ color:var(--c-primary-2); text-decoration:none }
.breadcrumbs li[aria-current="page"]{ color:var(--c-txt) }

/* HERO */
.catalog-hero{
  display:grid; grid-template-columns:2fr 1fr; gap:2rem; align-items:center;
  margin:2rem auto 1.6rem;
}
.catalog-hero__text{
  padding:1.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:.05rem solid var(--c-border); border-radius:var(--rad);
  box-shadow:var(--shadow); backdrop-filter:blur(.4rem)
}
.catalog-title{ font-family:var(--font-accent); font-size:2.2rem; margin:0 0 .8rem; letter-spacing:.02em }
.catalog-sub{ margin:0 0 1.2rem; color:var(--c-muted) }

.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:.8rem }

.catalog-search{
  display:grid; grid-template-columns:1fr auto; gap:.8rem; margin-bottom:.8rem
}
.catalog-search input{
  width:100%; padding:.8rem 1rem; border-radius:.8rem;
  background:var(--c-panel); border:.05rem solid var(--c-border); color:var(--c-txt); outline:none
}

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.7rem 1.1rem; border-radius:.9rem; border:.05rem solid transparent;
  cursor:pointer; transition:transform var(--speed), opacity var(--speed), box-shadow var(--speed)
}
.btn:active{ transform:scale(.98) }
.btn--primary{
  background:linear-gradient(90deg, var(--c-primary), var(--c-primary-2));
  color:#062016; box-shadow:0 .4rem 1rem rgba(34,211,161,.25)
}
.btn--primary:hover{ box-shadow:0 .6rem 1.4rem rgba(34,211,161,.35) }
.btn--ghost{ background:transparent; color:var(--c-txt); border-color:var(--c-border) }

.quick-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem }
.tag{
  padding:.4rem .7rem; border-radius:10rem; border:.05rem solid var(--c-border);
  background:var(--c-panel); color:var(--c-txt); cursor:pointer; font-size:.9rem
}
.tag:focus-visible{ outline:.15rem solid var(--c-primary); outline-offset:.15rem }

/* Hero media с параллаксом */
.catalog-hero__media{ border-radius:var(--rad); overflow:hidden; border:.05rem solid var(--c-border); box-shadow:var(--shadow) }
.catalog-hero__media img{ display:block; width:100%; height:auto; transform:translateZ(0) }

/* Плашка категорий */
.category-bar{ display:flex; gap:.6rem; flex-wrap:wrap; margin:0 auto 1.2rem }
.cat-pill{
  padding:.5rem .9rem; border-radius:10rem; background:rgba(34,211,161,.12);
  border:.05rem solid rgba(34,211,161,.35); color:var(--c-txt); cursor:pointer
}
.cat-pill:hover{ background:rgba(34,211,161,.18) }

/* GRID */
.catalog-wrap{
  display:grid;
  grid-template-columns:var(--sidebar) 1fr;
  gap:3rem;                         /* финальный зазор между колонками */
  margin:1.2rem auto 3rem;
}
.catalog-content{
  padding:1.2rem;
  background:var(--c-panel);
  border:0.05rem solid var(--c-border);
  border-radius:var(--rad);
}

/* SIDEBAR */
.filters{
  position:sticky; top:1.2rem; align-self:start;
  background:var(--c-panel-2);
  border:0.05rem solid var(--c-border);
  border-radius:var(--rad);
  padding:0.5rem;
  box-shadow:var(--shadow);

  /* клип содержимого под скругления */
  overflow:hidden;                   /* fallback */
  overflow:clip;                     /* modern */
  clip-path:inset(0 round var(--rad));
  isolation:isolate;
}
.filters__toggle{ display:none; width:100%; margin-bottom:.8rem }
.filters__panel{ display:grid; gap:3rem }
.filter-block{
  padding:.8rem; border-radius:.8rem;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  border:.05rem solid var(--c-border)
}
.filter-title{ font-size:1.05rem; margin:0 0 .6rem }
.filter-list{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }
.filter-list label{ display:flex; align-items:center; gap:.6rem; cursor:pointer }
.range{ display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:center }
.range input[type="range"]{ width:100% }
.range-value{ font-variant-numeric:tabular-nums; color:var(--c-muted) }
.range-footnote{ color:var(--c-muted); font-size:.85rem; margin-top:.2rem }

.filter-actions{ display:flex; gap:.8rem }

/* Советы */
.tips{ margin-top:1rem; padding:.8rem; border-radius:.8rem; background:var(--c-panel); border:.05rem solid var(--c-border) }
.tips-title{ margin:0 0 .6rem; font-size:1rem }
.tips-list{ list-style:none; display:grid; gap:.5rem; padding:0; margin:0 0 .6rem }
.tips-list li{ font-size:.95rem; color:var(--c-muted) }

/* DEALS (акции) */
.deals{ display:grid; gap:1rem; margin-bottom:1rem }
.deal-card{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center;
  padding:1rem; border-radius:1rem; border:.05rem solid var(--c-border);
  background:var(--c-panel); box-shadow:var(--shadow)
}
/* ВЕРТИКАЛЬНЫЙ ВАРИАНТ: описание сверху, медиа снизу */
.deal-card--stack{ grid-template-columns:1fr }
.deal-card--stack .deal-media{ margin-top:.8rem }
.deal-video{
  display:block; width:100%; height:auto; border-radius:.8rem;
  aspect-ratio:16/9; object-fit:cover;
}
.deal-text h3{ margin:0 0 .4rem; font-size:1.25rem; font-family:var(--font-accent) }
.deal-text p{ margin:0 0 .6rem; color:var(--c-muted) }
.deal-cta{ display:flex; gap:.6rem; flex-wrap:wrap }
.gradient-green{ background:linear-gradient(180deg, rgba(34,211,161,.12), rgba(34,211,161,.02)) }
.gradient-gold{
  background:
    linear-gradient(180deg, rgba(255,209,102,.16), rgba(255,209,102,.03)),
    var(--c-panel)
}

/* CONTENT HEAD */
.content-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.8rem 0 }
.result-count{ color:var(--c-muted) }
.sort{ display:inline-flex; align-items:center; gap:.6rem }
.sort select{
  padding:.5rem .8rem; border-radius:.7rem; background:var(--c-panel);
  border:.05rem solid var(--c-border); color:var(--c-txt)
}

/* CARDS */
.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem }
.card{
  display:grid; grid-template-rows:auto 1fr auto;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:.05rem solid var(--c-border); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow);
  transition:transform var(--speed), border-color var(--speed), box-shadow var(--speed)
}
.card:hover{ transform:translateY(-.2rem); border-color:rgba(255,255,255,.18); box-shadow:0 .5rem 1.6rem rgba(0,0,0,.45) }
.card__media{ position:relative; aspect-ratio:4/3; background:#0b1220; overflow:hidden }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block }
.card__badge{
  position:absolute; top:.6rem; left:.6rem; padding:.3rem .6rem;
  background:rgba(34,211,161,.18); border:.05rem solid rgba(34,211,161,.45);
  color:var(--c-txt); border-radius:10rem; font-size:.85rem; backdrop-filter:blur(.2rem)
}
.card__body{ padding:.9rem; display:grid; gap:.5rem }
.card__title{ margin:0; font-size:1.1rem; font-family:var(--font-accent) }
.card__desc{ margin:0; color:var(--c-muted); font-size:.95rem }
.specs{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:.2rem 0 0 }
.specs li{ font-size:.85rem; color:var(--c-muted); border:.05rem solid var(--c-border); padding:.3rem .5rem; border-radius:.6rem }

.card__foot{ padding:.9rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; border-top:.05rem solid var(--c-border) }
.price{ font-weight:700; font-size:1.05rem }
.actions{ display:inline-flex; gap:.5rem }
.icon-btn{
  display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.6rem;
  border:.05rem solid var(--c-border); background:var(--c-panel); color:var(--c-txt); cursor:pointer
}
.icon-btn[aria-pressed="true"]{ outline:.15rem solid var(--c-primary) }

/* Compare bar */
.compare{
  position:sticky; bottom:1rem; margin-top:1rem;
  display:grid; grid-template-columns:1fr auto; gap:.8rem;
  background:var(--c-panel-2); border:.05rem solid var(--c-border);
  border-radius:var(--rad); padding:.8rem; box-shadow:var(--shadow)
}
.compare-items{ display:flex; gap:.6rem; flex-wrap:wrap }
.compare-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border:.05rem solid var(--c-border); border-radius:10rem; background:var(--c-panel) }
.compare-actions{ display:inline-flex; gap:.6rem }

/* FAQ */
.faq{ margin:2rem 0 1rem }
.faq h2{ margin:0 0 .8rem; font-family:var(--font-accent) }
.faq-item{
  border:.05rem solid var(--c-border); border-radius:.8rem; padding:.6rem .8rem; background:rgba(255,255,255,.02);
  margin-bottom:.6rem
}
.faq-item > summary{ cursor:pointer; font-weight:600; outline:none }
.faq-item[open]{ background:rgba(255,255,255,.05) }

/* Lead форма */
.lead{
  margin:2rem auto; background:linear-gradient(180deg, rgba(34,211,161,.12), rgba(34,211,161,.02));
  border:.05rem solid var(--c-border); border-radius:1rem; padding:1rem
}
.lead-sub{ color:var(--c-muted); margin:.2rem 0 1rem }
.lead-form{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.8rem }
.lead-form label{ display:grid; gap:.3rem }
.lead-form input, .lead-form textarea{
  background:var(--c-panel); border:.05rem solid var(--c-border); border-radius:.7rem; color:var(--c-txt); padding:.7rem .9rem
}
.lead-form .full{ grid-column:1 / -1 }

/* Modal */
.modal-overlay{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.6); z-index:60; padding:1rem }
.modal-overlay[aria-hidden="false"]{ display:grid }
.modal{ width:min(100%, 52rem); background:var(--c-panel-2); border:.05rem solid var(--c-border); border-radius:var(--rad); box-shadow:var(--shadow); position:relative }
.modal-close{ position:absolute; inset-inline-end:1rem; inset-block-start:.6rem }
.modal-body{ display:grid; grid-template-columns:1.1fr 1fr; gap:1rem; padding:1rem }
.modal-media img{ width:100%; height:auto; border-radius:.8rem }
.modal-info h3{ margin:0 0 .4rem }

/* Sticky CTA */
.sticky-cta{ position:sticky; bottom:0; z-index:50 }
.sticky-cta__in{
  margin:0 auto; width:min(100% - 2rem, var(--container));
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:linear-gradient(90deg, rgba(34,211,161,.2), rgba(34,211,161,.05));
  border:.05rem solid var(--c-border); border-radius:1rem 1rem 0 0; padding:.6rem .8rem; backdrop-filter:blur(.3rem)
}
.sticky-cta__text{ color:var(--c-txt) }

/* Utilities */
.visually-hidden{
  position:absolute !important; width:.05rem; height:.05rem; margin:-.05rem;
  border:0; padding:0; white-space:nowrap; clip-path:inset(50%); clip:rect(0 0 0 0); overflow:hidden
}

/* Responsive */
@media (max-width:64rem){
  .catalog-hero{ grid-template-columns:1fr }
  .catalog-wrap{ grid-template-columns:1fr }
  .filters__toggle{ display:inline-flex }
  .filters{ position:relative; top:auto }
  .cards{ grid-template-columns:repeat(2, 1fr) }
  .modal-body{ grid-template-columns:1fr }
  .deal-card{ grid-template-columns:1fr; text-align:center }
  .deal-card .deal-media{ margin-top:.8rem }
  .lead-form{ grid-template-columns:1fr }
}
@media (max-width:38rem){
  .cards{ grid-template-columns:1fr }
}