:root{
  --text:#0f172a;
  --muted:#64748b;
  --brand:#e52037;
  --brand-2:#c2172d;
  --card:#ffffff;
  --border:rgba(15,23,42,.08);
  --bg:#f6f8fb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Header */
.header{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.logo{display:inline-flex;align-items:center;gap:.5rem;color:#111827;text-decoration:none}
.logo-dot{
  width:12px;height:12px;border-radius:50%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 0 0 3px rgba(229,32,55,.15);
}
.logo-text{font-weight:800;letter-spacing:.5px}
.nav-link{color:#111827;font-weight:500}

/* Hero */
.catalog-hero{
  position:relative;
  padding:56px 0 48px;
  text-align:center;
  overflow:hidden;
  background:#ffffff;
  border-bottom:1px solid var(--border);
}
.catalog-hero .display-6{letter-spacing:.2px}
.catalog-hero .lead{max-width:900px;margin:10px auto 0}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(229,32,55,.08), transparent 60%),
    radial-gradient(800px 300px at 20% 120%, rgba(194,23,45,.05), transparent 60%);
}

/* Breadcrumbs visual */
.breadcrumbs{
  background:#fff;border-bottom:1px solid var(--border);
}
.breadcrumbs .crumb{
  color:#334155;text-decoration:none
}
.breadcrumbs .crumb.active{color:#0b1220;font-weight:600;cursor:default}
.breadcrumbs .sep{color:#94a3b8;margin:0 .5rem}

/* Sidebar */
.cat-sidebar .card-header{background:#fff}
.cat-accordion{
  font-weight:600;color:#0b1220;border:1px solid var(--border);
  background:#fff;border-radius:.5rem;padding:.6rem .8rem
}
.cat-sub{list-style:none;margin:.6rem 0 0;padding:0 0 .2rem}
.cat-sub li{margin:.2rem 0}
.cat-link{display:inline-block;padding:.3rem .1rem;color:#0b1220;text-decoration:none}
.cat-link:hover{text-decoration:underline}

/* Мини-сетка квадратов в сайдбаре */
.side-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:.6rem
}
.side-tile{
  position:relative;border-radius:.6rem;overflow:hidden;border:1px solid var(--border);
  background:#fff;transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;color:#0b1220;
}
.side-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.side-tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.side-tile span{
  position:absolute;left:.5rem;bottom:.5rem;background:rgba(255,255,255,.9);
  padding:.2rem .4rem;border-radius:.35rem;font-size:.8rem;font-weight:600
}

/* Cards grid */
.card-zoom{transition:transform .2s ease, box-shadow .2s ease}
.card-zoom:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.card-img-top{aspect-ratio:1/1;object-fit:cover}
.card-title{margin-bottom:.25rem}
.card .text-muted{min-height:2.5em}

/* SEO block */
.seo-block{
  background:#fff;border:1px solid var(--border);border-radius:.8rem;padding:1.2rem
}
.seo-block h2{font-size:1.125rem;margin-bottom:.5rem}
.seo-block p{color:#334155}

/* Footer spacing fix */
.site-footer{margin-top:24px}

/* Современный способ: делаем 1:1 и обрезаем по коробке */
.square-img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Фолбек для браузеров без aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .square-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .card .card-img-top.square-img{ /* контейнер для абсолютного позиционирования */
    position:absolute;
  }
  /* Оборачиваем картинку в квадратную рамку, если нужно фолбеком:
     <div class="square-1x1"><img class="card-img-top square-img" ...></div> */
  .square-1x1{
    position:relative;
    width:100%;
  }
  .square-1x1::before{
    content:"";
    display:block;
    padding-top:100%; /* сохраняем 1:1 */
  }
  .square-1x1 > img{
    object-fit:cover;
    object-position:center;
  }
}
.btn-primary{
      display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    background-color: #e77b23;
    color: #fff;
    text-decoration: none !important;
    border: transparent;
}

.text-primary {
    --bs-text-opacity: 1;
    color: #f88e1f !important;
    font-weight: 800 !important;
}