/**
 * Home page — code-built replacement for the Bricks home page.
 *
 * Every value here was read off the LIVE page's computed styles at 1440x900 and
 * 390x844, not copied from Bricks' authored rules — because several of Bricks'
 * authored rules are broken and the broken result is what visitors see. The
 * three that matter are called out at their rules below (search "LIVE QUIRK").
 *
 * SCOPING: everything is under .cwpr-home (our <main>) or body.cwpr-page-home,
 * so nothing here can reach the other three pages in this plugin.
 *
 * ONE THING TO KNOW BEFORE EDITING: html font-size on this site is 10px, so
 * 1rem = 10px, not 16px. Live's authored rules lean on that (2.5rem gaps are
 * 25px, not 40px). Values below are already resolved to px to keep that trap
 * out of the file.
 *
 * @package cw-page-rebuild
 */

/* ---------------------------------------------------------------------------
 * 0. Page-level
 *
 * LIVE QUIRK: the font stack, page background and 20px top/bottom band are not
 * theme settings — they leak out of a `body { ... }` rule inside the category
 * carousel's code block, which was pasted in with its demo-page chrome still
 * attached ("Demo page chrome only - delete when copying into your site"). It
 * has been restyling the entire live site ever since. Reproduced because it is
 * highly visible: it is the grey behind the product carousel, the promo tiles
 * and the marquee, and it is why the header sits 20px down the page.
 *
 * Scoped to the body class so it cannot reach the other rebuilt pages.
 * ------------------------------------------------------------------------- */
body.cwpr-page-home {
	margin: 0;
	padding: 20px 0;
	max-width: 100%;
	overflow-x: hidden;
	background: #f7f7f8;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #363636;
}

.cwpr-home {
	position: relative;
	width: 100%;
}

.cwpr-home *,
.cwpr-home *::before,
.cwpr-home *::after {
	box-sizing: border-box;
}

.cwpr-home img {
	max-width: 100%;
}

/* Bricks' <section>/<container> defaults, which our sections stand in for:
   a full-width, centred, vertical flex column. */
.cwpr-home > section {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * 1. Hero slider  [was brxe-sadnct / Smart Slider 3, slider #2]
 *
 * Live's slider is declared 2560x867 and set to "fullwidth", so its height is
 * always viewport-width / (2560/867). aspect-ratio reproduces that exactly at
 * every width without JS, which is also why there is no layout shift here.
 *
 * Live's is 15px wider than the page (it force-overflows to the viewport, under
 * the scrollbar, and the excess is clipped by overflow-x: hidden). Ours stops at
 * the page width — a 15px difference in what is cropped off a full-bleed banner,
 * invisible in practice, and it avoids the horizontal-scroll trap.
 * ------------------------------------------------------------------------- */
/*
 * Hero slider CSS (.cwpr-hero*) moved to assets/css/hero-slider.css 2026-08-28
 * — the same component now also serves My Family Rewards and Support My
 * School, so it lives in its own file, enqueued as a dependency wherever
 * cw_render_hero_slider() is called (inc/routing.php). .cwpr-home__hero is
 * this page's own thin wrapper class and stays here.
 */
.cwpr-home__hero {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * 2. JiM Extreme product carousel  [was brxe-luvdnc]
 *
 * A port of live's own carousel CSS, with two changes and no others:
 *   - #cwpc-<uniqid> becomes the stable #cwpr-home-pc (same specificity, which
 *     is the point — several of these rules exist to beat the theme's .products
 *     and .button styling and would lose as plain classes);
 *   - .cw-pc* becomes .cwpr-pc*.
 *
 * CARD INTERIORS: as of 2026-08-24 each slide is .cwsg-card - the shop's own
 * card component (cwsg_render_card(), inc/shop-grid-render.php), not stock
 * WooCommerce loop markup with a skin over it (that was the 2026-08-19
 * approach; it drifted from the shop's actual behaviour, which is why this
 * changed - see templates/home.php). So this section only sizes the SLOT
 * each card sits in (.cwpr-pc__item, the flex-basis math below) - the card's
 * own look and interactions are shop-simple-grid.css's job entirely, enqueued
 * as a dependency of this file (inc/routing.php) so it always loads first.
 * ------------------------------------------------------------------------- */
.cwpr-home__pc {
	padding: 10px 20px 0;
}

#cwpr-home-pc {
	width: 100%;
}

#cwpr-home-pc .cwpr-pc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 14px;
	flex-wrap: wrap;
}

#cwpr-home-pc .cwpr-pc__title {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	color: #1f2937;
}

#cwpr-home-pc .cwpr-pc__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

#cwpr-home-pc .cwpr-pc__viewall {
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #16a34a;
	white-space: nowrap;
}

#cwpr-home-pc .cwpr-pc__viewall:hover {
	text-decoration: underline;
}

#cwpr-home-pc .cwpr-pc__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #16a34a;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#cwpr-home-pc .cwpr-pc__arrow:hover {
	background: #16a34a;
	color: #fff;
}

#cwpr-home-pc .cwpr-pc__arrow.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* The track is a real horizontal scroller with snap points, so the arrows are
   an affordance rather than the mechanism — swipe and keyboard scroll work with
   no JS at all. */
#cwpr-home-pc .cwpr-pc__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 16px;
	margin: 0 !important;
	padding: 4px 2px 18px !important;
	list-style: none !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#cwpr-home-pc .cwpr-pc__track::-webkit-scrollbar {
	display: none;
}

#cwpr-home-pc .cwpr-pc__track::before,
#cwpr-home-pc .cwpr-pc__track::after {
	content: none !important;
	display: none !important;
}

/* Each card is one slide: 6 across desktop, 4 at tablet, 2 on phones. */
#cwpr-home-pc .cwpr-pc__track .cwpr-pc__item {
	flex: 0 0 calc((100% - 5 * 16px) / 6) !important;
	width: calc((100% - 5 * 16px) / 6) !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

@media (max-width: 1099px) {
	#cwpr-home-pc .cwpr-pc__track .cwpr-pc__item {
		flex-basis: calc((100% - 3 * 16px) / 4) !important;
		width: calc((100% - 3 * 16px) / 4) !important;
	}
}

@media (max-width: 767px) {
	#cwpr-home-pc .cwpr-pc__track {
		gap: 10px;
	}

	#cwpr-home-pc .cwpr-pc__track .cwpr-pc__item {
		flex-basis: calc((100% - 2 * 10px) / 2) !important;
		width: calc((100% - 2 * 10px) / 2) !important;
	}

	/* Swipe replaces the arrows on touch. */
	#cwpr-home-pc .cwpr-pc__arrow {
		display: none;
	}
}

/* Bricks' mobile-portrait breakpoint, where live tightens the outer gutter. */
@media (max-width: 478px) {
	.cwpr-home__pc {
		padding: 10px 10px 0;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Three promo tiles  [was brxe-cyhnxq]
 *
 * The 30px below comes from the Bricks code element's own margin-bottom, not
 * from the tile grid, which is why it sits on the wrapper.
 * ------------------------------------------------------------------------- */
.cwpr-home__promo-inner {
	width: 100%;
	margin-bottom: 30px;
}

.cwpr-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	padding: 40px 0;
}

.cwpr-tiles a {
	flex: 0 1 calc((100% - 48px) / 3);
	aspect-ratio: 5 / 3;
	overflow: hidden;
	border-radius: 12px;
	display: block;
}

.cwpr-tiles img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.cwpr-tiles a:hover img {
	transform: scale(1.05);
}

@media (max-width: 768px) {
	.cwpr-tiles {
		gap: 16px;
	}

	/* One tile per row, 80% wide and capped, in a wider crop. */
	.cwpr-tiles a {
		flex: 0 1 80%;
		max-width: 340px;
		aspect-ratio: 16 / 9;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Category marquee  [was brxe-dyyftg]
 *
 * LIVE QUIRK: that one Bricks code element contains TWO complete and competing
 * copies of this carousel's CSS and JS (an earlier and a later attempt, both
 * left in). What visitors actually get is the later CSS plus the first script's
 * inline `gap` and the second script's requestAnimationFrame ticker. The values
 * below are that resolved outcome:
 *   - 150px tiles (later CSS) rather than 140px-tall images (earlier CSS);
 *   - a 25px gap at EVERY width, because the earlier script sets gap: 2.5rem
 *     inline and inline beats the later CSS's mobile 24px/16px rules;
 *   - the edge fade, hover scale and 12px radius, which only the earlier CSS
 *     declares and nothing overrides;
 *   - a 75s loop, from the later script.
 * ------------------------------------------------------------------------- */
.cwpr-home__cats {
	margin: 30px 0;
}

.cwpr-cats {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 30px 0;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	/* Vertical page scroll passes through; horizontal drag is handled in JS. */
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}

.cwpr-cats.is-dragging {
	cursor: grabbing;
}

.cwpr-cats__track {
	display: inline-flex;
	align-items: center;
	gap: 25px;
	min-width: max-content;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	will-change: transform;
	/* CSS-only fallback for the no-JS case; the ticker turns it off. */
	animation: cwpr-cats-scroll 75s linear infinite;
}

/* Once the JS ticker owns the transform, the keyframes must not fight it. */
.cwpr-cats.is-ticking .cwpr-cats__track {
	animation: none !important;
}

.cwpr-cats:hover .cwpr-cats__track {
	animation-play-state: paused;
}

@keyframes cwpr-cats-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	/* Half the track, because the tiles are duplicated. */
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.cwpr-cats__item {
	flex: 0 0 auto;
	display: block;
	width: 150px;
	height: 150px;
	line-height: 0;
	text-decoration: none;
	border-radius: 12px;
	position: relative;
	z-index: 1;
	transition: transform 0.2s ease;
	outline-offset: 4px;
	touch-action: pan-y;
}

.cwpr-cats__item:hover,
.cwpr-cats__item:focus-visible {
	transform: scale(1.06);
}

/* Pointer events land on the <a>, never on the image, so a tap after a drag
   cannot be swallowed by the child. */
.cwpr-cats__item * {
	pointer-events: none;
}

.cwpr-cats__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

@media (max-width: 768px) {
	.cwpr-cats__item {
		width: 100px;
		height: 100px;
	}
}

@media (max-width: 380px) {
	.cwpr-cats__item {
		width: 90px;
		height: 90px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwpr-cats__track {
		animation: none;
		transform: none;
	}

	.cwpr-cats {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.cwpr-cats__item {
		scroll-snap-align: start;
	}
}

/* ---------------------------------------------------------------------------
 * 5. The dead-slider spacer  [was brxe-fgywwv]
 *
 * 100px of nothing: live's deleted Smart Slider shortcode still carries its
 * 20px padding and 30px margins. See the note in home.php for why this is here
 * rather than deleted.
 * ------------------------------------------------------------------------- */
.cwpr-home__gap-inner {
	width: 1100px;
	max-width: 100%;
	padding: 20px 0;
	margin: 30px 0;
}

/* ---------------------------------------------------------------------------
 * 6. Testimonial slider  [was brxe-cklkgn / brxe-daocyt]
 * ------------------------------------------------------------------------- */
.cwpr-home__quotes {
	padding-top: 20px;
	background-color: #fff;
}

.cwpr-home__quotes-heading {
	margin-top: 20px;
}

.cwpr-home__quotes-heading h2 {
	margin: 0;
	font-size: 31.5px;
	line-height: 1.4;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 478px) {
	.cwpr-home__quotes-heading {
		padding: 0 15px;
		color: #52575a;
	}
}

.cwpr-quotes {
	position: relative;
	width: 100%;
	background-color: #fff;
}

.cwpr-quotes__viewport {
	overflow: hidden;
	width: 100%;
}

.cwpr-quotes__track {
	display: flex;
	/* Matches Bricks' Swiper speed for this element (300ms, default easing). */
	transition: transform 300ms ease;
	will-change: transform;
}

/* Used for the seamless wrap in either direction. */
.cwpr-quotes.is-snapping .cwpr-quotes__track {
	transition: none;
}

.cwpr-quotes__slide {
	flex: 0 0 100%;
	width: 100%;
	/* 50vh, straight from Bricks' slider default — so the card height tracks the
	   viewport, exactly as live does. */
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
}

.cwpr-quotes__card {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 30px 60px;
	background-color: #fff;
}

.cwpr-quotes__text {
	font-size: 1.6em;
	line-height: 1.7;
	color: #2d3748;
}

.cwpr-quotes__text p {
	margin: 0 0 1.2em;
	font-size: inherit;
	line-height: inherit;
}

/*
 * LIVE QUIRK, kept: an invisible button. Live renders a Bricks button labelled
 * "Click me" with no link, and a global rule hides it with visibility (not
 * display), so it still reserves 41px plus a 15px top margin inside every card.
 * Dropping it would make all eight cards 56px shorter than live's.
 */
.cwpr-quotes__ghost-btn {
	visibility: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 1em;
	padding: 0.5em 1em;
	background-color: #fff;
	text-align: center;
}

/*
 * Arrows sit flush to the slider's outer edges: live insets them 50px and then
 * translates them a full width back out again, which nets to 0.
 */
.cwpr-quotes__nav {
	position: absolute;
	top: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: #52575a;
	font-size: 40px;
	font-weight: 100;
	line-height: 0;
	text-align: center;
	cursor: pointer;
	outline: none;
	z-index: 1;
}

.cwpr-quotes__nav--prev {
	left: 50px;
	transform: translate(-100%, -50%);
}

.cwpr-quotes__nav--next {
	right: 50px;
	transform: translate(100%, -50%);
}

/* ---------------------------------------------------------------------------
 * 7. Support-a-school popup  [was brxe-jpdida]
 *
 * display: none until JS opens it, so it costs nothing on first paint; the
 * opacity/visibility pair is what animates.
 * ------------------------------------------------------------------------- */
.cwpr-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	z-index: 9999;
	box-sizing: border-box;
}

.cwpr-popup.is-open {
	display: flex;
}

.cwpr-popup.is-visible {
	opacity: 1;
	visibility: visible;
}

.cwpr-popup__box {
	position: relative;
	width: 100%;
	max-width: 800px;
	border-radius: 10px;
	overflow: hidden;
}

.cwpr-popup__box img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

.cwpr-popup__close {
	position: absolute;
	top: 10px;
	right: 15px;
	padding: 0 10px;
	border: 0;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.2;
	cursor: pointer;
	z-index: 10;
}

@media (max-width: 480px) {
	.cwpr-popup__box {
		max-width: 95vw;
		border-radius: 8px;
	}

	.cwpr-popup__close {
		top: 8px;
		right: 10px;
		padding: 0 8px;
		font-size: 24px;
	}
}

/* ---------------------------------------------------------------------------
 * 2b. Product card sizing inside the carousel slot
 *
 * The card itself (.cwsg-card - look, Add/stepper, size pills, wishlist
 * heart, promo strip) is shop-simple-grid.css, unmodified: this section's ONLY
 * job is fitting that card into a fixed-width horizontal slide instead of the
 * shop grid's `minmax(232px, 1fr)` column, which is meaningless in a
 * scroll-snap track. Nothing here may restyle the card's own internals - if a
 * carousel-only look is ever wanted, that is a shop-simple-grid.css change
 * (so the shop matches too), never a home.css override.
 * ------------------------------------------------------------------------- */

#cwpr-home-pc .cwpr-pc__track .cwpr-pc__item {
	display: flex;
}

/* flex: 1 1 auto (not just width: 100%) so the card fills the slide's full
   HEIGHT too - the track stretches every slide to the row's tallest one, and
   the card's own margin-top: auto on its CTA (shop-simple-grid.css) only pins
   the button to a shared baseline if the card actually reaches that height. */
#cwpr-home-pc .cwpr-pc__track .cwpr-pc__item .cwsg-card {
	width: 100%;
	flex: 1 1 auto;
}