:root{

--header-height: 72px;
--gap: 12px;
--radius: 16px;
--accent: #0c7a43; 
--surface:  #fff;
--border: rgba(0,0,0,.08);
}
.page-shell *:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.container { max-width:1200px; margin:0 auto; padding:0 16px; }
.section { padding: clamp(20px,4vw,40px) 0; }
.breadcrumbs { padding:10px 0 0; opacity:.85; }
.hero-compact .title{ font-size:clamp(22px,3.4vw,32px); margin:0 0 6px; }
.hero-compact .sub{ margin:0; opacity:.85; }

/* Чипы активных фильтров */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px; }
.chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); padding:6px 10px; border-radius:999px; font-size:.9rem; }
.chip button{ border:0; background:transparent; cursor:pointer; padding:0; line-height:1; }

/* Панель фильтров — sticky */
.toolbar{
position: sticky;
top: calc(var(--header-height) + 8px);
z-index: 20;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(2, minmax(0,1fr));
align-items: end;
padding: 10px 0 0;
background: transparent;
}
@media (min-width: 900px){
.toolbar{
grid-template-columns: repeat(7, minmax(0,1fr)) 1fr;
}
}
.ctrl{ display:grid; gap:6px; font-size:.95rem; }
.ctrl select, .ctrl input{
height: 40px;
padding: 8px 10px;
border-radius: 12px;
border:1px solid var(--border);
background: var(--surface);
}
.toolbar__sort{ justify-self:end; min-width: 220px; }
.toolbar__reset{ grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px){
.toolbar__reset{ grid-column: auto; justify-self: start; }
}


/* Логотипы брендов над фильтром */
.brand-strip{
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: color-mix(in srgb, var(--surface) 88%, #fff 12%);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
[data-theme="dark"] .brand-strip{
  background: color-mix(in srgb, var(--surface) 70%, #0c1115 30%);
  border-color: color-mix(in srgb, #fff 14%, transparent);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.brand-strip__grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  align-items:center;
  justify-items:center;
}
@media (min-width: 1024px){
  .brand-strip__grid{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
.brand-strip__item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  height:64px;
  width:100%;
  border-radius:12px;
  background: color-mix(in srgb, var(--surface) 90%, #fff 10%);
  border:1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .12s ease, box-shadow .12s ease;
}
[data-theme="dark"] .brand-strip__item{
  background: color-mix(in srgb, var(--surface) 80%, #121820 20%);
  border-color: color-mix(in srgb, #fff 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-strip__item:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
[data-theme="dark"] .brand-strip__item:hover{
  box-shadow:0 10px 20px rgba(0,0,0,.55);
}
.brand-strip__item img{
  max-width:120px;
  max-height:36px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
[data-theme="dark"] .brand-strip__item img{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
/* РЎРїРёСЃРѕРє */
.summary{ margin-top: 10px; opacity:.8; }
.cards{
display:grid;
gap:16px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
margin-top: 14px;
}
.card{
background: var(--surface);
border:1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
display:flex;
flex-direction:column;
}
.card .photo{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:12px;
background:#e9ecef;
}
.card .photo img{
display:block;
max-width:100%;
height:auto;
object-fit:contain;
}
.card .body{ padding:14px 14px 10px; display:grid; gap:8px; }
.card .title{ margin:0; font-size:1.05rem; }
.meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:.9rem; opacity:.85; }
.badge{ background: color-mix(in srgb, var(--accent) 12%, #fff);
border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
padding:2px 8px; border-radius:999px; font-size:.82rem; }
.specs{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; font-size:.92rem; opacity:.9; }
.price{
font-weight:700;
font-size:1.05rem;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}
.price-now{font-weight:700;}
.price-credit{
margin-top:4px;
font-size:.92rem;
color:rgba(0,0,0,.65);
}
.badge-rrc{
display:inline-flex;
align-items:center;
gap:4px;
font-size:.85rem;
padding:2px 6px;
border-radius:999px;
background:rgba(12,122,67,.08);
border:1px solid rgba(12,122,67,.18);
color:#0c7a43;
}
.badge-rrc s{color:inherit; opacity:.7;}
.card .foot{ padding:0 14px 14px; margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; }

.btn{ display:inline-flex; align-items:center; gap:8px; border-radius:12px;
border:1px solid var(--border); padding:10px 14px; background:var(--surface); cursor:pointer; }

/* Быстрые действия над фото (Избранное/Сравнить) */
.card .card__quick{
position:absolute;
top:8px;
right:8px;
display:flex;
gap:6px;
}
.card .card__icon{
width:32px; height:32px;
border-radius:999px;
border:none;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
background:rgba(0,0,0,.55);
color:#fff;
backdrop-filter:blur(6px);
}
[data-theme="light"] .card .card__icon{
background:rgba(255,255,255,.9);
color:#111;
box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.card .card__icon svg{ width:16px; height:16px; }
.card .card__icon.is-active{ background: var(--accent); color:#fff; }

.empty{ padding:24px; border:1px dashed var(--border); border-radius:16px; text-align:center; opacity:.8; margin-top: 16px; }
.pager{ display:flex; justify-content:center; margin-top:18px; }