/**
 * Homepage sections: hero, trust features grid, categories rail,
 * product carousel, promotional banner, final CTA.
 * .trust-tile / .badge / .btn / .card primitives come from components.css.
 */

.section-title {
	font-size: var(--text-xl);
	margin-block-end: var(--space-1);
}
.section-subtitle { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Hero ---- */
.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: var(--space-7);
	padding-block: var(--space-6);
}
.hero__badge { margin-block-end: var(--space-4); }
.hero__title { font-size: var(--text-2xl); margin-block-end: var(--space-4); }
.hero__subtitle { color: var(--color-text-muted); font-size: var(--text-md); margin-block-end: var(--space-6); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__actions .btn--outline svg { width: 18px; height: 18px; }

.hero__visual { display: flex; }
.hero__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 55%),
		linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--color-accent) 70%, white);
}
.hero__placeholder svg { width: 88px; height: 88px; }

@media (max-width: 991px) {
	.hero__inner { grid-template-columns: 1fr; gap: var(--space-5); text-align: center; }
	.hero__subtitle { max-width: none; margin-inline: auto; }
	.hero__actions { justify-content: center; }
	.hero__visual { order: -1; max-width: 320px; margin-inline: auto; }
}

/* ---- Hero slider ---- */
.hero-slider { padding-block: var(--space-5) var(--space-4); }
.hero-slider__frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 55%),
		linear-gradient(120deg, var(--color-accent-tint), var(--color-surface));
}
.hero-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.hero-slider__track::-webkit-scrollbar { display: none; }

.hero-slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: var(--space-6);
	min-height: 440px;
	padding: var(--space-6) var(--space-7) calc(var(--space-8) + var(--space-5));
}
.hero-slide__badge { margin-block-end: var(--space-4); }
.hero-slide__title { font-size: var(--text-2xl); line-height: var(--line-height-tight); margin-block-end: var(--space-4); }
.hero-slide__subtitle { color: var(--color-text-muted); font-size: var(--text-md); margin-block-end: var(--space-6); max-width: 46ch; }
.hero-slide__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero-slide__visual { display: flex; justify-content: center; }
.hero-slide__visual img {
	width: 100%;
	max-width: 340px;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	background: var(--color-card);
}
.hero-slide__placeholder {
	width: 100%;
	max-width: 340px;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--color-accent) 70%, white);
}
.hero-slide__placeholder svg { width: 88px; height: 88px; }

/* Controls (hidden until the script is running, so there are no dead buttons). */
.hero-slider:not(.is-ready) .hero-slider__controls { display: none; }
.hero-slider__controls {
	position: absolute;
	inset-block-end: var(--space-4);
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-background) 88%, transparent);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(6px);
}
.hero-slider__arrow,
.hero-slider__pause {
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border-strong);
	background: var(--color-background);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.hero-slider__arrow svg,
.hero-slider__pause svg { width: 16px; height: 16px; }
.hero-slider__arrow:hover,
.hero-slider__pause:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-on-primary);
}
.hero-slider__arrow--prev svg { transform: scaleX(-1); }
html[dir="rtl"] .hero-slider__arrow--prev svg { transform: scaleX(1); }
html[dir="rtl"] .hero-slider__arrow--next svg { transform: scaleX(-1); }

.hero-slider__pause .hero-slider__icon-play { display: none; }
.hero-slider.is-paused .hero-slider__icon-pause { display: none; }
.hero-slider.is-paused .hero-slider__icon-play { display: block; }

.hero-slider__dots { display: flex; align-items: center; gap: 6px; }
.hero-slider__dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
	cursor: pointer;
	transition: width var(--transition-base), background-color var(--transition-base);
}
/* Larger invisible hit area for touch. */
.hero-slider__dot::after { content: ""; position: absolute; inset: -8px -3px; }
.hero-slider__dot[aria-current="true"] { width: 26px; background: var(--color-accent); }

.hero-slider__arrow:focus-visible,
.hero-slider__pause:focus-visible,
.hero-slider__dot:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 2px; }

@media (max-width: 991px) {
	.hero-slide {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		min-height: 0;
		padding: var(--space-5) var(--space-4) calc(var(--space-8) + var(--space-5));
		text-align: center;
	}
	.hero-slide__visual { order: -1; }
	.hero-slide__visual img,
	.hero-slide__placeholder { max-width: 220px; }
	.hero-slide__subtitle { max-width: none; margin-inline: auto; margin-block-end: var(--space-5); }
	.hero-slide__actions { justify-content: center; }
}
@media (max-width: 480px) {
	.hero-slider { padding-block-start: var(--space-4); }
	.hero-slider__arrow { display: none; }
	.hero-slide__title { font-size: var(--text-xl); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slider__dot { transition: none; }
}

/* ---- Trust features ---- */
.trust-features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}
@media (max-width: 991px) {
	.trust-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.trust-features__grid { grid-template-columns: 1fr; }
}

/* ---- Section header with carousel controls (categories, product rails) ---- */
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-end: var(--space-5);
}
.section-head__text { min-width: 0; }
.section-head .section-title {
	position: relative;
	padding-block-end: var(--space-3);
	margin-block-end: 0;
}
.section-head .section-title::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
}
.section-head .section-subtitle { margin-block-start: var(--space-2); }
.section-head__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}
.section-head__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-inline-end: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-accent-strong);
	white-space: nowrap;
}
.section-head__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.section-head__link:hover svg { transform: translateX(3px); }
html[dir="rtl"] .section-head__link svg { transform: scaleX(-1); }
html[dir="rtl"] .section-head__link:hover svg { transform: scaleX(-1) translateX(3px); }

.carousel-nav {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--color-background);
	border: 1px solid var(--color-border-strong);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.carousel-nav svg { width: 18px; height: 18px; }
.carousel-nav:hover:not(:disabled) {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-on-primary);
}
.carousel-nav:disabled { opacity: 0.35; cursor: default; }
.carousel-nav[hidden] { display: none; }

.carousel-nav--next svg { transform: scaleX(1); }
.carousel-nav--prev svg { transform: scaleX(-1); }
html[dir="rtl"] .carousel-nav--next svg { transform: scaleX(-1); }
html[dir="rtl"] .carousel-nav--prev svg { transform: scaleX(1); }

/* Shared rail behaviour: native swipe/scroll with snapping, no visible
   scrollbar (the header arrows and touch replace it). The padding/negative
   margin pair leaves room for the cards' hover lift and shadow. */
.categories__track,
.product-carousel__track {
	/* Containing block for absolutely positioned descendants (e.g. WooCommerce's
	   visually hidden add-to-cart description), so the rail clips them instead
	   of letting them widen the whole page. */
	position: relative;
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-block: var(--space-2) var(--space-5);
	margin-block: calc(-1 * var(--space-2)) calc(-1 * var(--space-5));
}
.categories__track::-webkit-scrollbar,
.product-carousel__track::-webkit-scrollbar { display: none; }

/* ---- Categories ---- */
.category-tile {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 5 * var(--space-4)) / 6);
	display: flex;
	flex-direction: column;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--color-text);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}
.category-tile:hover,
.category-tile:focus-visible {
	transform: translateY(-4px);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-md);
}
.category-tile__media {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient(circle at 50% 45%, var(--color-accent-tint) 0%, var(--color-surface) 70%);
}
.category-tile__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--space-4);
	transition: transform var(--transition-base);
}
.category-tile:hover .category-tile__img { transform: scale(1.06); }
.category-tile__fallback {
	font-size: var(--text-xl);
	font-weight: var(--font-weight-black);
	color: var(--color-accent-strong);
}
.category-tile__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--space-3) var(--space-3) var(--space-4);
	text-align: center;
}
.category-tile__name {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-primary);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.category-tile__name-alt {
	max-width: 100%;
	font-size: var(--text-xs);
	line-height: var(--line-height-tight);
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.category-tile__count {
	margin-block-start: auto;
	padding: 2px var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-accent-tint);
	color: var(--color-accent-strong);
	font-size: 11px;
	font-weight: var(--font-weight-bold);
}
/* Minimum gap above the count pill (its auto margin only adds space). */
.category-tile__body > :nth-last-child(2) { margin-block-end: var(--space-2); }

/* ---- Product carousel ---- */
.product-carousel__item {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 4 * var(--space-4)) / 5);
	display: flex;
}
.product-carousel__item > .product-card { width: 100%; }

@media (max-width: 1199px) {
	.category-tile { flex-basis: calc((100% - 4 * var(--space-4)) / 5); }
	.product-carousel__item { flex-basis: calc((100% - 3 * var(--space-4)) / 4); }
}
@media (max-width: 991px) {
	.category-tile { flex-basis: calc((100% - 3 * var(--space-4)) / 4); }
	.product-carousel__item { flex-basis: calc((100% - 2 * var(--space-4)) / 3); }
}
@media (max-width: 767px) {
	.category-tile { flex-basis: 31%; }
	.product-carousel__item { flex-basis: 46%; }
}
@media (max-width: 576px) {
	.section-head { align-items: center; }
	.section-head .carousel-nav { display: none; }
	.category-tile { flex-basis: 42%; }
	.product-carousel__item { flex-basis: 72%; }
}

/* Phones/tablets. Product rows become a two-per-row grid (like the shop page), so no card is ever cut off;
   the category row runs edge to edge and shows exactly two (three on tablets) full tiles at a time. */
@media (max-width: 767px) {
	.categories__track {
		margin-inline: calc(-1 * var(--container-padding-inline));
		padding-inline: var(--container-padding-inline);
		scroll-padding-inline: var(--container-padding-inline);
	}
	.category-tile { flex-basis: calc((100% - 2 * var(--space-4)) / 3); }
	.product-carousel__track {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.product-carousel__item { width: auto; min-width: 0; }
}
@media (max-width: 576px) {
	.category-tile { flex-basis: calc((100% - var(--space-4)) / 2); }
}

/* ---- Promotional banner ---- */
.promo-banner__card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: var(--space-7);
	background: linear-gradient(120deg, var(--color-primary), var(--color-primary-strong));
	background-size: cover;
	background-position: center;
	min-height: 220px;
	display: flex;
	align-items: center;
}
.promo-banner__card.has-photos {
	--promo-glow-x: 85%;
	justify-content: space-between;
	gap: var(--space-6);
	padding-block: var(--space-6);
	background:
		radial-gradient(circle at var(--promo-glow-x) 50%, color-mix(in srgb, var(--color-accent) 38%, transparent), transparent 55%),
		linear-gradient(120deg, var(--color-primary), var(--color-primary-strong));
}
html[dir="rtl"] .promo-banner__card.has-photos { --promo-glow-x: 15%; }
.promo-banner__card.has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 24, 48, 0.82), rgba(14, 24, 48, 0.35));
}
.promo-banner__content { position: relative; max-width: 460px; color: var(--color-text-on-primary); }
.promo-banner__content h2 { color: var(--color-text-on-primary); margin-block-end: var(--space-3); }
.promo-banner__content p { color: rgba(255, 255, 255, 0.82); margin-block-end: var(--space-5); }

/* Photo collage: the middle photo sits on top, the side ones tilt out from behind it. */
.promo-banner__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding-inline: var(--space-4);
}
.promo-banner__visual img {
	width: 168px;
	height: 168px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	border: 4px solid rgba(255, 255, 255, 0.92);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
	background: var(--color-card);
}
.promo-banner__visual img + img { margin-inline-start: -64px; }
.promo-banner__visual--3 img:nth-child(1) { transform: rotate(-7deg) translateY(8px); }
.promo-banner__visual--3 img:nth-child(2) { position: relative; z-index: 2; transform: scale(1.14); }
.promo-banner__visual--3 img:nth-child(3) { transform: rotate(7deg) translateY(8px); }
.promo-banner__visual--2 img:nth-child(1) { transform: rotate(-5deg); }
.promo-banner__visual--2 img:nth-child(2) { position: relative; z-index: 2; transform: rotate(4deg) scale(1.08); }

@media (max-width: 991px) {
	.promo-banner__card.has-photos { flex-direction: column; align-items: flex-start; }
	.promo-banner__visual { align-self: center; margin-block-start: var(--space-3); }
	.promo-banner__visual img { width: 128px; height: 128px; }
	.promo-banner__visual img + img { margin-inline-start: -44px; }
}
@media (max-width: 576px) {
	.promo-banner__card { padding: var(--space-5); min-height: 180px; }
	.promo-banner__visual img { width: 104px; height: 104px; border-width: 3px; }
	.promo-banner__visual img + img { margin-inline-start: -36px; }
}

/* ---- Final CTA ---- */
/* The footer keeps a gap above it for white pages; when the page ends with the tinted CTA that gap
   showed as a white band between two beige areas, so the footer sits flush against it. */
.site-main:has(> .home-cta:last-child) + .site-footer { margin-block-start: 0; }
.home-cta__inner { text-align: center; max-width: 560px; margin-inline: auto; }
.home-cta__inner h2 { margin-block-end: var(--space-3); }
.home-cta__inner p { color: var(--color-text-muted); margin-block-end: var(--space-6); }