/* A single, quiet frame for Xinpu's material collections. Scoped independently
   from legacy theme buttons and the Floor Studio UI. */
.xpn-header {
  --xpn-ink: #1f282b;
  --xpn-muted: #697174;
  --xpn-orange: #ef6d24;
  --xpn-line: #e5e8e7;
  --xpn-field: #f4f5f3;
  --xpn-height: 78px;
  --xpn-admin: 0px;
  position: sticky;
  top: var(--xpn-admin);
  z-index: 80;
  background: #fff;
  border-bottom: 1px solid var(--xpn-line);
  color: var(--xpn-ink);
  line-height: 1.4;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.admin-bar .xpn-header { --xpn-admin: 32px; top: var(--xpn-admin); }
.xpn-inner {
  width: min(1400px, calc(100% - 80px));
  min-height: var(--xpn-height);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(310px, 1fr);
  align-items: center;
  column-gap: 32px;
}
.xpn-header a { color: inherit; text-decoration: none; }
.xpn-header button { font: inherit; color: inherit; }
.xpn-header a:focus-visible, .xpn-header button:focus-visible {
  outline: 2px solid var(--xpn-orange);
  outline-offset: 5px;
}
.xpn-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.xpn-brand-image { flex: 0 0 auto; width: 46px; height: 46px; object-fit: contain; background: #050607; border-radius: 3px; }
.xpn-wordmark { font-size: 31px; font-weight: 750; letter-spacing: -1px; line-height: 1; }
.xpn-wordmark small { display: block; font-size: 9px; font-weight: 400; letter-spacing: 1.2px; line-height: 1.6; color: var(--xpn-muted); }
.xpn-drawer { display: contents; }
.xpn-header .xpn-primary { display: block; width: auto; order: initial; padding: 0; }
.xpn-menu { display: flex; align-items: center; gap: 30px; list-style: none; padding: 0; margin: 0; }
.xpn-menu > li { margin: 0; padding: 0; }
.xpn-menu > li > a, .xpn-category-head > a {
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--xpn-height);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.xpn-category-head { display: flex; align-items: center; gap: 1px; }
.xpn-menu > li > a::after, .xpn-category-head > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 2px;
  background: var(--xpn-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}
.xpn-menu > li.current-menu-item > a::after,
.xpn-menu > li.current-menu-ancestor > a::after,
.xpn-menu > li.current-menu-item > .xpn-category-head > a::after,
.xpn-menu > li.current-menu-ancestor > .xpn-category-head > a::after,
.xpn-menu > li > a:hover::after,
.xpn-menu > li > a:focus-visible::after,
.xpn-category-head > a:hover::after,
.xpn-category-head > a:focus-visible::after,
.xpn-menu > li.is-expanded > .xpn-category-head > a::after { transform: scaleX(1); }
.xpn-disclosure, .xpn-menu-button { display: none; background: none; border: 0; border-radius: 0; padding: 0; }
.xpn-header.is-enhanced .xpn-disclosure { display: grid; width: 28px; height: 44px; place-items: center; }
.xpn-disclosure svg { transition: transform 160ms ease; }
.xpn-disclosure[aria-expanded='true'] svg { transform: rotate(180deg); }
.xpn-utilities { display: flex; justify-content: end; align-items: center; gap: 22px; }
.xpn-designer { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.xpn-designer:hover { text-decoration: underline; text-underline-offset: 5px; }
.xpn-quote {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 11px 16px;
  border: 1px solid var(--xpn-orange);
  background: var(--xpn-orange);
  color: var(--xpn-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
.xpn-quote:hover { background: #fa8644; border-color: #fa8644; }
.xpn-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  max-height: calc(100dvh - var(--xpn-height) - var(--xpn-admin));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-top: 1px solid var(--xpn-line);
  box-shadow: 0 16px 24px -22px rgba(15, 29, 31, .5);
}
.xpn-panel-inner {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 3fr);
  align-items: start;
  gap: 56px;
  width: min(1400px, calc(100% - 80px));
  margin-inline: auto;
  padding-block: 34px 32px;
}
.xpn-panel-intro { padding-top: 4px; }
.xpn-panel-intro h2 {
  color: var(--xpn-ink);
  font-family: inherit;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -1.1px;
  margin: 0 0 15px;
}
.xpn-panel-intro p { color: var(--xpn-muted); font-size: 13px; line-height: 1.65; max-width: 27ch; margin: 0 0 23px; }
.xpn-explore { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 650; }
.xpn-explore:hover { text-decoration: underline; text-underline-offset: 5px; }
.xpn-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.xpn-product { display: block; min-width: 0; }
.xpn-product-image { display: flex; align-items: center; justify-content: center; background: var(--xpn-field); aspect-ratio: 1.58; overflow: hidden; margin-bottom: 14px; }
.xpn-product-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; transition: transform 200ms ease; }
.xpn-product:hover img, .xpn-product:focus-visible img { transform: scale(1.04); }
.xpn-product-family { display: block; margin-bottom: 5px; color: var(--xpn-muted); font-size: 11px; line-height: 1.4; }
.xpn-product-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.25px; line-height: 1.35; }
.xpn-product:hover .xpn-product-name { text-decoration: underline; text-decoration-color: var(--xpn-orange); text-underline-offset: 5px; }
.xpn-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 15px max(40px, calc((100% - 1400px) / 2)); border-top: 1px solid var(--xpn-line); background: var(--xpn-field); color: var(--xpn-muted); font-size: 12px; }
.xpn-panel-foot a { color: var(--xpn-ink); font-weight: 600; }
.xpn-panel-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.xpn-backdrop { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--xpn-height) - var(--xpn-admin)); z-index: 1; background: rgba(20, 30, 33, .18); }
/* Native WordPress child links remain available if an editor adds them. */
.xpn-menu .sub-menu { position: absolute; top: 100%; z-index: 3; min-width: 220px; padding: 14px 20px; margin: 0; list-style: none; background: #fff; border: 1px solid var(--xpn-line); visibility: hidden; }
.xpn-menu li:hover > .sub-menu, .xpn-menu li:focus-within > .sub-menu { visibility: visible; }
.xpn-menu .sub-menu a { display: block; padding: 9px 0; font-size: 13px; }
.xpn-menu .sub-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1280px) and (min-width: 1121px) {
  .xpn-inner { column-gap: 24px; grid-template-columns: minmax(145px, 1fr) auto minmax(285px, 1fr); }
  .xpn-menu { gap: 24px; }
  .xpn-utilities { gap: 16px; }
  .xpn-designer { font-size: 11px; }
  .xpn-quote { padding-inline: 13px; gap: 10px; }
}
@media (max-width: 1120px) {
  .xpn-header { --xpn-height: 76px; }
  .xpn-inner { width: calc(100% - 48px); grid-template-columns: 1fr auto; gap: 0; }
  .xpn-header.is-enhanced .xpn-menu-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 68px; justify-content: end; font-size: 13px; font-weight: 600; }
  .xpn-menu-icon { display: flex; flex-direction: column; gap: 5px; width: 21px; }
  .xpn-menu-icon span { display: block; height: 1.5px; width: 21px; background: currentColor; transition: transform 160ms ease; }
  .xpn-menu-button[aria-expanded='true'] .xpn-menu-icon span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .xpn-menu-button[aria-expanded='true'] .xpn-menu-icon span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .xpn-drawer { display: block; grid-column: 1 / -1; padding-block: 15px 25px; }
  .xpn-header.is-enhanced .xpn-drawer { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; background: #fff; max-height: calc(100dvh - var(--xpn-height) - var(--xpn-admin)); overflow-y: auto; overscroll-behavior: contain; padding: 12px 24px 25px; border-top: 1px solid var(--xpn-line); border-bottom: 1px solid var(--xpn-line); }
  .xpn-menu { display: block; }
  .xpn-menu > li { border-bottom: 1px solid var(--xpn-line); }
  .xpn-menu > li > a, .xpn-category-head > a { min-height: 58px; font-size: 18px; font-weight: 550; letter-spacing: -.35px; }
  .xpn-category-head { gap: 8px; justify-content: space-between; }
  .xpn-category-head > a { flex: 1; }
  .xpn-menu > li > a::after, .xpn-category-head > a::after { bottom: 11px; right: auto; width: 24px; }
  .xpn-header.is-enhanced .xpn-disclosure { height: 48px; width: 48px; }
  .xpn-disclosure svg { width: 14px; height: 14px; }
  .xpn-panel { position: static; max-height: none; overflow: visible; border-top: 0; box-shadow: none; padding: 3px 0 20px; }
  .xpn-panel-inner { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; }
  .xpn-panel-intro { order: 2; margin-top: 17px; padding: 0; }
  .xpn-panel-intro h2, .xpn-panel-intro p { display: none; }
  .xpn-products { order: 1; width: 100%; gap: 18px; }
  .xpn-product-image { aspect-ratio: 1.6; margin-bottom: 10px; }
  .xpn-product-image img { padding: 5px; }
  .xpn-product-name { font-size: 14px; }
  .xpn-product-family { font-size: 10px; }
  .xpn-panel-foot { padding: 14px 0 0; background: none; margin-top: 19px; font-size: 12px; }
  .xpn-panel-foot > span { display: none; }
  .xpn-utilities { justify-content: space-between; gap: 20px; padding-top: 25px; }
  .xpn-designer { font-size: 13px; }
  .xpn-quote { font-size: 12px; min-height: 46px; padding-inline: 18px; }
  .xpn-menu .sub-menu { position: static; visibility: visible; border: 0; padding: 0 0 15px 16px; min-width: 0; }
  .xpn-menu .sub-menu .sub-menu { padding-bottom: 0; }
  /* Links stay visible and usable before JS loads or if scripts are blocked. */
  .xpn-header:not(.is-enhanced) .xpn-brand { padding-block: 20px; }
  .xpn-header:not(.is-enhanced) .xpn-drawer { width: 100%; }
}
@media (max-width: 782px) { .admin-bar .xpn-header { --xpn-admin: 46px; top: var(--xpn-admin); } }
@media (max-width: 760px) {
  .xpn-brand-image { width: 36px; height: 36px; }
  .xpn-wordmark { font-size: 28px; }
  .xpn-wordmark small { font-size: 8px; }
}
@media (max-width: 600px) { .admin-bar .xpn-header { --xpn-admin: 0px; top: 0; } }
@media (max-width: 520px) {
  .xpn-inner { width: calc(100% - 36px); }
  .xpn-header.is-enhanced .xpn-drawer { padding-inline: 18px; }
  .xpn-products { display: block; }
  .xpn-product { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 15px; align-content: center; padding-block: 8px; }
  .xpn-product-image { grid-column: 1; grid-row: 1 / 3; height: 66px; margin: 0; aspect-ratio: auto; }
  .xpn-product-family { grid-column: 2; align-self: end; margin-bottom: 4px; }
  .xpn-product-name { grid-column: 2; align-self: start; }
  .xpn-product:not(:has(.xpn-product-image)) { display: block; }
  .xpn-panel-foot { margin-top: 9px; }
  .xpn-utilities { gap: 12px; }
  .xpn-designer { gap: 7px; font-size: 12px; }
  .xpn-quote { gap: 9px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .xpn-header *, .xpn-header *::before, .xpn-header *::after { transition: none !important; animation: none !important; }
}