/* ══════════════════════════════════════════════════════
   shop.css  —  inacsible.com（由 muban 派生；主题色与模板区分）
   ══════════════════════════════════════════════════════ */

/* ── 字体：Satoshi（用于头部促销条等，与 saralhome.com 一致） ─── */
@font-face {
  font-family: 'Satoshi-Regular';
  src: url('/assets/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi-Medium';
  src: url('/assets/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi-Bold';
  src: url('/assets/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
  font-display: swap;
}

/* ── Design Tokens ─────────────────────────────────── */
:root {
  --satoshi-regular: 'Satoshi-Regular', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --satoshi-medium:  'Satoshi-Medium',  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --satoshi-bold:    'Satoshi-Bold',    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --black:   #1a1a1a;
  --dark:    #2d2d2d;
  --mid:     #555;
  --muted:   #888;
  --light:   #f7f7f5;
  --border:  #e8e8e8;
  --white:   #ffffff;
  --sale:    #2563eb;
  --new-clr: #1a1a1a;
  --radius:  4px;
}

/* ── Font variables ─────────────────────────────────── */
:root {
  --font-body:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-logo:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-nav:     'Jost', 'Helvetica Neue', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* iOS Safari：避免 100vw/子像素导致整页可横向微移；clip 优先，旧版回退 hidden */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  /* Modal 打开时隐藏滚动条：预留槽位，避免 body 补偿与遮罩宽度不一致导致右侧白条 */
  scrollbar-gutter: stable;
}

/* 移动端聚焦输入框时不自动放大页面（iOS Safari 在字号 <16px 时会缩放视口） */
@media (pointer: coarse), (max-width: 576px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select,
  [contenteditable="true"] {
    font-size: max(16px, 1em) !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  letter-spacing: .01em;
  /* 横向裁切只放在 html：body 上 overflow-x 可能误裁 position:fixed 的 toast/底栏 */
  max-width: 100%;
}

/* Bootstrap 栅格列默认 min-width:auto，flex 子项易被长内容撑出横向滚动 */
main .row > [class*="col-"] {
  min-width: 0;
}

/* 首页主列：裁切轮播/区块横向溢出；不用 main{overflow-x} 以免破坏商品详情 sticky */
.shop-home {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── WordPress-style admin bar（后台已登录时） ───────── */
:root {
  --admin-bar-h: 40px;
}
body.has-admin-bar {
  padding-top: var(--admin-bar-h);
}
body.has-admin-bar .site-header {
  top: var(--admin-bar-h);
}
.admin-view-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  height: var(--admin-bar-h);
  background: #23282d;
  color: #f0f0f1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, sans-serif;
  font-size: 13px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.admin-view-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 100%;
  padding: 0 10px 0 6px;
  gap: 8px;
}
.admin-view-bar__left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: visible;
}
.admin-view-bar__dropdown {
  position: relative;
  flex-shrink: 0;
}
.admin-view-bar__mainmenu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--admin-bar-h);
  padding: 0 10px 0 8px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #f0f0f1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.admin-view-bar__dropdown:hover .admin-view-bar__mainmenu,
.admin-view-bar__dropdown:focus-within .admin-view-bar__mainmenu,
.admin-view-bar__mainmenu:hover {
  background: #32373c;
  color: #00b9eb;
}
.admin-view-bar__mainmenu-caret {
  font-size: 11px;
  opacity: 0.85;
}
/* 与「主菜单」并列的独立入口（无下拉） */
.admin-view-bar__mainmenu-link {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.admin-view-bar__mainmenu-link:focus-visible {
  outline: 2px solid #00b9eb;
  outline-offset: -2px;
}
.admin-view-bar .dropdown-menu.admin-view-bar__megamenu {
  min-width: 260px;
  max-width: min(92vw, 360px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0 !important;
  border: 1px solid #32373c;
  border-radius: 0 0 6px 6px;
  z-index: 10060;
  padding-top: 4px;
  padding-bottom: 8px;
  display: none;
}
/* 主菜单：悬停/键盘焦点在区域内即展开，不依赖 Bootstrap Dropdown 点击 */
.admin-view-bar__dropdown:hover .dropdown-menu.admin-view-bar__megamenu,
.admin-view-bar__dropdown:focus-within .dropdown-menu.admin-view-bar__megamenu {
  display: block !important;
}
.admin-view-bar .dropdown-menu.admin-view-bar__megamenu .dropdown-header {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #8c8f94 !important;
}
.admin-view-bar .dropdown-menu.admin-view-bar__megamenu .dropdown-item {
  font-size: 0.88rem;
  border-radius: 6px;
  /* Bootstrap 默认 width:100%，hover 背景会顶满下拉框；收窄可点击/高亮区域 */
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
.admin-view-bar .dropdown-menu.admin-view-bar__megamenu .dropdown-item:hover,
.admin-view-bar .dropdown-menu.admin-view-bar__megamenu .dropdown-item:focus {
  background: #2271b1;
  color: #fff;
}
.admin-view-bar__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 8px;
  margin-right: 4px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-view-bar__logo:hover { color: #00b9eb; }
.admin-view-bar__logo-mark {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(135deg, #00b9eb 0%, #2271b1 100%);
  flex-shrink: 0;
}
.admin-view-bar__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 4px;
  margin-right: 2px;
  font-size: 12px;
  color: rgba(240, 240, 241, 0.92);
  flex-shrink: 0;
  white-space: nowrap;
}
.admin-view-bar__online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
  animation: adminBarOnlinePulse 2.2s ease-in-out infinite;
}
@keyframes adminBarOnlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.68; transform: scale(0.92); }
}
.admin-view-bar__online-text strong { color: #fff; font-weight: 700; }
.admin-view-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: var(--admin-bar-h);
  color: #f0f0f1;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.admin-view-bar__link i { font-size: 14px; opacity: 0.9; }
.admin-view-bar__link:hover {
  background: #32373c;
  color: #00b9eb;
}
.admin-view-bar__link--accent {
  color: #9fd3ff;
}
.admin-view-bar__link--accent:hover {
  color: #fff;
}
.admin-view-bar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.admin-view-bar__user {
  display: none;
  align-items: center;
  gap: 4px;
  color: rgba(240, 240, 241, 0.75);
  font-size: 12px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .admin-view-bar__user { display: inline-flex; }
}
.admin-view-bar__logout-form { margin: 0; }
.admin-view-bar__logout {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #f0f0f1;
  background: #32373c;
  border: 1px solid #50575e;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.admin-view-bar__logout:hover {
  background: #50575e;
  border-color: #787c82;
  color: #fff;
}
/* Bootstrap 默认 .modal(1055) / .modal-backdrop(1050) 低于顶栏(10050)，已登录前台预览时弹窗须盖在 .admin-view-bar__inner 与下拉(10060)之上；略高于购物车侧栏(10071)以便下单成功等弹层置顶 */
body.has-admin-bar .modal-backdrop {
  z-index: 10078;
}
body.has-admin-bar .modal {
  z-index: 10080;
}
/* 手机：不展示工具条内容，避免挤占视口；前台顶栏回到页面顶端 */
@media (max-width: 767.98px) {
  .admin-view-bar__inner {
    display: none !important;
  }
  .admin-view-bar {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    pointer-events: none;
    box-shadow: none;
  }
  body.has-admin-bar {
    padding-top: 0 !important;
  }
  body.has-admin-bar .site-header {
    top: 0 !important;
  }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Scrolling Announcement Bar ─────────────────────── */
.marquee-bar {
  background: var(--black);
  color: rgba(255,255,255,.85);
  font-family: var(--font-nav);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding-right: 64px;
}
.marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Top announcement bar（后台可配）──────────────────── */
.top-announce-bar {
  background: var(--top-bar-bg, #0b1426);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-nav);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 100%;
  overflow-x: hidden;
}
.top-announce-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 1em;
}
.top-announce-bar__line1 {
  font-size: var(--top-bar-line1-fs, 0.93em);
  color: var(--top-bar-line1, var(--top-bar-contact-msg-color, #fff));
  white-space: pre-line;
  word-break: break-word;
}
.top-announce-bar__reminder {
  font-size: 1em;
  font-weight: 600;
  color: var(--top-bar-accent, #c9a227);
  max-width: 52rem;
  margin: 0 auto;
  line-height: 1.4;
  word-break: break-word;
}
.top-announce-bar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}
.top-announce-bar__contact-msg {
  color: var(--top-bar-contact-msg-color, #fff);
  font-size: var(--top-bar-contact-msg-fs, 1em);
}
.top-announce-bar__email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--top-bar-email-color, var(--top-bar-contact-msg-color, #fff));
  font-size: var(--top-bar-email-fs, 1em);
  text-decoration: none;
}
.top-announce-bar__email:hover {
  opacity: 0.85;
  text-decoration: underline;
}
.top-announce-bar__email .bi {
  font-size: 1.05em;
  opacity: 0.95;
}
.top-announce-bar__promo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 2px;
}
.top-announce-bar__timer {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.top-announce-bar__digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  padding: 4px 6px;
  border-radius: 6px;
  background: #c62828;
  color: #fff;
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 0.02em;
}
.top-announce-bar__sep {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
  padding: 0 1px;
}
.top-announce-bar__promo-text {
  color: var(--top-bar-promo-color, var(--top-bar-accent, #c9a227));
  font-weight: 600;
  font-size: var(--top-bar-promo-fs, 1.02em);
  letter-spacing: 0.02em;
}

@media (max-width: 575.98px) {
  .top-announce-bar {
    font-size: 0.8rem;
    padding: 8px 10px 10px;
  }
  .top-announce-bar__promo-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* ── Live sales toast（左下角购买动态；变量由 settings 注入）──────── */
.live-sales-toast {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0));
  bottom: max(16px, env(safe-area-inset-bottom, 0));
  z-index: 1040;
  width: min(380px, calc(100% - 24px));
  box-sizing: border-box;
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  font-size: var(--lst-base-font, 0.88rem);
  pointer-events: none;
  transition: bottom 0.2s ease;
}
body.pd-sticky-atc-open .live-sales-toast {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 10069;
}
.live-sales-toast[hidden] {
  display: none !important;
}
.live-sales-toast.is-out {
  pointer-events: none;
}
.live-sales-toast.is-out .live-sales-toast__inner {
  animation: liveSalesToastOut 0.42s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes liveSalesToastIn {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); }
  55% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes liveSalesToastOut {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.96); }
}
.live-sales-toast--intro .live-sales-toast__inner {
  animation: liveSalesToastIn 0.58s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.live-sales-toast__inner {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  border-radius: 12px;
  color: var(--lst-color-main, #202223);
  background: var(--lst-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 12px 32px -8px rgba(0, 0, 0, 0.12);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.live-sales-toast__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--lst-thumb-bg, #f6f6f7);
  border: 1px solid var(--lst-thumb-border, rgba(0, 0, 0, 0.06));
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.live-sales-toast__thumb:not(.live-sales-toast__link--disabled):hover {
  box-shadow: 0 0 0 2px rgba(0, 128, 96, 0.25);
  transform: scale(1.02);
}
.live-sales-toast__link--disabled {
  cursor: default;
}
.live-sales-toast__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  vertical-align: top;
}
.live-sales-toast__thumb--has-img .live-sales-toast__thumb-img {
  display: block;
}
.live-sales-toast__thumb--has-img .live-sales-toast__thumb-ph {
  display: none;
}
.live-sales-toast__thumb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lst-color-time, #8c9196);
  font-size: 1.35rem;
}
.live-sales-toast__body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
.live-sales-toast__kicker {
  margin: 0 0 2px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lst-color-kicker, #6d7175);
  line-height: 1.3;
}
.live-sales-toast__buyer {
  margin: 0 0 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lst-color-main, #202223);
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-sales-toast__product.live-sales-toast__product-link {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lst-color-product, #303030);
  line-height: 1.35;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease;
}
.live-sales-toast__product-link:not(.live-sales-toast__link--disabled):hover {
  color: var(--lst-link-hover, #008060);
  text-decoration: underline;
}
.live-sales-toast__time {
  margin: 0;
  font-size: 0.68rem;
  color: var(--lst-color-time, #8c9196);
  line-height: 1.3;
}
.live-sales-toast__close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--lst-color-time, #8c9196);
  font-size: 1.2rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 6px;
  margin: -4px -4px 0 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.live-sales-toast__close:hover {
  color: var(--lst-color-main, #202223);
  background: rgba(0, 0, 0, 0.05);
}
@media (max-width: 575.98px) {
  .live-sales-toast {
    font-size: calc(var(--lst-base-font, 0.88rem) * 0.95);
  }
  .live-sales-toast__thumb {
    width: 52px;
    height: 52px;
  }
}

/* ── 首页弹窗（变量由 settings 注入）────────────────────── */
.home-promo-modal .modal-content.home-promo-modal__sheet {
  background: var(--hp-bg, #ffffff);
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
}
/* 首页弹窗打开时锁定整页滚动（配合 home-popup.php 在 html/body 上加类） */
html.home-promo-modal-open,
body.home-promo-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.home-promo-modal-open {
  height: 100%;
}

.home-promo-modal .modal-title.home-promo-modal__title {
  font-size: var(--hp-title-fs, 1.15rem);
  color: var(--hp-title-color, #111111);
}
.home-promo-modal .home-promo-modal__body-text {
  font-size: var(--hp-body-fs, 0.9rem);
  line-height: 1.6;
  color: var(--hp-body-color, #374151);
}
.home-promo-modal .home-promo-modal__btn {
  border-radius: 10px;
  font-weight: 600;
  background: var(--hp-btn-bg, #212529);
  color: var(--hp-btn-color, #ffffff);
  border: none;
}
.home-promo-modal .home-promo-modal__btn:hover {
  filter: brightness(1.08);
  color: var(--hp-btn-color, #ffffff);
}

/* ── Promo Scroller（黄色跑马灯，与 saralhome.com 一致） ─────────── */
.scroller.hdr-promo-bar {
  max-width: 100%;
  background: var(--hpb-bg, #FDD105);
  color: var(--hpb-fg, #000);
  --scroll-distance: calc(-50% - 0.5rem);
}
.scroller.hdr-promo-bar[data-animated="true"] { overflow: hidden; }
.scroller.hdr-promo-bar[data-animated="true"] .scroller__inner {
  flex-wrap: nowrap;
  animation: hpbScroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
  transform: translate3d(0, 0, 0);
}
.scroller.hdr-promo-bar[data-speed="slow"] { --_animation-duration: 60s; }
.scroller.hdr-promo-bar[data-speed="fast"] { --_animation-duration: 20s; }
.scroller.hdr-promo-bar:hover .scroller__inner { animation-play-state: paused; }
.hdr-promo-bar .tag-list {
  margin: 0;
  padding-inline: 0;
  padding-block: 0.2rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.hdr-promo-bar .tag-list li {
  padding: 0.5rem;
  margin-bottom: 0;
  font-size: 16px;
  font-family: var(--satoshi-medium);
  font-weight: 500;
  white-space: nowrap;
  flex: none;
  line-height: 1.3;
  letter-spacing: 0;
}
.hdr-promo-bar .tag-list li::before { display: none !important; }
.hdr-promo-bar .tag-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
}
.hdr-promo-bar .tag-list a:hover { opacity: .8; }
@keyframes hpbScroll {
  to { transform: translate(var(--scroll-distance)); }
}
@media (max-width: 768px) {
  .hdr-promo-bar .tag-list li { padding: 0.5rem; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroller.hdr-promo-bar[data-animated="true"] .scroller__inner { animation: none; }
}

/* ── Site Header v2（Logo + Search Pill + Actions） ───── */
.site-header--v2 {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  /* 向下滚动时自动隐藏，向上滚动时滑回；transform 替代 top 避免 sticky 错位 */
  transition: transform .28s ease, box-shadow .2s ease;
  will-change: transform;
}
/* JS 会在向下滚动 > 阈值时加这个 class */
.site-header--v2.is-hidden {
  transform: translateY(-100%);
  box-shadow: none;
}
/* 回到顶部时去掉阴影，更干净（JS 控制） */
.site-header--v2.is-scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* 如果后台 admin bar 显示，把 header 隐藏到 admin bar 下方即可（保留 admin bar 可见） */
body.has-admin-bar .site-header--v2.is-hidden { transform: translateY(calc(-100% - 4px)); }
/* 用户偏好减少动效时，直接关掉滑动，避免晕眩 */
@media (prefers-reduced-motion: reduce) {
  .site-header--v2 { transition: none !important; }
  .site-header--v2.is-hidden { transform: none; }
}
.site-header--v2 .hdr2-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 10px 0;
}
/* 结账等：无顶栏搜索时桌面 Logo 居中；手机单行顶栏（无第二行搜索） */
@media (min-width: 992px) {
  .site-header--v2 .hdr2-row.hdr2-row--logo-center-desktop {
    grid-template-columns: 1fr auto 1fr;
  }
  .hdr2-row--logo-center-desktop .hdr2-logo {
    grid-column: 2;
    justify-self: center;
  }
  .hdr2-row--logo-center-desktop .hdr2-actions {
    grid-column: 3;
    justify-self: end;
  }
}
@media (max-width: 991.98px) {
  .hdr2-row--logo-center-desktop {
    grid-template-rows: auto;
    grid-template-areas: "ham logo actions";
  }
}
.hdr2-ham { display: none; }
.hdr2-logo { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--black, #111); }
.hdr2-logo img { max-height: 52px; width: auto; }
.hdr2-logo-svg {
  display: block;
  width: auto;
  height: 38px;
  color: inherit;
  fill: currentColor;
}
.hdr2-logo-wordmark {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: none; /* 与主域名推导的品牌一致，如 Inacsible */
  line-height: 1;
  color: var(--black);
  white-space: nowrap;
}

/* Search（saralhome 风格：白底 + #d0d0d0 细边 + 2px 圆角 + 打字机占位） */
/* 产品详情顶栏：Swiper 横向分类导航（替换搜索框） */
.hdr2-pd-nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: min(29vw, 100%);
  min-width: 0;
  justify-self: center;
}
/* 顶栏分类条：未引入 Swiper 官方 CSS 或未初始化时，.swiper-wrapper 默认为块级会导致标签纵向堆叠 */
.pd-hdr-nav-swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.pd-hdr-nav-swiper .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  /* 不用 gap：Swiper 用 transform 定位时与 flex gap 混用易出现首帧与初始化后差几像素「左移」 */
}
.pd-hdr-nav-swiper .swiper-slide {
  width: auto;
  flex-shrink: 0;
  height: auto;
  box-sizing: border-box;
}
.pd-hdr-nav-swiper .swiper-slide:not(:last-child) {
  margin-right: 8px;
}
.pd-hdr-nav-link {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  font-family: var(--satoshi-medium, var(--font-nav, system-ui));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black, #111);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pd-hdr-nav-link:hover {
  background: #f5f5f5;
  border-color: #bbb;
  color: var(--black, #111);
}
.pd-hdr-nav-link--active {
  background: #0c0c0c;
  border-color: #0c0c0c;
  color: #fff;
}
.pd-hdr-nav-link--active:hover {
  background: #222;
  border-color: #222;
  color: #fff;
}

/* 产品详情顶栏：桌面恢复中间搜索（见 header：.hdr2-search--pd-detail）；窄屏仍为 Swiper 导航 */

.hdr2-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 29vw;
  min-width: 320px;
  justify-self: center;
}
.hdr2-search .hdr2-search__wrap {
  width: 100%;
  margin-right: 0;
}
.hdr2-search__input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 48px 0 20px;
  border: 1px solid #d0d0d0;
  background: #fff;
  border-radius: 2px;
  font-family: var(--satoshi-medium);
  font-size: 14px;
  line-height: 19px;
  color: #0c0c0c;
  outline: none;
  transition: border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hdr2-search__input:focus { border-color: #0c0c0c; }
.hdr2-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hdr2-search .placeholder_txt {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  gap: 0;
}
.hdr2-search .placeholder_txt.hide_span { display: none !important; }
.hdr2-search .static-text {
  font-family: var(--satoshi-medium);
  font-size: 14px;
  line-height: 19px;
  color: #0c0c0c;
  text-transform: capitalize;
}
.hdr2-search .dynamic-text {
  font-family: var(--satoshi-bold);
  font-size: 14px;
  line-height: 19px;
  color: #0c0c0c;
  padding-left: 4px;
  min-width: 1ch;
}
/* ── AJAX 搜索建议下拉层 ──────────────────────────── */
.hdr2-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  z-index: 920;
  max-height: min(72vh, 620px);
  overflow: hidden;
  animation: hdr2-suggest-in .14s ease-out;
}
@keyframes hdr2-suggest-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hdr2-suggest__body {
  max-height: inherit;
  overflow-y: auto;
  padding: 6px;
}
.hdr2-suggest__item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--black, #111);
  align-items: center;
  transition: background .12s;
}
.hdr2-suggest__item:hover,
.hdr2-suggest__item.is-active {
  background: var(--light, #f7f7f5);
}
.hdr2-suggest__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hdr2-suggest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hdr2-suggest__img-ph {
  color: #bbb;
  font-size: 1.25rem;
}
.hdr2-suggest__info {
  min-width: 0;
  flex: 1;
}
.hdr2-suggest__name {
  font-size: .88rem;
  line-height: 1.3;
  color: var(--black, #111);
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hdr2-suggest__name mark {
  background: #fff3a3;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.hdr2-suggest__cat {
  font-size: .7rem;
  color: var(--muted, #888);
  margin-top: 2px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hdr2-suggest__pricerow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: .82rem;
}
.hdr2-suggest__price { font-weight: 600; color: var(--black, #111); }
.hdr2-suggest__price-orig { color: var(--muted, #999); text-decoration: line-through; font-size: .78rem; }
.hdr2-suggest__sale {
  background: var(--sale, #d32f2f);
  color: #fff;
  font-size: .68rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.hdr2-suggest__empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--muted, #888);
  font-size: .85rem;
}
.hdr2-suggest__empty a {
  color: var(--black, #111);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.hdr2-suggest__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  margin: 4px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--black, #111);
  background: var(--light, #f7f7f5);
  text-decoration: none;
  transition: background .12s;
}
.hdr2-suggest__more:hover { background: #ececec; color: var(--black, #111); }
/* 移动端：下拉宽度占满屏幕视口，避免 search 栏在顶部靠边时被裁 */
@media (max-width: 991.98px) {
  .hdr2-suggest { max-height: min(68vh, 540px); }
  .hdr2-suggest__thumb { width: 48px; height: 48px; }
  .hdr2-suggest__name { font-size: .85rem; }
}

.hdr2-search__btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0c0c0c;
}
.hdr2-search__btn:hover { opacity: .75; }
.hdr2-search__btn svg { width: 22px; height: 22px; display: block; }

/* 当输入框获得焦点时，只让打字机继续跑，placeholder 不额外收起；有值时由 JS 加 .hide_span 收起 */

/* Actions */
.hdr2-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
.hdr2-icon { width: 42px; height: 42px; }
.hdr2-cur { margin-right: 4px; }

/* 桌面 mega-menu（对齐 saralhome.com .menu__*) */
.hdr2-menu { border-top: 1px solid var(--border, #e5e5e5); position: relative; z-index: 850; }
.hdr2-menu .menu__panel.menu__level-01 {
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hdr2-menu .menu__panel.menu__level-01 .parent_menu_item.menu__item {
  display: inline-flex;
  align-items: center;
  /* 关键：子下拉用的是 position:absolute + left:50%，必须有一个定位祖先作为参照，
     否则会回溯到 .hdr2-menu（整条导航），导致所有下拉都出现在屏幕中间。
     Bootstrap 5 并无 .position-lg-relative，因此这里显式补上。 */
  position: relative;
}
.hdr2-menu .parent_link {
  font-family: var(--satoshi-medium, var(--font-nav, system-ui));
  font-size: .95rem;
  font-weight: 500;
  color: var(--black, #111);
  padding: 16px 18px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: .01em;
  position: relative;
  transition: color .15s;
  gap: 4px;
}
.hdr2-menu .parent_link:hover,
.hdr2-menu .parent_menu_item:hover > .parent_link { color: #555; }
.hdr2-menu .parent_link span { line-height: 1.2; }
.hdr2-menu .menu__item_arrow {
  width: 14px;
  height: 14px;
  color: currentColor;
  transition: transform .18s ease;
}
.hdr2-menu .menu__item_arrow svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.hdr2-menu .parent_menu_item:hover .menu__item_arrow { transform: rotate(180deg); }
.hdr2-menu .menu__item--sale > .parent_link { color: var(--sale, #d32f2f); font-weight: 700; }

/* 二级下拉（由父级悬浮触发） */
.hdr2-menu .menu__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--border, #e5e5e5);
  border-top: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s, transform .18s ease;
  z-index: 860;
}
.hdr2-menu .parent_menu_item.menu__item--has-children:hover > .menu__dropdown,
.hdr2-menu .parent_menu_item.menu__item--has-children:focus-within > .menu__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.hdr2-menu .menu__list--styled.menu__level-02 { padding: 6px 6px; min-width: 260px; }
.hdr2-menu .menu__list--styled .menu__item { display: block; }
.hdr2-menu .menu__list--styled .menu__item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  font-family: var(--satoshi-medium, var(--font-nav, system-ui));
  font-size: .9rem;
  font-weight: 500;
  color: var(--black, #111);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.hdr2-menu .menu__list--styled .menu__item a:hover { background: #f7f7f5; color: #000; }
.hdr2-menu .menu_item_img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hdr2-menu .menu_item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991.98px) {
  /* 1fr | auto | 1fr：左右等分，中间列仅容纳 Logo，实现手机顶栏 Logo 相对屏幕水平居中 */
  .site-header--v2 .hdr2-row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "ham logo actions"
      "search search search";
    gap: 10px 8px;
    min-height: auto;
    padding: 10px 0;
  }
  .hdr2-ham { display: inline-flex; align-items: center; justify-content: center; grid-area: ham; justify-self: start; background: transparent; border: 0; width: 40px; height: 40px; color: var(--black); }
  .hdr2-logo { grid-area: logo; justify-self: center; }
  .hdr2-logo img { max-height: 40px; }
  .hdr2-logo-svg { height: 30px; }
  .hdr2-logo-wordmark { font-size: 1.1rem; letter-spacing: .06em; }
  .hdr2-actions { grid-area: actions; justify-self: end; align-self: center; }
  .hdr2-search,
  .hdr2-pd-nav-wrap {
    grid-area: search;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  .hdr2-pd-nav-wrap {
    padding: 0 2px;
  }
  .hdr2-search__input { height: 40px; min-height: 40px; font-size: 14px; padding-left: 16px; padding-right: 44px; }
  .hdr2-search .placeholder_txt { left: 16px; }
  .hdr2-search .static-text,
  .hdr2-search .dynamic-text { font-size: 13px; line-height: 18px; }
  .hdr2-search__btn { right: 6px; width: 32px; height: 32px; }
  .hdr2-search__btn svg { width: 18px; height: 18px; }
  .hdr2-menu { display: none; }
}

/* 无顶栏搜索、无 Swiper 分类导航时（如 Track order）：单行顶栏，仅保留上内边距 */
@media (max-width: 991.98px) {
  .site-header--v2 .hdr2-row.hdr2-row--logo-center-desktop:not(:has(.hdr2-search)):not(:has(.hdr2-pd-nav-wrap)) {
    padding: 10px 0 10px 0;
    grid-template-rows: auto;
    grid-template-areas: "ham logo actions";
  }
}

/* 隐藏旧的 marquee-bar（v2 顶栏已不再渲染，该规则仅作保险） */
.site-header--v2 ~ .marquee-bar { display: none; }

/* ── Site Header ─────────────────────────────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
/* 移动端：旧版顶栏随页面滚动；v2 顶栏保持 sticky + JS 向下隐藏/向上显示 */
@media (max-width: 991.98px) {
  .site-header:not(.site-header--v2) {
    position: relative;
    top: auto !important;
  }
  body.has-admin-bar .site-header:not(.site-header--v2) {
    top: auto !important;
  }
}
.header-row {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 0;
}

/* ── Header three-column layout ─────────────────────── */
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
}

/* ── Logo (center column) ───────────────────────────── */
.site-logo-center {
  justify-self: center;
  flex-shrink: 0;
}
.site-logo { flex-shrink: 0; }
.site-logo img,
.site-logo-center img { max-height: 42px; width: auto; }
.logo-wordmark {
  font-family: var(--font-logo);
  font-size: 1.65rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .logo-wordmark {
    font-size: 1.12rem;
    letter-spacing: 0.12em;
  }
}

/* ── Desktop Nav (left column) ──────────────────────── */
.main-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 68px;
}
.main-nav-left {
  justify-self: start;
}
.nav-link-af {
  font-family: var(--font-nav);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--black);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 68px;
  box-sizing: border-box;
  position: relative;
  transition: color .18s;
  white-space: nowrap;
  line-height: 1.25;
}
.nav-link-af:hover { color: var(--black); opacity: .7; }
.nav-link-af::after {
  content: '';
  position: absolute;
  /* 与 header 同高时，文字纵向居中；下划线贴在文字下沿附近，避免贴齐块底显得离字很远 */
  bottom: 20px;
  left: 16px;
  right: 16px;
  height: 1.5px;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.nav-link-af:hover::after { transform: scaleX(1); }
.nav-link-af.sale-link { color: var(--sale); font-weight: 600; }
.nav-link-af.sale-link::after { background: var(--sale); }

/* ── Header Right Actions (right column) ───────────── */
.header-right {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: end;
}

/* ── Currency switcher ───────────────────────────── */
.cur-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: var(--font-nav);
}
.cur-trigger:hover {
  background: var(--border);
  border-color: #ccc;
}
.cur-trigger[aria-expanded="true"] {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}
.cur-trigger[aria-expanded="true"] .cur-symbol,
.cur-trigger[aria-expanded="true"] .cur-code,
.cur-trigger[aria-expanded="true"] .cur-arrow { color: #fff; }

.cur-symbol {
  font-size: .82rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}
.cur-code {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
}
.cur-arrow {
  font-size: .5rem;
  color: var(--muted);
  transition: transform .2s;
  margin-left: 1px;
}
.cur-trigger[aria-expanded="true"] .cur-arrow { transform: rotate(180deg); }

.cur-panel {
  min-width: 210px;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
  margin-top: 6px !important;
}
.cur-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
}
.cur-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--black);
  transition: background .12s;
  cursor: pointer;
}
.cur-item:hover { background: var(--light); color: var(--black); }
.cur-item--active { background: var(--light); }

.cur-item-sym {
  width: 28px;
  height: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--black);
}
.cur-item--active .cur-item-sym {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}
/* 下拉内与代码/名称重复；长符号（CA$、HK$ 等）易撑破行，故不展示符号格 */
.cur-list .cur-item-sym {
  display: none;
}
.cur-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.cur-item-code {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--black);
}
.cur-item-name {
  font-size: .7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cur-item-check {
  font-size: .85rem;
  color: var(--black);
  font-weight: 700;
  flex-shrink: 0;
}

/* Mobile: currency block in footer (dark background) */
.footer-currency-wrap {
  padding: 12px 0 8px;
}
/* 移动端：货币区与版权条之间不再多一条横线（桌面端无货币块，需限制在 lg 以下） */
@media (max-width: 991.98px) {
  .footer-currency-wrap + .footer-bottom-bar {
    border-top: none !important;
  }
}
.footer-currency-wrap .cur-trigger {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.footer-currency-wrap .cur-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}
.footer-currency-wrap .cur-trigger[aria-expanded="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--black);
}
.footer-currency-wrap .cur-trigger[aria-expanded="true"] .cur-symbol,
.footer-currency-wrap .cur-trigger[aria-expanded="true"] .cur-code,
.footer-currency-wrap .cur-trigger[aria-expanded="true"] .cur-arrow {
  color: var(--black);
}
.footer-currency-wrap .cur-symbol,
.footer-currency-wrap .cur-code {
  color: rgba(255, 255, 255, 0.92);
}
.footer-currency-wrap .cur-arrow {
  color: rgba(255, 255, 255, 0.5);
}

/* Currency text button (legacy, keep for compat) */
.hdr-icon-text {
  font-family: var(--font-nav) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  width: auto !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  gap: 3px;
  text-transform: uppercase;
  color: var(--mid) !important;
}

/* Header icon buttons */
.hdr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--black);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: background .15s;
  position: relative;
  font-size: 1.15rem;
}
.hdr-icon:hover { background: var(--light); color: var(--black); }

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  font-size: .6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--white);
}

/* ── Search Overlay & Panel ──────────────────────────── */
.search-veil {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 920;
  backdrop-filter: blur(3px);
}
.search-veil.open { display: block; animation: vfade .2s; }

.search-panel {
  position: fixed;
  top: 0;
  right: -520px;
  width: 480px;
  max-width: 100%;
  height: 100vh;
  background: var(--white);
  z-index: 921;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 32px rgba(0,0,0,.12);
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow-x: hidden;
  box-sizing: border-box;
}
.search-panel.open { right: 0; }

.search-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
}
.search-panel-title {
  font-family: var(--font-logo);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--black);
}
.search-panel-close {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--mid);
  transition: .15s;
}
.search-panel-close:hover { background: var(--light); color: var(--black); border-color: var(--black); }

.search-panel-body {
  padding: 28px;
  overflow-x: hidden;
  min-width: 0;
}

.search-panel-form {
  display: flex;
  align-items: center;
  border: 2px solid var(--black);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.search-panel-form:focus-within { box-shadow: 0 0 0 3px rgba(26,26,26,.1); }

.search-panel-form input {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: 'Nunito Sans', sans-serif;
  color: var(--black);
  background: transparent;
}
.search-panel-form input::placeholder { color: var(--muted); }

.search-panel-submit {
  background: none;
  border: none;
  border-left: 1.5px solid var(--border);
  padding: 0 18px;
  height: 100%;
  cursor: pointer;
  color: var(--mid);
  font-size: 1.1rem;
  transition: color .15s;
  display: flex;
  align-items: center;
}
.search-panel-submit:hover { color: var(--black); }

@media (max-width: 575px) {
  .search-panel { width: 100%; right: -100%; }
}

/* Mobile Hamburger */
.ham {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--black);
  padding: 8px;
  border-radius: 4px;
  transition: background .15s;
  display: none;
}
.ham:hover { background: var(--light); }


/* ── Mobile Nav：左侧 offcanvas（高于顶栏 / admin bar / 购物车遮罩）── */
.mobile-nav-offcanvas {
  --bs-offcanvas-width: min(320px, 88vw);
  z-index: 10082;
}
/* 必须高于 .offcanvas-backdrop，否则点击会落在遮罩上（链接无法跳转、像「没反应」） */
.mobile-nav-offcanvas.offcanvas.show,
.mobile-nav-offcanvas.offcanvas.showing {
  z-index: 10083 !important;
}
.mobile-nav-offcanvas .offcanvas-body {
  position: relative;
  z-index: 1;
}
.offcanvas-backdrop {
  z-index: 10081 !important;
}
.mobile-nav-offcanvas .offcanvas-header {
  background: var(--white);
}
.mobile-nav-offcanvas .btn-close:focus {
  box-shadow: none;
}

/* ── Mobile Nav Drawer ───────────────────────────────── */
.mobile-drawer {
  background: var(--white);
}
.mobile-drawer a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-family: var(--font-nav);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background .15s, color .15s;
  position: relative;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
  touch-action: manipulation;
}
.mobile-drawer a:hover { color: var(--black); }
.mobile-drawer a:hover { background: var(--light); }
.mobile-drawer .mob-search {
  padding: 12px 16px;
  background: var(--light);
}
.mobile-drawer .mob-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 14px;
  font-size: .82rem;
  outline: none;
  font-family: 'Nunito Sans', sans-serif;
  background: var(--white);
}

/* 左侧抽屉：与桌面 hdr2-menu 同一套分类（menu__panel / menu__level-01），纵向展开 + 子分类内嵌（在侧边栏 Home 等链接之下） */
.mobile-nav-offcanvas .mobile-drawer-mega {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu__panel.menu__level-01 {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-nav-offcanvas .mobile-drawer-mega .parent_menu_item.menu__item {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.mobile-nav-offcanvas .mobile-drawer-mega .parent_menu_item.menu__item:last-child {
  border-bottom: 0;
}
.mobile-nav-offcanvas .mobile-drawer-mega .parent_link {
  font-family: var(--font-nav);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 14px 20px;
  white-space: normal;
  width: 100%;
  box-sizing: border-box;
  transition: background .15s, color .15s;
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu__item--sale > .parent_link {
  color: var(--sale, #d32f2f);
  font-weight: 700;
}
.mobile-nav-offcanvas .mobile-drawer-mega .parent_link:hover,
.mobile-nav-offcanvas .mobile-drawer-mega .parent_link:focus-visible {
  color: var(--black);
  background: var(--light);
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu__item_arrow {
  display: none !important;
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu__dropdown {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  min-width: 0 !important;
  width: 100%;
  margin: 0;
  padding: 0 0 8px;
  background: var(--light);
  border: 0;
  border-top: 1px solid var(--border);
  box-shadow: none;
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu__list--styled.menu__level-02 {
  min-width: 0 !important;
  padding: 6px 0 10px !important;
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu__list--styled .menu__item a {
  padding: 10px 20px 10px 28px;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: none;
  white-space: normal;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu__list--styled .menu__item:last-child a {
  border-bottom: 0;
}
.mobile-nav-offcanvas .mobile-drawer-mega .menu_item_img {
  width: 40px;
  height: 40px;
}

/* ── Cart Sidebar ────────────────────────────────────── */
/* 须高于 .admin-view-bar(10050) 与 .admin-view-bar__megamenu(10060)，避免已登录前台时侧栏被挡 */
.cart-veil {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 10070;
}
.cart-veil.open { display: block; animation: vfade .2s; }
/* 侧栏打开时禁止背后页面滚动（侧栏内 .cart-slide-body 仍可滚动） */
html.cart-slide-open,
body.cart-slide-open {
  overflow: hidden;
  height: 100%;
}
.cart-slide {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  height: 100dvh;
  background: var(--white);
  z-index: 10071;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.cart-slide.open { right: 0; }
.cart-slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cart-slide-head h6 {
  margin: 0;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cart-close-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: none;
  color: var(--black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: .15s;
}
.cart-close-btn i {
  color: inherit;
}
.cart-close-btn:hover {
  background: var(--light);
  color: var(--black);
}
.cart-slide-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}
/* 底部留出安全区 + 额外间距，避免被 iOS Safari 底部工具栏 / Home 条遮挡 */
.cart-slide-foot {
  flex-shrink: 0;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 14px);
  border-top: 1px solid var(--border);
}
/* 空车：中间区不撑满剩余高度，操作区紧跟「Your cart is empty」下方，避免 iOS 上底部按钮在视口外 */
.cart-slide--empty .cart-slide-body {
  flex: 0 1 auto;
  overflow-y: visible;
  max-height: none;
}
.cart-slide--empty .cart-slide-foot {
  margin-top: 0;
}
/* 有商品：Subtotal / View cart / Checkout 放在滚动区内、Remove all 下方，避免 iOS 上固定底栏被挡 */
.cart-slide-foot--inline {
  margin-top: 16px;
  padding-top: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 8px);
  border-top: 1px solid var(--border);
}
.cart-slide-foot--inline .btn-black:last-child {
  margin-bottom: 0;
}

.cart-side-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-side-qty__btn {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--black);
  padding: 0;
}
.cart-side-qty__btn:hover:not(:disabled) { background: var(--light); }
.cart-side-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-side-qty__val {
  min-width: 28px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-nav);
}
.cart-side-qty__sel {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-nav);
  padding: 0 2px;
  min-width: 42px;
  max-width: 64px;
  text-align: center;
  cursor: pointer;
  color: var(--black);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.cart-side-qty__sel:focus { outline: none; }
.cart-side-remove {
  font-size: 0.72rem;
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-nav);
}
.cart-side-remove:hover { color: var(--black); }
.cart-side-clear-wrap { margin-top: 4px; }
.cart-side-remove-all {
  width: 100%;
  font-size: 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 12px;
  cursor: pointer;
  color: var(--black);
  font-family: var(--font-nav);
  letter-spacing: 0.04em;
}
.cart-side-remove-all:hover {
  background: var(--light);
  border-color: var(--black);
}

/* ── Toast ───────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast-af {
  background: var(--black);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: .82rem;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  pointer-events: all;
  animation: taf .25s ease;
}
.toast-af.success { background: #1b4332; }
.toast-af.danger  { background: #7f1d1d; }
.toast-af i { font-size: 1rem; flex-shrink: 0; }
.toast-af .ta-m { flex: 1; }
.toast-af .ta-x {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}

.shop-scroll-sentinel {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
  flex-shrink: 0;
}

/* Home hero: 上下左右留边距，不贴满屏幕；直角；桌面限制最大宽度；无黑色底色 */
#heroSlider {
  max-width: 1760px;
  margin: 16px auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: transparent !important;
}
@media (min-width: 768px) {
  #heroSlider {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 48px);
  }
}
@media (min-width: 1200px) {
  #heroSlider {
    margin-top: 24px;
    margin-bottom: 24px;
    width: calc(100% - 64px);
  }
}
#heroSlider .carousel-inner {
  overflow: hidden;
  max-width: 100%;
}
#heroSlider .carousel-item {
  max-width: 100%;
}
#heroSlider .carousel-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
}
#heroSlider .carousel-control-prev,
#heroSlider .carousel-control-next {
  width: 52px;
  min-width: 0;
  flex: 0 0 52px;
  padding: 0;
  box-sizing: border-box;
  opacity: 1;
}

/* 覆盖 Bootstrap 默认 .container 最大宽度，避免桌面端头部分类导航换行 */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1320px;
  }
}
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1440px;
  }
}

/* Bootstrap modal: mobile horizontal overflow — centered+scrollable flex min-width, long text, backdrop 100vw */
.modal-dialog {
  min-width: 0;
}
.modal-dialog-scrollable .modal-content {
  min-width: 0;
}
.modal-content {
  min-width: 0;
}
.modal-body {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* 用四边贴齐替代 100vw/100%：避免遮罩比可视区窄一条、露出 body 白底 */
.modal-backdrop {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}
@media (max-width: 575.98px) {
  .modal-dialog {
    width: 100%;
    max-width: calc(100% - 2 * var(--bs-modal-margin, 0.5rem));
  }
}

/* ── Global Buttons ──────────────────────────────────── */
.btn-black {
  background: var(--black);
  color: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 2px;
  padding: 11px 28px;
  font-family: var(--font-nav);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-black:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}
/* 深色底栏上的白色主按钮（页脚订阅等） */
.btn-white {
  background: #fff;
  color: var(--black);
  border: 1.5px solid #fff;
  border-radius: 50px;
  padding: 10px 22px;
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-white:hover {
  background: #f2f2f2;
  border-color: #f2f2f2;
  color: var(--black);
}
.btn-outline-black {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
  border-radius: 2px;
  padding: 9px 26px;
  font-family: var(--font-nav);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-outline-black:hover { background: var(--black); color: var(--white); }

/* ══════════════════════════════════════════════════════
   LEFTONHOME-STYLE SECTIONS
   ══════════════════════════════════════════════════════ */

/* ── Section typography ──────────────────────────────── */
.lf-sec-title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--black);
  margin: 0;
  letter-spacing: .01em;
}
.lf-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.lf-view-all {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color .15s;
}
.lf-view-all:hover { color: var(--black); }

/* ── Featured picks: trust strip（深色 + 三卡，与稿一致）────── */
.home-trust-strip {
  background: #262626;
  color: #fff;
  padding: 2.25rem 0 2.75rem;
  margin-top: 0;
}
@media (min-width: 768px) {
  .home-trust-strip {
    padding: 2.75rem 0 3rem;
  }
}
.home-trust-strip__head {
  text-align: center;
  margin-bottom: 1.75rem;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .home-trust-strip__head {
    margin-bottom: 2rem;
  }
}
.home-trust-strip__line1 {
  font-family: var(--font-nav);
  font-size: clamp(1.1rem, 2.9vw, 1.5rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.35rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.home-trust-strip__line2 {
  font-family: var(--font-nav);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: #ffd700;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0;
}
.home-trust-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #404040;
  border-radius: 12px;
  padding: 1.05rem 1.15rem;
  min-height: 100%;
}
.home-trust-card__ico {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  font-size: 1.7rem;
  line-height: 1;
}
.home-trust-card__ico .bi {
  display: block;
}
.home-trust-card__text {
  min-width: 0;
  text-align: left;
}
.home-trust-card__title {
  font-family: var(--font-nav);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.2rem;
  line-height: 1.25;
}
.home-trust-card__sub {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 767.98px) {
  .home-trust-strip__cards .col-12 {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Home: Featured picks bottom strip ─────────────────── */
.home-featured-bar {
  position: relative;
  margin-top: 2.75rem;
  border-radius: 20px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.97) 0%, #f5f3ef 42%, #ebe8e2 100%);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
.home-featured-bar__accent {
  height: 3px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 26, 26, 0.2) 18%,
    rgba(26, 26, 26, 0.55) 50%,
    rgba(26, 26, 26, 0.2) 82%,
    transparent 100%
  );
}
.home-featured-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 1.35rem 1.35rem 1.45rem;
}
@media (min-width: 768px) {
  .home-featured-bar__inner {
    padding: 1.5rem 1.75rem 1.6rem;
  }
}
.home-featured-bar__cta {
  flex: 1 1 260px;
  min-width: 0;
}
.home-featured-bar__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.home-featured-bar__text {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--dark);
  max-width: 34rem;
}
.home-featured-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(26, 26, 26, 0.2);
  background: rgba(255, 255, 255, 0.65);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.home-featured-bar__link:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.home-featured-bar__link:hover .bi {
  transform: translateX(3px);
}
.home-featured-bar__link .bi {
  transition: transform 0.2s;
  font-size: 0.85em;
}
.home-featured-bar__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.15rem;
  flex: 0 1 auto;
  justify-content: flex-start;
}
@media (min-width: 992px) {
  .home-featured-bar__badges {
    justify-content: flex-end;
  }
}
.home-featured-bar__badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--black);
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(26, 26, 26, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.home-featured-bar__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(26, 26, 26, 0.06);
  color: var(--black);
  font-size: 0.85rem;
}

/* ── Collections row (horizontal, max 5) ─────────────── */
.coll-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.coll-row::-webkit-scrollbar { display: none; }

.coll-item {
  flex: 0 0 calc(20% - 10px);
  min-width: 160px;
  text-decoration: none;
  color: var(--black);
  display: block;
}
.coll-img {
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--light);
  margin-bottom: 10px;
  transition: box-shadow .25s;
}
.coll-item:hover .coll-img {
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.coll-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.coll-item:hover .coll-img img { transform: scale(1.05); }
.coll-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #bbb;
}
.coll-label {
  font-size: .82rem;
  font-weight: 400;
  color: var(--black);
  line-height: 1.4;
  padding: 0 2px;
}
.coll-arrow {
  display: inline-block;
  transition: transform .2s;
  color: var(--mid);
}
.coll-item:hover .coll-arrow { transform: translateX(4px); color: var(--black); }

@media (max-width: 767px) {
  .coll-item { flex: 0 0 42vw; min-width: 140px; }
}

/* ══════════════════════════════════════════════════════
   FASHION-STYLE PRODUCT CARD  (ankarafashion / ankara)
   ══════════════════════════════════════════════════════ */
.fcard {
  background: var(--white);
  position: relative;
}

/* ── Image ──────────────────────────────────────────── */
.fcard-img-link { display: block; text-decoration: none; }
.fcard-img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #ededeb;
  clip-path: inset(0);
}
.fcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.fcard:hover .fcard-img img { transform: scale(1.04); }
.fcard-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #ccc;
}

/* Sale badge — top left, minimal */
.fcard-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--sale);
  color: #fff;
  font-family: var(--font-nav);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  z-index: 2;
}

/* Quick add — slides up from bottom on hover；隐藏时多移出几像素并 opacity:0，避免 translateY(100%) 亚像素露出 1px 深色边 */
.fcard-quick {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(26,26,26,.88);
  color: #fff;
  border: 0;
  padding: 11px 0;
  font-family: var(--font-nav);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateY(calc(100% + 6px));
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, background .15s, opacity .22s ease;
  z-index: 3;
}
.fcard:hover .fcard-quick {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.fcard-quick:hover { background: rgba(26,26,26,1); }
.fcard-quick:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--black);
  outline-offset: -2px;
}

/* ── Info ──────────────────────────────────────────── */
.fcard-info { padding: 10px 0 4px; }

.fcard-name {
  display: block;
  font-family: var(--font-nav);
  font-size: .75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 5px;
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fcard-name:hover { text-decoration: underline; text-underline-offset: 2px; }

.fcard-price-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 8px;
}
.fcard-price {
  font-size: .88rem;
  font-weight: 700;
  color: var(--black);
  letter-spacing: .01em;
}
.fcard-price-sale { color: var(--sale); }
.fcard-price-orig {
  font-size: .78rem;
  color: var(--muted);
  text-decoration: line-through;
}

/* ── Product Cards ───────────────────────────────────── */
.pcard {
  background: var(--white);
  position: relative;
  transition: box-shadow .2s;
}
.pcard:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }

.pcard .pc-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--light);
}
.pcard .pc-img a { display: block; height: 100%; }
.pcard .pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.pcard:hover .pc-img img { transform: scale(1.04); }

.pc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  pointer-events: none;
  z-index: 2;
}
.pc-badge-sale { background: var(--sale); color: var(--white); }
.pc-badge-new  { background: var(--black); color: var(--white); }

.pc-qv {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26,26,26,.88);
  color: var(--white);
  text-align: center;
  padding: 12px 16px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateY(100%);
  transition: transform .22s;
  border: none;
  width: 100%;
  z-index: 3;
}
.pcard:hover .pc-qv { transform: translateY(0); }
.pc-qv:hover { background: var(--black); }

.pc-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s;
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
}
.pcard:hover .pc-wish { opacity: 1; transform: translateY(0); }
.pc-wish:hover { background: var(--white); }
.pc-wish.active { opacity: 1; transform: translateY(0); }
.pc-wish i { font-size: .8rem; color: var(--black); }
.pc-wish.active i,
.pc-wish:hover i { color: var(--sale); }

.pc-info { padding: 12px 4px 0; }
.pc-cat {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 3px;
}
.pc-name {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--black);
  line-height: 1.35;
  margin-bottom: 6px;
  text-decoration: none;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pc-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pc-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pc-price { font-size: .9rem; font-weight: 700; color: var(--black); }
.pc-old   { font-size: .8rem; color: var(--muted); text-decoration: line-through; }
.pc-sale-price { color: var(--sale) !important; }

.pc-swatches { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pc-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: .15s;
}
.pc-swatch:hover,
.pc-swatch.active {
  border-color: var(--black);
  transform: scale(1.15);
}

.pc-stock-out { font-size: .7rem; color: var(--sale); font-weight: 700; margin-top: 4px; }
.pc-stock-low { font-size: .7rem; color: #d97706;    font-weight: 700; margin-top: 4px; }

/* ── Section Headings ────────────────────────────────── */
.sec-title-af {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--black);
}
.sec-divider {
  width: 40px;
  height: 3px;
  background: var(--black);
  border-radius: 2px;
  margin: 10px 0 0;
}

/* ── Breadcrumb (global) ─────────────────────────────── */
.pg-breadcrumb {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  margin-bottom: 36px;
  background: var(--white);
}
.pg-breadcrumb nav {
  font-size: .75rem;
  color: var(--muted);
  font-family: var(--font-nav);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.pg-breadcrumb nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.pg-breadcrumb nav a:hover { color: var(--black); }
.pg-breadcrumb .bc-sep {
  margin: 0 8px;
  opacity: .4;
}
.pg-breadcrumb .bc-current { color: var(--black); }

@media (max-width: 767px) {
  .pg-breadcrumb {
    margin-bottom: 0;
    padding: 10px 0;
  }
  /* 窄屏：整行面包屑单行展示，过长时横向滑动；隐藏滚动条，仍可手指滑动 */
  .pg-breadcrumb nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
    box-sizing: border-box;
  }
  .pg-breadcrumb nav::-webkit-scrollbar {
    display: none;
  }
  .pg-breadcrumb nav > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── Keyframe Animations ─────────────────────────────── */
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes taf   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Collection Categories (High Fashion Home style) ──── */
.collection-categories {
  padding: 52px 0 60px;
  background: var(--white);
  border-top: 1px solid var(--border);
}
.collection-categories-header {
  margin-bottom: 28px;
}
.collection-categories-header__title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--black);
  margin: 0;
  text-transform: uppercase;
}
/* Swiper 容器：横向可滚 + scroll-snap 对齐 */
.cc-swiper { position: relative; }
.cc-swiper__track.collection-categories__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;                     /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;                  /* IE/Edge 老版 */
  -webkit-overflow-scrolling: touch;
}
.cc-swiper__track.collection-categories__list::-webkit-scrollbar { display: none; }
.collection-categories__item,
.cc-swiper__slide.collection-categories__item {
  flex: 0 0 calc((100% - 16px * 4) / 5);     /* 桌面一次 5 张 */
  scroll-snap-align: start;
  min-width: 0;
}

/* 左右切换按钮 */
.cc-swiper__nav { gap: 8px; }
.cc-swiper__btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border, #e5e5e5);
  background: #fff;
  color: var(--black, #111);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
  font-size: 1rem;
}
.cc-swiper__btn:hover:not(.is-disabled) {
  background: var(--black, #111);
  color: #fff;
  border-color: var(--black, #111);
}
.cc-swiper__btn.is-disabled {
  opacity: .35; cursor: not-allowed;
}

/* 移动端圆点 */
.cc-swiper__dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 14px;
}
.cc-swiper__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d0d0d0; transition: width .2s, background .2s;
}
.cc-swiper__dot.is-active { width: 18px; border-radius: 3px; background: var(--black, #111); }
.collection-categories__link {
  display: block;
  text-decoration: none;
  color: var(--black);
}
.collection-categories__image-holder {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--light);
  margin-bottom: 12px;
  border-radius: 4px;
}
.collection-categories__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.collection-categories__link:hover .collection-categories__image {
  transform: scale(1.05);
}
.collection-categories__image--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #bbb;
  background: var(--light);
}
.collection-categories__info {
  padding: 0 2px;
}
.collection-categories__title {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  color: var(--black);
  margin: 0;
  letter-spacing: .01em;
  line-height: 1.4;
  transition: opacity .15s;
}
.collection-categories__link:hover .collection-categories__title {
  opacity: .65;
}

/* 平板：一次显示 3 张 */
@media (max-width: 991px) {
  .cc-swiper__track.collection-categories__list { gap: 12px; }
  .collection-categories__item,
  .cc-swiper__slide.collection-categories__item {
    flex-basis: calc((100% - 12px * 2) / 3);
  }
}
/* 手机：一次显示 2.2 张（露半张提示还有更多） */
@media (max-width: 575px) {
  .cc-swiper__track.collection-categories__list { gap: 10px; }
  .collection-categories__item,
  .cc-swiper__slide.collection-categories__item {
    flex-basis: calc((100% - 10px) / 2.2);
  }
  .collection-categories {
    padding: 36px 0 44px;
  }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991px) {
  /* Switch to flex on mobile so ham + logo + actions line up */
  .header-row {
    display: flex;
    grid-template-columns: none;
  }
  .main-nav { display: none !important; }
  .ham { display: flex !important; }
  /* Logo moves next to hamburger on mobile */
  .site-logo-center {
    justify-self: unset;
    margin-left: 8px;
    margin-right: auto;
  }
}
@media (max-width: 575px) {
  .cart-slide { width: 100%; right: -100%; }
}