/* Homepage-specific styles */

/* HERO */
.hero { background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 100%); padding-block: var(--s12); }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s12); align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--border); border-radius: var(--r-full); padding: 6px 14px; margin-bottom: var(--s5); }
.hero h1 { font-size: var(--text-3xl); font-weight: 900; letter-spacing: -0.02em; line-height: 1.4; }
.hero__hl { color: var(--brand); }
.hero__copy p { font-size: var(--text-md); color: var(--ink-2); margin-top: var(--s5); max-width: 46ch; }
.hero__cta { display: flex; gap: var(--s3); margin-top: var(--s6); }
.hero__how { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s8); flex-wrap: wrap; }
.hero__how li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.hero__num { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; }
.hero__arrow { color: var(--border-2); font-weight: 700; }

.hero__feature { display: flex; justify-content: center; }
.feat-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); width: 100%; max-width: 420px; overflow: hidden; }
.feat-card > a { display: block; }
.feat-card > img, .feat-card > a > img { width: 70%; margin: var(--s8) auto var(--s4); aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; }
.feat-card__info { padding: 0 var(--s6) var(--s6); display: flex; flex-direction: column; gap: var(--s2); }
.feat-card__info h3 { font-size: var(--text-md); font-weight: 700; line-height: 1.3; }

/* Featured auto-slider (crossfade stack) */
.feat-slider { position: relative; width: 100%; max-width: 420px; }
.feat-track { display: grid; }
.feat-slide { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; transform: scale(.985); pointer-events: none; transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s; }
.feat-slide.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .55s ease, transform .55s ease, visibility 0s; }
.feat-slider:not(.feat-slider--on) .feat-slide { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.feat-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s5); }
.feat-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--border-2); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.feat-dot:hover { background: var(--ink-2); }
.feat-dot.is-active { background: var(--brand); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .feat-slide, .feat-slide.is-active { transition: none; transform: none; } }

/* TRUST STRIP */
.trust-strip { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-strip__inner { display: flex; justify-content: space-between; gap: var(--s5); padding-block: var(--s4); flex-wrap: wrap; }
.trust-strip span { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.trust-strip svg { width: 19px; height: 19px; color: var(--emerald); flex-shrink: 0; }

/* BANDS */
.band { background: #fff; border-block: none; }

/* WHY */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); }
.why__col { text-align: center; padding: var(--s6); }
.why__ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--brand-tint); color: var(--brand); margin-bottom: var(--s4); }
.why__ico svg { width: 30px; height: 30px; }
.why__col h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--s2); }
.why__col p { font-size: var(--text-base); color: var(--ink-2); max-width: 38ch; margin-inline: auto; }

/* CATEGORIES */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s6); background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); font-size: var(--text-base); font-weight: 600; text-align: center; transition: all .15s ease; }
.cat:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.cat__ico { font-size: 1.75rem; }
/* Фото категории: фиксированный квадрат + contain. Без него после отказа от
   жёсткого кропа (18.10.2026) плитки с разными пропорциями разъезжались и
   подписи вставали на разной высоте. */
.cat__ico { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; max-width: 100%; }
.cat__ico img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.cat__label { display: block; }
.cat { justify-content: flex-start; }

/* ===== MOBILE (home-specific) ===== */
@media (max-width: 760px) {
  .hero { padding-block: var(--s8); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s8); }
  .hero h1 { font-size: var(--text-2xl); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__how { gap: var(--s2); }
  .hero__how li { font-size: var(--text-xs); }
  .hero__feature { order: -1; }
  .trust-strip__inner { gap: var(--s3); }
  .trust-strip span { font-size: var(--text-xs); width: calc(50% - var(--s3)); }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .why { grid-template-columns: 1fr; gap: var(--s5); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: var(--s8); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .sec-head__title { font-size: var(--text-xl); }
}

/* Story heading icons — constrain inline SVG (theme addition) */
.story__col h3 { display: flex; align-items: center; gap: 8px; }
.story__col h3 svg { width: 20px; height: 20px; flex: none; color: var(--brand); }

/* "Shop with less noise" narrative band (port of copy-band.css — the
   container/grid layout was missing, so the block rendered unstyled). */
.story {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: clamp(28px, 3vw, 44px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 3vw, 52px);
}
.story__head { grid-column: 1 / -1; max-width: 760px; }
.story__head h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.story__head p { margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.story__col h3 { font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.story__col p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 760px) {
	.story { grid-template-columns: 1fr; gap: 22px; }
}