/* =============================================================
   Homesavers — Dynamic Homepage stylesheet
   Pure CSS (Grid/Flexbox). No frameworks. Images are real <img>
   elements, never CSS backgrounds.

   TABLE OF CONTENTS
   1.  Design tokens
   2.  Layout primitives (container, section, headings)
   3.  Global promo bar
   4.  Hero slider
   5.  Promo grid
   6.  Deal of the week
   7.  Mini promo strip
   8.  Product card + product slider
   9.  Newsletter
   10. Info blocks
   11. Footer (columns + social)
   12. Owl Carousel tweaks
   ============================================================= */

/* 1. Design tokens ------------------------------------------------ */
/* Tokens (--hs-*) and .hs-container live in site.css (loaded site-wide).
   Provide the bold-alias this file uses so it works even if site.css is
   swapped out. */
.hs-home {
	--hs-font-bold: 'poppinssemibold', var(--hs-font);
}

.hs-home img.hs-img,
.hs-home .hs-product-card img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* 2. Layout primitives ------------------------------------------- */
.hs-container {
	width: 100%;
	max-width: var(--hs-max);
	margin-inline: auto;
	padding-inline: var(--hs-gap);
}

.hs-section {
	margin-block: 0;
}

.hs-section__title {
	font-family: 'poppinsbold', var(--hs-font);
	font-size: clamp(1.5rem, 2.4vw, 2rem); /* up to 2rem (32px) */
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin: 0 0 var(--hs-gap);
	color: var(--hs-red);
}

/* Slider heads: title centered with the View All link centered beneath it. */
.hs-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 35px; /* View All → product track gap */
}

.hs-section__head .hs-section__title {
	margin: 0;
}

.hs-section__view-all {
	font-family: 'poppinsbold', var(--hs-font);
	font-size: .9rem;
	color: var(--hs-ink);
	text-decoration: underline;
	white-space: nowrap;
}

/* Product sliders (New Arrivals / Top Trending) — 24px top/bottom margin. */
.hs-product-slider {
	margin-block: 24px;
}
/* Top Trending bottom gap 25px. */
.hs-product-slider--trending {
	margin-bottom: 25px;
}

.hs-empty {
	max-width: var(--hs-max);
	margin: 40px auto;
	padding: 0 var(--hs-gap);
}

/* 3. Global promo bar → see site.css */

/* 4. Hero slider -------------------------------------------------- */
.hs-hero {
	margin: 0 0 24px; /* bottom gap 24px */
}
.hs-hero__track { position: relative; }

/* Dots — Figma "Tablist": translucent white box, 8x8 dots, 8px gap,
   Homesavers brand red active, light grey inactive, bottom-left. */
.hs-hero .owl-dots {
	position: absolute;
	left: 0;
	bottom: -1px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	margin: 0;
	background: rgba(255, 255, 255, .5);
}
.hs-hero .owl-dots .owl-dot { display: inline-flex; }
.hs-hero .owl-dots .owl-dot span {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 4px;
	background: var(--hs-dot);
}
.hs-hero .owl-dots .owl-dot.active span { background: var(--hs-dot-active); }

.hs-hero__track.is-static .hs-hero__slide:not(:first-child) {
	display: none; /* single slide: only the first is shown, no JS needed */
}

.hs-hero__slide {
	position: relative;
}

.hs-hero__slide-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hs-hero__picture,
.hs-hero__picture img {
	display: block;
	width: 100%;
	height: auto;
}


.hs-hero__cta {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 4vw, 40px);
	transform: translateX(-50%);
	background: var(--hs-red);
	color: #fff;
	font-family: var(--hs-font-bold);
	padding: 10px 26px;
	border-radius: 999px;
	font-size: clamp(.85rem, 1.6vw, 1rem);
	white-space: nowrap;
}

/* Intro / tagline text ------------------------------------------- */
.hs-intro-text { margin-block: 24px; }
/* The rule runs full-width (edge to edge), not just inside the container. */
.hs-intro-text > .hs-container {
	max-width: none;
	padding-inline: 0;
}
/* Centered text with a full-width #E0E0E0 rule through its middle,
   left and right of the text (Figma). */
.hs-intro-text__copy {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	color: var(--hs-ink);
	font-size: clamp(1rem, 1.8vw, 1.15rem);
	font-family: var(--hs-font-bold);
}
.hs-intro-text__copy::before,
.hs-intro-text__copy::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--hs-line);
}

/* 5. Promo grid --------------------------------------------------- */
.hs-promo-grid__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 8px;
}

.hs-promo-grid__tile {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: 0;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

/* Figma promo tiles are self-contained banner images — no caption. */
.hs-promo-grid__label {
	display: none;
}

.hs-promo-grid__tile:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}

.hs-promo-grid__media img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.hs-promo-grid__label {
	font-family: var(--hs-font-bold);
	text-align: center;
	padding: 12px 10px;
	font-size: .95rem;
}

/* 6. Deal of the week -------------------------------------------- */
.hs-deal { margin-bottom: 24px; }
.hs-deal__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	align-items: start;
}

.hs-deal__feature img {
	border-radius: 0;
}

.hs-deal__products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hs-gap);
}

/* 7. Mini promo strip -------------------------------------------- */
.hs-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

.hs-strip__item {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .2s ease;
}

.hs-strip__item:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.hs-strip__media img {
	height: 214px;
	width: 100%;
	object-fit: cover;
}

/* Name removed per design. */
.hs-strip__label {
	display: none;
}

/* 8. Product card + slider --------------------------------------- */
.hs-product-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--hs-line); /* full border around the box */
	border-radius: 0;
	padding: 16px 36px 24px;
	display: flex;
	flex-direction: column;
	text-align: center;
	height: 100%;
}

/* NEW badge — Figma graphic, top-right. */
.hs-product-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 48px;
	height: 48px;
	line-height: 0;
}
.hs-product-card__badge img { width: 48px; height: 48px; display: block; }

.hs-product-card__link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 16px; /* image ↔ product name gap */
}

.hs-product-card__media img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.hs-product-card__title {
	font-family: var(--hs-font);
	font-size: .9rem;
	line-height: 1.3;
	min-height: 2.6em; /* reserve 2 lines so all prices align on one row */
	color: var(--hs-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hs-product-card__price {
	margin-top: 50px; /* product name ↔ price gap */
	font-family: var(--hs-font-bold);
	color: var(--hs-green);
	font-size: 20px;
	line-height: 1.2;
}

/* Sale format: "WAS £x" (over) + "NOW £y" (red). */
.hs-product-card__price--sale {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hs-product-card__was {
	font-family: var(--hs-font-semibold);
	font-size: 12px;
}
.hs-product-card__now {
	font-size: 20px;
	color: #e51f02; /* Figma sale-red */
}

.hs-product-card .button,
.hs-product-card .added_to_cart {
	display: inline-block;
	margin-top: auto;
	background: var(--hs-red);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 8px 18px;
	font-family: var(--hs-font-bold);
	font-size: .85rem;
	text-decoration: none;
	cursor: pointer;
}

.hs-product-card .added_to_cart {
	background: var(--hs-ink);
}

/* Figma product cards have no add-to-cart button. */
.hs-product-card .button,
.hs-product-card .added_to_cart { display: none; }

/* New Arrivals (manual source) prices use brand red; Top Trending stays green.
   (The NOW price keeps its own sale red.) */
.hs-product-slider--manual .hs-product-card__price { color: var(--hs-red); }

/* Static (single item) fallback — centre it at normal card width, don't stretch. */
.hs-product-slider__track.is-static {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}
.hs-product-slider__track.is-static .hs-product-card {
	flex: 0 0 252px;
	max-width: 100%;
}

/* "You may also like" (max 4 products): when there are fewer than the 4-per-row,
   centre them on desktop instead of left-aligning (keeps normal card width). */
@media (min-width: 992px) {
	.hs-product__related .owl-stage-outer { display: flex; justify-content: center; }
}

/* 9. Newsletter (Sign up) — Figma: #f5f5f5 bar, phone + green heading +
   yellow SIGN UP button on the left, black-circle social icons on the right. */
.hs-newsletter { margin-block: 24px; }
.hs-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: nowrap; /* keep the social row on the right, not broken to a new line */
	background: var(--hs-header-bg); /* #f5f5f5 */
	padding: 16px;
}

.hs-newsletter__left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hs-newsletter__media { flex: 0 0 auto; width: 102px; height: 102px; }
.hs-newsletter__media img { width: 102px; height: 102px; object-fit: contain; }

/* Wrapper around title + SIGN UP. Transparent on desktop (media | title | btn
   stay in one row); becomes a column beside the icon on mobile. */
.hs-newsletter__copy { display: contents; }

.hs-newsletter__title {
	margin: 0;
	padding: 0 14px 0 0; /* padding-left 0 */
	max-width: 270px; /* wraps to ~3 balanced lines, keeps social on the right */
	text-wrap: balance;
	color: var(--hs-green); /* #248c2e */
	font-family: var(--hs-font-semibold);
	font-size: 20px;
	line-height: 24px;
	text-align: center;
}

/* :visited/:hover states included so the theme's link colour can't override black. */
.hs-newsletter__btn,
.hs-newsletter__btn:link,
.hs-newsletter__btn:visited,
.hs-newsletter__btn:hover,
.hs-newsletter__btn:focus {
	flex: 0 0 auto;
	background: var(--hs-yellow); /* #fede00 */
	color: #000; /* black text */
	padding: 7px 13px;
	border-radius: 4px;
	font-family: var(--hs-font-semibold);
	font-size: 16px;
	line-height: 24px;
	text-decoration: underline;
	white-space: nowrap;
}

.hs-newsletter__social {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.hs-newsletter__social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hs-ink); /* #212121 */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, transform .2s ease;
}
.hs-newsletter__social a:hover,
.hs-newsletter__social a:focus-visible {
	background: var(--hs-red); /* brand red on hover */
}
.hs-newsletter__social img {
	width: 18px;
	height: 18px;
	object-fit: contain; /* SVGs are already white-filled */
}

/* 10. Info blocks — Figma: 3 columns, grey image area + red title + description. */
.hs-info-blocks { margin-block: 24px; }
.hs-info-blocks__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.hs-info-block {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: inherit;
}

/* Images (with the title baked in) run full-width; the separate red title is removed. */
.hs-info-block__media { line-height: 0; }
.hs-info-block__media img { width: 100%; height: auto; display: block; }

.hs-info-block__desc {
	color: var(--hs-ink);
	font-family: 'poppinslight', var(--hs-font);
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

/* 11. Footer → see site.css */

/* 12. Owl Carousel tweaks ---------------------------------------- */
.hs-owl.owl-carousel .owl-item img {
	width: 100%;
}

.hs-product-slider .owl-nav button.owl-prev,
.hs-product-slider .owl-nav button.owl-next {
	position: absolute;
	top: 50%; /* vertical centre of the slider */
	transform: translateY(-50%);
	width: 28px;
	height: 38px;
	padding: 0;
	background: var(--hs-header-bg); /* #f5f5f5 */
	border: 0;
	border: 1px solid var(--hs-line); /* #e0e0e0 */
	border-radius: 4;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 28px arrow + 5px gap outside each end card. */
.hs-product-slider .owl-nav button.owl-prev { left: -33px; }
.hs-product-slider .owl-nav button.owl-next { right: -33px; }
.hs-product-slider .owl-nav button svg { display: block; width: 9px; height: 14px; }
.hs-product-slider .owl-nav button.owl-prev svg { transform: rotate(180deg); }

.hs-product-slider .owl-nav button.disabled { opacity: .35; }

/* Equal-height product cards across the slider. */
.hs-product-slider .owl-stage { display: flex; }
.hs-product-slider .owl-item { display: flex; }
.hs-product-slider .owl-item .hs-product-card { width: 100%; }
/* Keep the first/last card's border from being clipped by owl's overflow when
   sliding to the last/first page. overflow:clip + overflow-clip-margin lets the
   1px border paint past the edge WITHOUT resizing the stage (owl's item-width
   math stays correct) and WITHOUT revealing the neighbouring slide (the item gap
   is far wider than this margin). */
.hs-product-slider .owl-stage-outer { overflow: clip; overflow-clip-margin: 6px; }
.hs-product-slider__track.is-static { align-items: stretch; }

/* Product-slider dots — brand red active + light grey inactive, centred below. */
.hs-product-slider .owl-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}
.hs-product-slider .owl-dots .owl-dot span {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 4px;
	background: var(--hs-dot);
}
.hs-product-slider .owl-dots .owl-dot.active span { background: var(--hs-dot-active); }

/* Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
	.hs-deal__layout {
		grid-template-columns: 1fr;
	}
	.hs-info-blocks__grid {
		grid-template-columns: 1fr;
	}
	.hs-strip__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	/* Promo grid: one banner per row. */
	.hs-promo-grid__grid {
		grid-template-columns: 1fr;
	}
	.hs-strip__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.hs-deal__products {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tighter section heading → track gap on mobile. */
	.hs-section__head { margin-bottom: 15px; }

	/* Main section titles: 1.875rem (30px) on mobile (site-wide rule). */
	.hs-section__title { font-size: 1.875rem; }

	/* Info blocks: 20px gap between stacked blocks. */
	.hs-info-blocks__grid { gap: 20px; }

	/* Intro tagline: clean centered text (drop the decorative side rules). */
	.hs-intro-text__copy { display: block; text-align: center; }
	.hs-intro-text__copy::before,
	.hs-intro-text__copy::after { display: none; }

	/* Product slider: 15px item gap is set via Owl `margin` in homepage.js; the
	   prev/next arrows sit half over the item edges so they stay reachable, and
	   ride up over the IMAGE (not the title) since the card is tall on mobile. */
	.hs-product-slider .owl-nav button.owl-prev { left: -14px; }
	.hs-product-slider .owl-nav button.owl-next { right: -14px; }
	.hs-product-slider .owl-nav button.owl-prev,
	.hs-product-slider .owl-nav button.owl-next { top: 50%; }

	/* Tighter title→price gap + smaller price on mobile. */
	.hs-product-card__price { margin-top: 18px; font-size: 18px; }
	.hs-product-card__now { font-size: 18px; }

}

/* Newsletter goes mobile (icon + [heading over SIGN UP] column, full-width
   social icons) on tablet + phone, all the way up to 1024px. */
@media (max-width: 1024px) {
	.hs-newsletter__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.hs-newsletter__left {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}
	.hs-newsletter__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.hs-newsletter__title {
		text-align: center;
		padding: 0;
		max-width: 320px; /* phones: wrap to 3 lines (offers / to / inbox) */
		margin-inline: auto;
		text-wrap: wrap; /* greedy wrap, not balanced, for the desired breaks */
	}
	.hs-newsletter__social {
		width: 100%;
		justify-content: center;
	}
}

/* Phones: keep the icon on the LEFT, but slim the icon + title a touch so the
   copy still fits 3 lines beside it (offers / to / inbox). */
@media (max-width: 600px) {
	.hs-newsletter__media,
	.hs-newsletter__media img { width: 72px; height: 72px; }
	.hs-newsletter__title { font-size: 15px; line-height: 20px; max-width: 265px; }
}

/* The newsletter renders immediately after </main> on every page
   (inc/newsletter-global.php), so it owns the whole gap between page content
   and footer — equal above and below. Overrides the 24px above; must live here
   rather than site.css because homepage.css loads later and the selectors tie
   on specificity. */
.hs-newsletter { margin-block: clamp(48px, 6vw, 72px); }

/* .hs-footer carries margin-top:100px. As adjacent siblings those margins
   collapse to the larger, which reopened the asymmetry (~72px above vs 100px
   below). Let the newsletter's own margin supply the gap. */
.hs-newsletter + .hs-footer { margin-top: 0; }

/* --- Newsletter sign-up form -----------------------------------------
   The SIGN UP control used to be a dead link; it is now a real form
   (mu-plugins/hs-submissions.php stores the address). */
.hs-newsletter__form { margin: 0; }

.hs-newsletter__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--hs-input-border, #ccc);
	border-radius: var(--hs-radius, 8px);
	font-family: var(--hs-font);
	font-size: 15px;
	line-height: 1.2;
	color: var(--hs-ink);
	background: #fff;
}
.hs-newsletter__input:focus-visible { outline: none; border-color: var(--hs-green); }
.hs-newsletter__input::placeholder { color: var(--hs-muted); opacity: 1; }

.hs-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--hs-ink);
	cursor: pointer;
}
.hs-newsletter__consent input { margin: 2px 0 0; flex: 0 0 auto; }

.hs-newsletter__msg {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hs-green);
}
.hs-newsletter__msg.is-error { color: var(--hs-red); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hs-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 560px) {
	.hs-newsletter__btn { width: 100%; text-align: center; }
}

/* The SIGN UP control is a <button> now, not an <a>. The rules above were
   written with link states and inherit nothing useful from the UA button
   style, so reset the parts a button brings with it. */
button.hs-newsletter__btn {
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
button.hs-newsletter__btn:disabled { opacity: .6; cursor: default; }
button.hs-newsletter__btn:hover:not(:disabled),
button.hs-newsletter__btn:focus-visible { filter: brightness(.95); }

/* --- Newsletter lightbox ---------------------------------------------
   The dialog opens on :target so it still works with JavaScript off; the
   .is-open class is what js/newsletter.js drives. */
.hs-nlmodal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.hs-nlmodal:target,
.hs-nlmodal.is-open { display: flex; }

body.hs-nlmodal-open { overflow: hidden; }

.hs-nlmodal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	display: block;
}

.hs-nlmodal__panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--hs-radius, 10px);
	padding: clamp(24px, 4vw, 34px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

.hs-nlmodal__close,
.hs-nlmodal__close:link,
.hs-nlmodal__close:visited {
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 30px;
	line-height: 1;
	color: var(--hs-muted);
	text-decoration: none;
}
.hs-nlmodal__close:hover,
.hs-nlmodal__close:focus-visible { color: var(--hs-ink); }

.hs-nlmodal__title {
	margin: 0 0 8px;
	font-family: var(--hs-font-bold);
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.2;
	color: var(--hs-green);
}
.hs-nlmodal__intro {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--hs-ink);
}

.hs-nlmodal .hs-newsletter__input { width: 100%; }

.hs-nlmodal__submit { width: 100%; margin-top: 14px; text-align: center; }