/* -----------------------------------------------------------------------------
   Front page and shop components.

   Rebuilds what the Elementor homepage (#482) does: hero slider, product grid,
   about card, featured categories and the USP blocks.
   -------------------------------------------------------------------------- */

.l4u-section {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.l4u-section--alt {
	background: var(--l4u-surface);
}

.l4u-section__head {
	text-align: center;
	max-width: 60ch;
	margin-inline: auto;
	margin-block-end: clamp(1.25rem, 3vw, 2rem);
}

.l4u-section__head h2 {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

.l4u-section__head p {
	color: var(--l4u-muted);
	margin: 0;
}

/* Banner --------------------------------------------------------------------
   One fixed banner instead of the three-slide carousel: visitors rarely see past
   the first slide, and this keeps the products above the fold. */

/* The old banner image was a finished Elementor composition with an empty area on the left
   for its text widget. Cropping it to a wide strip cut the product shot in half, so the
   hero is built from real markup instead: text on the left, image on the right. */

.l4u-hero-panel {
	padding-block: clamp(1rem, 3vw, 2rem);
}

.l4u-hero-panel__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	grid-template-columns: 1fr;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: linear-gradient(135deg, var(--l4u-surface), #e7ecf5);
	border-radius: 18px;
}

@media (min-width: 900px) {
	.l4u-hero-panel__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

.l4u-hero-panel__text h1 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	margin-block-end: .6rem;
}

.l4u-hero-panel__text > p {
	max-width: 46ch;
	color: var(--l4u-muted);
	font-size: 1.05rem;
	margin-block-end: 1.1rem;
}

.l4u-hero-panel__points {
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .45rem;
}

.l4u-hero-panel__points li {
	position: relative;
	padding-inline-start: 1.65rem;
	font-size: .96rem;
}

.l4u-hero-panel__points li::before {
	content: "";
	position: absolute;
	inset-block-start: .42em;
	inset-inline-start: 0;
	width: 1rem;
	height: .5rem;
	border-inline-start: 2.5px solid #178a4a;
	border-block-end: 2.5px solid #178a4a;
	rotate: -45deg;
}

.l4u-hero-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	margin: 0;
}

/* The source banner still carries the empty block on its left where Elementor's text widget
   used to sit. Anchor the image to the right so that dead area is cropped away and only the
   product shot remains. Replace this with a clean product photo and the crop can go. */
.l4u-hero-panel__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 100% center;
	border-radius: 12px;
}

/* Hero slider ---------------------------------------------------------------
   Kept for reference while the banner above is in use. */

.l4u-hero {
	padding-block-start: clamp(1rem, 3vw, 2rem);
}

.l4u-hero__viewport {
	position: relative;
	border-radius: var(--l4u-radius);
	overflow: hidden;
	background: var(--l4u-surface);
}

.l4u-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.l4u-hero__track::-webkit-scrollbar {
	display: none;
}

.l4u-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
}

.l4u-hero__slide img {
	display: block;
	width: 100%;
	height: auto;
}

.l4u-hero__nav {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .75);
	color: var(--l4u-black);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.l4u-hero__nav:hover {
	background: var(--l4u-white);
}

.l4u-hero__nav--prev { inset-inline-start: .75rem; }
.l4u-hero__nav--next { inset-inline-end: .75rem; }

.l4u-hero__dots {
	position: absolute;
	inset-block-end: .75rem;
	inset-inline: 0;
	display: flex;
	justify-content: center;
	gap: .4rem;
}

.l4u-hero__dot {
	width: .55rem;
	height: .55rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .6);
	cursor: pointer;
}

.l4u-hero__dot[aria-current="true"] {
	background: var(--l4u-white);
}

/* Product grid ------------------------------------------------------------- */

.l4u-products {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.l4u-products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.l4u-products {
		grid-template-columns: repeat(4, 1fr);
	}
}

.l4u-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 1rem;
	text-align: center;
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
}

.l4u-product img {
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.l4u-product__title {
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
}

.l4u-product__title a {
	color: var(--l4u-black);
	text-decoration: none;
}

.l4u-product__price {
	font-size: 1.15rem;
	font-weight: 600;
}

.l4u-product__price del {
	color: var(--l4u-muted);
	font-weight: 400;
	font-size: .95rem;
}

.l4u-product__price ins {
	text-decoration: none;
	color: var(--l4u-blue);
}

/* Buttons ------------------------------------------------------------------ */

.l4u-btn {
	display: inline-block;
	margin-block-start: auto;
	padding: .65rem 1.35rem;
	border: 2px solid var(--l4u-blue);
	border-radius: var(--l4u-radius);
	background: var(--l4u-blue);
	color: var(--l4u-white);
	font-weight: 500;
	text-decoration: none;
}

.l4u-btn:hover,
.l4u-btn:focus-visible {
	background: var(--l4u-blue-dark);
	border-color: var(--l4u-blue-dark);
}

.l4u-btn--ghost {
	background: transparent;
	color: var(--l4u-blue);
}

.l4u-btn--ghost:hover,
.l4u-btn--ghost:focus-visible {
	background: var(--l4u-blue);
	color: var(--l4u-white);
}

/* About card --------------------------------------------------------------- */

.l4u-card {
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

.l4u-card--prose {
	max-width: 78ch;
	margin-inline: auto;
}

.l4u-card--prose p:last-child {
	margin-block-end: 0;
}

/* Featured categories ------------------------------------------------------ */

/* Same approach as the product grid: at most four per row, short rows centred. */
.l4u-cats {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(230px, 290px));
	justify-content: center;
	max-width: 1244px;
	margin-inline: auto;
}

@media (max-width: 699px) {
	.l4u-cats {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

.l4u-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
	padding: 1.25rem;
	text-align: center;
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
}

.l4u-cat img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.l4u-cat h3 {
	margin: 0;
	font-size: 1.05rem;
}

/* USP blocks --------------------------------------------------------------- */

.l4u-usps {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.l4u-usps {
		grid-template-columns: repeat(2, 1fr);
	}
}

.l4u-usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
}

.l4u-usp__icon {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--l4u-surface);
	color: var(--l4u-blue);
}

.l4u-usp h3 {
	margin: 0;
	font-size: 1.2rem;
}

.l4u-usp p {
	color: var(--l4u-muted);
	margin-block: .25rem 1rem;
}

/* Newsletter --------------------------------------------------------------- */

.l4u-newsletter {
	background: var(--l4u-blue);
	color: var(--l4u-white);
	padding-block: clamp(2rem, 5vw, 3.25rem);
}

.l4u-newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: center;
	justify-content: space-between;
}

.l4u-newsletter h2 {
	margin-block-end: .35rem;
}

.l4u-newsletter p {
	margin: 0;
	max-width: 46ch;
}

.l4u-newsletter__form {
	display: flex;
	flex: 1 1 20rem;
	max-width: 30rem;
}

.l4u-newsletter__form input {
	flex: 1;
	min-width: 0;
	padding: .9rem 1rem;
	border: 0;
	font: inherit;
}

.l4u-newsletter__form button {
	padding-inline: 1.75rem;
	border: 2px solid var(--l4u-white);
	background: transparent;
	color: var(--l4u-white);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.l4u-newsletter__form button:hover {
	background: var(--l4u-white);
	color: var(--l4u-blue);
}

/* Footer extras ------------------------------------------------------------ */

.l4u-ticks {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.l4u-ticks li {
	position: relative;
	padding-inline-start: 1.4rem;
	margin-block-end: .3rem;
}

.l4u-ticks li::before {
	content: "";
	position: absolute;
	inset-block-start: .55em;
	inset-inline-start: 0;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--l4u-blue);
}

.site-footer__payments-img {
	max-width: 20rem;
}