/**
 * Alixa Shop — OTC storefront wrapper (M1 skeleton).
 * Only styles the storefront header; the product grid + cards reuse search.css.
 */

.alixa-shop {
	max-width: 1040px;
	margin: 0 auto;
	padding: 20px 16px 32px;
}

.alixa-shop__header {
	text-align: center;
	margin-bottom: 20px;
}

.alixa-shop__title {
	margin: 0 0 6px;
	font-size: 1.6rem;
	font-weight: 700;
	color: #0f172a;
}

.alixa-shop__subtitle {
	margin: 0;
	font-size: 0.95rem;
	color: #64748b;
}

/* ============================================================
   Storefront v3 — shop hero banner (2026-06-24)
   Hybrid direction (STOREFRONT_DESIGN_DIRECTION.md).
   ============================================================ */
.alixa-shop__hero {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 30px 28px;
	margin-bottom: 22px;
	color: #fff;
	background: linear-gradient(120deg, #075e85 0%, #0096c7 55%, #22d3ee 100%);
	box-shadow: 0 14px 34px rgba(0, 150, 199, 0.18);
}
.alixa-shop__hero::after {
	content: "";
	position: absolute;
	inset-inline-end: -50px;
	bottom: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.10);
	pointer-events: none;
}
.alixa-shop__hero-in { position: relative; z-index: 1; }
.alixa-shop__hero .alixa-shop__title {
	color: #fff;
	font-size: 1.8rem;
	margin: 0 0 8px;
}
.alixa-shop__hero .alixa-shop__subtitle {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1rem;
	margin: 0 0 14px;
}
.alixa-shop__hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.alixa-shop__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 0.82rem;
	font-weight: 600;
}
@media (max-width: 600px) {
	.alixa-shop__hero { padding: 22px 18px; border-radius: 16px; }
	.alixa-shop__hero .alixa-shop__title { font-size: 1.4rem; }
	.alixa-shop__hero .alixa-shop__subtitle { font-size: 0.92rem; }
}

/* -------- Category tiles (chips) -------- */
.alixa-shop__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.alixa-shop__cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid #cfe9f3;
	background: #fff;
	color: #0f5e7e;
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.alixa-shop__cat:hover { border-color: #0096c7; background: #eaf6fb; }
.alixa-shop__cat.is-active { background: #0096c7; border-color: #0096c7; color: #fff; }
.alixa-shop__cat-ic { font-size: 1rem; line-height: 1; }
.alixa-shop__scope { font-size: 0.85rem; color: #64748b; margin: 0 0 14px; }
.alixa-shop__scope strong { color: #0f172a; }
.alixa-shop__scope a { color: #0096c7; font-weight: 600; text-decoration: none; }