/* =============================================================
   Homesavers — Offers page (template-offers.php)
   Loads after site.css + homepage.css (shared product / newsletter /
   owl styling). This file styles the Offers-only sections.

   1.  Breadcrumb
   2.  Section rhythm + red/grey heading
   3.  Image placeholder
   4.  Feature cards (Reduced to Clear / deal cards)
   5.  Category carousel (red "Offers" tag tiles)
   6.  Rich text (article)
   7.  FAQ accordion
   8.  Responsive
   ============================================================= */

/* Figma uses pure black (#000000) for text on this page, not the grey/13 ink.
   Overriding the token here recolours every var(--hs-ink) use on the Offers page. */
.hs-offers { --hs-ink: #000000; }

/* 1. Breadcrumb — global (see site.css). ------------------------- */

/* 2. Section rhythm + heading ------------------------------------ */
/* Figma spaces major blocks ~100px apart; a standalone heading hugs the
   content directly beneath it (~24px). Margins live on the top-level
   sections only (direct children of the .hs-offers main). */
.hs-offers > .hs-section { margin-block: 0; }
/* Figma: breadcrumb (bottom y275) → "Latest Deals" heading (y317) = 42px. */
.hs-offers > .hs-section:first-of-type { margin-top: 42px; }
.hs-offers > .hs-section + .hs-section { margin-top: clamp(56px, 8vw, 100px); }
/* Figma: heading block's subtitle → following content (e.g. subtitle y404 →
   feature cards y452) = 48px. Applies to every heading→section pair. */
.hs-offers > .hs-heading + .hs-section { margin-top: 48px; }
.hs-offers > .hs-section:last-child { margin-bottom: clamp(56px, 8vw, 100px); }
/* Headings that live INSIDE a section (category carousel / FAQ). */
.hs-cat-carousel .hs-heading { margin-bottom: clamp(40px, 5.2vw, 68px); } /* Figma: subtitle y1836 → tiles y1904. */
.hs-faq .hs-heading { margin-bottom: 48px; } /* Figma: subtitle → first question ≈ 50px. */

.hs-heading { text-align: center; }
.hs-heading__title {
	font-family: 'poppinsbold', var(--hs-font);
	font-size: clamp(1.75rem, 4vw, 45px);
	line-height: 1.06;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hs-stores-red); /* Figma #dc2b38 */
	margin: 0;
}
.hs-heading__subtitle {
	margin: 24px 0 0; /* Figma: heading (y356) → subtitle (y380) = 24px. */
	/* Figma: Poppins SemiBold 20 / line-height 24, black. */
	font-family: var(--hs-font-semibold);
	font-size: 20px;
	line-height: 24px;
	color: var(--hs-ink); /* black */
}

/* 3. Image placeholder (used until real images are set) ---------- */
.hs-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background-color: var(--hs-bg-grey);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(0, 0, 0, .04),
		rgba(0, 0, 0, .04) 12px,
		rgba(0, 0, 0, .08) 12px,
		rgba(0, 0, 0, .08) 24px
	);
	border: 1px dashed var(--hs-input-border);
}

/* 4. Feature cards ----------------------------------------------- */
/* Figma gutters: 2-up = 18px, 3-up = 12px. */
.hs-feature-cards__grid { display: grid; }
.hs-feature-cards__grid--2 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.hs-feature-cards__grid--3 { grid-template-columns: repeat(3, 1fr); gap: 12px; }

.hs-feature-card { display: flex; flex-direction: column; height: 100%; }
/* Figma: full-bleed image, no border, no radius. */
.hs-feature-card__media {
	display: block;
	line-height: 0;
	overflow: hidden;
	background: #fff;
}
/* Figma image ratios: 2-up 555×375 (~3:2), 3-up 366×212 (~16:9). The 3-up
   box was shallower than the 660×402 guide banners, so object-fit: cover
   cropped them; 660/402 gives the full artwork and a taller card. */
.hs-feature-cards__grid--2 .hs-feature-card__media { aspect-ratio: 555 / 375; }
.hs-feature-cards__grid--3 .hs-feature-card__media { aspect-ratio: 660 / 402; }
.hs-feature-card__media img,
.hs-feature-card__media .hs-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hs-feature-card__title {
	font-family: var(--hs-font-semibold);
	font-size: 20px;
	line-height: 1.2;
	color: var(--hs-ink);
	margin: 0 0 10px; /* image → title set per layout below */
}
/* Figma: image bottom → title — 2-up 48px, 3-up 42px. */
.hs-feature-cards__grid--2 .hs-feature-card__title { margin-top: 48px; }
.hs-feature-cards__grid--3 .hs-feature-card__title { margin-top: 42px; }
/* Untitled cards (the banner carries the name) need that room on the
   description instead. */
.hs-feature-card__media + .hs-feature-card__desc { margin-top: 24px; }

.hs-feature-card__desc {
	font-family: var(--hs-font);
	color: var(--hs-ink);
	flex: 1 1 auto; /* grow so "Browse all" links bottom-align across the row */
}
/* Figma: description size differs by layout — 2-up 18/30, 3-up 16/25. */
.hs-feature-cards__grid--2 .hs-feature-card__desc { font-size: 18px; line-height: 30px; }
.hs-feature-cards__grid--3 .hs-feature-card__desc { font-size: 16px; line-height: 25px; }
.hs-feature-card__link {
	display: inline-block;
	align-self: flex-start;
	margin-top: 16px; /* Figma: min gap desc → link; link bottom-aligns via desc flex-grow */
	/* Figma: Poppins Bold 18, green #248c2e. */
	font-family: 'poppinsbold', var(--hs-font);
	font-size: 18px;
	line-height: 1.3;
	color: var(--hs-green);
	text-decoration: none;
}
.hs-feature-card__link:hover { text-decoration: underline; }

/* 5. Category carousel ------------------------------------------- */
/* Figma: full-bleed #f5f5f5 band (1920×504) with the heading + tiles inside.
   Vertical spacing comes from the section rhythm (100px above/below). */
.hs-offers .hs-cat-carousel { background: transparent; } /* grey lives on the band so the dots fall outside it */
.hs-offers .hs-cat-carousel__band {
	background: var(--hs-header-bg); /* #f5f5f5 */
	padding-block: clamp(36px, 4.2vw, 54px); /* Figma band: ~53px top / ~55px bottom. */
}
.hs-cat-carousel__track.is-static {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.hs-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px; /* Figma: tile image → label = 30px. */
	text-decoration: none;
	color: var(--hs-ink);
}
.hs-cat-tile__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;      /* Figma: 160×160 tile */
	overflow: hidden;
	display: block;
	line-height: 0;
	border-radius: 10px;      /* Figma: 10px corners */
}
.hs-cat-tile__media img,
.hs-cat-tile__media .hs-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Figma "Offers" badge — a red domed banner across the bottom of the tile
   (a wide ellipse clipped by the tile's rounded bottom edge), white text. */
.hs-cat-tile__tag {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--hs-font-semibold);
	font-size: clamp(18px, 2.2vw, 30px);
	line-height: 1;
	white-space: nowrap;
}
.hs-cat-tile__tag::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -44px;
	transform: translateX(-50%);
	width: 150%;
	height: 96px;
	border-radius: 50%;
	background: var(--hs-stores-red); /* #dc2b38 */
}
.hs-cat-tile__label {
	/* Figma: Poppins Bold 24, black, centered (wraps to 2 lines when long). */
	font-family: 'poppinsbold', var(--hs-font);
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.2;
	text-align: center;
	color: var(--hs-ink);
}

/* Carousel arrows / dots (match the homepage product slider) */
.hs-cat-carousel .owl-nav button.owl-prev,
.hs-cat-carousel .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 38px;
	padding: 0;
	background: var(--hs-header-bg);
	border: 1px solid var(--hs-line);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hs-cat-carousel .owl-nav button.owl-prev { left: -33px; }
.hs-cat-carousel .owl-nav button.owl-next { right: -33px; }
.hs-cat-carousel .owl-nav button svg { display: block; width: 9px; height: 14px; }
.hs-cat-carousel .owl-nav button.owl-prev svg { transform: rotate(180deg); }
.hs-cat-carousel .owl-nav button.disabled { opacity: .35; }
.hs-cat-carousel__dots.owl-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 30px; /* Figma: grey band → dots (below the band) = 30px. */
}
/* Figma dots: round, active brand red, inactive light grey — no box.
   Reset the Owl dot <button> so the browser's default grey box is gone. */
.hs-cat-carousel .owl-dots .owl-dot {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	line-height: 0;
	outline: none;
}
.hs-cat-carousel .owl-dots .owl-dot span {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 50%;
	background: var(--hs-dot);
}
.hs-cat-carousel .owl-dots .owl-dot.active span { background: var(--hs-dot-active); }

/* 5b. Product slider "Our top picks" — Offers-only overrides ------ */
/* The base product card lives in homepage.css and is shared with the front
   page, so these Figma-match tweaks are scoped to .hs-offers only. */
.hs-offers .hs-product-card__badge { display: none; } /* Figma top picks: no NEW badge. */
.hs-offers .hs-product-card { border: 0; padding: 0; } /* Figma: cards sit on white, no border/padding. */
.hs-offers .hs-product-card__price { margin-top: 24px; } /* Figma: product name → price = 24px. */
.hs-offers .hs-product-card__media img {
	aspect-ratio: auto;
	height: clamp(140px, 15vw, 220px); /* Figma: image height 220px. */
	object-fit: contain;
}
.hs-offers .hs-product-card__link { gap: clamp(32px, 3.8vw, 50px); } /* image → product name = 50px. */
.hs-offers .hs-product-card__title {
	font-size: 16px;        /* Figma: 16 / line-height 19.2. */
	line-height: 19.2px;
}
.hs-offers .hs-product-card__was {
	font-size: 20px;        /* Figma: WAS 20, green #248c2e. */
	color: var(--hs-green);
}
.hs-offers .hs-product-card__now {
	font-size: 36px;        /* Figma: NOW 36, red #dc2b38. */
	line-height: 1.1;
	color: var(--hs-stores-red);
}

/* 6. Rich text (article) ----------------------------------------- */
/* Top spacing comes from the `.hs-offers > .hs-section:first-of-type`
   rule above; this only adds the room below the copy. */
.hs-richtext { padding: 0 0 clamp(56px, 7vw, 90px); }

/* Heading-only rows act as a page title above another section: no body,
   so no body spacing, and the section under it sits as close as the
   titles on the Help, FAQ and Recalls pages do. */
.hs-richtext:not(:has(.hs-richtext__body)) { padding-bottom: 0; }
.hs-richtext:not(:has(.hs-richtext__body)) .hs-richtext__heading { margin-bottom: 0; }
.hs-offers > .hs-richtext:not(:has(.hs-richtext__body)) + .hs-section { margin-top: 36px; }
.hs-richtext__heading {
	font-family: 'poppinsbold', var(--hs-font);
	font-size: clamp(1.75rem, 3.5vw, 45px);
	line-height: 1.11; /* Figma: 50 / 45 */
	color: var(--hs-green); /* Figma #248c2e */
	margin: 0 0 40px; /* Figma: green heading → body ≈ 54px (2-line heading). */
}
.hs-richtext__body {
	/* Figma: Poppins Light 16 / line-height 24, black. */
	max-width: 860px;   /* readable measure — the full container runs far too wide for prose */
	font-family: 'poppinslight', var(--hs-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--hs-ink);
}
.hs-richtext__body p { margin: 0 0 24px; } /* Figma paragraph gap = one blank line (24px). */
.hs-richtext__body p:last-child { margin-bottom: 0; }
.hs-richtext__body a { color: var(--hs-green); }
.hs-richtext__body strong,
.hs-richtext__body b { font-family: var(--hs-font-semibold); font-weight: normal; }
.hs-richtext__body ul,
.hs-richtext__body ol { margin: 0 0 24px; padding-left: 1.3em; }
.hs-richtext__body li { margin: 0 0 10px; padding-left: 4px; }
.hs-richtext__body li:last-child { margin-bottom: 0; }
.hs-richtext__body li::marker { color: var(--hs-red); }

/* Sub-headings inside the body had no rules at all, so policy and guide
   pages fell back to the browser's defaults.

   Body headings are levelled on output so the top one is always h2 (see
   homesavers_normalise_headings), which is why the first two steps carry the
   sizes these pages have always shown — 20px red, then 17px ink — one level
   higher than they used to be written. */
.hs-richtext__body h2 {
	margin: 40px 0 14px;
	font-family: var(--hs-font-bold);
	font-size: 20px;
	line-height: 1.3;
	color: var(--hs-red);
}
.hs-richtext__body h3 {
	margin: 26px 0 10px;
	font-family: var(--hs-font-semibold);
	font-size: 17px;
	line-height: 1.35;
	color: var(--hs-ink);
}
.hs-richtext__body h4 {
	margin: 22px 0 8px;
	font-family: var(--hs-font-semibold);
	font-size: 16px;
	line-height: 1.35;
	color: var(--hs-ink);
}
.hs-richtext__body h2:first-child,
.hs-richtext__body h3:first-child { margin-top: 0; }
.hs-richtext__body h2 + p,
.hs-richtext__body h3 + p,
.hs-richtext__body h4 + p { margin-top: 0; }

/* "Last updated" line above a policy. */
.hs-richtext__body .hs-policy-updated {
	margin: 0 0 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hs-line);
	font-size: 14px;
	color: var(--hs-muted);
}
.hs-richtext__body .hs-policy-updated em { font-style: normal; }
.hs-richtext__body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--hs-line); }
/* Placeholders in draft policy copy: details only the client can supply.
   Deliberately loud so none of them reach a live page unnoticed. */
.hs-richtext__body .hs-todo {
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--hs-yellow);
	color: var(--hs-ink);
	font-family: var(--hs-font-semibold);
	font-size: 14px;
}

/* 7. FAQ accordion ----------------------------------------------- */
.hs-faq__list {
	/* Figma: questions span the full container width (not narrowed). */
	list-style: none;
	margin: 0;
	padding: 0;
}
.hs-faq__item { border-bottom: 0; } /* Figma: no divider under questions. */
.hs-faq__q {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 9px 0; /* Figma: ~40px-tall question rows. */
	text-align: left;
	font-family: 'poppinslight', var(--hs-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--hs-ink);
}
/* Figma: red circle with a white "+" (becomes "−" when open) on the left. */
.hs-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hs-stores-red);
}
.hs-faq__icon::before,
.hs-faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #fff;
	border-radius: 1px;
}
.hs-faq__icon::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.hs-faq__icon::after { width: 2px; height: 10px; transform: translate(-50%, -50%); transition: opacity .2s ease; }
.hs-faq__q[aria-expanded="true"] .hs-faq__icon::after { opacity: 0; }
.hs-faq__text { flex: 1 1 auto; }
.hs-faq__a-inner {
	padding: 0 0 18px 40px;
	font-family: var(--hs-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--hs-ink);
}
.hs-faq__a-inner p { margin: 0 0 .75em; }
.hs-faq__a-inner p:last-child { margin-bottom: 0; }

/* 8. Responsive -------------------------------------------------- */
@media (max-width: 900px) {
	.hs-feature-cards__grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	/* Feature cards stack; 30px gap between them; tighter image→title gap. */
	.hs-feature-cards__grid--2,
	.hs-feature-cards__grid--3 { grid-template-columns: 1fr; gap: 30px; }
	.hs-feature-cards__grid--2 .hs-feature-card__title,
	.hs-feature-cards__grid--3 .hs-feature-card__title { margin-top: 20px; }
	.hs-feature-cards__grid--2 .hs-feature-card__desc { font-size: 16px; line-height: 26px; }

	/* Main section headings: 30px on mobile (site-wide rule, see homepage/garden). */
	.hs-heading__title { font-size: 30px; }

	/* Category-carousel arrows sit half over the items (like the product slider),
	   so they stay on-screen instead of the -33px desktop offset. */
	.hs-cat-carousel .owl-nav button.owl-prev { left: -14px; }
	.hs-cat-carousel .owl-nav button.owl-next { right: -14px; }

	.hs-offers > .hs-section + .hs-section { margin-top: 56px; }
	.hs-offers > .hs-heading + .hs-section { margin-top: 20px; }
	.hs-offers > .hs-section:last-child { margin-bottom: 56px; }
	.hs-faq .hs-heading { margin-bottom: 30px; }

	/* Top-picks product cards: the Figma desktop price (WAS 20 / NOW 36) + 50px
	   image→title gap are too large on phones — scale them down. */
	.hs-offers .hs-product-card__link { gap: 20px; }
	.hs-offers .hs-product-card__price { margin-top: 16px; }
	.hs-offers .hs-product-card__was { font-size: 14px; }
	.hs-offers .hs-product-card__now { font-size: 22px; }
}

/* The newsletter used to be the last child inside this main and absorbed the
   trailing margin below. It now renders after </main>, so the last content
   section inherits that margin and it stacks with the newsletter's own —
   ~200px above the block versus ~100px below. The newsletter owns that gap now. */
.hs-offers > .hs-section:last-child { margin-bottom: 0; }
.hs-offers > .hs-richtext:last-child { padding-bottom: 0; }

/* An anchored section must not land under the sticky header when linked to
   directly (the footer sends Suppliers / Landlords / Photo Gallery /
   Anti-Modern Slavery to sections within the About page). */
.hs-section[id] { scroll-margin-top: 110px; }
@media (max-width: 782px) {
	.hs-section[id] { scroll-margin-top: 80px; }
}

/* Photo gallery inside a rich-text section. */
.hs-richtext__body .hs-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.hs-richtext__body .hs-gallery li { margin: 0; }
.hs-richtext__body .hs-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hs-radius, 8px);
}

/* Call-to-action link inside rich-text content (the Careers page uses one to
   send people to the live vacancies list). */
.hs-richtext__body a.hs-btn,
.hs-richtext__body a.hs-btn:link,
.hs-richtext__body a.hs-btn:visited {
	display: inline-block;
	padding: 12px 28px;
	background: var(--hs-green);
	color: #fff;
	border-radius: 999px;
	font-family: var(--hs-font-bold);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
}
.hs-richtext__body a.hs-btn:hover,
.hs-richtext__body a.hs-btn:focus-visible { background: #1d7526; color: #fff; }