/* ShineSky 006 Header + product menu.
   Values from Figma ubIZqqow2SfBhRtYWmd4yH V2: root 2248:1163.
   1440 2248:1164/1179, 1024 2248:1194/1209, 768 2248:1224/1236, 390 2248:1248/1260, 320 2248:1272/1284. */

:root {
	--ss6-page: #fbfaf8;
	--ss6-graphite: #171615;
	--ss6-warm-ink: #a84a0a;
	--ss6-secondary: #5e5a55;
	--ss6-stage: #efede9;
	--ss6-line: #e2dfda;
	--ss6-inter: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ss6-mont: 'Montserrat Variable', Montserrat, system-ui, sans-serif;
	--ss6-gutter-l: 66.25px;
	--ss6-gutter-r: 81.25px;
}

.ss6 { margin: 0; background: var(--ss6-page); color: var(--ss6-graphite); font-family: var(--ss6-inter); -webkit-font-smoothing: antialiased; }
.ss6 *, .ss6 *::before, .ss6 *::after { box-sizing: border-box; }
/* Resets carry zero specificity so single-class component rules always win. */
:where(.ss6-menu, .ss6-header) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.ss6-menu, .ss6-header) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.ss6-menu) :where(p, h2, h3) { margin: 0; }
:where(.ss6-menu, .ss6-header) :where(a) { color: inherit; text-decoration: none; }
.ss6-icon, .ss6-orb { display: block; flex: none; }
.ss6-host { display: block; min-height: 1px; }
.ss6-host:focus { outline: none; }

.ss6-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ss6-skip { position: absolute; left: 12px; top: -60px; z-index: 1001; padding: 10px 14px; background: var(--ss6-graphite); color: #fff; font-size: 14px; }
.ss6-skip:focus { top: 12px; }

/* Shared focus treatment: inset outline so control boxes never change size (2042:178 Focus). */
.ss6 :is(button, a, input):focus-visible { outline: 2px solid var(--ss6-graphite); outline-offset: 2px; }
.ss6-family-ctl:focus-visible { outline-offset: -2px; }

.ss6-bar .ss6-desktop-only { display: none; }
.is-pending { cursor: default; }

/* ---------- Bar: shared by the closed header and every menu level ---------- */
.ss6-header { position: relative; z-index: 10; background: var(--ss6-page); }
/* V2: no outer shell at any width — header height always equals the bar height. */

/* Mobile/tablet first — single warm-white surface + fine bottom rule, no outer shell.
   Bar is 48px through the 320/390/768 tiers; side padding is tier-specific below. */
.ss6-header, .ss6-m-shell { height: 48px; }
.ss6-bar {
	height: 48px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 16px; background: var(--ss6-page); border-bottom: 1px solid var(--ss6-line);
	font-weight: 600; font-size: 13px; line-height: normal;
}
.ss6-bar__cell { display: contents; }
.ss6-ctl { position: relative; display: inline-flex; align-items: center; gap: 11.75px; min-height: 44px; white-space: nowrap; }
/* Icon glyph stays visible alongside the MENU/CLOSE text at every width (2248 shows both). */
/* Label cell w48 in every menu state keeps the logo at one x across closed and open. */
.ss6-ctl--menu .ss6-ctl__label, .ss6-ctl--close .ss6-ctl__label { width: 48px; }
.ss6-ctl--close { color: var(--ss6-warm-ink); }
.ss6-ctl--contact .ss6-orb { display: none; }
.ss6-ctl--menu::before, .ss6-ctl--close::before { content: ''; position: absolute; inset: 0 -8px; }
/* Figma 2248:1272 CONTACT: 13px Regular at ~0.5 opacity, scoped to this label only. */
.ss6-ctl--contact .ss6-ctl__label { font-weight: 400; font-size: 13px; opacity: 0.5; }
/* Mobile OPEN topbar: two-line glyph next to CLOSE text, label cell keeps its width
   so left-group (logo) alignment is restored without touching menu-mobile.php. */
.ss6-ctl--close::after {
	content: '';
	display: inline-block;
	width: 16px; height: 10px;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 16px 2px;
	background-position: top left, bottom left;
	color: var(--ss6-warm-ink);
}
.ss6-logo-link { display: block; line-height: 0; }
.ss6-logo { display: block; width: 132px; height: 13.44px; }

@media (max-width: 359px) {
	/* 320 tier (2248:1272/1284): padding12 only. Logo stays 132×13.44 — Figma logo spans
	   x98.5-230.5 at 320, so it must not shrink, and CONTACT (66px) must still fit. */
	.ss6-bar { padding: 0 12px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* 768 tier (2248:1224/1236): padding24. */
	.ss6-bar { padding: 0 24px; }
}

@media (min-width: 1024px) {
	.ss6-bar .ss6-desktop-only { display: inline-flex; }
	/* 1024 tier (2248:1194/1209): bar44, padding32, logo160, start slot88, end slot191.
	   No outer shell — header height equals bar height. */
	.ss6-header, .ss6-m-shell { height: 44px; }
	.ss6-bar {
		height: 44px; padding: 0 32px;
		display: flex; align-items: center; justify-content: space-between;
		background: var(--ss6-page); border-bottom: 1px solid var(--ss6-line);
		font-size: 12px; line-height: 12px;
	}
	.ss6-bar__cell { display: flex; align-items: center; height: 100%; position: relative; }
	/* Explicit start/end slot widths so the logo cell centers in the true remaining
	   space, instead of assuming flex:1 on all three cells centers it like V2. */
	.ss6-bar__cell--start { flex: 0 0 88px; }
	.ss6-bar__cell--logo { flex: 1 1 auto; justify-content: center; }
	.ss6-bar__cell--end { flex: 0 0 191px; justify-content: flex-end; gap: 24px; }
	/* Actual MENU/CLOSE hit box stays >=44px tall here, same geometry closed or open. */
	.ss6-ctl--menu, .ss6-ctl--close { min-width: 0; min-height: 44px; gap: 11.75px; }
	.ss6-ctl--menu .ss6-ctl__label, .ss6-ctl--close .ss6-ctl__label { width: 40px; text-align: left; }
	/* Desktop keeps its existing X icon; glyph is mobile-only (see base rule) to avoid
	   touching the accessible desktop close control. */
	.ss6-ctl--close::after { display: none; }
	/* Figma1440/1024 MENU text centers within the fixed 96/88 start slot; slot width
	   and logo position are untouched, only inner label alignment changes. */
	.ss6-bar__cell--start { justify-content: center; }
	.ss6-ctl--menu .ss6-ctl__label { text-align: center; }
	.ss6-ctl--menu::before, .ss6-ctl--close::before { inset: -8px -10px; }
	.ss6-logo { width: 160px; height: 16.29px; }
	/* Right cluster is search icon + EN/m pending + CONTACT pending only — no orb in V2. */
	.ss6-ctl--search {
		width: 44px; height: 44px; min-height: 0;
		display: inline-flex; align-items: center; justify-content: center;
	}
	.ss6-ctl--search::before { content: ''; position: absolute; inset: -10px; }
	.ss6-prefs { font-weight: 500; font-size: 12px; line-height: 15px; white-space: nowrap; color: var(--ss6-graphite); }
	.ss6-ctl--contact { min-height: 12px; gap: 16px; line-height: 12px; }
	.ss6-ctl--contact .ss6-ctl__label { font-weight: 400; font-size: 12px; opacity: 0.5; }
	.ss6-ctl--contact::before { content: ''; position: absolute; inset: -10px -6px; }
	/* Right slot stays 191px; search centers itself inside via its own 44px box,
	   shifting its visual center rightward to close the x1243→x1229-style gap at 1024. */
	.ss6-bar__cell--end { gap: 12px; }
}

@media (min-width: 1440px) {
	/* 1440 tier (2248:1164/1179): bar40, padding40, logo176, start slot96, end slot183. */
	.ss6-header, .ss6-m-shell { height: 40px; }
	.ss6-bar { height: 40px; padding: 0 40px; }
	.ss6-bar__cell--start { flex: 0 0 96px; }
	.ss6-bar__cell--end { flex: 0 0 183px; }
	.ss6-logo { width: 176px; height: 17.92px; }
	/* Bar itself is only 40px here, so the visible button can drop to 36px, still centered. */
	.ss6-ctl--menu, .ss6-ctl--close { min-height: 36px; }
	/* 1440: real 36px search button, 12px SVG centered inside; end-slot gap tightened
	   to pull the search glyph from local x1243 toward Figma x1229 without moving
	   the 183px slot boundary or CONTACT/EN order. */
	.ss6-ctl--search { width: 36px; height: 36px; }
	.ss6-bar__cell--end { gap: 10px; }
}

/* ---------- Dialog shell ---------- */
.ss6-menu { position: fixed; inset: 0; z-index: 1000; overflow: hidden; }
.ss6-menu[hidden] { display: none; }
.ss6-menu__panel {
	position: absolute; inset: 0; background: var(--ss6-page);
	display: flex; flex-direction: column; overflow: hidden;
	will-change: transform;
}
.ss6-level { flex: 1 1 auto; min-height: 0; }
.ss6-level[hidden] { display: none; }

.ss6-stage { background: var(--ss6-stage); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ss6-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }

.ss6-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; font-size: 14px; line-height: 21px; color: var(--ss6-secondary); }
.ss6-caption { font-size: 14px; line-height: 21px; color: var(--ss6-secondary); }
.ss6-body { font-size: 16px; line-height: 25px; color: var(--ss6-secondary); }
.ss6-action { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ss6-graphite); }
a.ss6-action:hover span, a.ss6-card__name:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ss6-card__name { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-weight: 600; color: var(--ss6-graphite); }

/* ---------- Desktop menu (≥1024) ---------- */
.ss6-menu--desktop { display: none; }
@media (min-width: 1024px) {
	.ss6-menu--desktop:not([hidden]) { display: block; }
	.ss6-menu--mobile { display: none !important; }

	.ss6-menu--desktop .ss6-level { overflow-y: auto; overscroll-behavior: contain; }

	/* Main 2042:246: pl66.25 pr81.25 pt48, gap96; links 480; preview 600 */
	.ss6-d-main { display: flex; gap: 96px; padding: 48px var(--ss6-gutter-r) 48px var(--ss6-gutter-l); }
	.ss6-d-main__nav { flex: 0 0 480px; }
	.ss6-d-main__list { display: flex; flex-direction: column; gap: 8px; }
	.ss6-d-main__link {
		display: flex; align-items: center; justify-content: space-between; width: 480px; height: 64px;
		font-family: var(--ss6-mont); font-weight: 600; font-size: 34px; line-height: 44px; color: var(--ss6-graphite);
	}
	.ss6-d-main__link > span { width: 400px; }
	.ss6-d-main__link.is-active { color: var(--ss6-warm-ink); }
	button.ss6-d-main__link:hover, a.ss6-d-main__link:hover { color: var(--ss6-warm-ink); }
	.ss6-d-main__preview { flex: 0 1 600px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
	.ss6-d-main__title { font-family: var(--ss6-mont); font-weight: 600; font-size: 44px; line-height: 52px; letter-spacing: -0.66px; }
	.ss6-d-main__stage { width: 100%; aspect-ratio: 2 / 1; }
	.ss6-d-main__caption { font-size: 16px; line-height: 24px; color: var(--ss6-secondary); }

	/* Products surface 2042:287: pt16 pb32, gap24; context row 44; columns 216/440/556.5 gap40 */
	.ss6-d-products { display: flex; flex-direction: column; gap: 24px; padding: 16px var(--ss6-gutter-r) 32px var(--ss6-gutter-l); }
	.ss6-d-products__context { display: flex; align-items: center; justify-content: space-between; height: 44px; }
	.ss6-d-products__crumb { font-weight: 600; font-size: 14px; line-height: 21px; color: var(--ss6-secondary); width: 100px; }
	.ss6-d-products__cols { display: flex; gap: 40px; align-items: flex-start; }
	.ss6-d-families { flex: 0 0 216px; display: flex; flex-direction: column; gap: 8px; }
	.ss6-d-families__list { display: flex; flex-direction: column; gap: 8px; }
	.ss6-family-ctl {
		display: flex; align-items: center; width: 216px; height: 56px; padding: 0 16px;
		font-weight: 500; font-size: 18px; line-height: 24px; color: var(--ss6-graphite);
		transition: background-color .2s ease, color .2s ease;
	}
	.ss6-family-ctl:hover { background: var(--ss6-stage); }
	.ss6-family-ctl[aria-pressed='true'] { background: var(--ss6-stage); color: var(--ss6-warm-ink); }
	/* 2042:322 breathing frame 160 sits between two 8px column gaps. */
	.ss6-d-families__all { margin-top: 168px; height: 44px; }
	.ss6-d-families__all .ss6-icon, .ss6-d-family .ss6-action .ss6-icon { width: 20px; height: 20px; }

	.ss6-d-family { flex: 1 1 auto; display: flex; gap: 40px; min-width: 0; }
	.ss6-d-family[hidden] { display: none; }
	.ss6-d-family__story { flex: 0 0 440px; display: flex; flex-direction: column; gap: 12px; }
	.ss6-d-family__title { font-family: var(--ss6-mont); font-weight: 600; font-size: 30px; line-height: 38px; letter-spacing: -0.3px; }
	.ss6-d-family__stage { width: 440px; height: 293.333px; }
	.ss6-d-family__range { flex: 1 1 556.5px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
	.ss6-d-family__range-title { font-family: var(--ss6-mont); font-weight: 600; font-size: 20px; line-height: 28px; }
	.ss6-d-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 266.25px)); column-gap: 24px; row-gap: 24px; }
	.ss6-d-cards .ss6-card { display: flex; flex-direction: column; gap: 12px; height: 220px; }
	.ss6-d-cards .ss6-card__stage { width: 100%; aspect-ratio: 266.25 / 143.45; }
	.ss6-d-cards .ss6-card__name { font-size: 18px; line-height: 24px; min-height: 52px; }
	.ss6-d-cards .ss6-card__name .ss6-icon { width: 18px; height: 18px; margin-top: 3px; }

	.ss6-search { padding: 16px var(--ss6-gutter-r) 32px var(--ss6-gutter-l); display: flex; flex-direction: column; gap: 40px; }
	.ss6-search__body { max-width: 720px; }
}

/* ---------- Mobile menu (<1024) ---------- */
@media (max-width: 1023px) {
	.ss6-menu--mobile .ss6-m-shell { flex: none; }
	.ss6-m-main { overflow-y: auto; overscroll-behavior: contain; padding: 28px 20px 24px; }
	.ss6-m-main__list { display: flex; flex-direction: column; gap: 12px; }
	.ss6-m-main__link {
		display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px;
		font-family: var(--ss6-mont); font-weight: 600; font-size: 26px; line-height: 34px; color: var(--ss6-graphite);
	}
	.ss6-m-main__link.is-active { color: var(--ss6-warm-ink); }
	/* 2045:606 tool row: h64 directly after the six rows at the column gap 12. */
	.ss6-m-tools { display: flex; align-items: center; justify-content: space-between; height: 64px; margin-top: 12px; padding-right: 30px; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--ss6-secondary); }
	.ss6-m-tools__search { min-height: 44px; min-width: 160px; text-align: left; }
	.ss6-m-tools__prefs { width: 80px; }

	.ss6-m-families, .ss6-m-family, .ss6-m-search { display: flex; flex-direction: column; }
	.ss6-m-families[hidden], .ss6-m-family[hidden], .ss6-m-search[hidden] { display: none; }
	.ss6-m-back { flex: none; height: 56px; padding: 0 20px; width: 100%; background: var(--ss6-page); }
	.ss6-m-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

	.ss6-m-families__body { display: flex; flex-direction: column; gap: 24px; padding: 24px 20px; }
	.ss6-m-title { font-family: var(--ss6-mont); font-weight: 600; font-size: 30px; line-height: 38px; letter-spacing: -0.3px; }
	.ss6-m-families__list { display: flex; flex-direction: column; gap: 24px; }
	.ss6-m-family-row {
		display: flex; align-items: center; justify-content: space-between; width: 100%; height: 76px;
		border-bottom: 1px solid var(--ss6-line);
		font-family: var(--ss6-mont); font-weight: 600; font-size: 21px; line-height: 28px; letter-spacing: -0.105px;
	}

	.ss6-m-family__body { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px 32px; }
	.ss6-m-family__body[hidden] { display: none; }
	.ss6-m-family__stage { width: 100%; aspect-ratio: 350 / 233.333; }
	.ss6-rule { border: 0; height: 1px; margin: 0; background: var(--ss6-line); }
	.ss6-m-range-title { font-family: var(--ss6-mont); font-weight: 600; font-size: 21px; line-height: 28px; letter-spacing: -0.105px; }
	.ss6-m-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.ss6-m-card { display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
	.ss6-m-card .ss6-card__stage { width: 100%; aspect-ratio: 169 / 126.75; }
	.ss6-m-card .ss6-card__name { font-size: 16px; line-height: 22px; min-height: 48px; }
	.ss6-m-card .ss6-card__name .ss6-icon { width: 18px; height: 18px; margin-top: 2px; }

	.ss6-m-search .ss6-search__body { padding: 24px 20px; }
}
@media (max-width: 359px) {
	/* 320 check: single-column series cards 280 wide, stage 280x186.667 */
	.ss6-m-cards { grid-template-columns: 1fr; }
	.ss6-m-card .ss6-card__stage { aspect-ratio: 280 / 143.45; }
}

/* ---------- Search compatibility form ---------- */
.ss6-searchform { display: flex; flex-direction: column; gap: 12px; }
.ss6-searchform__label { font-family: var(--ss6-mont); font-weight: 600; font-size: 30px; line-height: 38px; letter-spacing: -0.3px; color: var(--ss6-graphite); }
.ss6-searchform__row { display: flex; align-items: center; border-bottom: 1px solid var(--ss6-graphite); }
.ss6-searchform__input { flex: 1 1 auto; min-width: 0; height: 56px; border: 0; background: transparent; font: 400 18px/24px var(--ss6-inter); color: var(--ss6-graphite); padding: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.ss6-searchform__input:focus-visible { outline: none; }
.ss6-searchform__row:focus-within { box-shadow: 0 1px 0 0 var(--ss6-graphite); }
/* Explicit Clear (44px target) and unavailable notice; secondary type matches the Back/caption tokens. */
.ss6-searchform__clear { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 12px; font-weight: 500; font-size: 14px; line-height: 21px; color: var(--ss6-secondary); }
.ss6-searchform__clear:hover { color: var(--ss6-graphite); }
.ss6-searchform__status { margin: 0; font-size: 14px; line-height: 21px; color: var(--ss6-secondary); }

/* ---------- Scroll lock while open ---------- */
html.ss6-locked { overflow: hidden; }
html.ss6-locked body { position: fixed; left: 0; right: 0; width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.ss6-family-ctl { transition: none; }
}