/* =========================================================================
   SJ Kids Outfit - Header
   Mobile-first. Built only from design-system.css tokens.

   The desktop header reproduces the reference header measurement for
   measurement: a 90px white bar (logo / 646px pill search / outline tool
   icons), then a flat 48px brand-purple nav bar. No promo bar above it.
   Every number below - bar heights, pill radius, icon sizes, type sizes
   and weights - was read off the reference rather than guessed, and type
   is set in px because the parent theme uses a 14px root.
   Layout flips from the compact mobile bar to the desktop one at 1024px.
   ========================================================================= */

.sj-header {
	position: sticky;
	top: 0;
	z-index: var(--sj-z-sticky);
	background: var(--sj-surface);
	border-bottom: 1px solid var(--sj-border);
	transition: box-shadow var(--sj-dur-base) var(--sj-ease);
}
.sj-header.is-stuck { box-shadow: var(--sj-shadow-md); }

/* On desktop the purple nav bar is the header's bottom edge, so the
   hairline would only ever sit under it as a stray grey line. */
@media (min-width: 1024px) { .sj-header { border-bottom: 0; } }

/* keep clear of the WordPress admin bar */
.admin-bar .sj-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .sj-header { top: 32px; } }

/* The reference header runs nearly edge to edge on 15px gutters rather
   than the page's 32-40px ones. */
@media (min-width: 1024px) {
	.sj-header .sj-container,
	.sj-nav .sj-container { padding-inline: 15px; }
}

/* -------------------------------------------------------------------------
   Promo bar - not rendered by header.php any more (the reference has none),
   kept so switching it back on needs one line and no styling.
   ------------------------------------------------------------------------- */
.sj-announce {
	background: var(--sj-p-700);
	color: #fff;
	font-size: 13px;
}
.sj-announce__msg {
	margin: 0;
	padding-block: var(--sj-sp-2);
	font-weight: var(--sj-fw-medium);
	letter-spacing: var(--sj-ls-wide);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Tier 1 - main bar (logo / search / tools), 90px on desktop
   ------------------------------------------------------------------------- */
.sj-header__main { background: var(--sj-surface); }

.sj-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sj-sp-3);
	min-height: 64px;
}
@media (min-width: 1024px) {
	.sj-header__inner { min-height: 90px; gap: var(--sj-sp-4); }
}

/* Logo --------------------------------------------------------------------
   56px tall renders the mark at ~217px wide, matching the reference's 215. */
.sj-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}
.sj-logo img,
.sj-logo svg { display: block; width: auto; height: 38px; }
@media (min-width: 1024px) { .sj-logo img, .sj-logo svg { height: 56px; } }

/* On mobile the logo is centred between the burger and the tools. */
.sj-logo--mobile-center { margin-inline: auto; }
@media (min-width: 1024px) { .sj-logo--mobile-center { margin-inline: 0; } }

/* Burger ------------------------------------------------------------------ */
.sj-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--sj-tap);
	height: var(--sj-tap);
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--sj-r-sm);
	color: var(--sj-ink);
	cursor: pointer;
}
@media (min-width: 1024px) { .sj-burger { display: none; } }

.sj-burger__bars,
.sj-burger__bars::before,
.sj-burger__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--sj-dur-base) var(--sj-ease),
	            opacity var(--sj-dur-fast) var(--sj-ease);
}
.sj-burger__bars { position: relative; }
.sj-burger__bars::before,
.sj-burger__bars::after { content: ""; position: absolute; left: 0; }
.sj-burger__bars::before { top: -7px; }
.sj-burger__bars::after  { top: 7px; }

.sj-burger[aria-expanded="true"] .sj-burger__bars { background: transparent; }
.sj-burger[aria-expanded="true"] .sj-burger__bars::before { transform: translateY(7px) rotate(45deg); }
.sj-burger[aria-expanded="true"] .sj-burger__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Search ------------------------------------------------------------------
   One 646x46 pill: near-white fill, a hairline that is barely there, and
   the brand button sitting inside it on a 2px inset. Nothing else may draw
   a box here - see the border reset on the field below. */
.sj-search { flex: 1 1 auto; display: none; }
@media (min-width: 1024px) {
	.sj-search { display: block; max-width: 646px; margin-inline: auto; }
}

.sj-search__form {
	display: flex;
	align-items: center;
	padding: 2px;
	background: var(--sj-field-bg);
	border: 1px solid var(--sj-field-border);
	border-radius: 60px;
	transition: border-color var(--sj-dur-fast) var(--sj-ease);
}
.sj-search__form:focus-within { border-color: var(--sj-primary); }

/* The parent theme styles `input[type="search"]` (0,1,1), which outranks a
   single class and was drawing a second rounded box inside the pill. These
   two selectors outrank it, so the field stays invisible. */
.sj-search__form .sj-search__field,
input.sj-search__field[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0 15px;
	background: transparent;
	border: 0;
	border-radius: 60px;
	box-shadow: none;
	font-family: var(--sj-font);
	font-size: 13px;
	font-weight: var(--sj-fw-regular);
	line-height: 40px;
	color: var(--sj-ink);
}
.sj-search__field::placeholder { color: var(--sj-meta); opacity: 1; }
.sj-search__field:focus,
.sj-search__field:focus-visible { outline: none; box-shadow: none; border: 0; }

/* drop the browser's own clear button so it cannot overlap the pill */
.sj-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }

.sj-search__submit {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 130px;
	height: 40px;
	min-height: 0;
	padding-block: 0;
	padding-inline: 15px;
	line-height: 1;
	background: var(--sj-primary);
	color: #fff;
	border: 0;
	border-radius: 60px;
	font-family: var(--sj-font);
	font-size: 14px;
	font-weight: var(--sj-fw-semi);
	letter-spacing: normal;
	text-transform: lowercase;   /* the reference button reads "search" */
	cursor: pointer;
	transition: background-color var(--sj-dur-base) var(--sj-ease);
}
.sj-search__submit:hover { background: var(--sj-primary-dark); }

/* Tools (account / wishlist / cart) ---------------------------------------
   Hairline grey icons, no labels. 24px targets with a 14px gap put the
   glyph centres 38px apart, as in the reference. */
.sj-tools {
	display: flex;
	align-items: center;
	gap: var(--sj-sp-1);
	flex: 0 0 auto;
}
@media (min-width: 1024px) { .sj-tools { gap: 14px; } }

.sj-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--sj-tap);
	min-height: var(--sj-tap);
	padding: 0;
	background: none;
	border: 0;
	color: var(--sj-icon);
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--sj-r-sm);
	transition: color var(--sj-dur-fast) var(--sj-ease);
}
.sj-tool:hover { color: var(--sj-primary); }
.sj-tool svg { width: 22px; height: 22px; flex: 0 0 auto; }
.sj-tool--account svg { width: 24px; height: 24px; }

/* on desktop the icons shrink to the reference's own spacing; 1px of
   padding keeps every target at 24px, the smallest WCAG allows */
@media (min-width: 1024px) {
	.sj-tool--desktop,
	.sj-tool--cart { min-width: 0; min-height: 0; padding: 1px; }
}

/* hide the search toggle once the inline search bar appears */
.sj-tool--search-toggle { display: inline-flex; }
@media (min-width: 1024px) { .sj-tool--search-toggle { display: none; } }

/* account + wishlist are desktop-only; they live in the drawer on mobile */
.sj-tool--desktop { display: none; }
@media (min-width: 1024px) { .sj-tool--desktop { display: inline-flex; } }

/* the icon is the positioning context, so the bubble pins to the glyph
   rather than to the far edge of the subtotal */
.sj-tool__icon { position: relative; display: inline-flex; }

/* count bubble - 16px brand circle, white numeral */
.sj-tool__count {
	position: absolute;
	top: -5px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--sj-primary);
	color: #fff;
	border-radius: var(--sj-r-pill);
	font-size: 10px;
	font-weight: var(--sj-fw-bold);
	line-height: 1;
	white-space: nowrap;
}
/* WoodMart's cart fragment brings its own `.wd-cart-number` bubble styling
   (min-width, padding, its own background) inside ours, which stretched the
   circle into an oval. Strip it back to plain text and hide the "items"
   word it appends. */
/* `display: contents` dissolves this box so the digit becomes a direct
   child of the bubble's flexbox, exactly like the wishlist count, which
   has no wrapper. Without it the wrapper is laid out on its own line box
   and the two bubbles centre their number differently. */
.sj-tool__count .wd-cart-number {
	display: contents;
	min-width: 0;
	min-height: 0;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	line-height: 1;
	color: inherit;
}
/* safety net: if a cached fragment ever brings the parent's own markup
   back, its visible "items" word still stays out of the bubble */
.sj-tool__count .wd-cart-number span:not(.sj-sr-only) { display: none; }

/* The wishlist bubble carries `.wd-tools-count` itself (WoodMart's script
   writes the new count into it), so our own bubble rules have to outrank
   the parent theme's styling for that class. */
.sj-tools .sj-tool .sj-tool__count {
	box-sizing: border-box;
	min-width: 16px;
	width: auto;
	height: 16px;
	padding: 0 4px;
	background: var(--sj-primary);
	color: #fff;
	border: 0;
	border-radius: var(--sj-r-pill);
	font-size: 10px;
	font-weight: var(--sj-fw-bold);
	line-height: 1;
}

.sj-tool__amount {
	display: none;
	margin-left: 15px;   /* clears the count bubble, as in the reference */
	font-size: 14px;
	font-weight: var(--sj-fw-regular);
	color: var(--sj-meta);
	white-space: nowrap;
}
@media (min-width: 1024px) { .sj-tool__amount { display: inline; } }

/* -------------------------------------------------------------------------
   Tier 2 - primary navigation (desktop only), 48px bar
   ------------------------------------------------------------------------- */
.sj-nav {
	display: none;
	background: var(--sj-primary);
}
@media (min-width: 1024px) { .sj-nav { display: block; } }

.sj-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 48px;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* the parent theme gives every `li` a 10px bottom margin, which would
   leave a dead strip of purple under the links */
.sj-nav__list > li { position: relative; margin: 0; }

.sj-nav__list a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 17.5px;
	color: #fff;
	font-size: 14px;
	font-weight: var(--sj-fw-regular);
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--sj-dur-fast) var(--sj-ease);
}
.sj-nav__list > li > a:hover,
.sj-nav__list > li:focus-within > a { color: rgba(255, 255, 255, 0.75); }

/* the page you are on, marked without a block of colour */
.sj-nav__list > li.current-menu-item > a,
.sj-nav__list > li.current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* thin chevron for items that have children */
.sj-nav__list > li.menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 1px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* the reference's small red flag, riding high on the Sale item */
.sj-nav__hot {
	align-self: flex-start;
	margin-left: 4px;
	padding: 2px 7px;
	background: var(--sj-hot);
	color: #fff;
	border-radius: 50px;
	font-size: 9px;
	font-weight: var(--sj-fw-medium);
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

/* Dropdown ---------------------------------------------------------------- */
.sj-nav__list ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--sj-z-overlay);
	min-width: 220px;
	margin: 0;
	padding: var(--sj-sp-2) 0;
	background: var(--sj-surface);
	border: 1px solid var(--sj-border);
	border-radius: 0 0 var(--sj-r-sm) var(--sj-r-sm);
	box-shadow: var(--sj-shadow-lg);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--sj-dur-base) var(--sj-ease),
	            transform var(--sj-dur-base) var(--sj-ease),
	            visibility var(--sj-dur-base);
}
.sj-nav__list > li:hover > ul,
.sj-nav__list > li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sj-nav__list ul li { margin: 0; }
.sj-nav__list ul a {
	padding: 9px 20px;
	font-size: 14px;
	color: var(--sj-body);
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--sj-fw-regular);
}
.sj-nav__list ul a:hover { background: var(--sj-primary-50); color: var(--sj-primary); }

/* -------------------------------------------------------------------------
   Mobile search panel
   ------------------------------------------------------------------------- */
.sj-search-panel {
	display: none;
	padding: var(--sj-sp-3) 0 var(--sj-sp-4);
	background: var(--sj-surface);
	border-top: 1px solid var(--sj-border);
}
.sj-search-panel.is-open { display: block; }
@media (min-width: 1024px) { .sj-search-panel, .sj-search-panel.is-open { display: none; } }
.sj-search-panel .sj-search { display: block; max-width: none; margin-inline: 0; }

/* -------------------------------------------------------------------------
   Off-canvas drawer (mobile navigation)
   ------------------------------------------------------------------------- */
.sj-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--sj-z-overlay);
	background: rgba(43, 26, 40, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sj-dur-base) var(--sj-ease), visibility var(--sj-dur-base);
}
.sj-overlay.is-open { opacity: 1; visibility: visible; }

.sj-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: var(--sj-z-drawer);
	display: flex;
	flex-direction: column;
	width: min(320px, 88vw);
	background: var(--sj-surface);
	transform: translateX(-100%);
	transition: transform var(--sj-dur-slow) var(--sj-ease);
	overscroll-behavior: contain;
}
.sj-drawer.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .sj-drawer, .sj-overlay { display: none; } }

.sj-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sj-sp-3);
	padding: var(--sj-sp-4);
	background: var(--sj-gradient);
	color: #fff;
}
.sj-drawer__title { margin: 0; font-size: var(--sj-fs-md); color: #fff; }

.sj-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sj-tap);
	height: var(--sj-tap);
	background: rgba(255, 255, 255, 0.18);
	border: 0;
	border-radius: var(--sj-r-pill);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.sj-drawer__close:hover { background: rgba(255, 255, 255, 0.3); }

.sj-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sj-sp-2) 0 var(--sj-sp-6); }

.sj-drawer__menu,
.sj-drawer__menu ul { margin: 0; padding: 0; list-style: none; }
.sj-drawer__menu li { margin: 0; }   /* parent theme's 10px li margin */

.sj-drawer__menu a {
	display: block;
	padding: var(--sj-sp-4) var(--sj-sp-5);
	color: var(--sj-ink);
	font-size: var(--sj-fs-base);
	font-weight: var(--sj-fw-medium);
	text-decoration: none;
	border-bottom: 1px solid var(--sj-border);
}
.sj-drawer__menu a:hover { background: var(--sj-primary-50); color: var(--sj-primary); }

/* submenu rows sit indented and lighter */
.sj-drawer__menu ul a {
	padding-left: var(--sj-sp-10);
	font-weight: var(--sj-fw-regular);
	color: var(--sj-body);
}

/* parent rows with children: label + separate expand button */
.sj-drawer__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--sj-border); }
.sj-drawer__row > a { flex: 1 1 auto; border-bottom: 0; }

.sj-drawer__toggle {
	flex: 0 0 auto;
	width: var(--sj-tap);
	background: none;
	border: 0;
	border-left: 1px solid var(--sj-border);
	color: var(--sj-primary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.sj-drawer__toggle::before { content: "+"; }
.sj-drawer__toggle[aria-expanded="true"]::before { content: "\2212"; }

/* Sub-menus only start collapsed when JS is there to expand them again;
   without JS the toggle button is useless, so show everything instead. */
.sj-drawer__menu .sub-menu { background: var(--sj-surface-alt); }
.sj-js .sj-drawer__menu .sub-menu { display: none; }
.sj-js .sj-drawer__menu .sub-menu.is-open { display: block; }
html:not(.sj-js) .sj-drawer__toggle { display: none; }

.sj-drawer__foot {
	padding: var(--sj-sp-4) var(--sj-sp-5);
	border-top: 1px solid var(--sj-border);
	display: grid;
	gap: var(--sj-sp-3);
}
.sj-drawer__foot a {
	display: flex;
	align-items: center;
	gap: var(--sj-sp-3);
	min-height: var(--sj-tap);
	color: var(--sj-body);
	font-weight: var(--sj-fw-medium);
	text-decoration: none;
}
.sj-drawer__foot a:hover { color: var(--sj-primary); }
.sj-drawer__foot svg { width: 20px; height: 20px; }

/* Lock the page behind the drawer without losing scroll position. */
body.sj-no-scroll { overflow: hidden; }