/* =============================================
   McDavid HK — 全站樣式（前台 + 後台共用一個檔）
   ---------------------------------------------
   唔按頁拆 CSS：冇 bundler，拆檔等於多次請求、重覆 token。
   Tailwind：src/output.css（utility）；本檔：版面／元件。
   主要段落：
     reset / title-pair     開頭
     Site Header / nav      ~128
     橫向滾動站 / 三欄      ~591
     Cart drawer            ~1791
     Mega-menu / mobile     ~1988
     Chatbox                ~2364
     product_list.html      ~3053
     product_details.html   ~3946
     登入註冊               ~4811
     checkout 問卷          ~10355
     Staff admin            ~10786
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  --en-type-scale: 1;
}
html:not(.site-lang-zh) {
  /* Barlow Condensed 同等 px 睇落細過 Noto；只放大「跟語言掣切」嘅英文。中英並排（nav / title-pair）唔用呢個倍數。 */
  --en-type-scale: 1.22;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: "Barlow Condensed", "Noto Sans HK", ui-sans-serif, system-ui, sans-serif;
}

/* ═══════════════════════════════════════
   Title pair reveal — 中英標題 + 其後細字 stagger fade-in-up
   用法：父層 data-title-pair
         中文 .title-pair__zh · 英文 .title-pair__en · 細字 .title-pair__text
   ═══════════════════════════════════════ */
[data-title-pair]:not(.is-in) .title-pair__zh,
[data-title-pair]:not(.is-in) .title-pair__en,
[data-title-pair]:not(.is-in) .title-pair__text {
  opacity: 0;
  transform: translateY(0.7rem);
}

[data-title-pair]:not(.is-in) .title-pair__en {
  transform: translateY(0.45rem);
}

[data-title-pair]:not(.is-in) .title-pair__text {
  transform: translateY(0.5rem);
}

[data-title-pair].is-in .title-pair__zh {
  animation: title-pair-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-title-pair].is-in .title-pair__en {
  /* both = delay 期間保持 from 狀態，唔會閃一下先跳 */
  animation: title-pair-up-en 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

[data-title-pair].is-in .title-pair__text {
  animation: title-pair-up-text 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes title-pair-up {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes title-pair-up-en {
  from {
    opacity: 0;
    transform: translateY(0.45rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes title-pair-up-text {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-title-pair] .title-pair__zh,
  [data-title-pair] .title-pair__en,
  [data-title-pair] .title-pair__text,
  [data-title-pair]:not(.is-in) .title-pair__zh,
  [data-title-pair]:not(.is-in) .title-pair__en,
  [data-title-pair]:not(.is-in) .title-pair__text {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ?? Body / paragraph copy ? ???? Noto Sans HK????nav?button ??????? */
.athlete-quote,
.chat-bubble,
.lp-intro,
.lp-level-desc,
.lp-level-points,
.lp-tec-modal__body,
.lp-tec-modal__body p,
.au-desc p,
.pd-bullet-list,
.pd-notes,
.pd-level-desc,
.size-guide-info p,
.store-empty p,
.store-addr,
.ac-addr,
.pl-no-results,
.ral-section-subtitle,
.ral-divider-text span,
.ral-check-label,
#cart-empty,
#cart-empty p,
#shipping-msg {
  font-family: 'Noto Sans HK', sans-serif;
}

/* =============================================
   Site Header ? fixed, gradient top ? transparent
   ============================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  background: #000;
  padding-bottom: 0;
}

/* ?? Announcement bar ??????????????????????? */
.announce-bar {
  background: #c8102e;
  text-align: center;
  padding: 0.45rem 1rem;
  font-size:  0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.announce-bar p { margin: 0; }

.announce-bar__en {
  text-transform: uppercase;
}

/* ?? Main nav wrapper ??????????????????????? */
.main-nav {
  position: relative;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 6rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ?? Logo ??????????????????????????????????? */
.nav-logo {
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-text {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ?? Desktop nav links ?????????????????????? */
.nav-links {
  display: flex;
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  align-items: stretch;
}

.nav-item {
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 0.1rem;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: #fff;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after { width: 100%; background: #c8102e; }

.nav-zh {
  font-family: "Noto Sans HK", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.18em;
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.2s;
}

.nav-en {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.2s;
}

.nav-link:hover .nav-zh,
.nav-link.active .nav-zh { color: #c8102e; }
.nav-link:hover .nav-en,
.nav-link.active .nav-en { color: rgba(200, 16, 46, 0.75); }

/* ?? Right actions ?????????????????????????? */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Search box */
.nav-search {
  display: flex;
  align-items: stretch;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;          /* sharp rectangle like screenshot */
  overflow: hidden;
  height: 2rem;
}

.nav-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.8rem;
  padding: 0 0.65rem;
  width: 148px;
  letter-spacing: 0.13em;
}

.nav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-size: 0.8rem;
}

.nav-search-btn {
  background: transparent;
  border: none;
  border-left: 1.5px solid rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  height: 100%;
  padding: 0 0.55rem;
  display: flex;
  align-items: center;
  transition: background 0.2s, color 0.2s, border-left-color 0.2s;
}

.nav-search-btn:hover {
  background: #c8102e;
  color: #fff;
  border-left-color: #c8102e;
}

.nav-icon-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.nav-icon-btn:hover {
  color: #c8102e;
  background: rgba(200, 16, 46, 0.1);
}

.nav-lang-btn {
  display: flex;
  padding: 0.5rem;
  background: none;
  border: none;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s;
}

.nav-lang-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", "Noto Sans HK", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Remove "icon container" feel; just text/icon */
.nav-lang-btn:hover {
  color: #c8102e;
}

/* 主選單五項（同手機對應項）本身已中英疊字，唔跟語言掣 */

/* Guest account icon (mask ? inherits currentColor; swap SVG file to change) */
.nav-account-icon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
}
.nav-account-icon--guest {
  -webkit-mask: url("../resources/img/nav/nav_icon_guest.svg?v=2") center / contain no-repeat;
  mask: url("../resources/img/nav/nav_icon_guest.svg?v=2") center / contain no-repeat;
}
.nav-account-icon--member {
  -webkit-mask: url("../resources/img/nav/nav_icon_member.svg") center / contain no-repeat;
  mask: url("../resources/img/nav/nav_icon_member.svg") center / contain no-repeat;
}
.nav-icon-mask {
  display: block;
  background-color: currentColor;
}
.nav-icon-mask--search {
  width: 15px;
  height: 15px;
  -webkit-mask: url("../resources/img/nav/nav_icon_search.svg?v=2") center / contain no-repeat;
  mask: url("../resources/img/nav/nav_icon_search.svg?v=2") center / contain no-repeat;
}
.nav-icon-mask--cart {
  width: 22px;
  height: 22px;
  -webkit-mask: url("../resources/img/nav/nav_icon_cart.svg?v=2") center / contain no-repeat;
  mask: url("../resources/img/nav/nav_icon_cart.svg?v=2") center / contain no-repeat;
}
.mobile-search-btn .nav-icon-mask--search {
  width: 16px;
  height: 16px;
}

/* ?? Hamburger (hidden on desktop) ????????? */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 0.25rem;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Hamburger ? X when open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ?? Nav overlay (mobile menu backdrop) ??????? */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 199; /* below site-header (200) but above everything else */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ?? Mobile drawer ?????????????????????????? */
.mobile-drawer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  background: rgba(13, 13, 13, 0.97);
  /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

.mobile-drawer.is-open {
  max-height: min(85vh, 720px);
  overflow-y: auto;
}

.mobile-links {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0;
}

.mobile-links--footer {
  padding: 0 0 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mobile search ? ???? product ?? */
.mobile-search {
  display: none;
  align-items: center;
  margin: 0.75rem 2rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.mobile-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 0.65rem 0.5rem 0.65rem 0;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-search-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  letter-spacing: 0.08em;
}

.mobile-search-input::-webkit-search-decoration,
.mobile-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.mobile-search-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0.5rem 0 0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.mobile-search-btn:hover {
  color: #fff;
}

.mobile-link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 2rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s;
}

.mobile-link:hover { background: rgba(200, 16, 46, 0.08); }
.mobile-link:hover .nav-zh { color: #c8102e; }
.mobile-link:hover .nav-en { color: rgba(200, 16, 46, 0.7); }
.mobile-link.active { background: rgba(200, 16, 46, 0.08); }
.mobile-link.active .nav-zh { color: #c8102e; }
.mobile-link.active .nav-en { color: rgba(200, 16, 46, 0.7); }

.mobile-link .nav-zh { font-size: 0.9rem; }
.mobile-link .nav-en { font-size: 0.7rem; }

.mobile-lang-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.mobile-lang-btn:hover { background: rgba(200, 16, 46, 0.08); }
.mobile-lang-btn:hover .nav-zh { color: #c8102e; }
.mobile-lang-btn:hover .nav-en { color: rgba(200, 16, 46, 0.7); }

.mobile-social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 2rem 1.25rem;
  /* ??? border-top???????? border-bottom????? */
}

.mobile-social-link {
  width: 28px;
  height: 28px;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-social .au-social-link:hover {
  transform: translateY(-2px);
}

.mobile-social .nav-en {
  margin-left: 0.35rem;
  opacity: 0.55;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

/* ?? Responsive ????????????????????????????? */
@media (max-width: 768px) {
  .nav-logo { width: 80px; }
  .nav-links  { display: none; }
  .nav-hamburger { display: flex; }
  .nav-search { display: none; }   /* desktop search ? ?? drawer ???? */
  .nav-lang-btn { display: none; }

  .nav-inner  { padding: 0 1rem; height: 4rem; }
  /* ????????100 = ???120 = ?? 20%?140 = ?? 40% */
  .announce-bar {
    --announce-scale: 120;
    font-size: calc(0.62rem * var(--announce-scale) / 100);
    padding: calc(0.38rem * var(--announce-scale) / 100) calc(0.75rem * var(--announce-scale) / 100);
  }

  .mobile-search { display: flex; }
}

/* =============================================
   Horizontal Scroll Site
   ============================================= */
.h-site {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.h-track {
  display: flex;
  width: 500vw;
  height: 100vh;
  will-change: transform;
}

.h-page {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: block;
}

/* Full-screen centred hero layout (Page 1, Page 2, ?) */
.page-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page1-content {
  text-align: center;
  color: #fff;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 2;
}

.page1-content[data-text-shadow="soft"][data-text-tone="light"] .panel-title,
.page1-content[data-text-shadow="soft"][data-text-tone="light"] .panel-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.28);
}
.page1-content[data-text-shadow="strong"][data-text-tone="light"] .panel-title,
.page1-content[data-text-shadow="strong"][data-text-tone="light"] .panel-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 28px rgba(0, 0, 0, 0.5);
}
.page1-content[data-text-shadow="soft"][data-text-tone="dark"] .panel-title,
.page1-content[data-text-shadow="soft"][data-text-tone="dark"] .panel-text {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55), 0 0 16px rgba(255, 255, 255, 0.35);
}
.page1-content[data-text-shadow="strong"][data-text-tone="dark"] .panel-title,
.page1-content[data-text-shadow="strong"][data-text-tone="dark"] .panel-text {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 24px rgba(255, 255, 255, 0.45);
}
.page1-content[data-text-shadow="off"] .panel-title,
.page1-content[data-text-shadow="off"] .panel-text {
  text-shadow: none;
}

/* =============================================
   Three-Panel layout inside each page
   ============================================= */
.panel-wrap {
  display: flex;
  width: 100%;
  height: 100%;
}

.panel {
  flex: none;
  width: 33.333%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Divider line between panels */
.panel:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: rgba(255, 255, 255, 0.12);
  z-index: 1;
}

/* ????????? ? ???????? */
.panel-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 400px;
  width: max-content;
  max-width: 90%;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ?? ??????????? hover ??? ?? */
.panel-inner img[src*="icon_"] {
  display: block;
  height: 130px;
  width: 200px;
  max-width: 200px;
  object-fit: contain;
  object-position: center top;
  margin: 0 auto;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity 0.35s ease;
}

.panel-inner img[src*="tec_"] {
  display: block;
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: center;
  margin: 1.5rem auto;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity 0.35s ease;
}

/* ????logo + ?????? */
.panel.is-active .panel-inner img[src*="icon_"],
.panel.is-active .panel-inner img[src*="tec_"] {
  opacity: 1;
}

.panel-page-no {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.3;
  margin-bottom: 1rem;
}

.panel-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
}

html.site-lang-zh .panel-text {
  font-family: 'Noto Sans HK', sans-serif;
}

html:not(.site-lang-zh) .panel-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(0.95rem * var(--en-type-scale));
  font-weight: 500;
  letter-spacing: 0.06em;
}

html:not(.site-lang-zh) .page1-content .panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-text {
  font-size: 0.95rem;
  opacity: 0.5;
  letter-spacing: 0.04em;
  margin: 0;
  transition: opacity 0.35s ease;
}

/* ???????????? */
.panel.is-active .panel-text {
  opacity: 1;
}

/* ?? Mobile?panel ????? 80%?????????? ?? */
@media (max-width: 768px) {
  .panel-inner {
    white-space: normal;
    width: 90%;
    height: 320px;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .panel-inner img[src*="icon_"] {
    height: 80px !important;
    width: 160px !important;
    max-width: 80% !important;
    transition: height 0.45s ease;
  }

  .panel-inner img[src*="tec_"] {
    height: 30px !important;
    width: auto !important;
    max-width: 80% !important;
    margin: 1rem auto;
    transition: height 0.45s ease;
  }

  .panel.is-active .panel-inner img[src*="icon_"] {
    height: 130px !important;
    width: 200px !important;
  }

  .panel.is-active .panel-inner img[src*="tec_"] {
    height: 48px !important;
  }

  .panel-text {
    font-size: 0.72rem;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  html:not(.site-lang-zh) .panel-text {
    font-size: calc(0.72rem * var(--en-type-scale));
    letter-spacing: 0.05em;
  }
}

/* ?? panel-inner ?? hex-btn??????click ?????? ?? */
.panel-inner .hex-btn {
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.panel.is-active .panel-inner .hex-btn {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease 0.38s; /* ? expand ?????? fade in */
}

/* ?? Hexagon CTA Button ??????????????????????? */
.hex-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  margin-top: 2rem;
  width: 131px;
  height: 48px;
  flex-shrink: 0;
  background: #fff;
  color: #111;
  text-decoration: none;
  border: none;
  clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
  transition: background 0.25s ease, color 0.25s ease;
  line-height: 1.25;
  cursor: pointer;
}

.hex-btn:hover {
  background: #c8102e;
  color: #fff;
}

.hex-btn__zh {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.hex-btn__en {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  opacity: 0.65;
}

.hex-btn:hover .hex-btn__en {
  opacity: 1;
}

/* ???????????????????????????????????????
   Panel background ? ? data-bg-mode ????????
   data-bg-mode="image"          ? ?? JPG
   data-bg-mode="video"          ? ?? MP4
   data-bg-mode="desktop-image"  ? Desktop JPG?Mobile MP4
   data-bg-mode="desktop-video"  ? Desktop MP4?Mobile JPG
   ??????????????????????????????????????? */
.panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #111;
}
.panel-bg--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--panel-overlay-opacity, 0.35));
}
.panel-bg__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: none; /* visibility controlled by data-bg-mode */
}
.panel-bg__media--image,
.panel-bg__media--video {
  display: none;
}

/* image only */
.panel-bg[data-bg-mode="image"] .panel-bg__media--image { display: block; }

/* video only */
.panel-bg[data-bg-mode="video"] .panel-bg__media--video { display: block; }

/* desktop image + mobile video */
.panel-bg[data-bg-mode="desktop-image"] .panel-bg__media--image { display: block; }
.panel-bg[data-bg-mode="desktop-image"] .panel-bg__media--video { display: none; }
@media (max-width: 700px) {
  .panel-bg[data-bg-mode="desktop-image"] .panel-bg__media--image { display: none; }
  .panel-bg[data-bg-mode="desktop-image"] .panel-bg__media--video { display: block; }
}

/* desktop video + mobile image */
.panel-bg[data-bg-mode="desktop-video"] .panel-bg__media--video { display: block; }
.panel-bg[data-bg-mode="desktop-video"] .panel-bg__media--image { display: none; }
@media (max-width: 700px) {
  .panel-bg[data-bg-mode="desktop-video"] .panel-bg__media--video { display: none; }
  .panel-bg[data-bg-mode="desktop-video"] .panel-bg__media--image { display: block; }
}

/* Legacy CSS-bg fallback???? img/video ???????? */
.panel-bg_s1:not(:has(.panel-bg__media)) {
  background-size: cover;
  background-position: center;
  background-image: url('../resources/img/bg/bg_1.jpg');
}
.panel-bg_s2:not(:has(.panel-bg__media)) {
  background-size: cover;
  background-position: center;
  background-image: url('../resources/img/bg/bg_2.jpg');
}
.panel-bg_s3:not(:has(.panel-bg__media)) {
  background-size: cover;
  background-position: center;
  background-image: url('../resources/img/bg/bg_3.jpg');
}
.panel-bg_s4:not(:has(.panel-bg__media)) {
  background-size: cover;
  background-position: center;
  background-image: url('../resources/img/bg/bg_4.jpg');
}


/* =============================================
   Vertical sub-scroll inside a horizontal page
   ============================================= */
.page-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.page-section {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.athlete-content {
  text-align: center;
  color: #fff;
  padding: 0 2rem;
  max-width: 42rem;
  position: relative;
  z-index: 1;
}

.athlete-quote {
  margin: 1.75rem 0 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  opacity: 0.72;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Athlete sections????? .panel-bg + data-bg-mode????????? */
.athlete-section {
  background: #111;
  overflow: hidden;
}
.athlete-section > .panel-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(8, 8, 12, 0.62), rgba(8, 8, 12, 0.72));
}

.page-scroll-hint {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: difference;
  transition: opacity 0.35s ease;
}

.page-scroll-hint.is-hidden {
  opacity: 0;
}

.page-scroll-hint__label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.page-scroll-hint__arrow {
  font-size: 0.85rem;
  animation: scroll-hint-bob 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

.page-scroll-progress {
  position: absolute;
  bottom: 1.75rem;
  left: 12rem;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  mix-blend-mode: difference;
  pointer-events: none;
}

@media (max-width: 768px) {
  .page-scroll-progress {
    left: 2rem;
  }

  /* Mobile??? snap?????? momentum ?????? */
  .page-scroll {
    scroll-snap-type: y proximity;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .page-section {
    scroll-snap-stop: normal;
  }

  .lp-scroll {
    overscroll-behavior-y: contain;
  }
}

.copyright-text {
  font-size: 0.7rem;
  opacity: 0.3;
  letter-spacing: 0.08em;
  margin-top: 1.5rem;
  text-transform: uppercase;
}

/* =============================================
   Panel colour palette
   Page 1 ? Dark navy
   Page 2 ? Ocean blue
   Page 3 ? Deep purple
   ============================================= */
.pc-1a { background: #0d0d0d; }
.pc-1b { background: #1a1a2e; }
.pc-1c { background: #16213e; }

/* 預設背景；CMS 有圖時由 homepage.js 直接設 inline background-image（唔用 CSS var 裝 url，避免相對 style.css 斷 path） */
.pc-2a {
  background-color: #0d2137;
  background-image: url('../resources/img/bg/bg_3.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.pc-2b {
  background-color: #0d2137;
  background-image: url('../resources/img/bg/bg_hdc.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.pc-2c {
  background-color: #0d2137;
  background-image: url('../resources/img/bg/bg_levels.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.pc-2a::before,
.pc-2b::before,
.pc-2c::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--panel-overlay-opacity, 0.35));
}
.page-3 .panel-inner {
  z-index: 1;
}

.pc-3a { background: #1a0a2e; }
.pc-3b { background: #2d1060; }
.pc-3c { background: #4a1a8c; }

/* =============================================
   Navigation dots (bottom-centre)
   mix-blend-mode: difference ? auto-contrast
   against any background colour
   ============================================= */
.h-nav {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 100;
  mix-blend-mode: difference;
  transition: opacity 0.3s, visibility 0.3s;
}
.h-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dot {
  width: 0.6rem; height: 0.6rem;
  border-radius: 0;
  border: none;
  background: rgba(255,255,255,0.35);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}

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

.dot:hover:not(.dot--active) { background: rgba(255,255,255,0.6); }

/* =============================================
   Page counter (bottom-right)
   ============================================= */
.page-counter {
  position: fixed;
  bottom: 1.75rem; right: 2rem;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  z-index: 100;
  font-variant-numeric: tabular-nums;
  mix-blend-mode: difference;
}

/* =============================================
   Terms link (bottom-left)
   ============================================= */
.corner-terms {
  position: fixed;
  bottom: 1.75rem;
  left: 2rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  line-height: 1.35;
  mix-blend-mode: difference;
  transition: opacity 0.2s;
  text-transform: uppercase;
}

.corner-terms:hover { opacity: 0.7; }

.corner-terms__zh,
.corner-terms__en {
  display: block;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .corner-terms { display: none; }
}

/* =============================================
   Edge arrows ? ???????????
   ============================================= */
.h-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background: transparent;
  border: none;
  color: #fff;
  width: 2rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  opacity: 0.7;
  transition: opacity 0.35s ease, transform 0.35s ease;
  mix-blend-mode: difference;
}

.h-arrow::before {
  content: '';
  display: block;
  width: 0.7rem;
  height: 1.05rem;
  background: currentColor;
}

.h-arrow--prev::before {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.h-arrow--next::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.h-arrow:hover {
  opacity: 1;
  color: #cc132c;
  transform: translateY(-50%) scale(1.12);
  mix-blend-mode: normal;
}
.h-arrow--prev { left: 1.1rem; }
.h-arrow--next { right: 1.1rem; }
.h-arrow.hidden { opacity: 0; pointer-events: none; }

/* =============================================
   Page 5 ? About Us
   ============================================= */
.au-page {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #0a0a0a;
}

.au-bg {
  position: absolute;
  inset: 0;
  background: url('../resources/img/bg/aboutus.jpg') center / cover no-repeat;
  z-index: 0;
  transform: translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0) scale(1.12);
  will-change: transform;
  pointer-events: none;
}

.au-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 0;
}

.au-content {
  position: relative;
  z-index: 1;
  padding: 0 8vw;
  max-width: 600px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.au-title-zh {
  font-family: "Noto Sans HK", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.1em;
  line-height: 1.1;
  color: #fff;
}

.au-title-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: 0.20em;
  padding-left: 2px;
  margin: 0 0 1.5rem;
  line-height: 1;
  color: #c8102e;
  text-transform: uppercase;
}

.au-desc {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 440px;
}

.au-desc p {
  font-family: "Noto Sans HK", sans-serif;
  font-size: calc(1rem * var(--en-type-scale));
  font-weight: 400;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  letter-spacing: 0.02em;
}

.au-social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.au-social-link {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.au-social-link svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.au-social-link .au-social-shape,
.au-social-link .au-social-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linejoin: miter;
  stroke-linecap: square;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.au-social-link .au-social-mark {
  fill: #fff !important;
  stroke: none !important;
}

.au-social-link .au-social-dot {
  fill: currentColor;
  stroke: none;
  transition: fill 0.2s ease;
}

.au-social-link:hover {
  color: #cc132c;
  transform: translateY(-1px);
}

.au-social-link:hover .au-social-shape {
  fill: currentColor;
  stroke: currentColor;
}

.au-social-link:hover .au-social-mark,
.au-social-link:hover .au-social-dot {
  fill: #fff;
}

.au-social-link:hover .au-social-ring {
  fill: none;
  stroke: #fff;
}

/* ?? About / Enquiry stage ?? */
.au-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* About????????? */
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}

.au-stage .au-content {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.au-content.is-exiting {
  position: absolute;
  opacity: 0;
  transform: translateX(-28px);
  pointer-events: none;
  visibility: hidden;
}

.au-content.is-entering {
  animation: auAboutIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes auAboutIn {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.au-enquiry {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start; /* Enquiry?? Figma??? navbar */
  padding: 9.75rem 8vw 2rem; /* ~nav 150px + ????Figma title ?253px? */
  max-width: 560px;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  color: #fff;
  opacity: 0;
  transform: translateX(-48px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.au-enquiry.is-visible {
  display: flex;
}

.au-enquiry.is-animating {
  animation: auEnquiryIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.au-enquiry.is-settled {
  opacity: 1;
  transform: translateX(0);
}

@keyframes auEnquiryIn {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.au-enquiry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 456px;
  margin-bottom: 1.35rem;
}

.au-enquiry-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  flex: 1;
  min-width: 0;
}

.au-enquiry-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.au-enquiry-close:hover {
  background: rgba(204, 19, 44, 0.9);
  border-color: #cc132c;
  color: #fff;
}

.au-enquiry-form {
  width: 100%;
  max-width: 456px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.au-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.au-field-label {
  font-family: "Noto Sans HK", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  padding-left: 0.25rem;
}

.au-req {
  color: #cc132c;
  margin-right: 0.15em;
}

.au-field-input {
  width: 100%;
  height: 45px;
  padding: 0 1.1rem;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  color: #fff;
  font-family: "Noto Sans HK", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.au-field-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.au-field-input:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.28);
}

.au-field-textarea {
  height: 135px;
  padding: 0.85rem 1.1rem;
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.au-captcha {
  width: 100%;
  max-width: 279px;
  background: #fff;
  color: #111;
  padding: 0.85rem 1rem 0.75rem;
  border-radius: 2px;
  margin-top: 0.25rem;
}

.au-captcha-label {
  margin: 0 0 0.55rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cc132c;
}

.au-captcha-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.au-captcha-canvas {
  display: block;
  width: 140px;
  height: 44px;
  background: #f2f2f2;
  border: 1px solid #ddd;
  flex-shrink: 0;
}

.au-captcha-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 0.55rem;
  border: 1px solid #bbb;
  border-radius: 2px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  outline: none;
}

.au-captcha-input:focus {
  border-color: #cc132c;
}

.au-captcha-hint {
  margin: 0.55rem 0 0;
  font-family: "Noto Sans HK", sans-serif;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #333;
}

.au-captcha-refresh {
  background: none;
  border: none;
  padding: 0;
  color: #0066cc;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.au-captcha-refresh:hover {
  color: #cc132c;
}

.au-enquiry-submit {
  width: 100%;
  max-width: 456px;
  height: 52px;
  margin-top: 0.35rem;
  background: #cc132c;
  border: none;
  border-radius: 2px;
  color: #fff;
  font-family: "Noto Sans HK", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.au-enquiry-submit:hover {
  background: #a80f24;
}

.au-enquiry-submit:active {
  transform: scale(0.99);
}

/* ?? About Us Responsive ?? */
@media (max-width: 768px) {
  .au-content {
    padding: 0 1.75rem;
    max-width: 100%;
  }

  .au-title-zh { font-size: 1.9rem; }
  .au-title-en { font-size: 2.1rem; margin-bottom: 1rem; }

  .au-desc { max-width: 100%; gap: 0.6rem; }
  .au-desc p { font-size: calc(0.78rem * var(--en-type-scale)); }

  .au-enquiry {
    /* ?????? page dots?counter + Safari ????home indicator */
    padding: 7rem 1.75rem calc(100px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
  }

  .au-enquiry-head {
    max-width: 100%;
    margin-bottom: 1.15rem;
  }

  .au-enquiry-title {
    font-size: 1.85rem;
    letter-spacing: 0.1em;
  }

  .au-enquiry-close {
    width: 32px;
    height: 32px;
  }

  .au-enquiry-form {
    max-width: 100%;
    gap: 0.95rem;
  }

  .au-captcha {
    max-width: 100%;
  }

  .au-captcha-row {
    flex-wrap: wrap;
  }

  .au-captcha-input {
    flex: 1 1 100px;
  }
}

/* =============================================
   Cart Drawer helpers
   ============================================= */
#cart-items { scrollbar-width: none; -ms-overflow-style: none; }
#cart-items::-webkit-scrollbar { display: none; }
.w-18 { width: 4.5rem; }
.h-18 { height: 4.5rem; }

/* brand name, size/variant, price, shipping threshold */
.cart-item .flex-1 > p:first-of-type,
.cart-item .flex-1 > p:nth-of-type(2),
.cart-item .item-price,
#cart-footer .flex.justify-between {
  font-size: 1rem;
}

#cart-header-count {
  font-size: 0.875rem;
}

/* ?? Cart promo code ?? */
.cart-promo-label {
  display: block;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.cart-promo-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  color: #fff;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.cart-promo-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}
.cart-promo-input:focus {
  border-color: rgba(255, 255, 255, 0.45);
}
.cart-promo-input.is-error {
  border-color: #c8102e;
  background: rgba(200, 16, 46, 0.12);
  box-shadow: 0 0 0 1px #c8102e;
  animation: cart-promo-shake 0.4s ease;
}
.cart-promo-input.is-success {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5);
}
.cart-promo-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: #c8102e;
  border-radius: 2px;
}
.cart-promo-error[hidden] {
  display: none;
}
.cart-promo-error-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.cart-promo-success {
  margin: 10px 0 0;
  padding: 10px 12px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 2px;
}
.cart-promo-success[hidden] {
  display: none;
}

.cart-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(200, 16, 46, 0.14);
  border: 1px solid rgba(200, 16, 46, 0.45);
  border-radius: 2px;
}
.cart-discount-row[hidden] {
  display: none;
}
.cart-discount-label {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}
.cart-discount-label #cart-discount-code {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin-left: 4px;
}
.cart-discount-amount {
  font-family: 'Barlow Condensed', 'Noto Sans HK', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ff4d6a;
  line-height: 1;
}
html:not(.site-lang-zh) #cart-drawer h2,
html:not(.site-lang-zh) #cart-header-count,
html:not(.site-lang-zh) #cart-empty p,
html:not(.site-lang-zh) #shipping-msg,
html:not(.site-lang-zh) .cart-promo-label,
html:not(.site-lang-zh) .cart-promo-error,
html:not(.site-lang-zh) .cart-promo-success,
html:not(.site-lang-zh) .cart-discount-label,
html:not(.site-lang-zh) .cart-subtotal-label,
html:not(.site-lang-zh) #cart-checkout-btn,
html:not(.site-lang-zh) #cart-continue,
html:not(.site-lang-zh) .cart-item-meta,
html:not(.site-lang-zh) .cart-item-name {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
html:not(.site-lang-zh) #cart-drawer h2 {
  font-size: calc(0.875rem * var(--en-type-scale));
}
html:not(.site-lang-zh) #cart-header-count,
html:not(.site-lang-zh) .cart-promo-label,
html:not(.site-lang-zh) #cart-continue {
  font-size: calc(0.75rem * var(--en-type-scale));
  letter-spacing: 0.14em;
}
html:not(.site-lang-zh) #cart-empty p,
html:not(.site-lang-zh) #shipping-msg,
html:not(.site-lang-zh) .cart-promo-error,
html:not(.site-lang-zh) .cart-promo-success,
html:not(.site-lang-zh) .cart-item-meta {
  font-size: calc(0.875rem * var(--en-type-scale));
  letter-spacing: 0.06em;
}
html:not(.site-lang-zh) .cart-item-name,
html:not(.site-lang-zh) .cart-discount-label,
html:not(.site-lang-zh) .cart-subtotal-label,
html:not(.site-lang-zh) #cart-checkout-btn {
  font-size: calc(1rem * var(--en-type-scale));
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .cart-promo-input,
html:not(.site-lang-zh) .cart-promo-input::placeholder {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(13px * var(--en-type-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@keyframes cart-promo-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* =============================================
   Product Mega-Menu (Desktop hover)
   ============================================= */

/* li 撐滿 navbar 高度，hover 熱區跟 li；底線留喺文字下面 */
.has-submenu {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  margin: 0 -0.75rem;
}

.has-submenu:hover > .nav-link::after {
  width: 100%;
  background: #c8102e;
}

.has-submenu:hover > .nav-link .nav-zh { color: #c8102e; }
.has-submenu:hover > .nav-link .nav-en { color: rgba(200, 16, 46, 0.75); }

/* Dropdown panel */
.product-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #0d0d0d;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.28s;
}

/* Invisible bridge: 補 navbar 同 panel 之間嘅空隙 */
.product-submenu::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: 0;
  right: 0;
  height: 2rem;
}

.has-submenu:hover .product-submenu,
.has-submenu:focus-within .product-submenu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}

/* Inner content (max-width + padding) */
.submenu-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 2.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.submenu-section + .submenu-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
}

/* Section header: ???? ??????? SUPPORTER */
.submenu-row-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.submenu-heading-zh {
  font-family: "Noto Sans HK", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.submenu-divider-line {
  flex: 1;
  height: 1px;
  background: #cc132c;
}

.submenu-heading-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Button grid rows */
.submenu-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.4rem;
}

.submenu-row--form {
  grid-template-columns: repeat(var(--form-n, 8), minmax(0, 1fr));
}

/* ?? Individual category button ?? */
.smenu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.4rem;
  background: #d9d9d9;
  text-decoration: none;
  gap: 0.1rem;
  min-height: 56px;
  transition: background 0.18s ease;
}

/* Icon buttons (form section) */
.submenu-row--form .smenu-btn--icon {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.5rem 0.45rem;
}

.submenu-row--form .smenu-icon-box {
  width: 38px;
  height: 38px;
}

.submenu-row--form .smenu-icon {
  width: 24px;
  height: 24px;
}

.submenu-row--form .smenu-zh {
  font-size: 0.72rem;
}

.submenu-row--form .smenu-en {
  font-size: 0.68rem;
}

/* White square box with grey border (Figma MenuBg) */
.smenu-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #6d6d6d;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.smenu-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: filter 0.18s ease;
}

.smenu-texts {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.smenu-zh {
  font-family: "Noto Sans HK", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #232020;
  letter-spacing: 0.04em;
  line-height: 1.3;
  transition: color 0.18s ease;
}

.smenu-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 600;
  color: #cc132c;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 0.18s ease;
}

/* Hover: red bg + white text */
.smenu-btn:hover { background: #c8102e; }

.smenu-btn:hover .smenu-zh,
.smenu-btn:hover .smenu-en { color: #fff; }

.smenu-btn:hover .smenu-icon { filter: brightness(0) invert(1); }
.smenu-btn:hover .smenu-icon-box {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Hyrox — gray btn trial: black SVG like other sport icons */
.smenu-btn--hyrox {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;
  padding: 0.5rem 0.35rem;
}

.smenu-hyrox-logo {
  width: auto;
  height: 20px;
  max-width: 92%;
  object-fit: contain;
  filter: brightness(0);
  transition: filter 0.18s ease;
}

.smenu-btn--hyrox:hover {
  background: #c8102e;
}

.smenu-btn--hyrox:hover .smenu-hyrox-logo {
  filter: brightness(0) invert(1);
}

.mobile-sub-btn--hyrox {
  background: rgba(217, 217, 217, 0.1);
  color: rgba(255, 255, 255, 0.7);
  text-shadow: none;
  box-shadow: none;
}

.mobile-sub-btn--hyrox:hover,
.mobile-sub-btn--hyrox:active {
  background: #c8102e;
  color: #fff;
  box-shadow: none;
}

/* ?? Responsive ?? */

/* Tablet: 4 columns each */
@media (max-width: 1200px) {
  .submenu-row,
  .submenu-row--form {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile: hide desktop submenu (use mobile drawer instead) */
@media (max-width: 768px) {
  .product-submenu { display: none; }
}

/* =============================================
   Mobile Drawer ? Product Subcategory Toggle
   ============================================= */

.mobile-product-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-product-header {
  display: flex;
  align-items: stretch;
}

.mobile-link--product {
  flex: 1;
  border-bottom: none !important;
}

.mobile-submenu-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.mobile-submenu-toggle.is-open { color: #c8102e; }
.mobile-submenu-toggle.is-open svg { transform: rotate(180deg); }

/* Collapsible submenu ? smooth height expand */
.mobile-product-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(255, 255, 255, 0.025);
}
.mobile-product-submenu.is-open {
  grid-template-rows: 1fr;
}
.mobile-product-submenu-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-product-submenu.is-open .mobile-product-submenu-inner {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}
.mobile-submenu-toggle svg {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-product-submenu,
  .mobile-product-submenu-inner,
  .mobile-submenu-toggle svg { transition: none !important; }
}

.mobile-sub-section {
  padding: 0.75rem 2rem 0.85rem;
}

.mobile-sub-section + .mobile-sub-section {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-sub-heading {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 0.55rem;
}

.mobile-sub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

.mobile-sub-btn {
  display: block;
  padding: 0.42rem 0.2rem;
  background: rgba(217, 217, 217, 0.1);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  text-align: center;
  font-size: 0.75rem;
  font-family: "Noto Sans HK", sans-serif;
  letter-spacing: 0.04em;
  transition: background 0.18s, color 0.18s;
}

.mobile-sub-btn:hover,
.mobile-sub-btn:active {
  background: #c8102e;
  color: #fff;
}

/* =============================================
   Shared FAB + Chatbox
   (used on index, product_list, product_details)
   ============================================= */

/* ?? Shared FAB base ?? */
#btn-top,
#chatbox-fab {
  display: none;
  position: fixed;
  right: 24px;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: #cc132c;
  color: #fff;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  transition: background .2s, transform .18s, bottom .32s cubic-bezier(0.22, 1, 0.36, 1);
  align-items: center;
  justify-content: center;
  padding: 0;
}
#btn-top:hover { background: #a50d25; transform: scale(1.06); }
#chatbox-fab:hover { transform: scale(1.06); }

#btn-top { bottom: 24px; font-size: 28px; line-height: 1; }

#chatbox-fab {
  bottom: 64px;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
body.has-scroll-top #chatbox-fab { bottom: 110px; }
#chatbox-fab img {
  width: 64px; height: 64px;
  object-fit: cover; display: block; border-radius: 50%;
}
#chatbox-fab:hover { background: transparent; filter: brightness(0.88); }
@media (max-width: 768px) {
  body.has-scroll-top #chatbox-fab { bottom: 110px; }
}

/* ?? Chatbox popup panel ?? */
#chatbox-popup {
  position: fixed;
  bottom: 160px;
  right: 16px;
  width: 340px;
  max-height: min(540px, calc(100dvh - 160px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.97);
  transition: opacity .22s ease, transform .22s ease, width .28s ease;
}
#chatbox-popup.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

/* Main row: chat + body diagram */
#chatbox-content {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* When any drawer/modal/overlay is open, push chatbox behind it */
body.has-overlay #chatbox-fab,
body.has-overlay #chatbox-popup {
  z-index: 150 !important; /* below nav overlay (199) & cart overlay (300) */
  pointer-events: none !important;
}

/* Enquiry form?Find Your Fit ? ??????????? */
@keyframes chatbox-fab-exit-right {
  from {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: translateX(36px);
  }
}

@keyframes chatbox-fab-enter-left {
  from {
    opacity: 0;
    visibility: visible;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

#chatbox-fab.chatbox-fab--exit-right {
  animation: chatbox-fab-exit-right 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

#chatbox-fab.chatbox-fab--enter-left {
  animation: chatbox-fab-enter-left 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}

body.enquiry-open #chatbox-fab {
  pointer-events: none;
}

body.enquiry-open #chatbox-popup {
  display: none !important;
}
@media (max-width: 400px) {
  #chatbox-popup { right: 8px; left: 8px; width: auto; }
}

/* Mobile: allow more height (avoid clipping bottom actions) */
@media (max-width: 699px) {
  #chatbox-popup {
    bottom: 92px;
    max-height: calc(100dvh - 84px);
  }
}

/* Header */
#chatbox-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #cc132c;
  color: #fff;
  flex-shrink: 0;
}
#chatbox-header .ch-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
}
#chatbox-header .ch-logo img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
#chatbox-header .ch-info { flex: 1; min-width: 0; }
#chatbox-header .ch-info strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
}
#chatbox-header .ch-info span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  opacity: .85;
  margin-top: 2px;
}
#chatbox-close-btn,
#cb-body-toggle {
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 4px; display: flex; align-items: center; justify-content: center;
  opacity: .85; flex-shrink: 0; border-radius: 4px; transition: opacity .15s, background .15s;
}
#chatbox-close-btn:hover,
#cb-body-toggle:hover { opacity: 1; background: rgba(255,255,255,.12); }
#cb-body-toggle[aria-expanded="true"] { background: rgba(255,255,255,.2); opacity: 1; }
#cb-body-toggle.cb-hidden-toggle { display: none !important; }

#cb-body-toggle img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Body scroll area */
#chatbox-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
#chatbox-body::-webkit-scrollbar { width: 4px; }
#chatbox-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

/* ── Chat composer (typed input + send + mic) ── */
.cb-composer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto; /* keep to bottom of #chatbox-body */
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(204, 19, 44, 0.12);
  z-index: 20;
}

.cb-composer-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #333;
  outline: none;
  background: #fff;
}
.cb-composer-input::placeholder { color: #aaa; }
.cb-composer-input:focus {
  border-color: #cc132c;
  box-shadow: 0 0 0 4px rgba(204, 19, 44, 0.08);
}

.cb-mic-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1.5px solid #e0e0e0;
  background: #f7f7f8;
  color: #cc132c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, opacity .15s;
}
.cb-mic-btn:hover {
  background: #fdf0f2;
  border-color: #cc132c;
}
.cb-mic-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cb-mic-btn.is-listening {
  background: rgba(204, 19, 44, 0.08);
  border-color: rgba(204, 19, 44, 0.6);
  box-shadow: 0 0 0 4px rgba(204, 19, 44, 0.12);
}

.cb-send-btn {
  flex-shrink: 0;
  border: none;
  background: #cc132c;
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, filter .15s;
}
.cb-send-btn:hover { filter: brightness(0.95); background: #a50d25; }

/* ── Body diagram panel ── */
#cb-body-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f7f8;
  z-index: 6;
}
.cb-diagram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px 4px;
  flex-shrink: 0;
}
.cb-diagram-head span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #999;
}
#cb-diagram-close {
  background: none; border: none; color: #888; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
#cb-diagram-close:hover { color: #cc132c; background: rgba(204,19,44,.08); }

#cb-diagram-view-toggle {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
#cb-diagram-view-toggle:hover { color: #cc132c; background: rgba(204,19,44,.08); }
#cb-diagram-figure {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 4px 8px;
}
.cb-figure-svg {
  width: 100%;
  max-width: 168px;
  height: auto;
  max-height: 100%;
  display: block;
}

/* Use external human-body svg as image base, with hotspot overlay */
.cb-figure-wrap {
  width: 100%;
  max-width: 190px;
  max-height: 100%;
  aspect-ratio: 3843 / 6258;
  position: relative;
}
.cb-figure-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cb-figure-hotspots-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cb-hotspot {
  /* Warm contrast for red body illustration */
  fill: rgba(255, 234, 90, 0.45);
  stroke: #ffea5a;
  stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(255, 234, 90, 0.55));
  cursor: pointer;
  transition: fill .18s, stroke-width .18s, opacity .18s;
  outline: none;
  animation: cb-hotspot-pulse 2.6s ease-in-out infinite;
}
@keyframes cb-hotspot-pulse {
  0%, 100% { fill: rgba(255, 234, 90, 0.34); }
  50% { fill: rgba(255, 234, 90, 0.62); }
}
.cb-hotspot:hover,
.cb-hotspot:focus-visible {
  fill: rgba(255, 234, 90, 0.70);
  stroke-width: 3.6;
  filter: drop-shadow(0 0 10px rgba(255, 234, 90, 0.75));
  animation: none;
}
.cb-hotspot.is-active {
  fill: rgba(255, 234, 90, 0.88);
  stroke-width: 4.2;
  filter: drop-shadow(0 0 12px rgba(255, 234, 90, 0.85));
  animation: none;
}
.cb-diagram-hint {
  margin: 0;
  padding: 6px 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #cc132c;
  text-align: center;
  letter-spacing: .02em;
  min-height: 1.4em;
  flex-shrink: 0;
}

/* Tip visibility by viewport */
.cb-tip--desktop { display: none; }
.cb-tip--mobile { display: block; }

/* Mobile: diagram slides in from right */
@media (max-width: 699px) {
  #cb-body-diagram {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(210px, 72%);
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -6px 0 24px rgba(0,0,0,.14);
    pointer-events: none;
  }
  #cb-diagram-figure {
    align-items: flex-start;
    padding: 0 8px 20px;
  }
  .cb-figure-wrap {
    max-width: 174px;
  }
  #cb-body-diagram.is-open {
    transform: translateX(0);
    pointer-events: all;
  }
  #cb-body-toggle { display: flex; }
}

/* Desktop: widen + always-visible right figure */
@media (min-width: 700px) {
  #chatbox-popup {
    width: 620px;
    max-height: min(560px, calc(100dvh - 140px));
  }
  #cb-body-toggle,
  #cb-diagram-close { display: none !important; }
  #cb-body-diagram {
    position: relative;
    width: 200px;
    flex-shrink: 0;
    transform: none;
    border-left: 1px solid #ececec;
    pointer-events: all;
  }
  .body-parts-grid { display: none; }
  #cb-step-1 .cb-label { display: none; }
  .cb-tip--desktop { display: block; }
  .cb-tip--mobile { display: none; }
}

/* Chat bubbles */
.chat-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.chat-bubble.assistant {
  background: #f4f4f5;
  color: #222;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-bubble.user {
  background: #cc132c;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  max-width: 75%;
}
.chat-bubble p { margin: 0 0 4px; }
.chat-bubble p:last-child { margin: 0; }

/* Section label */
.cb-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #999;
  text-align: center;
  margin: 2px 0;
}

/* Body-part grid */
.body-parts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.body-part-btn {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s;
  color: #333;
  letter-spacing: .03em;
}
.body-part-btn:hover,
.body-part-btn.selected {
  border-color: #cc132c;
  background: #cc132c;
  color: #fff;
}

/* Option list */
.option-list { display: flex; flex-direction: column; gap: 6px; }
.option-btn {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s;
  color: #333;
}
.option-btn:hover,
.option-btn.selected {
  border-color: #cc132c;
  background: #fdf0f2;
  color: #cc132c;
  font-weight: 700;
}

/* Back + CTA buttons */
.cb-back-btn { background: none; border: none; color: #999; font-size: 11px; cursor: pointer; align-self: flex-start; padding: 2px 0; }
.cb-back-btn:hover { color: #555; }

/* Sport confirm/cancel actions */
.cb-sport-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.cb-sport-confirm {
  flex: 1;
  background: #cc132c;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.cb-sport-confirm:hover { background: #a50d25; }
.cb-sport-cancel {
  flex: 1;
  background: #fff;
  border: 1.5px solid #ddd;
  color: #888;
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.cb-sport-cancel:hover { border-color: #cc132c; color: #cc132c; background: #fdf0f2; }

.cb-cta-link {
  display: block;
  background: #cc132c;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background .2s;
  margin-top: 4px;
}
.cb-cta-link:hover { background: #a50d25; }

.cb-demo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-demo-card {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.cb-demo-card:hover {
  border-color: rgba(204, 19, 44, 0.28);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.cb-demo-card__img-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #f7f7f8;
  overflow: hidden;
}

.cb-demo-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
}

.cb-demo-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cb-demo-card__code {
  font-size: 12px;
  font-weight: 800;
  color: #cc132c;
  letter-spacing: .04em;
}

.cb-demo-card__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
}

.cb-demo-card__price {
  font-size: 12px;
  font-weight: 700;
  color: #222;
}

.cb-demo-card__reason {
  font-size: 11px;
  line-height: 1.45;
  color: #666;
}

.cb-restart-btn {
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  color: #888;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s;
}
.cb-restart-btn:hover { border-color: #cc132c; color: #cc132c; }

/* Step visibility */
.cb-step { display: flex; flex-direction: column; gap: 8px; }
.cb-step.cb-hidden { display: none; }

/* Step enter animation (slide in) */
.cb-step.cb-step-anim {
  transition: transform .28s ease, opacity .22s ease;
}
.cb-step.cb-step-enter-from {
  opacity: 0;
  transform: translateX(22px);
}
.cb-step.cb-step-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/* =============================================
   Product List Page  (product_list.html)
   ============================================= */

html.page-list,
html.page-list body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}
html.page-list body { background: #fff; }

.pl-page { padding-top: var(--site-header-h, 120px); }

.pl-header {
  text-align: center;
  /* Match levels title→EN spacing (~36px above title, tight below EN) */
  padding: 36px 0 20px;
}

.pl-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 42px;
  font-weight: 900;
  color: #1e1e1e;
  text-align: center;
  letter-spacing: 0.15em;
  margin: 0 0 4px;
  padding: 0;
}

.pl-title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #6d6d6d;
  margin: 0;
  text-transform: uppercase;
}

/* ?? Main 2-col layout ?? */
.pl-body {
  display: flex;
  align-items: flex-start;
  padding: 0 60px;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ?? Filter sidebar ?? */
.pl-filter-col {
  width: 260px;
  flex-shrink: 0;
  padding-top: 32px;
  padding-bottom: 60px;
}

.pl-filter-header { margin-bottom: 12px; }
.pl-filter-zh {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 18px; font-weight: 700; color: #cc132c;
  letter-spacing: 0.08em; line-height: 1.2;
}
.pl-filter-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 700; color: #cc132c;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
}
html:not(.site-lang-zh) .pl-filter-header .pl-filter-zh { display: none; }
html.site-lang-zh .pl-filter-header .pl-filter-en { display: none; }

html:not(.site-lang-zh) .pl-filter-toggle-label,
html:not(.site-lang-zh) .pl-filter-option,
html:not(.site-lang-zh) .pl-tag,
html:not(.site-lang-zh) .pl-clear-all,
html:not(.site-lang-zh) .pl-price-range-values,
html:not(.site-lang-zh) .pl-mobile-filter-btn,
html:not(.site-lang-zh) .pl-breadcrumb,
html:not(.site-lang-zh) .pl-result-count,
html:not(.site-lang-zh) .pl-no-results {
  font-family: 'Barlow Condensed', sans-serif;
}
html:not(.site-lang-zh) .pl-filter-toggle-label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html:not(.site-lang-zh) .pl-filter-option {
  letter-spacing: 0.04em;
}
html:not(.site-lang-zh) .pl-tag,
html:not(.site-lang-zh) .pl-clear-all {
  letter-spacing: 0.04em;
}

.pl-active-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 0; }

.pl-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f2f2f2; border: 1px solid #ccc; border-radius: 2px;
  padding: 3px 8px;
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(12px * var(--en-type-scale)); font-weight: 500;
  color: #1e1e1e; cursor: pointer; transition: background 0.15s;
}
.pl-tag:hover { background: #e8e8e8; }
.pl-tag-x { font-size: 14px; font-weight: 700; line-height: 1; color: #666; }

.pl-clear-all {
  display: none;
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(12px * var(--en-type-scale)); font-weight: 400;
  color: #666; text-decoration: underline; cursor: pointer;
  margin-bottom: 16px; background: none; border: none; padding: 0;
}
.pl-clear-all.visible { display: block; }
.pl-clear-all:hover { color: #cc132c; }

.pl-filter-group { border-top: 1px solid #e0e0e0; }
.pl-filter-group:last-child { border-bottom: 1px solid #e0e0e0; }

.pl-filter-toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 14px 6px;
  margin: 0 -6px; width: calc(100% + 12px);
  background: none; border: none; cursor: pointer; text-align: left;
  border-radius: 4px; transition: background 0.15s;
}
.pl-filter-toggle:hover { background: #f5f5f5; }

.pl-filter-toggle-label {
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); font-weight: 700;
  color: #1e1e1e; letter-spacing: 0.06em; transition: color 0.2s;
}
.pl-filter-toggle-label.active { color: #cc132c; }

.pl-filter-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-filter-toggle.open .pl-filter-chevron { transform: rotate(180deg); }

.pl-filter-options {
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    padding-bottom 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-filter-options.open {
  grid-template-rows: 1fr;
  padding-bottom: 12px;
}
.pl-filter-options-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.pl-filter-options.open .pl-filter-options-inner {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}
@media (prefers-reduced-motion: reduce) {
  .pl-filter-options,
  .pl-filter-options-inner,
  .pl-filter-chevron { transition: none !important; }
}

.pl-filter-option {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  margin: 0 -6px;
  cursor: pointer;
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(13px * var(--en-type-scale)); font-weight: 400;
  color: #333; border-radius: 4px; transition: color 0.15s, background 0.15s; user-select: none;
}
.pl-filter-option:hover { color: #cc132c; background: #f5f5f5; }
.pl-filter-option.selected { color: #cc132c; font-weight: 700; }
.pl-filter-option-label { line-height: 1.3; }

.pl-filter-checkbox {
  width: 14px; height: 14px; border: 1.5px solid #aaa; border-radius: 2px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.pl-filter-option.selected .pl-filter-checkbox { background: #cc132c; border-color: #cc132c; }
.pl-filter-checkbox-tick { display: none; width: 8px; height: 8px; }
.pl-filter-option.selected .pl-filter-checkbox-tick { display: block; }

.pl-color-swatch-opt {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.1);
}
.pl-filter-option.selected .pl-color-swatch-opt { outline: 2px solid #cc132c; outline-offset: 2px; }

/* product_list.html — 價格 range slider */
.pl-price-range {
  padding: 4px 0 8px;
}

.pl-price-range-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 30px 0 8px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(13px * var(--en-type-scale));
  font-weight: 600;
  color: #1e1e1e;
  letter-spacing: 0.04em;
}

.pl-price-range-sep {
  color: #9a9a9a;
}

.pl-price-slider {
  position: relative;
  height: 28px;
  margin: 0 30px 0 8px;
}

.pl-price-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #e0e0e0;
  border-radius: 999px;
  transform: translateY(-50%);
  overflow: hidden;
}

.pl-price-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #cc132c;
  border-radius: 999px;
}

.pl-price-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
}

.pl-price-input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.pl-price-input::-moz-range-track {
  height: 4px;
  background: transparent;
}

.pl-price-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #cc132c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  pointer-events: auto;
  margin-top: -6px;
}

.pl-price-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #cc132c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  pointer-events: auto;
}

.pl-price-input:focus {
  outline: none;
}

.pl-price-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(204, 19, 44, 0.18);
}

.pl-price-input:last-of-type {
  z-index: 2;
}

/* ?? Product grid ?? */
.pl-right-col { flex: 1; min-width: 0; padding-top: 32px; padding-bottom: 60px; }

.pl-breadcrumb {
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(0.875rem * var(--en-type-scale)); font-weight: 300;
  color: #888; margin-bottom: 8px; letter-spacing: 0.04em;
}
.pl-breadcrumb a { color: inherit; text-decoration: none; }
.pl-breadcrumb a:hover { color: #cc132c; }
.pl-breadcrumb span { color: #aaa; margin: 0 4px; }

.pl-result-count {
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(0.875rem * var(--en-type-scale)); font-weight: 400;
  color: #888; margin-bottom: 20px; letter-spacing: 0.04em;
}

.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.pl-card {
  display: flex; flex-direction: column;
  background: #fbfbfb; cursor: pointer; text-decoration: none;
  min-width: 0;
  position: relative;
}
.pl-card[data-hidden="true"] { display: none; }

/* ?? ? ???? */
.pl-card--discontinued {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
  filter: grayscale(0.35);
}
.pl-card--discontinued:hover { opacity: 0.55; }
.pl-card-soldout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.42);
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(18px * var(--en-type-scale));
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
}
.pl-card--discontinued .pl-card-price {
  color: #888;
  font-weight: 500;
}
html:not(.site-lang-zh) .pl-card-soldout {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ?? ? ???????????? */
.pl-card-stock-badge {
  position: absolute;
  top: auto;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  background: #1e1e1e;
  color: #fff;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.pl-card-img-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; overflow: hidden;
}
.pl-card-img { width: 100%; height: 100%; padding: 22px; object-fit: contain; display: block; }
/* 產品冇相：只改呢個 width，height 跟圖比例 */
:root { --product-noimage-width: 160px; }
.pl-card-img.pl-card-img--placeholder {
  width: var(--product-noimage-width);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  object-fit: contain;
}

/* ???????????????????????????????????????
   Product favorite (heart overlay)
   ??????????????????????????????????????? */
.pl-fav-btn {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 4;
  width: auto; height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #1e1e1e;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  transition: transform 0.12s ease, color 0.12s ease;
}
.pl-fav-btn:hover {
  transform: scale(1.08);
  color: #cc132c;
}
.pl-fav-btn:focus {
  outline: none;
}
.pl-fav-heart-img {
  width: 18px;
  height: 18px;
  display: block;
}

.pl-card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.pl-card-badges--sale {
  left: auto;
  right: 10px;
  align-items: flex-end;
}
.pl-card-img-wrap:has(.pl-fav-btn) .pl-card-badges--sale {
  top: 38px;
}
.pl-badge {
  height: 20px; width: 60px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.pl-badge--level1,
.pl-badge--level2,
.pl-badge--level2plus,
.pl-badge--level3,
.pl-badge--level3plus { background: #cc132c; color: #fff; }
.pl-badge--white  { background: #fff; color: #1e1e1e; box-shadow: inset 0 0 0 1px #1e1e1e; }

.pl-card-info {
  --pl-card-pad-x: 4px;
  padding: 10px var(--pl-card-pad-x) 0;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pl-card-code  { font-family: 'Noto Sans HK', sans-serif; font-size: 15px; font-weight: 700; color: #cc132c; letter-spacing: 0.06em; margin-bottom: 2px; }
.pl-card-name  { font-family: 'Barlow Condensed', sans-serif; font-size: calc(16px * var(--en-type-scale)); font-weight: 600; color: #1e1e1e; letter-spacing: 0.04em; line-height: 1.35; margin-bottom: 4px; }
.pl-card-price { font-family: 'Noto Sans HK', sans-serif; font-size: 15px; font-weight: 400; color: #1e1e1e; letter-spacing: 0.04em; margin-bottom: 6px; }

.pl-card-shop {
  position: relative;
  margin-inline: calc(-1 * var(--pl-card-pad-x));
  margin-top: auto;
  margin-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 40px;
  overflow: hidden;
}
.pl-card-shop .pl-card-swatches {
  margin-bottom: 0;
  padding: 0 var(--pl-card-pad-x) 20px;
}
.pl-card-shop-rest {
  transition: opacity 0.28s ease;
}
.pl-card-atc {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.pl-card-atc__text {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: #1e1e1e;
  color: #fff;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.pl-card-atc__text:focus {
  outline: none;
}
.pl-card-atc__text:focus-visible {
  outline: 2px solid #cc132c;
  outline-offset: 2px;
}
.pl-card-atc__text::before {
  content: '加入購物車';
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
}
html:not(.site-lang-zh) .pl-card-atc__text::before {
  content: 'ADD TO CART';
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .pl-card:hover .pl-card-shop-rest,
  .pl-card.is-atc-hover .pl-card-shop-rest,
  .pl-card:focus-visible .pl-card-shop-rest,
  .pl-card:has(.pl-card-atc__text:hover) .pl-card-shop-rest {
    opacity: 0;
  }
  .pl-card:hover .pl-card-atc,
  .pl-card.is-atc-hover .pl-card-atc,
  .pl-card:focus-visible .pl-card-atc,
  .pl-card:has(.pl-card-atc__text:hover) .pl-card-atc {
    opacity: 1;
    pointer-events: auto;
  }
  .pl-card-atc__text:hover {
    background: #cc132c;
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pl-card-shop-rest,
  .pl-card-atc {
    transition: none;
  }
}

.pl-card.is-picking {
  z-index: 5;
}
.pl-card.is-picking .pl-card-atc {
  opacity: 0 !important;
  pointer-events: none !important;
}
.pl-atc-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 6;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 12px 14px;
  background: #fff;
  border-top: 1px solid #ececec;
  box-shadow: 0 -18px 28px rgba(0, 0, 0, 0.14);
  overflow: auto;
  max-height: calc(100% - 72px);
}
.pl-card.is-picking .pl-atc-panel,
.pl-atc-panel:not([hidden]) {
  display: flex;
}
.pl-atc-panel[hidden] { display: none !important; }
.pl-atc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
}
.pl-atc-title {
  margin: 0;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1e1e1e;
  line-height: 1.3;
  text-align: left;
}
html:not(.site-lang-zh) .pl-atc-title {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 15px;
}
.pl-atc-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: #888;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pl-atc-close:hover { color: #1e1e1e; }
.pl-atc-label {
  margin: 0;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #888;
}
html:not(.site-lang-zh) .pl-atc-label {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pl-atc-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pl-atc-color {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px #ccc;
}
.pl-atc-color.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e1e1e; }
.pl-atc-color.is-oos { opacity: 0.28; cursor: not-allowed; }
.pl-atc-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pl-atc-size {
  min-width: 32px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid #d8d8d8;
  background: #fff;
  color: #1e1e1e;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.pl-atc-size.is-on {
  border-color: #1e1e1e;
  background: #1e1e1e;
  color: #fff;
}
.pl-atc-size.is-oos {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.pl-atc-qty {
  display: flex;
  align-items: center;
  align-self: flex-start;
  border: 1px solid #d8d8d8;
}
.pl-atc-qty-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: #4d4d4f;
  font-size: 16px;
  cursor: pointer;
}
.pl-atc-qty-btn:disabled { color: #ccc; cursor: default; }
.pl-atc-hint {
  min-height: 0;
  margin: 0;
  font-size: 11px;
  color: #cc132c;
  letter-spacing: 0.04em;
}
.pl-atc-hint:empty { display: none; }
.pl-atc-qty-val {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1e1e1e;
}
.pl-atc-confirm {
  width: 100%;
  height: 34px;
  border: 0;
  background: #1e1e1e;
  color: #fff;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.pl-atc-confirm:hover { background: #cc132c; }
.pl-atc-confirm:disabled {
  background: #bbb;
  cursor: not-allowed;
}
html:not(.site-lang-zh) .pl-atc-confirm {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pl-card-price--sale {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.25;
}
.pl-card-price__now { color: #cc132c; font-weight: 700; }
.pl-card-price__was {
  display: block;
  color: #9a9a9a;
  text-decoration: line-through;
  font-size: 0.85em;
}
.pl-sale-tag {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 76px;
  background: #cc132c;
  color: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  line-height: 1;
}
.pl-sale-tag[hidden] { display: none !important; }
.pl-sale-tag__label,
.pl-sale-tag__off {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 7px 10px;
}
.pl-sale-tag__label {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-bottom: 5px;
}
.pl-sale-tag__off {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}
html:not(.site-lang-zh) .pl-sale-tag__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pl-card-swatches { display: flex; gap: 4px; justify-content: center; margin-bottom: 20px; }
.pl-card-swatch { width: 12px; height: 12px; }

.pl-no-results {
  display: none;
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); color: #888;
  padding: 40px 0; text-align: center; grid-column: 1 / -1;
}
.pl-no-results.visible { display: block; }

/* ?? Mobile-only elements (hidden on desktop) ?? */
.pl-mobile-filter-btn { display: none; }
.pl-filter-close-btn  { display: none; }
.pl-filter-overlay    { display: none; }

/* ?? MOBILE ? 768px ?? */
@media (max-width: 768px) {
  .pl-page { padding-top: calc(var(--site-header-h, 6.5rem) + 20px); }
  .pl-header { padding: 12px 0 8px; }
  .pl-title { font-size: 28px; font-weight: 700; padding: 0; margin: 0; line-height: 1.1; }
  .pl-title-en { margin-top: 2px; }

  .pl-body { flex-direction: column; padding: 0 16px; gap: 0; }

  .pl-filter-col {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82vw; max-width: 320px; background: #fff;
    z-index: 1010; padding: 20px 20px 60px;
    overflow-y: auto; overflow-x: hidden;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    will-change: transform; contain: layout style;
  }
  .pl-filter-col.mob-open { transform: translate3d(0, 0, 0); }

  .pl-filter-close-btn {
    display: block; position: absolute; top: 16px; right: 16px; z-index: 2;
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: #666; line-height: 1; padding: 4px;
  }
  .pl-filter-header { padding-right: 36px; }

  .pl-filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1005; }
  .pl-filter-overlay.mob-open { display: block; }

  .pl-mobile-filter-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid #cc132c; background: #fff; padding: 8px 16px;
    font-family: 'Noto Sans HK', sans-serif; font-size: calc(13px * var(--en-type-scale)); font-weight: 700;
    color: #cc132c;
    cursor: pointer; letter-spacing: 0.06em; margin: 8px 0 8px;
  }

  .pl-right-col { padding-top: 0; padding-bottom: 40px; }
  .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .pl-card-img { padding: 10px; }
  .pl-card-info { --pl-card-pad-x: 6px; padding: 8px var(--pl-card-pad-x) 0; }
  .pl-card-code  { font-size: 12px; margin-bottom: 1px; }
  .pl-card-name  { font-size: calc(11px * var(--en-type-scale)); line-height: 1.4; margin-bottom: 3px; }
  .pl-card-price { font-size: 12px; margin-bottom: 4px; }
  .pl-card-swatches { gap: 3px; margin-bottom: 8px; }
  .pl-card-shop .pl-card-swatches { padding-bottom: 8px; }
  .pl-card-atc__text { padding: 0 8px; }
  .pl-card-atc__text::before { font-size: 11px; }
  html:not(.site-lang-zh) .pl-card-atc__text::before { font-size: 12px; }
  .pl-atc-panel { padding: 10px 8px 12px; max-height: calc(100% - 52px); gap: 5px; }
  .pl-atc-title { font-size: 12px; }
  .pl-card-swatch { width: 10px; height: 10px; }
  .pl-badge { height: 16px; width: 46px; font-size: 9px; }
  .pl-sale-tag { min-width: 68px; }
  .pl-sale-tag__label,
  .pl-sale-tag__off { padding: 6px 8px; }
  .pl-sale-tag__label { font-size: 12px; padding-bottom: 4px; }
  .pl-sale-tag__off { font-size: 13px; padding-top: 4px; }
  html:not(.site-lang-zh) .pl-sale-tag__label { font-size: 13px; }
  .pl-breadcrumb { font-size: calc(11px * var(--en-type-scale)); margin-bottom: 6px; }
  .pl-result-count { font-size: calc(11px * var(--en-type-scale)); margin-bottom: 14px; }

  .pl-mobile-filter-btn {
    width: 100%; justify-content: center;
    border-color: #cc132c; margin: 8px 0 8px; padding: 10px 0;
    font-size: calc(13px * var(--en-type-scale)); letter-spacing: 0.1em;
  }
  .mob-filter-count { color: #cc132c; font-weight: 700; }
}

/* =============================================
   Product Details Page  (product_details.html)
   ============================================= */

html.page-detail,
html.page-detail body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}

.pd-page { padding-top: 150px; background: #fff; min-height: 100vh; }

.pd-main-area { display: flex; gap: 26px; padding: 0 160px; align-items: flex-start; }

/* Left column */
.pd-left-col { display: flex; flex-direction: column; width: 544px; flex-shrink: 0; margin-bottom: 40px; }

.pd-image-row { display: flex; gap: 6px; align-items: flex-start; }

.pd-thumbs-col { display: flex; flex-direction: column; gap: 6px; width: 82px; flex-shrink: 0; order: -1; }

.pd-thumb {
  width: 82px; height: 82px; object-fit: cover; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.2s; display: block;
}
.pd-thumb:hover,
.pd-thumb.active { border-color: #cc132c; }

.pd-main-img-wrap { flex: 1; position: relative; }
.pd-main-img-wrap:has(.pd-main-img--placeholder) {
  width: 456px;
  height: 456px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-main-img { width: 456px; height: 456px; object-fit: cover; display: block; }
.pd-main-img.pd-main-img--placeholder {
  width: var(--product-noimage-width);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  object-fit: contain;
  background: transparent;
}

/* Description (below image) */
.pd-desc-section[hidden],
.pd-tags[hidden] { display: none !important; }
.pd-section-label { font-family: 'Noto Sans HK', sans-serif; font-size: calc(15px * var(--en-type-scale)); font-weight: 500; color: #1e1e1e; letter-spacing: 0.1em; margin-bottom: 8px; }
.pd-bullet-list { font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); font-weight: 400; color: #4d4d4f; line-height: 2; letter-spacing: 0.04em; list-style: disc; padding-left: 20px; }

/* Right column */
.pd-right-col { flex: 1; min-width: 0; padding-top: 20px; overflow: visible; }

.pd-breadcrumb { font-family: 'Noto Sans HK', sans-serif; font-size: calc(0.875rem * var(--en-type-scale)); font-weight: 400; color: #4d4d4f; letter-spacing: 0.10em; margin-top: 10px; line-height: 1.6; }
.pd-breadcrumb a { color: inherit; text-decoration: none; }
.pd-breadcrumb-name { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em; }

.pd-code  { font-family: 'Noto Sans HK', sans-serif; font-size: 18px; font-weight: 700; color: #cc132c; letter-spacing: 0.04em; margin-bottom: 4px;padding-top: 10px; }
.pd-name  { font-family: 'Barlow Condensed', sans-serif; font-size: calc(24px * var(--en-type-scale)); font-weight: 600; color: #4d4d4f; letter-spacing: 0.04em; margin-bottom: 10px; }
.pd-price { font-family: 'Noto Sans HK', sans-serif; font-size: 18px; font-weight: 500; color: #4d4d4f; letter-spacing: 0.04em; margin-bottom: 0; }
.pd-price-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.pd-price-block .pd-price { flex: 1; min-width: 0; }
.pd-sale-tag--price {
  flex-shrink: 0;
  min-width: 88px;
  align-self: center;
}
.pd-sale-tag--price .pl-sale-tag__label { font-size: 14px; }
.pd-sale-tag--price .pl-sale-tag__off { font-size: 16px; }
html:not(.site-lang-zh) .pd-sale-tag--price .pl-sale-tag__label { font-size: 16px; }
.pd-sale-tag--img {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
}
.pd-price--sale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  line-height: 1.25;
}
.pd-price__now { color: #cc132c; font-weight: 700; }
.pd-price__was {
  color: #9a9a9a;
  text-decoration: line-through;
  font-size: 0.88em;
  font-weight: 400;
}

.pd-stock-status {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(14px * var(--en-type-scale));
  font-weight: 500;
  color: #8a5a00;
  background: #fff8e8;
  border-left: 3px solid #c9a227;
  padding: 10px 14px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin: -8px 0 16px;
}
.pd-stock-status[hidden] { display: none; }

.pd-divider { border: none; border-top: 1px solid #e0e0e0; margin: 16px 0; }

/* pd-size-header: push 尺碼表 to right */
.pd-size-guide-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(12px * var(--en-type-scale));
  font-weight: 500;
  color: #4d4d4f;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  line-height: 1;
  margin-left: auto;
  transition: color 0.18s;
}
.pd-size-guide-link:hover { color: #cc132c; }

/* ── 尺碼表 Lightbox ── */
.szlb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.szlb-overlay.is-open { display: flex; }
.szlb-overlay[hidden] { display: none !important; }
.szlb-overlay.is-pinned {
  align-items: flex-start;
  padding-top: var(--szlb-top, 20px);
}

.szlb-panel {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: min(85vh, calc(100dvh - var(--szlb-top, 20px) - 20px));
  border-radius: 6px;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.szlb-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  color: #4d4d4f;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  z-index: 10;
  transition: color 0.18s;
}
.szlb-close:hover { color: #cc132c; }

.szlb-tabs {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  padding: 0 20px;
  flex-shrink: 0;
}
.szlb-tab {
  background: none;
  border: none;
  padding: 14px 16px 12px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(13px * var(--en-type-scale));
  font-weight: 500;
  color: #888;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.18s, border-color 0.18s;
}
.szlb-tab[hidden] { display: none !important; }
.szlb-tab:hover:not(.active) { color: #1e1e1e; }

.szlb-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}
.szlb-empty {
  margin: 0;
  padding: 24px 8px;
  text-align: center;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(14px * var(--en-type-scale));
  color: #6d6d6d;
}
.szlb-chart-note {
  margin: 10px 0 0;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(12px * var(--en-type-scale));
  color: #8a8a8a;
  text-align: center;
}
.szlb-content {
  display: none;
  overflow-y: auto;
  padding: 20px 24px 24px;
}
.szlb-content.active {
  display: block;
}

.szlb-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.szlb-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 600px) {
  .szlb-overlay { align-items: center; padding: 16px; }
  .szlb-overlay.is-pinned { padding-top: var(--szlb-top, 16px); }
  .szlb-panel { max-height: min(85vh, calc(100dvh - var(--szlb-top, 16px) - 16px)); border-radius: 10px; }
  .szlb-tab { font-size: calc(12px * var(--en-type-scale)); padding: 12px 10px 10px; }
  .szlb-content { padding: 16px 16px 24px; }
}

/* Tech logos row */
.pd-tech-row { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 24px; overflow: visible; }
.pd-tech-row[hidden],
#pd-level-item[hidden],
#pd-tech-patents[hidden] { display: none !important; margin: 0; }
#pd-tech-patents { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.pd-tech-item { display: flex; align-items: flex-end; gap: 8px; overflow: visible; }
.pd-tech-logo { width: auto; display: block; flex-shrink: 0; }
.pd-tech-logo--level { height: 50px; }
.pd-tech-logo--patent,
.pd-tech-logo--hex { height: 30px; filter: invert(1); }
.pd-tech-icon-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-end; cursor: pointer; overflow: visible;
}
.pd-tech-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-end; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0;
}
/* Hover effect now on the logo image itself */
.pd-tech-icon-wrap .pd-tech-logo { opacity: 1; transition: opacity 0.2s; }
.pd-tech-icon-wrap:hover .pd-tech-logo { opacity: 0.85; }

/* Protection levels hover popup — 由圖標向下展開 */
.pd-level-popup {
  top: calc(100% + 12px); bottom: auto;
  left: 0; transform: none; width: 543px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid #e0e0e0; border-radius: 4px;
  padding: 20px 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.pd-level-popup::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: #e0e0e0;
}
.pd-level-popup::before {
  content: ''; position: absolute; top: auto; bottom: calc(100% - 1px); left: 24px;
  border: 7px solid transparent; border-bottom-color: #fff; z-index: 1;
}
.pd-level-popup__title { display: none; }
.pd-level-popup__list { display: flex; flex-direction: column; gap: 24px; }
.pd-level-row { display: flex; align-items: flex-start; gap: 22px; }
.pd-level-logos { display: flex; align-items: center; gap: 21px; flex-shrink: 0; min-width: 221px; }
.pd-level-logo { width: 100px; height: 59px; object-fit: contain; display: block; }
.pd-level-text { flex: 1; min-width: 0; }
.pd-level-title {
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); font-weight: 700;
  color: #cc132c; letter-spacing: 0.84px; line-height: 18px; margin: 0 0 6px;
}
.pd-level-title__sep { color: #1e1e1e; font-weight: 700; }
.pd-level-desc {
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(12px * var(--en-type-scale)); font-weight: 400;
  color: #4d4d4f; letter-spacing: 0.48px; line-height: 18px; margin: 0;
}

/* Patent / HEX hover popup — 由圖標向下展開 */
.pd-patent-popup {
  top: calc(100% + 12px); bottom: auto;
  left: auto; right: 0; transform: none; width: 400px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid #e0e0e0; border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 0;
}
.pd-patent-popup::after {
  top: auto; bottom: 100%; left: auto; right: 10px; transform: none;
  border-top-color: transparent; border-bottom-color: #e0e0e0;
}
.pd-patent-popup::before {
  content: ''; position: absolute; top: auto; bottom: calc(100% - 1px); left: auto; right: 10px;
  border: 7px solid transparent; border-bottom-color: #fff; z-index: 1;
}
.pd-patent-popup__heading { display: none; }
.pd-patent-popup__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  pointer-events: none;
}
.pd-patent-popup__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 22px 24px;
}
.pd-patent-popup__brand {
  display: flex; justify-content: center; margin-bottom: 14px;
}
.pd-patent-popup__brand-img {
  display: block; width: 150px; max-width: 100%; height: auto; object-fit: contain;
}
.pd-patent-popup__title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: #cc132c;
  text-align: center; margin: 0 0 10px;
}
.pd-patent-popup__body { width: 100%; }
.pd-patent-popup__body p {
  font-family: 'Noto Sans HK', sans-serif; font-size: calc(13px * var(--en-type-scale)); line-height: 1.7;
  letter-spacing: 0.08em; color: #1e1e1e; text-align: justify; margin: 0 0 10px;
}
.pd-patent-popup__body p:last-child { margin-bottom: 0; }

/* Mobile popup backdrop */
.pd-popup-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  z-index: 999; opacity: 0; transition: opacity 0.22s ease;
}
.pd-popup-backdrop.is-visible { display: block; opacity: 1; }
body.pd-popup-open { overflow: hidden; }

@media (max-width: 1024px) and (min-width: 769px) {
  .pd-level-popup {
    left: 50%; transform: translateX(-50%); width: min(543px, calc(100vw - 32px));
  }
  .pd-level-popup::before { left: 50%; transform: translateX(-50%); }
  .pd-patent-popup {
    left: 50%; right: auto; transform: translateX(-50%); width: min(400px, calc(100vw - 32px));
  }
  .pd-patent-popup::after,
  .pd-patent-popup::before { left: 50%; right: auto; transform: translateX(-50%); }
}

/* Level 2 badge */
.level2-badge { display: flex; align-items: stretch; height: 52px; width: 90px; border: 1px solid #ccc; overflow: hidden; }
.level2-main { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 4px 6px; background: #fff; }
.level2-label { font-family: 'Barlow Condensed', sans-serif; font-size: 8px; font-weight: 700; color: #555; letter-spacing: 0.1em; line-height: 1; }
.level2-num   { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 900; color: #1e1e1e; line-height: 1; }
.level2-adv   { background: #cc132c; writing-mode: vertical-rl; text-orientation: mixed; font-family: 'Barlow Condensed', sans-serif; font-size: 6px; font-weight: 700; color: #fff; letter-spacing: 0.08em; padding: 6px 3px; display: flex; align-items: center; justify-content: center; }

/* Colour selector */
.pd-color-label { font-family: 'Noto Sans HK', sans-serif; font-size: calc(15px * var(--en-type-scale)); font-weight: 500; color: #1e1e1e; letter-spacing: 0.1em; margin-bottom: 10px; }
.pd-color-label[hidden],
.pd-color-swatches[hidden],
.pd-size-header[hidden],
.pd-size-btns[hidden] { display: none !important; }
.pd-color-swatches { display: flex; gap: 6px; margin-bottom: 20px; }
.pd-color-swatch { width: 20px; height: 20px; cursor: pointer; transition: transform 0.2s; flex-shrink: 0; }
.pd-color-swatch:hover { transform: scale(1.15); }
.pd-color-swatch.active { outline: 2px solid #cc132c; outline-offset: 2px; }
.pd-color-swatch.disabled { opacity: 0.45; cursor: not-allowed; position: relative; overflow: hidden; }
.pd-color-swatch.disabled:hover { transform: none; }
.pd-color-swatch.disabled::after { content: ''; position: absolute; top: 50%; left: 50%; width: 140%; height: 1.5px; background: #cc132c; transform: translate(-50%, -50%) rotate(-35deg); pointer-events: none; }

/* Size header */
.pd-size-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; overflow: visible; max-width: fit-content; }
.pd-size-header:has(.pd-size-guide-link) { max-width: none; width: calc(83px * 4 + 4px * 3); }
.pd-size-icons  { display: flex; align-items: center; gap: 6px; overflow: visible; }

/* Hover icon + popup system */
.size-icon-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 3px; overflow: visible;
}
.size-icon-img { width: 16px; height: 16px; display: block; }

.size-popup {
  position: absolute; bottom: calc(100% + 12px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  z-index: 600; pointer-events: none;
}
.size-popup.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.size-popup::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; }

.size-popup.pd-level-popup,
.size-popup.pd-patent-popup {
  top: calc(100% + 12px);
  bottom: auto;
  background-color: #fff;
}

/* Video popup */
.size-popup--video { left: 50%; transform: translateX(-50%); width: 480px; background: #111; border-radius: 4px; overflow: hidden; }
.size-popup--video::after { border-top-color: #111; }
.popup-video-title { padding: 10px 14px 8px; color: #fff; font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); letter-spacing: 0.08em; text-align: center; }
.popup-video-frame { display: block; width: 480px; height: 270px; border: none; }

/* Size guide popup */
.size-popup--guide { left: 50%; transform: translateX(-50%); width: 420px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 16px; }
.size-popup--guide::after { border-top-color: #e0e0e0; }
.size-popup--guide::before { content: ''; position: absolute; top: calc(100% - 1px); left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; z-index: 1; }

.size-guide-title { font-family: 'Noto Sans HK', sans-serif; font-size: calc(15px * var(--en-type-scale)); font-weight: 700; color: #1e1e1e; text-align: center; letter-spacing: 0.2em; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; }
.size-guide-item { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f2f2f2; }
.size-guide-item:last-child { border-bottom: none; }
.size-guide-item img { width: 60px; height: 60px; object-fit: contain; border: 1px solid #1e1e1e; flex-shrink: 0; }
.size-guide-info h4 { font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); font-weight: 700; color: #1e1e1e; letter-spacing: 0.08em; margin-bottom: 3px; }
.size-guide-info p  { font-family: 'Noto Sans HK', sans-serif; font-size: calc(13px * var(--en-type-scale)); font-weight: 400; color: #4d4d4f; line-height: 1.5; letter-spacing: 0.03em; margin: 0; }

/* Size chart popup */
.size-popup--chart { left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; overflow: visible; }
.size-popup--chart::after { border-top-color: #e0e0e0; }
.size-popup--chart::before { content: ''; position: absolute; top: calc(100% - 1px); left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; z-index: 1; }

.size-chart-table { border-collapse: collapse; font-family: 'Noto Sans HK', sans-serif; white-space: nowrap; }
.size-chart-table th { background: #898989; color: #fff; padding: 10px 17px; text-align: center; font-weight: 700; font-size: 14px; border: 1px solid #6d6d6d; letter-spacing: 0.04em; }
.size-chart-table th.th-label { font-size: 10px; min-width: 60px; line-height: 1.5; }
.size-chart-table td { background: #fff; color: #6d6d6d; padding: 10px 17px; text-align: center; font-weight: 400; font-size: 13px; border: 1px solid #6d6d6d; min-width: 84px; }
.size-chart-table td.td-label { font-weight: 700; font-size: 10px; line-height: 1.5; }
.size-chart-table td.td-unit-cell { padding: 6px 8px; }

/* Unit select */
.unit-select {
  appearance: none; -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236d6d6d'/%3E%3C/svg%3E") no-repeat right 4px center;
  border: none;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #6d6d6d;
  cursor: pointer;
  padding: 2px 16px 2px 2px;
  text-align: center;
  line-height: 1.5;
  width: 100%;
}
.unit-select:focus { outline: none; }

/* Size buttons */
.pd-size-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
.pd-size-btn {
  width: 83px; height: 40px; border: 1px solid #939598; background: #fff;
  font-family: 'Noto Sans HK', sans-serif; font-size: 15px; font-weight: 700; color: #4d4d4f;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.04em;
}
.pd-size-btn:hover:not(.disabled):not(.active) { border-color: #cc132c; color: #cc132c; }
.pd-size-btn.active { background: #cc132c; border-color: #cc132c; color: #fff; }
.pd-size-btn.disabled { opacity: 0.5; cursor: not-allowed; position: relative; overflow: hidden; }
.pd-size-btn.disabled::after { content: ''; position: absolute; top: 50%; left: 50%; width: 130%; height: 1.5px; background: #cc132c; transform: translate(-50%, -50%) rotate(-35deg); pointer-events: none; }

/* Quantity stepper */
.pd-qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pd-qty-ctrl { display: flex; align-items: center; border: 1px solid #939598; }
.pd-qty-btn { width: 36px; height: 40px; background: none; border: none; font-size: 20px; color: #4d4d4f; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s; line-height: 1; }
.pd-qty-btn:hover { color: #cc132c; }
.pd-qty-val { min-width: 40px; height: 40px; text-align: center; font-family: 'Noto Sans HK', sans-serif; font-size: 15px; font-weight: 700; color: #4d4d4f; line-height: 40px; border-left: 1px solid #939598; border-right: 1px solid #939598; }

/* Add to cart */
.pd-atc-btn { width: 100%; height: 52px; background: #cc132c; border: none; color: #fff; font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); font-weight: 700; letter-spacing: 0.34em; cursor: pointer; transition: background 0.2s; margin-bottom: 16px; display: block; }
.pd-atc-btn:hover { background: #a50d25; }
.pd-atc-btn:disabled,
.pd-is-oos .pd-atc-btn {
  background: #939598;
  cursor: not-allowed;
  letter-spacing: 0.2em;
}
.pd-atc-btn:disabled:hover,
.pd-is-oos .pd-atc-btn:hover { background: #939598; }
.pd-is-oos .pd-qty-btn {
  color: #bbb;
  cursor: not-allowed;
}
.pd-is-oos .pd-qty-btn:hover { color: #bbb; }
.pd-is-oos .pd-qty-ctrl { opacity: 0.55; }

.pd-is-oos .pd-color-swatches,
.pd-is-oos .pd-size-btns { opacity: 0.55; pointer-events: none; }
.pd-is-oos .pd-color-swatch {
  cursor: not-allowed;
  transform: none;
}
.pd-is-oos .pd-color-swatch:hover { transform: none; }
.pd-is-oos .pd-color-swatch.disabled { opacity: 0.55; }
.pd-is-oos .pd-size-btn {
  cursor: not-allowed;
  pointer-events: none;
}

/* Tags */
.pd-tags { font-family: 'Noto Sans HK', sans-serif; font-size: calc(12px * var(--en-type-scale)); color: #4d4d4f; letter-spacing: 0.04em; margin-bottom: 12px; line-height: 1.8; }
.pd-tags a { color: #cc132c; text-decoration: none; }
.pd-tags a:hover { text-decoration: underline; }

/* Notes */
.pd-notes { font-family: 'Noto Sans HK', sans-serif; font-size: calc(14px * var(--en-type-scale)); font-weight: 400; color: #4d4d4f; line-height: 1.9; letter-spacing: 0.04em; }
.pd-notes a { color: #4d4d4f; text-decoration: underline; }

/* Related products */
.pd-related-bar { background: #f8f8f8; padding: 28px 160px 36px; margin-top: 0; }
.pd-related-bar[hidden],
.acpk-related[hidden] { display: none !important; }

/* 產品詳情：桌面相關產品貼視窗底；手機跟內容拉到底先見到 */
@media (min-width: 769px) {
  html.page-detail {
    --pd-related-h: 196px;
  }
  html.page-detail .pd-page {
    padding-bottom: var(--pd-related-h);
  }
  html.page-detail .pd-page > .pd-related-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
  }
  html.page-detail .pd-page > .pd-related-bar .pd-related-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.page-detail .pd-page > .pd-related-bar .pd-related-grid::-webkit-scrollbar { display: none; }
  html.page-detail #btn-top {
    bottom: calc(var(--pd-related-h) + 24px);
  }
  html.page-detail #chatbox-fab {
    bottom: calc(var(--pd-related-h) + 24px);
  }
  html.page-detail body.has-scroll-top #chatbox-fab {
    bottom: calc(var(--pd-related-h) + 110px);
  }
  html.page-detail .corner-terms {
    bottom: calc(var(--pd-related-h) + 1.75rem);
  }
}
.pd-related-title { font-family: 'Noto Sans HK', sans-serif; font-size: calc(15px * var(--en-type-scale)); font-weight: 500; color: #1e1e1e; letter-spacing: 0.1em; margin-bottom: 16px; }

html:not(.site-lang-zh) .pd-section-label,
html:not(.site-lang-zh) .pd-color-label,
html:not(.site-lang-zh) .pd-size-guide-link,
html:not(.site-lang-zh) .pd-atc-btn,
html:not(.site-lang-zh) .pd-related-title,
html:not(.site-lang-zh) .pd-tags,
html:not(.site-lang-zh) .pd-breadcrumb,
html:not(.site-lang-zh) .pd-breadcrumb-name,
html:not(.site-lang-zh) .pd-name,
html:not(.site-lang-zh) .pd-notes,
html:not(.site-lang-zh) .pd-notes a,
html:not(.site-lang-zh) .pd-bullet-list,
html:not(.site-lang-zh) .pd-stock-status,
html:not(.site-lang-zh) .pd-level-popup__title,
html:not(.site-lang-zh) .pd-patent-popup__heading,
html:not(.site-lang-zh) .szlb-tab,
html:not(.site-lang-zh) .szlb-empty,
html:not(.site-lang-zh) .szlb-chart-note,
html:not(.site-lang-zh) .popup-video-title,
html:not(.site-lang-zh) .size-guide-title,
html:not(.site-lang-zh) .size-guide-info h4,
html:not(.site-lang-zh) .size-guide-info p,
html:not(.site-lang-zh) .sg-item__title,
html:not(.site-lang-zh) .sg-item__desc,
html:not(.site-lang-zh) .sg-ribbon span {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
html:not(.site-lang-zh) .pd-section-label,
html:not(.site-lang-zh) .pd-color-label,
html:not(.site-lang-zh) .pd-related-title {
  font-weight: 600;
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .pd-atc-btn {
  letter-spacing: 0.2em;
}
html:not(.site-lang-zh) .pd-size-guide-link,
html:not(.site-lang-zh) .pd-tags {
  letter-spacing: 0.06em;
}
html:not(.site-lang-zh) .pd-level-title,
html:not(.site-lang-zh) .lp-level-title,
html:not(.site-lang-zh) .lp-intro,
html:not(.site-lang-zh) .lp-level-desc,
html:not(.site-lang-zh) .lp-level-points,
html:not(.site-lang-zh) .lp-tec-modal__body,
html:not(.site-lang-zh) .lp-tec-modal__body p,
html:not(.site-lang-zh) .lp-view-products,
html:not(.site-lang-zh) .pd-level-desc,
html:not(.site-lang-zh) .pd-patent-popup__body p,
html:not(.site-lang-zh) .pd-bullet-list,
html:not(.site-lang-zh) .pd-stock-status,
html:not(.site-lang-zh) .sg-item__desc,
html:not(.site-lang-zh) .size-guide-info p,
html:not(.site-lang-zh) .au-desc p,
html:not(.site-lang-zh) .szlb-empty,
html:not(.site-lang-zh) .szlb-chart-note {
  font-family: 'Barlow Condensed', sans-serif;
}
html:not(.site-lang-zh) .pd-level-title,
html:not(.site-lang-zh) .lp-level-title,
html:not(.site-lang-zh) .lp-view-products {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html:not(.site-lang-zh) .lp-intro,
html:not(.site-lang-zh) .lp-level-desc,
html:not(.site-lang-zh) .lp-level-points,
html:not(.site-lang-zh) .lp-tec-modal__body,
html:not(.site-lang-zh) .lp-tec-modal__body p,
html:not(.site-lang-zh) .pd-level-desc,
html:not(.site-lang-zh) .pd-patent-popup__body p,
html:not(.site-lang-zh) .pd-bullet-list,
html:not(.site-lang-zh) .pd-stock-status,
html:not(.site-lang-zh) .sg-item__desc,
html:not(.site-lang-zh) .size-guide-info p {
  letter-spacing: 0.04em;
  text-transform: none;
}
html:not(.site-lang-zh) .au-desc {
  gap: 0.55rem;
}
html:not(.site-lang-zh) .au-desc p {
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: none;
}
html:not(.site-lang-zh) .lp-view-products {
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pd-related-grid { display: flex; gap: 12px; }
.pd-related-item { width: 100px; height: 100px; cursor: pointer; overflow: hidden; transition: opacity 0.2s; }
.pd-related-item:hover { opacity: 0.75; }
.pd-related-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-related-item:has(.pd-related-placeholder) {
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-related-item img.pd-related-placeholder {
  width: var(--product-noimage-width);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  padding: 0;
  background: transparent;
}

/* Desktop-only / mobile-only desc */
.pd-desc-mobile { display: none; }
@media (max-width: 768px) {
  .pd-desc-desktop { display: none !important; }
  .pd-desc-mobile  { display: block; }
}
@media (min-width: 769px) { .pd-breadcrumb-mobile { display: none; } }

/* Close button: desktop hidden */
.popup-close-btn { display: none; }

/* ?? MOBILE ? 768px ?? */
@media (max-width: 768px) {
  .pd-page { padding-top: 80px; }

  .pd-main-area { flex-direction: column; padding: 0 16px; gap: 0; }
  .pd-left-col  { width: 100%; flex-shrink: 1; display: flex; flex-direction: column; margin-bottom: 0; }

  .pd-image-row { display: block; width: calc(100% + 32px); margin: 0 -16px; }
  .pd-main-img-wrap { display: block; width: 100%; }
  .pd-main-img  { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
  .pd-main-img-wrap:has(.pd-main-img--placeholder) {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .pd-main-img.pd-main-img--placeholder {
    width: var(--product-noimage-width);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    aspect-ratio: auto;
  }
  .pd-main-img-wrap .pl-fav-btn {
    top: 24px;
    right: 24px;
    padding: 8px;
  }
  .pd-main-img-wrap .pl-fav-heart-img {
    width: 20px;
    height: 20px;
  }

  .pd-thumbs-col { display: flex; flex-direction: row; order: 0; width: 100%; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 16px 4px; }
  .pd-thumbs-col::-webkit-scrollbar { display: none; }
  .pd-thumb { width: 60px; height: 60px; flex-shrink: 0; }

  .pd-right-col { width: 100%; flex: none; display: flex; flex-direction: column; padding-top: 0; overflow: visible; margin-bottom: 20px; }
  .pd-code    { order: 1; padding-top: 8px; margin-top: 0; }
  .pd-name    { order: 1; font-size: 18px; }
  .pd-price-block { order: 1; }
  .pd-price   { order: 1; font-size: 16px; }
  .pd-sale-tag--img { top: 16px; left: 16px; }
  .pd-divider { display: none; }
  .pd-tech-row { order: 2; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px; }
  #pd-tech-patents { gap: 12px 20px; }
  .pd-tech-item { align-items: flex-end; }
  .pd-tech-logo--level { height: 42px; }
  .pd-tech-logo--patent,
  .pd-tech-logo--hex { height: 26px; }
  .pd-tech-icon-wrap { padding: 6px; margin: -6px; }
  .pd-tech-info-icon { width: 18px; height: 18px; }
  .pd-color-label    { order: 4; }
  .pd-color-swatches { order: 5; }
  .pd-size-header    { order: 6; width: 100% !important; max-width: none !important; }
  .pd-size-btns      { order: 7; }
  #pd-qty-label      { order: 8; }
  .pd-qty-row        { order: 9; }
  .pd-atc-btn        { order: 10; }
  .pd-tags           { order: 11; }
  .pd-notes          { order: 12; }
  .pd-desc-section   { order: 13; }

  .pd-size-btns { width: 100%; }
  .pd-size-btn { flex: 1 1 0; width: auto; height: 38px; font-size: 13px; }

  .size-popup {
    position: fixed !important; bottom: 0 !important; left: 0 !important;
    right: 0 !important; top: auto !important; width: 100% !important;
    max-height: 80vh; overflow-y: auto; border-radius: 14px 14px 0 0;
    z-index: 1000; transform: none !important;
  }
  .size-popup::after,
  .size-popup::before { display: none !important; }
  .popup-video-frame { width: 100% !important; height: 55vw !important; }
  .size-popup--chart { overflow: visible; padding-top: 40px; }
  .chart-scroll-wrap {
    overflow-x: visible;
    width: 100%;
    padding: 0;
  }
  .size-chart-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    white-space: normal;
  }
  .size-chart-table th {
    padding: 8px 4px;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  .size-chart-table th.th-label {
    font-size: 9px;
    min-width: 0;
    width: 22%;
  }
  .size-chart-table td {
    padding: 8px 4px;
    font-size: 11px;
    min-width: 0;
    word-break: break-word;
    line-height: 1.35;
  }
  .size-chart-table td.td-label {
    font-size: 9px;
  }
  .size-chart-table td.td-unit-cell {
    padding: 6px 2px;
  }
  .unit-select {
    font-size: 9px;
    padding: 2px 12px 2px 0;
    background-position: right 2px center;
  }
  .size-popup--guide,
  .size-popup--video,
  .size-popup--chart,
  .pd-level-popup,
  .pd-patent-popup {
    position: relative; padding: 40px 16px 24px; max-width: 100% !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  }

  .pd-level-popup__title {
    display: block; font-family: 'Noto Sans HK', sans-serif; font-size: calc(15px * var(--en-type-scale)); font-weight: 700;
    color: #1e1e1e; text-align: center; letter-spacing: 0.2em; margin: 0 0 16px;
    padding-bottom: 12px; border-bottom: 1px solid #e0e0e0;
  }
  .pd-patent-popup__heading {
    display: block; position: relative; z-index: 2;
    font-family: 'Noto Sans HK', sans-serif; font-size: calc(15px * var(--en-type-scale)); font-weight: 700;
    color: #1e1e1e; text-align: center; letter-spacing: 0.2em; margin: 0 0 16px;
    padding-bottom: 12px; border-bottom: 1px solid #e0e0e0;
  }
  .pd-patent-popup__content { padding: 8px 0 0; }
  .pd-patent-popup__brand-img { width: 132px; }
  .pd-patent-popup__title { font-size: 20px; }
  .pd-level-popup__list { gap: 20px; }
  .pd-level-row { flex-direction: row; gap: 12px; align-items: flex-start; }
  .pd-level-logos { min-width: 0; gap: 8px; flex-wrap: wrap; }
  .pd-level-logo { width: 72px; height: 43px; }
  .pd-level-title { font-size: calc(13px * var(--en-type-scale)); letter-spacing: 0.6px; }
  .pd-level-desc { font-size: calc(12px * var(--en-type-scale)); line-height: 1.6; }

  @media (max-width: 400px) {
    .pd-level-row { flex-direction: column; gap: 8px; }
    .pd-level-logo { width: 64px; height: 38px; }
  }

  .popup-close-btn {
    display: flex; position: absolute; top: 10px; right: 14px;
    background: none; border: none; font-size: 18px; color: #4d4d4f;
    cursor: pointer; line-height: 1; padding: 4px 6px; z-index: 10;
  }

  .pd-related-bar { padding: 20px 16px 28px; }
  .pd-thumbs-col:empty { display: none; padding: 0; }
  .pd-breadcrumb-mobile { display: block; margin-top: 8px; margin-bottom: 0; }
  .pd-breadcrumb:not(.pd-breadcrumb-mobile) { display: none; }
  .pd-stock-status { order: 3; }
}


/* =============================================
   Register & Login Page  (registerandlogin.html)
   ============================================= */

html.page-ral,
html.page-ral body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}
html.page-ral body { background: #fff; }

/* ?w?w Page base ?w?w */
.ral-page {
  background: #fff;
  min-height: 100vh;
  padding-top: 150px;
  padding-bottom: 80px;
}

/* Page title */
.ral-header {
  text-align: center;
  margin-bottom: 16px;
}

.ral-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: #1e1e1e;
  margin: 0 0 4px;
}

.ral-title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #6d6d6d;
  margin: 0;
  text-transform: uppercase;
}

/* ?w?w Outer card ?w?w */
.ral-card {
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  max-width: 1200px;
  width: calc(100% - 40px);
  margin: 25px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}

/* ?w?w Left panel (login + google) ?w?w */
.ral-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #c8c8c8;
}

/* ?w?w Each hoverable section ?w?w */
.ral-section {
  padding: 36px 40px;
  transition: background 0.2s ease;
  cursor: default;
}
.ral-section:hover { background: #f8f8f8; }

.ral-login  { flex: 1; }
.ral-google { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ?w?w Right panel ?w?w */
.ral-register {
  display: block;
  padding: 36px 40px;
  transition: background 0.2s ease;
  cursor: default;
}
.ral-register:hover { background: #f8f8f8; }

/* ?w?w Section heading ?w?w */
.ral-section-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1e1e1e;
  text-align: center;
  margin-bottom: 6px;
}
.ral-section-subtitle {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1e1e1e;
  text-align: center;
  margin-bottom: 24px;
}

/* ?w?w Field label ?w?w */
.ral-label {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #232020;
  display: block;
  margin-bottom: 4px;
  padding-left: 4px;
}
.ral-label-hint {
  font-weight: 500;
  font-size: 12px;
  color: #6d6d6d;
  letter-spacing: 0.03em;
  margin-left: 6px;
}

/* ?w?w Inputs ?w?w */
.ral-input {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  color: #1e1e1e;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  height: 45px;
  width: 100%;
  padding: 0 20px;
  outline: none;
  background: transparent;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ral-input::placeholder { color: #cdcdcd; }
.ral-input:focus { border-color: #1e1e1e; }

/* ?w?w Input wrapper (password eye icon) ?w?w */
.ral-input-wrap { position: relative; }
.ral-input-wrap .ral-input { padding-right: 44px; }
.ral-eye-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #6d6d6d;
  display: flex;
  align-items: center;
}
.ral-eye-btn:hover { color: #1e1e1e; }

.ral-field { margin-bottom: 16px; }

/* ?w?w Two-col fields ?w?w */
.ral-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ?w?w Checkbox row ?w?w */
.ral-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.ral-check-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  accent-color: #cc132c;
  margin-top: 2px;
  cursor: pointer;
}
.ral-check-label {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #1e1e1e;
  line-height: 1.6;
}
.ral-check-label .required { color: #cc132c !important; }
.required { color: #cc132c; }

/* ?w?w Buttons ?w?w */
.ral-btn-login {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.34em;
  color: #fff;
  background: #cc132c;
  border: none;
  border-radius: 2px;
  height: 52px;
  width: 100%;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s;
  margin-top: 6px;
}
.ral-btn-login:hover { background: #a80f24; }

.ral-btn-register {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.34em;
  color: #fff;
  background: #6d6d6d;
  border: none;
  border-radius: 2px;
  height: 52px;
  width: 100%;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s;
  margin-top: 12px;
}
.ral-btn-register:hover { background: #555; }

/* ?w?w Forgot password ?w?w */
.ral-forgot {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #cc132c;
  text-align: center;
  display: block;
  margin-top: 14px;
  text-decoration: none;
}
.ral-forgot:hover { text-decoration: underline; }

/* ?w?w OR separator (standalone, not inside any hoverable section) ?w?w */
.ral-or-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 40px;
  flex-shrink: 0;
}
.ral-or-sep::before,
.ral-or-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #c8c8c8;
}
.ral-or-sep span {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #1e1e1e;
}

/* ?w?w Divider with inline text ?w?w */
.ral-divider-text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ral-divider-text::before,
.ral-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #c8c8c8;
}
.ral-divider-text span {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  color: #1e1e1e;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ?w?w Google button ?w?w */
.ral-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 10px 16px;
  background: #fff;
  cursor: pointer;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;
  transition: box-shadow 0.2s, background 0.2s;
  text-decoration: none;
}
.ral-google-btn:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.15); background: #f8f8f8; }
.ral-google-btn svg { flex-shrink: 0; }

/* ?w?w Date input dropdown arrow ?w?w */
.ral-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d6d6d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w
   RAL RESPONSIVE
?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w?w */
@media (max-width: 900px) {
  .ral-card {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    min-height: 0;
  }
  .ral-left {
    border-right: none;
    border-bottom: 1px solid #c8c8c8;
  }
  .ral-login,
  .ral-google { flex: none; }
  .ral-register {
    display: block !important;
    width: 100%;
  }
  .ral-page { padding-top: 80px; }
  .ral-header,
  .ral-title { display: none; }
}

@media (max-width: 560px) {
  .ral-page { padding-top: 80px; padding-bottom: 48px; }
  .ral-card { width: calc(100% - 24px); }
  .ral-section,
  .ral-register { padding: 28px 20px; }
  .ral-or-sep { padding: 0 20px; }
  .ral-field-row { grid-template-columns: 1fr; }
  .ral-section-title { font-size: 22px; }
}

.ral-login-error {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  color: #cc132c;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  text-align: center;
}


/* ???????????????????????????????????????
   member.html ? ?????
   ??????????????????????????????????????? */

html.page-member,
html.page-member body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}
html.page-member body { background: #f5f5f5; }

.member-page {
  min-height: 100vh;
  padding: 140px 20px 80px;
  max-width: 880px;
  margin: 0 auto;
}

.member-header {
  text-align: center;
  /* Match levels title→EN spacing (~36px above title, tight below EN) */
  padding: 36px 0 20px;
  margin-bottom: 28px;
}
.member-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.15em;
  color: #1e1e1e;
  margin: 0 0 4px;
}
.member-title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #6d6d6d;
  margin: 0;
}

.member-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.member-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 28px 32px;
}
.member-card--logout {
  display: flex;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 8px 0 0;
}

.member-section-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e1e1e;
  margin: 0 0 8px;
}
.member-section-note {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #8a8a8a;
  margin: 0 0 20px;
  letter-spacing: 0.04em;
}
.member-section-note--inline {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Collapse accordion: mobile for all; desktop only for --desktop */
.member-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: default;
  text-align: left;
  color: inherit;
  font: inherit;
}
.member-collapse-toggle .member-section-title {
  margin-bottom: 0;
}
.member-collapse-chevron {
  width: 20px;
  height: 20px;
  color: #6d6d6d;
  flex-shrink: 0;
  display: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.member-collapse.is-open .member-collapse-chevron {
  transform: rotate(180deg);
}
.member-collapse-panel {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 14px;
}
.member-collapse-inner {
  overflow: hidden;
  min-height: 0;
}
.member-collapse .member-section-head {
  margin-bottom: 14px;
}

.member-collapse--desktop .member-collapse-toggle {
  cursor: pointer;
  min-height: 28px;
}
.member-collapse--desktop .member-collapse-chevron {
  display: block;
}
.member-collapse--desktop .member-collapse-panel {
  grid-template-rows: 0fr;
  margin-top: 0;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.member-collapse--desktop.is-open .member-collapse-panel {
  grid-template-rows: 1fr;
  margin-top: 14px;
}
.member-collapse--desktop .member-collapse-inner {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-collapse--desktop.is-open .member-collapse-inner {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}
.member-collapse--desktop.is-instant .member-collapse-panel,
.member-collapse--desktop.is-instant .member-collapse-inner,
.member-collapse--desktop.is-instant .member-collapse-chevron {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .member-collapse--desktop .member-collapse-panel,
  .member-collapse--desktop .member-collapse-inner,
  .member-collapse--desktop .member-collapse-chevron {
    transition: none !important;
  }
}

.member-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.member-field { margin-bottom: 0; }
.member-pw-form .member-field { margin-bottom: 14px; }

.member-label {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #232020;
  display: block;
  margin-bottom: 4px;
  padding-left: 2px;
}
.member-input {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  color: #1e1e1e;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  height: 44px;
  width: 100%;
  padding: 0 16px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}
.member-input[readonly] {
  background: #f7f7f7;
  color: #4a4a4a;
  cursor: default;
}
.ral-input-wrap .member-input { padding-right: 44px; }

.member-section-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: 12px;
}
.member-section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.member-section-head .member-section-title { margin-bottom: 0; }
.member-section-head .member-section-note { margin: 8px 0 0; }

.member-addr-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.member-addr-card {
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 16px 18px;
  background: #fff;
  transition: border-color 0.2s;
}
.member-addr-card.is-default { border-color: #cc132c; }
.member-addr-card.is-editing { border-color: #1e1e1e; background: #fafafa; }

.member-addr-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.member-addr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.member-addr-label,
.member-addr-default {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 2px;
}
.member-addr-label {
  background: #f0f0f0;
  color: #4a4a4a;
}
.member-addr-default {
  background: #cc132c;
  color: #fff;
}
.member-addr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.member-link-btn {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #1e1e1e;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.member-link-btn:hover { color: #cc132c; }
.member-link-btn--danger { color: #8a8a8a; }
.member-link-btn--danger:hover { color: #cc132c; }

.member-addr-name {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1e1e1e;
  margin: 0 0 6px;
}
.member-addr-line {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  color: #1e1e1e;
  margin: 0 0 2px;
  line-height: 1.55;
}
.member-addr-region {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #8a8a8a;
  margin: 8px 0 0;
  letter-spacing: 0.06em;
}
.member-addr-edit-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e1e1e;
  margin: 0 0 14px;
}
.member-addr-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.member-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d6d6d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.member-btn--ghost {
  color: #1e1e1e;
  background: transparent;
  border: 1px solid #c8c8c8;
  height: 40px;
  padding: 0 16px;
  letter-spacing: 0.16em;
  font-size: 12px;
  flex-shrink: 0;
}
.member-btn--ghost:hover {
  border-color: #cc132c;
  color: #cc132c;
}
.member-btn--ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.member-btn--ghost:disabled:hover {
  border-color: #c8c8c8;
  color: #1e1e1e;
}
.member-btn.member-btn--sm {
  height: 42px;
  width: auto;
  min-width: 120px;
  padding: 0 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
}

@media (max-width: 700px) {
  .member-section-head {
    margin-bottom: 10px;
  }
  .member-section-head .member-section-note { margin-top: 6px; }
  .member-section-head .member-btn--ghost {
    height: 36px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .member-addr-card-top {
    flex-direction: column;
  }
  .member-addr-actions {
    justify-content: flex-start;
  }
}

.member-orders {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.member-orders-empty {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  color: #8a8a8a;
  margin: 0;
}
.member-list-toggle {
  align-self: center;
  margin-top: 4px;
  padding: 6px 14px;
  background: none;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4d4d4f;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.member-list-toggle:hover {
  border-color: #cc132c;
  color: #cc132c;
}
.member-list-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.member-list-more.is-open {
  grid-template-rows: 1fr;
}
.member-list-more-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-list-more.is-open .member-list-more-inner {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}
@media (prefers-reduced-motion: reduce) {
  .member-list-more,
  .member-list-more-inner { transition: none !important; }
}

.member-favorites {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.member-favorites-empty {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  color: #8a8a8a;
  margin: 0;
}
.member-favorite-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 8px 12px;
  background: #fff;
  transition: border-color 0.2s, transform 0.12s;
  position: relative;
  padding-right: 40px; /* for delete icon */
}
.member-favorite-card:hover {
  border-color: #cc132c;
  transform: translateY(-1px);
}
.member-favorite-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #f7f7f7;
  border-radius: 2px;
  flex-shrink: 0;
}
.member-favorite-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.member-favorite-code {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #cc132c;
  line-height: 1.25;
}
.member-favorite-name {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1e1e1e;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.member-favorite-price {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #1e1e1e;
  letter-spacing: 0.04em;
  opacity: 0.9;
  line-height: 1.25;
}

.member-fav-delete-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ebebeb;
  background: #fff;
  color: #6d6d6d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.12s;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.member-fav-delete-btn:hover {
  border-color: #cc132c;
  color: #cc132c;
  transform: translateY(-50%) scale(1.02);
}
.member-order {
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 8px 12px;
}
.member-order--shipping {
  border-color: #cc132c;
  background: #fffafa;
}
.member-order-main {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.member-order-main {
  cursor: pointer;
  transition: opacity 0.15s;
}
a.member-order-main:hover {
  opacity: 0.88;
}
.member-order--shipping a.member-order-main:hover .member-order-hint {
  text-decoration: underline;
}
.member-order-top,
.member-order-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.member-order-id {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #1e1e1e;
  line-height: 1.2;
}
.member-order-status {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #cc132c;
}
.member-order-status.is-shipping {
  background: #cc132c;
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
}
.member-order-status.is-cancelled {
  background: #4d4d4f;
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
}
.member-order-status.is-pending {
  background: #1e1e1e;
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
}
.member-order--cancelled {
  background: #fafafa;
}
.member-order-items {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #6d6d6d;
  margin: 3px 0;
  line-height: 1.35;
}
.member-order-bottom {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  color: #8a8a8a;
}
.member-order-total {
  font-weight: 700;
  font-size: 13px;
  color: #1e1e1e;
}
.member-order-hint {
  display: block;
  margin-top: 4px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #cc132c;
}
.member-order-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}
.member-order-invoice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #cc132c;
  border-radius: 2px;
  background: #fff;
  color: #cc132c;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.member-order-invoice:hover {
  background: #cc132c;
  color: #fff;
}
.member-order-invoice--void {
  border-color: #8a8a8a;
  color: #4d4d4f;
}
.member-order-invoice--void:hover {
  background: #4d4d4f;
  color: #fff;
}

/* ???????????????????????????????????????
   order-tracking.html ? ????
   ??????????????????????????????????????? */
.track-page {
  min-height: 100vh;
  padding: 140px 20px 80px;
  max-width: 720px;
  margin: 0 auto;
}
.track-back {
  display: inline-block;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  color: #6d6d6d;
  text-decoration: none;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.track-back:hover { color: #cc132c; }
.track-header {
  text-align: center;
  margin-bottom: 28px;
}
.track-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: 0.15em;
  color: #1e1e1e;
  margin: 0 0 4px;
}
.track-title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #6d6d6d;
  margin: 0;
}
.track-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 22px 24px;
  margin-bottom: 16px;
}
.track-empty {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  color: #6d6d6d;
  margin: 0 0 16px;
}
.track-section-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1e1e1e;
  margin: 0 0 14px;
}
.track-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.track-status-badge {
  flex-shrink: 0;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: #cc132c;
  padding: 4px 10px;
  border-radius: 2px;
}
.track-label {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  color: #8a8a8a;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
}
.track-value {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1e1e1e;
  margin: 0;
}
.track-value--id {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.track-value--eta {
  color: #cc132c;
  font-weight: 700;
}
.track-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}
.track-ship-line {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  color: #4d4d4f;
  margin: 0 0 4px;
  line-height: 1.5;
}
.track-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.track-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid #ebebeb;
  border-radius: 2px;
}
.track-product-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #f7f7f7;
  border-radius: 2px;
  flex-shrink: 0;
}
.track-product-meta { min-width: 0; }
.track-product-code {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #cc132c;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
}
.track-product-name {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0 0 2px;
  line-height: 1.35;
}
.track-product-qty {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #8a8a8a;
  margin: 0;
}
.track-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 6px;
  position: relative;
}
.track-step {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 22px;
}
.track-step:last-child { padding-bottom: 0; }
.track-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: #e8e8e8;
}
.track-step.is-done:not(:last-child)::before,
.track-step.is-current:not(:last-child)::before {
  background: #cc132c;
}
.track-step-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d0d0d0;
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.track-step.is-done .track-step-dot {
  border-color: #cc132c;
  background: #cc132c;
}
.track-step.is-current .track-step-dot {
  border-color: #cc132c;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(204, 19, 44, 0.18);
}
.track-step-body { min-width: 0; padding-top: 0; }
.track-step-label {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0 0 2px;
}
.track-step.is-current .track-step-label { color: #cc132c; }
.track-step:not(.is-done):not(.is-current) .track-step-label { color: #9a9a9a; }
.track-step-desc {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  color: #6d6d6d;
  margin: 0 0 2px;
  line-height: 1.4;
}
.track-step:not(.is-done):not(.is-current) .track-step-desc { color: #b0b0b0; }
.track-step-time {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  color: #8a8a8a;
  margin: 0;
  letter-spacing: 0.04em;
}

html:not(.site-lang-zh) .track-back,
html:not(.site-lang-zh) .track-label,
html:not(.site-lang-zh) .track-section-title,
html:not(.site-lang-zh) .track-status-badge,
html:not(.site-lang-zh) .track-empty,
html:not(.site-lang-zh) .track-product-qty,
html:not(.site-lang-zh) .track-step-label {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
html:not(.site-lang-zh) .track-back {
  font-size: calc(13px * var(--en-type-scale));
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .track-label,
html:not(.site-lang-zh) .track-status-badge,
html:not(.site-lang-zh) .track-product-qty {
  font-size: calc(12px * var(--en-type-scale));
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .track-section-title,
html:not(.site-lang-zh) .track-step-label {
  font-size: calc(15px * var(--en-type-scale));
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .track-empty {
  font-size: calc(14px * var(--en-type-scale));
  letter-spacing: 0.04em;
}
html:not(.site-lang-zh) .track-step-desc,
html:not(.site-lang-zh) .track-product-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(14px * var(--en-type-scale));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .track-page { padding-top: 100px; padding-bottom: 56px; }
  .track-card { padding: 18px 16px; }
  .track-summary-grid { grid-template-columns: 1fr; gap: 12px; }
  .track-product-img { width: 52px; height: 52px; }
}

.member-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.member-toggle-label {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1e1e1e;
  margin: 0 0 2px;
}
.member-toggle-hint {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #8a8a8a;
  margin: 0;
}

.member-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.member-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.member-switch-slider {
  position: absolute;
  inset: 0;
  background: #c8c8c8;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
}
.member-switch-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 4px;
  top: 4px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s;
}
.member-switch input:checked + .member-switch-slider {
  background: #cc132c;
}
.member-switch input:checked + .member-switch-slider::before {
  transform: translateX(20px);
}

.member-toast {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  color: #cc132c;
  margin: 12px 0 0;
  letter-spacing: 0.04em;
}

.member-form-msg {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  margin: 0 0 12px;
}
.member-form-msg.is-err { color: #cc132c; }
.member-form-msg.is-ok { color: #1a7a3c; }

.member-btn {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  height: 48px;
  padding: 0 28px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.member-btn--primary {
  width: 100%;
  color: #fff;
  background: #cc132c;
}
.member-btn--primary:hover { background: #a80f24; }
.member-btn--logout {
  color: #6d6d6d;
  background: transparent;
  border: 1px solid #c8c8c8;
  min-width: 200px;
}
.member-btn--logout:hover {
  color: #cc132c;
  border-color: #cc132c;
}

html:not(.site-lang-zh) .member-section-title,
html:not(.site-lang-zh) .member-section-note,
html:not(.site-lang-zh) .member-label,
html:not(.site-lang-zh) .member-btn,
html:not(.site-lang-zh) .member-link-btn,
html:not(.site-lang-zh) .member-toggle-label,
html:not(.site-lang-zh) .member-toggle-hint,
html:not(.site-lang-zh) .member-toast,
html:not(.site-lang-zh) .member-form-msg,
html:not(.site-lang-zh) .member-orders-empty,
html:not(.site-lang-zh) .member-favorites-empty,
html:not(.site-lang-zh) .member-order-status,
html:not(.site-lang-zh) .member-order-hint,
html:not(.site-lang-zh) .member-order-invoice,
html:not(.site-lang-zh) .member-list-toggle,
html:not(.site-lang-zh) .member-addr-default,
html:not(.site-lang-zh) .member-addr-label,
html:not(.site-lang-zh) .member-addr-edit-title {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
html:not(.site-lang-zh) .member-section-title {
  font-size: calc(18px * var(--en-type-scale));
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .member-section-note,
html:not(.site-lang-zh) .member-toggle-hint,
html:not(.site-lang-zh) .member-toast {
  font-size: calc(12px * var(--en-type-scale));
  letter-spacing: 0.04em;
}
html:not(.site-lang-zh) .member-label {
  font-size: calc(13px * var(--en-type-scale));
  letter-spacing: 0.06em;
}
html:not(.site-lang-zh) .member-btn {
  font-size: calc(13px * var(--en-type-scale));
}
html:not(.site-lang-zh) .member-link-btn,
html:not(.site-lang-zh) .member-list-toggle,
html:not(.site-lang-zh) .member-order-status,
html:not(.site-lang-zh) .member-order-hint,
html:not(.site-lang-zh) .member-order-invoice,
html:not(.site-lang-zh) .member-addr-edit-title {
  font-size: calc(12px * var(--en-type-scale));
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .member-toggle-label,
html:not(.site-lang-zh) .member-form-msg,
html:not(.site-lang-zh) .member-orders-empty,
html:not(.site-lang-zh) .member-favorites-empty {
  font-size: calc(14px * var(--en-type-scale));
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .member-page { padding-top: 100px; padding-bottom: 56px; }
  /* Match 防護級別 title→EN band (~36px top, compact bottom) */
  .member-header { padding: 36px 0 20px; margin-bottom: 24px; }
  .member-title { font-size: 32px; }
  .member-card { padding: 22px 18px; }
  /* Mobile priority */
  .member-card--account { order: 1; }
  .member-card--orders { order: 2; }
  .member-card--favorites { order: 3; }
  .member-card--address { order: 4; }
  .member-card--newsletter { order: 5; }
  .member-card--password { order: 6; }
  .member-card--logout { order: 7; }

  .member-collapse {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .member-collapse-toggle {
    cursor: pointer;
    min-height: 28px;
  }
  .member-collapse-chevron {
    display: block;
  }
  .member-collapse-panel {
    grid-template-rows: 0fr;
    margin-top: 0;
    transition:
      grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .member-collapse.is-open .member-collapse-panel {
    grid-template-rows: 1fr;
    margin-top: 14px;
  }
  .member-collapse-inner {
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.18s ease,
      transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .member-collapse.is-open .member-collapse-inner {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.3s ease 0.08s,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
  }
  .member-collapse.is-instant .member-collapse-panel,
  .member-collapse.is-instant .member-collapse-inner,
  .member-collapse.is-instant .member-collapse-chevron {
    transition: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .member-collapse-panel,
    .member-collapse-inner,
    .member-collapse-chevron {
      transition: none !important;
    }
  }

  .member-fields { grid-template-columns: 1fr; }
  .member-toggle-row { align-items: flex-start; }
  .member-section-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .member-section-head-row .member-btn--ghost {
    align-self: flex-start;
  }
}


/* ??????????????????????????????????????????????????????????????????????????????????????????????????????
   dealer.html ?X ?g?P?????
   ?????????????????????????????????????????????????????????????????????????????????????????????????????? */

/* ?w?w Page scaffold ?w?w */
.dealer-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 118px;
  background: #fff;
}

/* ?w?w Region Tabs ?w?w */
.region-tabs {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
  height: 100px;
  justify-content: center;
}

.region-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 45px;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  gap: 1px;
  transition: background 0.2s;
  text-decoration: none;
}

.region-tab + .region-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: #d0d0d0;
}

.region-tab .tab-zh {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  color: #1e1e1e;
  line-height: 1;
}

.region-tab .tab-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  color: #cc132c;
  text-transform: uppercase;
  line-height: 1;
}

.region-tab.active { background: #cc132c; }
.region-tab.active .tab-zh,
.region-tab.active .tab-en { color: #fff; }
.region-tab.active::before,
.region-tab.active + .region-tab::before { display: none; }
.region-tab:hover:not(.active) { background: #f5f5f5; }

/* ?w?w Main layout ?w?w */
.dealer-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ?w?w Map panel ?w?w */
.map-panel {
  flex: 0 0 62%;
  position: relative;
  background: #e8e8e0;
}

#dealer-map {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ?w?w Right panel ?w?w */
.store-panel {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #ebebeb;
  overflow: hidden;
}

/* ?w?w Search section ?w?w */
.search-section {
  padding: 28px 32px 20px;
  border-bottom: 1px solid #ebebeb;
  flex-shrink: 0;
  background: #fff;
}

.search-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px 0;
}

.search-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 3px;
  color: #1e1e1e;
  margin: 0;
  text-transform: uppercase;
}

.all-dealers-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: none;
}

.all-dealers-btn:hover { background: none; }
.pin-hover-filled,
.pin-hover-dot { display: none; }
.all-dealers-btn:hover .pin-normal { display: none; }
.all-dealers-btn:hover .pin-hover-filled,
.all-dealers-btn:hover .pin-hover-dot { display: block; }

.search-wrap { position: relative; }

.search-input-row {
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  height: 44px;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  padding: 0 14px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  color: #1e1e1e;
  outline: none;
  transition: border-color 0.2s;
  letter-spacing: 0.5px;
}

.search-input:focus { border-color: #cc132c; }
.search-input::placeholder { color: #aaa; }

.search-btn {
  height: 44px;
  padding: 0 22px;
  background: #cc132c;
  color: #fff;
  border: none;
  border-radius: 2px;
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.search-btn:hover { background: #a50d25; }

/* Autocomplete */
.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}

.autocomplete-list.is-open { display: block; }

.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: #fef2f4; }

.ac-name {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #1e1e1e;
  letter-spacing: 0.5px;
}

.ac-addr {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  color: #888;
  margin-top: 2px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-highlight { color: #cc132c; font-weight: 700; }

.ac-badge {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cc132c;
  border: 1px solid #cc132c;
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ?w?w Store list ?w?w */
.store-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.store-list-wrap::-webkit-scrollbar { width: 4px; }
.store-list-wrap::-webkit-scrollbar-track { background: #f5f5f5; }
.store-list-wrap::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.store-count {
  padding: 12px 32px 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #aaa;
  text-transform: uppercase;
  border-bottom: 1px solid #f0f0f0;
}

.store-card {
  padding: 18px 32px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.store-card:hover,
.store-card.active { background: #fef2f4; }

.store-card.active {
  border-left: 3px solid #cc132c;
  padding-left: 29px;
}

.store-pin {
  width: 22px; /* ?? ??? pin ?j?p??O?? */
  height: 22px;
  flex-shrink: 0;
  margin-top: 3px;
}

.store-pin svg { width: 100%; height: 100%; }

.store-info { flex: 1; min-width: 0; }

.store-name {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: #1e1e1e;
  margin: 0 0 4px 0;
}

.store-addr {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.3px;
  line-height: 1.5;
  margin: 0 0 6px 0;
}

.store-phone {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #cc132c;
  display: flex;
  align-items: center;
  gap: 5px;
}

.store-phone svg { flex-shrink: 0; }

.store-dir-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #cc132c;
  border: 1px solid #cc132c;
  border-radius: 2px;
  padding: 3px 10px;
  background: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  text-decoration: none;
  display: inline-block;
}

.store-dir-btn:hover { background: #cc132c; color: #fff; }

/* Empty state */
.store-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  text-align: center;
  gap: 10px;
}

.store-empty svg { color: #ddd; }

.store-empty p {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 13px;
  color: #aaa;
  letter-spacing: 1px;
  margin: 0;
}

/* 經銷商：跟語言掣嘅英文 copy 用 Barlow + --en-type-scale；地區 tab／popup 標題保持中英並排 */
html:not(.site-lang-zh) .search-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(20px * var(--en-type-scale));
  letter-spacing: 0.08em;
}
html:not(.site-lang-zh) .search-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(13px * var(--en-type-scale));
  letter-spacing: 0.12em;
}
html:not(.site-lang-zh) .search-input {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(13px * var(--en-type-scale));
  letter-spacing: 0.04em;
}
html:not(.site-lang-zh) .store-count {
  font-size: calc(12px * var(--en-type-scale));
}
html:not(.site-lang-zh) .store-empty p {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(13px * var(--en-type-scale));
}
html:not(.site-lang-zh) .store-dir-btn {
  font-size: calc(11px * var(--en-type-scale));
}
html.site-lang-zh .ac-badge {
  font-family: 'Noto Sans HK', sans-serif;
  text-transform: none;
  letter-spacing: 0.5px;
  font-weight: 500;
  font-size: 10px;
}

/* ?w?w All-Dealers Popup ?w?w */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 24px;
  overflow-y: auto;
}

.popup-overlay.is-open { display: flex; }

.popup-box {
  background: #fff;
  width: 100%;
  max-width: 620px;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.popup-header h3 {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 3px;
  color: #1e1e1e;
  margin: 0;
}

.popup-close {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #888;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.popup-close:hover { background: #f0f0f0; color: #1e1e1e; }

.popup-body { overflow-y: auto; flex: 1; }
.popup-body::-webkit-scrollbar { width: 4px; }
.popup-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.popup-region-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: #cc132c;
  padding: 6px 20px;
  margin: 0;
}

.popup-store-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.12s;
}

.popup-store-row:hover { background: #fef2f4; }
.popup-store-row .store-info { flex: 1; min-width: 0; }
.popup-store-row .store-name { font-family: 'Noto Sans HK', sans-serif; font-weight: 700; font-size: 13px; color: #1e1e1e; margin: 0 0 3px; }
.popup-store-row .store-addr { font-size: 11px; color: #666; line-height: 1.5; margin: 0; }

/* ?w?w Dealer Responsive ?w?w */
@media (max-width: 900px) {
  html.dealer-html, body.dealer-html { overflow: auto; height: auto; }

  .dealer-page { height: auto; min-height: 100vh; }
  .dealer-main { flex-direction: column; overflow: visible; }

  .map-panel { flex: none; height: 50vw; min-height: 260px; max-height: 420px; }

  .store-panel { flex: none; overflow: visible; border-left: none; border-top: 1px solid #ebebeb; }
  .store-list-wrap { overflow: visible; max-height: none; }

  .region-tabs { height: 60px; overflow-x: visible; flex-wrap: nowrap; justify-content: stretch; }
  .region-tab { flex: 1; padding: 0 4px; flex-shrink: 1; min-width: 0; }
  .region-tab .tab-en { display: none; }

  .search-section { padding: 16px 20px; }
  .store-card { padding: 14px 20px; }
}

@media (max-width: 768px) {
  .dealer-page { padding-top: 88px; }
}

@media (max-width: 600px) {
  .region-tab { padding: 0 4px; }
  .region-tab .tab-zh { font-size: 12px; letter-spacing: 0.5px; }
}

/* ???????????????????????????????????????
   levels_patents.html ? ???????
   ??????????????????????????????????????? */

.lp-body {
  overflow: hidden;
}

.lp-site .h-track {
  width: 200vw;
}

.lp-page {
  background: #0a0a0a;
}

.lp-bg {
  position: absolute;
  inset: 0;
  background: url('../resources/img/bg/bg_levels.jpg') center top / cover no-repeat;
  z-index: 0;
  transform: translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0) scale(1.12);
  will-change: transform;
  pointer-events: none;
}

.lp-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.3) 0%, rgba(8, 8, 10, 0.15) 45%, rgba(8, 8, 10, 0.4) 100%);
}

.lp-scroll {
  position: relative;
  z-index: 1;
  scroll-snap-type: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.lp-inner {
  max-width: 55rem;
  margin: 0 auto;
  padding: 9.5rem 2rem 6rem;
  color: #fff;
}

.lp-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.lp-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.lp-title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.lp-intro {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(1rem * var(--en-type-scale));
  line-height: 1.65;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-transform: uppercase;
}

.lp-levels {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.lp-level-row {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.lp-level-logo {
  flex: 0 0 200px;
  max-width: 200px;
}

.lp-level-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.lp-level-body {
  flex: 1;
  min-width: 0;
}

.lp-level-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.lp-level-desc {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(1rem * var(--en-type-scale));
  line-height: 1.65;
  letter-spacing: 0.15em;
  margin: 0 0 0.75rem;
  text-align: justify;
}

.lp-level-points {
  font-family: 'Noto Sans HK', sans-serif;
  margin: 0;
  padding-left: 1.25rem;
  font-size: calc(0.875rem * var(--en-type-scale));
  line-height: 1.65;
  letter-spacing: 0.15em;
  text-align: justify;
  font-weight: 300;
}

.lp-level-points li + li {
  margin-top: 0.15rem;
}
.lp-view-products {
  display: block;
  margin-top: 16px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(13px * var(--en-type-scale));
  font-weight: 500;
  color: #cc132c;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-align: center;
  transition: opacity 0.18s;
}
.lp-view-products:hover { opacity: 0.7; }

.lp-inner--patents {
  max-width: 56rem;
}

/* ?? Patent 3?3 icon grid ?? */
.lp-tec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
  max-width: 52rem;
  margin: 0 auto;
}

.lp-tec-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.lp-tec-card:hover {
  transform: translateY(-4px);
  opacity: 0.92;
}

.lp-tec-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.lp-tec-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 190px;
  height: 110px;
}

.lp-tec-card__icon {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.lp-tec-card__logo {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
  pointer-events: none;
}

/* ?? Patent popup modal ?? */
.lp-tec-modal {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lp-tec-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lp-tec-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.lp-tec-modal__dialog {
  position: relative;
  width: 600px;
  max-width: calc(100vw - 2.5rem);
  height: 600px;
  max-height: min(600px, calc(100vh - 2.5rem));
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.lp-tec-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: #1e1e1e;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.lp-tec-modal__close:hover {
  opacity: 0.6;
}

.lp-tec-modal__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
}

.lp-tec-modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 98px 1.375rem 1.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.lp-tec-modal__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.lp-tec-modal__brand-img {
  display: block;
  width: 198px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.lp-tec-modal__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #cc132c;
  text-align: center;
  margin: 0 0 0.75rem;
  flex-shrink: 0;
}

.lp-tec-modal__body {
  width: 100%;
  max-width: 325px;
  flex: 1;
  min-height: 0;
}

.lp-tec-modal__body p {
  font-size: calc(14px * var(--en-type-scale));
  line-height: 22px;
  letter-spacing: 0.15em;
  color: #1e1e1e;
  text-align: justify;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.lp-tec-modal__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .lp-inner {
    padding: calc(var(--site-header-h, 6.5rem) + 24px) 1.25rem 3rem;
  }

  .lp-inner--patents {
    padding-bottom: 5.5rem;
  }

  .lp-header { margin-bottom: 1rem; }
  .lp-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
  }
  .lp-title-en { margin: 2px 0 0.75rem; }
  .lp-intro { font-size: calc(0.8rem * var(--en-type-scale)); }

  .lp-levels { gap: 0.9rem; }

  .lp-level-row {
    flex-direction: row;
    gap: 0.8rem;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 0.8rem;
    position: relative;
  }
  .lp-level-row::after {
    content: '▾';
    position: absolute;
    top: 0.2rem;
    right: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    transition: transform 0.25s;
  }
  .lp-level-row.is-expanded::after {
    transform: rotate(180deg);
    color: rgba(255,255,255,0.8);
  }

  .lp-level-logo {
    flex: 0 0 72px;
    max-width: 72px;
  }

  .lp-level-title { font-size: 0.8rem; margin-bottom: 0.15rem; }

  .lp-level-desc {
    font-size: calc(0.75rem * var(--en-type-scale));
    line-height: 1.45;
    letter-spacing: 0.06em;
    margin-bottom: 0;
  }

  /* Points: accordion with smooth transition */
  .lp-level-body {
    overflow: hidden;
  }
  .lp-level-points {
    display: block;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
  }
  .lp-level-row.is-expanded .lp-level-points {
    max-height: 300px;
    opacity: 1;
    margin-top: 0.35rem;
  }

  .lp-level-desc,
  .lp-level-points {
    text-align: left;
  }
  .lp-level-points {
    padding-left: 0;
    list-style: none;
  }
  .lp-level-points li::before {
    content: counter(lp-li) '. ';
    counter-increment: lp-li;
  }
  .lp-level-points {
    counter-reset: lp-li;
  }

  .lp-tec-grid {
    gap: 2rem 1.25rem;
  }

  .lp-tec-card__icon-wrap {
    max-width: 150px;
    height: 90px;
  }

  .lp-tec-card__icon {
    max-height: 90px;
  }

  .lp-tec-card__logo {
    max-width: 140px;
    max-height: 36px;
  }

  .lp-tec-modal__content {
    padding: 2.5rem 1.25rem 1.5rem;
  }

  .lp-tec-modal__brand-img {
    width: 160px;
  }

  .lp-tec-modal__brand {
    margin-bottom: 0.875rem;
  }

  .lp-tec-modal__title {
    font-size: 1.5rem;
    margin-bottom: 0.625rem;
  }

  .lp-tec-modal__body p {
    font-size: calc(0.875rem * var(--en-type-scale));
    line-height: 1.65;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 600px) {
  .lp-title {
    letter-spacing: 0.1em;
  }

  .lp-intro {
    font-size: calc(0.8rem * var(--en-type-scale));
    letter-spacing: 0.1em;
  }

  .lp-tec-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0.75rem;
  }

  .lp-tec-card__icon-wrap {
    max-width: 120px;
    height: 72px;
  }

  .lp-tec-card__icon {
    max-height: 72px;
  }

  .lp-tec-card__logo {
    max-width: 110px;
    max-height: 28px;
  }

  .lp-tec-modal {
    padding: 0.75rem;
    align-items: center;
  }

  .lp-tec-modal__dialog {
    width: min(calc(100vw - 1.5rem), calc(100vh - 1.5rem), 400px);
    height: min(calc(100vw - 1.5rem), calc(100vh - 1.5rem), 400px);
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    aspect-ratio: 1 / 1;
  }

  .lp-tec-modal__content {
    padding: 1.75rem 1rem 1.25rem;
    height: 100%;
    max-height: none;
    overflow-y: auto;
  }

  .lp-tec-modal__brand {
    margin-bottom: 0.625rem;
  }

  .lp-tec-modal__brand-img {
    width: 132px;
  }

  .lp-tec-modal__title {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
  }

  .lp-tec-modal__body {
    max-width: 100%;
  }

  .lp-tec-modal__body p {
    font-size: calc(13px * var(--en-type-scale));
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 380px) {
  .lp-tec-grid {
    gap: 1.25rem 0.5rem;
  }

  .lp-tec-card__icon-wrap {
    max-width: 100px;
    height: 60px;
  }

  .lp-tec-card__icon {
    max-height: 60px;
  }
}

/* ???????????????????????????????????????
   athlete_list.html ? ?????
   ??????????????????????????????????????? */

.al-body {
  overflow: hidden;
  background: #000;
}

.al-site .h-track {
  position: relative;
  z-index: 1;
  width: 100vw; /* JS ?????? */
}

.al-page {
  background: transparent;
}

/* ?????? track ??????? */
.al-bg--shared {
  z-index: 0;
}

/* ?? header??????????? grid */
.al-shared-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.al-shared-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 9rem 1.5rem 0;
  color: #fff;
}

.al-bg {
  position: absolute;
  inset: 0;
  background:
    /* linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.55) 100%), */
    url('../resources/img/athletes/athlete_list_bg.jpg') center / cover no-repeat;
  z-index: 0;
  transform: translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0) scale(1.12);
  will-change: transform;
  pointer-events: none;
}

.al-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000 0%, transparent 28%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events: none;
}

.al-scroll {
  position: relative;
  z-index: 1;
  scroll-snap-type: none;
}

.al-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 9rem 1.5rem 5rem;
  color: #fff;
}

/* ???? header?????????????? .al-shared-header */
.al-header-spacer {
  visibility: hidden;
  pointer-events: none;
}

.al-header {
  text-align: center;
  margin-bottom: 2rem;
}

.al-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.1;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.al-title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.al-intro {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto;
  max-width: 28.5rem;
}

/* Figma：2 欄，一頁最多 6 個（3 行） */
.al-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 31.25rem));
  gap: 1.25rem 0;
  justify-content: center;
}

.al-card {
  display: flex;
  align-items: stretch;
  height: 12.5rem;
  color: inherit;
  overflow: hidden;
  background: #232020;
}

.al-card--link {
  cursor: pointer;
}

.al-card--link:focus-visible {
  outline: 2px solid #e60000;
  outline-offset: 2px;
}

.al-card__photo {
  width: 12.5rem;
  flex-shrink: 0;
  overflow: hidden;
  background: #111;
}

.al-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  user-select: none;
}

/* hover ????????? + ??? */
.al-card:hover .al-card__photo img {
  transform: scale(1.08) translateX(-6px);
}

.al-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.15rem 0.85rem;
  background: #232020;
  position: relative;
}

.al-card__name {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.25s ease;
}

.al-card__selectable {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.al-card__sep {
  font-weight: 700;
  opacity: 0.9;
}

.al-card__tags {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #cc132c;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 0.25s ease, filter 0.25s ease;
}

.al-card__bio {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

/* hover ?????????????? */
.al-card:hover .al-card__name {
  color: #fff;
}

.al-card:hover .al-card__tags {
  color: #e81835;
  filter: brightness(1.15);
}

.al-card:hover .al-card__bio {
  color: rgba(255, 255, 255, 0.95);
}

.al-card:hover .al-card__motto-label {
  color: #ff1a1a;
  filter: brightness(1.1);
}

.al-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0.45rem;
  gap: 0.5rem;
  padding-right: 2rem; /* ?????? arrow */
}

/* ?? Preview card??? layout?????? social ?? */
.al-card--v2 {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.al-card--v2 .al-card__info {
  background: #1a1a1a;
  padding: 1.1rem 1.35rem 0.95rem;
}

.al-card--v2 .al-card__name {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #fff;
  margin-bottom: 0.35rem;
}

.al-card--v2 .al-card__tags {
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 700;
  color: #e60000;
  margin-bottom: 0.55rem;
}

.al-card--v2 .al-card__bio {
  font-size: 0.8125rem; /* ????? */
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.95);
  -webkit-line-clamp: 3;
  line-height: 1.55;
}

.al-card--v2 .al-card__footer {
  margin-top: 0.65rem;
  padding-right: 2.25rem;
}

.al-card__motto {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.875rem; /* ????????? */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

.al-card__motto-label {
  color: #e60000;
  font-weight: 700;
  transition: color 0.25s ease, filter 0.25s ease;
}

.al-card__motto-text {
  display: block;
  margin-top: 0.15rem;
}

.al-card--v2:hover .al-card__motto {
  color: #fff;
}

.al-card--v2:hover .al-card__tags {
  color: #ff1a1a;
  filter: none;
}

.al-card--v2:hover .al-card__motto-label {
  color: #ff1a1a;
  filter: none;
}

.al-card__social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.al-card__social-link {
  position: relative;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
  transition: transform 0.22s ease;
}

/* ???hover ?????? */
.al-card__social-link::before {
  content: '';
  position: absolute;
  inset: 6%;
  background: #fff;
  border-radius: 14%;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 0;
}

/* ???? SVG ? mask */
.al-card__social-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 1;
  transition: background-color 0.22s ease;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.al-card__social-link--fb::after {
  -webkit-mask-image: url('../resources/img/athletes/icon-fb.svg');
  mask-image: url('../resources/img/athletes/icon-fb.svg');
}

.al-card__social-link--ig::after {
  -webkit-mask-image: url('../resources/img/athletes/icon-ig.svg');
  mask-image: url('../resources/img/athletes/icon-ig.svg');
}

/* hover?SVG ?????????????? */
.al-card__social-link:hover,
.al-card__social-link:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.al-card__social-link:hover::before,
.al-card__social-link:focus-visible::before {
  opacity: 1;
}

.al-card__social-link:hover::after,
.al-card__social-link:focus-visible::after {
  background: #cc132c;
}

/* ?????? info box ????hover ??????? */
.al-card__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.875rem;
  height: 1.875rem;
  display: block;
  line-height: 0;
  z-index: 2;
  transform-origin: bottom right;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; /* click ???? card */
}

.al-card:hover .al-card__arrow,
.al-card--link:focus-visible .al-card__arrow {
  transform: scale(1.35);
}

.al-card__arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

/* athlete_list.html — 入 athlete 詳情頁過場 */
.al-site {
  transform-origin: center center;
}

.al-site.is-exiting {
  animation: al-slide-out-right 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

body.al-transitioning {
  overflow: hidden;
}

@keyframes al-slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0.72;
    transform: translateX(100%) scale(0.985);
  }
}

/* ?? Responsive ?? */
@media (max-width: 1100px) {
  .al-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    gap: 1rem;
  }

  .al-card {
    height: 11.5rem;
  }

  .al-card__photo {
    width: 40%;
    max-width: 11.5rem;
  }

  .al-card__info {
    padding: 0.85rem 0.9rem 0.7rem;
  }
}

@media (max-width: 720px) {
  .al-inner,
  .al-shared-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .al-inner {
    padding-top: calc(var(--site-header-h, 6.5rem) + 24px);
    padding-bottom: 4.5rem;
  }

  .al-shared-inner {
    padding-top: calc(var(--site-header-h, 6.5rem) + 24px);
  }

  .al-header {
    margin-bottom: 1rem;
  }

  .al-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
  }

  .al-title-en {
    margin: 2px 0 0.75rem;
  }

  .al-intro {
    font-size: 0.8rem;
  }

  .al-grid {
    grid-template-columns: 1fr;
    max-width: 26rem;
    gap: 0.85rem;
  }

  .al-card {
    height: 10.5rem;
  }

  .al-card__photo {
    width: 38%;
    max-width: 10.5rem;
  }

  .al-card__name {
    font-size: 0.85rem;
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .al-card--v2 .al-card__name {
    font-size: 0.85rem;
  }

  .al-card__bio {
    -webkit-line-clamp: 2;
    font-size: 0.65rem;
  }

  .al-card--v2 .al-card__bio {
    font-size: 0.7rem;
  }

  .al-card__info {
    padding: 0.7rem 0.75rem 0.55rem;
  }

  .al-card--v2 .al-card__info {
    padding: 0.75rem 0.85rem 0.6rem;
  }

  .al-card__motto {
    font-size: 0.75rem; /* ??????? */
  }
}

/* ?? Mobile stack??? scroll?navbar ????? ?? */
@media (max-width: 720px) {
  html.al-stack,
  html.al-stack body.al-body,
  body.al-body.al-stack {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* navbar hold ??????????? */
  body.al-stack .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  body.al-stack .al-site {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  body.al-stack .h-track {
    display: block;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  body.al-stack .h-page {
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  body.al-stack .page-scroll,
  body.al-stack .al-scroll {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    scroll-snap-type: none !important;
  }

  body.al-stack .al-inner {
    padding-top: calc(var(--site-header-h, 6.5rem) + 24px);
    padding-bottom: 2rem;
    position: relative;
    z-index: 1;
  }

  /* fixed 背景：mobile 唔做 parallax，靜態即可 */
  body.al-stack .al-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    z-index: 0;
    transform: none;
    will-change: auto;
  }

  body.al-stack .h-nav,
  body.al-stack .page-counter,
  body.al-stack .h-arrow {
    display: none !important;
  }

  /* ?????????? = ??? */
  body.al-stack .al-end-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.75rem 0 2.25rem;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
  }

  body.al-stack .al-end-hint__tri {
    width: 1rem;
    height: 0.875rem;
    display: block;
  }
}

.al-end-hint {
  display: none;
}

.page-counter.is-hidden {
  display: none !important;
}

@media (max-width: 420px) {
  .al-card {
    height: auto;
    min-height: 9.5rem;
  }

  .al-card__photo {
    width: 36%;
  }

  .al-card__tags {
    font-size: 0.62rem;
  }
}

/* ???????????????????????????????????????
   athlete_chanpuikeii.html ? ??????
   ??????????????????????????????????????? */

html.acpk-html,
body.acpk-html {
  overflow: auto;
  height: auto;
  min-height: 100%;
  background: #fff;
}

.acpk-page {
  min-height: 100vh;
  padding: 8.5rem 1.25rem 0;
  background: #fff;
}

.acpk-article {
  max-width: 50rem;
  margin: 0 auto;
  color: #000;
  font-family: 'Noto Sans HK', sans-serif;
}

.acpk-header {
  margin-bottom: 1.75rem;
  margin-top: 1.75rem;
}

.acpk-date {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.acpk-title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.15;
  text-transform: uppercase;
}

.acpk-section {
  margin-bottom: 0.25rem;
}

.acpk-figure {
  margin: 0 0 0.9rem;
  width: 100%;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 800 / 600;
}

.acpk-figure--short {
  aspect-ratio: 800 / 400;
}

.acpk-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.acpk-caption,
.acpk-body {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.acpk-heading {
  margin: 0 0 0.85rem;
  color: #cc132c;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
}

.acpk-heading--left {
  text-align: left;
}

/* ???????????list ?? ~400px + bullet?? Figma? */
.acpk-list {
  list-style-type: disc;
  list-style-position: outside;
  margin: 0 0 1.75rem;
  padding-left: 1.5rem;
  max-width: 25rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.75;
  text-transform: uppercase;
  color: #000;
}

.acpk-list li {
  padding-left: 0.25rem;
}

.acpk-list li::marker {
  color: #000;
}

.acpk-list li + li {
  margin-top: 0.35rem;
}

.acpk-body--goal {
  margin-bottom: 1.75rem;
  font-size: 1rem;
  letter-spacing: 0.15em;
  line-height: 1.55;
  text-transform: uppercase;
}

.acpk-body--goal p {
  margin: 0;
}

.acpk-rule {
  border: 0;
  border-top: 1px solid #000;
  margin: 0 0 2.5rem;
  opacity: 0.85;
}

.acpk-motto-label {
  color: #e60000;
  font-weight: 700;
}

.acpk-products {
  margin-bottom: 2.5rem;
}

.acpk-product {
  margin-bottom: 0.85rem;
}

.acpk-product__sku {
  display: inline-block;
  margin: 0 0 0.15rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
}

.acpk-product__sku:hover {
  color: #cc132c;
}

.acpk-product__desc {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.35;
  text-transform: uppercase;
  max-width: 36rem;
}

/* ?? Profile summary?Figma ????? ?? */
.acpk-profile {
  display: grid;
  grid-template-columns: 18.75rem 1fr;
  gap: 1.25rem 1.5rem;
  margin: 0 0 2.5rem;
  align-items: start;
}

.acpk-profile__media {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.acpk-profile__photo {
  margin: 0;
  width: 18.75rem;
  height: 18.75rem;
  overflow: hidden;
  background: #f0f0f0;
}

.acpk-profile__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.acpk-profile__social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.acpk-profile__social[hidden] {
  display: none !important;
}

.acpk-profile__social-link {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.acpk-profile__social-link img {
  width: 100%;
  height: 100%;
  display: block;
}

.acpk-profile__social-link:hover {
  opacity: 0.7;
  transform: translateY(-1px);
}

.acpk-profile__info {
  min-width: 0;
  padding-top: 0.1rem;
}

.acpk-profile__name {
  margin: 0 0 0.85rem;
  color: #cc132c;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.acpk-profile__titles {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.55;
  text-transform: uppercase;
  color: #000;
}

.acpk-profile__titles li + li {
  margin-top: 0.1rem;
}

.acpk-profile__heading {
  margin: 0 0 0.55rem;
  color: #cc132c;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.acpk-profile__block {
  margin: 0 0 1.35rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.55;
  text-transform: uppercase;
  color: #000;
}

.acpk-profile__block p {
  margin: 0 0 0.65rem;
}

.acpk-profile__block p:last-child {
  margin-bottom: 0;
}

.acpk-profile__block strong {
  font-weight: 700;
}

.acpk-profile__motto {
  margin: 0 0 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #000;
}

.acpk-profile__updated {
  margin: 0;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.45;
  text-transform: uppercase;
  color: #000;
}

.acpk-profile__updated span {
  display: block;
}

/* Back??????????????????? design? */
.acpk-back {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 7.5rem;
  height: 3.05rem;
  margin: 1.5rem auto 2.5rem;
  padding: 0 0.85rem 0 1.75rem;
  box-sizing: border-box;
  background: #d9d9d9;
  clip-path: polygon(0 50%, 14% 0, 100% 0, 100% 100%, 14% 100%);
  text-decoration: none;
  color: #000;
  line-height: 1.15;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.acpk-back:hover {
  transform: translateX(-3px);
  opacity: 0.85;
}

.acpk-back__zh {
  font-family: 'Barlow Condensed', 'Noto Sans HK', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #000;
}

.acpk-back__en {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6d6d6d;
  text-transform: uppercase;
}

/* ???????????????? Figma 633:1335? */
.acpk-related {
  padding: 28px 1.25rem 36px;
  margin-top: 0;
}

.acpk-related-inner {
  max-width: 34.5rem;
  margin: 0 auto;
}

.acpk-related .pd-related-title {
  text-align: left;
}

.acpk-related .pd-related-item {
  display: block;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .acpk-page {
    padding: 7rem 1rem 0;
  }

  .acpk-list,
  .acpk-body--goal,
  .acpk-product__sku,
  .acpk-product__desc {
    font-size: 1rem;
  }

  .acpk-profile {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .acpk-profile__photo {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
  }

  .acpk-profile__name,
  .acpk-profile__heading {
    font-size: 1.25rem;
  }

  .acpk-profile__titles,
  .acpk-profile__block,
  .acpk-profile__motto {
    font-size: 1rem;
  }

  .acpk-profile__updated {
    text-align: left;
    margin-top: 1.25rem;
  }

  .acpk-back {
    width: 6.5rem;
    height: 2.65rem;
    padding: 0 0.7rem 0 1.5rem;
  }

  .acpk-back__zh {
    font-size: 0.9rem;
  }

  .acpk-back__en {
    font-size: 0.8rem;
  }

  .acpk-related {
    padding: 20px 16px 28px;
  }

  .acpk-related .pd-related-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .acpk-related .pd-related-grid::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .acpk-caption,
  .acpk-body {
    letter-spacing: 0.08em;
  }

  .acpk-list,
  .acpk-body--goal,
  .acpk-product__desc {
    letter-spacing: 0.08em;
  }
}

/* ???????????????????????????????????????
   tc.html ? ?????
   ??????????????????????????????????????? */
html.page-tc,
html.page-tc body {
  height: auto;
  min-height: 100%;
  overflow: auto;
}

html.page-tc body {
  background: #fff;
  color: #111;
}

.tc-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 180px 2rem 5rem;
}

.tc-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.tc-title-zh {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: #111;
}

.tc-title-en {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #444;
}

.tc-section {
  margin-bottom: 2rem;
}

.tc-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  color: #111;
}

.tc-content p {
  font-size: 0.9rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #222;
  margin-bottom: 0.65rem;
}

.tc-content a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tc-content a:hover {
  opacity: 0.65;
}

@media (max-width: 768px) {
  .tc-page {
    padding: 128px 1.25rem 3.5rem;
  }

  .tc-title-zh {
    font-size: 1.4rem;
  }

  .tc-title-en {
    font-size: 0.85rem;
  }

  .tc-content p {
    font-size: 0.85rem;
  }
}

/* ???????????????????????????????????????
   warranty.html ? ????????????
   ??????????????????????????????????????? */
.warranty-subheading {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 1.25rem 0 0.65rem;
  color: #111;
}

.warranty-list {
  font-size: 0.9rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #222;
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.warranty-list li {
  margin-bottom: 0.45rem;
}

.warranty-list--nested {
  list-style: disc;
  margin-top: 0.5rem;
}

.warranty-note {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #555;
}

.warranty-emphasis {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #222;
}

.warranty-en {
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
}

.warranty-contact {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.warranty-source {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #888;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .warranty-list,
  .warranty-emphasis {
    font-size: 0.85rem;
  }
}

/* ???????????????????????????????????????
   shopping-guide.html ? ????
   ??????????????????????????????????????? */
.guide-step {
  margin-bottom: 1.25rem;
  padding-left: 0.85rem;
  border-left: 3px solid #cc132c;
}

.guide-step__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
  color: #111;
}

.guide-step p {
  margin-bottom: 0;
}

.guide-page code {
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  background: #f4f4f4;
  border-radius: 3px;
}

/* ???????????????????????????????????????
   size-guide.html ? ????
   ??????????????????????????????????????? */
.sg-page {
  max-width: 960px;
}

.sg-intro {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.9rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #4d4d4f;
  margin: 0 0 2rem;
}

.sg-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
}

.sg-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sg-group {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 1.25rem;
  align-items: stretch;
}

.sg-ribbon {
  background: #7e7e7e;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.sg-ribbon span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(0.95rem * var(--en-type-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  padding: 0.75rem 0;
  line-height: 1.2;
}

.sg-group__items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sg-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  align-items: start;
}

.sg-item__img-wrap {
  width: 100px;
  height: 100px;
  border: 1px solid #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
}

.sg-item__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sg-item__title {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(1rem * var(--en-type-scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1e1e1e;
  margin: 0 0 0.35rem;
  line-height: 1.4;
}

.sg-item__desc {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: calc(0.9rem * var(--en-type-scale));
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: #4d4d4f;
  margin: 0;
}

.sg-end-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0 0.5rem;
  color: rgba(30, 30, 30, 0.4);
  pointer-events: none;
}

.sg-end-hint__tri {
  width: 1rem;
  height: 0.875rem;
  display: block;
}

@media (max-width: 768px) {
  .sg-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sg-item {
    grid-template-columns: 80px 1fr;
    gap: 0.75rem;
  }

  .sg-item__img-wrap {
    width: 80px;
    height: 80px;
  }

  .sg-item__title {
    font-size: calc(0.95rem * var(--en-type-scale));
  }

  .sg-item__desc {
    font-size: calc(0.85rem * var(--en-type-scale));
  }
}

/* ???????????????????????????????????????
   faq.html ? ??????
   ??????????????????????????????????????? */
.faq-accordion {
  display: flex;
  flex-direction: column;
  /* ??? border-top?.tc-header ?? border-bottom????? */
}

.faq-page .tc-header {
  margin-bottom: 0;
}

.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.faq-summary__zh {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #111;
}

.faq-summary__en {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
}

.faq-summary__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #111;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-summary__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.faq-item.is-open .faq-summary__icon {
  transform: rotate(180deg);
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}
.faq-panel-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-panel-inner {
  padding: 0 0 1.5rem;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s,
    padding 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .faq-panel,
  .faq-panel-inner,
  .faq-summary__icon { transition: none !important; }
}

.faq-panel p,
.faq-steps,
.faq-note {
  font-size: 0.9rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #222;
}

.faq-panel p {
  margin-bottom: 0.65rem;
}

.faq-panel a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-panel a:hover {
  opacity: 0.65;
}

.faq-steps {
  margin: 0 0 1rem;
  padding-left: 1.45rem;
}

.faq-steps li {
  margin-bottom: 0.85rem;
}

.faq-steps li strong {
  display: block;
  margin-bottom: 0.15rem;
  color: #111;
  font-weight: 700;
}

.faq-note {
  opacity: 0.7;
  font-size: 0.82rem;
}

.faq-qa {
  margin-bottom: 1.25rem;
}

.faq-qa:last-child {
  margin-bottom: 0;
}

.faq-q {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #111;
  margin-bottom: 0.35rem;
}

@media (max-width: 768px) {
  .faq-summary {
    padding: 1.1rem 0;
  }

  .faq-summary__zh {
    font-size: 0.95rem;
  }

  .faq-summary__en {
    font-size: 0.72rem;
  }

  .faq-panel p,
  .faq-steps {
    font-size: 0.85rem;
  }
}

/* ???????????????????????????????????????
   404.html ? Page Not Found
   ??????????????????????????????????????? */
html.page-404,
html.page-404 body {
  height: auto;
  min-height: 100%;
  overflow: auto;
}

html.page-404 body {
  background: #fff;
  color: #111;
}

.nf-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 1.5rem 5rem;
}

.nf-graphic {
  width: min(520px, 88vw);
  height: auto;
  display: block;
  margin-bottom: 2rem;
}

.nf-msg-zh {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #1e1e1e;
  margin-bottom: 0.4rem;
}

.nf-msg-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 2rem;
}

.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.nf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 0.85rem 1.5rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nf-btn--primary {
  background: #cc132c;
  color: #fff;
  border: 1px solid #cc132c;
}

.nf-btn--primary:hover {
  background: #a50f24;
  border-color: #a50f24;
}

.nf-btn--ghost {
  background: transparent;
  color: #1e1e1e;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.nf-btn--ghost:hover {
  border-color: #1e1e1e;
}

@media (max-width: 768px) {
  .nf-page {
    padding: 110px 1.25rem 3.5rem;
  }

  .nf-graphic {
    width: min(360px, 92vw);
    margin-bottom: 1.5rem;
  }

  .nf-msg-zh {
    font-size: 0.9rem;
  }

  .nf-msg-en {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }

  .nf-btn {
    min-width: 120px;
    padding: 0.75rem 1.25rem;
    font-size: 0.8rem;
  }
}


/* ??????????????????????????????????????????????????????????????????????????????
   checkout.html ?X ???b??
   ?????????????????????????????????????????????????????????????????????????????? */

html.page-checkout,
html.page-checkout body {
  overflow: auto;
  height: auto;
  min-height: 100%;
  background: #f5f5f5;
}

.co-page {
  min-height: 100vh;
  padding: 140px 20px calc(80px + env(safe-area-inset-bottom, 0px));
  max-width: 1100px;
  margin: 0 auto;
}

.co-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ?? ?? / ?? ?? ?? */
.co-mode {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 0;
  overflow: hidden;
}

.co-mode__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #ebebeb;
}

.co-mode__tab {
  appearance: none;
  border: none;
  background: #f7f7f7;
  padding: 0.95rem 1rem;
  cursor: pointer;
  font-family: 'Noto Sans HK', sans-serif;
  color: #6d6d6d;
  transition: background 0.2s, color 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.co-mode__tab:hover {
  color: #1e1e1e;
  background: #f0f0f0;
}

.co-mode__tab.is-active {
  background: #fff;
  color: #1e1e1e;
  border-bottom-color: #cc132c;
}

.co-mode__tab-zh {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.co-mode__tab-en {
  display: block;
  margin-top: 0.15rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #9a9a9a;
}

.co-mode__tab.is-active .co-mode__tab-en {
  color: #cc132c;
}

.co-mode__panel {
  padding: 1.1rem 1.35rem 1.25rem;
}

/* 會員 panel：未登入左右分欄；已登入兩行置左、成組置中 */
#co-mode-member-panel {
  display: flex;
  justify-content: center;
}

#co-member-logged-in {
  display: flex;
  justify-content: center;
  width: 100%;
}

#co-member-logged-in[hidden] {
  display: none !important;
}

.co-mode__logged-in-group {
  width: max-content;
  max-width: 100%;
  text-align: left;
}

#co-member-logged-out {
  width: 100%;
}

.co-mode__member-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  align-items: center;
}

.co-mode__perks {
  width: 100%;
  max-width: 320px;
  justify-self: center;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
}

.co-mode__perks-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #1e1e1e;
  line-height: 1.25;
}

.co-mode__perks-label {
  margin: 0.3rem 0 1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #cc132c;
}

.co-mode__perks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.co-mode__perks-list li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #2a2a2a;
  line-height: 1.4;
}

.co-mode__perks-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #cc132c;
  border-radius: 1px;
  flex-shrink: 0;
}

.co-mode__member-cta {
  width: 100%;
  max-width: 320px;
  justify-self: center;
  box-sizing: border-box;
}

#co-mode-member-panel .co-mode__actions {
  max-width: none;
}

@media (max-width: 640px) {
  .co-mode__member-split {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .co-mode__member-cta {
    max-width: none;
    justify-self: stretch;
  }
}

.co-mode__text {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: #4d4d4f;
  letter-spacing: 0.04em;
  line-height: 1.55;
}

.co-mode__member {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #1e1e1e;
  padding: 0.65rem 0.85rem;
  background: #f7f7f7;
  border-left: 3px solid #cc132c;
}

.co-mode__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin: 0.85rem 0 0.75rem;
  max-width: 320px;
}

.co-mode__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 1.15rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.co-mode__btn--primary {
  background: #cc132c;
  color: #fff;
  border-color: #cc132c;
}

.co-mode__btn--primary:hover {
  background: #a80f24;
  border-color: #a80f24;
}

.co-mode__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.1rem 0;
}

.co-mode__divider::before,
.co-mode__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}

.co-mode__divider span {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8a8a8a;
  letter-spacing: 0.08em;
}

.co-mode__btn--google {
  gap: 0.55rem;
  background: #fff;
  color: #3c4043;
  border-color: #dadce0;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.co-mode__btn--google:hover {
  background: #f8f8f8;
  border-color: #c6c6c6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.co-mode__btn--google svg {
  flex-shrink: 0;
}

.co-mode__btn--ghost {
  background: #fff;
  color: #1e1e1e;
  border-color: #c8c8c8;
}

.co-mode__btn--ghost:hover {
  border-color: #1e1e1e;
}

.co-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #4d4d4f;
  letter-spacing: 0.04em;
  cursor: pointer;
  line-height: 1.45;
}

.co-check input {
  margin-top: 0.15rem;
  accent-color: #cc132c;
  flex-shrink: 0;
}

#checkout-form.is-locked {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.co-title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.15em;
  color: #1e1e1e;
  margin: 0 0 4px;
}

.co-title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #6d6d6d;
  margin: 0;
  text-transform: uppercase;
}

.co-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 1.25rem;
  align-items: start;
}

.co-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.co-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 1.35rem 1.4rem 1.5rem;
}

.co-card__title {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1e1e1e;
  margin: 0 0 1rem;
}

.co-card__title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: #9a9a9a;
  margin-left: 0.45rem;
}

.co-hint {
  font-size: 0.8rem;
  color: #6d6d6d;
  letter-spacing: 0.04em;
  margin: 0 0 0.85rem;
}

.co-pay-privacy {
  margin: 1.05rem 0 0;
  padding: 0.85rem 1rem;
  background: #f6f6f6;
  border-left: 3px solid #1e1e1e;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #4a4a4a;
  letter-spacing: 0.03em;
}
.co-pay-privacy strong {
  display: block;
  color: #1e1e1e;
  font-weight: 700;
  margin-bottom: 0.35rem;
  letter-spacing: 0.08em;
}
.co-pay-privacy em {
  font-style: normal;
  font-weight: 700;
  color: #1e1e1e;
}
.co-pay-privacy a {
  color: #cc132c;
  text-decoration: none;
}
.co-pay-privacy a:hover {
  text-decoration: underline;
}

.co-pay-manual {
  margin: 0 0 1.05rem;
  padding: 0.85rem 1rem;
  background: #f6f6f6;
  border-left: 3px solid #cc132c;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #4a4a4a;
  letter-spacing: 0.03em;
}
.co-pay-manual > strong {
  display: block;
  color: #1e1e1e;
  font-weight: 700;
  margin-bottom: 0.4rem;
  letter-spacing: 0.08em;
}
.co-pay-manual p {
  margin: 0 0 0.55rem;
}
.co-pay-manual p:last-child {
  margin-bottom: 0;
}
.co-pay-manual a {
  color: #cc132c;
  text-decoration: none;
}
.co-pay-manual a:hover {
  text-decoration: underline;
}
.co-pay-manual__dl {
  margin: 0 0 0.55rem;
  display: grid;
  gap: 0.35rem 1rem;
}
.co-pay-manual__dl > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.35rem;
}
.co-pay-manual__dl dt {
  margin: 0;
  color: #6d6d6d;
}
.co-pay-manual__dl dd {
  margin: 0;
  color: #1e1e1e;
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.co-pay-manual__mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.15rem;
  margin: 0.15rem 0 0.55rem;
  background: #cc132c;
  color: #fff !important;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  border-radius: 2px;
}
.co-pay-manual__mail:hover {
  background: #a80f26;
  color: #fff !important;
  text-decoration: none !important;
}
.co-pay-manual__mail-hint {
  font-size: 0.72rem;
  color: #6d6d6d;
}
.co-submit-legal {
  font-size: 0.72rem;
  color: #888;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  letter-spacing: 0.03em;
}

.co-grid {
  display: grid;
  gap: 0.85rem 1rem;
}

.co-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.co-field--full {
  grid-column: 1 / -1;
}

.co-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.co-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #4d4d4f;
}

.co-label__opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #8a8a8a;
}

.co-req {
  color: #cc132c;
  margin-right: 0.15rem;
}

.co-input,
.co-select,
.co-textarea {
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  background: #fff;
  padding: 0.7rem 0.85rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.9rem;
  color: #1e1e1e;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.co-input:focus,
.co-select:focus,
.co-textarea:focus {
  outline: none;
  border-color: #1e1e1e;
}

.co-input.is-error,
.co-select.is-error,
.co-textarea.is-error {
  border-color: #c8102e;
  background: rgba(200, 16, 46, 0.06);
}

.co-field__error {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #cc132c;
}

.co-field__error[hidden] {
  display: none;
}

.co-shake {
  animation: cart-promo-shake 0.45s ease;
}

.co-quiz__q.is-error .co-quiz__q-text {
  color: #cc132c;
}

.co-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d6d6d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.co-textarea {
  resize: vertical;
  min-height: 5rem;
  line-height: 1.5;
}

.co-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.co-option[hidden],
.co-options[hidden] {
  display: none;
}

.co-pay-none {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  background: #f6f6f6;
  color: #1e1e1e;
  font-size: 0.88rem;
  line-height: 1.55;
}

.co-pay-none a {
  color: #cc132c;
}

.co-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.co-option:has(input:checked) {
  border-color: #cc132c;
  background: #fff8f9;
}

.co-option input {
  accent-color: #cc132c;
  flex-shrink: 0;
}

.co-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.co-option__name {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1e1e1e;
}

.co-option__desc {
  font-size: 0.75rem;
  color: #6d6d6d;
  letter-spacing: 0.04em;
}

.co-option__paypal-logo { flex-shrink: 0; margin-left: auto; }

.co-option__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e1e1e;
  flex-shrink: 0;
}

.co-addr-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.co-addr-option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
}

.co-addr-option:has(input:checked) {
  border-color: #cc132c;
  background: #fff8f9;
}

.co-addr-option input {
  margin-top: 0.2rem;
  accent-color: #cc132c;
}

.co-addr-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: #4d4d4f;
}

.co-addr-option__body strong {
  color: #1e1e1e;
  font-size: 0.85rem;
}

.co-summary {
  position: sticky;
  top: 7.5rem;
}

.co-summary__inner {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 1.35rem 1.25rem 1.5rem;
}

.co-summary__title {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
  color: #1e1e1e;
}

.co-summary__title span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #9a9a9a;
  margin-left: 0.35rem;
}

.co-summary__items {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.co-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.75rem;
  align-items: start;
}

.co-line__img {
  width: 64px;
  height: 64px;
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  overflow: hidden;
}

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

.co-line__name {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1e1e1e;
  line-height: 1.3;
}

.co-line__meta,
.co-line__qty {
  margin: 0;
  font-size: 0.84rem;
  color: #6d6d6d;
  letter-spacing: 0.04em;
}

.co-line__price {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e1e1e;
}

.co-promo {
  margin-bottom: 1rem;
}

.co-promo .co-input {
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.co-promo .co-input.is-error {
  border-color: #c8102e;
  background: rgba(200, 16, 46, 0.06);
  box-shadow: 0 0 0 1px #c8102e;
  animation: cart-promo-shake 0.4s ease;
}

.co-promo .co-input.is-success {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.06);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.45);
}

.co-promo__error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.55rem 0 0;
  padding: 0.6rem 0.75rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: #c8102e;
  border-radius: 2px;
}

.co-promo__error[hidden] {
  display: none;
}

.co-promo__error-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.co-promo__success {
  margin: 0.55rem 0 0;
  padding: 0.6rem 0.75rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #15803d;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 2px;
}

.co-promo__success[hidden] {
  display: none;
}

.co-totals {
  margin: 0 0 0.75rem;
}

.co-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: #4d4d4f;
  margin-bottom: 0.45rem;
}

.co-totals__row dt,
.co-totals__row dd {
  margin: 0;
}

.co-totals__row dd {
  font-size: 1.12rem;
  font-weight: 700;
  color: #1e1e1e;
  letter-spacing: 0.02em;
}

.co-totals__row--total {
  margin-top: 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px solid #ebebeb;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e1e1e;
}

.co-totals__row--total dd {
  font-size: 1.35rem;
}

.co-free-ship {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: #4d4d4f;
  letter-spacing: 0.04em;
}

.co-summary__empty {
  margin: 0;
  padding: 0.35rem 0 1rem;
  color: #888;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

#cart-checkout-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.cart-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.cart-opt {
  max-width: 100%;
  height: 28px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  color: #fff;
  color-scheme: dark;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cart-opt option {
  background-color: #1e1e1e;
  color: #f5f5f5;
}
.cart-opt option:disabled {
  color: #9a9a9a;
}
html:not(.site-lang-zh) .cart-opt {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cart-opt:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
}
.cart-item-warn,
.cart-opts-hint {
  margin: 0 0 8px;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #f87171;
  letter-spacing: 0.04em;
}
.cart-opts-hint {
  margin: 8px 0 0;
  text-align: center;
}
.co-line__meta--warn {
  color: #cc132c;
  font-weight: 600;
}

.co-submit {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 2px;
  background: #cc132c;
  color: #fff;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.2s;
}

.co-submit:hover {
  background: #a80f24;
}

.co-submit:disabled {
  background: #bbb;
  cursor: not-allowed;
}

.co-submit:disabled:hover {
  background: #bbb;
}

.co-submit-error {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #cc132c;
}

.co-back {
  display: block;
  text-align: center;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #6d6d6d;
  text-decoration: none;
}

.co-back:hover {
  color: #cc132c;
}

@media (max-width: 900px) {
  .co-layout {
    grid-template-columns: 1fr;
  }

  .co-summary {
    position: static;
    order: 2; /* ??????????? */
  }

  .co-main {
    order: 1;
  }

  .co-grid--2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .co-page {
    padding: 110px 1rem calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .co-card,
  .co-summary__inner {
    padding: 1.1rem 1rem 1.25rem;
  }
}

/* ═══════════════════════════════════════
   checkout.html — 問卷折扣 popup（同優惠碼分開）
   ═══════════════════════════════════════ */
.co-quiz {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.co-quiz.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.co-quiz__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.co-quiz__dialog {
  position: relative;
  width: 440px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  background: #fff;
  padding: 0 0 1.4rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.co-quiz__banner {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  background: #0d0d0d;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.co-quiz__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  position: absolute;
  inset: 0;
}

.co-quiz__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(90deg, rgba(200, 16, 46, 0.0) 0%, transparent 62%);
  pointer-events: none;
}

.co-quiz__banner-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 1.15rem 1.5rem;
  text-align: left;
}

.co-quiz__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff4d6a;
  font-weight: 700;
}

.co-quiz__title {
  margin: 0 0 0.4rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.co-quiz__lead {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

.co-quiz__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.co-quiz__panel {
  padding: 1.15rem 1.5rem 0;
}

.co-quiz__q {
  margin: 0 0 1.05rem;
  border: 0;
  padding: 0;
  min-width: 0;
}

.co-quiz__q-text {
  margin: 0 0 0.45rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1e1e1e;
}

.co-quiz__opts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.co-quiz__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #4d4d4f;
  cursor: pointer;
}

.co-quiz__opt input {
  margin-top: 0.15rem;
  accent-color: #cc132c;
}

.co-quiz__error {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  color: #cc132c;
}

.co-quiz__submit {
  width: 100%;
  height: 46px;
  border: none;
  background: #cc132c;
  color: #fff;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.co-quiz__submit:hover {
  background: #a80f24;
}

.co-quiz__skip {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  border: none;
  background: none;
  color: #6d6d6d;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.co-quiz__skip:hover {
  color: #cc132c;
}

.co-quiz__thanks {
  margin: 2.2rem 0 0.5rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e1e1e;
}

.co-quiz__thanks-sub {
  margin: 0 0 2.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #6d6d6d;
}

.co-totals__row--quiz dd {
  color: #cc132c;
  font-weight: 700;
}

.co-quiz-open-btn {
  border: 1px solid #cc132c;
  background: #fff;
  color: #cc132c;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
}

.co-quiz-open-btn:hover {
  background: #cc132c;
  color: #fff;
}

/* ???????????????????????????????????????
   checkout-success / checkout-fail ? ???
   ??????????????????????????????????????? */
.co-result {
  min-height: 100vh;
  max-width: 560px;
  margin: 0 auto;
  padding: 140px 20px calc(80px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  box-sizing: border-box;
}

/* Desktop: center horizontally + vertically */
@media (min-width: 901px) {
  .co-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding-top: 100px;
    padding-bottom: 64px;
  }
}

.co-result__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin-bottom: 1.25rem;
  color: #1e1e1e;
}

.co-result--success .co-result__icon {
  color: #15803d;
}

.co-result--fail .co-result__icon {
  color: #cc132c;
}

.co-result__header {
  margin-bottom: 1.75rem;
}

.co-result__title {
  font-family: 'Noto Sans HK', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: 0.12em;
  color: #1e1e1e;
  margin: 0 0 6px;
}

.co-result__title-en {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #6d6d6d;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.co-result__lead {
  margin: 0 auto;
  max-width: 36em;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #4d4d4f;
  letter-spacing: 0.03em;
}

.co-result__card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 1.25rem 1.35rem;
  text-align: left;
  margin-bottom: 1.5rem;
}

.co-result__meta {
  margin: 0;
}

.co-result__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 0.85rem;
}

.co-result__row:last-child {
  border-bottom: none;
}

.co-result__row dt {
  margin: 0;
  color: #6d6d6d;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.co-result__row dd {
  margin: 0;
  color: #1e1e1e;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.co-result__row--total {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid #ebebeb;
  border-bottom: none;
  font-size: 1.05rem;
}

.co-result__row--total dt,
.co-result__row--total dd {
  color: #1e1e1e;
  font-weight: 700;
}

.co-result__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.co-result__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.co-result__btn--primary {
  background: #cc132c;
  color: #fff;
  border-color: #cc132c;
}

.co-result__btn--primary:hover {
  background: #a80f24;
  border-color: #a80f24;
}

.co-result__btn--ghost {
  background: #fff;
  color: #1e1e1e;
  border-color: #c8c8c8;
}

.co-result__btn--ghost:hover {
  border-color: #1e1e1e;
}

.co-result__hint {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  color: #6d6d6d;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.co-result__hint code,
.co-hint code {
  font-family: 'Barlow Condensed', monospace;
  font-size: 0.95em;
  letter-spacing: 0.08em;
  background: #f5f5f5;
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .co-result {
    padding: 110px 1rem calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════
   Staff admin
   ═══════════════════════════════════════ */
html:has(body.admin-app),
body.admin-app {
  overflow: auto !important;
  height: auto !important;
  min-height: 100%;
  background: #f3f3f3;
  color: #1e1e1e;
  font-family: 'Noto Sans HK', sans-serif;
}

.admin-app [hidden] {
  display: none !important;
}

.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.admin-login__card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 2.25rem 1.75rem 1.75rem;
}

.admin-login__logo {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 1.15rem;
}

.admin-login__kicker {
  margin: 0 0 0.25rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: #8a8a8a;
}

.admin-login__title {
  margin: 0 0 0.65rem;
  font-size: 1.55rem;
  font-weight: 700;
}

.admin-login__hint {
  margin: 0 0 1.15rem;
  font-size: 0.8rem;
  color: #6d6d6d;
  line-height: 1.5;
}

.admin-login__hint code {
  background: #f5f5f5;
  padding: 0.05em 0.35em;
}

.admin-login__error {
  margin: 0 0 0.75rem;
  color: #c8102e;
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-login__front {
  display: inline-block;
  margin-top: 1rem;
  color: #6d6d6d;
  font-size: 0.8rem;
  transition: color 0.15s ease;
}

.admin-login__front:hover {
  color: #c8102e;
}

.admin-shell {
  --admin-sidebar-w: 232px;
  display: block;
  min-height: 100vh;
  padding-left: var(--admin-sidebar-w);
}

.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-sidebar-w);
  z-index: 10;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 1.4rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.admin-sidebar__brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: -1.4rem -1.15rem 0;
}

.admin-sidebar__logo {
  background: #cc132c;
  padding: 1.25rem 1.85rem 1rem;
}

.admin-sidebar__brand img {
  display: block;
  width: 96px;
  height: auto;
  filter: brightness(0) invert(1);
}

.admin-sidebar__staff {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0.42rem 1.85rem;
  background: #1e1e1e;
  color: #fff;
  text-align: left;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  font-weight: 600;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-nav__btn {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: #1e1e1e;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-nav__btn.is-active,
.admin-nav__btn:hover {
  background: #f4f4f4;
  color: #c8102e;
  font-weight: 700;
}

.admin-sidebar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.admin-who {
  margin: 0;
  font-size: 0.78rem;
  color: #6d6d6d;
}

.admin-sidebar__foot a {
  font-size: 0.8rem;
  color: #1e1e1e;
  transition: color 0.15s ease;
}

.admin-sidebar__foot a:hover {
  color: #c8102e;
}

.admin-build {
  margin: 0.35rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid #e6e6e6;
  width: 100%;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #888;
  letter-spacing: 0.02em;
}
.admin-build strong {
  display: block;
  color: #6d6d6d;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.admin-build span {
  display: block;
}

.admin-main {
  min-width: 0;
  padding: 1.25rem 1.5rem 2rem;
}

.admin-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.admin-top h2 {
  margin: 0;
  font-size: 1.35rem;
}

.admin-menu-btn {
  display: none;
  border: 1px solid #d0d0d0;
  background: #fff;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-menu-btn:hover {
  background: #f5f5f5;
  border-color: #cc132c;
  color: #cc132c;
}

.admin-lead {
  max-width: 40rem;
  margin: 0 0 1.25rem;
  color: #6d6d6d;
  font-size: 0.88rem;
  line-height: 1.6;
}

.admin-announce {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
}

.admin-pay-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.admin-pay-toggles .admin-check {
  margin-top: 0;
}

.admin-announce__en {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.announce-bar--preview {
  margin: 0.15rem 0 0.35rem;
  text-align: center;
}

.announce-bar--preview.is-empty {
  background: #ececec;
  color: #888;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

.admin-stat {
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 1rem 1.05rem;
}

.admin-stat strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
}

.admin-stat span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: #6d6d6d;
}

.admin-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.admin-search {
  flex: 1;
  min-width: 0;
  border: 1px solid #c8c8c8;
  background: #fff;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
}

.admin-select {
  border: 1px solid #c8c8c8;
  background: #fff;
  min-height: 38px;
  padding: 0.45rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: #1e1e1e;
}

.admin-group-row td {
  background: #f6f6f6;
  border-bottom: 1px solid #e8e8e8;
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e1e1e;
}

.admin-group-title {
  margin-right: 0.45rem;
}

.admin-group-count {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 99px;
  background: #ececec;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6d6d6d;
  text-align: center;
}

.admin-table-wrap {
  overflow: auto;
  background: #fff;
  border: 1px solid #e6e6e6;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-table th,
.admin-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid #efefef;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  font-size: 0.75rem;
  color: #6d6d6d;
  font-weight: 500;
}

.admin-drag-th {
  width: 2.4rem;
}

.admin-drag-cell {
  width: 2.4rem;
  padding-left: 0.45rem !important;
  padding-right: 0.2rem !important;
}

.admin-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  cursor: grab;
  color: #888;
  font-size: 1.05rem;
  line-height: 1;
  user-select: none;
  border-radius: 4px;
}

.admin-drag-handle:hover:not(.is-disabled) {
  color: #222;
  background: #f4f4f4;
}

.admin-drag-handle:active:not(.is-disabled) {
  cursor: grabbing;
}

.admin-drag-handle.is-disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

#athlete-table tbody tr.is-drag {
  opacity: 0.45;
}

#athlete-table tbody tr.is-over-before td {
  box-shadow: inset 0 2px 0 #c8102e;
}

#athlete-table tbody tr.is-over-after td {
  box-shadow: inset 0 -2px 0 #c8102e;
}

.admin-empty {
  color: #8a8a8a;
  text-align: center !important;
}

.admin-thumb {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: #f4f4f4;
}

.admin-thumb--empty {
  border: 1px solid #ececec;
}

.admin-thumb--placeholder {
  width: var(--product-noimage-width);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}

.admin-athlete-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.admin-athlete-photo__img {
  width: 88px;
  height: 110px;
  object-fit: cover;
  background: #f4f4f4;
}

.admin-athlete-photo__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.admin-dphotos {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.45rem;
}

.admin-dphoto {
  display: grid;
  grid-template-columns: auto 104px 1fr auto;
  gap: 0.65rem;
  align-items: center;
  border: 1px solid #e6e6e6;
  background: #fff;
  padding: 0.55rem 0.65rem;
}

@media (max-width: 720px) {
  .admin-dphoto {
    grid-template-columns: auto 88px 1fr;
  }
  .admin-dphoto__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.admin-dphoto.is-drag {
  opacity: 0.55;
}

.admin-dphoto.is-over {
  border-color: #c8102e;
}

.admin-dphoto__handle {
  cursor: grab;
  color: #888;
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
  padding: 0.2rem 0.15rem;
}

.admin-dphoto__preview {
  width: 104px;
  height: 78px;
  background: #f4f4f4;
  overflow: hidden;
  position: relative;
}

.admin-dphoto__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: grab;
  touch-action: none;
}

.admin-dphoto__preview.is-empty {
  border: 1px dashed #ddd;
}

.admin-dphoto__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-dphoto__lab {
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-dphoto__hint {
  font-size: 0.72rem;
  color: #888;
}

.admin-dphoto__actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-end;
}

.admin-grid .admin-block-title {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
}

.admin-sub {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: #8a8a8a;
}

.admin-link {
  border: 0;
  background: none;
  padding: 0;
  color: #c8102e;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease;
}

.admin-link:hover {
  color: #a50d25;
  text-decoration: underline;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
}

.admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  background: none;
  color: #cc132c;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.admin-icon-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.admin-icon-btn:hover {
  background: #fde8e8;
}

.admin-icon-btn--edit {
  color: #4d4d4f;
}

.admin-icon-btn--edit:hover {
  background: #f2f2f2;
}

.admin-link--danger {
  color: #8a1538;
}

.admin-link--danger:hover {
  color: #c8102e;
}

.admin-btn--danger {
  background: #fff;
  border-color: #cc132c;
  color: #cc132c;
}

.admin-btn--danger:hover:not(:disabled) {
  background: #cc132c;
  border-color: #cc132c;
  color: #fff;
}

.admin-btn--danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-pill {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: #f4f4f4;
}

.admin-pill--on { background: #e8f6ec; color: #1b7a38; }
.admin-pill--warn { background: #fff3d6; color: #9a6b00; }
.admin-pill--off { background: #f4f4f4; color: #6d6d6d; }
.admin-pill--hide { background: #fde8e8; color: #c8102e; }
.admin-pill--ship { background: #e8eefc; color: #2748a0; }

.admin-dialog--sale {
  width: min(840px, calc(100vw - 2rem));
}

.admin-sale-count {
  font-style: normal;
  font-weight: 700;
  color: #cc132c;
  margin-left: 0.4rem;
  font-size: 0.82rem;
}

.admin-sale-picker__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.admin-sale-picker__bar input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
}
.admin-sale-picker__list {
  border: 1px solid #c8c8c8;
  background: #fff;
  max-height: min(360px, 46vh);
  overflow-y: auto;
}
.admin-sale-group__h {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f3f3;
  color: #6d6d6d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
}
.admin-sale-row {
  display: grid;
  grid-template-columns: auto 40px minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  border-top: 1px solid #eee;
  cursor: pointer;
}
.admin-sale-row.is-on { background: #fff5f6; }
.admin-sale-row__check {
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}
.admin-sale-row__check input { width: 1.05rem; height: 1.05rem; accent-color: #cc132c; }
.admin-sale-row__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #f6f6f6;
}
.admin-sale-row__meta {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.admin-sale-row__price {
  display: block;
  color: #6d6d6d;
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
.admin-sale-row__over {
  font-size: 0.72rem;
  color: #6d6d6d;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  margin: 0;
  cursor: default;
}
.admin-sale-row__over input {
  width: 5.2rem;
  min-height: 32px;
  padding: 0.2rem 0.35rem;
  border: 1px solid #c8c8c8;
}
.admin-sale-row__over input:disabled {
  opacity: 0.4;
  background: #f6f6f6;
}

@media (max-width: 640px) {
  .admin-sale-row {
    grid-template-columns: auto 36px minmax(0, 1fr);
  }
  .admin-sale-row__over { grid-column: 1 / -1; }
}

.admin-btn {
  appearance: none;
  border: 1px solid #c8c8c8;
  background: #fff;
  color: #1e1e1e;
  min-height: 38px;
  padding: 0 0.95rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.admin-btn--primary {
  background: #cc132c;
  border-color: #cc132c;
  color: #fff;
}

.admin-btn--ghost {
  border-color: #d0d0d0;
}

.admin-btn:hover:not(:disabled):not(.admin-btn--primary):not(.admin-btn--danger):not(.admin-btn--ghost):not(.is-active) {
  background: #f5f5f5;
  border-color: #b0b0b0;
}

.admin-btn--primary:hover:not(:disabled) {
  background: #a50d25;
  border-color: #a50d25;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(165, 13, 37, 0.28);
}

.admin-btn--ghost:hover:not(:disabled) {
  background: #f4f4f4;
  border-color: #bdbdbd;
  color: #4d4d4f;
}

.admin-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .admin-btn--primary:hover:not(:disabled) {
    transform: none;
  }
}

.admin-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid #e0e0e0;
  padding: 0;
  width: min(720px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

.admin-dialog--pw {
  width: min(420px, calc(100vw - 2rem));
}

.admin-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.admin-dialog__close {
  position: absolute;
  top: 0.7rem;
  right: 0.75rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: #4d4d4f;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease;
}

.admin-dialog__close:hover {
  color: #cc132c;
}

.admin-dialog__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 2rem);
  padding: 1.25rem 1.35rem 1.15rem;
}

.admin-dialog__body h3 {
  margin: 0 2rem 1rem 0;
  font-size: 1.15rem;
  flex: 0 0 auto;
}

.admin-dialog__title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 2rem 1rem 0;
  flex: 0 0 auto;
  min-width: 0;
}

.admin-dialog__title-row h3 {
  margin: 0;
}

.admin-product-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.admin-product-nav[hidden] {
  display: none !important;
}

.admin-product-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #4d4d4f;
  border-radius: 4px;
  cursor: pointer;
}

.admin-product-nav__btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.admin-product-nav__btn:hover:not(:disabled) {
  color: #cc132c;
  border-color: #cc132c;
  background: #fde8e8;
}

.admin-product-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.admin-product-nav__pos {
  min-width: 3.4rem;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #8a8a8a;
  letter-spacing: 0.02em;
}

.admin-dialog__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0.15rem 0.25rem 0;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}

.admin-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem 1rem;
  grid-column: 1 / -1;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.admin-field--full {
  grid-column: 1 / -1;
}

.admin-field > span {
  font-size: 0.75rem;
  color: #6d6d6d;
}

/* 後台表單控件 — 統一字級（同運動員 dialog 參考；唔受 Tailwind font:inherit 影響） */
body.admin-app .admin-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
body.admin-app .admin-field textarea,
body.admin-app .admin-field select,
body.admin-app .admin-search,
body.admin-app .admin-login .admin-field input,
body.admin-app .admin-sale-row__over input,
body.admin-app .admin-home-tech-card input:not([type="range"]):not([type="file"]):not([type="hidden"]),
body.admin-app .admin-home-tech-card textarea,
body.admin-app .admin-home-color input[type="text"],
body.admin-app .admin-combo input,
body.admin-app .admin-combo__search {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 400;
}

.admin-field textarea,
.admin-field input,
.admin-field select,
.admin-search {
  width: 100%;
  border: 1px solid #c8c8c8;
  background: #fff;
  padding: 0.55rem 0.7rem;
  color: #1e1e1e;
}

.admin-field textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.45;
}

.admin-field-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #8a8a8a;
}

.admin-variant-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0.5rem;
}
.admin-variant-table-wrap {
  max-height: 16rem;
  overflow: auto;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
}
.admin-variant-table {
  margin: 0;
}
.admin-variant-table th,
.admin-variant-table td {
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
  vertical-align: middle;
}
.admin-variant-table input {
  width: 100%;
  min-width: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.28rem 0.4rem;
  font: inherit;
}
.admin-variant-table input.admin-variant-qty {
  width: 4.5rem;
  text-align: right;
}
.admin-variant-table td:last-child {
  width: 2.2rem;
  text-align: center;
}

.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus,
.admin-search:focus {
  outline: none;
  border-color: #1e1e1e;
}

.admin-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.95rem;
  padding: 0.35rem 0 0.1rem;
}
.admin-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.88rem;
  color: #1e1e1e;
  user-select: none;
}
.admin-pick input {
  appearance: none;
  -webkit-appearance: none;
  width: 0.78rem;
  height: 0.78rem;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border: 1.5px solid #1e1e1e;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.admin-pick input:checked {
  background: #cc132c;
  border-color: #cc132c;
  box-shadow: inset 0 0 0 2px #fff;
}
.admin-pick-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.admin-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  margin-top: 0.25rem;
}

.admin-check--order-mail {
  margin: 1rem 0 0.35rem;
  font-weight: 600;
}

.admin-cancel-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-cancel-preset {
  appearance: none;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #1e1e1e;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-cancel-preset:hover {
  border-color: #cc132c;
  color: #cc132c;
  background: #fff7f8;
}

#o-cancel-reason,
#o-refund-note {
  min-height: 4.5rem;
  resize: vertical;
}
.admin-check--refund {
  margin: 0.85rem 0 0.45rem;
  font-weight: 600;
}

.admin-check input {
  width: auto;
  padding: 0;
}

.admin-dialog__error {
  margin: 0.85rem 0 0;
  color: #c8102e;
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  background: #fff8e6;
  border: 1px solid #e8d5a3;
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #5c4a1a;
}
.admin-draft-banner[hidden] {
  display: none !important;
}
.admin-draft-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}

.admin-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  flex: 0 0 auto;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eee;
  background: #fff;
}

.admin-order-meta {
  margin-bottom: 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
}

.admin-items {
  margin: 0.65rem 0;
  padding-left: 1.1rem;
}

.admin-total {
  font-weight: 700;
}

.admin-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  background: #1e1e1e;
  color: #fff;
  padding: 0.7rem 0.95rem;
  font-size: 0.82rem;
}

.admin-combo {
  position: relative;
  display: block;
  width: 100%;
}

.admin-combo input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.1rem;
}

.admin-combo--multi .admin-combo__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.35rem 2.1rem 0.35rem 0.5rem;
  border: 1px solid #c8c8c8;
  background: #fff;
  cursor: text;
}

.admin-combo--multi.is-open .admin-combo__box,
.admin-combo--multi .admin-combo__box:focus-within {
  border-color: #1e1e1e;
}

.admin-combo__chips {
  display: contents;
}

.admin-combo__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.12rem 0.35rem 0.12rem 0.45rem;
  background: #f0f0f0;
  border: 1px solid #d8d8d8;
  color: #1e1e1e;
  font-size: 0.78rem;
  line-height: 1.3;
}

.admin-combo__chip-x {
  border: 0;
  background: transparent;
  color: #6d6d6d;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.05rem;
  cursor: pointer;
}

.admin-combo__chip-x:hover {
  color: #c8102e;
}

.admin-combo--multi .admin-combo__search,
.admin-field .admin-combo--multi .admin-combo__search {
  flex: 1 1 4.5rem;
  width: auto;
  min-width: 4.5rem;
  border: 0 !important;
  padding: 0.2rem 0.15rem !important;
  background: transparent;
  box-shadow: none;
}

.admin-combo__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-combo__check {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1px solid #b5b5b5;
  background: #fff;
  box-sizing: border-box;
}

.admin-combo__opt.is-checked .admin-combo__check {
  background: #cc132c;
  border-color: #cc132c;
  box-shadow: inset 0 0 0 2px #fff;
}

.admin-combo__toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.admin-combo__toggle span {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #8a8a8a;
  transition: transform 0.15s;
}

.admin-combo.is-open .admin-combo__toggle span {
  transform: rotate(180deg);
}

.admin-combo__toggle:hover span {
  border-top-color: #1e1e1e;
}

.admin-combo__list[hidden] {
  display: none !important;
}

.admin-combo__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #c8c8c8;
  box-shadow: 0 10px 28px rgba(30, 30, 30, 0.12);
  overflow-y: auto;
}

.admin-combo__list.is-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.admin-combo__opt {
  padding: 0.5rem 0.75rem;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #1e1e1e;
  cursor: pointer;
}

.admin-combo__opt.is-active,
.admin-combo__opt:hover {
  background: #f4f4f4;
}

.admin-combo__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: #8a8a8a;
  word-break: break-all;
}

.admin-combo__opt--image {
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.admin-combo__thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: #f3f3f3;
  border: 1px solid #e0e0e0;
}

.admin-combo__opt-del {
  flex: 0 0 auto;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #8a8a8a;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
}
.admin-combo__opt-del:hover {
  color: #cc132c;
}

.admin-combo__chip--img {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.85rem 0.25rem 0.3rem;
  max-width: none;
}
.admin-combo__chip--img .admin-combo__chip-x {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  background: rgba(255, 255, 255, 0.9);
  line-height: 1;
}
.admin-combo__chip--img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #f3f3f3;
  border: 1px solid #e0e0e0;
}
.admin-combo__chip--img.is-main img {
  outline: 2px solid #cc132c;
  outline-offset: 1px;
}
.admin-combo__chip--img em {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: #cc132c;
  padding: 0.05rem 0.35rem;
  letter-spacing: 0.04em;
}
.admin-combo__chip-main {
  border: 0;
  background: transparent;
  color: #cc132c;
  font-size: 0.65rem;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.admin-combo__chip-main:hover {
  color: #a50d25;
}
.admin-combo--images .admin-combo__box {
  align-items: flex-start;
}
.admin-combo--images .admin-combo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
}

.admin-product-image-upload {
  flex: 0 0 auto;
  border: 1px dashed #c8c8c8;
  background: #fafafa;
  color: #4d4d4f;
  font-size: 12px;
  line-height: 1.2;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
}

.admin-product-image-upload:hover {
  border-color: #cc132c;
  color: #cc132c;
  background: #fff7f8;
}

.admin-combo--images.is-drop .admin-combo__box {
  border-color: #cc132c;
  background: #fff7f8;
  box-shadow: inset 0 0 0 1px #cc132c;
}

.admin-combo--images.is-drop .admin-combo__box::after {
  content: '放開以上傳';
  flex: 1 0 100%;
  font-size: 12px;
  color: #cc132c;
  letter-spacing: 0.06em;
}

.admin-combo--images.is-uploading .admin-combo__box {
  opacity: 0.7;
}

@media (max-width: 860px) {
  .admin-shell {
    padding-left: 0;
  }

  .admin-sidebar {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(260px, 86vw);
    z-index: 20;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.12);
  }

  body.admin-nav-open .admin-sidebar {
    display: flex;
  }

  .admin-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .admin-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .admin-grid,
  .admin-grid-3 {
    grid-template-columns: 1fr;
  }

  .admin-stats {
    grid-template-columns: 1fr;
  }
}

.admin-sport-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1rem 0 1.6rem;
}

.admin-sport-row {
  display: grid;
  grid-template-columns: 5.2rem 5.6rem minmax(7rem, 1fr) minmax(7rem, 1fr) 8.5rem auto auto;
  gap: 0.55rem 0.7rem;
  align-items: end;
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 0.75rem 0.85rem;
}

.admin-sport-order {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-sport-order .admin-btn {
  padding: 0.25rem 0.4rem;
  font-size: 0.78rem;
}

.admin-sport-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #6d6d6d;
}

.admin-sport-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #f4f4f4;
  border: 1px solid #e6e6e6;
  padding: 0.2rem;
}

.admin-sport-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: #c8102e;
  transition: color 0.15s ease;
}

.admin-sport-file:hover {
  color: #a50d25;
  text-decoration: underline;
}

.admin-sport-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-sport-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-sport-count {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.88rem;
  color: #1e1e1e;
  font-weight: 700;
}

.admin-block-title {
  margin: 1.15rem 0 0.55rem;
  font-size: 0.95rem;
}

.admin-addr-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.admin-addr-card {
  border: 1px solid #e6e6e6;
  background: #fafafa;
  padding: 0.75rem 0.85rem 0.55rem;
}

.admin-addr-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.35rem;
}

.admin-member-orders {
  margin-bottom: 0.4rem;
}

#m-addr-add {
  margin-bottom: 0.4rem;
}

.admin-row--off td {
  color: #7a7a7a;
}

.admin-member-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.admin-member-status__text {
  margin: 0;
  font-size: 0.92rem;
}

.admin-hint {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  color: #666;
}

.admin-member-pass-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.55rem 0 0.35rem;
}

.admin-quiz-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 0 1.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e6e6e6;
  background: #fafafa;
}

.admin-quiz-rate {
  min-width: 8rem;
}

.admin-quiz-tabs {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid #e6e6e6;
  margin: 0 0 1rem;
}

.admin-quiz-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.55rem 1rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.admin-quiz-tab:hover:not(.is-active) {
  color: #1e1e1e;
}

.admin-quiz-tab.is-active {
  border-bottom-color: #c8102e;
  color: #c8102e;
  font-weight: 700;
}

.admin-quiz-rank__hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: #888;
}

.admin-quiz-rank__btn {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}

.admin-quiz-rank__btn:hover .admin-quiz-q-title {
  color: #c8102e;
}

.admin-quiz-rank__btn:focus {
  outline: none;
}

.admin-quiz-rank__btn:focus-visible {
  outline: 2px solid #c8102e;
  outline-offset: 2px;
}

.admin-quiz-rank__list li.is-open {
  background: #fafafa;
}

.admin-quiz-chev {
  margin-left: auto;
  flex: 0 0 auto;
  color: #888;
  transition: transform 0.15s ease;
}

.is-open > .admin-quiz-rank__btn .admin-quiz-chev,
.admin-quiz-q.is-open .admin-quiz-chev,
.admin-quiz-add__toggle.is-open .admin-quiz-chev {
  transform: rotate(180deg);
}

.admin-quiz-result-detail {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.7rem;
  padding: 0.65rem 0 0 2.25rem;
  border-top: 1px solid #eee;
}

.admin-quiz-rest {
  margin-top: 0.75rem;
  font-size: 0.88rem;
}

.admin-quiz-rest summary {
  cursor: pointer;
  color: #555;
  transition: color 0.15s ease;
}

.admin-quiz-rest summary:hover {
  color: #c8102e;
}

.admin-quiz-rest__item {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.admin-quiz-q__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.admin-quiz-q__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  flex: 1;
  min-width: 12rem;
  background: none;
  border: 0;
  padding: 0.2rem 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: inherit;
}

.admin-quiz-q__toggle:hover .admin-quiz-q-title {
  color: #c8102e;
}

.admin-quiz-q__meta {
  font-size: 0.78rem;
  font-weight: 400;
  color: #666;
}

.admin-quiz-q__body {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid #eee;
}

.admin-quiz-add__toggle {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0.6rem;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease;
}

.admin-quiz-add__toggle:hover {
  color: #c8102e;
}

.admin-quiz-add__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.admin-quiz-add__body[hidden],
.admin-quiz-q__body[hidden],
.admin-quiz-result-detail[hidden] {
  display: none !important;
}

.admin-quiz-period {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
  margin: 0 0 0.85rem;
}

.admin-quiz-rank {
  margin: 0 0 1rem;
}

.admin-quiz-rank__title {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.admin-quiz-rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-quiz-rank__list li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border: 1px solid #e6e6e6;
  padding: 0.65rem 0.85rem;
}

.admin-quiz-rank__n {
  flex: 0 0 1.6rem;
  font-weight: 700;
  color: #c8102e;
}

.admin-quiz-rank__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.admin-quiz-rank__body strong {
  font-size: 0.92rem;
  font-weight: 700;
}

.admin-quiz-rank__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.admin-quiz-result-meta {
  font-weight: 500;
  color: #666;
  font-size: 0.8rem;
}

.admin-quiz-trend {
  margin: 0 0 1.1rem;
}

.admin-quiz-trend__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  overflow-x: auto;
  min-height: 6.5rem;
  padding-bottom: 0.2rem;
}

.admin-quiz-trend__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 2.4rem;
  gap: 0.2rem;
}

.admin-quiz-trend__val {
  font-size: 0.7rem;
  color: #444;
}

.admin-quiz-trend__bar {
  width: 1.15rem;
  background: #c8102e;
}

.admin-quiz-trend__lab {
  font-size: 0.65rem;
  color: #666;
  white-space: nowrap;
}

.admin-quiz-results {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
}

.admin-quiz-result-card {
  border: 1px solid #e6e6e6;
  padding: 0.75rem 0.9rem;
}

.admin-quiz-result-card h5 {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.admin-quiz-q-title {
  font-weight: 700;
  color: #1e1e1e;
}

.admin-quiz-title-field > span {
  font-weight: 700;
  color: #1e1e1e;
  font-size: 0.82rem;
}

.admin-quiz-title-field input {
  font-weight: 700;
}

.admin-quiz-stat {
  margin-bottom: 0.4rem;
}

.admin-quiz-stat__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.82rem;
  margin-bottom: 0.15rem;
}

.admin-quiz-stat__row > span:first-child {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.admin-quiz-stat__row > span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #555;
}

.admin-quiz-bar {
  height: 8px;
  background: #ececec;
}

.admin-quiz-bar > span {
  display: block;
  height: 100%;
  background: #c8102e;
}

.admin-quiz-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
}

.admin-quiz-q {
  border: 1px solid #e6e6e6;
  padding: 0.7rem 0.85rem;
  background: #fff;
}

.admin-quiz-q.is-hidden {
  background: #fff7f7;
  border-color: #efc4c4;
}

.admin-quiz-q__toggle .admin-pill {
  align-self: center;
  flex: 0 0 auto;
}

.admin-quiz-q__top,
.admin-quiz-q__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.admin-quiz-q__actions {
  margin: 0.55rem 0 0;
}

.admin-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-quiz-opt {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.admin-quiz-opt input {
  flex: 1;
  min-width: 0;
}

.admin-quiz-opt .admin-icon-btn {
  flex-shrink: 0;
}

.admin-sport-add h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
}

.admin-lang-tabs {
  display: flex;
  gap: 0.15rem;
  margin: 0.1rem 0 0.35rem;
}

.admin-lang-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.3rem 0.75rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: #777;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.admin-lang-tab:hover:not(.is-active) {
  color: #1e1e1e;
}

.admin-lang-tab.is-active {
  border-bottom-color: #c8102e;
  color: #c8102e;
  font-weight: 700;
}

.admin-muted {
  color: #888;
  font-size: 0.8rem;
  font-weight: 400;
}

.admin-promo-types {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-promo-uses {
  margin: 0.35rem 0 0.6rem;
  max-height: 8rem;
  overflow: auto;
}

@media (max-width: 960px) {
  .admin-sport-row {
    grid-template-columns: 1fr 1fr;
  }
  .admin-sport-order,
  .admin-sport-icon,
  .admin-sport-actions,
  .admin-sport-row .admin-check {
    grid-column: 1 / -1;
  }
}

.admin-home-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
}
.admin-home-tabs .admin-btn.is-active {
  background: #cc132c;
  border-color: #cc132c;
  color: #fff;
}
.admin-home-tabs .admin-btn.is-active:hover:not(:disabled) {
  background: #a50d25;
  border-color: #a50d25;
  color: #fff;
}
.admin-home-media {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.admin-home-media input[type="text"] {
  flex: 1;
  min-width: 0;
}
.admin-home-color {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-home-color input[type="color"] {
  width: 2.4rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.admin-home-color input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
#home-hero-overlay,
.admin-home-tech-card input[data-tech="overlay"] {
  width: 100%;
  accent-color: #cc132c;
}
.admin-home-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.4rem;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4d4d4f;
  background: #eee;
  border-radius: 2px;
  vertical-align: middle;
}
.admin-home-tag--mob {
  color: #fff;
  background: #cc132c;
}
.admin-home-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.admin-home-tech-card {
  border: 1px solid #e0e0e0;
  background: #fafafa;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.admin-home-tech-card.is-locked {
  border-color: #cc132c;
  background: #fff8f8;
}
.admin-home-tech-card__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.admin-home-tech-card textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #c8c8c8;
  resize: vertical;
}
@media (max-width: 1100px) {
  .admin-home-tech-grid { grid-template-columns: 1fr; }
}

.admin-home-media-dialog {
  width: min(860px, calc(100vw - 2rem));
}
.admin-home-media-search {
  display: block;
  margin: 0.65rem 0 0.15rem;
}
.admin-home-media-search__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.35rem;
}
.admin-home-media-search .admin-search {
  width: 100%;
}
.admin-home-media-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: min(55vh, 480px);
  overflow: auto;
  margin: 0.5rem 0 1rem;
  padding: 0.15rem;
}
.admin-home-media-group__title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #666;
  letter-spacing: 0.04em;
}
.admin-home-media-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.admin-home-media-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid #ddd;
  background: #fff;
  padding: 0.45rem;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font: inherit;
  color: inherit;
}
.admin-home-media-card:hover {
  border-color: #cc132c;
  box-shadow: 0 0 0 1px #cc132c inset;
}
.admin-home-media-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #eee center / cover no-repeat;
  border-radius: 2px;
}
.admin-home-media-card__thumb--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1e1e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.admin-home-media-card__name {
  font-size: 0.72rem;
  line-height: 1.3;
  word-break: break-all;
  color: #333;
}
.admin-home-media-card__meta {
  font-size: 0.68rem;
  color: #888;
}

.admin-home-athlete-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.admin-home-athlete-card {
  border: 1px solid #e0e0e0;
  background: #fafafa;
  padding: 0.85rem;
}
.admin-home-athlete-card__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.admin-home-athlete-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-home-athlete-card .admin-block-title {
  margin: 0.65rem 0 0.45rem;
  font-size: 0.88rem;
}
.admin-home-athlete-card__bg {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 0.35rem;
}
.admin-home-athlete-card__preview {
  width: 120px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #ddd center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.admin-home-athlete-card__badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
  line-height: 1.3;
}
.admin-home-athlete-card [data-hap-wrap].is-idle {
  opacity: 0.48;
}
@media (max-width: 720px) {
  .admin-home-athlete-card__bg {
    grid-template-columns: 1fr;
  }
}

/* 出街前預覽鎖 gate.html */
html.site-gate,
html.site-gate body.site-gate {
  overflow: auto;
  height: auto;
  min-height: 100%;
  background: #f4f4f4;
}
.site-gate__wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.site-gate__card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 2.25rem 1.75rem 1.75rem;
}
.site-gate__logo {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 1.15rem;
}
.site-gate__kicker {
  margin: 0 0 0.25rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: #8a8a8a;
}
.site-gate__title {
  margin: 0 0 0.65rem;
  font-size: 1.55rem;
  font-weight: 700;
}
.site-gate__hint {
  margin: 0 0 1.15rem;
  font-size: 0.8rem;
  color: #6d6d6d;
  line-height: 1.5;
  font-family: 'Noto Sans HK', sans-serif;
}
.site-gate__error {
  margin: 0 0 0.75rem;
  color: #c8102e;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Noto Sans HK', sans-serif;
}
.site-gate__card .admin-btn--primary {
  width: 100%;
  margin-top: 0.35rem;
}