﻿




.sf-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}


.sf-block h1,
.sf-block h2 {
  margin: 0 0 14px;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.sf-block h1 { font-size: clamp(26px, 2.8vw, 38px); }
.sf-block h2 { font-size: clamp(22px, 2.2vw, 30px); }

/* Catalog Lite */
#page-catalog {
  font-family: "Manrope", "Inter", sans-serif;
}

#page-catalog .sf-pre {
  margin-top: 14px;
  background: #fffdfa;
}

.catalog-lite-top {
  padding: 28px 42px 18px;
}

.catalog-lite-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted, #77716a);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.2;
  font-weight: 500;
}

.catalog-lite-breadcrumbs a {
  color: var(--muted, #77716a);
  text-decoration: none;
}

.catalog-lite-breadcrumbs a:hover {
  color: var(--ink, #171717);
}

.catalog-lite-breadcrumbs span {
  color: var(--soft, #aaa39a);
  font-weight: 500;
}

.catalog-lite-breadcrumbs b {
  color: var(--ink, #171717);
  font-weight: 700;
}

.catalog-lite-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 14px;
}

.catalog-lite-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.catalog-lite-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent);
}

.catalog-lite-intro h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 34px);
  line-height: .98;
  letter-spacing: -2px;
}

.catalog-lite-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-lite-title-count {
  font-size: 14px;
  color: var(--text3);
  font-weight: 600;
}

.catalog-lite-title-count b {
  color: var(--text2);
  font-weight: 800;
}

.catalog-lite-intro h1 em { color: var(--accent); font-style: normal; }

.catalog-lite-text {
  max-width: 460px;
  color: var(--text2);
  font-weight: 600;
}

.catalog-lite-banner {
  min-height: 82px;
  border-radius: 22px;
  background: #111;
  color: #fff;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.catalog-lite-banner::after {
  content: "Р„";
  position: absolute;
  right: 16px;
  bottom: -52px;
  font-family: var(--font-serif);
  font-size: 136px;
  line-height: 1;
  color: rgba(255,255,255,.06);
}

.catalog-lite-banner-main {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.catalog-lite-banner-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.catalog-lite-banner-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.catalog-lite-pill {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}

.catalog-lite-banner strong { display: block; font-size: 18px; letter-spacing: -.4px; }
.catalog-lite-banner span { color: rgba(255,255,255,.62); font-size: 13px; }
.catalog-lite-banner button {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
}

.catalog-lite-shell {
  padding: 0 42px 80px;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.catalog-lite-filters {
  position: sticky;
  top: 92px;
  background: #fffdfa;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 20px;
}

.catalog-lite-filter-head h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.catalog-lite-filter-group {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}

.catalog-lite-filter-group:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.catalog-lite-filter-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text2);
}



.sf-wire {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
}

.sf-wire-lg { height: 80px; max-width: 760px; }
.sf-wire-md { height: 36px; width: 56%; margin: 10px 0 20px; }

.sf-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sf-cat {
  display: block;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  color: var(--text2);
  font-size: 13px;
  text-decoration: none;
  transition: all .2s ease;
}

.sf-cat:hover {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text);
}


.sf-product {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  white-space: pre-wrap;
}

.sf-form {
  margin-top: 12px;
  background: #fffcf8;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.sf-form h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text2);
  font-weight: 700;
}

.sf-pre {
  margin: 0;
  background: #f6f1e9;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  white-space: pre-wrap;
  color: #3d3a36;
  font-size: 12px;
  max-height: 280px;
  overflow: auto;
}

.sf-msg {
  margin: 0;
  color: var(--green);
  font-size: 13px;
}

@media (max-width: 1200px) {
  .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .sf-nav {
    padding: 0 20px;
    gap: 16px;
    height: 68px;
  }
  body { padding-top: 68px; }
  .sf-search { max-width: 300px; }
  .sf-menu { display: none; }
  .sf-authbox { margin-left: auto; }
  .hm-hero { grid-template-columns: 1fr; min-height: auto; gap: 22px; padding: 28px 22px; }
  .hm-hero-title { font-size: clamp(40px, 10vw, 64px); }
  .hm-section { padding: 60px 20px; }
  .hm-promo { padding: 0 20px 60px; }
  .hm-features { margin: 0 20px; }
  .hm-footer { margin: 0 20px 24px; }
  .hm-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-promo-grid { grid-template-columns: 1fr; }
  .hm-features { grid-template-columns: 1fr 1fr; }
  .hm-footer-grid { grid-template-columns: 1fr 1fr; }
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-lite-top { padding: 24px 18px 18px; }
  .catalog-lite-intro { grid-template-columns: 1fr; align-items: start; }
  .catalog-lite-shell { padding: 0 18px 60px; grid-template-columns: 1fr; }
  .catalog-lite-filters { position: static; }
  .catalog-lite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-lite-toolbar { flex-wrap: wrap; }
  .product-lite-layout { grid-template-columns: 90px 1fr; }
  .product-lite-buy { grid-column: 1 / -1; position: static; }
  .product-lite-gallery { position: static; min-height: auto; }
  .product-lite-content-grid { grid-template-columns: 1fr; }
  .product-lite-seller { position: static; }
  .sf-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { grid-template-columns: 1fr; min-height: auto; }
  .home-copy h1 { font-size: clamp(38px, 10vw, 56px); }
  .categories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-hero-grid { grid-template-columns: 1fr; }
  .sf-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products-grid.sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-promo-grid { grid-template-columns: 1fr; }
  .sf-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .sf-nav { padding: 0 12px; }
  .sf-block { padding: 12px; }
  .sf-modal-form { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr; }
  .catalog-lite-banner { grid-template-columns: 1fr; }
  .catalog-lite-banner-actions { justify-content: space-between; }
  .catalog-lite-grid { grid-template-columns: 1fr; }
  .catalog-lite-sorts { width: 100%; }
  .catalog-lite-sorts select { flex: 1; min-width: 0; }
  .product-lite-wrap { padding: 20px 16px 56px; }
  .product-lite-layout { grid-template-columns: 1fr; }
  .product-lite-thumbs { display: flex; overflow-x: auto; position: static; }
  .product-lite-thumb { min-width: 86px; height: 78px; }
  .product-lite-main-image { min-height: 340px; font-size: 110px; }
  .product-lite-buy, .product-lite-panel { border-radius: 22px; padding: 20px; }
  .product-lite-spec { grid-template-columns: 1fr; gap: 3px; }
  .product-lite-related-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-hero-visual { grid-template-columns: 1fr; }
  .hm-preview-wide { grid-column: auto; min-height: 150px; }
  .hm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-features { grid-template-columns: 1fr; }
  .hm-footer-grid { grid-template-columns: 1fr; }
  .home-visual { grid-template-columns: 1fr; }
  .home-product-wide { grid-column: auto; }
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  input, select, textarea { width: 100%; min-width: 0; }
  .sf-row, .sf-filters { flex-direction: column; }
  .sf-wire-md { width: 100%; }
  .sf-actions-grid { grid-template-columns: 1fr; }
  .sf-stats { flex-wrap: wrap; }
  .sf-hero-cards { grid-template-columns: 1fr; }
  .sf-promo-wide { grid-column: auto; }
  .sf-features { grid-template-columns: 1fr; }
  .sf-footer-grid { grid-template-columns: 1fr; }
}

body[data-page="seller"] { padding-top: 0; }

