/* Norvane chrome: header (two tiers + phone drawer) and footer. TODO 00001.5.12.
   Source of truth: design/DESIGN-GUIDE.md section 8 (Chrome), approved images
   design/home/inspiration/sections/header/r5/v3.png and closing-footer/r3/v1.png.
   Every value comes from theme.json presets/custom (generated from design/tokens.json). */

.norvane-chrome {
  --nc-gutter: 48px;
  --nc-rule-on-navy: rgba(255, 255, 255, 0.2);
  --nc-focus: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange);
  font-family: var(--wp--preset--font-family--montserrat);
  color: var(--wp--preset--color--ink);
}
.norvane-chrome, .norvane-chrome *, .norvane-chrome *::before, .norvane-chrome *::after { box-sizing: border-box; }
.norvane-chrome ul { list-style: none; margin: 0; padding: 0; }
.norvane-chrome a { text-decoration: none; }
.norvane-chrome :focus-visible {
  outline: var(--nc-focus);
  outline-offset: var(--wp--custom--focus--offset);
}
.p-icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.p-icon--20 { width: 20px; height: 20px; }
.p-icon--16 { width: 16px; height: 16px; }
.p-header__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.wp-site-blocks > .norvane-header-wrap {
  position: sticky; top: 0; z-index: 100; margin-block-start: 0;
}
.admin-bar .wp-site-blocks > .norvane-header-wrap { top: var(--wp-admin--admin-bar--height, 0px); }
.p-header { position: relative; background: var(--wp--preset--color--white); }
/* The one shadow, faded in as a pseudo-element after 8px of scroll (section 6 elevation). */
.p-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: var(--wp--custom--shadow); opacity: 0; transition: opacity 0.2s ease;
}
.p-header.is-shrunk::after { opacity: 1; }

.p-header__skip {
  position: absolute; left: 16px; top: -100px; z-index: 300;
  background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white);
  padding: 12px 16px; border-radius: var(--wp--custom--radius--default);
  font-size: var(--wp--preset--font-size--small); font-weight: 600;
}
.p-header__skip:focus-visible { top: 8px; }

.p-header__inner {
  width: min(100% - 2 * var(--nc-gutter), var(--wp--style--global--wide-size, 1360px));
  margin-inline: auto; display: flex; align-items: center; height: 100%;
}

.p-header__tier1 {
  position: relative; z-index: 1; background: var(--wp--preset--color--white);
  height: var(--wp--custom--header--tier-1);
  transition: height 0.2s cubic-bezier(.22, .61, .36, 1);
}
.p-header.is-shrunk .p-header__tier1 { height: var(--wp--custom--header--shrunk); }
.p-header__inner--tier1 { gap: var(--wp--preset--spacing--70); }

.p-header__logo { display: inline-flex; flex: none; line-height: 0; }
.p-header__logo img { height: 36px; width: auto; display: block; }

.p-header__icon-btn {
  display: none; align-items: center; justify-content: center;
  width: var(--wp--custom--touch); height: var(--wp--custom--touch);
  padding: 0; border: 0; background: transparent; color: var(--wp--preset--color--navy);
  border-radius: var(--wp--custom--radius--default); cursor: pointer;
}

/* AI search field: ai-surface ground, 1px ai edge, sparkles + AI SEARCH behind a divider. */
.p-header__search {
  flex: 1 1 auto; max-width: var(--wp--custom--header--search-max); margin-inline: auto;
  display: flex; align-items: center; height: var(--wp--custom--control);
  background: var(--wp--preset--color--ai-surface);
  border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default);
  padding-inline: var(--wp--preset--spacing--40) 0;
}
.p-header__search:focus-within {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy);
  outline-offset: var(--wp--custom--focus--offset);
}
.p-header__search-tag {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); flex: none;
  color: var(--wp--preset--color--ai); padding-right: var(--wp--preset--spacing--40);
  border-right: 1px solid var(--wp--preset--color--ai);
  height: 24px;
}
.p-header__search-label {
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
}
.p-header__search-input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent;
  padding: 0 0 0 var(--wp--preset--spacing--40);
  font: 400 var(--wp--preset--font-size--body)/1 var(--wp--preset--font-family--montserrat);
  color: var(--wp--preset--color--ink);
}
.p-header__search-input:focus { outline: none; }
.p-header__search-input::placeholder {
  color: color-mix(in srgb, var(--wp--preset--color--ink) 78%, var(--wp--preset--color--ai-surface)); opacity: 1;
  font-size: var(--wp--preset--font-size--nav);
}
.p-header__search-input::-webkit-search-cancel-button { display: none; }
.p-header__search-go {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--wp--custom--touch); height: 100%; border: 0; background: transparent; cursor: pointer;
  color: var(--wp--preset--color--ink);
}
.p-header__search-go:focus-visible { outline-color: var(--wp--preset--color--navy); outline-offset: -4px; }

.p-header__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--60); flex: none; }
.p-header__action {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: var(--wp--custom--touch); min-height: var(--wp--custom--touch);
  color: var(--wp--preset--color--navy); border-radius: var(--wp--custom--radius--default);
}
.p-header__action-label {
  font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1;
  color: var(--wp--preset--color--ink);
}
.p-header__action--admin {
  position: relative; margin-left: 0; padding-left: var(--wp--preset--spacing--60);
}
.p-header__action--admin::before {
  content: ""; position: absolute; left: 0; top: 50%; height: 40px; transform: translateY(-50%);
  border-left: 1px solid var(--wp--preset--color--line);
}
@media (hover: hover) and (pointer: fine) {
  .p-header__action:hover .p-header__action-label { text-decoration: underline; text-underline-offset: 3px; }
  .p-header__search-go:hover { color: var(--wp--preset--color--ai); }
}
.p-header__cart-icon { position: relative; display: inline-flex; }
.p-header__cart-count {
  position: absolute; top: -10px; right: -12px; min-width: 12px; height: 12px; padding: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--white); box-sizing: content-box;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 10px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Tier 2: navy category bar. */
.p-header__tier2 { background: var(--wp--preset--color--navy); height: var(--wp--custom--header--tier-2); }
.p-header__inner--tier2 { justify-content: space-between; gap: var(--wp--preset--spacing--70); }
.p-header__nav { height: 100%; min-width: 0; }
.p-header__nav-list { display: flex; align-items: stretch; gap: var(--wp--preset--spacing--80); height: 100%; }
.p-header__nav-list a {
  position: relative; display: inline-flex; align-items: center; height: 100%;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--nav); font-weight: var(--wp--custom--font-weight--nav);
  letter-spacing: var(--wp--custom--letter-spacing--nav); white-space: nowrap;
  text-underline-offset: 6px;
}
.p-header__nav-list a[aria-current="page"] { font-weight: 600; }
.p-header__nav-list a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px;
  background: var(--wp--preset--color--orange);
}
.p-header__nav-list a:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .p-header__nav-list a:not([aria-current="page"]):hover { text-decoration: underline 2px; }
}
.p-header__assistant {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30);
  height: 32px; padding: 0 var(--wp--preset--spacing--50); margin-left: var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--ai-surface); color: var(--wp--preset--color--ai);
  border: 0; border-radius: var(--wp--custom--radius--pill); cursor: pointer;
  font: 600 var(--wp--preset--font-size--nav)/1 var(--wp--preset--font-family--montserrat);
  letter-spacing: var(--wp--custom--letter-spacing--nav);
}
.p-header__assistant::before {
  content: ""; position: absolute; left: calc(-1 * var(--wp--preset--spacing--60)); top: -2px; bottom: -2px;
  border-left: 1px solid var(--wp--preset--color--slate);
}
.p-header__assistant:focus-visible { outline-color: var(--wp--preset--color--white); }
@media (hover: hover) and (pointer: fine) {
  .p-header__assistant:hover { background: var(--wp--preset--color--white); }
}

/* ---------- Header under 992: 64px white bar, drawer ---------- */
@media (max-width: 991.98px) {
  .norvane-chrome { --nc-gutter: 32px; }
  .p-header__tier1, .p-header.is-shrunk .p-header__tier1 { height: var(--wp--custom--header--phone); }
  .p-header__tier2, .p-header__search, .p-header__action--account, .p-header__action--admin { display: none; }
  .p-header__action .p-header__action-label { display: none; }
  .p-header__inner--tier1 { gap: var(--wp--preset--spacing--30); }
  .p-header__icon-btn { display: inline-flex; }
  .p-header__menu-btn { margin-left: -10px; }
  .p-header__logo img { height: 28px; }
  .p-header__actions { margin-left: auto; gap: var(--wp--preset--spacing--20); margin-right: -6px; }
  .p-header__action--cart { flex-direction: row; }
}
@media (max-width: 599.98px) {
  .norvane-chrome { --nc-gutter: 16px; }
}

.p-drawer { position: fixed; inset: 0; z-index: 200; }
.p-drawer[hidden] { display: none; }
.p-drawer__scrim {
  position: absolute; inset: 0; background: rgba(4, 36, 77, 0.45);
  opacity: 0; transition: opacity 0.25s ease;
}
.p-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(360px, 88vw);
  background: var(--wp--preset--color--white); box-shadow: var(--wp--custom--shadow);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--90);
  transform: translateX(-100%); transition: transform 0.3s cubic-bezier(.22, .61, .36, 1);
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60);
}
.p-drawer.is-open .p-drawer__scrim { opacity: 1; }
.p-drawer.is-open .p-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .p-drawer__scrim, .p-drawer__panel, .p-header__tier1, .p-header::after { transition: none; }
}
.p-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.p-drawer__top img { height: 28px; width: auto; display: block; }
.p-drawer__close { display: inline-flex; margin-right: -10px; }
.p-drawer__search { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.p-drawer__search-label {
  display: inline-flex; align-items: center; gap: 6px; color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--label); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--label);
}
.p-drawer__search-row {
  display: flex; height: var(--wp--custom--control);
  background: var(--wp--preset--color--ai-surface); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default);
}
.p-drawer__search-row:focus-within {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy);
  outline-offset: var(--wp--custom--focus--offset);
}
.p-drawer__search-row input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
  font: 400 var(--wp--preset--font-size--body)/1 var(--wp--preset--font-family--montserrat);
  color: var(--wp--preset--color--ink);
}
.p-drawer__search-row input:focus { outline: none; }
.p-drawer__search-row input::placeholder {
  color: color-mix(in srgb, var(--wp--preset--color--ink) 78%, var(--wp--preset--color--ai-surface)); opacity: 1;
  font-size: var(--wp--preset--font-size--nav);
}
.p-drawer__search-row button {
  width: var(--wp--custom--touch); border: 0; background: transparent; color: var(--wp--preset--color--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.p-drawer__search-row button:focus-visible { outline-color: var(--wp--preset--color--navy); outline-offset: -4px; }
.p-drawer__cats { border-top: 1px solid var(--wp--preset--color--line); }
.p-drawer__cats li { border-bottom: 1px solid var(--wp--preset--color--line); }
.p-drawer__cats a {
  display: flex; align-items: center; min-height: 52px; color: var(--wp--preset--color--navy);
  font-size: 18px; font-weight: 500; line-height: 1.3;
}
.p-drawer__cats a[aria-current="page"] {
  font-weight: 600; box-shadow: inset 3px 0 0 var(--wp--preset--color--orange); padding-left: 12px;
}
.p-drawer__links a {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); min-height: var(--wp--custom--touch);
  color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); font-weight: 500;
}
.p-drawer__links .p-icon { color: var(--wp--preset--color--navy); }
.p-drawer__assistant {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--30);
  height: var(--wp--custom--control); padding: 0 var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--ai-surface); color: var(--wp--preset--color--ai);
  border: 1px solid var(--wp--preset--color--ai); border-radius: var(--wp--custom--radius--default);
  font: 600 var(--wp--preset--font-size--button)/1 var(--wp--preset--font-family--montserrat); cursor: pointer;
}
.p-drawer__assistant:focus-visible { outline-color: var(--wp--preset--color--navy); }
@media (hover: hover) and (pointer: fine) {
  .p-drawer__cats a:hover, .p-drawer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
html.norvane-drawer-open { overflow: hidden; }

/* ---------- Footer ---------- */
.wp-site-blocks > .norvane-footer-wrap { margin-block-start: 0; }
.p-footer { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.p-footer__inner {
  width: min(100% - 2 * var(--nc-gutter), var(--wp--style--global--wide-size, 1360px)); margin-inline: auto;
  padding-block: var(--wp--preset--spacing--100) var(--wp--preset--spacing--70);
}
.p-footer a { color: var(--wp--preset--color--white); }
.p-footer :focus-visible { outline-color: var(--wp--preset--color--orange); }
.p-footer__top {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: var(--wp--preset--spacing--90);
  align-items: start;
}
.p-footer__logo { display: inline-flex; line-height: 0; }
.p-footer__logo img { height: 40px; width: auto; display: block; }
.p-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--70); }
.p-footer__col {
  border-left: 1px solid var(--nc-rule-on-navy); padding-left: var(--wp--preset--spacing--70);
}
.p-footer .p-footer__title {
  margin: 0 0 var(--wp--preset--spacing--50); color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--h-4); font-weight: var(--wp--custom--font-weight--h-4);
  line-height: 1.35; letter-spacing: 0;
}
.p-footer__col li + li { margin-top: 4px; }
.p-footer__col a {
  display: inline-block; padding-block: 4px;
  font-size: var(--wp--preset--font-size--nav); font-weight: 400; line-height: 1.6;
  letter-spacing: var(--wp--custom--letter-spacing--nav);
}
@media (hover: hover) and (pointer: fine) {
  .p-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.p-footer__utility {
  margin-top: var(--wp--preset--spacing--90);
  display: flex; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--nc-rule-on-navy); border-bottom: 1px solid var(--nc-rule-on-navy);
  padding-block: var(--wp--preset--spacing--40);
}
.p-footer__util {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--40); min-height: var(--wp--custom--touch);
  margin: 0; padding-inline: var(--wp--preset--spacing--60);
  font-size: var(--wp--preset--font-size--nav); line-height: 1.4;
}
.p-footer__util:first-child { padding-left: 0; }
.p-footer__util + .p-footer__util { border-left: 1px solid var(--nc-rule-on-navy); }
.p-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--60);
  font-size: var(--wp--preset--font-size--small);
}
.p-footer__legal p { margin: 0; }
.p-footer__legal ul { display: flex; gap: var(--wp--preset--spacing--80); }
.p-footer__legal a { display: inline-block; padding-block: 8px; }

@media (max-width: 1199.98px) {
  .p-footer__top { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--80); }
  .p-footer__col { padding-left: var(--wp--preset--spacing--60); }
}
@media (max-width: 991.98px) {
  .p-footer__top { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--80); }
  .p-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--wp--preset--spacing--80); }
}
@media (max-width: 599.98px) {
  .p-footer__inner { padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--60); }
  .p-footer__cols { grid-template-columns: 1fr; }
  .p-footer__col { padding-left: var(--wp--preset--spacing--60); }
  .p-footer__utility { flex-direction: column; align-items: flex-start; }
  .p-footer__util { padding-left: 0; }
  .p-footer__util + .p-footer__util { border-left: 0; }
  .p-footer__legal { flex-direction: column; align-items: flex-start; }
}