/**
 * ShopTop — Faixa de banners promocionais (Sprint E)
 * ------------------------------------------------------------------
 * Estrutura para campanhas comerciais (frete grátis, semana de ofertas,
 * cupons, marketplace, PIX) entre seções da Home. Some inteiramente
 * quando a opção está vazia (ver patterns/home/promo-strip.php) — este
 * CSS só é enfileirado/aplicado quando a seção existe no HTML.
 *
 * Depende de: tokens.css, variables.css, typography.css, utilities.css
 */

.shoptop-promo-strip {
	padding-block: var(--shoptop-space-5);
}

.shoptop-promo-strip__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--shoptop-space-3);
}

@media (min-width: 480px) {
	.shoptop-promo-strip__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.shoptop-promo-strip__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.shoptop-promo-strip__item {
	display: flex;
	align-items: center;
	gap: var(--shoptop-space-2);
	padding: var(--shoptop-space-3);
	background-color: var(--shoptop-color-surface);
	border: 1px solid var(--shoptop-color-border);
	border-radius: var(--shoptop-radius-md);
	box-shadow: var(--shoptop-shadow-sm);
	text-decoration: none;
	color: var(--shoptop-color-text);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Só links (item com "link" configurado) ganham indicação de
 * interatividade — itens sem link são puramente informativos. */
a.shoptop-promo-strip__item:hover {
	box-shadow: var(--shoptop-shadow-md);
	transform: translateY(-2px);
}

.shoptop-promo-strip__icon {
	font-size: var(--shoptop-font-size-xl);
	flex-shrink: 0;
}

.shoptop-promo-strip__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.shoptop-promo-strip__title {
	font-weight: var(--shoptop-font-weight-semibold);
	font-size: var(--shoptop-font-size-sm);
}

.shoptop-promo-strip__desc {
	font-size: var(--shoptop-font-size-xs);
	color: var(--shoptop-color-text-secondary);
}

/* Acento de cor por tipo — só a borda esquerda, para não competir com o
 * selo de tipo de venda do produto (verde/laranja/azul/amarelo já tem
 * outro significado, ver docs/DESIGN-SYSTEM.md). */
.shoptop-promo-strip__item--frete-gratis { border-left: 3px solid var(--shoptop-color-success-500); }
.shoptop-promo-strip__item--semana-ofertas { border-left: 3px solid var(--shoptop-color-warning-500); }
.shoptop-promo-strip__item--cupons { border-left: 3px solid var(--shoptop-color-secondary-500); }
.shoptop-promo-strip__item--marketplace { border-left: 3px solid var(--shoptop-color-partner-500); }
.shoptop-promo-strip__item--pix { border-left: 3px solid var(--shoptop-color-info-500); }

.shoptop-promo-strip__item:focus-visible {
	outline: 2px solid var(--shoptop-color-primary-500);
	outline-offset: 2px;
}