/* Главная: секции с fabech.com.ua/golovna. */

/* Hero: вертикальная колонна по центру, как в фирменной шапке.
   flex-колонка с !important — чтобы никакой внешний стиль не разложил
   элементы в строку (это уже случалось). */
.fb-hero {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	min-height: 560px;
	padding: 80px 24px;
	position: relative;
	color: #fff;
	background:
		radial-gradient(ellipse 70% 60% at 50% 45%, #8b1f26 0%, var(--fb-accent, #4E0000) 55%, #23080a 100%) !important;
}
.fb-hero > * { flex: 0 0 auto; }
.fb-hero__logo img { max-height: 64px; width: auto; margin-bottom: 26px; }
.fb-hero__eyebrow {
	display: inline-block;
	margin: 0 0 26px;
	padding: 7px 18px;
	border: 1px solid var(--fb-gold, #c9a45c);
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--fb-gold, #c9a45c);
}
.fb-hero__title {
	margin: 0;
	font-family: var(--fb-display);
	font-weight: 400;
	font-size: clamp(46px, 7vw, 84px);
	line-height: 1;
	letter-spacing: .08em;
	color: #fff;
}
.fb-hero__title em {
	display: block;
	font-style: italic;
	font-size: .58em;
	letter-spacing: .02em;
	color: var(--fb-gold, #c9a45c);
	margin-top: 8px;
}
.fb-hero__sub {
	margin: 24px 0 34px;
	font-size: 12px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}
.fb-btn--hero {
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--fb-gold, #c9a45c);
	color: var(--fb-gold, #c9a45c);
}
.fb-btn--hero:hover { background: var(--fb-gold, #c9a45c); color: #2c0507; }
.fb-hero__scroll {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

/* Бегущая строка */
.fb-marquee {
	overflow: hidden;
	background: var(--fb-ink);
	color: #fff;
	padding: 12px 0;
	white-space: nowrap;
}
.fb-marquee--light { background: var(--fb-surface); color: var(--fb-ink); }
.fb-marquee__track {
	display: inline-flex;
	gap: 26px;
	font-size: 12px;
	letter-spacing: .14em;
	animation: fb-marquee 28s linear infinite;
	will-change: transform;
}
@keyframes fb-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.fb-marquee__track { animation: none; }
}

/* Секции */
.fb-section { max-width: 1340px; margin: 0 auto; padding: 64px 24px 8px; }
.fb-section__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fb-muted);
}
.fb-section__title {
	margin: 0 0 30px;
	font-family: var(--fb-display);
	font-weight: 400;
	font-size: clamp(28px, 4.4vw, 44px);
}
.fb-section__title strong { font-weight: 700; }
.fb-section__more { margin: 26px 0 0; }
.fb-section__more a {
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--fb-ink);
	padding-bottom: 2px;
}
.fb-section__more a:hover { color: var(--fb-accent); border-color: var(--fb-accent); }

/* Сетка товаров */
.fb-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 18px;
}
.fb-card { display: block; text-decoration: none; color: var(--fb-ink); }
.fb-card__img { position: relative; display: block; overflow: hidden; background: var(--fb-surface); }
.fb-card__img img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.fb-card:hover .fb-card__img img { transform: scale(1.04); }
.fb-card__img-hover {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity .35s ease;
}
.fb-card:hover .fb-card__img-hover { opacity: 1; }
.fb-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	background: #fff;
	color: var(--fb-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
}
.fb-card__badge--sale { background: var(--fb-accent); color: #fff; }
.fb-card__title {
	display: block;
	margin: 12px 0 4px;
	font-family: var(--fb-display);
	font-size: 16px;
	line-height: 1.35;
}
.fb-card__price { font-size: 14px; color: var(--fb-muted); }
.fb-card__price del { opacity: .55; margin-right: 6px; }
.fb-card__price ins { text-decoration: none; color: var(--fb-accent); font-weight: 600; }

/* Категории «Актуальне наразі» */
.fb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fb-cat { position: relative; display: block; overflow: hidden; text-decoration: none; }
.fb-cat { background: var(--fb-surface); }
.fb-cat img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.fb-cat:hover img { transform: scale(1.04); }
.fb-cat__name {
	position: absolute;
	left: 18px;
	bottom: 16px;
	padding: 10px 16px;
	background: #fff;
	color: var(--fb-ink);
	font-family: var(--fb-display);
	font-size: 19px;
}
.fb-cat__name small { margin-left: 8px; font-size: 11px; color: var(--fb-muted); font-family: var(--fb-sans); }

/* Цитата */
.fb-quote {
	max-width: 900px;
	margin: 72px auto 0;
	padding: 0 24px;
	text-align: center;
}
.fb-quote__mark {
	display: inline-block;
	font-family: var(--fb-display);
	font-style: italic;
	font-size: 40px;
	color: var(--fb-accent);
}
.fb-quote blockquote {
	margin: 10px 0 0;
	font-family: var(--fb-display);
	font-size: clamp(19px, 2.6vw, 26px);
	line-height: 1.55;
}
.fb-quote cite { display: block; margin-top: 18px; font-family: var(--fb-sans); font-style: normal; font-size: 12px; letter-spacing: .16em; color: var(--fb-muted); }

/* Баннер Sale */
.fb-sale-banner {
	margin: 72px 0 0;
	padding: 84px 24px;
	background: var(--fb-accent);
	color: #fff;
	text-align: center;
}
.fb-sale-banner .fb-section__eyebrow { color: rgba(255, 255, 255, .7); }
.fb-sale-banner h2 {
	margin: 0 0 28px;
	font-family: var(--fb-display);
	font-weight: 400;
	font-size: clamp(38px, 6vw, 64px);
}

/* Преимущества */
.fb-perks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	max-width: 1340px;
	margin: 72px auto 0;
	padding: 0 24px;
}
.fb-perk { border-top: 2px solid var(--fb-ink); padding-top: 16px; }
.fb-perk h3 { margin: 0 0 6px; font-size: 15px; }
.fb-perk p { margin: 0; font-size: 13px; color: var(--fb-muted); }

/* О маркетплейсе: фирменное бордовое полотно с золотом */
.fb-about {
	max-width: 1100px;
	margin: 72px auto 0;
	padding: 64px 48px;
	text-align: center;
	background: linear-gradient(150deg, #3a0d10, var(--fb-accent, #4E0000));
	color: #fff;
}
.fb-about .fb-section__eyebrow { color: var(--fb-gold, #c9a45c); }
.fb-about h2 {
	margin: 0 0 18px;
	font-family: var(--fb-display);
	font-weight: 400;
	font-size: clamp(24px, 3.6vw, 34px);
	color: #fff;
}
.fb-about p { color: rgba(255, 255, 255, .82); margin-bottom: 26px; }
.fb-about .fb-btn--ghost { border-color: var(--fb-gold, #c9a45c); color: var(--fb-gold, #c9a45c); }
.fb-about .fb-btn--ghost:hover { background: var(--fb-gold, #c9a45c); color: #2c0507; }

@media (max-width: 900px) {
	.fb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fb-cats { grid-template-columns: 1fr; }
	.fb-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}