/* ==========================================================================
   Общие элементы светлых внутренних страниц (хлебные крошки, светлые карточки)
   ========================================================================== */

.breadcrumb { padding-block: var(--space-4); font-size: var(--fs-body-sm); color: var(--color-graphite-500); }
.breadcrumb a { color: var(--color-graphite-500); }
.breadcrumb a:hover { color: var(--color-brand-yellow-600); }
.breadcrumb span.sep { margin: 0 6px; }
.breadcrumb span.current { color: var(--color-graphite-900); font-weight: var(--fw-medium); }

.page-head { margin-bottom: var(--space-5); }
.page-head__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.page-head__desc { font-size: var(--fs-body); color: var(--color-graphite-500); max-width: 640px; margin: 0; }

/* ---- Каталог: layout ---- */
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); padding-bottom: var(--space-8); }

/* ---- Sidebar filters ---- */
.filters { display: flex; flex-direction: column; gap: var(--space-5); }
.filter-block { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }
.filter-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.filter-block__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-graphite-900); }
.filter-block__reset { font-size: 11px; color: var(--color-graphite-500); cursor: pointer; }
.filter-search { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--fs-body-sm); margin-bottom: var(--space-3); color: var(--color-graphite-900); }
.filter-option { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); color: var(--color-graphite-700); margin-bottom: 8px; cursor: pointer; }
.filter-option input { accent-color: var(--color-brand-yellow-600); width: 15px; height: 15px; }
.filter-option .count { margin-left: auto; color: var(--color-graphite-300); font-size: 12px; }
.filter-range { display: flex; align-items: center; gap: 8px; }
.filter-range input { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; }
.filters-btn { width: 100%; }

/* ---- Toolbar ---- */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.toolbar__count { font-size: var(--fs-body-sm); color: var(--color-graphite-500); }
.toolbar__right { display: flex; align-items: center; gap: var(--space-3); }
.toolbar__sort { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-body-sm); color: var(--color-graphite-900); }
.toolbar__view { display: flex; gap: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px; }
.toolbar__view span { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.toolbar__view span.active { background: var(--color-bg-subtle); }

/* ---- Light product cards (каталог + похожие товары на карточке товара) ---- */
.light-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.light-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s; }
.light-card:hover { box-shadow: var(--shadow-md); }
.light-card__media { position: relative; aspect-ratio: 1/0.85; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; }
.light-card__photo-note { color: var(--color-graphite-300); font-size: 11px; }
.light-card__badge { position: absolute; top: var(--space-2); left: var(--space-2); }
.light-card__wish { position: absolute; top: var(--space-2); right: var(--space-2); width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.light-card__wish.is-active { color: var(--color-danger); border-color: var(--color-danger); }
.light-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.light-card__name { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-graphite-900); line-height: 1.35; min-height: 2.7em; }
.light-card__specs { display: flex; flex-direction: column; gap: 3px; }
.light-card__spec { font-size: 11px; color: var(--color-graphite-500); }
.light-card__stock { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-success); }
.light-card__stock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.light-card__price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.light-card__price { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color-graphite-900); }
.light-card__price-old { font-size: var(--fs-body-sm); color: var(--color-graphite-300); text-decoration: line-through; }
.light-card__cta { margin-top: auto; padding-top: var(--space-2); }
.light-card__btn { width: 100%; background: var(--color-brand-yellow); color: var(--color-graphite-900); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; }
.light-card__btn:hover { background: var(--color-brand-yellow-600); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.pagination a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--fs-body-sm); color: var(--color-graphite-700); }
.pagination a.active { background: var(--color-brand-yellow); color: var(--color-graphite-900); font-weight: var(--fw-semibold); }

@media (max-width: 1024px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .light-grid { grid-template-columns: repeat(2, 1fr); }
}