/* Header and the primary navigation (patterns/site-nav.php, assets/js/nav.js). */

/* Header: a masthead in three — search left, the mark centred, account and bag right — and the menu centred beneath it. The "Prints" panel hangs from the header itself. */
.contour-header { position: relative; z-index: 40; }
:root { --contour-bar-h: 60px; }
.contour-masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "search brand actions" "nav nav nav"; align-items: center; column-gap: var(--wp--preset--spacing--30); }
.contour-masthead > * { margin: 0 !important; }
.contour-masthead > .contour-search { grid-area: search; justify-self: start; width: min(260px, 100%); }
.contour-masthead > .contour-brand { grid-area: brand; justify-self: center; }
.contour-masthead > .contour-header-actions { grid-area: actions; justify-self: end; gap: var(--wp--preset--spacing--20); }
.contour-masthead > .contour-nav { grid-area: nav; margin-top: var(--wp--preset--spacing--20) !important; }
.contour-brand--masthead .contour-brand-name { font-size: 1.85rem; }
.contour-brand--masthead .wp-block-contour-mark { width: 32px; height: 36px; }
.contour-header .wc-block-mini-cart__button, .contour-header .wc-block-customer-account a { display: inline-flex; align-items: center; padding: 8px; color: var(--wp--preset--color--ink); }
.contour-header .wc-block-customer-account svg { width: 24px; height: 24px; }
.contour-header .wc-block-mini-cart__badge { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.contour-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Search (patterns/site-search.php): a quiet underlined field on a desktop; on a phone an icon that opens it under the header. */
.contour-search-toggle { display: none; }
.contour-search-form { position: relative; display: flex; align-items: center; width: 100%; }
.contour-search-icon { position: absolute; left: 0; display: inline-flex; color: var(--wp--preset--color--muted); pointer-events: none; }
.contour-search-input { width: 100%; padding: 0.45rem 0 0.45rem 1.7rem; border: 0; border-bottom: 1px solid var(--wp--preset--color--line); border-radius: 0; background: transparent; color: var(--wp--preset--color--ink); font: inherit; font-size: var(--wp--preset--font-size--small); -webkit-appearance: none; appearance: none; }
.contour-search-input::placeholder { color: var(--wp--preset--color--muted); }
.contour-search-input:focus { outline: 0; border-bottom-color: var(--wp--preset--color--ink); }
.contour-search-input:focus + .contour-search-icon, .contour-search-form:focus-within .contour-search-icon { color: var(--wp--preset--color--ink); }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* --- Primary navigation (patterns/site-nav.php, assets/js/nav.js) --------- */
.contour-nav { position: static; }
.contour-nav-toggle { display: none; }
.contour-menu-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.contour-menu-item { position: static; display: flex; align-items: center; }
.contour-menu-link { display: inline-flex; align-items: center; padding: 0.5rem 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 500; letter-spacing: 0.01em; text-decoration: none; }
.contour-menu-link:hover, .has-mega:hover > .contour-menu-link, .has-mega.is-open > .contour-menu-link { color: var(--wp--preset--color--ink); }
.contour-menu-expand { display: inline-flex; align-items: center; padding: 0.35rem 0.2rem; margin-left: 0.1rem; border: 0; background: none; color: var(--wp--preset--color--muted); cursor: pointer; }
.contour-chevron { transition: transform 0.15s; }
.has-mega:hover .contour-chevron, .has-mega.is-open .contour-chevron { transform: rotate(180deg); }
.contour-menu-list { justify-content: center; }
.contour-menu-studio .contour-menu-link { padding: 0.4rem 0.9rem; border-radius: 4px; background: var(--wp--preset--color--accent); color: #fff; font-weight: 600; }
.contour-menu-studio .contour-menu-link:hover { background: var(--wp--preset--color--ink); color: #fff; }
@media (min-width: 900px) {
	.contour-nav { border-top: 1px solid var(--wp--preset--color--line); padding: 0.35rem 0; }
}
.contour-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.4rem; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; font-family: var(--wp--preset--font-family--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); vertical-align: middle; }
.contour-card--coming .contour-card-desc { color: var(--wp--preset--color--muted); }

/* The panel: full width under the header, four group columns and the collection card. Hover and focus open it with no script; the chevron toggles it. */
.contour-mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--line); box-shadow: 0 24px 40px -24px rgba(23, 21, 15, 0.25); }
.contour-mega-inner { max-width: 1180px; margin: 0 auto; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 200px; gap: var(--wp--preset--spacing--40); }
.contour-mega-heading { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.contour-mega-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.contour-mega-links a { display: inline-flex; align-items: center; padding: 0.25rem 0; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--display); font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.contour-mega-links a:hover { color: var(--wp--preset--color--accent); }
/* A family's own named prints, beneath it: indented, a size down. */
.contour-mega-sub a { padding-left: 0.75rem; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-soft); }
.contour-mega-feature { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--sink); text-decoration: none; color: var(--wp--preset--color--ink); }
.contour-mega-feature-art { display: block; width: 110px; }
.contour-mega-feature-art .contour-frame { padding: 3px; }
.contour-mega-feature strong { font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.contour-mega-feature span:last-child { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.contour-mega-feature:hover strong { color: var(--wp--preset--color--accent); }
@media (min-width: 900px) {
	.has-mega:hover .contour-mega, .has-mega:focus-within .contour-mega, .has-mega.is-open .contour-mega { display: block; }
	html.no-js .has-mega:hover .contour-mega, html.no-js .has-mega:focus-within .contour-mega { display: block; }
}

/* The phone: a Menu button, the list full-screen under the header in the display face, the Prints panel folded inside it; the Studio link only here. */
@media (max-width: 899px) {
	/* Menu and search left, the mark centred, account and bag right: the two sides the same width so the mark sits true. */
	.contour-header { padding-bottom: var(--wp--preset--spacing--20) !important; }
	.contour-masthead { grid-template-columns: 88px minmax(0, 1fr) 88px; grid-template-areas: "left brand actions"; column-gap: 0; }
	.contour-masthead > .contour-nav { grid-area: left; justify-self: start; display: flex; align-items: center; margin-top: 0 !important; }
	.contour-masthead > .contour-search { grid-area: left; justify-self: start; width: auto; margin-left: 44px !important; }
	.contour-masthead > .contour-header-actions { gap: 0; }
	.contour-brand--masthead .contour-brand-name { font-size: 1.45rem; }
	.contour-brand--masthead .wp-block-contour-mark { width: 24px; height: 27px; }
	.contour-brand--masthead { gap: 7px; }
	.contour-header .wc-block-mini-cart__button, .contour-header .wc-block-customer-account a { padding: 10px 6px; }
	.contour-search-toggle { display: inline-flex; align-items: center; padding: 10px; border: 0; background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
	.contour-search-form { display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--line); }
	.contour-search-icon { left: var(--wp--preset--spacing--40); }
	.contour-search-input { font-size: 1rem; }
	.contour-search.is-open .contour-search-form, html.no-js .contour-search-form { display: flex; }
	html.no-js .contour-search-toggle { display: none; }
	.contour-menu-studio .contour-menu-link { padding: 0.9rem 0; background: none; color: var(--wp--preset--color--accent); border-radius: 0; }
	.contour-nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 10px; margin: -10px; border: 0; background: none; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--small); font-weight: 500; cursor: pointer; }
	.contour-nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.contour-nav-toggle-bars { display: flex; flex-direction: column; gap: 5px; width: 22px; }
	.contour-nav-toggle-bars i { display: block; height: 2px; background: currentColor; transition: transform 0.15s, opacity 0.15s; }
	.contour-nav.is-open .contour-nav-toggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.contour-nav.is-open .contour-nav-toggle-bars i:nth-child(2) { opacity: 0; }
	.contour-nav.is-open .contour-nav-toggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.contour-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; min-height: calc(100dvh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow: auto; background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--line); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
	.contour-nav.is-open .contour-menu, html.no-js .contour-menu { display: block; }
	html.contour-menu-open { overflow: hidden; }
	.contour-menu-list { flex-direction: column; align-items: stretch; gap: 0; }
	.contour-menu-item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--wp--preset--color--line); }
	.contour-menu-link { flex: 1; padding: 0.9rem 0; font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 700; color: var(--wp--preset--color--ink); }
	.contour-menu-expand { padding: 0.9rem 0.6rem; color: var(--wp--preset--color--ink); }
	.contour-chevron { width: 18px; height: 18px; }
	.contour-mega { position: static; flex-basis: 100%; border: 0; box-shadow: none; }
	.has-mega.is-open .contour-mega, html.no-js .contour-mega { display: block; }
	.contour-mega-inner { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); padding: 0 0 var(--wp--preset--spacing--40); }
	.contour-mega-links a { font-size: 1.05rem; padding: 0.3rem 0; }
	.contour-mega-feature { display: none; }
}

/* The bar (nav.js): once the masthead has scrolled out of view the header comes back fixed and slim, one row. Its template-part wrapper keeps the masthead's height, so the page never jumps. */
.contour-header.is-compact { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; padding-top: 0 !important; padding-bottom: 0 !important; box-shadow: 0 10px 24px -20px rgba(23, 21, 15, 0.45); animation: contour-bar-in 0.2s ease-out; }
.contour-header.is-compact .contour-masthead { height: var(--contour-bar-h); }
@keyframes contour-bar-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .contour-header.is-compact { animation: none; } }
@media (min-width: 900px) {
	/* The mark left, the menu centred, then search as an icon, account and bag. */
	.is-compact .contour-masthead { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand nav search actions"; column-gap: var(--wp--preset--spacing--20); }
	.is-compact .contour-masthead > .contour-brand { justify-self: start; }
	.is-compact .contour-brand--masthead .contour-brand-name { font-size: 1.35rem; }
	.is-compact .contour-brand--masthead .wp-block-contour-mark { width: 22px; height: 25px; }
	.is-compact .contour-brand-label { display: none; }
	.is-compact .contour-masthead > .contour-nav { margin-top: 0 !important; border-top: 0; padding: 0; }
	.is-compact .contour-masthead > .contour-search { width: auto; }
	.is-compact .contour-search-toggle { display: inline-flex; align-items: center; padding: 8px; border: 0; background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
	.is-compact .contour-search-form { --pad: max(var(--wp--preset--spacing--40), calc((100% - 1180px) / 2)); display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: var(--wp--preset--spacing--30) var(--pad); background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--line); }
	.is-compact .contour-search-icon { left: var(--pad); }
	.is-compact .contour-search.is-open .contour-search-form { display: flex; }
}
@media (max-width: 899px) { :root { --contour-bar-h: 56px; } }