.utility-bar {
  height: 36px;
  color: var(--bg);
  background: var(--brand);
  font-size: 13px;
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 86px;
}

.brand-link {
  flex: 0 0 164px;
}

.brand-link img {
  width: 160px;
  height: auto;
}

.site-search {
  display: flex;
  flex: 1;
  height: 44px;
}

.site-search input {
  min-width: 0;
  flex: 1;
  padding: 0 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  outline: none;
}

.site-search input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-050);
}

.site-search button {
  padding: 0 22px;
  color: var(--bg);
  border: 1px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand);
  cursor: pointer;
}

.account-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
}

.cart-menu {
  position: relative;
}

.cart-menu:hover .cart-preview,
.cart-menu:focus-within .cart-preview {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.category-nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.category-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  height: 52px;
  font-weight: 500;
}

/* 面包屑直接压在页面底色上，所以不能用 --ink-3（那只有 4.24:1） */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.breadcrumb a {
  color: var(--ink-2);
}

/* 通栏产品头：整页只有这一个大字，是全页的锚点。
   阶段 21 把它压到 32px 并收紧上下留白——首屏上方每省 10px，
   下面的卡片轨就多露 10px。 */
.product-header {
  max-width: min(1440px, var(--container));
  padding-top: 2px;
  padding-bottom: 12px;
}

.product-header h1 {
  max-width: 46ch;
  margin-bottom: 8px;
  font-size: 32px;
}

/* 产品头直接压在页面底色上：cta-900 在这个底上只有 4.085:1，
   所以文字走 --ink，只有装饰性的星形留在 cta-900（非文本门槛 3.0） */
.product-header .rating {
  color: var(--ink);
}

.product-header .rating span {
  color: var(--cta-900);
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(400px, 31%, 452px);
  align-items: flex-start;
  gap: var(--hero-gap);
  max-width: min(1440px, var(--container));
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 8px;
  padding-left: 0;
}

/* 左右两栏都是「若干块面板」，间距由 --panel-gap 统一 */
.hero-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--panel-gap);
}

.product-media {
  min-width: 0;
}

.purchase-column {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--panel-gap);
}

.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: var(--space-8);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-1);
}

.section-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  height: 52px;
  font-weight: 500;
}

.section-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.section-nav a::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brand);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

.section-nav a.is-active {
  color: var(--brand-900);
}

.section-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.section-nav a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.section-nav a:focus-visible:not(.is-active)::after {
  opacity: 0;
  transform: scaleX(.4);
}

#overview,
#accessory-rail,
#related-rail,
#specifications,
#downloads,
#reviews,
#details,
#size-comparison {
  scroll-margin-top: 76px;
}

/* 区块之间不再交替底色（规格区和下载区两个 soft 相邻，会粘成一整块灰板）。
   分区靠「浅灰的地 + 白色面板 + 面板间距」完成。 */
.content-section {
  padding: 0;
}

/* 首屏下方的速览带：核心规格（宽）+ 选它的理由（窄） */
.overview-band {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--panel-gap);
  max-width: min(1440px, var(--container));
}

.content-section + .content-section {
  padding-top: var(--panel-gap);
}

.content-section:first-of-type {
  padding-top: var(--space-8);
}

/* 吸顶导航后面的第一块面板要留出缝，否则会贴在导航下沿上 */
.section-nav + .content-section {
  padding-top: var(--panel-gap);
}

.content-section:last-of-type {
  padding-bottom: var(--section-pad);
}

.site-footer {
  padding: var(--space-14) 0 var(--space-6);
  color: var(--bg);
  background: var(--brand-700);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.2fr 1.2fr;
  gap: 48px;
}

.footer-grid h3 {
  color: var(--bg);
  text-transform: uppercase;
}

.footer-grid a,
.footer-grid p {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-050);
  font-size: 13px;
}

.footer-grid a:hover {
  color: var(--bg);
}

.footer-legal {
  margin-top: var(--space-10);
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.24);
  color: var(--brand-050);
  font-size: 13px;
}