/* ============================================================
 * SW24 — Home sections (simple)
 * No Google Fonts, no decorative styling, minimal hover effects
 * ============================================================ */

.sw24-hs {
	padding: 56px 0;
	background: #fff;
	color: #1a1a1a;
	font-family: inherit;
}
.sw24-hs-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Alternate tone for FAQ section */
.sw24-hs-faq { background: #f7f7f7; }

/* ---- Shared header ---- */
.sw24-hs-head { margin: 0 0 32px; max-width: 760px; }
.sw24-hs-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.sw24-hs-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: #1a1a1a;
	margin: 0 0 10px;
}
.sw24-hs-sub {
	font-size: 16px;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* ============================================================
 * 1. BRANDS TRUST ROW
 * ============================================================ */
.sw24-hs-brands-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.sw24-hs-brand-tile {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 22px;
}
.sw24-hs-brand-tile img {
	max-width: 100%;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ============================================================
 * 2. BESTSELLERS
 * ============================================================ */
.sw24-hs-products {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
.sw24-hs-product {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.sw24-hs-product-media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f7f7;
	aspect-ratio: 4 / 3;
	padding: 20px;
}
.sw24-hs-product-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.sw24-hs-product-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sw24-hs-product-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
}
.sw24-hs-product-title a {
	color: #1a1a1a;
	text-decoration: none;
}
.sw24-hs-product-title a:hover { color: #0055ff; }

.sw24-hs-product-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
}
.sw24-hs-product-bullets li {
	position: relative;
	padding-left: 16px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
	margin-bottom: 3px;
}
.sw24-hs-product-bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #0055ff;
	font-weight: 700;
}

.sw24-hs-product-price {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 14px;
}

.sw24-hs-product-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	background: #0055ff;
	color: #fff !important;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}
.sw24-hs-product-cta:hover,
.sw24-hs-product-cta:focus {
	background: #003cc7;
	color: #fff !important;
}

/* ============================================================
 * 3. HOW IT WORKS
 * ============================================================ */
.sw24-hs-how { background: #f7f7f7; }
.sw24-hs-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.sw24-hs-step {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 24px 20px;
}
.sw24-hs-step-num {
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	color: #0055ff;
	line-height: 1;
	margin-bottom: 10px;
}
.sw24-hs-step-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
	color: #1a1a1a;
}
.sw24-hs-step-text {
	font-size: 14px;
	line-height: 1.55;
	color: #555;
	margin: 0;
}
.sw24-hs-how-cta { text-align: center; margin: 0; }

/* ============================================================
 * 4. FAQ TEASER
 * ============================================================ */
.sw24-hs-faq-inner { max-width: 1100px; }
.sw24-hs-faq-title .sw24-hs-faq-mark { color: #0055ff; }
.sw24-hs-faq-list {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
}
.sw24-hs-faq-item {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
}
.sw24-hs-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
	list-style: none;
}
.sw24-hs-faq-item summary::-webkit-details-marker { display: none; }
.sw24-hs-faq-item summary::marker { display: none; content: ''; }
.sw24-hs-faq-icon {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	color: #888;
}
.sw24-hs-faq-item[open] .sw24-hs-faq-icon {
	transform: rotate(-135deg) translate(-1px, -1px);
	color: #0055ff;
}
.sw24-hs-faq-answer {
	padding: 0 22px 20px;
	color: #555;
	font-size: 15px;
	line-height: 1.65;
}
.sw24-hs-faq-answer p { margin: 0; }
.sw24-hs-faq-cta { text-align: center; margin: 0; }

/* ============================================================
 * 5. SEO TEXT BLOCK
 * ============================================================ */
.sw24-hs-seo { background: #fff; }
.sw24-hs-seo-inner { max-width: 1100px; }
.sw24-hs-seo .sw24-hs-title {
	margin-bottom: 18px;
}
.sw24-hs-seo p {
	font-size: 15.5px;
	line-height: 1.75;
	color: #555;
	margin: 0 0 16px;
}
.sw24-hs-seo p:last-child { margin-bottom: 0; }

/* ============================================================
 * 6. PRODUCT CATEGORIES
 * ============================================================ */
.sw24-hs-categories { background: #f7f7f7; }
.sw24-hs-cats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.sw24-hs-cat {
	display: flex;
	gap: 18px;
	align-items: center;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 20px;
	text-decoration: none !important;
	color: inherit;
}
.sw24-hs-cat:hover { border-color: #0055ff; }
.sw24-hs-cat-media {
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f7f7;
	border-radius: 6px;
	padding: 12px;
}
.sw24-hs-cat-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.sw24-hs-cat-body { flex: 1; min-width: 0; }
.sw24-hs-cat-title {
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0 0 6px;
}
.sw24-hs-cat-desc {
	font-size: 14px;
	line-height: 1.5;
	color: #555;
	margin: 0 0 8px;
}
.sw24-hs-cat-link {
	font-size: 13.5px;
	font-weight: 600;
	color: #0055ff;
}

/* ---- Shared link CTA (how-it-works + faq-teaser) ---- */
.sw24-hs-linkcta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	background: #0055ff;
	color: #fff !important;
	border-radius: 6px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none !important;
}
.sw24-hs-linkcta:hover,
.sw24-hs-linkcta:focus {
	background: #003cc7;
	color: #fff !important;
}

/* ============================================================
 * TABLET
 * ============================================================ */
@media (max-width: 1240px) {
	.sw24-hs-products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.sw24-hs { padding: 44px 0; }
	.sw24-hs-brands-grid { grid-template-columns: repeat(3, 1fr); }
	.sw24-hs-products { grid-template-columns: repeat(2, 1fr); }
	.sw24-hs-steps { grid-template-columns: repeat(2, 1fr); }
	.sw24-hs-cats { grid-template-columns: 1fr; }
}

/* ============================================================
 * MOBILE
 * ============================================================ */
@media (max-width: 640px) {
	.sw24-hs { padding: 36px 0; }
	.sw24-hs-inner { padding: 0 18px; }
	.sw24-hs-head { margin-bottom: 24px; }
	.sw24-hs-title { font-size: 24px; }
	.sw24-hs-sub { font-size: 15px; }

	.sw24-hs-brands-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.sw24-hs-brand-tile {
		height: 72px;
		padding: 12px 16px;
	}
	.sw24-hs-brand-tile img { max-height: 32px; }

	/* Bestsellers: compact horizontal card layout on mobile */
	.sw24-hs-products {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.sw24-hs-product {
		flex-direction: row;
		align-items: stretch;
	}
	.sw24-hs-product-media {
		flex: 0 0 110px;
		width: 110px;
		aspect-ratio: auto;
		padding: 12px;
	}
	.sw24-hs-product-body {
		padding: 12px 14px;
		min-width: 0;
	}
	.sw24-hs-product-title {
		font-size: 15px;
		margin: 0 0 6px;
	}
	.sw24-hs-product-bullets { display: none; }
	.sw24-hs-product-price {
		font-size: 16px;
		margin: 0 0 10px;
	}
	.sw24-hs-product-cta {
		padding: 8px 14px;
		font-size: 13px;
		align-self: flex-start;
	}

	.sw24-hs-steps {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.sw24-hs-step { padding: 18px; }

	.sw24-hs-faq-item summary {
		padding: 15px 18px;
		font-size: 15px;
	}
	.sw24-hs-faq-answer { padding: 0 18px 16px; font-size: 14.5px; }

	.sw24-hs-linkcta {
		width: 100%;
		justify-content: center;
	}

	/* Categories: tighter on mobile */
	.sw24-hs-cat {
		padding: 16px;
		gap: 14px;
	}
	.sw24-hs-cat-media {
		flex: 0 0 80px;
		width: 80px;
		height: 80px;
		padding: 10px;
	}
	.sw24-hs-cat-title { font-size: 16px; }
	.sw24-hs-cat-desc { font-size: 13px; }

	/* SEO text: slightly smaller body on mobile */
	.sw24-hs-seo p { font-size: 14.5px; }
}