/* ══════════════════════════════════════════════════════
   shop.css  —  ankarafashion.com style
   ══════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────── */
:root {
  --black:   #1a1a1a;
  --dark:    #2d2d2d;
  --mid:     #555;
  --muted:   #888;
  --light:   #f7f7f5;
  --border:  #e8e8e8;
  --white:   #ffffff;
  --sale:    #d32f2f;
  --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-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);
}

/* ── 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);
}
/* 移动端：顶栏随页面滚动，不吸顶（避免占可视高度、与详情大图 sticky 冲突） */
@media (max-width: 991.98px) {
  .site-header {
    position: relative;
    top: auto !important;
  }
  body.has-admin-bar .site-header {
    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);
}

/* ── 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 ───────────────────────────────────────────── */
/* ── 右下角悬浮客服（系统设置）──────────────────────────── */
.shop-float-cs {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(88px, env(safe-area-inset-bottom, 0px));
  z-index: 10030;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shop-float-cs:hover {
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.shop-float-cs:focus-visible {
  outline: 2px solid var(--black, #111);
  outline-offset: 3px;
}
.shop-float-cs__tg {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}
.shop-float-cs__img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.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: mobile horizontal overflow — carousel-item transforms + img intrinsic min-width */
#heroSlider {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
#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 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-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); }

/* ── 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;
}

/* Color swatch */
.fcard-swatches { display: flex; gap: 5px; align-items: center; }
.fcard-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: transform .15s;
  border: 1.5px solid transparent;
}
.fcard-swatch:hover { transform: scale(1.15); }
.fcard-swatch-active {
  border-color: var(--black);
  box-shadow: 0 0 0 1.5px #fff inset;
}

/* ── 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(--light);
}
.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;
}
.collection-categories__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.collection-categories__item {
  display: block;
}
.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;
}

@media (max-width: 991px) {
  .collection-categories__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (max-width: 575px) {
  .collection-categories__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .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%; }
}