/* ==========================================================================
   Header: announcement bar + logo row + centred primary nav
   ========================================================================== */

.sc-header {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 500;
}

/* WP admin bar sits above the sticky header for logged-in views. */
body.admin-bar .sc-header { top: 32px; }

/* 601-782px: admin bar renders fixed at 46px. */
@media screen and (max-width: 782px) and (min-width: 601px) {
	body.admin-bar .sc-header { top: 46px; }
}

/* ≤600px: WP switches the admin bar to position:absolute (it scrolls away
   with the document), so the sticky header must pin to the very top. */
@media screen and (max-width: 600px) {
	body.admin-bar .sc-header { top: 0; }
}

/* Storefront parent clips overflow on body/.site, which silently kills
   position:sticky (hidden overflow turns them into scroll containers).
   clip() clips without creating one. */
body,
.site {
	overflow-x: clip;
	overflow-y: visible;
}

/* Storefront parent gives .site-header a 2.618em padding-top on desktop,
   which leaves a blank strip above the announcement bar. Our header starts
   flush with the top of the page. */
.sc-header,
.sc-header.site-header {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* --- Announcement bar --- */
.sc-announce {
	background: #1a1a1a;
	color: #fff;
	text-align: center;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 10px 15px;
}

.sc-announce p { margin: 0; }

/* --- Main row --- */
.sc-header__main {
	border-bottom: 1px solid #efefef;
	background: #fff;
}

.sc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
	position: relative;
}

.sc-header__left,
.sc-header__right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 26%;
}

.sc-header__right { justify-content: flex-end; }

/* The left utility text is a desktop-only flourish, hidden on the reference. */
.sc-header__text {
	display: none;
	font-size: 13px;
	color: #333;
}

.sc-header__center {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

/* Logo */
.sc-logo,
.sc-logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Storefront caps .site-header .site-branding img at max-width:230px (min-width:768px).
   Override with matching/higher specificity so the wordmark renders at full size. */
.sc-header .site-branding img,
.sc-logo img {
	height: 36px !important;
	width: auto !important;
	max-height: none !important;
	max-width: none !important;
	display: block;
}

/* Mobile keeps a slightly smaller mark */
@media (max-width: 860px) {
	.sc-header .site-branding img,
	.sc-logo img { height: 30px !important; }
}

.sc-logo__text {
	font-family: var(--sc-font-title);
	font-size: 34px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #000;
	font-weight: 400;
	margin: 0;
	line-height: 1;
}

/* Tool icons */
.sc-tools {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sc-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 30px;
	height: 30px;
	color: #000;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.sc-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.sc-tool:hover { color: #666; }

.sc-tool__count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 17px;
	height: 17px;
	line-height: 17px;
	padding: 0 4px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
}

/* --- Primary navigation --- */
.sc-nav-row {
	border-bottom: 1px solid #efefef;
	background: #fff;
	padding: 13px 0;
}

.sc-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
}

.sc-nav > li { position: relative; }

.sc-nav > li > a {
	display: block;
	padding: 2px 11px;
	font-family: var(--sc-font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #333;
	white-space: nowrap;
}

.sc-nav > li > a:hover,
.sc-nav > li.current-menu-item > a { color: #000; }

.sc-nav > li > a::after {
	content: "";
	display: block;
	height: 1px;
	width: 0;
	background: #000;
	transition: width 0.25s ease;
	margin-top: 3px;
}

.sc-nav > li:hover > a::after { width: 100%; }

.sc-nav li.menu-item--sale > a,
.sc-nav > li.sc-nav-sale > a { color: #c0392b; }

/* Dropdown caret for items with children */
.sc-caret {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 6px;
	opacity: 0.75;
}

.sc-caret svg {
	width: 8px;
	height: 8px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.sc-nav > li:hover > a .sc-caret svg { transform: rotate(180deg); }

/* Deeper levels open sideways */
.sc-nav .sub-menu .sc-caret svg { transform: rotate(-90deg); }

/* Mobile accordion state */
.sc-nav li.is-open > a .sc-caret svg { transform: rotate(180deg); }

/* --- Dropdown --- */
.sc-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 250px;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	list-style: none;
	margin: 0;
	padding: 18px 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 600;
}

.sc-nav > li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.sc-nav .sub-menu li { position: relative; }

.sc-nav .sub-menu a {
	display: block;
	padding: 7px 26px;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #333;
	white-space: nowrap;
}

.sc-nav .sub-menu a:hover { color: #000; background: #fafafa; }

/* Nested (3rd level) opens to the right */
.sc-nav .sub-menu .sub-menu {
	top: -18px;
	left: 100%;
	transform: translateX(6px);
}

.sc-nav .sub-menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* --- Mobile --- */
.sc-mobile-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #000;
	width: 30px;
	height: 30px;
}

.sc-mobile-toggle svg { width: 22px; height: 22px; }

/* --- Search overlay --- */
.sc-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.98);
	z-index: 1200;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 180px;
}

.sc-search-overlay.is-open { display: flex; }

.sc-search-overlay__form {
	width: 100%;
	max-width: 760px;
	padding: 0 20px;
	position: relative;
}

.sc-search-overlay__form input[type="search"] {
	width: 100%;
	border: 0;
	border-bottom: 2px solid #000;
	background: transparent;
	font-size: 30px;
	font-family: var(--sc-font-title);
	padding: 10px 46px 10px 0;
	outline: none;
	color: #000;
}

.sc-search-overlay__close {
	position: absolute;
	right: 20px;
	top: 12px;
	background: none;
	border: 0;
	font-size: 26px;
	cursor: pointer;
	color: #000;
	line-height: 1;
}

.sc-search-hint {
	text-align: center;
	font-size: 13px;
	color: #999;
	margin-top: 14px;
}