/* =========================================================================
   SJ Kids Outfit - Homepage
   Loaded only on the front page. Tokens only, mobile-first.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Slider

   WoodMart wraps the page in a 1222px <main>, so the slider breaks out of
   it to run edge to edge. The width comes from --sj-vw (set by
   home-slider.js to documentElement.clientWidth) rather than 100vw, because
   100vw counts the scrollbar and would push the page sideways by ~15px.

   Height is an aspect-ratio box fed by the first slide's own proportions,
   so the space is reserved before the artwork loads and nothing jumps.
   ------------------------------------------------------------------------- */
/* WoodMart's <main> carries `padding-block: 40px` (css/parts/base.css), which
   left a 40px white gap between the nav bar and the slider. The homepage
   opens on a full-bleed band, so the top padding goes here - scoped to the
   front page, and to the top only, so every other page keeps its spacing.
   Overriding it here rather than in the parent theme means it survives a
   WoodMart update. */
.home .wd-content-layout { padding-top: 0; }

.sj-slider {
	position: relative;
	width: var(--sj-vw, 100vw);
	margin-inline: calc(50% - var(--sj-vw, 100vw) / 2);
	margin-bottom: var(--sj-sp-8);
	overflow: hidden;
	background: var(--sj-p-50);
}

.sj-slider__track {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: var(--sj-slider-ar, 3.74);
}
@media (max-width: 767px) {
	.sj-slider__track { aspect-ratio: var(--sj-slider-ar-mb, 1.09); }
}

/* Slides are stacked and cross-faded; without JS the first one just stays. */
.sj-slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sj-dur-slow) var(--sj-ease),
	            visibility var(--sj-dur-slow);
}
.sj-slider__slide.is-active { opacity: 1; visibility: visible; }

.sj-slider__slide picture,
.sj-slider__link { display: block; width: 100%; height: 100%; }

.sj-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Arrows: a bare chevron like the reference, hidden until the slider is
   hovered or something inside it takes focus. The shadow keeps it legible
   whatever the artwork behind it does. */
.sj-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sj-ink);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--sj-dur-base) var(--sj-ease);
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
}
.sj-slider:hover .sj-slider__nav,
.sj-slider__nav:focus-visible { opacity: 1; }

.sj-slider__nav--prev { left: 4px; }
.sj-slider__nav--next { right: 4px; }

.sj-slider__nav span {
	width: 14px;
	height: 14px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.sj-slider__nav--prev span { transform: rotate(135deg); margin-left: 5px; }
.sj-slider__nav--next span { transform: rotate(-45deg); margin-right: 5px; }

/* Dots: 11px brand circles, as in the reference, inside 24px buttons so
   the tap target is not an 11px speck. */
.sj-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 0;
}
.sj-slider__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.sj-slider__dot::before {
	content: "";
	width: 11px;
	height: 11px;
	background: var(--sj-primary);
	border-radius: 50%;
	opacity: 0.5;
	/* A hairline of white keeps the dots readable when a slide happens to
	   be dark or purple behind them. */
	/* box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); */
	transition: opacity var(--sj-dur-base) var(--sj-ease),
	            transform var(--sj-dur-base) var(--sj-ease);
}
.sj-slider__dot.is-active::before { opacity: 1; transform: scale(1.15); }

/* -------------------------------------------------------------------------
   Hero (the fallback banner, used until slides are published)
   ------------------------------------------------------------------------- */
.sj-hero {
	position: relative;
	background: var(--sj-gradient);
	color: #fff;
	overflow: hidden;
}

.sj-hero__inner {
	display: grid;
	gap: var(--sj-sp-8);
	padding-block: var(--sj-sp-12) var(--sj-sp-10);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 1024px) {
	.sj-hero__inner {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--sj-sp-10);
		padding-block: var(--sj-sp-16);
	}
}

.sj-hero__eyebrow {
	margin: 0 0 var(--sj-sp-3);
	font-size: var(--sj-fs-xs);
	font-weight: var(--sj-fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

.sj-hero__title {
	margin: 0 0 var(--sj-sp-4);
	color: #fff;
	font-size: var(--sj-fs-3xl);
	line-height: var(--sj-lh-tight);
}

.sj-hero__text {
	margin: 0 0 var(--sj-sp-8);
	max-width: 46ch;
	font-size: var(--sj-fs-md);
	line-height: var(--sj-lh-base);
	opacity: 0.95;
}

.sj-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sj-sp-5);
}
.sj-hero__link {
	color: #fff;
	font-size: var(--sj-fs-sm);
	font-weight: var(--sj-fw-semi);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.sj-hero__link:hover { color: var(--sj-p-100); }

/* Product collage. Hidden below 768px: at phone width it would push the
   headline off the first screen for no benefit. */
.sj-hero__art { display: none; }
@media (min-width: 768px) {
	.sj-hero__art {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sj-sp-4);
	}
}

.sj-hero__art-item {
	border-radius: var(--sj-r-lg);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: var(--sj-shadow-lg);
}
.sj-hero__art-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
/* first tile spans both rows for an asymmetric, less catalogue-like layout */
.sj-hero__art-item--1 { grid-row: span 2; }
.sj-hero__art-item--1 img { aspect-ratio: 3 / 4; }

/* -------------------------------------------------------------------------
   USP strip
   ------------------------------------------------------------------------- */
.sj-usp {
	background: var(--sj-surface-tint);
	border-bottom: 1px solid var(--sj-border);
}
.sj-usp__grid {
	display: grid;
	gap: var(--sj-sp-5);
	padding-block: var(--sj-sp-6);
	grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .sj-usp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sj-usp__grid { grid-template-columns: repeat(4, 1fr); } }

.sj-usp__item { display: flex; align-items: center; gap: var(--sj-sp-3); }

.sj-usp__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--sj-surface);
	color: var(--sj-primary);
	border-radius: var(--sj-r-pill);
	box-shadow: var(--sj-shadow-sm);
}
.sj-usp__icon svg { width: 20px; height: 20px; }

.sj-usp__title {
	margin: 0;
	color: var(--sj-ink);
	font-size: var(--sj-fs-sm);
	font-weight: var(--sj-fw-bold);
	line-height: var(--sj-lh-snug);
}
.sj-usp__text { margin: 0; font-size: var(--sj-fs-xs); color: var(--sj-muted); }

/* -------------------------------------------------------------------------
   Category cards

   Follows the reference: tall portrait photos (0.74 w/h, measured off it),
   16px corners, 25px gutters, four across. The name sits on the photo at
   the bottom right rather than under it, so the card is all picture.

   The reference bakes its labels into the artwork, which means they cannot
   be renamed without re-exporting the image. Here the name is live text
   from the category, so it follows whatever you call the category - and it
   can be switched off per the Customizer if your own artwork already
   carries the wording.
   ------------------------------------------------------------------------- */
.sj-cats {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .sj-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .sj-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; } }

.sj-cat {
	position: relative;
	display: block;
	aspect-ratio: 0.74;
	overflow: hidden;
	border-radius: 16px;
	background: var(--sj-surface-tint);
	text-decoration: none;
	/* A hairline inside the corner, so a product shot on a white backdrop
	   still reads as a card instead of dissolving into the page. */
	box-shadow: inset 0 0 0 1px var(--sj-border);
	transition: box-shadow var(--sj-dur-base) var(--sj-ease),
	            transform var(--sj-dur-base) var(--sj-ease);
}
.sj-cat:hover {
	box-shadow: var(--sj-shadow-lg), inset 0 0 0 1px var(--sj-border);
	transform: translateY(-3px);
}

.sj-cat__media,
.sj-cat__img,
.sj-cat__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sj-cat__placeholder { background: var(--sj-gradient-soft); }

/* A soft scrim, only at the foot of the card, so the name stays readable
   whatever the photo does down there. */
.sj-cat::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.sj-cat__name {
	position: absolute;
	right: 16px;
	bottom: 14px;
	left: 16px;
	z-index: 1;
	color: var(--sj-ink);
	font-size: 17px;
	font-weight: var(--sj-fw-medium);
	line-height: 1.25;
	text-align: right;
}
@media (max-width: 767px) { .sj-cat__name { font-size: 15px; right: 12px; bottom: 11px; left: 12px; } }

.sj-cat__count {
	display: block;
	margin-top: 2px;
	color: var(--sj-meta);
	font-size: 13px;
	font-weight: var(--sj-fw-regular);
}

/* -------------------------------------------------------------------------
   Product rows

   Card measured off the reference: square photo, a 54px discount disc
   clipped into its top-left corner, one-line title, old price struck
   through beside the new one, purple stars, and a bordered Quick Shop
   button. The column count comes from --sj-pcols, set per row in the
   Customizer, so one grid rule serves every row.
   ------------------------------------------------------------------------- */
.sj-section__cta { margin: var(--sj-sp-8) 0 0; text-align: center; }

/* Heading with a rule running out to both edges, as in the reference.
   The lines are flex children of the heading rather than a line drawn
   behind it, so they always meet the text at its true centre and need no
   background colour punched through them. */
.sj-section__head--rules { gap: var(--sj-sp-1); }

.sj-section__head--rules .sj-section__title {
	display: flex;
	align-items: center;
	gap: var(--sj-sp-5);
	align-self: stretch;
	color: var(--sj-primary);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem);
	font-weight: var(--sj-fw-medium);
	white-space: nowrap;
}
.sj-section__head--rules .sj-section__title::before,
.sj-section__head--rules .sj-section__title::after {
	content: "";
	flex: 1 1 0;
	border-top: 1px solid var(--sj-border-strong);
}

.sj-section__head--rules .sj-section__subtitle {
	font-size: 14px;
	font-style: italic;
	color: var(--sj-muted);
}


/* -------------------------------------------------------------------------
   Promo cards
   ------------------------------------------------------------------------- */
.sj-promo {
	display: grid;
	gap: var(--sj-sp-5);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sj-promo { grid-template-columns: repeat(2, 1fr); gap: var(--sj-sp-6); } }

/* --- Artwork tiles -------------------------------------------------------
   Both tiles share the ratio of the left-hand image (--sj-promo-ar), so the
   row stays even and its height is known before the artwork arrives. */
.sj-promo__art {
	display: block;
	aspect-ratio: var(--sj-promo-ar, 1);
	overflow: hidden;
	border-radius: var(--sj-r-lg);
	background: var(--sj-surface-tint);
	transition: box-shadow var(--sj-dur-base) var(--sj-ease),
	            transform var(--sj-dur-base) var(--sj-ease);
}
a.sj-promo__art:hover { transform: translateY(-3px); box-shadow: var(--sj-shadow-lg); }

.sj-promo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A single tile should not stretch across the whole row. */
.sj-promo--art:has(> :only-child) { grid-template-columns: 1fr; max-width: 640px; }

.sj-promo__card {
	display: flex;
	flex-direction: column;
	gap: var(--sj-sp-2);
	min-height: 200px;
	padding: var(--sj-sp-8);
	border-radius: var(--sj-r-xl);
	text-decoration: none;
	transition: transform var(--sj-dur-base) var(--sj-ease),
	            box-shadow var(--sj-dur-base) var(--sj-ease);
}
.sj-promo__card:hover { transform: translateY(-3px); box-shadow: var(--sj-shadow-lg); }

.sj-promo__card--sale { background: var(--sj-gradient); color: #fff; }
.sj-promo__card--sale .sj-promo__title { color: #fff; }

.sj-promo__card--soft {
	background: var(--sj-p-100);
	color: var(--sj-p-800);
	border: 1px solid var(--sj-p-200);
}

.sj-promo__eyebrow {
	font-size: var(--sj-fs-xs);
	font-weight: var(--sj-fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.9;
}
.sj-promo__title {
	font-family: var(--sj-font-head);
	font-size: var(--sj-fs-xl);
	font-weight: var(--sj-fw-bold);
	color: var(--sj-p-900);
	line-height: var(--sj-lh-tight);
}
.sj-promo__text { font-size: var(--sj-fs-sm); }
.sj-promo__cta {
	margin-top: auto;
	padding-top: var(--sj-sp-4);
	font-size: var(--sj-fs-sm);
	font-weight: var(--sj-fw-bold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* -------------------------------------------------------------------------
   Wide brand band
   ------------------------------------------------------------------------- */
.sj-storeband { background: var(--sj-gradient); color: #fff; }
.sj-storeband__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sj-sp-6);
	padding-block: var(--sj-sp-12);
}
@media (min-width: 768px) {
	.sj-storeband__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.sj-storeband__title { margin: 0 0 var(--sj-sp-2); color: #fff; font-size: var(--sj-fs-2xl); }
.sj-storeband__text  { margin: 0; max-width: 60ch; font-size: var(--sj-fs-md); opacity: 0.95; }

/* -------------------------------------------------------------------------
   SEO copy
   ------------------------------------------------------------------------- */
.sj-seo {
	display: grid;
	gap: var(--sj-sp-8);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sj-seo { grid-template-columns: repeat(2, 1fr); gap: var(--sj-sp-12); } }

.sj-seo__title { margin: 0 0 var(--sj-sp-4); font-size: var(--sj-fs-lg); }
.sj-seo p { margin: 0 0 var(--sj-sp-4); font-size: var(--sj-fs-sm); line-height: var(--sj-lh-base); }
.sj-seo p:last-child { margin-bottom: 0; }