/* =============================================
   Base reset
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

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 ??????? */
.panel-text,
.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; }

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

html.site-lang-en .nav-link .nav-zh,
html.site-lang-en .mobile-link .nav-zh {
  display: none;
}

html.site-lang-en .nav-link .nav-en,
html.site-lang-en .mobile-link .nav-en {
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}

html.site-lang-zh .nav-link .nav-en,
html.site-lang-zh .mobile-link .nav-en {
  display: block;
}

/* 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_icon_guest.svg?v=2") center / contain no-repeat;
  mask: url("../../resources/img/nav_icon_guest.svg?v=2") center / contain no-repeat;
}
.nav-account-icon--member {
  -webkit-mask: url("../../resources/img/nav_icon_member.svg") center / contain no-repeat;
  mask: url("../../resources/img/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_icon_search.svg?v=2") center / contain no-repeat;
  mask: url("../../resources/img/nav_icon_search.svg?v=2") center / contain no-repeat;
}
.nav-icon-mask--cart {
  width: 22px;
  height: 22px;
  -webkit-mask: url("../../resources/img/nav_icon_cart.svg?v=2") center / contain no-repeat;
  mask: url("../../resources/img/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 .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;
}

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

.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;
  }
}

/* ?? 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-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.hex-btn__en {
  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_1.jpg');
}
.panel-bg_s2:not(:has(.panel-bg__media)) {
  background-size: cover;
  background-position: center;
  background-image: url('../../resources/img/bg_2.jpg');
}
.panel-bg_s3:not(:has(.panel-bg__media)) {
  background-size: cover;
  background-position: center;
  background-image: url('../../resources/img/bg_3.jpg');
}
.panel-bg_s4:not(:has(.panel-bg__media)) {
  background-size: cover;
  background-position: center;
  background-image: url('../../resources/img/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; }

.pc-2a {
  background: #0d2137 url('../../resources/img/bg_3.jpg') center / cover no-repeat;
}
.pc-2a::before {
  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%);
}
.pc-2b {
   background: #0d2137 url('../../resources/img/bg_hdc.jpg') center / cover no-repeat;
 }
 
.pc-2b::before {
  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%);
}
.pc-2c {
  background: #0d2137 url('../../resources/img/bg_levels.jpg') center / cover no-repeat;
}

.pc-2c::before {
  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%);
}

.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;
}

.corner-terms_cat{
	position: static !important;
	padding-bottom: 1px;
	padding-left: 20px;
}

@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: 0.7rem; /*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/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: absolute; /*relative;*/
  z-index: 1;
  /*padding: 0 8vw;*/
  /*left: 15%;*/
  top: 120px;
  max-width: 900px; /*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: 650px; /*440px;*/
}

.au-desc p {
  font-family: "Noto Sans HK", sans-serif;
  font-size: 13px; /*1rem;*/
  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: 850px; /*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);
}


.au-milestone {
  position: absolute; /*relative;*/
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start; /* Enquiry?? Figma??? navbar */
  /*padding: 5.75rem 1vw 8vw 9rem;*/ /*9.75rem 8vw 2rem;*/ /* ~nav 150px + ????Figma title ?253px? */
  max-width: 850px; /*560px;*/
  top: 120px;
  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-milestone.is-visible {
  display: flex;
}

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

.au-milestone.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 {
  text-transform: uppercase;
  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: 0.78rem; }

  .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;
}
@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(8, 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(0,0,0,1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 2px;
}
#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: 820px;
    max-height: min(560px, calc(100dvh - 140px));
  }
  #cb-body-toggle,
  #cb-diagram-close { display: none !important; }
  #cb-body-diagram {
    position: relative;
    width: 250px;
    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;
}

.sport-option-list { display: flex; flex-direction: row; gap: 6px;  flex-wrap: wrap; padding-left: 6px; }
.sport-option-btn {
  width: 114px;	
  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;
}
.sport-option-btn:hover,
.sport-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;
  padding: 10px;
}
.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;
  flex: 47%;
}

.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-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: 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: 32px;
  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: #1e1e1e;
  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;
}

.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: 12px; 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: 12px; 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: 14px; 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 11px;
  margin: 0 -6px;
  cursor: pointer;
  font-family: 'Noto Sans HK', sans-serif; font-size: 13px; 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-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: 13px;
  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: 0.875rem; 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: 0.875rem; 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; transition: opacity 0.2s;
}
.pl-card:hover { opacity: 0.88; }
.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: 18px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
}
.pl-card--discontinued .pl-card-price {
  color: #888;
  font-weight: 500;
}

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

/* ???????????????????????????????????????
   Product favorite (heart overlay)
   ??????????????????????????????????????? */
.pl-fav-btn {
  position: absolute;
  top: 8px; right: 8px;
  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; }
.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--level2 { background: #cc132c; color: #fff; }
.pl-badge--white  { background: #fff; color: #1e1e1e; box-shadow: inset 0 0 0 1px #1e1e1e; }

.pl-card-info { padding: 10px 4px 4px; text-align: center; }
.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: 'Noto Sans HK', sans-serif; font-size: 15px; font-weight: 700; color: #1e1e1e; letter-spacing: 0.04em; line-height: 1.5; 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-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: 14px; 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: 80px; }
  /* Match 防護級別 title→EN band (~36px top, compact bottom) */
  .pl-header { padding: 36px 0 20px; }
  .pl-title { font-size: 32px; padding: 0; }

  .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 #1e1e1e; background: #fff; padding: 8px 16px;
    font-family: 'Noto Sans HK', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.06em; margin: 14px 0 12px;
  }

  .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 { padding: 8px 6px 6px; }
  .pl-card-code  { font-size: 12px; margin-bottom: 1px; }
  .pl-card-name  { font-size: 11px; 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-swatch { width: 10px; height: 10px; }
  .pl-badge { height: 16px; width: 46px; font-size: 9px; }
  .pl-breadcrumb { font-size: 11px; margin-bottom: 6px; }
  .pl-result-count { font-size: 11px; margin-bottom: 14px; }

  .pl-mobile-filter-btn {
    width: 100%; justify-content: center;
    border-color: #1e1e1e; margin: 16px 0 10px; padding: 10px 0;
    font-size: 13px; 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; }

.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 { width: 456px; height: 456px; object-fit: cover; display: block; }

/* Description (below image) */
.pd-desc-section { margin-top: 20px; padding-bottom: 40px; }
.pd-section-label { font-family: 'Noto Sans HK', sans-serif; font-size: 15px; font-weight: 500; color: #1e1e1e; letter-spacing: 0.1em; margin-bottom: 8px; }
.pd-bullet-list { font-family: 'Noto Sans HK', sans-serif; font-size: 14px; 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:0.875rem; 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-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: 'Noto Sans HK', sans-serif; font-size: 22px; font-weight: 700; 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: 16px; }

.pd-stock-status {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 14px;
  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: 12px;
  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: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.szlb-overlay[hidden] { display: none; }
.szlb-overlay.is-pinned {
  align-items: flex-start;
}

.szlb-panel {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 690px; /*560px;*/
  max-height: min(85vh, calc(100vh - 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: 13px;
  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.active { color: #cc132c; border-bottom-color: #cc132c; }
.szlb-tab:hover:not(.active) { color: #1e1e1e; }

.szlb-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.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-panel { max-height: 85vh; border-radius: 10px; }
  .szlb-tab { font-size: 12px; 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-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: 14px; 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: 12px; 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: 13px; 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: 15px; font-weight: 500; color: #1e1e1e; letter-spacing: 0.1em; margin-bottom: 10px; }
.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; }

/* 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: 14px; 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: 15px; 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: 14px; 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: 13px; font-weight: 400; color: #4d4d4f; line-height: 1.5; letter-spacing: 0.03em; margin: 0; }

.size-guide-title_other{
	margin-left: 72px;
    font-size: 11px;
    font-weight: bold;
    color: #CC132C;
}

/* 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: 12px; min-width: 100px; 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: 14px; 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: 12px; 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: 14px; 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-title { font-family: 'Noto Sans HK', sans-serif; font-size: 15px; font-weight: 500; color: #1e1e1e; letter-spacing: 0.1em; margin-bottom: 16px; }
.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; }

/* Desktop-only / mobile-only desc */
.pd-desc-mobile { display: none; }
@media (max-width: 768px) {
  .pd-desc-desktop { display: none; }
  .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; }

  .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 .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%; display: flex; flex-direction: column; padding-top: 16px; overflow: visible; }
  .pd-code    { order: 1; }
  .pd-name    { order: 1; font-size: 18px; }
  .pd-price   { order: 1; font-size: 16px; }
  .pd-divider { display: none; }
  .pd-tech-row { order: 2; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 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: 15px; 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: 15px; 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: 13px; letter-spacing: 0.6px; }
  .pd-level-desc { font-size: 12px; 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-breadcrumb-mobile { display: block; }
  .pd-breadcrumb:not(.pd-breadcrumb-mobile) { display: none; }
}


/* =============================================
   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 {
  display: block;
  text-decoration: none;
  color: inherit;
  border-color: #cc132c;
  background: #fffafa;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.12s;
}
.member-order--shipping:hover {
  border-color: #a50f24;
  background: #fff5f5;
  transform: translateY(-1px);
}
.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-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;
}

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

@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;
}

@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;
}

/* ?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_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: 32px; /*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: 1rem;
  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: 1rem;
  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;
  list-style: decimal;
  font-size: 0.875rem;
  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: 13px;
  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: 14px;
  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: 7.5rem 1.25rem 3rem;
  }

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

  .lp-header { margin-bottom: 1.2rem; }
  .lp-intro { font-size: 0.8rem; }

  .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: 0.75rem;
    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: 0.875rem;
    line-height: 1.65;
    letter-spacing: 0.1em;
  }
}

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

  .lp-intro {
    font-size: 0.8rem;
    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: 13px;
    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 ?????9 ???????????? scroll */
.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: 7.5rem;
    padding-bottom: 4.5rem;
  }

  .al-shared-inner {
    padding-top: 7.5rem;
  }

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

  .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: 7rem;
    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-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: 0.95rem;
  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: 1rem;
  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: 0.9rem;
  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: 0.95rem;
  }

  .sg-item__desc {
    font-size: 0.85rem;
  }
}

/* ???????????????????????????????????????
   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.25rem;
}

.faq-steps li {
  margin-bottom: 0.5rem;
}

.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-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-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 {
  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-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-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;
}

.admin-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 1.4rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.admin-sidebar__brand img {
  display: block;
  width: 128px;
  height: auto;
}

.admin-sidebar__brand span {
  display: block;
  margin-top: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  color: #8a8a8a;
}

.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;
}

.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;
}

.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;
}

.admin-lead {
  max-width: 40rem;
  color: #6d6d6d;
  font-size: 0.88rem;
  line-height: 1.6;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 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;
}

.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-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-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-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;
}

.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--ship { background: #e8eefc; color: #2748a0; }

.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;
}

.admin-btn--primary {
  background: #cc132c;
  border-color: #cc132c;
  color: #fff;
}

.admin-btn--ghost {
  border-color: #d0d0d0;
}

.admin-dialog {
  border: 1px solid #e0e0e0;
  padding: 0;
  width: min(720px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: visible;
}

.admin-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.admin-dialog__body {
  padding: 1.25rem 1.35rem 1.15rem;
}

.admin-dialog__body h3 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}

.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;
}

.admin-field input,
.admin-field select,
.admin-search {
  width: 100%;
  border: 1px solid #c8c8c8;
  background: #fff;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: #1e1e1e;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-search:focus {
  outline: none;
  border-color: #1e1e1e;
}

.admin-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  margin-top: 0.25rem;
}

.admin-dialog__error {
  margin: 0.85rem 0 0;
  color: #c8102e;
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 1.15rem;
}

.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__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__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;
}


.product_more_btn{
	display: flex;
	justify-content: center; /* Horizontally centers the button */
	align-items: center;     /* Vertically centers the button */
	min-height: 200px;	
}

@media (max-width: 860px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .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 {
    grid-template-columns: 1fr;
  }

  .admin-stats {
    grid-template-columns: 1fr;
  }
}

.mobile{
	display: none;
}

.desktop{
	display: block;
}


@media all and (max-width: 960px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px){

	#chatbox-popup{
		height: 520px;
	}

	.cb-diagram-head{
		width: 50px;
		margin-left: auto;
	}
	
	.sport-option-btn{
		width: 92px;
	}
	
	.au-desc {
		overflow-y: scroll;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
		height: 300px;
	}
	.au-milestone{
		padding: 7.75rem 1vw 8vw 2rem;
		top: 0px;
	}

	
	.mobile{
		display: block;
	}

	.desktop{
		display: none;
	}	
}