/* =========================================================================
   SJ Kids Outfit - Design System
   Single source of truth for colour, type, spacing, radius, shadow, layout.
   Every other stylesheet in this theme is built from these tokens only.
   Breakpoints (min-width): 375 base / 768 / 1024 / 1440

   Palette: a single magenta-purple ramp sampled straight from the
   reference header - #A6489C is its nav bar / buttons, #9C3587 its logo
   and deep step. Contrast on white was measured for every pairing below.
   ========================================================================= */

:root {
	/* --- Purple ramp (hue ~306-312, anchored on the reference) ------------ */
	--sj-p-50:  #FBF4FA;
	--sj-p-100: #F6E5F4;
	--sj-p-200: #EAC8E7;
	--sj-p-300: #D69ACF;
	--sj-p-400: #C270B8;
	--sj-p-500: #A6489C;   /* white text  5.21:1  <- brand, nav + buttons */
	--sj-p-600: #9C3587;   /* white text  6.42:1  <- logo / hover / deep */
	--sj-p-700: #80286E;   /* white text  8.58:1 */
	--sj-p-800: #671E58;   /* white text 11.05:1 */
	--sj-p-900: #4D1441;   /* white text 14.08:1 */

	/* --- Semantic brand --------------------------------------------------- */
	--sj-primary:       var(--sj-p-500);
	--sj-primary-dark:  var(--sj-p-600);
	--sj-primary-light: var(--sj-p-400);
	--sj-primary-50:    var(--sj-p-50);
	--sj-primary-100:   var(--sj-p-100);

	/* Deep plum carries emphasis (sale badges, promo bar) so the palette
	   stays mono-purple without losing a loud step. */
	--sj-accent:        var(--sj-p-700);
	--sj-accent-deep:   var(--sj-p-900);
	--sj-accent-50:     var(--sj-p-50);
	--sj-accent-100:    var(--sj-p-100);

	/* The one non-purple: the reference's red "Hot" flag. Darkened from
	   its #ED1515 to #E01111 so white on it clears 4.5:1 (4.98:1). */
	--sj-hot:           #E01111;

	/* The reference's discount disc - a hotter pink than the brand purple,
	   which is what makes it read as a price cut rather than decoration.
	   White on it is 5.16:1. */
	--sj-sale:          #D0157D;

	--sj-gradient:      linear-gradient(135deg, #671E58 0%, #9C3587 55%, #B65BAB 100%);
	--sj-gradient-soft: linear-gradient(135deg, #FBF4FA 0%, #F6E5F4 100%);

	/* --- Neutrals (magenta-tinted so they sit with the brand) ------------- */
	--sj-ink:           #2B1A28;   /* headings     15.74:1 on white */
	--sj-body:          #645A63;   /* body copy     6.60:1 on white */
	--sj-muted:         #8A8089;   /* meta, 18px+   3.80:1 on white */
	--sj-border:        #EFE6EE;   /* decorative hairlines */
	--sj-border-strong: #E2D4E0;   /* card / divider */
	--sj-border-input:  #9A8E98;   /* form controls 3.12:1, meets WCAG 1.4.11 */

	--sj-surface:       #FFFFFF;
	--sj-surface-alt:   #FBF8FB;
	--sj-surface-tint:  #F8EFF7;

	/* --- Header greys (measured off the reference) ------------------------ */
	--sj-field-bg:      #FAFAFA;
	--sj-field-border:  rgba(135, 135, 135, 0.15);
	--sj-icon:          #878787;   /* tool icons, 3.54:1 - non-text, needs 3:1 */
	--sj-meta:          #737373;   /* placeholder + cart total; the reference's
	                                  #878787 is only 3.5:1, too low for text,
	                                  so these two bits of copy sit one shade
	                                  darker at 4.74:1 */

	/* --- State ------------------------------------------------------------ */
	--sj-success:       #2E7D52;
	--sj-warning:       #B7791F;
	--sj-danger:        #C62828;

	/* --- Typography -------------------------------------------------------- */
	--sj-font:      "Quicksand", "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sj-font-head: var(--sj-font);

	--sj-fw-regular: 400;
	--sj-fw-medium:  500;
	--sj-fw-semi:    600;
	--sj-fw-bold:    700;

	/* fluid ramp: min at 375px, max at 1440px */
	--sj-fs-xs:   0.8125rem;                                   /* 13 */
	--sj-fs-sm:   0.875rem;                                    /* 14 */
	--sj-fs-base: 1rem;                                        /* 16 */
	--sj-fs-md:   clamp(1rem,     0.96rem + 0.19vw, 1.125rem);  /* 16 - 18 */
	--sj-fs-lg:   clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem); /* 18 - 21 */
	--sj-fs-xl:   clamp(1.375rem, 1.26rem + 0.47vw, 1.75rem);   /* 22 - 28 */
	--sj-fs-2xl:  clamp(1.625rem, 1.41rem + 0.94vw, 2.25rem);   /* 26 - 36 */
	--sj-fs-3xl:  clamp(2rem,     1.66rem + 1.41vw, 3rem);      /* 32 - 48 */

	--sj-lh-tight: 1.2;
	--sj-lh-snug:  1.35;
	--sj-lh-base:  1.6;
	--sj-ls-wide:  0.02em;

	/* --- Spacing (4px base) ------------------------------------------------- */
	--sj-sp-1:  0.25rem;
	--sj-sp-2:  0.5rem;
	--sj-sp-3:  0.75rem;
	--sj-sp-4:  1rem;
	--sj-sp-5:  1.25rem;
	--sj-sp-6:  1.5rem;
	--sj-sp-8:  2rem;
	--sj-sp-10: 2.5rem;
	--sj-sp-12: 3rem;
	--sj-sp-16: 4rem;
	--sj-sp-20: 5rem;

	--sj-section-y: clamp(2.5rem, 1.8rem + 3vw, 5rem);

	/* --- Radius -------------------------------------------------------------- */
	--sj-r-sm:   8px;
	--sj-r-md:   16px;
	--sj-r-lg:   24px;
	--sj-r-xl:   32px;
	--sj-r-pill: 999px;

	/* --- Shadow -------------------------------------------------------------- */
	--sj-shadow-sm:    0 1px 2px rgba(43, 27, 56, 0.06), 0 1px 3px rgba(43, 27, 56, 0.08);
	--sj-shadow-md:    0 4px 12px rgba(43, 27, 56, 0.08), 0 2px 4px rgba(43, 27, 56, 0.05);
	--sj-shadow-lg:    0 12px 32px rgba(43, 27, 56, 0.12), 0 4px 8px rgba(43, 27, 56, 0.06);
	--sj-shadow-brand: 0 8px 20px rgba(166, 72, 156, 0.28);

	/* --- Layout ---------------------------------------------------------------- */
	--sj-container:        1440px;
	--sj-container-narrow: 1140px;
	--sj-gutter:           16px;   /* never below this - guards the 375px edge */

	/* --- Z-index ladder ---------------------------------------------------------- */
	--sj-z-base:    1;
	--sj-z-sticky:  300;
	--sj-z-overlay: 400;
	--sj-z-drawer:  500;
	--sj-z-top:     600;

	/* --- Motion -------------------------------------------------------------------- */
	--sj-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--sj-dur-fast: 0.15s;
	--sj-dur-base: 0.25s;
	--sj-dur-slow: 0.4s;

	/* --- Controls --------------------------------------------------------------------- */
	--sj-tap: 44px;
}

@media (min-width: 768px)  { :root { --sj-gutter: 24px; } }
@media (min-width: 1024px) { :root { --sj-gutter: 32px; } }
@media (min-width: 1440px) { :root { --sj-gutter: 40px; } }

@media (prefers-reduced-motion: reduce) {
	:root { --sj-dur-fast: 0.01ms; --sj-dur-base: 0.01ms; --sj-dur-slow: 0.01ms; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================================
   Bridge: hand our tokens to WoodMart's own variables so the theme's
   WooCommerce output (buttons, prices, badges) inherits the brand for free.

   WoodMart prints its own `:root` block as inline CSS *after* this file,
   so a plain declaration here loses the cascade and the theme keeps its
   stock green (#83b735) and yellow (#fbbc34). The tokens it only ever sets
   on `:root` are therefore marked important, which outranks that block.

   The text / title / link colours are deliberately left alone: WoodMart
   re-declares those on its own wrappers (.color-scheme-light and friends)
   to flip copy to white on dark panels, and an important root value would
   override those too and leave white-on-white text.
   ========================================================================= */
:root {
	--wd-primary-color:       var(--sj-primary) !important;
	--wd-alternative-color:   var(--sj-accent) !important;
	--wd-text-color:          var(--sj-body);
	--wd-title-color:         var(--sj-ink);
	--wd-link-color:          var(--sj-primary);
	--wd-link-color-hover:    var(--sj-primary-dark);
	--wd-brd-radius:          var(--sj-r-md) !important;
	--wd-text-font:           var(--sj-font) !important;
	--wd-title-font:          var(--sj-font-head) !important;
	--wd-entities-title-font: var(--sj-font-head) !important;
	--wd-widget-title-font:   var(--sj-font-head) !important;
}

/* =========================================================================
   Primitives
   ========================================================================= */

body {
	font-family: var(--sj-font);
	font-size: var(--sj-fs-base);
	line-height: var(--sj-lh-base);
	color: var(--sj-body);
	background: var(--sj-surface);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.sj-h1, .sj-h2, .sj-h3 {
	font-family: var(--sj-font-head);
	color: var(--sj-ink);
	font-weight: var(--sj-fw-bold);
	line-height: var(--sj-lh-tight);
}

.sj-h1 { font-size: var(--sj-fs-3xl); }
.sj-h2 { font-size: var(--sj-fs-2xl); }
.sj-h3 { font-size: var(--sj-fs-xl); }

/* Visible focus for keyboard users everywhere. The white ring keeps the
   outline legible when the element sits on a dark or brand background. */
:focus-visible {
	outline: 3px solid var(--sj-p-800);
	outline-offset: 2px;
	border-radius: var(--sj-r-sm);
}
.sj-on-brand :focus-visible {
	outline-color: #FFFFFF;
	box-shadow: 0 0 0 5px rgba(43, 27, 56, 0.45);
}

/* Screen-reader-only, becomes visible when focused. */
.sj-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Container -------------------------------------------------------------- */
.sj-container {
	width: 100%;
	max-width: var(--sj-container);
	margin-inline: auto;
	padding-inline: 10px;
}
.sj-container--narrow { max-width: var(--sj-container-narrow); }

/* --- Section ----------------------------------------------------------------- */
.sj-section       { padding-block: var(--sj-section-y); }
.sj-section--tint { background: var(--sj-surface-tint); }
.sj-section--alt  { background: var(--sj-surface-alt); }

.sj-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sj-sp-2);
	margin-bottom: var(--sj-sp-8);
	text-align: center;
}
.sj-section__title    { font-size: var(--sj-fs-2xl); margin: 0; }
.sj-section__subtitle { font-size: var(--sj-fs-md); color: var(--sj-muted); margin: 0; }

/* --- Button -------------------------------------------------------------------- */
.sj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sj-sp-2);
	min-height: var(--sj-tap);
	padding: var(--sj-sp-3) var(--sj-sp-6);
	border: 2px solid transparent;
	border-radius: var(--sj-r-pill);
	font-family: var(--sj-font);
	font-size: var(--sj-fs-sm);
	font-weight: var(--sj-fw-semi);
	letter-spacing: var(--sj-ls-wide);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sj-dur-base) var(--sj-ease),
	            color var(--sj-dur-base) var(--sj-ease),
	            border-color var(--sj-dur-base) var(--sj-ease),
	            transform var(--sj-dur-fast) var(--sj-ease);
}
.sj-btn:active { transform: translateY(1px); }

.sj-btn--primary { background: var(--sj-primary); color: #fff; }
.sj-btn--primary:hover,
.sj-btn--primary:focus-visible { background: var(--sj-primary-dark); color: #fff; }

.sj-btn--accent { background: var(--sj-accent); color: #fff; }
.sj-btn--accent:hover,
.sj-btn--accent:focus-visible { background: var(--sj-p-900); color: #fff; }

.sj-btn--outline {
	background: transparent;
	color: var(--sj-primary);
	border-color: var(--sj-primary);
}
.sj-btn--outline:hover,
.sj-btn--outline:focus-visible { background: var(--sj-primary); color: #fff; }

.sj-btn--ghost { background: var(--sj-p-50); color: var(--sj-primary); }
.sj-btn--ghost:hover { background: var(--sj-p-100); }

/* On a brand-coloured band: white pill, purple label. */
.sj-btn--onbrand { background: #fff; color: var(--sj-p-700); }
.sj-btn--onbrand:hover,
.sj-btn--onbrand:focus-visible { background: var(--sj-p-100); color: var(--sj-p-800); }

.sj-btn--sm    { min-height: 36px; padding: var(--sj-sp-2) var(--sj-sp-4); font-size: var(--sj-fs-xs); }
.sj-btn--block { width: 100%; }

/* --- Card ------------------------------------------------------------------------ */
.sj-card {
	background: var(--sj-surface);
	border: 1px solid var(--sj-border);
	border-radius: var(--sj-r-lg);
	overflow: hidden;
	transition: box-shadow var(--sj-dur-base) var(--sj-ease),
	            transform var(--sj-dur-base) var(--sj-ease);
}
.sj-card:hover { box-shadow: var(--sj-shadow-md); transform: translateY(-2px); }
.sj-card__body { padding: var(--sj-sp-4); }

/* --- Badge ------------------------------------------------------------------------- */
.sj-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--sj-sp-1) var(--sj-sp-3);
	border-radius: var(--sj-r-pill);
	font-size: var(--sj-fs-xs);
	font-weight: var(--sj-fw-bold);
	letter-spacing: var(--sj-ls-wide);
	text-transform: uppercase;
}
.sj-badge--sale { background: var(--sj-accent); color: #fff; }   /*  8.58:1 */
.sj-badge--new  { background: var(--sj-primary); color: #fff; }  /*  5.21:1 */

/* --- Grid --------------------------------------------------------------------------- */
.sj-grid {
	display: grid;
	gap: var(--sj-sp-4);
	grid-template-columns: repeat(var(--sj-cols, 2), minmax(0, 1fr));
}
@media (min-width: 768px)  { .sj-grid { --sj-cols: var(--sj-cols-md, 3); gap: var(--sj-sp-5); } }
@media (min-width: 1024px) { .sj-grid { --sj-cols: var(--sj-cols-lg, 4); gap: var(--sj-sp-6); } }

/* Nothing may push the page sideways - guards the 375px viewport. */
html, body { overflow-x: clip; max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }