/* ============================================
   FENLERN Official Website Stylesheet
   ============================================ */

/* ── CSS Variables ── */
:root {
  /* 全站统一字族 Noto Sans SC（思源黑体）：中英文同一字族，
     400 正文 / 700 标题 / 900 大标题（见 fonts/fonts.css）。
     标题与正文同族，仅以字重与字号区分层级（对齐 Salomon Sans 的做法）。 */
  --font-display: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* 字号层级 */
  --fs-2xs: 11px;   /* 角标/页码等极小文字 */
  --fs-xs: 12px;    /* 辅助信息、页脚链接 */
  --fs-sm: 13px;    /* 标签、按钮小字 */
  --fs-base: 15px;  /* 商品卡、常规 UI */
  --fs-md: 16px;    /* 正文基准 */
  --fs-lg: 18px;    /* 强调正文 */
  --fs-xl: 22px;    /* 小标题 */
  --fs-2xl: clamp(24px, 2.4vw, 32px);
  --fs-3xl: clamp(28px, 3.4vw, 46px);
  --fs-4xl: clamp(34px, 5vw, 68px);
  --lh-tight: 1.15;
  --lh-base: 1.6;

  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-bg-dark: #0a0a0a;
  --color-text: #1a1a1a;
  --color-text-alt: #6b6b6b;
  --color-text-inv: #ffffff;
  --color-accent: #c41230;
  --color-accent-hover: #a00e26;
  --color-border: #e0e0e0;
  --color-border-dark: #333333;

  --badge-pink: #f8a4b8;
  --badge-red: #d32f2f;
  --badge-green: #2e7d32;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --container-max: 1680px;
  --container-gutter: 24px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.35s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);
}

/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 始终预留滚动条槽位，避免弹窗锁滚动时滚动条消失导致页面抖动 */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

ul { list-style: none; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

/* ── Announcement Bar ── */
.announcement-bar {
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
  text-align: center;
  padding: 8px 16px;
  font-size: var(--fs-xs);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1001;
}

.announcement-bar strong { color: #ff6b6b; }

/* ── Navbar ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), background var(--transition-base);
}

.navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }

.nav-inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.menu-toggle:hover { background: var(--color-bg-alt); }

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* ── 顶部下拉分类面板 ── */
body.no-scroll { overflow: hidden; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s 0.25s;
}

.nav-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s;
}

.nav-dropdown-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 22px var(--container-gutter) 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.nav-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 4px 12px;
  border-radius: 14px;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(-8px);
  transition: background var(--transition-fast), opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.nav-dropdown.open .nav-dropdown-item { opacity: 1; transform: none; }
.nav-dropdown.open .nav-dropdown-item:nth-child(1) { transition-delay: 0s, 0.03s, 0.03s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(2) { transition-delay: 0s, 0.05s, 0.05s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(3) { transition-delay: 0s, 0.07s, 0.07s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(4) { transition-delay: 0s, 0.09s, 0.09s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(5) { transition-delay: 0s, 0.11s, 0.11s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(6) { transition-delay: 0s, 0.13s, 0.13s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(7) { transition-delay: 0s, 0.15s, 0.15s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(8) { transition-delay: 0s, 0.17s, 0.17s; }
.nav-dropdown.open .nav-dropdown-item:nth-child(9) { transition-delay: 0s, 0.19s, 0.19s; }

.nav-dropdown-item:hover { background: var(--color-bg-alt); color: var(--color-accent); }

.nav-dropdown-thumb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt);
  transition: transform var(--transition-fast);
}

.nav-dropdown-item:hover .nav-dropdown-thumb { transform: scale(1.06); }

@media (max-width: 900px) {
  .nav-dropdown-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 20px var(--container-gutter) 28px;
  }

  .nav-dropdown-thumb { width: 56px; height: 56px; }
}

.nav-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.nav-logo a { display: flex; align-items: center; color: var(--color-text); }
.nav-logo-img { height: 32px; width: auto; object-fit: contain; }

/* 窄屏(≤900px)展开搜索时淡出 LOGO，避免被输入框压住；桌面端空间充足保持显示 */
@media (max-width: 900px) {
  .nav-left:has(.search-expand.active) ~ .nav-logo { opacity: 0; pointer-events: none; }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background var(--transition-fast);
}

.icon-btn:hover { background: var(--color-bg-alt); }
.icon-btn svg { width: 20px; height: 20px; }

/* ── Search Expand（位于汉堡左侧，向右展开）── */
.search-expand {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  width: 40px;
  transition: width 0.35s var(--ease-out);
}

.search-expand.active { width: 240px; }

.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.search-toggle:hover { background: var(--color-border); }
.search-toggle svg { width: 18px; height: 18px; }

.search-input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  padding: 0 44px 0 16px;
  border: none;
  border-radius: 20px;
  background: var(--color-bg-alt);
  font-size: var(--fs-base);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.search-input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.search-input,.search-close { pointer-events:none; }
.search-expand.active .search-input,.search-expand.active .search-close { pointer-events:auto; }
.search-input::placeholder { color: var(--color-text-alt); }
.search-input:focus {
  outline: none;
  background: var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-border);
}

.search-close {
  position: absolute;
  right: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 3;
}

.search-close:hover { background: var(--color-border); }
.search-close svg { width: 14px; height: 14px; }

.search-expand.active .search-toggle {
  background: var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-border);
  opacity: 0;
  visibility: hidden;
}

.search-expand.active .search-input {
  width: 100%;
  opacity: 1;
  visibility: visible;
  padding-right: 44px;
}

.search-expand.active .search-close {
  opacity: 1;
  visibility: visible;
}

/* ── 导航与抽屉菜单：窄屏适配 ── */
@media (max-width: 700px) {
  .nav-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-inner { height: 56px; gap: 8px; }
  .nav-logo-img { height: 18px; }
  .nav-right { gap: 0; }
  .icon-btn { width: 30px; height: 30px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .menu-toggle { padding: 6px; }
  .menu-toggle span { width: 18px; }
  .search-expand, .search-toggle, .search-input { height: 30px; }
  .search-expand, .search-toggle { width: 30px; }
  .search-expand.active { width: 200px; }
}

@media (max-width: 480px) {
  .nav-logo-img { height: 15px; }
  .icon-btn { width: 28px; height: 28px; }
  .search-expand, .search-toggle, .search-input { height: 28px; }
  .search-expand, .search-toggle { width: 28px; }
  .search-expand.active { width: 170px; }
}

/* ── 登录弹窗 ── */
.login-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  margin: 0;
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0s 0.3s;
}

.login-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out), visibility 0s;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--color-bg);
  padding: 48px 36px 36px;
  border-radius: 0;
  text-align: center;
  transform: translateY(12px);
  transition: transform 0.3s var(--ease-out);
}

.login-modal.open .login-card { transform: none; }

.login-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.login-close:hover { background: var(--color-bg-alt); }

.login-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.login-form { text-align: left; }

.login-field { display: block; margin-bottom: 14px; }

.login-field span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--color-text);
}

.login-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-field input:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.login-submit {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  background: var(--color-text);
  color: var(--color-text-inv);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.2em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.login-submit:hover { background: var(--color-accent); }

@media (max-width: 480px) {
  .login-card { padding: 44px 24px 28px; }
  .login-submit { height: 46px; }
}

/* ── Hero Slideshow ── */
.hero-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 3360 / 1214;
  max-height: 90vh;
  overflow: hidden;
  background: #111;
}

.slides-wrapper { position: relative; width: 100%; height: 100%; }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
}

.slide.active { opacity: 1; z-index: 1; }

.slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-text-inv);
  padding: 40px;
  /* 上下双向遮罩，保证白色文字在亮部图片上可读 */
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.38) 100%);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.slide-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(20px);
}

.slide-headline {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 2px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(30px);
}

.slide-sub {
  font-size: var(--fs-md);
  letter-spacing: 1px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
}

.slide-content .btn {
  opacity: 0;
  transform: translateY(20px);
}

.slide.active .slide-eyebrow { animation: fadeSlideUp 0.8s 0.3s var(--ease-out) forwards; }
.slide.active .slide-headline { animation: fadeSlideUp 0.8s 0.5s var(--ease-out) forwards; }
.slide.active .slide-sub { animation: fadeSlideUp 0.8s 0.7s var(--ease-out) forwards; }
.slide.active .btn { animation: fadeSlideUp 0.8s 0.9s var(--ease-out) forwards; }

@keyframes fadeSlideUp {
  to { opacity: 1; transform: translateY(0); }
}

.slides-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.dot.active { background: #fff; transform: scale(1.3); }



/* ── Media Grid (保留) ── */
.media-grid-section { padding: var(--space-2xl) 0; }
.media-grid-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.media-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
}

.media-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.media-card:hover .media-card-img { transform: scale(1.06); }

.media-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 50%);
  color: #fff;
}

.media-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.media-card-desc {
  font-size: var(--fs-base);
  letter-spacing: 1px;
  margin-bottom: 20px;
  opacity: 0.85;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 0;
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-text);
  color: var(--color-text-inv);
  padding: 14px 36px;
  border: 2px solid var(--color-text);
}

.btn-primary:hover {
  background: transparent;
  color: var(--color-text);
}

.btn-outline {
  background: transparent;
  color: var(--color-text-inv);
  padding: 14px 36px;
  border: 2px solid rgba(255,255,255,0.6);
}

.btn-outline:hover {
  background: var(--color-text-inv);
  color: var(--color-text);
  border-color: var(--color-text-inv);
}

/* 浅色背景区块内的 outline 按钮：改用深色边框与文字，保证可见性 */
.section-gtx-banner .btn-outline,
.section-story .btn-outline {
  color: var(--color-text);
  border-color: rgba(0, 0, 0, 0.75);
}

.section-gtx-banner .btn-outline:hover,
.section-story .btn-outline:hover {
  background: var(--color-text);
  color: var(--color-text-inv);
  border-color: var(--color-text);
}

.btn-white {
  background: rgba(255,255,255,0.92);
  color: var(--color-text);
  padding: 10px 24px;
  font-size: var(--fs-sm);
  border: none;
  backdrop-filter: blur(4px);
}

.btn-white:hover { background: #fff; }
.btn-sm { padding: 10px 24px; font-size: var(--fs-sm); }
.btn-xl { padding: 16px 48px; font-size: var(--fs-base); }

/* ── Section Shared ── */
.section { padding: var(--space-3xl) 0; }
/* 首页逐类商品区适度收紧，页面节奏更紧凑 */
.home-collection { padding: var(--space-2xl) 0; }

/* 首页商品带（人气热销/新品上市）：横向滚动 + 左右箭头，参照 Salomon */
.rail-section { padding: var(--space-2xl) 0 var(--space-lg); }
.rail-section--new { padding-top: 0; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.rail-head .section-title { margin: 0; }
.rail-tools { display: flex; align-items: center; gap: 20px; }
.rail-arrows { display: flex; gap: 8px; }
.rail-arrow {
  width: 42px; height: 42px; border: 1px solid var(--color-border);
  background: var(--color-bg); color: var(--color-text);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition-fast);
}
.rail-arrow:hover:not(:disabled) { border-color: var(--color-text); }
.rail-arrow:disabled { opacity: .3; cursor: default; }
.product-rail {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  /* 隐藏滚动条（对齐 Salomon：纯拖拽/箭头滚动） */
  scrollbar-width: none;
}
.product-rail::-webkit-scrollbar { display: none; }
.rail-card { flex: 0 0 clamp(250px, 27vw, 330px); scroll-snap-align: start; }
.rail-card .collection-image { aspect-ratio: 1 / 1; }
@media (max-width: 700px) {
  .rail-section { padding: var(--space-xl) 0 var(--space-md); }
  .rail-head { margin-bottom: 16px; }
}

/* 服务保障三栏（图标+标题+说明） */
.trust-section { padding: var(--space-xl) 0 var(--space-2xl); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  text-align: center;
}
.trust-item { display: flex; flex-direction: column; align-items: center; }
.trust-icon { display: flex; align-items: center; justify-content: center; height: 104px; margin-bottom: 20px; }
.trust-icon svg { width: 96px; height: 96px; }
.trust-title { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.3px; margin: 0 0 10px; }
.trust-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-alt);
  line-height: 1.8;
  max-width: 340px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .trust-section { padding: var(--space-lg) 0 var(--space-xl); }
}
.section-featured { background: var(--color-bg-alt); }

.section-header {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.section-title-group { flex: 1; }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-subtitle {
  font-size: var(--fs-base);
  color: var(--color-text-alt);
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--color-text-alt);
  transition: color var(--transition-fast);
}

.section-link:hover { color: var(--color-text); }
.section-link svg { width: 5px; height: 8px; }

.section-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text-alt);
  margin-bottom: 12px;
}

.section-headline {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.section-desc {
  font-size: var(--fs-md);
  color: var(--color-text-alt);
  max-width: 400px;
  line-height: 1.7;
}

/* ── Category Quick Section ── */
.category-quick-section {
  padding: var(--space-3xl) 0;
  background: var(--color-bg);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform var(--transition-base);
}

.category-card:hover { transform: translateY(-6px); }
.category-card:hover .category-name { color: var(--color-accent); }

.category-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base);
}

.category-card:hover .category-img-wrap {
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.category-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-name {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
  transition: color var(--transition-fast);
}

/* ── Product Scroll & Card ── */
.product-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.product-scroll::-webkit-scrollbar { display: none; }

.product-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(260px, 1fr));
  gap: var(--space-lg);
  padding: 0 var(--container-gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}

.product-card {
  position: relative;
  background: var(--color-bg);
  border-radius: 4px;
  overflow: hidden;
  transition: transform var(--transition-base);
  scroll-snap-align: start;
}

.product-card:hover { transform: translateY(-4px); }

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  color: #fff;
}

.badge-pink { background: var(--badge-pink); color: #5a1a3a; }
.badge-red { background: var(--badge-red); }
.badge-green { background: var(--badge-green); }

.product-img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.product-img-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
}

.product-img-wrap > a img,
.product-img-wrap > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease-out);
}

.product-img.secondary { opacity: 0; }
.product-card:hover .product-img.primary { opacity: 0; }
.product-card:hover .product-img.secondary { opacity: 1; }

.product-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.product-card:hover .product-actions {
  opacity: 1;
  transform: translateX(0);
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.action-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

.action-btn svg { width: 16px; height: 16px; }

.product-info { padding: 14px 4px 20px; }

.product-name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  transition: color var(--transition-fast);
}

.product-name:hover { color: var(--color-accent); }

.product-category {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-alt);
  margin-bottom: 8px;
}

.product-price { margin-bottom: 10px; }
.price-sale {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text);
}

.product-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  padding: 0;
  overflow: hidden;
}

.swatch:hover { transform: scale(1.15); }
.swatch.active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px #fff inset;
}
.swatch-more {
  font-size: var(--fs-2xs);
  color: var(--color-text-alt);
  letter-spacing: 0.5px;
}

/* ── GTX Banner ── */
.section-gtx-banner {
  background: var(--color-bg-alt);
  padding: var(--space-3xl) 0;
}

.gtx-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.gtx-text { max-width: 480px; }
.gtx-images { display: flex; justify-content: center; position: relative; }
.gtx-img {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.gtx-img-placeholder {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* ── Brand Story ── */
.section-story {
  background: var(--color-bg-alt);
  padding: var(--space-3xl) 0;
}

.story-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.story-text { max-width: 520px; }
.story-text .section-desc {
  max-width: 100%;
  margin-bottom: 28px;
}

.story-image {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.12);
}

.story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Blog Section ── */
.section-blog { background: var(--color-bg-alt); }
.blog-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.blog-card {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-bg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.blog-img-wrap {
  aspect-ratio: 1200 / 628;
  overflow: hidden;
  background: var(--color-bg-alt);
  position: relative;
}

.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.blog-card:hover .blog-img { transform: scale(1.04); }

.blog-info { padding: 20px; }
.blog-title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--color-text-alt);
}

.blog-author { display: flex; align-items: center; gap: 5px; }
.blog-author svg { width: 14px; height: 14px; }

/* ── Newsletter ── */
.newsletter-section {
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
  padding: var(--space-3xl) 0;
}

.newsletter-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.newsletter-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.newsletter-desc {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.65);
  margin-bottom: 32px;
}

/* ── Footer ── */
.footer {
  background: var(--color-bg-alt);
  padding: var(--space-2xl) 0 var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer-grid {
  display: grid;
  /* 列宽随内容、整体靠左聚拢（对齐 Salomon 页脚），不再平铺整行 */
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: start;
  gap: var(--space-lg) 88px;
  margin-bottom: var(--space-xl);
}

.footer-heading {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-links li { margin-bottom: 12px; }
.footer-links a {
  font-size: var(--fs-base);
  color: var(--color-text-alt);
  letter-spacing: 0.3px;
  transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--color-text); }

.footer-company p {
  font-size: var(--fs-base);
  color: var(--color-text-alt);
  line-height: 1.8;
  letter-spacing: 0.3px;
}

.social-links { display: flex; gap: 16px; }
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.social-link:hover {
  background: var(--color-text);
  color: var(--color-text-inv);
  transform: translateY(-3px);
}
.social-link svg { width: 20px; height: 20px; }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
  text-align: center;
}

.footer-copyright {
  font-size: var(--fs-sm);
  color: var(--color-text-alt);
  letter-spacing: 0.5px;
}

/* 底栏窄屏：3 列 → 竖排 */
@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }
}

/* 桌面端页脚内容整体内收，不贴视口边缘 */
@media (min-width: 1000px) {
  .footer .container { padding-left: 64px; padding-right: 64px; }
}

/* ── Reveal Animations ── */
.reveal-up,
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-up.visible,
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-up[data-delay="50"] { transition-delay: 0.05s; }
.reveal-up[data-delay="100"] { transition-delay: 0.1s; }
.reveal-up[data-delay="150"] { transition-delay: 0.15s; }
.reveal-up[data-delay="200"] { transition-delay: 0.2s; }
.reveal-up[data-delay="250"] { transition-delay: 0.25s; }
.reveal-up[data-delay="300"] { transition-delay: 0.3s; }
.reveal-up[data-delay="350"] { transition-delay: 0.35s; }
.reveal-up[data-delay="400"] { transition-delay: 0.4s; }
.reveal-up[data-delay="500"] { transition-delay: 0.5s; }
.reveal-up[data-delay="600"] { transition-delay: 0.6s; }

/* ── Image Placeholders ── */
.img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c8c8c8;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  pointer-events: none;
  overflow: hidden;
}

.img-placeholder::after { content: attr(data-label); }

.category-img-wrap .img-placeholder {
  border-radius: 50%;
}

.product-img[src]:not([src=""]) + .img-placeholder,
.product-img-wrap:has(.product-img[src]:not([src=""])) .img-placeholder,
.slide-bg[src]:not([src=""]) ~ .img-placeholder,
.media-card-img[src]:not([src=""]) ~ .img-placeholder,
.quadrant-bg[src]:not([src=""]) ~ .img-placeholder,
.blog-img[src]:not([src=""]) ~ .img-placeholder,
.gtx-img[src]:not([src=""]) ~ .img-placeholder,
.category-img[src]:not([src=""]) ~ .img-placeholder,
.story-img[src]:not([src=""]) ~ .img-placeholder {
  display: none;
}

/* ── Product Detail Page── */
.pdp-page {
  padding: 0 0 var(--space-3xl);
  min-height: 60vh;
}

/* Breadcrumb */
.breadcrumb-wrapper {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-size: var(--fs-xs);
  color: var(--color-text-alt);
  letter-spacing: 0.5px;
}

.breadcrumb a {
  color: var(--color-text-alt);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--color-text); }

.breadcrumb-sep { color: var(--color-border); }

.breadcrumb-current { color: var(--color-text); }

/* 两栏布局：画廊 + 信息（萨洛蒙式 1:1） */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: 40px 0 96px;
}

/* 画廊：主图大图 + 下方横排缩略图 */
.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-thumbs {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}

.pdp-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid transparent;
  background: var(--color-bg-alt);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-thumb.active {
  border-color: var(--color-text);
  opacity: 1;
}

.pdp-thumb:hover { opacity: 1; }

/* 亚马逊原始信息区：标题/卖点/规格照搬原文，不做翻译 */
.pdp-source-info { max-width: 1160px; margin: 0 auto; padding: 34px 0 56px; }
.pdp-source-info h2 { font-family: var(--font-display, Oswald, sans-serif); font-size: 20px; letter-spacing: .06em; margin: 0 0 6px; }
.pdp-source-title { color: var(--color-text-alt); font-size: var(--fs-sm); line-height: 1.7; margin: 0 0 22px; }
.pdp-source-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.pdp-source-block h3 { font-size: var(--fs-base); font-weight: 600; margin: 0 0 10px; }
.pdp-source-bullets { margin: 0; padding-left: 18px; color: var(--color-text); font-size: var(--fs-sm); line-height: 1.8; }
.pdp-source-bullets li { margin-bottom: 6px; }
.pdp-source-table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.pdp-source-table th, .pdp-source-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.pdp-source-table th { color: var(--color-text-alt); font-weight: 500; white-space: nowrap; padding-right: 22px; }
@media (max-width: 860px) { .pdp-source-cols { grid-template-columns: 1fr; gap: 24px; } }

/* 图集导航（方案 A）：主图左右箭头、计数、手机端滑动圆点 */
.pdp-stage-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
}
.pdp-stage-arrow:hover { border-color: var(--color-text); }
.pdp-stage-arrow.pdp-prev { left: 10px; }
.pdp-stage-arrow.pdp-next { right: 10px; }
.pdp-stage-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(26, 26, 26, 0.78);
  color: #fff;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pdp-dots { display: none; gap: 7px; justify-content: center; padding: 10px 0 0; }
.pdp-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--color-border); cursor: pointer; }
.pdp-dot.active { background: var(--color-text); }
@media (max-width: 700px) {
  .pdp-dots { display: flex; }
  .pdp-thumbs { display: none; }
}

.pdp-stage {
  position: relative;
  width: 100%;
  /* 主图已替换为亚马逊原图（1500–1800px），560px 展示下 Retina 仍约 3 倍密度 */
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.pdp-stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.4s ease;
}

.pdp-stage.is-fading .pdp-stage-img { opacity: 0; }

.pdp-stage:hover .pdp-stage-img { transform: scale(1.04); }

.pdp-stage > .img-placeholder {
  position: absolute;
  inset: 0;
}

.pdp-thumb img[src]:not([src=""]) ~ .img-placeholder,
.pdp-stage img[src]:not([src=""]) ~ .img-placeholder {
  display: none;
}

/* 信息栏 */
.pdp-info {
  max-width: 480px;
  width: 100%;
}

@keyframes pdpRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.pdp-info > * {
  animation: pdpRise 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

.pdp-info > *:nth-child(1) { animation-delay: 0.05s; }
.pdp-info > *:nth-child(2) { animation-delay: 0.1s; }
.pdp-info > *:nth-child(3) { animation-delay: 0.15s; }
.pdp-info > *:nth-child(4) { animation-delay: 0.2s; }
.pdp-info > *:nth-child(5) { animation-delay: 0.25s; }
.pdp-info > *:nth-child(n+6) { animation-delay: 0.3s; }

.pdp-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.pdp-price .price-label {
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: 600;
}

.pdp-price .price-now {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pdp-price .price-was {
  font-size: var(--fs-sm);
  color: var(--color-text-alt);
  text-decoration: line-through;
}

.pdp-sku {
  font-size: var(--fs-xs);
  color: var(--color-text-alt);
  margin-bottom: 28px;
}

/* 选择器区块 */
.pdp-block { margin-bottom: 24px; }

.pdp-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.pdp-block-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 1px;
}

.pdp-block-value {
  font-size: var(--fs-sm);
  color: var(--color-text-alt);
}

.pdp-block-link {
  font-size: var(--fs-xs);
  color: var(--color-text-alt);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.pdp-block-link:hover { color: var(--color-text); }

.pdp-swatches {
  display: flex;
  gap: 12px;
}

.pdp-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  padding: 3px;
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.pdp-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.pdp-swatch:hover { border-color: var(--color-text-alt); }

.pdp-swatch.active { border-color: var(--color-text); }

.pdp-sizes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.pdp-size {
  height: 48px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.pdp-size:hover { border-color: var(--color-text-alt); }

.pdp-size.active {
  border: 1.5px solid var(--color-text);
  font-weight: 600;
}

.pdp-size:disabled,
.pdp-size.soldout {
  color: var(--color-text-alt);
  background: var(--color-bg-alt);
  border-color: transparent;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* 数量 */
.pdp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
}

.pdp-qty button {
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  font-size: var(--fs-lg);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pdp-qty button:hover { background: var(--color-bg-alt); }

.qty-input {
  width: 48px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  appearance: textfield;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* CTA：全宽黑色直角按钮（萨洛蒙式） */
.pdp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.pdp-addcart {
  width: 100%;
  height: 54px;
  margin-top: 0;
  border: 1px solid var(--color-bg-dark);
  background: var(--color-bg-dark);
  color: var(--color-text-inv);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.pdp-addcart--outline { background: var(--color-bg); color: var(--color-text); }
.pdp-addcart--outline:hover { background: var(--color-bg-dark); color: var(--color-text-inv); }
.pdp-buynow:hover, .pdp-addcart:not(.pdp-addcart--outline):hover { background: #000; }
.pdp-addcart:active { transform: scale(0.99); }

/* Product Detail Responsive */
@media (max-width: 1000px) {
  .pdp {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 24px;
  }

  .pdp-info { max-width: 560px; }
}

@media (max-width: 700px) {
  .pdp { padding-bottom: 64px; }

  .pdp-sizes { grid-template-columns: repeat(5, 1fr); gap: 8px; }

  .pdp-size { height: 44px; font-size: var(--fs-sm); }

  .pdp-addcart { height: 50px; }
}

/* ============================================
   Language Switcher
   ============================================ */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 1002;
}

.lang-switch.active .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lang-option:hover { background: var(--color-bg-alt); }

.lang-option.active { font-weight: 600; }

.lang-option.active::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text);
  flex-shrink: 0;
}


/* ── Collection / product browsing (2026-10-25) ── */
[hidden] { display: none !important; }
.shop-nav { display:block; overflow-x:auto; padding:0 24px; border-bottom:1px solid var(--color-border); font-size:var(--fs-sm); font-weight:600; white-space:nowrap; scrollbar-width:thin; }
.shop-nav a:hover, .shop-nav a:focus-visible { color:var(--color-accent); }
.nav-dropdown-heading { display:flex; justify-content:space-between; padding:16px 24px 8px; font-size:var(--fs-sm); font-weight:600; }
.nav-dropdown-heading a { text-decoration:underline; text-underline-offset:4px; }
.collection { padding-top:12px; padding-bottom:80px; }
.collection-toolbar { display:flex; align-items:center; gap:24px; padding:22px 0; scroll-margin-top:76px; }
.filter-trigger { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:12px 24px; border:1px solid var(--color-border); font-size:var(--fs-sm); font-weight:600; }
.filter-trigger:hover { border-color:var(--color-text); }
.filter-number { display:inline-flex; justify-content:center; align-items:center; width:20px; height:20px; border-radius:50%; background:var(--color-text); color:white; font-size:11px; }
.collection-count { color:var(--color-text-alt); font-size:var(--fs-sm); }
.collection-sort { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:var(--fs-sm); }
.collection-sort select { max-width:210px; padding:12px 32px 12px 12px; font:inherit; color:inherit; border:1px solid var(--color-border); border-radius:0; background:white; }
.collection-active { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.collection-active:not(:empty) { padding-bottom:22px; }
.filter-chip { display:flex; align-items:center; gap:14px; padding:8px 12px; background:#ededed; font-size:var(--fs-xs); max-width:100%; overflow-wrap:anywhere; text-align:left; }
.filter-chip span { font-size:18px; }
.collection-clear { text-decoration:underline; text-underline-offset:4px; padding:10px; font-size:var(--fs-xs); }
.collection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:42px 24px; }
.collection-card { min-width:0; }
.collection-image { display:block; position:relative; aspect-ratio:1; background:#f1f1f1; overflow:hidden; }
.collection-image > img { width:100%; height:100%; object-fit:contain; transition:transform .4s; }
.collection-image:hover > img { transform:scale(1.04); }
.catalog-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center; background:#efefed; color:#8b8b86; text-align:center; padding:18px; }
.catalog-placeholder > span { font-size:clamp(15px,1.5vw,22px); letter-spacing:2px; }
.catalog-placeholder > small { font-family:var(--font-display); font-size:12px; letter-spacing:2px; color:#9a9a94; }
.collection-image:hover .catalog-placeholder { background:#e8e8e5; }
.collection-badge { position:absolute; left:14px; top:14px; background:var(--color-text); color:white; font-size:11px; letter-spacing:1px; padding:4px 9px; }
.collection-soldout { position:absolute; right:12px; bottom:12px; background:#fff; color:var(--color-text-alt); padding:3px 8px; font-size:var(--fs-xs); }
.collection-card-info { padding:16px 0 0; }
.collection-card-category { font-size:var(--fs-xs); color:var(--color-text-alt); margin-bottom:5px; }
.collection-card h2 { font-family:var(--font-body); font-size:var(--fs-base); font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.collection-card h2 a:hover { text-decoration:underline; text-underline-offset:4px; }
.collection-price { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin-top:9px; font-family:var(--font-display); font-size:18px; font-weight:600; }
.collection-price s { font-family:var(--font-body); font-size:var(--fs-xs); font-weight:400; color:var(--color-text-alt); }
.collection-card-colors { display:flex; gap:6px; align-items:center; margin-top:12px; }
.catalog-color { display:inline-block; flex-shrink:0; width:13px; height:13px; border-radius:50%; border:1px solid #ccc; }
.color-black { background:#242424; }.color-grey { background:#999; }.color-green { background:#506353; }.color-white { background:#fff; }
.collection-card-colors small { margin-left:3px; color:var(--color-text-alt); font-size:11px; }
.collection-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:56px; }
.collection-pagination button { min-width:42px; min-height:44px; padding:10px 14px; border:1px solid var(--color-border); font-size:var(--fs-sm); }
.collection-pagination [aria-current="page"] { background:var(--color-text); color:#fff; border-color:var(--color-text); }
.collection-pagination button:disabled { opacity:.35; cursor:default; }
.collection-empty { text-align:center; padding:90px 24px; }
.collection-empty h2 { font-size:var(--fs-xl); margin-bottom:10px; }
.collection-empty p { color:var(--color-text-alt); margin-bottom:24px; }
.collection-dialog { position:fixed; inset:0 0 0 auto; margin:0; width:min(440px,100%); height:100%; max-height:100%; max-width:100%; padding:0; border:0; background:var(--color-bg); color:var(--color-text); box-shadow:-10px 0 60px #0001; }
.collection-dialog::backdrop { background:rgba(0,0,0,.35); }
.collection-dialog form { height:100%; display:flex; flex-direction:column; }
.filter-head { display:flex; justify-content:space-between; align-items:center; padding:24px 28px; border-bottom:1px solid var(--color-border); }
.filter-head h2 { font-size:var(--fs-lg); font-weight:600; }
.filter-close { font-family:var(--font-body); font-size:28px; width:44px; height:44px; }
.filter-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 28px 24px; }
.filter-stock { display:flex; align-items:center; justify-content:space-between; padding:24px 0; font-size:var(--fs-sm); font-weight:600; }
.filter-body input[type="checkbox"] { width:18px; height:18px; accent-color:var(--color-text); cursor:pointer; }
.filter-body details { border-top:1px solid var(--color-border); }
.filter-body summary { padding:20px 0; cursor:pointer; font-size:var(--fs-sm); font-weight:600; }
.filter-options { display:grid; gap:4px; padding-bottom:20px; }
.filter-options label { display:flex; align-items:center; gap:12px; min-height:40px; cursor:pointer; font-size:var(--fs-sm); }
.filter-options small { margin-left:auto; color:var(--color-text-alt); }
.filter-prices { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.filter-prices label { min-width:0; flex:1; font-size:var(--fs-xs); color:var(--color-text-alt); }
.filter-prices input { display:block; width:100%; margin-top:8px; border:1px solid var(--color-border); padding:12px; font:inherit; font-size:var(--fs-sm); color:var(--color-text); }
.filter-size-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding-bottom:24px; }
.filter-size-grid label { position:relative; cursor:pointer; }
.filter-size-grid input { position:absolute; opacity:0; inset:0; }
.filter-size-grid span { display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); min-height:44px; font-size:var(--fs-sm); }
.filter-size-grid input:checked + span { background:var(--color-text); color:white; border-color:var(--color-text); }
.filter-size-grid input:focus-visible + span { outline:2px solid var(--color-text); outline-offset:3px; }
.filter-footer { display:flex; align-items:center; gap:24px; padding:20px 28px max(20px,env(safe-area-inset-bottom)); border-top:1px solid var(--color-border); }
.filter-footer > button:first-child { flex-shrink:0; font-size:var(--fs-sm); text-decoration:underline; text-underline-offset:4px; }
.filter-footer .btn { flex:1; padding:14px 20px; font-size:var(--fs-sm); letter-spacing:0; }
.filter-error { color:var(--color-accent); font-size:var(--fs-xs); padding-bottom:16px; }
.filter-footer button:disabled, .pdp-addcart:disabled { opacity:.45; cursor:not-allowed; }
.catalog-filter-open { overflow:hidden; }
.detail-back { display:inline-block; margin-top:24px; font-size:var(--fs-sm); text-decoration:underline; text-underline-offset:5px; }
.pdp-thumb .catalog-placeholder { padding:4px; gap:2px; }
.pdp-thumb .catalog-placeholder > span { font-size:9px; letter-spacing:0; }
.pdp-thumb .catalog-placeholder > small { font-size:8px; letter-spacing:0; }
:where(.collection,.collection-dialog,.shop-nav,.nav-dropdown-heading) :where(a,button,select,input):focus-visible { outline:2px solid var(--color-text); outline-offset:4px; }
@media (max-width:1000px) { .collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 18px; }  }
@media (max-width:700px) {
  .shop-nav { padding:0 16px; font-size:12px; }
  .shop-nav-track { gap:24px; min-height:44px; }
  .collection { padding-left:16px; padding-right:16px; padding-bottom:56px; }
  .collection-toolbar { gap:12px; flex-wrap:wrap; padding:16px 0; }.filter-trigger { padding:10px 14px; }
  .collection-count { font-size:12px; margin-left:auto; }
  .collection-sort { width:100%; margin:0; justify-content:space-between; font-size:12px; }.collection-sort select { max-width:210px; padding:10px 24px 10px 12px; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 12px; }
  .collection-card-info { padding-top:12px; }.collection-card h2 { font-size:13px; }
  .collection-card-category { font-size:11px; }.collection-price { font-size:16px; gap:6px; }
  .collection-price s { font-size:10px; }.collection-badge { top:10px; left:10px; font-size:9px; padding:3px 6px; }
  .catalog-placeholder { padding:12px; gap:7px; }.catalog-placeholder > span { font-size:16px; letter-spacing:1px; }.catalog-placeholder > small { font-size:10px; letter-spacing:1px; }
  .filter-head { padding:18px 20px; }.filter-body { padding:0 20px 20px; }.filter-footer { padding-left:20px; padding-right:20px; }
  .collection-dialog { width:min(420px,calc(100% - 20px)); }
  .collection-pagination { gap:6px; }.collection-pagination button { min-width:36px; padding:8px 10px; }
}

/* Compact browsing header: one shared category row and a direct filter toolbar. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.shop-nav-track { display:flex; align-items:center; width:max-content; min-height:46px; margin-inline:auto; gap:clamp(20px,2.2vw,32px); }
.shop-nav a { display:block; flex-shrink:0; padding:12px 0 10px; border-bottom:2px solid transparent; }
.shop-nav a[aria-current="page"] { border-bottom-color:var(--color-text); }
@media (max-width:700px) { .shop-nav-track { gap:24px; min-height:44px; } }

/* Real image-error fallbacks and motion preferences. */
.image-load-failed > .img-placeholder,
.image-load-failed .img-placeholder { display:flex !important; }
.login-modal:not([open]) { display:none; }
.login-modal::backdrop { background:transparent; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal-up, .reveal-on-scroll { opacity:1; transform:none; }
}

/* Keep the fallback underneath each real image, including imported product images. */
.collection-image > img, .pdp-stage-img, .pdp-thumb img { position:relative; z-index:1; background:var(--color-bg-alt); }
.pdp-stage-img { object-fit:contain; }
.collection-badge, .collection-soldout { z-index:2; }
.pagination-gap { align-self:center; padding:0 4px; }

/* Real Amazon main images and the five observed store categories. */
.category-grid { max-width:1100px; }
.category-img { object-fit:contain; padding:8%; background:#fff; }
.collection-source { display:inline-block; font-family:var(--font-body); font-size:var(--fs-xs); font-weight:400; text-decoration:underline; text-underline-offset:4px; color:var(--color-text-alt); margin-top:10px; }
.collection-price .collection-source { margin-top:0; }
.pdp-source-note { color:var(--color-text-alt); font-size:var(--fs-sm); line-height:1.7; margin:20px 0; }
.pdp-source { display:flex; width:100%; margin:20px 0 0; }
.home-collection .collection-card h2 { min-height:3em; }
@media (max-width:900px) { .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .gtx-inner, .story-inner { grid-template-columns:1fr; gap:28px; } }
@media (max-width:480px) { .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.collection-card h2 a { display:block; }
/* White source photography keeps a continuous white stage; grey remains for failures. */
.collection-image > img, .pdp-stage-img, .pdp-thumb img { background:#fff; }

/* Larger observed catalog: preserve narrow-screen navigation and readable listing IDs. */
.category-grid { grid-template-columns:repeat(var(--category-count,5),minmax(0,1fr)); }
.nav-dropdown-grid { grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); }
.collection-card-code { margin-top:6px; color:var(--color-text-alt); font-size:11px; overflow-wrap:anywhere; }
.color-red { background:#b43e3c; }.color-blue { background:#336c96; }.color-orange { background:#d7843b; }.color-brown { background:#805d43; }
@media (max-width:900px) { .category-grid, .nav-dropdown-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px) { .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Homepage campaign: daylight scenes, real product photography, dark readable copy. */
.hero-slideshow { height:clamp(480px,42vw,640px); aspect-ratio:auto; max-height:none; background:#f4f3ee; touch-action:pan-y; }
.slide { transition:opacity .6s var(--ease-in-out); isolation:isolate; }
.slide::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(244,243,238,.62) 0%,rgba(244,243,238,.48) 25%,rgba(244,243,238,.16) 38%,rgba(244,243,238,0) 58%); }
.slide[data-index="1"]::before { background:linear-gradient(90deg,rgba(247,241,232,.62) 0%,rgba(247,241,232,.48) 25%,rgba(247,241,232,.16) 38%,rgba(247,241,232,0) 58%); }
.slide-content { z-index:3; align-items:flex-start; text-align:left; padding:48px clamp(28px,6.5vw,110px) 78px; background:none; text-shadow:none; color:#17211b; pointer-events:none; }
.slide-content a { pointer-events:auto; }
.hero-slideshow .slide-content > * { opacity:1; transform:none; animation:none !important; }
.slide-eyebrow { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:2.5px; margin-bottom:22px; }
.slide-headline { font-size:clamp(38px,4.4vw,68px); line-height:1.15; letter-spacing:.015em; max-width:45%; margin-bottom:22px; }
.slide-sub { max-width:400px; width:40%; color:#424e45; font-size:14px; line-height:1.8; margin-bottom:28px; letter-spacing:0; }
.hero-slideshow .btn-primary { background:#17211b; border-color:#17211b; color:#fff; text-shadow:none; letter-spacing:.5px; padding:14px 25px; }
.hero-slideshow .btn-primary:hover { background:#35483b; border-color:#35483b; color:white; }
.slides-dots { left:clamp(28px,6.5vw,110px); transform:none; bottom:24px; gap:8px; }
.hero-slideshow .dot { display:grid; place-items:center; width:34px; height:28px; border:0; border-radius:0; background:transparent; transform:none; }
.hero-slideshow .dot::after { content:""; display:block; width:100%; height:3px; background:#17211b45; transition:background .2s; }
.hero-slideshow .dot.active::after { background:#17211b; }
.hero-slideshow a:focus-visible,.dot:focus-visible { outline:2px solid #17211b; outline-offset:4px; }
.home-series-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.home-series-card { display:flex; flex-direction:column; background:#fff; min-width:0; color:var(--color-text); border:1px solid #e8e8e8; transition:transform .25s,box-shadow .25s; }
.home-series-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px #0001; }
.home-series-card img { width:100%; height:clamp(150px,15vw,225px); object-fit:contain; background:#fff; padding:16px; }
.home-series-card span { padding:12px 16px; font-size:13px; border-top:1px solid #f2f2f2; }
.home-story-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.home-story-gallery img { height:clamp(220px,24vw,350px); }
.section-story .story-text { max-width:520px; }
.home-store-section { padding:72px 24px; }
.home-store-section .newsletter-inner { max-width:760px; }
.store-eyebrow { font:12px var(--font-body); letter-spacing:3px; color:#ffffff80; margin-bottom:18px; }
.home-store-section .btn { letter-spacing:1px; }
@media (max-width:900px) { .slide-headline { font-size:42px; } .home-series-grid { gap:10px; } }
@media (max-width:700px) {
  .hero-slideshow { height:650px; }
  .slide-bg { height:300px; object-position:82% center; }
  .slide::before,.slide[data-index="1"]::before { background:linear-gradient(180deg,transparent 44%,#f4f3ee 48%); }
  .slide-content { justify-content:flex-start; padding:306px 24px 78px; }
  .slide-headline { max-width:100%; font-size:36px; line-height:1.14; margin-bottom:14px; }
  .slide-eyebrow { font-size:10px; letter-spacing:2px; margin-bottom:12px; }
  .slide-sub { width:100%; max-width:38ch; font-size:13px; line-height:1.65; margin-bottom:20px; }
  .hero-slideshow .btn { font-size:12px; padding:12px 20px; }
  .slides-dots { left:24px; bottom:18px; }
  .home-series-card img { height:155px; padding:12px; }
  .home-series-card span { padding:10px 12px; font-size:12px; }
  .home-story-gallery { gap:10px; }.home-story-gallery img { height:220px; }
  .home-store-section { padding:56px 20px; }
}

/* Fade backgrounds without overlapping two sets of headings. */
.slide:not(.active) .slide-content { visibility:hidden; }
@media (max-width:700px) {
  .category-quick-section { padding:48px 0; }
  .home-collection { padding:56px 0; }
  .section-gtx-banner, .section-story { padding:64px 0; }
}


/* Sport category photographs: a visual bridge from the campaign to the catalog. */
.scene-section { padding:44px 0 12px; }
.scene-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.scene-grid > li { min-width:0; }
.scene-card { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:#d8ddd8; color:#fff; }
.scene-card::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.64)); pointer-events:none; }
.scene-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.scene-card:hover img { transform:scale(1.035); }
.scene-card:focus-visible { outline:3px solid white; outline-offset:-7px; }
.scene-caption { position:absolute; z-index:1; bottom:22px; left:22px; right:18px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; text-shadow:0 1px 8px #0005; }
.scene-caption { font:600 clamp(13px,1.2vw,19px)/1.35 var(--font-body); }
@media (max-width:1100px) { .scene-grid { gap:14px; } .scene-caption { left:16px; right:12px; bottom:18px; } }
@media (max-width:700px) {
  .scene-section { padding:24px 0 4px; }
  .scene-grid { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:0; padding-bottom:12px; scrollbar-width:thin; scrollbar-color:#b6bcb5 transparent; }
  .scene-grid > li { flex:0 0 76%; scroll-snap-align:start; }
  .scene-card { aspect-ratio:4/5; }
  .scene-caption { left:18px; bottom:20px; }
  .scene-caption { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .scene-card img { transition:none; } .scene-card:hover img { transform:none; } .scene-grid { scroll-behavior:auto; } }

@media (max-width:700px) {
  /* Keep the moving tennis player and racket together in a narrow crop. */
  .slide[data-index="1"] .slide-bg { object-position:95% center; }
}

/* Mobile storefront: denser browsing, larger touch targets and reachable actions. */
@media (max-width:700px) {
  :root { --container-gutter:16px; }
  .announcement-bar { padding:7px 12px; font-size:10px; line-height:1.45; letter-spacing:.1px; }
  .nav-inner { --nav-control-size:clamp(32px,10vw,40px); height:60px; padding-inline:12px; gap:4px; }
  .nav-left { gap:0; }
  .nav-logo { left:50%; width:min(116px,calc(100% - 40px - 6 * var(--nav-control-size))); }
  .nav-logo-img { width:100%; height:auto; max-height:none; }
  .icon-btn,.menu-toggle,.search-toggle { width:var(--nav-control-size); height:44px; flex-shrink:0; }
  .menu-toggle { justify-content:center; align-items:center; padding:8px; }
  .icon-btn svg,.search-toggle svg { width:19px; height:19px; }
  .search-expand { width:var(--nav-control-size); height:44px; }
  .search-expand.active { position:absolute; left:calc(12px + var(--nav-control-size) + 4px); right:12px; width:auto; height:44px; z-index:3; }
  .search-input { height:44px; font-size:16px; }
  .search-close { width:44px; height:44px; right:0; }
  .nav-left:has(.search-expand.active) ~ .nav-logo,.nav-left:has(.search-expand.active) ~ .nav-right { visibility:hidden; pointer-events:none; }
  .nav-dropdown { max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain; }
  .nav-dropdown-grid { padding:16px; gap:6px; }
  .nav-dropdown-item { border-radius:0; padding:12px 4px; font-size:12px; gap:8px; }
  .nav-dropdown-thumb { width:52px; height:52px; }
  input,textarea,select { font-size:16px; }

  .hero-slideshow { height:568px; }
  .slide-bg { height:260px; }
  .slide::before,.slide[data-index="1"]::before { background:linear-gradient(180deg,transparent 40%,#f4f3ee 47%); }
  .slide-content { padding:278px 20px 66px; }
  .slide-headline { font-size:clamp(28px,8vw,32px); line-height:1.12; margin-bottom:12px; }
  .slide-eyebrow { font-size:10px; margin-bottom:10px; }
  .slide-sub { font-size:13px; line-height:1.65; margin-bottom:18px; max-width:100%; }
  .hero-slideshow .btn { min-height:44px; padding:10px 20px; }
  .slides-dots { left:20px; bottom:13px; gap:6px; }
  .hero-slideshow .dot { width:26px; height:44px; }
  .scene-section { padding-top:20px; }
  .scene-grid { gap:10px; }
  .scene-grid > li { flex-basis:70%; }
  .scene-caption { font-size:15px; left:14px; bottom:16px; }
  .rail-section { padding-top:30px; padding-bottom:24px; }
  .rail-section--new { padding-top:10px; }
  .rail-head { gap:10px; margin-bottom:14px; flex-wrap:nowrap; }
  .rail-head .section-title { font-size:26px; line-height:1.2; }
  .rail-tools { gap:8px; flex-shrink:0; }
  .rail-tools .section-link { font-size:11px; }
  .rail-arrows { gap:4px; }
  .rail-arrow { width:32px; height:40px; }
  .product-rail { gap:12px; }
  .rail-card { flex-basis:calc((100% - 12px) / 2); }
  .trust-section { padding:24px 0 36px; }
  .trust-grid { gap:24px; }
  .trust-item { display:grid; grid-template-columns:56px 1fr; gap:0 16px; align-items:center; text-align:left; }
  .trust-icon { grid-row:1/3; height:56px; margin:0; }
  .trust-icon svg { width:48px; height:48px; }
  .trust-title { font-size:14px; margin-bottom:6px; }
  .trust-desc { font-size:12px; max-width:none; line-height:1.65; }
  .footer { padding-top:36px; }
  .footer-grid { gap:24px; margin-bottom:28px; }

  .collection-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(104px,116px); gap:8px; align-items:center; padding:12px 0; position:sticky; top:61px; z-index:20; background:#fff; }
  .filter-trigger { min-height:44px; padding:10px 12px; gap:6px; font-size:12px; }
  .collection-count { margin:0; text-align:center; font-size:11px; white-space:nowrap; }
  .collection-sort { width:auto; min-width:0; margin:0; display:block; }
  .collection-sort > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .collection-sort select { width:100%; max-width:none; height:44px; padding:8px 20px 8px 8px; font-size:13px; }
  .collection-active:not(:empty) { padding-bottom:14px; }
  .collection-card h2 { font-size:14px; line-height:1.45; }
  .collection-card-code { display:none; }
  .collection-grid { gap:24px 12px; }
  .collection-card-colors { margin-top:8px; }
  .collection-card-colors small { font-size:12px; }
  .collection-dialog { width:100%; height:100dvh; max-height:100dvh; }
  .filter-head { padding:12px 20px; }
  .filter-options label { min-height:44px; }
  .filter-footer { gap:16px; }

  .breadcrumb { font-size:11px; padding-block:12px; flex-wrap:nowrap; }
  .breadcrumb-current { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pdp { padding-top:16px; padding-bottom:28px; gap:20px; }
  .pdp-gallery { gap:6px; }
  .pdp-stage { aspect-ratio:6/5; }
  .pdp-stage:hover .pdp-stage-img { transform:none; }
  .pdp-stage-arrow { width:44px; height:44px; }
  .pdp-dots { padding:0; gap:0; }
  .pdp-dot { width:24px; height:24px; background:transparent; position:relative; }
  .pdp-dot::after { content:""; position:absolute; top:9px; left:9px; width:6px; height:6px; border-radius:50%; background:#d6d6d6; }
  .pdp-dot.active { background:transparent; }
  .pdp-dot.active::after { background:#17211b; }
  .pdp-title { font-size:20px; line-height:1.35; margin-bottom:10px; }
  .pdp-sku { font-size:11px; margin-bottom:20px; }
  .pdp-sizes { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
  .pdp-block-link { min-height:32px; display:inline-flex; align-items:center; }
  body:has(.pdp) { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .pdp-actions { position:fixed; inset:auto 0 0; z-index:50; margin:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #e8e8e8; box-shadow:0 -4px 20px #00000008; background:#fff; gap:10px; }
  .pdp-actions .pdp-addcart { height:48px; font-size:14px; letter-spacing:.3px; }
  .pdp-source-info { padding:20px 16px 32px; }
  .pdp-source-title,.pdp-source-bullets { overflow-wrap:anywhere; }
  .pdp-source-table { table-layout:fixed; }
  .pdp-source-table th { width:36%; white-space:normal; padding-right:12px; }
  .pdp-source-table td,.pdp-source-table th { overflow-wrap:anywhere; }
}

/* Mobile hero: one continuous photograph with typography inside the scene. */
@media (max-width:700px) {
  .hero-slideshow { height:clamp(540px,76svh,620px); background:#718178; }
  .slide-bg { height:100%; object-position:76% center; }
  .slide[data-index="1"] .slide-bg { object-position:82% center; }
  .slide[data-index="2"] .slide-bg { object-position:73% center; }
  .slide::before,.slide[data-index="1"]::before { background:linear-gradient(180deg,transparent 25%,rgba(10,20,15,.04) 40%,rgba(10,20,15,.55) 70%,rgba(10,20,15,.8) 100%),radial-gradient(ellipse at 0% 75%,rgba(10,20,15,.3),transparent 65%); }
  .slide-content { padding:28px 24px 84px; justify-content:flex-end; color:#fff; text-shadow:0 1px 16px #0003; }
  .slide-headline { font-size:clamp(30px,8.8vw,36px); line-height:1.1; max-width:100%; margin-bottom:14px; }
  .slide-eyebrow { color:#fff; font-size:10px; letter-spacing:2.2px; margin-bottom:12px; }
  .slide-sub { color:#ffffffe6; width:100%; max-width:100%; font-size:13px; line-height:1.65; margin-bottom:20px; }
  .hero-slideshow .btn-primary { background:#fff; border-color:#fff; color:#17211b; text-shadow:none; }
  .hero-slideshow .btn-primary:hover { background:#e7ece8; border-color:#e7ece8; color:#17211b; }
  .hero-slideshow .dot::after { background:#ffffff66; }
  .hero-slideshow .dot.active::after { background:white; }
  .hero-slideshow a:focus-visible,.dot:focus-visible { outline-color:#fff; }
}