/* === LORELLE - Korean Fashion Store === */
/* Color Palette: Morandi-inspired warm neutrals */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Noto+Sans+TC:wght@300;400;500;600&family=Noto+Serif+TC:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --bg-primary: #f7f3ee;
  --bg-secondary: #ede8e1;
  --bg-tertiary: #e5ddd3;
  --text-primary: #2d2926;
  --text-secondary: #6b6058;
  --text-muted: #9b8e82;
  --accent: #c4917b;
  --accent-light: #d4a999;
  --accent-dark: #a87562;
  --border: #d9d0c6;
  --border-light: #e8e1d9;
  --white: #ffffff;
  --black: #1a1714;
  --success: #7d9b76;
  --sale: #c75c5c;
  --shadow-sm: 0 1px 3px rgba(45,41,38,0.06);
  --shadow-md: 0 4px 12px rgba(45,41,38,0.08);
  --shadow-lg: 0 8px 30px rgba(45,41,38,0.1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-display: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-body: 'Noto Sans TC', sans-serif;
  --brand-gold: #C79A63;
}

/* === Floating back-to-top visibility guard (2026-08-02) === */
.fab-top.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0.6) !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
}

/* === UTILITY BAR === */
.utility-bar {
  background: #000;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 10px 0;
  position: relative;
  z-index: 100;
}
.utility-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.utility-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
/* Announcement ticker wrapper */
.announcement-ticker {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 20px; /* single-line height */
}
.announcement-ticker-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 400ms ease-in-out;
}
.announcement-ticker-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  white-space: nowrap;
  gap: 0;
}
.announcement-ticker-item {
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  padding: 0 6px;
}
.announcement-ticker-divider {
  color: rgba(255,255,255,0.4);
  padding: 0 8px;
  font-weight: 300;
}
.utility-bar .promo-text {
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.utility-bar .promo-text .announcement-separator {
  color: rgba(255,255,255,0.5);
  font-weight: 300;
}
.utility-bar .utility-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.utility-bar .utility-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 4px;
}
.utility-bar .utility-links a:hover { color: var(--accent-light); }
.utility-bar .utility-links svg { width: 14px; height: 14px; }

/* === HEADER === */
.main-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Mobile Menu Button - Hidden on desktop */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-primary);
  z-index: 101;
}
.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
}

.header-left nav {
  display: flex;
  gap: 28px;
}
.header-left nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  transition: var(--transition);
  position: relative;
  padding: 4px 0;
}
.header-left nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.header-left nav a:hover { color: var(--text-primary); }
.header-left nav a:hover::after { width: 100%; }

.brand-logo {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 8px;
  color: var(--text-primary);
  text-decoration: none;
  text-transform: uppercase;
  flex-shrink: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-right button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition);
  position: relative;
  padding: 4px;
}
.header-right button:hover { color: var(--accent); }
.header-right svg { width: 20px; height: 20px; }
.cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--accent);
  color: white;
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

/* === CONTAINER === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* === HERO CAROUSEL === */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 520px;
  max-height: 720px;
  overflow: hidden;
}
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Individual Panel */
.carousel-panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.hero-banner-picture,
.hero-banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-banner-picture {
  z-index: 0;
}
.hero-banner-image {
  object-fit: cover;
  object-position: center;
}
.panel-left {
  border-right: 1px solid rgba(255,255,255,0.3);
}

/* Model placeholder silhouette */
.panel-model-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.panel-model-placeholder svg {
  width: 55%;
  max-width: 280px;
  height: auto;
  opacity: 0.9;
}

/* Dark gradient overlay at bottom for text legibility */
.panel-overlay {
  position: relative;
  z-index: 3;
  padding: 40px 44px 64px;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 60%, transparent 100%);
  padding-top: 80px;
}
.panel-label {
  display: block;
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
  margin-bottom: 10px;
}
.panel-title {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 8px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
  letter-spacing: 1px;
}
.panel-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 22px;
  font-weight: 300;
  letter-spacing: 0.5px;
}
/* CTA Button - Premium Minimal Design */
.btn-panel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 9999px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  background: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-panel:hover {
  background: rgba(255,255,255,0.95);
  color: #1a1a1a;
  border-color: rgba(255,255,255,0.95);
}
.btn-panel:hover .btn-arrow {
  transform: translateX(3px);
}
.btn-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Navigation Arrows - Hidden by default, fade on hover */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: opacity 0.25s ease, background 0.2s ease;
  color: #ffffff;
  opacity: 0;
  backdrop-filter: blur(8px);
}
.hero-carousel:hover .carousel-arrow {
  opacity: 1;
}
.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
}
.carousel-arrow svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.carousel-prev {
  left: 24px;
}
.carousel-next {
  right: 24px;
}

/* Pagination Dots - Minimal Design */
.carousel-pagination {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.15);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
}
.carousel-pagination .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}
.carousel-pagination .dot.active {
  background: #ffffff;
  border-color: #ffffff;
}
.carousel-pagination .dot:hover {
  background: rgba(255,255,255,0.5);
}
/* Hide pause button */
.pause-btn {
  display: none !important;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 400;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-outline {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: transparent;
}
.btn-outline:hover {
  background: var(--text-primary);
  color: var(--white);
}
.btn-primary {
  background: var(--text-primary);
  color: var(--white);
  border-color: var(--text-primary);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-accent {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-sm { padding: 8px 20px; font-size: 11px; }
.btn-lg { padding: 16px 40px; font-size: 13px; }

/* === FILTER TABS === */
.filter-section {
  padding: 36px 0 20px;
  border-bottom: none;
  margin-bottom: 36px;
}
.filter-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 9px 22px;
  border: none;
  border-radius: var(--radius-pill);
  background: #ece8e3;
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
  font-weight: 400;
}
.filter-tab:hover {
  background: #ddd8d2;
  color: var(--text-primary);
}
.filter-tab.active {
  background: #2d2926;
  color: #ffffff;
  border-color: #2d2926;
  font-weight: 400;
}

/* === PRODUCT GRID === */
.products-section {
  padding: 0 0 72px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.product-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  transition: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  /* no lift — keep flat like reference */
}
.product-image {
  aspect-ratio: 3/4;
  background: #eceae6;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.product-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.product-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.product-carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.product-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.product-card:hover .product-carousel-dots {
  opacity: 1;
}

.product-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
  padding: 0;
}

.product-carousel-dot.active {
  background: #ffffff;
  width: 16px;
  border-radius: 3px;
}

.product-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.4;
}
.product-image-placeholder svg { width: 48px; height: 48px; }
.product-image-placeholder span { font-size: 11px; margin-top: 8px; letter-spacing: 1px; }

/* === Product Tags Group Container (legacy related products) === */
.product-tags-group {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 4;
  pointer-events: none;
}
.product-tags-group .product-tag {
  position: static;
  width: 52px;
  min-width: 52px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 1.2px;
  font-weight: 500;
  text-transform: uppercase;
}
.tag-new {
  background: #ffffff;
  color: #2d2926;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.tag-sale {
  background: #c75c5c;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(199,92,92,0.3);
}
.tag-recommend {
  background: #e8a850;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(232,168,80,0.3);
}
.tag-preorder {
  background: #8e44ad;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(142,68,173,0.3);
}
.tag-limited {
  background: #B1844F;
  color: #FFF9F1;
  border: 1px solid #A47643;
  box-shadow: 0 1px 4px rgba(177,132,79,0.3);
}
/* Legacy single-tag fallback (no container) */
.product-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 52px;
  min-width: 52px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 1.2px;
  font-weight: 500;
  text-transform: uppercase;
  z-index: 4;
}

.product-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  opacity: 0;
  z-index: 4;
}
.product-card:hover .product-wishlist { opacity: 1; }
.product-wishlist:hover { transform: scale(1.1); background: #fff; }
.product-wishlist svg { width: 16px; height: 16px; color: #9b8e82; }
.product-wishlist.active svg { color: #c75c5c; fill: #c75c5c; }

/* Mobile & Tablet: Always show wishlist button */
@media (max-width: 1024px) {
  .product-wishlist {
    opacity: 1;
  }
}

.product-info {
  padding: 14px 4px 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-brand {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.product-colors {
  font-size: 12px;
  color: #9b8e82;
  margin-bottom: 5px;
  font-weight: 300;
  letter-spacing: 0.2px;
}
.product-spec-summary {
  font-size: 12px;
  color: #9b8e82;
  margin-bottom: 5px;
  font-weight: 400;
  letter-spacing: 0.3px;
}
.product-name {
  font-size: 14px;
  font-weight: 400;
  color: #2d2926;
  margin-bottom: 7px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.product-price .current {
  font-size: 14px;
  font-weight: 500;
  color: #2d2926;
}
.product-price .original {
  font-size: 13px;
  color: #9b8e82;
  text-decoration: line-through;
}

/* === UNIFIED DISCOUNT LABEL === */
.discount-label {
  display: inline-block;
  background: #D96B63;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
/* Card-specific sizing */
.discount-label-card {
  font-size: 11px;
  padding: 2px 7px;
}
/* Category card sizing */
.discount-label-cat {
  font-size: 11px;
  padding: 2px 7px;
}
.discount-label-mcat {
  font-size: 10px;
  padding: 2px 6px;
}
/* PDP sizing */
.discount-label-pdp {
  font-size: 13px;
  padding: 3px 10px;
}
.discount-label-m-pdp {
  font-size: 12px;
  padding: 3px 9px;
}

/* Strikethrough original price (used when discount is active) */
.product-price-original,
.cat-card-price-original,
.mcat-card-price-original {
  text-decoration: line-through;
  color: #b5a99a;
}
.product-price-original { font-size: 13px; }
.cat-card-price-original { font-size: 12px; }
.mcat-card-price-original { font-size: 11px; }

/* Cart original price strikethrough */
.cart-item-original-price {
  font-size: 12px;
  color: #b5a99a;
  text-decoration: line-through;
  margin-top: 2px;
}

/* Checkout original price strikethrough */
.pd-price-original-strike {
  font-size: 11px;
  color: #b5a99a;
  text-decoration: line-through;
  margin-top: 2px;
}

/* === CARD HOVER IMAGE SWAP === */
.card-img-swap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.card-img-swap .card-img-primary {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.card-img-swap .card-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Only activate on devices with mouse hover */
@media (hover: hover) and (pointer: fine) {
  .card-img-swap:hover .card-img-hover {
    opacity: 1;
  }
  .card-img-swap:hover .card-img-primary {
    transform: scale(1.03);
  }
}
/* Prevent parent card hover scale from affecting hover-swap images */
.product-card:hover .card-img-swap .card-img-hover,
.cat-card:hover .card-img-swap .card-img-hover,
.mcat-card:hover .card-img-swap .card-img-hover {
  transform: none !important;
}

/* Placeholder cards (fill up to 16) */
.product-card.placeholder-card {
  cursor: default;
  pointer-events: auto;
}
.product-card.placeholder-card .product-image {
  background: #e2dfd9;
}
.product-card.placeholder-card:hover {
  transform: none;
}
.product-card.placeholder-card .product-image-placeholder {
  opacity: 0.55;
}
.product-card.placeholder-card .product-brand {
  opacity: 0.6;
}
.product-card.placeholder-card .product-name {
  color: #6b6058;
}

/* === LOOKBOOK SECTION (from Image 3) === */
.lookbook-section {
  background: var(--bg-secondary);
  padding: 80px 0;
  margin: 0 -40px;
  padding-left: 40px;
  padding-right: 40px;
}
.lookbook-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1200px;
  margin: 0 auto;
}
.lookbook-tag {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.lookbook-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 8px;
}
.lookbook-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* === TRUST BADGES (from Image 3) === */
.trust-section {
  padding: 60px 0;
  border-top: 1px solid var(--border-light);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-item {
  text-align: center;
  padding: 24px;
}
.trust-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  color: var(--accent);
}
.trust-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.trust-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* === FOOTER === */
/* === FOOTER === */
.site-footer {
  background: #111;
  color: rgba(255,255,255,0.7);
  padding: 24px 0 0 0;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.footer-top-line {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #c8a96e 20%, #c8a96e 80%, transparent 100%);
  opacity: 1;
  width: 100%;
  margin: 0;
  display: block;
}
.footer-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 0;
  padding: 48px 0 40px;
  align-items: start;
}
/* Brand section */
.footer-brand-section {
  display: flex;
  flex-direction: column;
  padding-right: 32px;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 6px;
  color: #f5e6c8;
  margin-bottom: 14px;
  font-weight: 400;
}
.footer-desc {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,0.6);
  max-width: 280px;
  margin: 0 0 20px 0;
}
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.footer-contact-item svg {
  flex-shrink: 0;
  opacity: 0.6;
  color: #c8a96e;
}
/* Social icons section */
.footer-social-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.footer-social-icons a {
  color: rgba(255,255,255,0.8);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
}
.footer-social-icons a:hover {
  color: #c8a96e;
  border-color: rgba(200,169,110,0.4);
}
.footer-social-text {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  line-height: 1.6;
}
/* Nav columns */
.footer-nav-section {
  display: contents;
}
.footer-nav-column {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.footer-nav-column:last-child {
  border-right: 1px solid rgba(255,255,255,0.08);
}
.footer-title {
  font-size: 14px;
  letter-spacing: 1px;
  color: #c8a96e;
  margin-bottom: 6px;
  font-weight: 500;
}
.footer-title-line {
  width: 28px;
  height: 1px;
  background: #c8a96e;
  opacity: 0.6;
  margin-bottom: 18px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: 12px; }
.footer-links a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 13px;
  transition: var(--transition);
  letter-spacing: 0.3px;
}
.footer-links a:hover { color: #c8a96e; }
/* Bottom bar */
.footer-bottom-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #c8a96e 20%, #c8a96e 80%, transparent 100%);
  opacity: 0.8;
  width: 100%;
}
.footer-bottom {
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
}
/* Legacy compatibility */
.footer-layout-complete,
.footer-layout-simple {
  display: none !important;
}
.footer-grid-complete,
.footer-grid-simple,
.footer-middle-bar {
  display: none !important;
}

/* Responsive Footer */
@media (max-width: 1024px) {
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand-section {
    grid-column: 1 / -1;
    padding-right: 0;
  }
  .footer-social-section {
    border: none;
    padding: 0;
    align-items: flex-start;
  }
  .footer-nav-column {
    border: none;
    padding: 0;
  }
}
@media (max-width: 768px) {
  /* Hide desktop footer grid and bottom bar on mobile */
  .footer-inner,
  .footer-bottom-line,
  .footer-bottom {
    display: none !important;
  }

  /* ── Mobile Footer ───────────────────────────────────── */
  .mobile-footer {
    display: block !important;
    background: #0a0a0a;
    padding: 0 24px;
    overflow: hidden;
  }

  /* Brand area */
  .mf-brand-area {
    text-align: center;
    padding: 32px 0 28px;
  }
  .mf-logo {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 6px;
    color: #f5e6c8;
    font-weight: 400;
    margin-bottom: 16px;
  }
  .mf-tagline-en {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin: 0 0 4px;
    letter-spacing: 0.5px;
  }
  .mf-tagline-zh {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
    margin: 0 0 24px;
    letter-spacing: 0.5px;
  }

  /* Social icon buttons */
  .mf-social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  .mf-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(200,169,110,0.45);
    color: #f5e6c8;
    transition: border-color 0.2s, color 0.2s;
  }
  .mf-social-icons a:hover,
  .mf-social-icons a:active {
    border-color: #c8a96e;
    color: #fff;
  }
  .mf-social-icons a svg,
  .mf-social-icons a img {
    display: block;
  }
  .mf-social-icons a .mf-threads-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: #f5e6c8;
  }
  .mf-social-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.38);
    line-height: 1.6;
    margin: 0;
    text-align: center;
  }

  /* Accordion */
  .mf-accordion {
    margin-top: 8px;
  }
  .mf-acc-group {
    border-top: 1px solid rgba(200,169,110,0.25);
  }
  .mf-acc-group:last-child {
    border-bottom: 1px solid rgba(200,169,110,0.25);
  }
  .mf-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mf-acc-title {
    font-size: 18px;
    font-weight: 500;
    color: #c8a96e;
    letter-spacing: 1px;
  }
  .mf-acc-icon {
    font-size: 20px;
    color: #c8a96e;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    transition: transform 0.25s ease;
  }
  .mf-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .mf-acc-body.open {
    /* max-height set by JS */
  }
  .mf-acc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 24px;
    text-decoration: none;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    letter-spacing: 0.3px;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .mf-acc-item:hover,
  .mf-acc-item:active {
    color: #f5e6c8;
  }
  .mf-acc-arrow {
    font-size: 16px;
    color: rgba(200,169,110,0.5);
    flex-shrink: 0;
    margin-left: 12px;
  }

  /* Divider + copyright */
  .mf-divider {
    height: 1px;
    background: rgba(200,169,110,0.25);
    margin-top: 28px;
  }
  .mf-copyright {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    padding: 20px 0 28px;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
}

/* === MODAL / DRAWER === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; }
.modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  animation: modalIn 0.3s ease;
}

#authPage.reset-password-mode {
  background:
    linear-gradient(90deg, rgba(38,32,28,0.54), rgba(38,32,28,0.26)),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(135deg, #b9aa9c 0%, #e7ded5 44%, #8f7561 100%);
  backdrop-filter: blur(7px);
}
#authPage.reset-password-mode .auth-modal-content {
  max-width: 420px;
  width: min(90vw, 420px);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 22px 70px rgba(38,32,28,0.28);
}
#authPage.reset-password-mode #resetPasswordForm {
  display: block;
}
#authPage.reset-password-mode #loginForm,
#authPage.reset-password-mode #registerForm,
#authPage.reset-password-mode #forgotPasswordForm,
#authPage.reset-password-mode #verifyEmailForm,
#authPage.reset-password-mode #registrationSuccessForm {
  display: none !important;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 24px;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: none;
  backdrop-filter: blur(4px);
}
.drawer-overlay.active { display: block; }
.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100%;
  background: var(--white);
  z-index: 201;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { right: 0; }
.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border-light);
}
.cart-drawer-header h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}
.cart-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--text-muted);
}
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Cart column headers */
.cart-col-headers {
  display: grid;
  grid-template-columns: 1fr 72px 96px 72px 32px;
  gap: 8px;
  padding: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.cart-col-headers span:nth-child(2),
.cart-col-headers span:nth-child(3),
.cart-col-headers span:nth-child(4) { text-align: center; }

.cart-item {
  display: grid;
  grid-template-columns: 1fr 72px 96px 72px 32px;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #f0ece7;
  align-items: center;
  transition: background 0.15s;
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: #fdfcfa; }

/* Product info block: image + name + spec */
.cart-item-product {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.cart-item-image {
  width: 72px;
  height: 72px;
  background: var(--bg-secondary);
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cart-item-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 10px;
}
.cart-item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}
.cart-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-variant {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Price column */
.cart-item-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
}

/* Quantity control */
.cart-item-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0dbd5;
  border-radius: 6px;
  overflow: hidden;
  width: 88px;
  margin: 0 auto;
  height: 30px;
}
.cart-item-qty button {
  width: 28px;
  height: 100%;
  border: none;
  background: #f7f5f2;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cart-item-qty button:hover { background: #eee; color: #333; }
.cart-item-qty button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f7f5f2;
  color: #bbb;
}
.cart-item-qty span {
  width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  line-height: 30px;
  background: #fff;
}

/* Subtotal column */
.cart-item-subtotal {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
}

/* Delete button */
.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  margin: 0 auto;
}
.cart-item-remove:hover { color: var(--sale); }

.cart-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--border-light);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
}
.cart-empty {
  text-align: center;
  padding: 60px 0;
  color: var(--text-muted);
}
.cart-empty svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.3; }

/* === WISHLIST DRAWER === */
.wishlist-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100%;
  background: var(--white);
  z-index: 201;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.wishlist-drawer.open { right: 0; }
.wishlist-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border-light);
}
.wishlist-drawer-header h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}
.wishlist-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--text-muted);
}
.wishlist-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.wishlist-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.wishlist-item-image {
  width: 80px;
  height: 100px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wishlist-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wishlist-item-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.4;
}
.wishlist-item-image-placeholder svg {
  width: 32px;
  height: 32px;
}
.wishlist-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wishlist-item-name {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.5;
}
.wishlist-item-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wishlist-item-price .current {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.wishlist-item-price .original {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.wishlist-item-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.wishlist-item-view-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
  color: var(--text-secondary);
}
.wishlist-item-view-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}
.wishlist-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}
.wishlist-item-remove:hover {
  color: var(--sale);
}
.wishlist-item-remove svg {
  width: 14px;
  height: 14px;
}
.wishlist-empty {
  text-align: center;
  padding: 60px 0;
  color: var(--text-muted);
}
.wishlist-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}
.wishlist-empty p {
  margin-bottom: 8px;
}
.wishlist-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* === SEARCH OVERLAY === */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(247,243,238,0.97);
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  backdrop-filter: blur(10px);
}
.search-overlay.active { display: flex; }
.search-box {
  width: 100%;
  max-width: 600px;
  padding: 0 40px;
}
.search-input-wrap {
  position: relative;
  margin-bottom: 40px;
}
.search-input-wrap input {
  width: 100%;
  padding: 16px 0;
  border: none;
  border-bottom: 2px solid var(--text-primary);
  background: transparent;
  font-size: 24px;
  font-family: var(--font-display);
  color: var(--text-primary);
  outline: none;
}
.search-input-wrap input::placeholder { color: var(--text-muted); }
.search-close {
  position: absolute;
  top: 40px;
  right: 40px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--text-muted);
}
.search-results { max-height: 50vh; overflow-y: auto; }

/* === SEARCH HOT TAGS === */
.search-hot-tags {
  margin-bottom: 28px;
}
.search-hot-tags-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.search-hot-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search-hot-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  outline: none;
}
.search-hot-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(196,145,123,0.06);
}
.search-hot-tag:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(196,145,123,0.25);
}
.search-hot-tag:active {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  transform: scale(0.96);
}

/* === PRODUCT DETAIL PAGE — Redesigned === */
/* Scoped CSS variables for product detail page */
.product-detail {
  --pd-dark: #2b2724;
  --pd-bg: #f8f4ee;
  --pd-card: #f1ece5;
  --pd-border: #d8cec3;
  --pd-text: #2b2724;
  --pd-muted: #9a8e84;
  --pd-white: #ffffff;
  --pd-accent: #754c31;
  --pd-radius: 4px;
}

.product-breadcrumb {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 400;
  transition: var(--transition);
  border-radius: var(--radius-sm);
}

.breadcrumb-link:hover {
  color: var(--accent);
  text-decoration: underline;
  background: var(--bg-secondary);
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 300;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
  padding: 8px 0;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 60px 0;
}

.product-gallery {
  aspect-ratio: 4/5;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-detail-info {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Product Name */
.product-detail-info .product-name {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--pd-dark);
  line-height: 1.4;
}

/* Price Section */
.product-detail-info .product-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

.product-detail-info .product-price .current {
  font-size: 24px;
  font-weight: 600;
  color: var(--pd-dark);
  letter-spacing: 0.5px;
}

.product-detail-info .product-price .original {
  font-size: 16px;
  color: var(--pd-muted);
  text-decoration: line-through;
  font-weight: 400;
}

/* Option Groups */
.product-option-group {
  margin-bottom: 20px;
}

.product-option-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--pd-muted);
  margin-bottom: 10px;
}

.option-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.option-btn {
  padding: 10px 18px;
  border: 1px solid var(--pd-accent);
  border-radius: 9999px;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
  /* iOS Safari / Messenger WebView: prevent default blue link color */
  appearance: none;
  -webkit-appearance: none;
  color: var(--pd-accent);
  -webkit-text-fill-color: var(--pd-accent);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  min-width: 60px;
  text-align: center;
}

.option-btn:hover {
  background: var(--pd-card);
  border-color: var(--pd-text);
}

.option-btn.selected {
  background: var(--pd-accent);
  color: var(--pd-white);
  border-color: var(--pd-accent);
  -webkit-text-fill-color: var(--pd-white);
}

.option-btn.sold-out {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
  background: transparent;
  border-color: var(--pd-border);
  color: var(--pd-muted);
  -webkit-text-fill-color: var(--pd-muted);
}

.option-btn.sold-out:hover {
  background: transparent;
  border-color: var(--pd-border);
}

/* Quantity Label */
.pd-quantity-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--pd-muted);
  margin-bottom: 10px;
  margin-top: 4px;
}

/* Quantity Selector — Single unified frame */
.qty-control {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 24px;
}

.qty-control button {
  flex: 0 0 auto;
  width: 42px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pd-dark);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline: none;
  border-radius: 0;
}

.qty-control input {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pd-dark);
  -webkit-text-fill-color: var(--pd-dark);
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 42px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  border-radius: 0;
  cursor: default;
}

.qty-control button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.qty-control button:hover:not(:disabled) {
  background: var(--pd-card);
}

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

/* Desktop (≥1200px): Extended quantity selector */
@media (min-width: 1200px) {
  .qty-control {
    width: 100%;
    max-width: 100%;
    height: 48px;
  }
  
  .qty-control button {
    width: 48px;
    height: 100%;
    font-size: 18px;
  }
  
  .qty-control input {
    font-size: 17px;
    line-height: 48px;
  }
}

/* Buy Buttons Section */
.pd-buy-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

.pd-buy-buttons .pd-btn {
  border-radius: 9999px;
}

.pd-btn {
  height: 48px;
  border-radius: var(--pd-radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* iOS compatibility */
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.pd-buy-buttons .pd-btn-buy-now {
  background: var(--pd-white);
  color: var(--pd-accent);
  border: 1px solid var(--pd-accent);
  -webkit-text-fill-color: var(--pd-accent);
}

.pd-buy-buttons .pd-btn-buy-now:hover {
  background: #f7f4ef;
  border-color: var(--pd-accent);
  color: var(--pd-accent);
  -webkit-text-fill-color: var(--pd-accent);
}

.pd-buy-buttons .pd-btn-add-cart {
  background: var(--pd-accent);
  color: var(--pd-white);
  border: 1px solid var(--pd-accent);
  -webkit-text-fill-color: var(--pd-white);
}

.pd-buy-buttons .pd-btn-add-cart:hover {
  background: var(--pd-accent);
  border-color: var(--pd-accent);
  color: var(--pd-white);
  -webkit-text-fill-color: var(--pd-white);
}

/* Divider */
.pd-divider {
  width: 100%;
  height: 1px;
  background: var(--pd-border);
  margin: 28px 0 32px 0;
}

/* Add-on Products Section */
.pd-addon-section {
  margin-bottom: 32px;
}

.pd-addon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}

.pd-addon-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--pd-dark);
}

.pd-addon-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--pd-muted);
  font-weight: 400;
}

.pd-addon-toggle-icon {
  transition: transform 0.2s ease;
}

.pd-addon-toggle-icon.expanded {
  transform: rotate(180deg);
}

.pd-addon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pd-addon-card {
  background: var(--pd-card);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto 56px 1fr;
  gap: 12px;
  align-items: start;
}

.pd-addon-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-top: 2px;
  accent-color: var(--pd-dark);
}

.pd-addon-image {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--pd-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-addon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-addon-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pd-addon-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--pd-dark);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-addon-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pd-addon-price-original {
  font-size: 13px;
  color: var(--pd-muted);
  text-decoration: line-through;
}

.pd-addon-price-sale {
  font-size: 14px;
  font-weight: 600;
  color: var(--pd-dark);
}

.pd-addon-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pd-addon-options select {
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  background: var(--pd-white);
  font-size: 13px;
  color: var(--pd-dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232b2724' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.pd-addon-qty {
  width: 100px;
  height: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  overflow: hidden;
}

.pd-addon-qty button,
.pd-addon-qty span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--pd-dark);
  background: transparent;
  border: none;
  cursor: pointer;
}

.pd-addon-qty button:hover:not(:disabled) {
  background: var(--pd-bg);
}

.pd-addon-qty button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pd-addon-limit {
  font-size: 12px;
  color: var(--pd-muted);
  font-style: italic;
}

.pd-addon-add-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 18px;
  background: var(--pd-dark);
  color: var(--pd-white);
  border: none;
  border-radius: var(--pd-radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.pd-addon-add-btn:hover {
  background: #000;
}

/* Cart add-on badge */
.cart-item.is-addon {
  background: #faf8f5;
  border-left: 0;
}
.cart-addon-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  background: #8e7a6a;
  color: #fff;
  border-radius: 3px;
  margin-top: 3px;
}
.cart-item-addon-original {
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
}

/* Product Description */
.product-detail-desc {
  margin-top: 0;
  padding-top: 0;
  font-size: 14px;
  color: var(--pd-muted);
  line-height: 1.8;
}

.product-detail-desc p {
  margin-bottom: 12px;
}

/* === PRODUCT TABS === */
.product-tabs-section {
  grid-column: 1 / -1;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--border-light);
}

.product-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.product-tab {
  background: none;
  border: none;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.product-tab:hover {
  color: var(--text-primary);
}

.product-tab.active {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom-color: var(--text-primary);
}

.product-tab-content {
  padding: 40px 0;
  display: none;
}

.tab-content-inner {
  max-width: 800px;
}

.tab-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 24px;
  white-space: pre-line;
}

.tab-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.tab-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* === CHECKOUT PAGE — Redesigned === */
.ck-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.ck-page-title {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 8px 0 24px;
  letter-spacing: 0.5px;
}

/* Fraud Warning — compact */
.ck-fraud-banner {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.ck-fraud-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Card base */
.ck-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ck-card-header {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ck-card-icon { opacity: 0.5; flex-shrink: 0; }
.ck-card-body { padding: 20px; }

/* Product Table */
.ck-product-card { margin-bottom: 16px; }
.ck-product-table { padding: 0; }
.ck-product-thead {
  display: grid;
  grid-template-columns: 1fr 80px 100px 80px 36px;
  gap: 12px;
  padding: 10px 20px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
  font-weight: 500;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ck-pt-price, .ck-pt-qty, .ck-pt-subtotal { text-align: center; }
.checkout-product-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px 80px 36px;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #f5f5f5;
  align-items: center;
  transition: background 0.15s;
}
.checkout-product-row:hover { background: #fcfcfc; }
.checkout-product-row:last-child { border-bottom: none; }

/* Product info with image */
.pd-col-product {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.pd-product-image {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f2ee;
}
.pd-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pd-product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f2ee;
  color: #bbb;
  font-size: 10px;
}
.pd-product-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}
.pd-product-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-product-variant {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.pd-price { text-align: center; font-size: 14px; font-weight: 500; color: #333; }
.pd-qty-control {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden;
  width: 88px; margin: 0 auto; height: 30px;
}
.pd-qty-btn {
  width: 28px; height: 100%; border: none; background: #f7f7f7;
  cursor: pointer; font-size: 14px; display: flex; align-items: center;
  justify-content: center; color: #555; transition: background 0.15s, color 0.15s;
}
.pd-qty-btn:hover { background: #eee; color: #333; }
.pd-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f7f7f7;
  color: #bbb;
}
.pd-qty-value {
  width: 32px; text-align: center; font-size: 13px; font-weight: 500;
  border: none; border-left: 1px solid #eee; border-right: 1px solid #eee;
  line-height: 30px; background: #fff;
}
.pd-subtotal { text-align: center; font-size: 14px; font-weight: 600; color: #333; }
.pd-delete-btn {
  background: none; border: none; cursor: pointer; color: #bbb;
  padding: 4px; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s; margin: 0 auto;
}
.pd-delete-btn:hover { color: #e74c3c; }

/* Two-column layout */
.ck-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* Member prompt */
.ck-member-prompt {
  padding: 14px 20px;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ck-member-login-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.ck-member-login-link:hover { border-bottom-color: var(--accent); }

/* Method grid (payment / shipping cards) */
.ck-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.payment-method-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.15s, box-shadow 0.15s;
  background: #fff;
  font-size: 14px;
  margin-bottom: 0;
  user-select: none;
}
.payment-method-btn:hover {
  border-color: #ccc;
  background: #fafafa;
}
.payment-method-btn.selected {
  border-color: var(--accent);
  background: rgba(196, 145, 123, 0.04);
  box-shadow: 0 0 0 1px var(--accent);
}
.payment-radio-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #d0d0d0; position: relative;
  flex-shrink: 0; transition: border-color 0.2s;
}
.payment-method-btn.selected .payment-radio-dot {
  border-color: var(--accent);
}
.payment-method-btn.selected .payment-radio-dot::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.payment-method-label { flex: 1; font-size: 14px; color: #333; }

/* Shipping method cards — same style */
.shipping-method-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.15s, box-shadow 0.15s;
  background: #fff;
  font-size: 14px;
  user-select: none;
}
.shipping-method-card:hover { border-color: #ccc; background: #fafafa; }
.shipping-method-card.selected {
  border-color: var(--accent);
  background: rgba(196, 145, 123, 0.04);
  box-shadow: 0 0 0 1px var(--accent);
}
.shipping-method-card.selected .payment-radio-dot {
  border-color: var(--accent);
}
.shipping-method-card.selected .payment-radio-dot::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

/* CVS Store Section */
.ck-cvs-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.ck-cvs-label { font-size: 13px; font-weight: 500; color: #666; margin-bottom: 10px; }
.ck-cvs-selected {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  padding: 14px 16px; background: #f9f8f6; border-radius: 8px;
  margin-bottom: 12px;
}
.ck-cvs-selected-info { min-width: 0; }
.ck-cvs-store-name { font-weight: 500; font-size: 14px; color: #333; margin-bottom: 2px; }
.ck-cvs-store-addr { font-size: 13px; color: #888; }
.ck-cvs-store-id { font-size: 12px; color: #aaa; margin-top: 2px; }
.ck-btn-outline-sm {
  padding: 6px 14px; background: #fff; border: 1px solid #ddd;
  border-radius: 6px; font-size: 13px; cursor: pointer; color: #666;
  transition: border-color 0.2s, color 0.2s;
}
.ck-btn-outline-sm:hover { border-color: #bbb; color: #333; }
.ck-cvs-selector { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ck-cvs-placeholder {
  flex: 1; min-width: 180px; padding: 12px 16px;
  background: #f5f5f5; border-radius: 8px; color: #999; font-size: 14px;
}
.ck-btn-primary {
  padding: 10px 20px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.2s;
}
.ck-btn-primary:hover { background: var(--accent-dark); }

/* Form fields */
.ck-form-row { margin-bottom: 16px; }
.ck-form-row:last-child { margin-bottom: 0; }
.ck-field { width: 100%; }
.ck-label {
  display: block; font-size: 13px; color: #666;
  margin-bottom: 6px; font-weight: 500;
}
.ck-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 14px; font-family: var(--font-body);
  background: #fff; color: #333; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 42px;
}
.ck-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(196,145,123,0.12);
}
.ck-textarea {
  width: 100%; padding: 10px 14px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 14px; font-family: var(--font-body);
  background: #fff; color: #333; outline: none;
  resize: vertical; transition: border-color 0.2s, box-shadow 0.2s;
}
.ck-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(196,145,123,0.12);
}

/* Checkbox rows */
.ck-checks-group { display: flex; flex-direction: column; gap: 12px; }
.ck-checkbox-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: #555; cursor: pointer;
  user-select: none;
}
.ck-checkbox-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px; height: 16px;
  cursor: pointer;
}
.terms-link { color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Recipient fields */
.ck-recipient-fields {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

/* Right Sidebar — Sticky */
.ck-right { position: relative; }
.ck-summary-sticky {
  position: sticky;
  top: 80px;
}
.ck-summary-section {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.ck-summary-header {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ck-summary-header.collapsible { cursor: pointer; }
.collapse-icon { font-size: 10px; color: #999; }
.ck-summary-body { padding: 16px; }
.ck-summary-count { font-size: 13px; color: #888; margin-bottom: 10px; }
.ck-summary-items { max-height: 180px; overflow-y: auto; }
.ck-summary-item {
  display: flex; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid #f5f5f5; align-items: center;
}
.ck-summary-item:last-child { border-bottom: none; }
.ck-summary-item-info { flex: 1; min-width: 0; }
.ck-summary-item-name {
  font-size: 13px; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-summary-item-qty { font-size: 12px; color: #999; }

/* Coupon */
.ck-coupon-wrap { display: flex; gap: 8px; }
.ck-coupon-input {
  flex: 1; padding: 9px 12px; border: 1px solid #ddd;
  border-radius: 8px; font-size: 13px; outline: none;
  font-family: var(--font-body); transition: border-color 0.2s;
}
.ck-coupon-input:focus { border-color: var(--accent); }
.ck-coupon-btn {
  padding: 9px 16px; background: #777; color: #fff;
  border: none; border-radius: 8px; font-size: 13px;
  cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.ck-coupon-btn:hover { background: #555; }

/* Total breakdown */
.ck-total-breakdown { padding: 0; }
.ck-total-row {
  display: flex; justify-content: space-between;
  padding: 7px 0; font-size: 14px; color: #555;
}
.ck-total-discount-label { color: var(--accent); }
.ck-total-discount-val { color: var(--accent); }
.ck-total-due {
  border-top: 1px solid #eee; margin-top: 8px;
  padding-top: 12px; font-weight: 600; color: #333;
}
.ck-total-due-amount {
  color: var(--accent); font-size: 20px; font-weight: 700;
}

/* Submit button */
.ck-submit-btn {
  width: 100%; padding: 15px 24px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 600;
  cursor: pointer; letter-spacing: 1px;
  transition: background 0.2s, transform 0.1s;
  margin-top: 4px;
}
.ck-submit-btn:hover { background: var(--accent-dark); }
.ck-submit-btn:active { transform: scale(0.99); }

/* === PAGE VIEWS (hidden by default) === */
.page-view { display: none; }
.page-view.active { display: block; }

/* === ORDER INQUIRY === */
.order-inquiry-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.inquiry-section {
  padding: 34px 0 48px;
}
.order-inquiry-heading {
  text-align: center;
  margin-bottom: 24px;
}
.order-inquiry-heading h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.order-inquiry-heading p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.order-inquiry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 0;
  align-items: stretch;
}
.order-inquiry-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(217, 208, 198, .5);
  box-shadow: 0 4px 18px rgba(45, 41, 38, .055);
}
.order-inquiry-form-card {
  padding: 26px 40px 24px;
  border-radius: 8px 0 0 8px;
}
.order-inquiry-field { margin-bottom: 14px; }
.order-inquiry-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.order-inquiry-field input {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 50px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
  box-sizing: border-box;
}
.order-inquiry-field input::placeholder { color: #aaa29b; }
.order-inquiry-field input:focus {
  border-color: #aaa198;
  box-shadow: 0 0 0 2px rgba(196, 145, 123, .08);
}
.order-inquiry-submit {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 52px;
  margin-top: 2px;
  border: 0;
  border-radius: 999px;
  background: #242321;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
  box-sizing: border-box;
}
.order-inquiry-submit:hover { background: #353330; }
.order-inquiry-submit:active { transform: scale(.995); }
.order-inquiry-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 560px;
  margin-top: 11px;
  color: #7c726a;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.order-inquiry-security-note svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.order-inquiry-results {
  margin-top: 28px;
  text-align: left;
}
.order-inquiry-result-card {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
}
.order-inquiry-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.order-inquiry-result-number { min-width: 0; color: var(--text-primary); font-size: 15px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.order-inquiry-result-status { flex: 0 0 auto; color: var(--accent-dark); font-size: 13px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.order-inquiry-result-meta { margin-bottom: 10px; color: var(--text-secondary); font-size: 13px; font-weight: 400; line-height: 1.7; }
.order-inquiry-result-items { margin-bottom: 9px; color: var(--text-primary); font-size: 14px; font-weight: 400; line-height: 1.7; }
.order-inquiry-result-total { margin-bottom: 12px; color: var(--text-primary); font-size: 17px; font-weight: 600; line-height: 1.5; }
.order-inquiry-result-actions { padding-top: 12px; border-top: 1px solid var(--border-light); }
.order-inquiry-info-card {
  padding: 24px 34px 24px;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}
.order-inquiry-info-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 50%; background: #f5f0ea; color: var(--brand-gold); }
.order-inquiry-info-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.order-inquiry-info-card h3 { font-size: 16px; font-weight: 500; line-height: 1.5; }
.order-inquiry-divider { height: 1px; background: var(--border-light); margin: 8px 0 13px; }
.order-inquiry-info-item { display: flex; align-items: flex-start; gap: 12px; margin-top: 11px; }
.order-inquiry-info-item-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f7f3ee; color: #a88360; }
.order-inquiry-info-item-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.order-inquiry-info-item strong, .order-inquiry-info-item div > span { display: block; }
.order-inquiry-info-item strong { margin-bottom: 2px; font-size: 13px; font-weight: 500; }
.order-inquiry-info-item div > span { color: #6b6058; font-size: 13px; line-height: 1.6; }
@media (max-width: 767px) {
  .order-inquiry-container { padding: 0 20px; }
  .inquiry-section { padding: 30px 0 44px; }
  .order-inquiry-heading { margin-bottom: 22px; }
  .order-inquiry-heading h2 { font-size: 28px; }
  .order-inquiry-heading p { font-size: 13px; }
  .order-inquiry-grid { grid-template-columns: 1fr; gap: 18px; }
  .order-inquiry-form-card, .order-inquiry-info-card { padding: 20px; border-radius: 8px; border-left: 1px solid rgba(217, 208, 198, .5); }
  .order-inquiry-field input, .order-inquiry-submit, .order-inquiry-security-note { max-width: none; }
  .order-inquiry-security-note { font-size: 11.5px; }
  .order-inquiry-result-card { padding: 20px; }
  .order-inquiry-result-head { gap: 8px; }
  .order-inquiry-result-number { font-size: 14px; }
  .order-inquiry-result-status { font-size: 12px; }
  .order-inquiry-result-meta { font-size: 12.5px; }
  .order-inquiry-result-items { font-size: 13.5px; }
  .order-inquiry-result-total { font-size: 16px; }
}

/* === ANIMATIONS === */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* === TOAST NOTIFICATION === */
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--text-primary);
  color: var(--white);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 13px;
  z-index: 500;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* === CENTER CART ADDED TOAST === */
.cart-center-toast {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cart-center-toast.show {
  opacity: 1;
}
.cart-center-toast-inner {
  background: #fff;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  gap: 6px;
}
.cart-center-toast-icon {
  flex-shrink: 0;
}
.cart-center-toast-text {
  font-size: 13px;
  color: #333;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* === AUTH MODAL === */
.auth-modal-content {
  max-width: 420px;
  padding: 40px;
  max-height: 92vh;
  overflow-y: auto;
}
.auth-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 28px;
  color: var(--text-primary);
}
.auth-form .form-group {
  margin-bottom: 16px;
}
.auth-form .form-group label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.auth-form .form-group input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: var(--transition);
}
.auth-form .form-group input:focus {
  border-color: var(--accent);
}
.auth-form .field-hint {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}
.password-field {
  position: relative;
}
.password-field input {
  padding-right: 46px !important;
}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.72;
  transition: var(--transition);
}
.password-toggle:hover {
  opacity: 1;
}
.password-strength {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.5;
}
.strength-empty { color: var(--text-muted); }
.strength-weak { color: #b84b40; }
.strength-medium { color: #a27615; }
.strength-strong { color: #27764b; }
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
  cursor: pointer;
}
.terms-check input {
  margin-top: 4px;
  accent-color: var(--accent);
}
.terms-check a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.register-checklist {
  display: grid;
  gap: 5px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: rgba(196, 145, 123, 0.08);
  border: 1px solid rgba(196, 145, 123, 0.18);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
}
.register-checklist div::before {
  content: '○ ';
}
.register-checklist div.valid {
  color: #27764b;
}
.register-checklist div.valid::before {
  content: '✓ ';
}
.register-checklist div.invalid {
  color: #b84b40;
}
.register-checklist div.invalid::before {
  content: '× ';
}
.auth-form .btn-block {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.auth-form .btn-block:disabled,
.auth-form .btn-block.loading {
  opacity: 0.65;
  cursor: not-allowed;
}
.turnstile-box {
  display: flex;
  justify-content: center;
  min-height: 0;
  margin: 12px 0 8px;
}
.turnstile-box:empty {
  display: none;
}
.auth-error {
  color: var(--sale);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  min-height: 18px;
}
.login-redirect-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  color: #6d5a00;
  font-size: 13px;
  line-height: 1.6;
}
.login-redirect-hint svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #f9a825;
}
.auth-success {
  color: var(--success);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  min-height: 18px;
}
.verify-email-card {
  padding: 24px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.verify-email-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--text-primary);
  font-size: 24px;
}
.verify-email-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--text-primary);
}
.verify-email-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.8;
}

/* === POST-REGISTRATION VERIFICATION SUCCESS PAGE === */
.reg-success-container {
  padding: 8px 0 0;
}
.reg-success-header {
  text-align: center;
  margin-bottom: 24px;
}
.reg-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0f8ee;
}
.reg-success-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.reg-success-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.reg-verify-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  margin-bottom: 20px;
}
.reg-verify-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.7;
}
.reg-verify-email-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--text-primary);
}
.reg-verify-email-box svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.reg-verify-email-addr {
  font-weight: 600;
  word-break: break-all;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 14px;
}
.reg-verify-action {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0 0 18px;
}
.reg-verify-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.reg-verify-status-label {
  font-size: 13px;
  color: var(--text-muted);
}
.reg-verify-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.reg-verify-status-badge.unverified {
  background: #fff3e0;
  color: #e65100;
}
.reg-verify-status-badge.verified {
  background: #e8f5e9;
  color: #2e7d32;
}
.reg-verify-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.reg-verify-status-badge.unverified .reg-verify-status-dot {
  background: #e65100;
}
.reg-verify-status-badge.verified .reg-verify-status-dot {
  background: #2e7d32;
}
.reg-resend-section {
  border-top: 1px dashed var(--border);
  padding-top: 16px;
}
.reg-resend-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 12px;
}
.reg-resend-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.reg-resend-btn:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--text-muted);
}
.reg-resend-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.reg-resend-msg {
  margin-top: 10px;
  font-size: 12px;
  min-height: 18px;
}
.reg-success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.reg-back-login-link {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 4px;
}
.reg-back-login-link:hover {
  color: var(--text-primary);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}
.btn-social {
  width: 100%;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 10px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-social:hover {
  border-color: var(--text-secondary);
  background: var(--bg-secondary);
}
.btn-facebook:hover { border-color: #1877f2; }
.btn-google:hover { border-color: #4285F4; }
.btn-line {
  background: #06C755 !important;
  color: #ffffff !important;
  border: none !important;
}
.btn-line:hover {
  background: #05b04c !important;
}
.auth-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}
.auth-footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  transition: var(--transition);
}
.auth-footer-links a:hover {
  color: var(--accent);
}

/* Return Policy Modal */
.return-policy-modal {
  max-width: 600px;
  padding: 40px;
}

.return-policy-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.return-policy-content {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.return-policy-content p {
  margin-bottom: 20px;
}

.policy-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.policy-section h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.policy-section ul {
  list-style: none;
  padding: 0;
}

.policy-section li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.policy-section li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 18px;
  line-height: 1.5;
}

/* Brand Story Modal */
.brand-story-modal {
  max-width: 500px;
  padding: 60px 40px;
  text-align: center;
}

.brand-story-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.brand-story-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 8px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.brand-story-en {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 1px;
}

.brand-story-zh {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 400;
}

.brand-story-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* === EDITORIAL PAGE (選物誌) === */
.editorial-section {
  padding: 40px 0 80px;
}

.editorial-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
}

.editorial-back-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: var(--transition);
  font-family: var(--font-body);
}

.editorial-back-btn:hover {
  color: var(--accent);
}

.editorial-page-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.editorial-page-desc {
  font-size: 14px;
  color: var(--text-muted);
}

.editorial-controls {
  display: flex;
  gap: 12px;
}

.editorial-select {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  transition: var(--transition);
}

.editorial-select:hover,
.editorial-select:focus {
  border-color: var(--accent);
}

.editorial-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
}

.editorial-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.editorial-categories {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editorial-category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
  color: var(--text-secondary);
}

.editorial-category-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.editorial-category-item.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 400;
}

.editorial-category-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 300;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.editorial-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid var(--border-light);
}

.editorial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.editorial-card-image {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.editorial-card-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.4;
}

.editorial-card-image-placeholder svg {
  width: 48px;
  height: 48px;
}

.editorial-card-tag {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 400;
  backdrop-filter: blur(8px);
}

.editorial-card-content {
  padding: 20px;
}

.editorial-card-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-card-excerpt {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.editorial-card-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.editorial-card-likes {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
}

.editorial-card-likes svg {
  width: 14px;
  height: 14px;
}

.editorial-load-more-wrap {
  text-align: center;
  padding: 20px 0;
}

.editorial-load-more {
  padding: 12px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  transition: var(--transition);
}

.editorial-load-more:hover {
  background: var(--text-primary);
  color: var(--white);
  border-color: var(--text-primary);
}

/* Article Detail */
.article-detail-section {
  padding: 40px 0 80px;
}

.article-detail {
  max-width: 800px;
  margin: 0 auto;
}

.article-detail-header {
  margin-bottom: 40px;
}

.article-detail-category {
  display: inline-block;
  padding: 6px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.article-detail-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.article-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.article-detail-cover {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
}

.article-detail-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.4;
}

.article-detail-cover-placeholder svg {
  width: 64px;
  height: 64px;
}

.article-detail-content {
  font-size: 15px;
  line-height: 2;
  color: var(--text-primary);
}

.article-detail-content p {
  margin-bottom: 24px;
}

.article-detail-content h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin: 40px 0 20px;
  color: var(--text-primary);
}

.article-detail-content h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 32px 0 16px;
  color: var(--text-primary);
}

.article-detail-content ul,
.article-detail-content ol {
  margin: 20px 0;
  padding-left: 24px;
}

.article-detail-content li {
  margin-bottom: 12px;
  line-height: 1.8;
}

.article-detail-content blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.article-detail-actions {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: center;
}

.article-like-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
  color: var(--text-secondary);
  font-family: var(--font-body);
}

.article-like-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.article-like-btn.liked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.article-like-btn svg {
  width: 18px;
  height: 18px;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px 20px; }
}

@media (max-width: 968px) {
  .hero-carousel { height: 55vh; min-height: 440px; }
  .carousel-slide { grid-template-columns: 1fr; }
  .carousel-panel.panel-right { display: none; }
  .panel-overlay { padding: 30px 28px 60px; padding-top: 60px; }
  .panel-title { font-size: 28px; }
  /* Tablet: Hide arrows, use swipe */
  .carousel-arrow { display: none; }
  /* Tablet: Smaller CTA */
  .btn-panel { height: 38px; padding: 0 22px; font-size: 13px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
  .product-detail { grid-template-columns: 1fr; gap: 30px; }
  .product-breadcrumb { font-size: 15px; }
  .breadcrumb-link { padding: 8px 12px; min-height: 40px; }
  /* Tablet: product detail */
  .product-detail-info .product-name { font-size: 22px; }
  .pd-buy-buttons { grid-template-columns: 1fr 1fr; }
  .pd-addon-card { grid-template-columns: auto 52px 1fr; gap: 10px; padding: 14px; }
  .pd-addon-image { width: 52px; height: 52px; }
  .checkout-layout { grid-template-columns: 1fr; }
  .ck-right { order: 2; }
  .ck-summary-sticky { position: static; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 20px; }
  .header-left nav { display: none; }
  .editorial-layout { grid-template-columns: 1fr; }
  .editorial-sidebar { position: static; }
  .editorial-categories { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .editorial-header { flex-direction: column; gap: 20px; }
  .article-detail-title { font-size: 32px; }

  /* Cart drawer tablet */
  .cart-drawer { width: 400px; right: -400px; }
  .cart-item { grid-template-columns: 1fr 72px 96px 72px 32px; }
  .cart-item-image { width: 80px; height: 80px; }

  /* Checkout product table tablet */
  .ck-product-thead { grid-template-columns: 1fr 80px 100px 80px 36px; }
  .checkout-product-row { grid-template-columns: 1fr 80px 100px 80px 36px; }
  .pd-product-image { width: 56px; height: 56px; }
}

/* Performance Phase 1: hero media is rendered by <picture>/<video>.
   Do not also request the same image as a mobile CSS background. */

@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .filter-tabs { gap: 8px; }
  .filter-tab { padding: 8px 16px; font-size: 12px; }
  .product-breadcrumb { font-size: 14px; gap: 6px; padding: 10px 0; }
  .breadcrumb-link { padding: 8px 10px; min-height: 40px; }
  .breadcrumb-separator { font-size: 16px; }
  
  /* Product detail mobile */
  .product-detail { gap: 24px; padding: 30px 0; }
  .product-detail-info .product-name { font-size: 20px; margin-bottom: 14px; }
  .product-detail-info .product-price { margin-bottom: 20px; }
  .product-detail-info .product-price .current { font-size: 22px; }
  .product-detail-info .product-price .original { font-size: 14px; }
  .product-option-group { margin-bottom: 16px; }
  .product-option-group label { font-size: 12px; margin-bottom: 8px; }
  .option-btn { padding: 8px 14px; font-size: 13px; }
  .qty-control { height: 42px; margin-bottom: 20px; }
  .pd-buy-buttons { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pd-btn { height: 44px; font-size: 14px; }
  .pd-divider { margin: 24px 0 28px 0; }
  .pd-addon-card { grid-template-columns: auto 48px 1fr; gap: 10px; padding: 12px; }
  .pd-addon-image { width: 48px; height: 48px; }
  .pd-addon-name { font-size: 13px; }
  .pd-addon-options { flex-direction: column; align-items: stretch; gap: 8px; }
  .pd-addon-options select { width: 100%; }
  .pd-addon-qty { width: 100%; }
}

@media (max-width: 600px) {
  .hero-carousel { height: 50vh; min-height: 360px; }
  .panel-title { font-size: 24px; }
  .panel-subtitle { font-size: 12px; margin-bottom: 16px; }
  /* Mobile: Smaller CTA */
  .btn-panel { height: 38px; padding: 0 18px; font-size: 13px; }
  .panel-overlay { padding: 24px 20px 54px; padding-top: 50px; }
  /* Mobile: Arrows already hidden, use swipe */
  .carousel-arrow { display: none; }
  .carousel-pagination { bottom: 14px; gap: 7px; padding: 6px 10px; }
  .carousel-pagination .dot { width: 7px; height: 7px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .wishlist-drawer { width: 100%; right: -100%; }
  .editorial-grid { grid-template-columns: 1fr; }
  .article-detail-title { font-size: 28px; }
  .editorial-page-title { font-size: 28px; }
  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 7px 13px; font-size: 12px; }
  .product-info { padding: 10px 2px 2px; }
  .product-name { font-size: 13px; }
  .product-price .current { font-size: 13px; }
  .product-price .original { font-size: 12px; }
  
  /* Header mobile */
  .header-inner { padding: 12px 0; }
  .brand-logo { font-size: 24px; letter-spacing: 5px; }
  .header-right { gap: 14px; }
  .header-right svg { width: 18px; height: 18px; }
  
  /* Utility bar mobile */
  .utility-bar { padding: 8px 0; font-size: 11px; }
  .utility-bar .container { flex-direction: column; gap: 6px; }
  .utility-bar .promo-text { font-size: 11px; }
  .utility-bar .utility-links { gap: 12px; }
  .utility-bar .utility-links a { font-size: 11px; }
  
  /* Lookbook mobile */
  .lookbook-section { padding: 50px 20px; margin: 0; }
  .lookbook-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lookbook-title { font-size: 28px; }
  
  /* Trust section mobile */
  .trust-section { padding: 40px 0; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .trust-item { padding: 16px 12px; }
  .trust-title { font-size: 12px; }
  .trust-desc { font-size: 11px; }
  
  /* Product detail mobile */
  .product-detail { gap: 24px; padding: 30px 0; }
  .product-detail-info .product-name { font-size: 20px; margin-bottom: 14px; }
  .product-detail-info .product-price { margin-bottom: 20px; }
  .product-detail-info .product-price .current { font-size: 22px; }
  .product-detail-info .product-price .original { font-size: 14px; }
  .product-option-group { margin-bottom: 16px; }
  .product-option-group label { font-size: 12px; margin-bottom: 8px; }
  .option-btn { padding: 8px 14px; font-size: 13px; }
  .qty-control { height: 42px; margin-bottom: 20px; }
  .pd-buy-buttons { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pd-btn { height: 44px; font-size: 14px; }
  .pd-divider { margin: 24px 0 28px 0; }
  .pd-addon-card { grid-template-columns: auto 48px 1fr; gap: 10px; padding: 12px; }
  .pd-addon-image { width: 48px; height: 48px; }
  .pd-addon-name { font-size: 13px; }
  .pd-addon-options { flex-direction: column; align-items: stretch; gap: 8px; }
  .pd-addon-options select { width: 100%; }
  .pd-addon-qty { width: 100%; }
  
  /* Product tabs mobile */
  .product-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .product-tab { padding: 14px 20px; font-size: 13px; white-space: nowrap; }
  .tab-images { grid-template-columns: 1fr; }
  
  /* Checkout mobile */
  .ck-container { padding: 16px 12px 40px; }
  .ck-page-title { font-size: 19px; margin-bottom: 16px; }
  .ck-layout { grid-template-columns: 1fr; gap: 16px; }
  .ck-right { order: 2; }
  .ck-summary-sticky { position: static; }
  .ck-product-thead { display: none; }
  .checkout-product-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    align-items: center;
  }
  .pd-col-product {
    flex: 1 1 100%;
    min-width: 0;
  }
  .pd-product-image {
    width: 56px;
    height: 56px;
  }
  .pd-price {
    text-align: left;
    font-size: 13px;
    flex: 0 0 auto;
  }
  .pd-price::before { content: '單價：'; color: #999; font-weight: 400; }
  .pd-qty-control { margin: 0; width: 88px; }
  .pd-subtotal {
    text-align: left;
    font-size: 13px;
    flex: 0 0 auto;
  }
  .pd-subtotal::before { content: '小計：'; color: #999; font-weight: 400; }

  /* Cart drawer mobile – sidebar style (≤767px handled below) */
  .cart-col-headers { display: none; }
  .cart-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
  }
  .cart-item-product { margin-bottom: 4px; }
  .cart-item-image { width: 64px; height: 64px; }
  .cart-item-price { text-align: left; font-size: 13px; }
  .cart-item-price::before { content: '單價：'; color: var(--text-muted); font-weight: 400; }
  .cart-item-subtotal { text-align: left; font-size: 13px; }
  .cart-item-subtotal::before { content: '小計：'; color: var(--text-muted); font-weight: 400; }
  .cart-item-qty { margin: 0; }
  .cart-item-remove { position: absolute; right: 0; top: 12px; }
  .cart-item { position: relative; }
  .ck-method-grid { grid-template-columns: 1fr; }
  .ck-fraud-banner { margin-bottom: 16px; }
  .ck-submit-btn { font-size: 15px; padding: 14px 20px; }
  
  /* Modal mobile */
  .modal-content { padding: 28px 20px; max-width: 95%; }
  .auth-modal-content { padding: 28px 20px; }
  .auth-footer-links { flex-direction: column; gap: 12px; align-items: center; }
  
  /* Search mobile */
  .search-box { padding: 0 20px; }
  .search-input-wrap input { font-size: 18px; padding: 14px 0; }
  .search-close { top: 20px; right: 20px; font-size: 28px; }
  .search-hot-tags { margin-bottom: 20px; }
  .search-hot-tags-title { font-size: 13px; margin-bottom: 10px; }
  .search-hot-tag { padding: 6px 14px; font-size: 12px; }
  
  /* FAB mobile - overridden by ≤767px block */
  .fab-cart-badge { font-size: 10px; min-width: 16px; height: 16px; }
}

/* === LINE POPUP MODAL === */
.line-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  animation: fadeIn 0.4s ease;
}

.line-popup-overlay.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.line-popup-modal {
  width: 354px;
  height: 634px;
  max-width: 95vw;
  max-height: 90vh;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: popupSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.line-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 10;
  line-height: 1;
}

.line-popup-close:hover {
  background: var(--white);
  color: var(--text-primary);
  transform: rotate(90deg);
}

.line-popup-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.line-popup-image {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8ddd1 0%, #d4c4b0 100%);
  height: 280px;
  flex-shrink: 0;
}

.line-popup-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-popup-image-placeholder svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.line-popup-content {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  flex: 1;
}

.line-popup-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}

.line-popup-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.line-popup-desc {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-weight: 300;
}

.line-popup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #06C755;
  color: var(--white);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: var(--transition);
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(6, 199, 85, 0.2);
  align-self: center;
}

.line-popup-cta:hover {
  background: #05b34c;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 199, 85, 0.3);
}

.line-popup-cta svg {
  width: 18px;
  height: 18px;
}

.line-popup-skip {
  display: block;
  text-align: center;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 300;
  transition: var(--transition);
}

.line-popup-skip:hover {
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .line-popup-modal {
    width: 90vw;
    height: auto;
    max-height: 85vh;
  }

  .line-popup-image {
    height: 200px;
  }

  .line-popup-content {
    padding: 24px 20px;
  }

  .line-popup-title {
    font-size: 16px;
  }

  .line-popup-desc {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .line-popup-cta {
    padding: 12px 28px;
    font-size: 13px;
  }
}

/* ============================================
   DYNAMIC POPUP SYSTEM
   ============================================ */
.dynamic-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}
.dynamic-popup-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  animation: popupSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.dynamic-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.dynamic-popup-close:hover {
  background: var(--white);
  color: var(--text-primary);
  transform: rotate(90deg);
}
.dynamic-popup-image {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  flex-shrink: 0;
}
.dynamic-popup-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dynamic-popup-body {
  padding: 28px 32px 32px;
  text-align: center;
  overflow-y: auto;
}
.dynamic-popup-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.dynamic-popup-subtitle {
  font-size: 14px;
  color: var(--accent-dark);
  margin-bottom: 12px;
  font-weight: 400;
}
.dynamic-popup-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
}
.dynamic-popup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dynamic-popup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 36px;
  background: var(--text-primary);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  min-width: 200px;
}
.dynamic-popup-cta:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.dynamic-popup-secondary {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px;
  transition: color 0.2s;
  font-family: var(--font-body);
}
.dynamic-popup-secondary:hover {
  color: var(--text-primary);
}

@keyframes dynamicPopupSoftEnter {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (min-width: 769px) {
  .dynamic-popup-overlay {
    background: rgba(35, 30, 27, 0.42);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.25s ease;
  }

  .dynamic-popup-modal {
    width: 390px;
    height: 600px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    border-radius: 20px;
    background: #fbf7f3;
    box-shadow: 0 18px 48px rgba(49, 39, 31, 0.18);
    animation: dynamicPopupSoftEnter 0.25s ease both;
  }

  .dynamic-popup-close {
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    font-size: 17px;
    color: #ffffff;
    background: rgba(145, 119, 96, 0.72);
    box-shadow: 0 4px 12px rgba(49, 39, 31, 0.16);
  }

  .dynamic-popup-close:hover {
    color: #ffffff;
    background: rgba(111, 76, 53, 0.86);
    transform: none;
  }

  .dynamic-popup-image {
    height: 390px;
    max-height: 390px;
    background: #efe4da;
  }

  .dynamic-popup-image img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .dynamic-popup-body {
    height: 210px;
    padding: 22px 34px 18px;
    background: #fbf7f3;
    overflow-y: auto;
  }

  .dynamic-popup-title {
    font-size: 23px;
    line-height: 1.45;
    margin-bottom: 8px;
    color: #6f4c35;
  }

  .dynamic-popup-subtitle {
    font-size: 13px;
    margin-bottom: 8px;
    color: #9c8b7d;
  }

  .dynamic-popup-desc {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 14px;
    color: #9a8d83;
  }

  .dynamic-popup-actions {
    gap: 8px;
  }

  .dynamic-popup-cta {
    min-width: 220px;
    padding: 10px 28px;
    border-radius: 0;
    background: #9b7b63;
    color: #ffffff;
    font-size: 13px;
  }

  .dynamic-popup-cta:hover {
    background: #7f634e;
    transform: none;
  }

  .dynamic-popup-secondary {
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .dynamic-popup-modal {
    width: 94vw;
    max-height: 85vh;
    border-radius: var(--radius-md);
  }
  .dynamic-popup-body {
    padding: 20px 20px 28px;
  }
  .dynamic-popup-title {
    font-size: 17px;
  }
  .dynamic-popup-desc {
    font-size: 12px;
  }
  .dynamic-popup-cta {
    padding: 11px 28px;
    font-size: 13px;
    min-width: 180px;
  }
}

/* ============================================
   DETAIL GALLERY (Product Detail Page)
   ============================================ */
.detail-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.detail-gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}
.detail-gallery-slide {
  min-width: 100%;
  height: 100%;
}
.detail-gallery-slide img,
.detail-gallery-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.2s;
  z-index: 5;
  color: var(--text-primary);
}
.detail-gallery-arrow:hover {
  background: white;
  transform: translateY(-50%) scale(1.05);
}
.detail-gallery-prev { left: 12px; }
.detail-gallery-next { right: 12px; }
.detail-gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
  padding: 6px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.detail-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.detail-gallery-dot.active {
  background: white;
}

/* ============================================
   MOBILE PRODUCT DETAIL — New Layout
   Only applies at <1024px
   ============================================ */
.m-pdp-wrap {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Gallery ── */
.m-pdp-gallery {
  width: 100%;
}
.m-pdp-main {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--pd-card, #f1ece5);
  overflow: hidden;
}
.m-pdp-main img,
.m-pdp-main video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.m-pdp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
  color: var(--pd-dark, #2b2724);
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.m-pdp-arrow:active {
  transform: translateY(-50%) scale(0.92);
}
.m-pdp-arrow-prev { left: 10px; }
.m-pdp-arrow-next { right: 10px; }
.m-pdp-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 6;
  color: var(--pd-dark, #2b2724);
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.m-pdp-zoom-btn:active {
  transform: scale(0.92);
}
.m-pdp-counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 5;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Thumbnail Strip ── */
.m-pdp-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-pdp-thumbs::-webkit-scrollbar { display: none; }
.m-pdp-thumb {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.m-pdp-thumb.active {
  border-color: var(--pd-dark, #2b2724);
}
.m-pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Product Info ── */
.m-pdp-info {
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
}
.m-pdp-title-block {
  border-bottom: 1px solid var(--pd-border, #d8cec3);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.m-pdp-tag {
  font-size: 13px;
  color: #a0846c;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.m-pdp-name {
  font-family: 'Noto Serif TC', 'Georgia', serif;
  font-size: 24px;
  font-weight: 500;
  color: #000;
  line-height: 1.35;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.m-pdp-tagline {
  font-family: 'Noto Serif TC', 'Georgia', serif;
  font-size: 10px;
  font-weight: 400;
  color: #8C7464;
  line-height: 1.5;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.m-pdp-desc {
  font-size: 11px;
  font-weight: 400;
  color: #333;
  line-height: 1.8;
  margin-bottom: 0;
}

/* ── Option Groups ── */
.m-pdp-option-group {
  margin-bottom: 14px;
}
.m-pdp-option-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #7a6e64;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.m-pdp-option-group .option-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Price ── */
.m-pdp-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.m-pdp-price-current {
  font-size: 22px;
  font-weight: 700;
  color: var(--pd-dark, #2b2724);
}
.m-pdp-price-original {
  font-size: 14px;
  color: #b0a598;
  text-decoration: line-through;
}
.m-pdp-discount-badge {
  background: #D96B63;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* ── Quantity ── */
.m-pdp-qty-group {
  margin-bottom: 16px;
}
.m-pdp-qty-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #7a6e64;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

/* ── Mobile Addon Section ── */
.m-pdp-addon-section {
  margin-bottom: 16px;
}
.m-pdp-addon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 4px;
  cursor: pointer;
  user-select: none;
  color: #7a6e64;
  font-size: 13px;
  font-weight: 500;
}
.m-pdp-addon-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: #9a8e84;
  font: inherit;
  cursor: pointer;
}
.m-pdp-addon-expand-btn svg {
  transition: transform 0.2s ease;
}
.m-pdp-addon-expand-btn.expanded svg {
  transform: rotate(180deg);
}
.m-pdp-addon-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-pdp-addon-extra {
  display: none;
}
.m-pdp-addon-list.is-expanded .m-pdp-addon-extra {
  display: flex;
}
.m-pdp-addon-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--pd-border, #d8cec3);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 8px;
  position: relative;
}
.m-pdp-addon-img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--pd-card, #f1ece5);
}
.m-pdp-addon-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.m-pdp-addon-info {
  flex: 1;
  min-width: 0;
  padding-right: 86px;
}
.m-pdp-addon-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--pd-dark, #2b2724);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-pdp-addon-variant {
  font-size: 11px;
  color: #9a8e84;
  margin-bottom: 2px;
}
.m-pdp-addon-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-dark, #2b2724);
}
.m-pdp-addon-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--pd-dark, #2b2724);
  cursor: pointer;
}
.m-pdp-addon-qty {
  position: absolute;
  bottom: 8px;
  right: 44px;
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--pd-border, #d8cec3);
  border-radius: 4px;
  overflow: hidden;
}
.m-pdp-addon-qty button {
  width: 28px;
  height: 26px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--pd-dark, #2b2724);
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-pdp-addon-qty button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.m-pdp-addon-qty span {
  font-size: 12px;
  min-width: 20px;
  text-align: center;
  color: var(--pd-dark, #2b2724);
}

/* ── Buy Buttons (stacked vertically) ── */
.m-pdp-buy-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 24px;
}
.m-pdp-buy-buttons .pd-btn {
  width: 100%;
  height: 48px;
  font-size: 15px;
  border-radius: 8px;
  letter-spacing: 1px;
  font-weight: 500;
}

/* ── Mobile Zoom Overlay ── */
.m-pdp-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.m-pdp-zoom-overlay img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}
.m-pdp-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile product page container */
@media (max-width: 768px) {
  #productPage .container {
    padding: 0 !important;
  }
  /* Hide old breadcrumb on mobile product detail */
  #productPage .product-breadcrumb {
    display: none;
  }
}

/* ============================================
   DESKTOP PRODUCT DETAIL — Two-Column Layout
   Only applies at ≥1024px
   ============================================ */
@media (min-width: 1024px) {
  /* Override the grid layout for desktop product detail */
  .product-detail.pdp-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    padding: 40px 0 0;
  }

  /* Breadcrumb spans full width */
  .product-detail.pdp-desktop .product-breadcrumb {
    width: 100%;
    flex: 0 0 100%;
    margin-bottom: 0;
  }

  /* LEFT COLUMN — Image Gallery */
  .pdp-left-col {
    flex: 0 0 calc(50% - 24px);
    max-width: calc(50% - 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Main image container */
  .pdp-main-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-main-image-wrap img,
  .pdp-main-image-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Main image arrow buttons */
  .pdp-main-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    transition: all 0.2s;
    z-index: 5;
    color: var(--pd-dark, #2b2724);
  }
  .pdp-main-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  .pdp-main-arrow.prev { left: 14px; }
  .pdp-main-arrow.next { right: 14px; }
  .pdp-main-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  /* Thumbnail strip */
  .pdp-thumb-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .pdp-thumb-arrow {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    transition: all 0.2s;
    color: var(--pd-dark, #2b2724);
    z-index: 2;
  }
  .pdp-thumb-arrow:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .pdp-thumb-arrow:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
  }
  .pdp-thumb-arrow.hide { display: none; }

  .pdp-thumb-scroll {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
  }

  .pdp-thumb-track {
    display: flex;
    gap: 8px;
    transition: transform 0.3s ease;
  }

  .pdp-thumb-item {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    background: var(--bg-secondary);
  }
  .pdp-thumb-item:hover {
    border-color: var(--pd-muted, #9a8e84);
  }
  .pdp-thumb-item.active {
    border-color: var(--pd-dark, #2b2724);
  }
  .pdp-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* RIGHT COLUMN — Product Info */
  .pdp-right-col {
    flex: 0 0 calc(50% - 24px);
    max-width: calc(50% - 24px);
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  /* Promo tag (e.g. 夏日限定) */
  .pdp-promo-tag {
    font-size: 13px;
    font-style: italic;
    color: var(--pd-muted, #9a8e84);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
  }

  /* Tagline above product name */
  .pdp-tagline {
    font-family: 'Noto Serif TC', 'Georgia', serif;
    font-size: 10px;
    font-weight: 400;
    color: #8C7464;
    line-height: 1.5;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
  }

  /* Product name */
  .pdp-right-col .pdp-product-name {
    font-family: 'Noto Serif TC', 'Georgia', serif;
    font-size: 24px;
    font-weight: 500;
    color: #000;
    line-height: 1.35;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }

  /* Short description */
  .pdp-short-desc {
    font-size: 11px;
    font-weight: 400;
    color: #333;
    line-height: 1.8;
    margin-bottom: 0;
  }

  /* Divider in right col */
  .pdp-section-divider {
    width: 100%;
    height: 1px;
    background: var(--pd-border, #d8cec3);
    margin: 14px 0 22px;
  }

  /* Color / Size labels */
  .pdp-right-col .product-option-group {
    margin-bottom: 16px;
  }
  .pdp-right-col .product-option-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--pd-muted, #9a8e84);
    margin-bottom: 10px;
  }

  /* Price section */
  .pdp-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .pdp-price-current {
    font-size: 26px;
    font-weight: 600;
    color: var(--pd-dark, #2b2724);
    letter-spacing: 0.5px;
  }
  .pdp-price-original {
    font-size: 16px;
    color: var(--pd-muted, #9a8e84);
    text-decoration: line-through;
    font-weight: 400;
  }
  .pdp-discount-badge {
    display: inline-block;
    background: #D96B63;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.3px;
  }

  /* Quantity in right col */
  .pdp-right-col .pd-quantity-label {
    margin-top: 0;
  }
  .pdp-right-col .qty-control {
    width: 100%;
    max-width: 100%;
  }

  /* Addon section in right col */
  .pdp-addon-wrap {
    margin: 16px 0 0;
  }
  .pdp-addon-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 10px 0;
  }
  .pdp-addon-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-dark, #2b2724);
  }
  .pdp-addon-expand-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--pd-muted, #9a8e84);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    padding: 4px 0;
  }
  .pdp-addon-expand-btn svg {
    transition: transform 0.2s;
  }
  .pdp-addon-expand-btn.expanded svg {
    transform: rotate(180deg);
  }

  .pdp-addon-body {
    display: block;
    padding: 8px 0 0;
  }
  .pdp-addon-body.open {
    display: block;
  }
  /* Show only the first add-on by default; expand reveals the rest. */
  #pdAddonSection .pd-addon-extra {
    display: none;
  }
  .pdp-addon-body.is-expanded #pdAddonSection .pd-addon-extra {
    display: grid;
  }

  .pdp-right-col .qty-control,
  .m-pdp-qty-group .qty-control {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    justify-content: stretch;
  }

  .pdp-right-col .qty-control button,
  .m-pdp-qty-group .qty-control button {
    width: 100%;
  }

  /* Buy buttons in right col */
  .pdp-right-col .pd-buy-buttons {
    margin-bottom: 24px;
    margin-top: 20px;
  }

  /* Tabs section spans full width */
  .product-detail.pdp-desktop .product-tabs-section {
    width: 100%;
    flex: 0 0 100%;
    margin-top: 48px;
  }
}

/* === PRODUCT PAGINATION === */
.product-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  padding: 24px 0;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}

.pagination-btn:hover:not(.disabled):not(.active) {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.pagination-btn.active {
  background: var(--text-primary);
  color: var(--white);
  border-color: var(--text-primary);
  font-weight: 500;
}

.pagination-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: var(--text-muted);
  font-size: 14px;
  letter-spacing: 2px;
}

/* === Payment method button styles — defined in checkout section above === */

/* Checkout page description */
#checkoutPageDescription {
  line-height: 1.7;
}

#checkoutPageDescription img {
  max-width: 100%;
  border-radius: 8px;
}

/* Return/purchase complete page description */
#purchaseCompleteDescription img,
#returnCompleteDescription img {
  max-width: 100%;
  border-radius: 8px;
}

/* Applied Promotions Section */
.applied-promotions-list {
  padding: 16px;
  background: white;
}

.promotion-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.promotion-item:last-child {
  border-bottom: none;
}

.promotion-check {
  margin-right: 12px;
  flex-shrink: 0;
}

.promotion-name {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.promotion-discount {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent, #c4917b);
  margin-left: 12px;
}

/* Terms & Privacy Policy Page */
.terms-privacy-section {
  padding: 20px 0 60px;
}

.terms-privacy-title {
  font-size: 28px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
  text-align: center;
}

.terms-privacy-intro {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 32px;
  padding: 20px;
  background: #f9f7f5;
  border-radius: 8px;
}

.terms-privacy-block {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
}

.terms-privacy-block:last-child {
  border-bottom: none;
}

.terms-privacy-block h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.terms-privacy-block p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 12px;
}

.terms-privacy-block p:last-child {
  margin-bottom: 0;
}

.terms-privacy-block ul {
  margin: 12px 0;
  padding-left: 24px;
}

.terms-privacy-block ul li {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 8px;
}

.terms-privacy-block ol {
  margin: 12px 0;
  padding-left: 24px;
  list-style-type: decimal;
  font-family: var(--font-body);
}

.terms-privacy-block ol li {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 8px;
  font-family: var(--font-body);
}

.terms-privacy-block h1 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  font-family: var(--font-body);
}

.terms-privacy-block h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  font-family: var(--font-body);
}

.terms-link {
  color: var(--accent, #c4917b);
  cursor: pointer;
  text-decoration: underline;
}

.terms-link:hover {
  color: #a87a63;
}

/* === Floating Action Buttons === */
.fab-container {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
  pointer-events: none;
}

.fab-btn {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.fab-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.fab-btn:active {
  transform: scale(0.95);
}

/* Cart button - matches site accent tone */
.fab-cart {
  background: #c4917b;
  color: #fff;
  position: relative;
}

.fab-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #333;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 4px;
}

/* Back to top button */
.fab-top {
  background: #fff;
  color: #333;
  border: 1px solid #e0e0e0;
}

/* Hide back-to-top when near top */
.fab-top.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.6);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Show state — ensure visibility is restored */
.fab-top:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* LINE FAB image - fill button with proper proportions */
.fab-line {
  background: transparent;
  padding: 0;
}

.fab-line img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ========================================
   UTILITY NAV BAR - BLACK STYLE
   ======================================== */
.utility-nav {
  background: #1a1a1a !important;
  border-bottom: 1px solid #333;
}
.utility-nav .promo-text {
  color: #ccc !important;
  font-size: 12px;
}
.utility-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.utility-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: #e0e0e0 !important;
  font-size: 12px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s;
  white-space: nowrap;
}
.utility-nav-links a svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.utility-nav-links a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
}
.utility-nav-links a.active {
  background: rgba(196,145,123,0.18);
  color: #e8c4b0 !important;
  border-bottom: 2px solid #c4917b;
}
.utility-nav-links a .line-icon-svg {
  filter: none;
}

/* ========================================
   MEMBER CENTER
   ======================================== */
.member-center-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px 60px;
}
.member-center-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.member-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #8a7e74);
  font-size: 13px;
  padding: 6px 0;
  transition: color 0.2s;
}
.member-back-btn:hover { color: var(--text-primary, #2d2926); }
.member-back-btn svg { width: 16px; height: 16px; }
.member-center-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--text-primary, #2d2926);
  letter-spacing: 0.04em;
}

.member-center-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* Sidebar */
.member-sidebar {
  position: sticky;
  top: 100px;
}
.member-profile-card {
  background: #fff;
  border: 1px solid var(--border-light, #ece6de);
  border-radius: var(--radius-md, 12px);
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 16px;
}
.member-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5efe7 0%, #e8dfd4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.member-avatar svg { width: 30px; height: 30px; stroke: #a08b7a; }
.member-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #2d2926);
  margin-bottom: 2px;
}
.member-email {
  font-size: 12px;
  color: var(--text-muted, #8a7e74);
  margin-bottom: 14px;
  word-break: break-all;
}
.member-stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  border-top: 1px solid var(--border-light, #ece6de);
  padding-top: 14px;
}
.member-stat { text-align: center; }
.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #2d2926);
}
.stat-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #8a7e74);
  margin-top: 2px;
}

.member-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--border-light, #ece6de);
  border-radius: var(--radius-md, 12px);
  padding: 8px;
}
.member-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text-secondary, #5c5044);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.15s;
}
.member-nav-item:hover {
  background: #faf7f2;
  color: var(--text-primary, #2d2926);
}
.member-nav-item.active {
  background: linear-gradient(135deg, #f5efe7 0%, #eee5d9 100%);
  color: var(--text-primary, #2d2926);
  font-weight: 600;
}
.member-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Member Segmented Control */
.member-segmented-control {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.member-segmented-control::-webkit-scrollbar {
  display: none;
}

.segment-btn {
  flex: 1;
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
}

.segment-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.segment-btn:hover:not(.active) {
  background: #F9FAFB;
  color: #374151;
}

.segment-btn.active {
  background: #2D2723;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .member-segmented-control {
    gap: 0;
  }
  
  .segment-btn {
    height: 48px;
    font-size: 14px;
    padding: 0 16px;
  }
  
  .segment-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Content area */
.member-content {
  min-height: 500px;
}
.member-tab-header h2 {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-primary, #2d2926);
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}
.member-tab { display: none; }
.member-tab.active { display: block; }

/* Profile form */
.profile-form-card {
  background: #fff;
  border: 1px solid var(--border-light, #ece6de);
  border-radius: var(--radius-md, 12px);
  padding: 28px;
}
.profile-form-card .form-group {
  margin-bottom: 18px;
}
.profile-form-card label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #8a7e74);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.profile-form-card input,
.profile-form-card select,
.profile-form-card textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-light, #ece6de);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body, 'Noto Sans TC', sans-serif);
  color: var(--text-primary, #2d2926);
  background: #fff;
  transition: border-color 0.2s;
}
.profile-form-card input:focus {
  outline: none;
  border-color: #c4917b;
}
.input-disabled {
  background: var(--bg-secondary, #faf7f2) !important;
  color: var(--text-muted, #8a7e74) !important;
  cursor: not-allowed;
}
.profile-form-actions {
  margin-top: 20px;
}
.form-msg {
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  display: none;
}
.form-msg.show { display: block; }
.form-msg.success { background: #f0f8ee; color: #5a7a4f; }
.form-msg.error { background: #fff4f0; color: #b54a3a; }

/* Orders */
.order-card {
  background: #fff;
  border: 1px solid var(--border-light, #ece6de);
  border-radius: var(--radius-md, 12px);
  padding: 20px 24px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.order-card:hover {
  border-color: #d4c0ad;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.order-card-number {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #2d2926);
}
.order-card-date {
  font-size: 12px;
  color: var(--text-muted, #8a7e74);
}
.order-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-pending { background: #fff8e6; color: #a68200; }
.status-confirmed, .status-paid { background: #e6f3ff; color: #0055a5; }
.status-preparing, .status-processing { background: #fff0e0; color: #a85a00; }
.status-shipped, .status-arrived_store { background: #e6f0ff; color: #2d5aa0; }
.status-ready_pickup { background: #f0f8ee; color: #5a7a4f; }
.status-completed, .status-delivered { background: #e8f5e9; color: #2e7d32; }
.status-cancelled { background: #ffeaea; color: #c62828; }

.order-card-items {
  font-size: 13px;
  color: var(--text-secondary, #5c5044);
  margin-bottom: 12px;
  line-height: 1.7;
}
.order-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light, #ece6de);
  padding-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.order-card-total {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #2d2926);
}
.order-card-payment {
  font-size: 12px;
  color: var(--text-muted, #8a7e74);
}

/* Order Detail */
.order-detail-section {
  background: #fff;
  border: 1px solid var(--border-light, #ece6de);
  border-radius: var(--radius-md, 12px);
  padding: 24px;
  margin-bottom: 16px;
}
.order-detail-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #2d2926);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.order-detail-item label {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #8a7e74);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.order-detail-item span {
  font-size: 14px;
  color: var(--text-primary, #2d2926);
  font-weight: 500;
}
.order-items-table {
  width: 100%;
  border-collapse: collapse;
}
.order-items-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #8a7e74);
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light, #ece6de);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.order-items-table th:last-child { text-align: right; }
.order-items-table td {
  padding: 12px 0;
  font-size: 13px;
  color: var(--text-primary, #2d2926);
  border-bottom: 1px solid #f5f1eb;
}
.order-items-table td:last-child {
  text-align: right;
  font-weight: 600;
}

/* Order Timeline */
.order-timeline {
  position: relative;
  padding: 8px 0;
}
.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  position: relative;
}
.timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 38px;
  width: 2px;
  height: calc(100% - 26px);
  background: #e0d8ce;
}
.timeline-step.completed:not(:last-child)::before {
  background: #c4917b;
}
.timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5f1eb;
  border: 2px solid #d4c0ad;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: #a08b7a;
}
.timeline-step.completed .timeline-dot {
  background: #c4917b;
  border-color: #c4917b;
  color: #fff;
}
.timeline-step.current .timeline-dot {
  background: #fff;
  border-color: #c4917b;
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(196,145,123,0.15);
}
.timeline-step.pending .timeline-dot {
  background: #f5f1eb;
  border-color: #ddd5ca;
  color: #bbb0a2;
}
.timeline-info { flex: 1; padding-top: 4px; }
.timeline-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #2d2926);
}
.timeline-step.pending .timeline-label {
  color: var(--text-muted, #8a7e74);
  font-weight: 400;
}
.timeline-time {
  font-size: 11px;
  color: var(--text-muted, #8a7e74);
  margin-top: 2px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted, #8a7e74);
}
.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.empty-state p {
  font-size: 14px;
  margin: 0;
}

/* Orders Empty State */
.orders-empty-state {
  text-align: center;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-state-title {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.empty-state-description {
  font-size: 14px;
  color: #777;
  margin: 0;
}

.empty-state-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.empty-state-btn:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.empty-state-note {
  font-size: 12px;
  color: #999;
  margin: 8px 0 0 0;
}

/* Order Status Filter Tabs */
.order-status-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.order-status-tabs::-webkit-scrollbar {
  display: none;
}

.order-status-tab {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.order-status-tab:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.order-status-tab.active {
  background: #2D2723;
  border-color: #2D2723;
  color: #fff;
  font-weight: 600;
}

/* Order Card */
.order-card-new {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: start;
  transition: all 0.2s ease;
}

.order-card-new:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #D1D5DB;
}

.order-card-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #F9FAFB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-card-number {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.order-card-date {
  font-size: 13px;
  color: #6B7280;
}

.order-card-products {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.order-card-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #6B7280;
}

.order-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.order-card-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.order-card-amount {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.order-card-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.order-card-status.pending {
  background: #FEF3C7;
  color: #92400E;
}

.order-card-status.processing {
  background: #DBEAFE;
  color: #1E40AF;
}

.order-card-status.shipped {
  background: #D1FAE5;
  color: #065F46;
}

.order-card-status.in_transit {
  background: #D1FAE5;
  color: #065F46;
}

.order-card-status.completed {
  background: #D1FAE5;
  color: #065F46;
}

.order-card-status.cancelled {
  background: #FEE2E2;
  color: #991B1B;
}

.order-card-status.returned {
  background: #F3F4F6;
  color: #4B5563;
}

.order-card-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.order-card-btn-primary {
  background: #2D2723;
  color: #fff;
}

.order-card-btn-primary:hover {
  background: #1a1613;
}

.order-card-btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #E5E7EB;
}

.order-card-btn-secondary:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.order-card-btn-danger {
  background: #DC2626;
  color: #fff;
  border: 1px solid #DC2626;
}

.order-card-btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}

.order-card-btn-warning {
  background: #F59E0B;
  color: #fff;
  border: 1px solid #F59E0B;
}

.order-card-btn-warning:hover {
  background: #D97706;
  border-color: #D97706;
}

.order-card-expired-msg {
  font-size: 12px;
  color: #9CA3AF;
  font-style: italic;
  padding: 4px 0;
}

/* Pagination */
.order-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #E5E7EB;
}

.pagination-btn {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-numbers {
  display: flex;
  gap: 4px;
}

.pagination-number {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 40px;
  text-align: center;
}

.pagination-number:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.pagination-number.active {
  background: #2D2723;
  border-color: #2D2723;
  color: #fff;
  font-weight: 600;
}

/* Order Detail */
.order-detail-section {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.order-detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.order-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-detail-label {
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

.order-detail-value {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
}

/* Order Items Table */
.order-items-table {
  width: 100%;
  border-collapse: collapse;
}

.order-items-table th {
  background: #F9FAFB;
  padding: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  border-bottom: 1px solid #E5E7EB;
}

.order-items-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #E5E7EB;
  font-size: 14px;
  color: #374151;
}

.order-items-table tr:last-child td {
  border-bottom: none;
}

.order-item-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #F9FAFB;
}

.order-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Timeline */
.order-timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 20px 0;
  overflow-x: auto;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 100px;
  position: relative;
}

.timeline-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  z-index: 1;
  background: #fff;
  border: 2px solid #E5E7EB;
  color: #9CA3AF;
}

.timeline-step.completed .timeline-icon {
  background: #10B981;
  border-color: #10B981;
  color: #fff;
}

.timeline-step.current .timeline-icon {
  background: #2D2723;
  border-color: #2D2723;
  color: #fff;
}

.timeline-label {
  font-size: 13px;
  color: #6B7280;
  text-align: center;
  font-weight: 500;
}

.timeline-step.completed .timeline-label,
.timeline-step.current .timeline-label {
  color: #111827;
  font-weight: 600;
}

.timeline-date {
  font-size: 12px;
  color: #9CA3AF;
  text-align: center;
}

.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #E5E7EB;
  z-index: 0;
}

.timeline-step.completed::after {
  background: #10B981;
}

/* Order Actions */
.order-actions-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.order-action-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.order-action-btn-primary {
  background: #2D2723;
  color: #fff;
}

.order-action-btn-primary:hover {
  background: #1a1613;
}

.order-action-btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #E5E7EB;
}

.order-action-btn-secondary:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.order-action-btn-danger {
  background: #fff;
  color: #DC2626;
  border: 1px solid #FCA5A5;
}

.order-action-btn-danger:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

.order-action-btn-warning {
  background: #F59E0B;
  color: #fff;
  border: 1px solid #F59E0B;
}

.order-action-btn-warning:hover {
  background: #D97706;
  border-color: #D97706;
}

.order-detail-expired-msg {
  font-size: 13px;
  color: #9CA3AF;
  font-style: italic;
  padding: 10px 0;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .order-card-new {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .order-card-image {
    width: 100%;
    height: 200px;
  }
  
  .order-card-actions {
    align-items: stretch;
  }
  
  .order-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .order-timeline {
    flex-direction: column;
    gap: 16px;
  }
  
  .timeline-step {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
  }
  
  .timeline-step:not(:last-child)::after {
    top: 50%;
    left: 16px;
    width: 2px;
    height: 100%;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .member-center-layout {
    grid-template-columns: 1fr;
  }
  .member-sidebar {
    position: static;
  }
  .member-center-container {
    padding: 20px 20px 40px;
  }
  .utility-nav-links a {
    padding: 5px 8px;
    font-size: 11px;
  }
  .utility-nav-links a span {
    display: none;
  }
}
@media (max-width: 480px) {
  .order-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* === EMAIL VERIFICATION BADGE === */
.verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.verification-badge .verification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.verification-badge.unverified {
  background: #fff3e0;
  color: #a85d00;
  border: 1px solid #ffe0b2;
}
.verification-badge.unverified .verification-dot {
  background: #e67e22;
  box-shadow: 0 0 0 2px rgba(230,126,34,0.2);
}
.verification-badge.verified {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}
.verification-badge.verified .verification-dot {
  background: #4caf50;
  box-shadow: 0 0 0 2px rgba(76,175,80,0.2);
}
.verification-badge.disabled {
  background: #f5f5f5;
  color: #9e9e9e;
  border: 1px solid #e0e0e0;
}
.verification-badge.disabled .verification-dot {
  background: #bdbdbd;
}
#resendVerificationBtn {
  white-space: nowrap;
}
#resendVerificationBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === MOBILE MENU STYLES === */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: #fff;
  z-index: 999;
  transition: left 0.3s ease;
  overflow-y: auto;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
}
.mobile-menu-drawer.active {
  left: 0;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}
.mobile-menu-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.mobile-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.mobile-menu-close:hover {
  color: var(--text-primary);
}
.mobile-menu-close svg {
  width: 20px;
  height: 20px;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}
.mobile-menu-nav a {
  display: block;
  padding: 14px 24px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  transition: background 0.2s;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:active {
  background: #f8f8f8;
}

.mobile-menu-divider {
  height: 1px;
  background: #eee;
  margin: 0 24px;
}

.mobile-menu-social {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  gap: 12px;
}
.mobile-menu-social a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 0;
}
.mobile-menu-social a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* === FLOATING BUTTONS POSITION FIX === */
.fab-container {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: none;
}

/* Add bottom padding to main content to prevent FAB overlap */
.main-content,
.page-section {
  padding-bottom: 80px;
}

/* === TABLET & MOBILE RESPONSIVE IMPROVEMENTS === */
@media (max-width: 968px) {
  /* Show mobile menu button */
  .mobile-menu-btn {
    display: flex;
  }
  
  /* Hide desktop nav on mobile */
  .header-left nav {
    display: none;
  }
  
  /* Adjust header layout */
  .header-inner {
    justify-content: space-between;
  }
  
  /* Improve product grid spacing on tablet */
  .product-grid {
    gap: 24px 20px;
  }
  
  /* Better carousel controls spacing */
  .carousel-prev {
    left: 20px;
  }
  .carousel-next {
    right: 20px;
  }
}

  @media (max-width: 768px) {
  /* Mobile product grid - 2 columns with better spacing */
  .product-grid {
    gap: 20px 16px;
  }
  
  /* Ensure content doesn't overlap with FAB */
  .product-grid {
    padding-bottom: 60px;
  }
  
  /* Better mobile carousel */
  .carousel-prev {
    left: 14px;
  }
  .carousel-next {
    right: 14px;
  }
  
  /* Adjust filter tabs for mobile */
  .filter-tabs {
    padding: 0 16px;
    gap: 8px;
  }
  .filter-tab {
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* Small mobile adjustments */
  .product-grid {
    gap: 16px 12px;
  }
}

/* ========================================
   MOBILE PRODUCT DETAIL PAGE FIX (≤767px)
   ======================================== */
@media (max-width: 767px) {
  /* Buy buttons: horizontal layout */
  .m-pdp-buy-buttons {
    flex-direction: row;
    gap: 10px;
    margin: 16px 0 16px;
  }
  .m-pdp-buy-buttons .pd-btn {
    flex: 1;
    height: 46px;
    font-size: 14px;
  }
  
  /* Keep the mobile product-detail content safely inside the viewport.
     The gallery remains full-bleed; product controls get their own horizontal
     breathing room so Safari/Chrome do not visually clip option or action buttons. */
  .m-pdp-info {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Match the mobile reference layout: 32px CSS horizontal content inset.
       Safe-area values are respected without ever reducing the intended inset. */
    padding-top: 16px;
    padding-right: max(32px, env(safe-area-inset-right, 0px));
    padding-bottom: 0;
    padding-left: max(32px, env(safe-area-inset-left, 0px));
  }

  /* Keep every product-detail control inside the same left/right content rail.
     This prevents Safari/Chrome viewport clipping caused by child overflow. */
  .m-pdp-info > * {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .m-pdp-option-group .option-buttons {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .m-pdp-buy-buttons {
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
  }

  .m-pdp-buy-buttons .pd-btn {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 9999px;
  }

  /* Mobile PDP action buttons: match the requested reference order/style.
     Buy Now is outlined; Add to Cart is filled with the CHÆN warm brown. */
  .m-pdp-buy-buttons .pd-btn-buy-now {
    background: transparent !important;
    color: #664732 !important;
    border: 1px solid #664732 !important;
    -webkit-text-fill-color: #664732 !important;
  }
  .m-pdp-buy-buttons .pd-btn-buy-now:hover,
  .m-pdp-buy-buttons .pd-btn-buy-now:active {
    background: #f7f4ef !important;
    border-color: #664732 !important;
    color: #664732 !important;
    -webkit-text-fill-color: #664732 !important;
  }

  .m-pdp-buy-buttons .pd-btn-add-cart {
    background: #664732 !important;
    color: #ffffff !important;
    border: 1px solid #664732 !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  .m-pdp-buy-buttons .pd-btn-add-cart:hover,
  .m-pdp-buy-buttons .pd-btn-add-cart:active {
    background: #664732 !important;
    border-color: #664732 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .m-pdp-option-group .option-btn {
    min-width: 60px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Reduce spacing between sections */
  .m-pdp-option-group {
    margin-bottom: 14px;
  }
  .m-pdp-qty-group {
    margin-bottom: 14px;
  }
  
  /* Tabs section: remove top margin */
  .product-tabs-section {
    margin-top: 0;
  }
  .product-tabs {
    margin-bottom: 12px;
  }
  
  /* Floating buttons: smaller, non-blocking */
  .fab-container {
    gap: 8px;
    position: fixed;
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    top: auto;
    transform: none;
    z-index: 9999;
  }
  .fab-btn {
    width: 42px;
    height: 42px;
  }
  .fab-line img {
    width: 100%;
    height: 100%;
  }
  .fab-cart-badge {
    font-size: 9px;
    min-width: 15px;
    height: 15px;
  }
  
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ========================================
   MOBILE FAB FIX (≤767px)
   ======================================== */
@media (max-width: 767px) {
  .fab-container {
    position: fixed;
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    top: auto;
    transform: none;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .fab-btn {
    width: 44px;
    height: 44px;
  }
  .fab-top {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
  }
}

/* ===== CATEGORY PAGE ===== */
.category-page-header {
  position: relative;
  width: 100%;
  min-height: 220px;
  background: linear-gradient(135deg, #f5f0eb 0%, #ebe4dc 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.category-page-header-overlay {
  width: 100%;
  padding: 40px 0;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(2px);
}
.category-page-header-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.category-page-breadcrumb {
  font-size: 13px;
  color: #8a7e74;
  margin-bottom: 8px;
}
.category-page-breadcrumb a {
  color: #8a7e74;
  text-decoration: none;
  transition: color .2s;
}
.category-page-breadcrumb a:hover { color: #2f2925; }
.category-page-breadcrumb .sep { margin: 0 8px; opacity: .5; }
.category-page-breadcrumb .current { color: #2f2925; font-weight: 500; }
.category-page-name {
  font-size: 32px;
  font-weight: 600;
  color: #2f2925;
  margin: 0 0 6px;
  letter-spacing: 1px;
}
.category-page-desc {
  font-size: 15px;
  color: #6b5e52;
  margin: 0 0 4px;
  line-height: 1.6;
}
.category-page-count {
  font-size: 13px;
  color: #8a7e74;
  margin: 0;
}

/* Category page product grid */
#categoryProductGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Category pagination */
#categoryProductPagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
#categoryProductPagination .pagination-btn {
  padding: 8px 16px;
  border: 1px solid #e0d8cf;
  background: #fff;
  color: #5c5044;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s;
}
#categoryProductPagination .pagination-btn:hover {
  background: #f5f0eb;
}
#categoryProductPagination .pagination-btn.active {
  background: #2f2925;
  color: #fff;
  border-color: #2f2925;
}

@media (max-width: 1024px) {
  #categoryProductGrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  #categoryProductGrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .category-page-name { font-size: 24px; }
  .category-page-header { min-height: 160px; }
  .category-page-header-content { padding: 0 20px; }
}
@media (max-width: 480px) {
  #categoryProductGrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ============================================================
   NAVIGATION DROPDOWN — Compact Content-Width Design
   Reference: PAZZO / Lativ / OB 嚴選 / Air Space
   ============================================================ */

/* Desktop dropdown wrapper — each nav item is its own dropdown trigger */
.nav-item-has-dropdown {
  position: relative;
}

/* Trigger link (the category name in the header) */
.nav-link-with-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  transition: color 0.2s ease;
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link-with-dropdown::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.25s ease;
}
/* Active / open state for trigger */
.nav-item-has-dropdown.is-open .nav-link-with-dropdown {
  color: var(--text-primary);
}
.nav-item-has-dropdown.is-open .nav-link-with-dropdown::after {
  width: 100%;
}

/* Small chevron arrow next to category name */
.nav-dropdown-arrow {
  width: 10px;
  height: 10px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.nav-item-has-dropdown.is-open .nav-dropdown-arrow {
  transform: rotate(180deg);
}

/* ── Dropdown panel ──────────────────────────────────────────────
   Content-based width (no width:100%, no flex:1, no stretch).
   Width follows the longest text item.
   ─────────────────────────────────────────────────────────────── */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);          /* 4px gap below header */
  left: 0;
  min-width: 160px;
  max-width: 220px;
  width: max-content;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 6px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 300;                    /* above header & banner */
}
/* Open state — controlled by JS class */
.nav-item-has-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Sub-category list */
.nav-dropdown-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each sub-category link */
.nav-dropdown-menu a {
  display: block;
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
  line-height: 34px;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 8px;
}
.nav-dropdown-menu a:hover {
  background: #F5F2EE;
}

/* "View all" link at top of dropdown */
.nav-dropdown-all {
  font-weight: 500 !important;
  color: var(--accent) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 4px;
  padding-bottom: 10px !important;
}

/* Nested sub-category in dropdown (e.g. 上衣 > 無袖/短袖) */
.nav-dropdown-item-has-sub {
  position: relative;
}

.nav-dropdown-item-has-sub > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-dropdown-item-has-sub > a::after {
  content: '›';
  font-size: 16px;
  color: #999;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.nav-dropdown-item-has-sub > a:hover::after {
  opacity: 1;
}

.nav-dropdown-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 140px;
  max-width: 200px;
  width: max-content;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 6px 12px;
  z-index: 301;
}

.nav-dropdown-item-has-sub:hover > .nav-dropdown-sub {
  display: block;
}

.nav-dropdown-sub a {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 34px;
}

/* Static nav link (no dropdown, e.g. 選物誌) */
.nav-link-static {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  transition: color 0.2s ease;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav-link-static::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.nav-link-static:hover {
  color: var(--text-primary);
}
.nav-link-static:hover::after {
  width: 100%;
}

/* Mobile nav accordion */
.mobile-nav-item {
  border-bottom: 1px solid var(--border-light);
}
.mobile-nav-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav-item-header a {
  flex: 1;
  padding: 14px 0;
  font-size: 15px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 400;
}
.mobile-nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}
.mobile-nav-toggle svg {
  width: 18px;
  height: 18px;
}
.mobile-nav-item.open .mobile-nav-toggle {
  transform: rotate(180deg);
}
.mobile-nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 16px;
}
.mobile-nav-item.open .mobile-nav-submenu {
  max-height: 500px;
}
.mobile-nav-submenu a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  border-top: 1px solid var(--border-light);
}
.mobile-nav-submenu a:hover {
  color: var(--accent);
}

/* ============================================================
   HOME PAGE SECTIONS — Hot Products + New Arrivals
   ============================================================ */
.home-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px 24px;
}
.home-section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
.home-section-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-primary);
  white-space: nowrap;
}
.home-section-line {
  flex: 1;
  height: 1px;
  background: var(--border-light);
}
.home-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.home-section-more {
  text-align: center;
  padding: 32px 0 16px;
}
.home-view-all-btn {
  display: inline-block;
  padding: 12px 36px;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: var(--transition);
}
.home-view-all-btn:hover {
  background: var(--text-primary);
  color: var(--white);
}

/* === HOMEPAGE FEATURED CATEGORIES === */
.home-featured-categories {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px 24px;
}

.featured-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Tablet: 3 columns */
@media (max-width: 1199px) and (min-width: 768px) {
  .featured-categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns */
@media (max-width: 767px) {
  .featured-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.featured-category-item {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #eceae6;
}

.featured-category-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.featured-category-item:hover img {
  transform: scale(1.03);
}

.featured-category-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.featured-category-item:hover .featured-category-overlay {
  background: rgba(0, 0, 0, 0.15);
}

.featured-category-title {
  color: white;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.featured-category-item:hover .featured-category-title {
  opacity: 1;
  transform: translateY(0);
}

/* Empty state for featured categories */
.featured-categories-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted, #999);
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* === NEW ARRIVALS CAROUSEL === */
.new-arrivals-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.new-arrivals-carousel {
  display: block;
  width: 100%;
}

.new-arrivals-page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* === NEW ARRIVALS PAGINATION === */
.new-arrivals-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.na-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.na-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-light, #e8e0d8);
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  color: var(--text-primary, #2f2925);
}

.na-pagination-btn:hover:not([disabled]) {
  background: var(--text-primary, #2f2925);
  color: #fff;
  border-color: var(--text-primary, #2f2925);
}

.na-pagination-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.na-pagination-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-light, #e8e0d8);
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary, #6b6560);
  transition: var(--transition, all 0.2s ease);
  letter-spacing: 0.5px;
}

.na-pagination-page:hover:not(.active) {
  background: var(--bg-secondary, #f8f5f1);
  border-color: var(--text-muted, #9a9088);
  color: var(--text-primary, #2f2925);
}

.na-pagination-page.active {
  background: var(--text-primary, #2f2925);
  color: #fff;
  border-color: var(--text-primary, #2f2925);
  font-weight: 500;
}

.na-pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 36px;
  font-size: 13px;
  color: var(--text-muted, #9a9088);
  letter-spacing: 2px;
}

.home-section-more-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: var(--transition);
  white-space: nowrap;
}

.home-section-more-link:hover {
  color: var(--text-primary);
}

/* Product card shared styles (used in home + category) */
.product-card-image {
  aspect-ratio: 3/4;
  background: #eceae6;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  width: 100%;
  display: block;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card-image img {
  transform: scale(1.03);
}
.product-card-info {
  padding: 12px 2px 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card-info .product-spec-summary {
  font-size: 12px;
  color: #9b8e82;
  margin-bottom: 6px;
  font-weight: 400;
  letter-spacing: 0.3px;
}
.product-card-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.product-card-price .price-current {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.product-card-price .price-original {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}
/* === Product Badges Group Container (used by buildProductBadges) === */
.product-badges-group {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 4;
  pointer-events: none;
}
.product-badges-group .product-badge {
  position: static;
}
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 52px;
  min-width: 52px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 1.2px;
  font-weight: 500;
  text-transform: uppercase;
  z-index: 4;
}
.badge-new {
  background-color: rgba(255, 255, 255, 0.50);
  color: #5a554f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.badge-sale {
  background-color: rgba(190, 82, 82, 0.48);
  color: #ffffff;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.badge-recommend {
  background-color: rgba(112, 139, 120, 0.48);
  color: #ffffff;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.badge-preorder {
  background-color: rgba(104, 122, 145, 0.48);
  color: #ffffff;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.badge-limited {
  background-color: rgba(177, 132, 79, 0.85);
  color: #FFF9F1;
  border: 1px solid #A47643;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

/* Home page responsive */
@media (max-width: 1024px) {
  .home-product-grid { grid-template-columns: repeat(3, 1fr); }
  .new-arrivals-page { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; }
  .na-pagination-page { min-width: 32px; height: 32px; font-size: 12px; }
  .na-pagination-btn { width: 32px; height: 32px; }
}
@media (max-width: 768px) {
  .home-section { padding: 32px 20px 16px; }
  .home-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .home-section-title { font-size: 17px; }
  .new-arrivals-page { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .na-pagination { gap: 4px; }
  .na-pagination-page { min-width: 28px; height: 28px; font-size: 11px; padding: 0 4px; }
  .na-pagination-btn { width: 28px; height: 28px; }
  .na-pagination-btn svg { width: 14px; height: 14px; }
  .na-pagination-ellipsis { min-width: 18px; height: 28px; font-size: 11px; }

  /* ── Mobile: shrink all product badges ── */
  .product-badges-group {
    top: 8px;
    left: 8px;
    gap: 4px;
  }
  .product-badge {
    width: 42px;
    min-width: 42px;
    height: 19px;
    padding: 0 4px;
    font-size: 9px;
    border-radius: 2px;
  }
  .product-tags-group {
    top: 8px;
    left: 8px;
    gap: 4px;
  }
  .product-tags-group .product-tag,
  .product-tag {
    width: 42px;
    min-width: 42px;
    height: 19px;
    padding: 0 4px;
    font-size: 9px;
    border-radius: 2px;
  }
  /* Category badges on mobile */
  .cat-badges-group {
    top: 8px;
    left: 8px;
    gap: 4px;
  }
  .cat-card-badge {
    width: 42px;
    min-width: 42px;
    height: 19px;
    padding: 0 4px;
    font-size: 9px;
    border-radius: 2px;
  }
}

/* ============================================================
   SUBCATEGORY NAVIGATION BAR
   ============================================================ */
.subcategory-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  padding: 0;
}
.subcategory-list {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subcategory-list::-webkit-scrollbar {
  display: none;
}
.subcategory-link {
  display: inline-block;
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}
.subcategory-link:hover {
  color: var(--text-primary);
  background: rgba(0,0,0,0.03);
}
.subcategory-link.active {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom-color: var(--text-primary);
}

@media (max-width: 768px) {
  .subcategory-link { padding: 12px 16px; font-size: 12px; }
}

/* ============================================================
   CATEGORY PAGE BREADCRUMB REFINEMENT
   ============================================================ */
.category-page-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.category-page-breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.category-page-breadcrumb .sep {
  color: var(--text-muted);
  margin: 0 6px;
  font-weight: 300;
}
.category-page-breadcrumb .current {
  color: var(--text-primary);
  font-weight: 500;
}

/* ============================================================
   NAVIGATION DROPDOWN BANNER (removed)
   ============================================================ */

/* Dropdown menu sizing override removed — using compact design above */

/* ============================================================
   CATEGORY PAGE AD BANNER — Fixed in page layout
   ============================================================ */
#categoryAdBanner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px 0;
  position: relative;
}
.category-ad-banner-link,
.category-ad-banner-static {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.category-ad-banner-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.category-ad-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 300px;
}
@media (max-width: 768px) {
  #categoryAdBanner {
    padding: 16px 20px 0;
  }
  .category-ad-banner-img {
    max-height: 180px;
  }
}

/* === MEMBER TERMS MODAL === */
.member-terms-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-terms-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.member-terms-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: modalIn 0.3s ease;
  z-index: 1;
}

.member-terms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.member-terms-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.member-terms-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.member-terms-modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

.member-terms-modal-body {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.member-terms-modal-body h1 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.member-terms-modal-body h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 24px 0 12px;
}

.member-terms-modal-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 16px 0 8px;
}

.member-terms-modal-body p {
  margin-bottom: 12px;
}

.member-terms-modal-body ul,
.member-terms-modal-body ol {
  margin: 12px 0;
  padding-left: 24px;
}

.member-terms-modal-body li {
  margin-bottom: 8px;
}

.member-terms-modal-body hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 24px 0;
}

.member-terms-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  text-align: center;
  flex-shrink: 0;
}

.member-terms-modal-footer .btn {
  min-width: 120px;
}

/* Member terms page content styling */
#memberTermsContentWrapper h1 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

#memberTermsContentWrapper h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 24px 0 12px;
}

#memberTermsContentWrapper p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 12px;
}

#memberTermsContentWrapper ul,
#memberTermsContentWrapper ol {
  margin: 12px 0;
  padding-left: 24px;
}

#memberTermsContentWrapper li {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 8px;
}

#memberTermsContentWrapper hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 24px 0;
}

.member-terms-updated {
  font-size: 13px;
  color: #999;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

/* Responsive: member terms modal */
@media (max-width: 768px) {
  .member-terms-modal-content {
    width: 95%;
    max-height: 90vh;
    border-radius: 8px;
  }
  .member-terms-modal-header {
    padding: 16px 20px;
  }
  .member-terms-modal-body {
    padding: 16px 20px;
  }
  .member-terms-modal-footer {
    padding: 12px 20px;
  }
}

/* ==========================================================
   CATEGORY PAGE – Redesigned Layout
   ========================================================== */

/* --- Hero Banner (Fixed-ratio image, container-aligned) --- */
.cat-hero-banner {
  margin-top: 28px;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1920 / 450;
  background: #f5f0eb;
  display: none;
  overflow: hidden;
  position: relative;
  border-radius: 0;
}
.cat-hero-banner.has-image {
  display: block;
}
.cat-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cat-hero-img-mobile {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Breadcrumb (below banner) --- */
.cat-breadcrumb-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 40px;
}
.cat-breadcrumb {
  font-size: 13px;
  color: #8a7e74;
  letter-spacing: 0.5px;
}
.cat-breadcrumb a {
  color: #8a7e74;
  text-decoration: none;
  transition: color 0.2s;
}
.cat-breadcrumb a:hover { color: #2f2925; }
.cat-breadcrumb .sep {
  margin: 0 8px;
  color: #b5a99a;
}
.cat-breadcrumb .current { 
  color: #2f2925; 
  font-weight: 500;
}

/* Tablet: 769px ~ 1200px */
@media (max-width: 1200px) {
  .cat-hero-banner {
    aspect-ratio: 16 / 5;
  }
  .cat-breadcrumb-wrap { padding: 24px 32px; }
}

/* Mobile: <= 768px */
@media (max-width: 768px) {
  .cat-hero-banner {
    aspect-ratio: 16 / 9;
    margin-top: 24px;
  }
  /* Show mobile image, hide desktop image */
  .cat-hero-banner.has-mobile .cat-hero-img {
    display: none;
  }
  .cat-hero-banner.has-mobile .cat-hero-img-mobile {
    display: block;
  }
  .cat-breadcrumb-wrap { padding: 20px 16px; }
}

/* --- Main Layout --- */
.cat-main-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: flex;
  gap: 36px;
}

@media (max-width: 900px) {
  .cat-main-wrap { flex-direction: column; padding: 24px 16px 60px; gap: 24px; }
}

/* --- Sidebar Accordion --- */
.cat-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.cat-sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: #2f2925;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #2f2925;
}

/* Accordion */
.cat-acc-group {
  margin-bottom: 2px;
}
.cat-acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #2f2925;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  user-select: none;
}
.cat-acc-header:hover { background: #f5f0eb; }
.cat-acc-header.active { background: #f0ebe3; color: #8b6916; }
.cat-acc-header.leaf { cursor: pointer; }
.cat-acc-header.leaf.active { background: #8b6916; color: #fff; }
.cat-acc-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cat-acc-header.open .cat-acc-chevron { transform: rotate(90deg); }
.cat-acc-children {
  display: none;
  padding-left: 16px;
}
.cat-acc-children.open { display: block; }
.cat-acc-child {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: #5a524a;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.cat-acc-child:hover { background: #f5f0eb; color: #2f2925; }
.cat-acc-child.active {
  background: #f0ebe3;
  color: #8b6916;
  font-weight: 600;
}

@media (max-width: 900px) {
  .cat-sidebar { width: 100%; position: static; max-height: none; }
}

/* --- Product Area --- */
.cat-product-area { flex: 1; min-width: 0; }

/* Top bar */
.cat-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 12px;
}
.cat-top-bar-left { display: flex; align-items: baseline; gap: 12px; }
.cat-top-title {
  font-size: 22px;
  font-weight: 700;
  color: #2f2925;
  margin: 0;
}
.cat-top-count {
  font-size: 13px;
  color: #8a7e74;
}
.cat-top-bar-right { display: flex; align-items: center; gap: 8px; }
.cat-sort-label { font-size: 13px; color: #8a7e74; }
.cat-sort-select {
  padding: 6px 28px 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  color: #2f2925;
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a7e74' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.cat-sort-select:hover { border-color: #b5a99a; }
.cat-sort-select:focus { border-color: #8b6916; }

/* Product Grid */
.cat-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) { .cat-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .cat-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* Product Card */
.cat-card {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.cat-card-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f5f0eb;
  border-radius: 10px;
}
.cat-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.cat-card:hover .cat-card-img-wrap img { transform: scale(1.06); }

/* Badges */
/* === Category Card Badges Group Container === */
.cat-badges-group {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.cat-badges-group .cat-card-badge {
  position: static;
}
.cat-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 52px;
  min-width: 52px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 1px;
  font-weight: 700;
  z-index: 2;
}
.cat-badge-new { background-color: rgba(255, 255, 255, 0.50); color: #5a554f; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.cat-badge-sale { background-color: rgba(190, 82, 82, 0.48); color: #fff; backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.cat-badge-recommend { background-color: rgba(112, 139, 120, 0.48); color: #fff; backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.cat-badge-preorder { background-color: rgba(104, 122, 145, 0.48); color: #fff; backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.cat-badge-limited { background-color: rgba(177, 132, 79, 0.85); color: #FFF9F1; border: 1px solid #A47643; backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }

/* Wishlist */
.cat-card-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.cat-card:hover .cat-card-wish { opacity: 1; }
.cat-card-wish.active { opacity: 1; background: #fff; }
.cat-card-wish.active svg { fill: #c0392b; stroke: #c0392b; }
.cat-card-wish svg { width: 16px; height: 16px; stroke: #5a524a; fill: none; stroke-width: 1.8; }

/* Card Info */
.cat-card-info {
  padding: 12px 4px 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cat-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #2f2925;
  margin: 0 0 4px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-card-colors {
  font-size: 11px;
  color: #8a7e74;
  margin-bottom: 6px;
}
.cat-card-info .product-spec-summary {
  font-size: 11px;
  color: #8a7e74;
  margin-bottom: 6px;
}
.cat-card-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.cat-card-price .current {
  font-size: 15px;
  font-weight: 700;
  color: #2f2925;
}
.cat-card-price .original {
  font-size: 12px;
  color: #b5a99a;
  text-decoration: line-through;
}
.cat-card-price .discount {
  display: inline-block;
  background: #D96B63;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

/* Empty State */
.category-empty-state {
  width: 100%;
}
.cat-empty-state {
  text-align: center;
  box-sizing: border-box;
  padding: 72px 20px 56px;
}
.cat-empty-state p {
  color: #8a7e74;
  font-size: 16px;
  margin: 16px 0 8px;
}
.cat-empty-state span {
  color: #b5a99a;
  font-size: 13px;
  display: block;
  margin-bottom: 20px;
}
.cat-empty-state button {
  padding: 10px 28px;
  background: #2f2925;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1px;
  transition: background 0.2s;
}
.cat-empty-state button:hover { background: #4a403a; }

@media (min-width: 769px) {
  .cat-product-area > .category-empty-state .cat-empty-state {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 20px 64px;
  }
}

@media (max-width: 768px) {
  .mcat-products-wrap > .category-empty-state .cat-empty-state {
    min-height: 320px;
    padding: 56px 20px 64px;
  }
}

/* Pagination */
.cat-pagination-wrap {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cat-pagination-info {
  font-size: 13px;
  color: #8a7e74;
}
.cat-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-pagination button,
.cat-pagination .cat-page-num {
  min-width: 36px;
  height: 36px;
  border: 1px solid #e8dfd4;
  border-radius: 50%;
  background: #fff;
  color: #5a524a;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.cat-pagination button:hover:not(:disabled) {
  background: #f5f0eb;
  border-color: #b5a99a;
}
.cat-pagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cat-pagination .cat-page-num.active {
  background: #2f2925;
  border-color: #2f2925;
  color: #fff;
  font-weight: 600;
}
.cat-pagination .cat-ellipsis {
  font-size: 13px;
  color: #b5a99a;
  padding: 0 4px;
}

@media (max-width: 768px) {
  .cat-top-bar { flex-direction: column; align-items: flex-start; }
  .cat-top-title { font-size: 18px; }
}

/* ==========================================================
   MOBILE CATEGORY PAGE — Redesigned (Mobile-First)
   Reference: Justone / GRL / Meier.Q / Pinkoi
   ========================================================== */

/* ── ① Category Title ────────────────────────────────────────── */
.mcat-title-section {
  padding: 16px 16px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mcat-title {
  font-size: 22px;
  font-weight: 700;
  color: #2f2925;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.mcat-count {
  font-size: 13px;
  color: #8a7e74;
  font-weight: 400;
  white-space: nowrap;
}

/* ── ② Subcategory Quick Tabs ────────────────────────────────── */
.mcat-subtabs-wrap {
  padding: 12px 0 0;
  position: relative;
}
.mcat-subtabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px 4px;
}
.mcat-subtabs::-webkit-scrollbar { display: none; }
.mcat-subtab {
  flex-shrink: 0;
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: 1px solid #d9d0c6;
  background: #fff;
  color: #5a524a;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}
.mcat-subtab:active {
  transform: scale(0.96);
}
.mcat-subtab.active {
  background: #c4917b;
  color: #fff;
  border-color: #c4917b;
}

/* ── ③ Category Hero Banner ──────────────────────────────────── */
.mcat-banner {
  margin: 16px 16px 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  height: 0;
  padding-bottom: calc((100vw - 32px) * 3 / 4);
  max-height: 900px;
  background: #f5f0eb;
  position: relative;
  display: none;
}
.mcat-banner.has-image {
  display: block;
}
.mcat-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.mcat-banner-desktop {
  display: none;
}
.mcat-banner-mobile {
  display: block;
}
.mcat-banner.has-mobile .mcat-banner-mobile {
  display: block;
}

/* ── ④ Sticky Toolbar ────────────────────────────────────────── */
.mcat-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  margin: 12px 0 0;
  border-bottom: 1px solid #f0ebe3;
}
.mcat-toolbar-inner {
  padding: 0 16px;
}
.mcat-toolbar-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 0;
}
.mcat-toolbar-scroll::-webkit-scrollbar { display: none; }
.mcat-tool-btn {
  flex-shrink: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: 1px solid #e8e1d9;
  background: #fff;
  color: #6b6058;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}
.mcat-tool-btn:active {
  transform: scale(0.96);
}
.mcat-tool-btn.active {
  background: #c4917b;
  color: #fff;
  border-color: #c4917b;
}
.mcat-toolbar-inner {
  padding: 0 16px;
}
.mcat-toolbar-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 0;
}
.mcat-toolbar-scroll::-webkit-scrollbar { display: none; }
.mcat-tool-btn {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: 1px solid #e8e1d9;
  background: #fff;
  color: #6b6058;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.mcat-tool-btn:active {
  transform: scale(0.96);
}
.mcat-tool-btn.active {
  background: #2f2925;
  color: #fff;
  border-color: #2f2925;
}

/* ── ⑤ Mobile Product Grid (2-col) ───────────────────────────── */
.mcat-products-wrap {
  padding: 16px 16px 32px;
}
.mcat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* ── Mobile Product Card ─────────────────────────────────────── */
.mcat-card {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
  transition: transform 0.15s ease;
  display: flex;
  flex-direction: column;
}
.mcat-card:active {
  transform: scale(0.97);
}
.mcat-card-img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f5f0eb;
  border-radius: 10px;
}
.mcat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* === Mobile Category Badges Group Container === */
.mcat-badges-group {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}
.mcat-badges-group .mcat-card-new,
.mcat-badges-group .mcat-card-discount,
.mcat-badges-group .mcat-card-preorder,
.mcat-badges-group .mcat-card-recommend,
.mcat-badges-group .mcat-card-limited {
  position: static;
  width: 42px;
  min-width: 42px;
  height: 19px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 700;
}
/* Discount badge */
.mcat-card-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 42px;
  min-width: 42px;
  height: 19px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 700;
  z-index: 2;
  background-color: rgba(190, 82, 82, 0.48);
  color: #fff;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.mcat-card-new {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 42px;
  min-width: 42px;
  height: 19px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 700;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.50);
  color: #5a554f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.mcat-card-recommend {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 42px;
  min-width: 42px;
  height: 19px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 700;
  z-index: 2;
  background-color: rgba(112, 139, 120, 0.48);
  color: #fff;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.mcat-card-preorder {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 42px;
  min-width: 42px;
  height: 19px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 700;
  z-index: 2;
  background-color: rgba(104, 122, 145, 0.48);
  color: #fff;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.mcat-card-limited {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 42px;
  min-width: 42px;
  height: 19px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 700;
  z-index: 2;
  background-color: rgba(177, 132, 79, 0.85);
  color: #FFF9F1;
  border: 1px solid #A47643;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
/* Wishlist */
.mcat-card-wish {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 1;
  transition: background 0.2s;
}
.mcat-card-wish.active { background: #fff; }
.mcat-card-wish.active svg { fill: #c0392b; stroke: #c0392b; }
.mcat-card-wish svg { width: 15px; height: 15px; stroke: #5a524a; fill: none; stroke-width: 1.8; }
/* Info */
.mcat-card-info {
  padding: 10px 2px 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mcat-card-name {
  font-size: 13px;
  font-weight: 500;
  color: #2f2925;
  margin: 0 0 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcat-card-info .product-spec-summary {
  font-size: 11px;
  color: #8a7e74;
  margin-bottom: 5px;
}
.mcat-card-price {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.mcat-card-price .current {
  font-size: 14px;
  font-weight: 700;
  color: #2f2925;
}
.mcat-card-price .original {
  font-size: 11px;
  color: #b5a99a;
  text-decoration: line-through;
}
.mcat-card-price .discount-pct {
  display: inline-block;
  background: #D96B63;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── ⑥ Load More ─────────────────────────────────────────────── */
.mcat-loadmore-wrap {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
}
.mcat-loadmore-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 36px;
  border: 1px solid #2f2925;
  border-radius: 999px;
  background: #fff;
  color: #2f2925;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mcat-loadmore-btn:active {
  background: #2f2925;
  color: #fff;
}
.mcat-page-info {
  font-size: 12px;
  color: #8a7e74;
}

/* ── Desktop: hide mobile elements ───────────────────────────── */
@media (min-width: 769px) {
  .mcat-title-section { display: none; }
  .mcat-subtabs-wrap { display: none; }
  .mcat-banner { 
    display: none; 
    margin-top: 28px; 
    max-width: 1400px; 
    margin-left: auto; 
    margin-right: auto; 
    aspect-ratio: 1920/450; 
    padding-bottom: calc(1400px * 450 / 1920);
    background: #f5f0eb; 
    overflow: hidden; 
    position: relative; 
    border-radius: 0; 
  }
  .mcat-banner.has-image { 
    display: block; 
  }
  .mcat-banner.has-image .mcat-banner-desktop {
    display: block !important;
  }
  .mcat-banner.has-image .mcat-banner-mobile {
    display: none !important;
  }
  .mcat-toolbar { display: none; }
  .mcat-products-wrap { display: none; }
  .cat-desktop-only { display: flex; }
  /* Desktop banner uses old styles */
  .cat-hero-banner { display: none; margin-top: 28px; max-width: 1400px; margin-left: auto; margin-right: auto; aspect-ratio: 1920/450; background: #f5f0eb; overflow: hidden; position: relative; border-radius: 0; }
  .cat-hero-banner.has-image { display: block; }
  .cat-breadcrumb-wrap { max-width: 1400px; margin: 0 auto; padding: 24px 40px; }
  .cat-main-wrap { max-width: 1400px; margin: 0 auto; padding: 40px 40px 80px; display: flex; gap: 36px; }
}

/* ── Mobile: hide desktop elements ───────────────────────────── */
@media (max-width: 768px) {
  .cat-desktop-only { display: none !important; }
  /* Hide old desktop hero/breadcrumb on mobile */
  .cat-hero-banner { display: none !important; }
  .cat-breadcrumb-wrap { display: none; }
  .cat-main-wrap { display: none !important; }
  /* Show mobile banner desktop image on larger mobile */
  .mcat-banner.has-image .mcat-banner-desktop {
    display: none;
  }
  .mcat-banner.has-image .mcat-banner-mobile {
    display: block;
  }
  .mcat-banner.has-image:not(.has-mobile) .mcat-banner-desktop {
    display: block;
  }
}

/* ── Tablet: 769px ~ 1024px ──────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .mcat-title { font-size: 20px; }
  .mcat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mcat-banner { 
    aspect-ratio: 1920 / 450;
    padding-bottom: calc((100vw - 32px) * 450 / 1920);
  }
}

/* ── Mobile ≤ 480px tweaks ───────────────────────────────────── */
@media (max-width: 480px) {
  .mcat-title { font-size: 20px; }
  .mcat-grid { gap: 10px; }
  .mcat-card-name { font-size: 12px; }
  .mcat-card-price .current { font-size: 13px; }
  .mcat-subtab { height: 34px; padding: 0 14px; font-size: 13px; }
  .mcat-tool-btn { height: 32px; padding: 0 12px; font-size: 12px; }
}

/* === CVS Store Selection === */
#cvsStoreSelector {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#cvsStorePlaceholder {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  background: #f0eeeb;
  border-radius: 8px;
  color: #999;
  font-size: 14px;
}

#selectedStoreInfo {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile responsive for CVS store selector */
@media (max-width: 768px) {
  #cvsStoreSelector {
    flex-direction: column;
    align-items: stretch;
  }
  
  #cvsStorePlaceholder {
    min-width: auto;
  }
  
  #selectStoreBtn {
    width: 100%;
  }
}

/* ============================================
   PRODUCT REVIEWS SYSTEM
   ============================================ */

/* Review Tab Button */
.review-tab-btn {
  position: relative;
}

.review-count-badge {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* Review Container */
.review-container {
  padding: 20px 0;
}

/* Review Summary */
.review-summary {
  display: flex;
  gap: 40px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.review-summary-left {
  flex: 0 0 180px;
  text-align: center;
  border-right: 1px solid var(--border-light);
  padding-right: 40px;
}

.review-average-score {
  font-size: 48px;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 8px;
}

.review-average-stars {
  margin-bottom: 8px;
}

.review-average-stars .star {
  font-size: 20px;
  color: #d4d4d4;
}

.review-average-stars .star.filled,
.review-average-stars .star.half {
  color: #f5a623;
}

.review-total-count {
  font-size: 14px;
  color: var(--text-muted);
}

.review-summary-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-rating-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-label {
  font-size: 13px;
  color: var(--text-secondary);
  width: 40px;
}

.rating-progress {
  flex: 1;
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.rating-fill {
  height: 100%;
  background: #f5a623;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.rating-percent {
  font-size: 13px;
  color: var(--text-muted);
  width: 40px;
  text-align: right;
}

/* Review Toolbar */
.review-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.review-sort-buttons {
  display: flex;
  gap: 8px;
}

.review-sort-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.review-sort-btn:hover {
  border-color: var(--text-secondary);
}

.review-sort-btn.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #fff;
}

/* Review List */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-loading,
.review-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Review Card */
.review-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-stars {
  display: flex;
  gap: 2px;
}

.review-stars .star {
  font-size: 16px;
  color: #d4d4d4;
}

.review-stars .star.filled,
.review-stars .star.half {
  color: #f5a623;
}

.review-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.review-author {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.review-verified-badge {
  font-size: 11px;
  color: #27ae60;
  background: #e8f5e9;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 500;
}

.review-date {
  font-size: 12px;
  color: var(--text-muted);
}

.review-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.review-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.review-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s;
}

.review-image:hover {
  transform: scale(1.05);
}

.review-admin-reply {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary-color);
}

.reply-header {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.reply-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.reply-date {
  font-size: 12px;
  color: var(--text-muted);
}

/* Review Pagination */
.review-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.review-page-btn {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.review-page-btn:hover {
  border-color: var(--text-primary);
}

.review-page-btn.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #fff;
}

/* Review Image Modal */
.review-image-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-image-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}

.review-image-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.review-image-modal-content img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-md);
}

.review-image-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: 8px;
}

/* Review Write Modal */
.review-write-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-write-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.review-write-modal-content {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.review-write-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
}

.review-write-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.review-write-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
}

.review-write-modal-body {
  padding: 24px;
}

.review-write-modal-body .form-group {
  margin-bottom: 20px;
}

.review-write-modal-body label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.review-write-modal-body textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  resize: vertical;
}

.review-write-modal-body input[type="file"] {
  font-size: 13px;
}


.review-upload-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.review-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.review-upload-preview-item {
  position: relative;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-secondary);
}

.review-upload-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-upload-preview-item > span {
  position: absolute;
  left: 4px;
  bottom: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.review-upload-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
}

.review-upload-progress-wrap {
  margin-top: 10px;
}

.review-upload-progress-track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-light);
}

.review-upload-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-color);
  transition: width 0.15s ease;
}

.review-upload-progress-text {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.review-rating-input {
  display: flex;
  gap: 4px;
}

.star-input {
  font-size: 28px;
  color: #d4d4d4;
  cursor: pointer;
  transition: color 0.2s;
}

.star-input.active,
.star-input:hover,
.star-input:hover ~ .star-input {
  color: #f5a623;
}

.review-write-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border-light);
}

/* Responsive */
@media (max-width: 768px) {
  .review-summary {
    flex-direction: column;
    gap: 24px;
  }
  
  .review-summary-left {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding-right: 0;
    padding-bottom: 24px;
  }
  
  .review-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .review-sort-buttons {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  
  .review-sort-btn {
    white-space: nowrap;
  }
}

/* ============================================
   MEMBER CENTER REVIEWS
   ============================================ */

.member-review-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.review-filter-btn {
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.review-filter-btn:hover {
  border-color: var(--text-secondary);
}

.review-filter-btn.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #fff;
}

.my-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.my-review-card {
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.my-review-product {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.my-review-product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.my-review-product-info {
  flex: 1;
}

.my-review-product-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.my-review-date {
  font-size: 12px;
  color: var(--text-muted);
}

.my-review-content {
  font-size: 14px;
  line-height: 1.6;
}

.my-review-stars {
  margin-bottom: 8px;
}

.my-review-stars .star {
  font-size: 16px;
  color: #d4d4d4;
}

.my-review-stars .star.filled,
.my-review-stars .star.half {
  color: #f5a623;
}

.my-review-text {
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.my-review-admin-reply {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary-color);
  font-size: 13px;
  color: var(--text-secondary);
}

.review-status-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.review-status-badge.approved {
  background: #e8f5e9;
  color: #27ae60;
}

.review-status-badge.pending {
  background: #fff3cd;
  color: #f39c12;
}

.review-status-badge.hidden {
  background: #f8d7da;
  color: #e74c3c;
}

/* ========================================
   COOKIE CONSENT BANNER
   ======================================== */

/* Desktop default (>1024px) */
.cookie-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 9999;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  color: #000000;
  max-width: 900px;
  width: calc(100% - 40px);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.cookie-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.cookie-banner.position-bottom {
  bottom: 40px;
}

.cookie-banner.position-bottom.show {
  transform: translateX(-50%) translateY(0);
}

.cookie-banner.position-top {
  top: 40px;
  transform: translateX(-50%) translateY(-100%);
}

.cookie-banner.position-top.show {
  transform: translateX(-50%) translateY(0);
}

.cookie-banner-text {
  flex: 1;
  line-height: 1.6;
  color: #000000;
}

.cookie-banner-text a {
  color: #000000;
  text-decoration: none;
  font-weight: 400;
}

.cookie-banner-text a:hover {
  color: #000000;
  text-decoration: none;
}

/* Inline accept text (brand color) - hidden on desktop/tablet, visible on mobile only */
.cookie-accept-inline {
  color: #C79A63;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
  display: none;
}
.cookie-accept-inline:hover {
  opacity: 0.75;
  text-decoration: none;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Hide mobile-only accept button on desktop */
.cookie-banner-accept-btn-mobile {
  display: none;
}

.cookie-banner-accept-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-banner-accept-btn:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Circular close button - hidden on desktop */
.cookie-banner-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}
.cookie-banner-close-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.cookie-banner-close-btn:active {
  transform: scale(0.95);
}
.cookie-banner-close-btn svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   TABLET (768px ~ 1024px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .cookie-banner {
    width: 88%;
    max-width: none;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    height: 58px;
    padding: 0 28px;
    border-radius: 14px;
    gap: 16px;
    font-size: 15px;
  }

  .cookie-banner.show {
    transform: translateX(-50%) translateY(0);
  }

  .cookie-banner.position-bottom {
    bottom: 28px;
  }

  .cookie-banner.position-top {
    top: 28px;
    transform: translateX(-50%) translateY(-100%);
  }

  .cookie-banner.position-top.show {
    transform: translateX(-50%) translateY(0);
  }

  .cookie-banner-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000000;
  }

  /* Hide desktop accept button, show circular close */
  .cookie-banner-accept-btn {
    display: none;
  }

  /* Hide mobile accept button on tablet */
  .cookie-banner-accept-btn-mobile {
    display: none;
  }

  .cookie-banner-close-btn {
    display: flex;
    width: 42px;
    height: 42px;
  }

  .cookie-accept-inline {
    display: none;
  }
}

/* ========================================
   MOBILE (≤767px) - Floating Capsule Banner
   ======================================== */
@media (max-width: 767px) {
  .cookie-banner {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%) translateY(100%);
    background: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.05);
    padding: 0 6px 0 14px;
    height: 36px;
    min-height: 34px;
    max-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 10px;
    color: #000000;
    z-index: 9999;
    top: auto;
  }

  .cookie-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  .cookie-banner.position-bottom {
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
  }

  .cookie-banner.position-top {
    top: calc(12px + env(safe-area-inset-top));
    bottom: auto;
    transform: translateX(-50%) translateY(-100%);
  }

  .cookie-banner.position-top.show {
    transform: translateX(-50%) translateY(0);
  }

  .cookie-banner-text {
    flex: 1;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    color: #333333;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Hide desktop accept button on mobile */
  .cookie-banner-accept-btn {
    display: none;
  }

  /* Hide mobile gold accept button — replaced by inline text */
  .cookie-banner-accept-btn-mobile {
    display: none !important;
  }

  /* Show circular close button on mobile — 24×24 black circle */
  .cookie-banner-close-btn {
    display: flex;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
  }
  .cookie-banner-close-btn:hover {
    transform: scale(1.1);
  }
  .cookie-banner-close-btn:active {
    transform: scale(0.92);
  }
  .cookie-banner-close-btn svg {
    width: 10px;
    height: 10px;
  }

  /* Inline accept text visible — brand gold (uses existing brand color) */
  .cookie-accept-inline {
    display: inline;
    color: var(--brand-gold, #C79A63);
    font-weight: 600;
    cursor: pointer;
    font-size: 11px;
  }
  .cookie-accept-inline:hover {
    opacity: 0.75;
  }

  /* ── FAB shift when cookie banner visible ── */
  .fab-container.cookie-fab-shift {
    transition: bottom 0.28s ease;
  }
}

/* Cookie Settings Modal */
.cookie-settings-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-settings-modal.show {
  display: flex;
}

.cookie-settings-content {
  background: #fff;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.cookie-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.cookie-settings-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #2f2925;
}

.cookie-settings-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.cookie-settings-close:hover {
  color: #333;
}

.cookie-settings-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 24px;
}

.cookie-category-item {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.cookie-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cookie-category-name {
  font-size: 14px;
  font-weight: 600;
  color: #2f2925;
}

.cookie-category-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 12px;
}

.cookie-category-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.cookie-tool-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}

.cookie-tool-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.cookie-tool-check.active {
  background: #27ae60;
  color: #fff;
}

.cookie-tool-check.inactive {
  background: #eee;
  color: #ccc;
}

.cookie-settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.cookie-settings-save-btn {
  background: #2f2925;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.cookie-settings-save-btn:hover {
  background: #4a3f35;
}

.cookie-settings-cancel-btn {
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.cookie-settings-cancel-btn:hover {
  border-color: #999;
  color: #333;
}

/* Toggle switch for cookie categories */
.cookie-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.3s;
}

.cookie-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
  background: #27ae60;
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(18px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Footer cookie links */
.footer-cookie-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 8px;
}

.footer-cookie-links a {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-cookie-links a:hover {
  color: rgba(255,255,255,0.9);
}

/* Responsive - cookie settings modal */
@media (max-width: 768px) {
  .cookie-settings-content {
    padding: 24px 20px;
  }
}

/* ============================================
   BRAND LOADING ANIMATION
   ============================================ */
.brand-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  will-change: opacity;
}

.brand-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Prevent scroll while loading */
body.brand-loader-active {
  overflow: hidden !important;
}

.brand-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Logo section */
.brand-loader__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: brandLoaderFadeIn 0.3s ease-in-out 0.05s forwards;
}

.brand-loader__brand {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 10px;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.2;
}

.brand-loader__sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--text-muted);
  line-height: 1;
}

/* Dots container — directly below logo */
.brand-loader__dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  opacity: 0;
  animation: brandLoaderFadeIn 0.25s ease-in-out 0.3s forwards;
}

/* Base dot */
.brand-loader__dot {
  display: block;
  border-radius: 50%;
  will-change: opacity, transform, background-color, border-color;
}

/* Left & Right dots: 7px, alternate solid ↔ hollow */
.brand-loader__dot--left,
.brand-loader__dot--right {
  width: 7px;
  height: 7px;
  background-color: var(--text-muted);
  border: 1px solid var(--text-muted);
}

/* Center dot: 3.5px, always subtle */
.brand-loader__dot--center {
  width: 3.5px;
  height: 3.5px;
  background-color: var(--text-muted);
  border: none;
  opacity: 0.35;
}

/* Left dot animation: solid → hollow → solid (0.8s cycle) */
.brand-loader__dots.is-active .brand-loader__dot--left {
  animation: brandLoaderDotLeft 0.8s ease-in-out infinite;
}

/* Right dot animation: hollow → solid → hollow (0.8s cycle, offset) */
.brand-loader__dots.is-active .brand-loader__dot--right {
  animation: brandLoaderDotRight 0.8s ease-in-out infinite;
}

/* Keyframes */
@keyframes brandLoaderFadeIn {
  to {
    opacity: 1;
  }
}

/* Left: starts solid, becomes hollow at 50% */
@keyframes brandLoaderDotLeft {
  0%, 100% {
    background-color: var(--text-muted);
    transform: scale(1);
    opacity: 1;
  }
  50% {
    background-color: transparent;
    transform: scale(0.9);
    opacity: 0.6;
  }
}

/* Right: starts hollow, becomes solid at 50% */
@keyframes brandLoaderDotRight {
  0%, 100% {
    background-color: transparent;
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    background-color: var(--text-muted);
    transform: scale(1);
    opacity: 1;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .brand-loader__logo {
    animation: brandLoaderFadeIn 0.5s ease forwards;
  }

  .brand-loader__dots {
    animation: brandLoaderFadeIn 0.5s ease 0.2s forwards;
  }

  .brand-loader__dots.is-active .brand-loader__dot--left,
  .brand-loader__dots.is-active .brand-loader__dot--right {
    animation: none;
  }

  /* Simple opacity pulse only */
  .brand-loader__dots.is-active .brand-loader__dot--left {
    animation: brandLoaderReducedPulse 1.2s ease-in-out infinite;
  }

  .brand-loader__dots.is-active .brand-loader__dot--right {
    animation: brandLoaderReducedPulse 1.2s ease-in-out infinite 0.6s;
  }

  .brand-loader {
    transition: opacity 0.5s ease;
  }
}

@keyframes brandLoaderReducedPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .brand-loader__brand {
    font-size: 30px;
    letter-spacing: 8px;
  }

  .brand-loader__sub {
    font-size: 12px;
    letter-spacing: 3px;
  }

  .brand-loader__dots {
    margin-top: 20px;
  }
}

/* ================================================================
   PORTRAIT TABLET (768px–1024px, orientation: portrait)
   Product Detail Page — Two-Column Layout
   Does NOT affect mobile (≤767px), landscape tablet, or desktop (≥1025px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  /* ── LAYOUT: Two-column flex ── */
  .product-detail.pdp-desktop {
    display: flex !important;
    flex-wrap: wrap;
    gap: 32px;
    padding: 32px 0 0;
  }

  .product-detail.pdp-desktop .product-breadcrumb {
    width: 100%;
    flex: 0 0 100%;
    margin-bottom: 0;
  }

  /* ── LEFT COLUMN — Gallery ── */
  .pdp-left-col {
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pdp-main-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-main-image-wrap img,
  .pdp-main-image-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Zoom button on main image — removed for desktop (no longer rendered) */

  /* Main image arrows */
  .pdp-main-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s;
    z-index: 5;
    color: var(--pd-dark, #2b2724);
  }
  .pdp-main-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
  }
  .pdp-main-arrow.prev { left: 10px; }
  .pdp-main-arrow.next { right: 10px; }

  /* Thumbnail strip */
  .pdp-thumb-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .pdp-thumb-arrow {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    transition: all 0.2s;
    color: var(--pd-dark, #2b2724);
    z-index: 2;
  }
  .pdp-thumb-arrow:hover { background: #fff; }
  .pdp-thumb-arrow:disabled { opacity: 0.25; pointer-events: none; }
  .pdp-thumb-arrow.hide { display: none; }

  .pdp-thumb-scroll {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
  }

  .pdp-thumb-track {
    display: flex;
    gap: 6px;
    transition: transform 0.3s ease;
  }

  .pdp-thumb-item {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    background: var(--bg-secondary);
  }
  .pdp-thumb-item:hover { border-color: var(--pd-muted, #9a8e84); }
  .pdp-thumb-item.active { border-color: var(--pd-dark, #2b2724); }
  .pdp-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── RIGHT COLUMN — Product Info ── */
  .pdp-right-col {
    flex: 0 0 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  /* Promo tag */
  .pdp-promo-tag {
    font-size: 12px;
    font-style: italic;
    color: var(--pd-muted, #9a8e84);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }

  /* Tagline */
  .pdp-tagline {
    font-family: 'Noto Serif TC', 'Georgia', serif;
    font-size: 10px;
    font-weight: 400;
    color: #8C7464;
    line-height: 1.5;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
  }

  /* Product name */
  .pdp-right-col .pdp-product-name {
    font-family: 'Noto Serif TC', 'Georgia', serif;
    font-size: 24px;
    font-weight: 500;
    color: #000;
    line-height: 1.35;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }

  /* Short description */
  .pdp-short-desc {
    font-size: 11px;
    font-weight: 400;
    color: #333;
    line-height: 1.8;
    margin-bottom: 0;
  }

  /* Divider */
  .pdp-section-divider {
    width: 100%;
    height: 1px;
    background: var(--pd-border, #d8cec3);
    margin: 14px 0 22px;
  }

  /* Option groups */
  .pdp-right-col .product-option-group {
    margin-bottom: 14px;
  }
  .pdp-right-col .product-option-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--pd-muted, #9a8e84);
    margin-bottom: 8px;
  }

  /* Color/Size option buttons — match the product-detail reference pill style */
  .option-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .option-btn {
    padding: 8px 16px;
    border: 1px solid var(--pd-accent);
    border-radius: 9999px;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    appearance: none;
    -webkit-appearance: none;
    color: var(--pd-accent);
    -webkit-text-fill-color: var(--pd-accent);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
    min-width: 52px;
    text-align: center;
  }
  .option-btn:hover {
    background: #f7f4ef;
    border-color: var(--pd-accent);
  }
  .option-btn.selected {
    background: var(--pd-accent);
    color: var(--pd-white);
    border-color: var(--pd-accent);
    -webkit-text-fill-color: var(--pd-white);
  }
  .option-btn.sold-out {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  /* Price section */
  .pdp-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .pdp-price-current {
    font-size: 22px;
    font-weight: 600;
    color: var(--pd-dark, #2b2724);
    letter-spacing: 0.5px;
  }
  .pdp-price-original {
    font-size: 14px;
    color: var(--pd-muted, #9a8e84);
    text-decoration: line-through;
    font-weight: 400;
  }
  .pdp-discount-badge {
    display: inline-block;
    background: #D96B63;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
  }

  /* Quantity */
  .pdp-right-col .pd-quantity-label {
    margin-top: 0;
  }
  .pdp-right-col .qty-control {
    width: 100%;
    max-width: 100%;
    margin-bottom: 18px;
  }

  /* Addon section */
  .pdp-addon-wrap {
    margin: 12px 0 0;
  }
  .pdp-addon-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
  }
  .pdp-addon-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-dark, #2b2724);
  }
  .pdp-addon-expand-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--pd-muted, #9a8e84);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    padding: 4px 0;
  }
  .pdp-addon-expand-btn svg {
    transition: transform 0.2s;
  }
  .pdp-addon-expand-btn.expanded svg {
    transform: rotate(180deg);
  }
  .pdp-addon-body {
    display: block;
    padding: 8px 0 0;
  }
  .pdp-addon-body.open {
    display: block;
  }
  #pdAddonSection .pd-addon-extra {
    display: none;
  }
  .pdp-addon-body.is-expanded #pdAddonSection .pd-addon-extra {
    display: grid;
  }

  /* ── BUY BUTTONS — 50/50 split, consistent gap ── */
  .pdp-right-col .pd-buy-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
    margin-top: 16px;
  }

  .pd-btn {
    height: 46px;
    border-radius: var(--pd-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Buy Now: fixed #292018 background, white text */
  .pd-btn-buy-now {
    background: #292018 !important;
    color: #ffffff !important;
    border: 1px solid #292018 !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  .pd-btn-buy-now:hover {
    background: #1d1610 !important;
    border-color: #1d1610 !important;
  }

  /* Add to Cart: outlined style */
  .pd-btn-add-cart {
    background: var(--pd-bg);
    color: var(--pd-dark);
    border: 1px solid var(--pd-dark);
  }
  .pd-btn-add-cart:hover {
    background: var(--pd-card);
  }

  /* ── TABS SECTION — full width below columns ── */
  .product-detail.pdp-desktop .product-tabs-section {
    width: 100%;
    flex: 0 0 100%;
    margin-top: 36px;
  }

  /* ── FLOATING ACTION BUTTONS ── */
  .fab-container {
    position: fixed;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    top: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
  }

  .fab-btn {
    pointer-events: auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
  }
  .fab-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  }
  .fab-btn:active {
    transform: scale(0.95);
  }

  /* LINE button */
  .fab-line {
    background: transparent;
    padding: 0;
  }
  .fab-line img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  /* Cart button with badge */
  .fab-cart {
    background: #c4917b;
    color: #fff;
    position: relative;
  }
  .fab-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #333;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
  }

  /* Back to top */
  .fab-top {
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
  }
  .fab-top.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.6);
  }

  /* ── Prevent horizontal scroll ── */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ================================================================
   DESKTOP LIGHTBOX (hover-capable devices only)
   Not inside any media query — JS guards execution by pointer/hover
   ================================================================ */
.desktop-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.desktop-lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.92);
  cursor: pointer;
}
.desktop-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 3;
  transition: background 0.2s;
}
.desktop-lightbox-close:hover {
  background: rgba(255,255,255,0.25);
}
.desktop-lightbox-img-wrap {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.desktop-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.desktop-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 3;
  transition: background 0.2s, opacity 0.2s;
}
.desktop-lightbox-arrow:hover:not(:disabled) {
  background: rgba(255,255,255,0.28);
}
.desktop-lightbox-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}
.desktop-lightbox-prev { left: 20px; }
.desktop-lightbox-next { right: 20px; }
.desktop-lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
  padding: 6px 18px;
  border-radius: 999px;
  z-index: 3;
  letter-spacing: 1px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ============================================
   SOLD-OUT PRODUCT CARD STATES
   ============================================ */

/* Bottom "補貨中" button replacing normal purchase button */
.sold-out-bottom-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin-top: 8px;
  background: #8C7464;
  color: #FFF9F3;
  border: none;
  border-radius: 4px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  opacity: 1;
  font-family: var(--font-body);
  transition: background 0.15s ease;
}
.sold-out-bottom-btn:hover {
  background: #7D6658;
}
.sold-out-bottom-btn:active {
  background: #705A4E;
}
.sold-out-bottom-btn:focus {
  outline: 2px solid rgba(140, 116, 100, 0.28);
  outline-offset: 2px;
}

/* Overlay container — sits on top of card image */
.sold-out-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: background 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}

.sold-out-overlay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
  background: #fff;
  color: #333;
  border: none;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  font-family: var(--font-body);
  pointer-events: auto;
}

.sold-out-overlay-btn:hover {
  background: #f5f5f5;
}

/* ── Desktop: show overlay on hover ── */
@media (hover: hover) and (pointer: fine) {
  .is-sold-out:hover .sold-out-overlay {
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
    pointer-events: auto;
  }
  .is-sold-out:hover .sold-out-overlay .sold-out-overlay-btn {
    opacity: 1;
    transform: translateY(0);
  }
  .is-sold-out:hover .sold-out-overlay .sold-out-btn-detail {
    transition-delay: 0.05s;
  }
  
  /* Desktop: horizontal bar buttons (80-85% width) */
  .is-sold-out .sold-out-overlay-btn {
    width: 82%;
    height: 40px;
    border-radius: 2px;
    font-size: 14px;
  }
  
  .is-sold-out .sold-out-overlay {
    gap: 16px;
  }
}

/* ── Mobile / Tablet: tap to toggle overlay ── */
@media (hover: none), (pointer: coarse) {
  .sold-out-overlay.is-active {
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
    pointer-events: auto;
  }
  .sold-out-overlay.is-active .sold-out-overlay-btn {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Mobile: square buttons (120px width, 40px height) */
  .sold-out-overlay-btn {
    width: 120px;
    height: 40px;
    border-radius: 2px;
  }
}

/* Ensure badges stay above overlay on sold-out cards */
.is-sold-out .product-badges-group,
.is-sold-out .cat-badges-group,
.is-sold-out .mcat-badges-group {
  position: relative;
  z-index: 11;
}

/* Ensure wishlist button stays above overlay */
.is-sold-out .product-wishlist,
.is-sold-out .cat-card-wish,
.is-sold-out .mcat-card-wish {
  z-index: 11;
}

/* PDP "補貨中" button (detail page) */
.pd-btn-restock {
  width: 100%;
  height: 48px;
  background: #4a4a4a;
  color: #fff;
  border: none;
  border-radius: var(--pd-radius, 4px);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: var(--font-body);
}
.pd-btn-restock:hover {
  background: #3a3a3a;
}

.pd-sold-out-buttons {
  display: flex;
  flex-direction: column;
}

/* ============================================
   RESTOCK NOTIFICATION MODAL
   ============================================ */
.restock-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.restock-modal-overlay.is-open {
  display: flex;
}

.restock-modal {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px 28px;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: restockModalIn 0.25s ease;
}

@keyframes restockModalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.restock-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.restock-modal-close:hover {
  background: #f0f0f0;
  color: #333;
}

.restock-modal-icon {
  text-align: center;
  margin-bottom: 16px;
  color: #5a5a5a;
}

.restock-modal-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px;
  color: #2f2925;
  letter-spacing: 0.5px;
}

.restock-modal-desc {
  font-size: 14px;
  color: #8a7e74;
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.6;
}

.restock-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.restock-modal-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.restock-modal-input:focus {
  border-color: #2f2925;
}

.restock-modal-error {
  font-size: 13px;
  color: #d9534f;
  margin: -4px 0 0;
  text-align: center;
}

.restock-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.restock-modal-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
}
.restock-modal-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.restock-modal-cancel {
  background: #F4EFEA;
  color: #665B54;
  border: 1px solid #E8DFD8;
  border-radius: 6px;
  box-shadow: none;
}
.restock-modal-cancel:hover {
  background: #ECE4DE;
}

.restock-modal-submit {
  background: #1E1713;
  color: #FFFFFF;
  border: none;
  box-shadow: none;
}
.restock-modal-submit:hover:not(:disabled) {
  background: #2B211B;
}
.restock-modal-submit:active:not(:disabled) {
  background: #17110E;
}
.restock-modal-submit:focus {
  outline: 2px solid rgba(30, 23, 19, 0.22);
  outline-offset: 2px;
}

.restock-modal-success {
  font-size: 14px;
  color: #2e7d32;
  text-align: center;
  margin: 4px 0 0;
  font-weight: 500;
}

/* === MOBILE CART SIDEBAR (≤767px) === */
@media (max-width: 767px) {
  .cart-drawer {
    width: 78vw;
    max-width: 420px;
    right: -78vw;
  }
  .cart-drawer.open {
    right: 0;
  }
  /* Ensure cart item layout works in narrow sidebar */
  .cart-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
    position: relative;
  }
  .cart-item-product { margin-bottom: 4px; }
  .cart-item-image { width: 64px; height: 64px; }
  .cart-item-price { text-align: left; font-size: 13px; }
  .cart-item-price::before { content: '單價：'; color: var(--text-muted); font-weight: 400; }
  .cart-item-subtotal { text-align: left; font-size: 13px; }
  .cart-item-subtotal::before { content: '小計：'; color: var(--text-muted); font-weight: 400; }
  .cart-item-qty { margin: 0; }
  .cart-item-remove { position: absolute; right: 0; top: 12px; }
  .cart-col-headers { display: none; }
  .cart-drawer-footer {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
}

/* === AUTH MODAL ABOVE CART DRAWER === */
/* When auth modal is active, raise it above cart drawer (z-index 201) */
.modal-overlay.active {
  z-index: 202;
}

/* === PDP TITLE STYLE FINAL OVERRIDE (20260724) === */
.product-detail.pdp-desktop .pdp-title-block .pdp-tagline,
.product-detail.pdp-mobile .m-pdp-title-block .m-pdp-tagline {
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #8C7464 !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px !important;
}

.product-detail.pdp-desktop .pdp-title-block .pdp-product-name,
.product-detail.pdp-mobile .m-pdp-title-block .m-pdp-name {
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #000000 !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px !important;
}

.product-detail.pdp-desktop .pdp-title-block .pdp-short-desc,
.product-detail.pdp-mobile .m-pdp-title-block .m-pdp-desc {
  font-family: 'Noto Serif TC', 'Noto Sans TC', serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #333333 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

/* Mobile product detail rich content image containment */
@media (max-width: 767px) {
  #productTabIntro,
  #productTabSize,
  #productTabShopping,
  #productTabIntro .tab-content-inner,
  #productTabSize .tab-content-inner,
  #productTabShopping .tab-content-inner,
  #productTabIntro .tab-text,
  #productTabSize .tab-text,
  #productTabShopping .tab-text,
  #productTabIntro .tab-images,
  #productTabSize .tab-images,
  #productTabShopping .tab-images {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #productTabIntro .tab-text p,
  #productTabIntro .tab-text div,
  #productTabIntro .tab-text figure,
  #productTabIntro .tab-text a,
  #productTabSize .tab-text p,
  #productTabSize .tab-text div,
  #productTabSize .tab-text figure,
  #productTabSize .tab-text a,
  #productTabShopping .tab-text p,
  #productTabShopping .tab-text div,
  #productTabShopping .tab-text figure,
  #productTabShopping .tab-text a {
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  #productTabIntro img,
  #productTabSize img,
  #productTabShopping img {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    display: block;
    object-fit: contain;
  }
}

/* === Member center orders: phone-only compact UI (desktop/tablet unchanged) === */
@media (max-width: 767px) {
  #memberCenterPage,
  #memberCenterPage * {
    box-sizing: border-box;
  }

  #memberCenterPage {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  #memberCenterPage .member-center-container,
  #memberCenterPage .member-center-layout,
  #memberCenterPage .member-content,
  #memberCenterPage .member-tab,
  #memberCenterPage #ordersListContainer,
  #memberCenterPage #orderDetailContent {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #memberCenterPage .member-center-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ① Order status tabs: horizontal scroll, no page overflow. */
  #memberCenterPage .order-status-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0 0 6px;
    margin: 0 0 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #memberCenterPage .order-status-tabs::-webkit-scrollbar {
    display: none;
  }

  #memberCenterPage .order-status-tab {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.2;
  }

  /* Phone shows the six primary states requested. Other states remain available in "全部". */
  #memberCenterPage .order-status-tab[data-status="in_transit"],
  #memberCenterPage .order-status-tab[data-status="returned"] {
    display: none;
  }

  /* ②⑥ Compact order card: 90x90 product image + right-side product info. */
  #memberCenterPage .mobile-order-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin: 0 0 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #ece6de;
    border-radius: 14px;
    cursor: pointer;
  }

  #memberCenterPage .mobile-order-product-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
  }

  #memberCenterPage .mobile-order-image-wrap {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    overflow: hidden;
    border-radius: 10px;
    background: #f5f1ec;
  }

  #memberCenterPage .mobile-order-image-wrap img {
    display: block;
    width: 90px;
    height: 90px;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
  }

  #memberCenterPage .mobile-order-product-content {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
  }

  #memberCenterPage .mobile-order-product-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    color: #2d2926;
    margin-bottom: 5px;
  }

  #memberCenterPage .mobile-order-product-spec,
  #memberCenterPage .mobile-order-product-more {
    font-size: 12px;
    line-height: 1.55;
    color: #8a7e74;
  }

  #memberCenterPage .mobile-order-product-price {
    margin-top: 7px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    color: #2d2926;
  }

  #memberCenterPage .mobile-order-divider {
    width: 100%;
    height: 1px;
    margin: 14px 0;
    background: #eee8e2;
  }

  #memberCenterPage .mobile-order-summary {
    min-width: 0;
  }

  #memberCenterPage .mobile-order-number {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: #403a35;
  }

  #memberCenterPage .mobile-order-date {
    margin-top: 5px;
    font-size: 12px;
    color: #91867d;
  }

  #memberCenterPage .mobile-order-methods {
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.45;
    color: #5c544d;
  }

  #memberCenterPage .mobile-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }

  #memberCenterPage .mobile-order-footer .order-card-status {
    flex: 0 1 auto;
    max-width: 48%;
    white-space: nowrap;
  }

  /* ⑦ Lightweight "查看訂單" button. */
  #memberCenterPage .mobile-order-view-btn {
    flex: 0 0 auto;
    min-width: 128px;
    height: 48px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d9d1ca;
    border-radius: 12px;
    color: #403a35;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  #memberCenterPage .mobile-order-view-btn span {
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
  }

  #memberCenterPage .mobile-order-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  #memberCenterPage .mobile-order-secondary-btn {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #d9d1ca;
    background: #fff;
    color: #5b524b;
    font-size: 13px;
  }

  #memberCenterPage .mobile-order-secondary-btn.danger {
    color: #b54a3a;
    border-color: #e8c5bf;
    background: #fff8f6;
  }

  #memberCenterPage .mobile-order-expired,
  #memberCenterPage .mobile-detail-empty {
    font-size: 12px;
    color: #9b9189;
  }

  /* ⑧ Mobile order detail: compact information cards. */
  #memberCenterPage #memberTabOrderDetail .member-back-btn {
    margin-bottom: 14px !important;
  }

  #memberCenterPage .mobile-order-detail-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #ece6de;
    border-radius: 14px;
  }

  #memberCenterPage .mobile-order-detail-heading {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eee8e2;
    font-size: 16px;
    font-weight: 700;
    color: #2d2926;
  }

  #memberCenterPage .mobile-order-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 14px;
    width: 100%;
    min-width: 0;
  }

  #memberCenterPage .mobile-order-detail-field {
    min-width: 0;
  }

  #memberCenterPage .mobile-order-detail-field.full {
    grid-column: 1 / -1;
  }

  #memberCenterPage .mobile-order-detail-field > span {
    display: block;
    margin-bottom: 5px;
    color: #92877e;
    font-size: 12px;
    line-height: 1.4;
  }

  #memberCenterPage .mobile-order-detail-field > strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #2d2926;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
  }

  #memberCenterPage .mobile-detail-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #memberCenterPage .mobile-detail-product-row {
    display: flex;
    gap: 12px;
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1ece7;
  }

  #memberCenterPage .mobile-detail-product-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  #memberCenterPage .mobile-detail-product-image {
    width: 72px;
    height: 72px;
    max-width: 72px;
    flex: 0 0 72px;
    object-fit: cover;
    border-radius: 9px;
    background: #f5f1ec;
  }

  #memberCenterPage .mobile-detail-product-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  #memberCenterPage .mobile-detail-product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2d2926;
    font-size: 14px;
    font-weight: 600;
  }

  #memberCenterPage .mobile-detail-product-spec,
  #memberCenterPage .mobile-detail-product-meta {
    margin-top: 5px;
    color: #8a7e74;
    font-size: 12px;
    line-height: 1.45;
  }

  #memberCenterPage .mobile-order-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  #memberCenterPage .mobile-detail-action-btn {
    min-height: 44px;
    padding: 9px 15px;
    border-radius: 11px;
    border: 1px solid #d9d1ca;
    background: #fff;
    color: #403a35;
    font-size: 13px;
    font-weight: 600;
  }

  #memberCenterPage .mobile-detail-action-btn.danger {
    color: #b54a3a;
    border-color: #e8c5bf;
    background: #fff8f6;
  }

  #memberCenterPage .mobile-detail-action-btn.warning {
    color: #9a651c;
    border-color: #ead5ae;
    background: #fffaf1;
  }

  /* ⑨ Defend against flex/image content stretching the phone viewport. */
  #memberCenterPage img {
    max-width: 100%;
  }

  #memberCenterPage .order-card-new,
  #memberCenterPage .mobile-order-card,
  #memberCenterPage .mobile-order-product-content,
  #memberCenterPage .mobile-detail-product-content {
    min-width: 0;
  }
}

/* v26: mobile-only member order progress, placed below product information. */
@media (max-width: 767px) {
  #memberCenterPage .mobile-order-progress-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 16px 14px 14px;
    background: #fff;
    border: 1px solid #ece6de;
    border-radius: 14px;
    box-sizing: border-box;
  }

  #memberCenterPage .mobile-order-progress-heading {
    margin-bottom: 12px;
    color: #2d2926;
    font-size: 16px;
    font-weight: 700;
  }

  #memberCenterPage .mobile-order-progress-current {
    text-align: center;
    margin-bottom: 16px;
  }

  #memberCenterPage .mobile-order-progress-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #f4efe8;
    color: #8c684c;
    font-size: 14px;
    font-weight: 700;
  }

  #memberCenterPage .mobile-order-progress-current p {
    margin: 7px 0 0;
    color: #7d746d;
    font-size: 12px;
    line-height: 1.5;
  }

  #memberCenterPage .mobile-order-progress-track {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
  }

  #memberCenterPage .mobile-order-progress-step {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #memberCenterPage .mobile-order-progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 14px);
    width: calc(100% - 28px);
    height: 1px;
    background: #d9d7d4;
    z-index: 0;
  }

  #memberCenterPage .mobile-order-progress-step.is-complete:not(:last-child)::after {
    background: #b88a60;
  }

  #memberCenterPage .mobile-order-progress-node {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd2d4;
    border-radius: 50%;
    background: #fff;
    color: #62686d;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
  }

  #memberCenterPage .mobile-order-progress-step.is-complete .mobile-order-progress-node,
  #memberCenterPage .mobile-order-progress-step.is-current .mobile-order-progress-node {
    border-color: #b88a60;
    background: #b88a60;
    color: #fff;
  }

  #memberCenterPage .mobile-order-progress-label {
    display: block;
    max-width: 100%;
    margin-top: 7px;
    color: #403a35;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
  }

  #memberCenterPage .mobile-order-progress-step.is-current .mobile-order-progress-label {
    color: #8c684c;
    font-weight: 700;
  }

  #memberCenterPage .mobile-order-progress-count {
    margin-top: 12px;
    text-align: center;
    color: #8f8580;
    font-size: 11px;
  }

  #memberCenterPage .mobile-order-progress-card.is-cancelled .mobile-order-progress-badge {
    background: #fff0ef;
    color: #b44d45;
  }

  #memberCenterPage .mobile-order-progress-card.is-cancelled .mobile-order-progress-node {
    background: #fff;
    border-color: #ddd7d2;
    color: #aaa19a;
  }
}

/* ================================================================
   CART DRAWER REFINEMENT — responsive storefront drawer (v28)
   Mobile follows compact reference; tablet/desktop uses inset panel.
   ================================================================ */
.cart-drawer {
  top: 12px;
  bottom: 12px;
  height: auto;
  width: min(400px, calc(100vw - 112px));
  right: calc(-400px - 88px);
  border-radius: 14px;
  background: rgba(249, 246, 242, 0.98);
  box-shadow: 0 14px 42px rgba(41, 32, 26, 0.18);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cart-drawer.open { right: 72px; }
.cart-drawer-header {
  padding: 20px 22px 14px;
  align-items: flex-start;
  background: transparent;
}
.cart-drawer-heading { min-width: 0; }
.cart-drawer-header h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  color: #34302d;
}
.cart-drawer-heading p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: #8f8983;
}
.cart-drawer-close {
  font-size: 23px;
  line-height: 1;
  padding: 0 2px;
  color: #4e4945;
}
.cart-drawer-body {
  padding: 0 22px 8px;
  scrollbar-width: thin;
  scrollbar-color: #d9d1ca transparent;
}
.cart-col-headers { display: none !important; }
.cart-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(113, 98, 87, 0.10);
  align-items: start;
  background: transparent;
}
.cart-item:hover { background: transparent; }
.cart-item-image {
  width: 64px;
  height: 72px;
  border-radius: 8px;
  background: #f2ebe3;
  align-self: start;
}
.cart-item-image img { object-fit: cover; }
.cart-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.cart-item-text { min-width: 0; gap: 4px; }
.cart-item-name {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  color: #48423e;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cart-item-variant {
  font-size: 10px;
  color: #98918a;
}
.cart-item-unit-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 1px;
  font-size: 11px;
  color: #67605a;
}
.cart-item-original-price,
.cart-item-addon-original {
  font-size: 9px;
  color: #aaa29c;
  text-decoration: line-through;
}
.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cart-item-qty {
  width: 78px;
  height: 27px;
  margin: 0;
  border-radius: 6px;
  border-color: #e7e0da;
  background: rgba(255,255,255,.55);
}
.cart-item-qty button {
  width: 25px;
  font-size: 12px;
  background: rgba(255,255,255,.38);
}
.cart-item-qty span {
  width: 28px;
  font-size: 11px;
  line-height: 27px;
  background: transparent;
}
.cart-item-subtotal {
  font-size: 11px;
  font-weight: 500;
  text-align: right;
  color: #4b4540;
}
.cart-item-subtotal::before { content: none !important; }
.cart-item-price { display: none !important; }
.cart-item-remove {
  position: static !important;
  width: 26px;
  height: 26px;
  margin: -3px -4px 0 0;
  padding: 5px;
  flex: 0 0 auto;
  color: #706963;
}
.cart-addon-badge {
  align-self: flex-start;
  margin-top: 1px;
  font-size: 9px;
}
.cart-drawer-footer {
  padding: 14px 22px 18px;
  background: linear-gradient(to bottom, rgba(249,246,242,.86), #f9f6f2 24%);
  border-top: 1px solid rgba(113, 98, 87, 0.10);
}
.cart-footer-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 11px;
  color: #706963;
}
.cart-total {
  margin: 0;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.cart-total #cartTotal {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #3f3935;
}
.cart-checkout-btn {
  width: 100%;
  height: 48px;
  justify-content: center;
  border-radius: 8px;
  background: #383430 !important;
  border-color: #383430 !important;
  color: #fff !important;
  font-size: 13px;
  letter-spacing: .04em;
}

/* Keep floating actions from covering cart totals / controls while drawer is open. */
body.cart-drawer-open .fab-container {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .cart-drawer {
    width: min(400px, calc(100vw - 104px));
    right: calc(-400px - 80px);
  }
  .cart-drawer.open { right: 64px; }
}

@media (max-width: 767px) {
  .cart-drawer {
    top: 8px;
    bottom: 8px;
    width: calc(100vw - 24px);
    max-width: 360px;
    height: auto;
    right: calc(-100vw - 24px);
    border-radius: 14px;
  }
  .cart-drawer.open { right: 12px; }
  .cart-drawer-header { padding: 18px 18px 13px; }
  .cart-drawer-header h3 { font-size: 18px; }
  .cart-drawer-heading p { font-size: 10px; }
  .cart-drawer-body { padding: 0 18px 6px; }
  .cart-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 11px;
    padding: 12px 0;
  }
  .cart-item-image {
    width: 58px;
    height: 64px;
    border-radius: 7px;
  }
  .cart-item-main { gap: 9px; }
  .cart-item-name { font-size: 11px; }
  .cart-item-variant,
  .cart-item-unit-price,
  .cart-item-subtotal { font-size: 10px; }
  .cart-item-qty { width: 76px; height: 26px; }
  .cart-item-qty button { width: 24px; }
  .cart-item-qty span { width: 28px; line-height: 26px; }
  .cart-drawer-footer {
    padding: 12px 18px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  }
  .cart-footer-summary { margin-bottom: 12px; font-size: 10px; }
  .cart-total { font-size: 10px; }
  .cart-total #cartTotal { font-size: 17px; }
  .cart-checkout-btn { height: 46px; border-radius: 8px; font-size: 12px; }
}

/* ================================================================
   CART DRAWER — Apple Glass refinement (v29)
   Visual-only override. Keeps existing cart behaviour/data logic.
   ================================================================ */
#cartOverlay.drawer-overlay {
  background: rgba(35, 30, 25, .08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cart-drawer {
  position: fixed;
  top: 12px;
  bottom: 12px;
  height: auto;
  width: min(420px, calc(100vw - 136px));
  right: calc(-420px - 112px);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 30px;
  background: rgba(247, 242, 236, .86);
  box-shadow:
    0 12px 35px rgba(172, 150, 125, .08),
    0 2px 10px rgba(255, 255, 255, .18) inset;
  backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
  overflow: hidden;
  isolation: isolate;
}

.cart-drawer.open {
  right: 88px;
}

.cart-drawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .28),
    rgba(255, 255, 255, .12),
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

.cart-drawer-header,
.cart-drawer-body,
.cart-drawer-footer {
  position: relative;
  z-index: 1;
}

.cart-drawer-header {
  padding: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
}

.cart-drawer-header h3 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
}

.cart-drawer-heading p {
  margin-top: 7px;
  font-size: 13px;
  color: rgba(65, 57, 51, .58);
}

.cart-drawer-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  color: #3f3935;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cart-drawer-body {
  padding: 0 32px 10px;
}

.cart-item {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
}

.cart-item-image {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .20);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-main {
  min-width: 0;
  gap: 13px;
}

.cart-item-name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: #3f3935;
}

.cart-item-variant {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(72, 64, 58, .56);
}

.cart-item-unit-price,
.cart-item-subtotal {
  font-size: 17px;
  line-height: 1.35;
  color: #403a36;
}

.cart-item-original-price,
.cart-item-addon-original {
  font-size: 13px;
}

.cart-item-qty {
  width: 96px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .40);
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.cart-item-qty button {
  width: 32px;
  background: transparent;
}

.cart-item-qty span {
  width: 32px;
  line-height: 34px;
  background: transparent;
}

.cart-item-remove {
  color: rgba(63, 57, 53, .68);
}

.cart-drawer-footer {
  padding: 18px 32px 26px;
  border-top: 1px solid rgba(255, 255, 255, .35);
  background: rgba(247, 242, 236, .42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cart-footer-summary {
  margin-bottom: 16px;
  font-size: 14px;
  color: rgba(63, 57, 53, .68);
}

.cart-total {
  font-size: 14px;
  gap: 9px;
}

.cart-total #cartTotal {
  font-size: 24px;
  font-weight: 500;
  color: #2f2925;
}

.cart-checkout-btn {
  height: 62px;
  border-radius: 999px;
  background: #2f2925 !important;
  border-color: #2f2925 !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(47, 41, 37, .10);
}

/* Keep all storefront floating controls clear of totals / CTA while cart is open. */
body.cart-drawer-open .fab-container,
body.cart-drawer-open .floating-buttons,
body.cart-drawer-open .floating-actions,
body.cart-drawer-open .line-floating-btn,
body.cart-drawer-open .scroll-top-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Tablet: glass panel remains inset from the right edge. */
@media (min-width: 768px) and (max-width: 1100px) {
  .cart-drawer {
    width: min(420px, calc(100vw - 128px));
    right: calc(-420px - 104px);
  }
  .cart-drawer.open {
    right: 72px;
  }
}

/* Mobile: same glass language, compact enough for one-hand use. */
@media (max-width: 767px) {
  .cart-drawer {
    top: 8px;
    bottom: 8px;
    width: calc(100vw - 24px);
    max-width: 390px;
    right: calc(-100vw - 32px);
    border-radius: 30px;
  }

  .cart-drawer.open {
    right: 12px;
  }

  .cart-drawer::before {
    height: 110px;
  }

  .cart-drawer-header {
    padding: 24px 20px 18px;
  }

  .cart-drawer-header h3 {
    font-size: 22px;
  }

  .cart-drawer-heading p {
    font-size: 11px;
  }

  .cart-drawer-body {
    padding: 0 20px 8px;
  }

  .cart-item {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
  }

  .cart-item-image {
    width: 82px;
    height: 82px;
    border-radius: 12px;
  }

  .cart-item-main {
    gap: 10px;
  }

  .cart-item-name {
    font-size: 14px;
  }

  .cart-item-variant {
    font-size: 12px;
  }

  .cart-item-unit-price,
  .cart-item-subtotal {
    font-size: 13px;
  }

  .cart-item-qty {
    width: 84px;
    height: 30px;
  }

  .cart-item-qty button {
    width: 28px;
  }

  .cart-item-qty span {
    width: 28px;
    line-height: 30px;
  }

  .cart-drawer-footer {
    padding: 14px 20px;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 18px));
  }

  .cart-footer-summary {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .cart-total {
    font-size: 12px;
  }

  .cart-total #cartTotal {
    font-size: 20px;
  }

  .cart-checkout-btn {
    height: 56px;
    border-radius: 999px;
    font-size: 14px;
  }
}


/* v30: cart product image opens product detail */
.cart-item-image-link[role="button"] {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cart-item-image-link[role="button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(80, 66, 54, .10), 0 1px 0 rgba(255,255,255,.32) inset;
}
.cart-item-image-link[role="button"]:focus-visible {
  outline: 2px solid rgba(140, 116, 100, .55);
  outline-offset: 2px;
}

/* ================================================================
   CART DRAWER — reference-size correction (v31)
   Size/layout only. Keeps Apple Glass visuals and existing behaviour.
   ================================================================ */

/* Desktop: compact side cart matching the supplied reference. */
@media (min-width: 1101px) {
  .cart-drawer {
    top: 84px;
    bottom: 16px;
    width: 360px;
    height: auto;
    right: -390px;
    border-radius: 18px;
  }

  .cart-drawer.open {
    right: 18px;
  }

  .cart-drawer-header {
    padding: 22px 20px 14px;
  }

  .cart-drawer-header h3 {
    font-size: 19px;
  }

  .cart-drawer-heading p {
    margin-top: 4px;
    font-size: 11px;
  }

  .cart-drawer-close {
    width: 30px;
    height: 30px;
  }

  .cart-drawer-body {
    padding: 0 20px 6px;
  }

  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }

  .cart-item-image {
    width: 64px;
    height: 68px;
    border-radius: 8px;
  }

  .cart-item-main {
    gap: 7px;
  }

  .cart-item-name {
    font-size: 12px;
    line-height: 1.35;
  }

  .cart-item-variant {
    font-size: 11px;
  }

  .cart-item-unit-price,
  .cart-item-subtotal {
    font-size: 11px;
  }

  .cart-item-qty {
    width: 80px;
    height: 28px;
  }

  .cart-item-qty button {
    width: 26px;
  }

  .cart-item-qty span {
    width: 28px;
    line-height: 28px;
  }

  .cart-drawer-footer {
    padding: 14px 20px 18px;
  }

  .cart-footer-summary {
    margin-bottom: 12px;
    font-size: 11px;
  }

  .cart-total {
    font-size: 11px;
  }

  .cart-total #cartTotal {
    font-size: 20px;
  }

  .cart-checkout-btn {
    height: 48px;
    border-radius: 8px;
    font-size: 13px;
  }
}

/* Tablet: same visual proportions, slightly wider than desktop cart. */
@media (min-width: 768px) and (max-width: 1100px) {
  .cart-drawer {
    top: 20px;
    bottom: 20px;
    width: min(380px, 44vw);
    height: auto;
    right: -410px;
    border-radius: 18px;
  }

  .cart-drawer.open {
    right: 20px;
  }

  .cart-drawer-header {
    padding: 22px 20px 14px;
  }

  .cart-drawer-header h3 {
    font-size: 19px;
  }

  .cart-drawer-heading p {
    margin-top: 4px;
    font-size: 11px;
  }

  .cart-drawer-body {
    padding: 0 20px 6px;
  }

  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }

  .cart-item-image {
    width: 64px;
    height: 68px;
    border-radius: 8px;
  }

  .cart-item-main { gap: 7px; }
  .cart-item-name { font-size: 12px; }
  .cart-item-variant { font-size: 11px; }
  .cart-item-unit-price,
  .cart-item-subtotal { font-size: 11px; }

  .cart-item-qty {
    width: 80px;
    height: 28px;
  }
  .cart-item-qty button { width: 26px; }
  .cart-item-qty span { width: 28px; line-height: 28px; }

  .cart-drawer-footer {
    padding: 14px 20px 18px;
  }
  .cart-footer-summary { margin-bottom: 12px; font-size: 11px; }
  .cart-total { font-size: 11px; }
  .cart-total #cartTotal { font-size: 20px; }
  .cart-checkout-btn { height: 48px; border-radius: 8px; font-size: 13px; }
}

/* Mobile: partial-screen side drawer, leaving the storefront visible at left. */
@media (max-width: 767px) {
  .cart-drawer {
    top: 52px;
    bottom: 14px;
    width: min(70vw, 280px);
    max-width: none;
    min-width: 232px;
    height: auto;
    right: calc(-72vw - 28px);
    border-radius: 18px;
  }

  .cart-drawer.open {
    right: 18px;
  }

  .cart-drawer::before {
    height: 92px;
  }

  .cart-drawer-header {
    padding: 20px 18px 14px;
  }

  .cart-drawer-header h3 {
    font-size: 18px;
  }

  .cart-drawer-heading p {
    margin-top: 4px;
    font-size: 10px;
  }

  .cart-drawer-close {
    width: 30px;
    height: 30px;
  }

  .cart-drawer-body {
    padding: 0 18px 6px;
  }

  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }

  .cart-item-image {
    width: 64px;
    height: 72px;
    border-radius: 8px;
  }

  .cart-item-main {
    gap: 7px;
  }

  .cart-item-name {
    font-size: 12px;
    line-height: 1.35;
  }

  .cart-item-variant {
    font-size: 10px;
  }

  .cart-item-unit-price,
  .cart-item-subtotal {
    font-size: 11px;
  }

  .cart-item-qty {
    width: 80px;
    height: 28px;
  }

  .cart-item-qty button {
    width: 26px;
  }

  .cart-item-qty span {
    width: 28px;
    line-height: 28px;
  }

  .cart-drawer-footer {
    padding: 12px 18px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }

  .cart-footer-summary {
    margin-bottom: 11px;
    font-size: 10px;
  }

  .cart-total {
    font-size: 10px;
  }

  .cart-total #cartTotal {
    font-size: 18px;
  }

  .cart-checkout-btn {
    height: 48px;
    border-radius: 8px;
    font-size: 12px;
  }
}

/* ================================================================
   CART DRAWER — CHAEN Apple Glass token (v32)
   Appearance only: preserves v31 drawer width/height/position/layout.
   ================================================================ */
#cartOverlay.drawer-overlay {
  background: rgba(30, 25, 20, .08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cart-drawer {
  background: rgba(247, 242, 236, .86) !important;
  backdrop-filter: blur(28px) saturate(170%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.04) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 32px !important;
  box-shadow:
    0 18px 45px rgba(170, 145, 120, .08),
    0 4px 12px rgba(170, 145, 120, .05),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  overflow: hidden !important;
  isolation: isolate;
}

.cart-drawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .28),
    rgba(255, 255, 255, .10),
    transparent
  ) !important;
  pointer-events: none;
  z-index: 0;
}

/* Keep the bottom area visually continuous with the glass drawer.
   This removes the pale/white footer band without changing dimensions. */
.cart-drawer-footer {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, .35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 767px) {
  .cart-drawer {
    border-radius: 28px !important;
  }

  .cart-drawer::before {
    height: 120px;
  }
}

/* ================================================================
   CART DRAWER — footer glass continuity fix (v33)
   Visual-only patch. Keeps v31/v32 drawer dimensions and positions.
   Prevents the footer from creating a second blur/white band layer.
   ================================================================ */
.cart-drawer-footer {
  /* Let the single drawer glass layer remain visually continuous. */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Reduce the obvious block boundary while retaining a subtle divider. */
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
}

/* Keep coupon / summary area from reading as a separate pale panel. */
.cart-drawer-footer .cart-footer-summary,
.cart-drawer-footer .cart-total {
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .cart-drawer-footer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top-color: rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
  }
}


/* ================================================================
   WISHLIST DRAWER — CHAEN Apple Glass (v35)
   Visual-only refinement. Footer stays visually continuous with drawer.
   ================================================================ */
#wishlistOverlay.drawer-overlay {
  background: rgba(30, 25, 20, .08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.wishlist-drawer {
  top: 18px !important;
  bottom: 18px !important;
  height: auto !important;
  width: min(360px, calc(100vw - 110px)) !important;
  right: calc(-360px - 80px) !important;
  background: rgba(247, 242, 236, .84) !important;
  backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
  border: 1px solid rgba(255, 255, 255, .40) !important;
  border-radius: 30px !important;
  box-shadow:
    0 20px 55px rgba(170, 145, 120, .08),
    0 4px 18px rgba(170, 145, 120, .05),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 18px 40px rgba(255, 255, 255, .08) !important;
  overflow: hidden !important;
  isolation: isolate;
}

.wishlist-drawer.open {
  right: 18px !important;
}

.wishlist-drawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .30),
    rgba(255, 255, 255, .16),
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

.wishlist-drawer > * {
  position: relative;
  z-index: 1;
}

.wishlist-drawer-header {
  padding: 24px 24px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .36) !important;
  background: transparent !important;
}

.wishlist-drawer-heading {
  min-width: 0;
}

.wishlist-drawer-header h3 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.25;
  font-weight: 500 !important;
  color: #2f2925;
}

.wishlist-drawer-count {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(47, 41, 37, .55);
}

.wishlist-drawer-close {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #2f2925 !important;
  font-size: 22px !important;
  line-height: 1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.wishlist-drawer-body {
  padding: 14px 22px 12px !important;
  background: transparent !important;
  scrollbar-width: none;
}
.wishlist-drawer-body::-webkit-scrollbar { display: none; }

.wishlist-item {
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .24) !important;
}

.wishlist-item-image {
  width: 72px !important;
  height: 86px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .20) !important;
}

.wishlist-item-info {
  min-width: 0;
  justify-content: flex-start !important;
}

.wishlist-item-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #2f2925;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wishlist-item-price {
  margin: 4px 0 10px !important;
}
.wishlist-item-price .current {
  font-size: 14px !important;
  color: #2f2925 !important;
}
.wishlist-item-price .original {
  font-size: 12px !important;
}

.wishlist-item-actions {
  gap: 8px !important;
  flex-wrap: wrap;
}

.wishlist-item-view-btn,
.wishlist-item-remove {
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-family: var(--font-body);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  white-space: nowrap;
  cursor: pointer;
}

.wishlist-item-view-btn {
  background: rgba(146, 128, 111, .82) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
.wishlist-item-view-btn:hover {
  background: rgba(136, 118, 102, .90) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

.wishlist-item-view-btn svg,
.wishlist-item-remove svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px;
}

.wishlist-item-remove {
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(47, 41, 37, .78) !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.wishlist-item-remove:hover {
  color: #2f2925 !important;
  background: rgba(255, 255, 255, .20) !important;
}

.wishlist-drawer-footer {
  flex: 0 0 auto;
  padding: 12px 22px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.wishlist-continue-btn {
  width: 100%;
  height: 62px;
  border: 0;
  border-radius: 999px;
  background: #2f2925;
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.wishlist-continue-btn:hover { opacity: .94; }
.wishlist-continue-btn:active { transform: scale(.985); }

.wishlist-empty {
  padding: 48px 0 !important;
}

@media (max-width: 600px) {
  .wishlist-drawer {
    top: 10px !important;
    bottom: 10px !important;
    width: min(68vw, 270px) !important;
    right: calc(-68vw - 36px) !important;
    border-radius: 30px !important;
  }
  .wishlist-drawer.open { right: 10px !important; }
  .wishlist-drawer-header { padding: 20px 16px 14px !important; }
  .wishlist-drawer-header h3 { font-size: 19px !important; }
  .wishlist-drawer-count { font-size: 11px; }
  .wishlist-drawer-close { width: 30px; height: 30px; font-size: 20px !important; }
  .wishlist-drawer-body { padding: 10px 14px !important; }
  .wishlist-item { gap: 10px !important; padding: 12px 0 !important; }
  .wishlist-item-image { width: 58px !important; height: 68px !important; border-radius: 10px !important; }
  .wishlist-item-name { font-size: 12px !important; }
  .wishlist-item-price .current { font-size: 12px !important; }
  .wishlist-item-price .original { font-size: 10px !important; }
  .wishlist-item-actions { gap: 6px !important; }
  .wishlist-item-view-btn,
  .wishlist-item-remove {
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }
  .wishlist-item-view-btn svg,
  .wishlist-item-remove svg { width: 11px !important; height: 11px !important; flex-basis: 11px; }
  .wishlist-drawer-footer {
    padding: 10px 14px 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
    background: transparent !important;
  }
  .wishlist-continue-btn {
    height: 48px;
    font-size: 13px;
  }
}


/* ================================================================
   CART DRAWER — unified CHAEN Apple Glass + coupon field (v37)
   Keeps v31 drawer dimensions/position. Visual/internal controls only.
   Applies to mobile, tablet and desktop.
   ================================================================ */
:root {
  --glass-bg: rgba(247, 242, 236, .86);
  --glass-border: rgba(255, 255, 255, .35);
  --glass-shadow: 0 20px 55px rgba(170, 145, 120, .08);
  --glass-blur: 28px;
  --glass-radius: 30px;
}

#cartOverlay.drawer-overlay {
  background: rgba(30, 25, 20, .08) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.cart-drawer {
  /* Position/width/top/bottom intentionally inherited from v31. */
  background: var(--glass-bg) !important;
  backdrop-filter: blur(28px) saturate(170%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.04) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 30px !important;
  box-shadow:
    0 20px 55px rgba(170, 145, 120, .08),
    0 4px 14px rgba(170, 145, 120, .05),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  overflow: hidden !important;
  isolation: isolate;
}

.cart-drawer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .30),
    rgba(255, 255, 255, .14),
    transparent
  ) !important;
  pointer-events: none;
  z-index: 0;
}

/* Subtle left-edge glass thickness/reflection. */
.cart-drawer::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.35),
    rgba(255,255,255,.10),
    transparent
  );
  opacity: .6;
  pointer-events: none;
  z-index: 2;
}

.cart-drawer-header,
.cart-drawer-body,
.cart-drawer-footer {
  position: relative;
  z-index: 1;
}

.cart-drawer-header h3 {
  font-size: 34px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

.cart-item {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .28) !important;
}

.cart-item-image {
  width: 92px !important;
  height: 92px !important;
  border-radius: 14px !important;
}

.cart-item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f5f1ec !important;
}

.cart-item-qty {
  width: 120px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
}

.cart-item-qty button {
  height: 40px !important;
}

.cart-item-qty span {
  line-height: 40px !important;
}

/* Keep footer as one continuous glass surface, no white band. */
.cart-drawer-footer {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
}

/* Free-shipping progress replaces the cart coupon entry point.
   Data/state are populated by app.js; this block only controls the existing
   CHÆN Apple Glass visual language and responsive sizing. */
.cart-free-shipping {
  width: 100%;
  min-width: 0;
  margin: 0 0 18px;
  padding: 16px 18px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.cart-free-shipping[hidden] {
  display: none !important;
}

.cart-free-shipping-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #302a26;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.cart-free-shipping-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: #3d3631;
}

.cart-free-shipping-title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cart-free-shipping-track {
  width: 100%;
  height: 12px;
  margin: 14px 0 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 2px rgba(95, 77, 63, .06);
}

.cart-free-shipping-progress {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #c8a277;
  transition: width .25s ease;
}

.cart-free-shipping.is-achieved .cart-free-shipping-progress {
  background: #b89268;
}

.cart-free-shipping-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  color: #4a423c;
  font-size: 12px;
  line-height: 1.4;
}

.cart-free-shipping-meta span:last-child {
  text-align: right;
  white-space: nowrap;
}

.cart-checkout-btn {
  height: 64px !important;
  border-radius: 999px !important;
  background: #2f2925 !important;
  border-color: #2f2925 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 25px rgba(47, 41, 37, .20) !important;
}

/* Narrow cart protection. Same design language, no native-looking controls. */
@media (max-width: 767px) {
  .cart-drawer {
    border-radius: 30px !important;
  }

  .cart-drawer-header h3 {
    font-size: 30px !important;
  }

  .cart-item {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .cart-free-shipping {
    margin-bottom: 14px;
    padding: 13px 14px 12px;
    border-radius: 16px;
  }

  .cart-free-shipping-title {
    gap: 9px;
    font-size: 13px;
  }

  .cart-free-shipping-icon {
    width: 23px;
    height: 23px;
  }

  .cart-free-shipping-track {
    height: 10px;
    margin: 11px 0 9px;
  }

  .cart-free-shipping-meta {
    gap: 8px;
    font-size: 10.5px;
  }

  .cart-checkout-btn {
    height: 64px !important;
    font-size: 16px !important;
  }
}



/* === Login remember-account + password eye (v38) === */
.login-password-field {
  width: 100%;
}

.login-password-field .login-password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(67, 58, 52, .66);
  border-radius: 50%;
}

.login-password-field .login-password-toggle svg {
  width: 19px;
  height: 19px;
  display: block;
}

.login-password-field .login-password-toggle:hover,
.login-password-field .login-password-toggle:focus-visible {
  color: var(--text-primary);
  background: rgba(140, 116, 100, .08);
  outline: none;
}

#rememberAccount {
  accent-color: var(--accent);
}


/* ================================================================
   PRODUCT DETAIL RICH CONTENT — desktop image normalization (v47)
   Applies only to 商品介紹 / 商品規格 / 購物須知 on desktop.
   Backend/editor content is untouched; display size only.
   ================================================================ */
@media (min-width: 1025px) {
  #productTabIntro .tab-content-inner,
  #productTabSize .tab-content-inner,
  #productTabShopping .tab-content-inner {
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Standalone images uploaded through the three backend sections */
  #productTabIntro .tab-images,
  #productTabSize .tab-images,
  #productTabShopping .tab-images {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 920px !important;
    gap: 20px !important;
    margin: 24px auto 0 !important;
    box-sizing: border-box;
  }

  #productTabIntro .tab-image,
  #productTabSize .tab-image,
  #productTabShopping .tab-image {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    border-radius: var(--radius-md);
  }

  /* Images embedded directly inside rich-text HTML.
     !important overrides image width values written by the editor. */
  #productTabIntro .tab-text img,
  #productTabSize .tab-text img,
  #productTabShopping .tab-text img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 24px auto !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
  }

  /* CKEditor / rich-text figure wrappers can also carry fixed widths. */
  #productTabIntro .tab-text figure,
  #productTabSize .tab-text figure,
  #productTabShopping .tab-text figure,
  #productTabIntro .tab-text .image,
  #productTabSize .tab-text .image,
  #productTabShopping .tab-text .image {
    width: 100% !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #productTabIntro .tab-text figure img,
  #productTabSize .tab-text figure img,
  #productTabShopping .tab-text figure img,
  #productTabIntro .tab-text .image img,
  #productTabSize .tab-text .image img,
  #productTabShopping .tab-text .image img {
    max-width: 100% !important;
  }
}



/* === CHÆN AUTH MODAL REDESIGN 2026-07 === */
#authPage {
  --chaen-primary: #B59F8B;
  --chaen-primary-hover: #A38E7C;
  --chaen-primary-light: #D8CBC0;
  --chaen-bg-page: #F5F1EC;
  --chaen-bg-card: #FFFFFF;
  --chaen-bg-soft: #FAF8F5;
  --chaen-bg-banner: #EDE3D9;
  --chaen-text-primary: #3D332D;
  --chaen-text-secondary: #7C726A;
  --chaen-text-light: #A89F97;
  --chaen-border: #E7DED5;
  --chaen-border-light: #F2ECE6;
  --chaen-divider: #E9E2DB;
  --chaen-deep: #3B302B;
  --chaen-deep-hover: #2E2521;
  --chaen-icon-primary: #B59F8B;
  --chaen-icon-secondary: #8C8178;
  background: rgba(20,17,15,.72);
  backdrop-filter: blur(2px);
}
#authPage .chaen-auth-shell {
  width: min(1060px, calc(100vw - 64px));
  max-width: 1060px;
  padding: 0;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 22px;
  background: var(--chaen-bg-card);
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  color: var(--chaen-text-primary);
}
#authPage .chaen-auth-body { display: grid; grid-template-columns: 44% 56%; min-height: 690px; }
#authPage .chaen-auth-brand { position: relative; overflow: hidden; background: var(--chaen-bg-page); min-height: 690px; }
#authPage .chaen-brand-copy { position: absolute; z-index: 2; top: 58px; left: 48px; right: 36px; }
#authPage .chaen-brand-logo { font-family: var(--font-display); font-size: 35px; letter-spacing: .22em; margin-bottom: 50px; }
#authPage .chaen-brand-copy h3 { margin: 0 0 18px; font-family: var(--font-display); font-size: 28px; line-height: 1.75; font-weight: 400; letter-spacing: .16em; }
#authPage .chaen-brand-copy p { margin: 0; color: var(--chaen-text-secondary); font-size: 13px; letter-spacing: .06em; }
#authPage .chaen-brand-model { position: absolute; inset: 235px 0 0; background: linear-gradient(to bottom, rgba(245,241,236,.03), rgba(245,241,236,.08)), url('/images/1784764098492-718613ce660d.png') center 22% / cover no-repeat; filter: saturate(.78) sepia(.08); }
#authPage .chaen-line-friend-card { position: absolute; z-index: 3; left: 38px; right: 38px; bottom: 28px; display: flex; align-items: center; gap: 18px; padding: 17px 20px; background: rgba(255,255,255,.91); border: 1px solid #E4DAD0; border-radius: 12px; box-shadow: 0 8px 30px rgba(45,35,25,.08); }
#authPage .chaen-line-friend-card img { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; }
#authPage .chaen-line-friend-card strong { display: block; font-size: 19px; font-weight: 500; letter-spacing: .08em; color: #6F5B4E; margin-bottom: 5px; }
#authPage .chaen-line-friend-card span { display: block; color: var(--chaen-text-secondary); font-size: 12px; line-height: 1.7; }
#authPage .chaen-auth-pane { background: #FBF9F6; padding: 52px 56px 38px; overflow-y: auto; max-height: 690px; }
#authPage .chaen-auth-close { position: absolute; z-index: 20; top: 18px; right: 22px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--chaen-text-primary); font-size: 32px; font-weight: 300; line-height: 1; opacity: .9; }
#authPage .chaen-auth-close:hover { opacity: .55; }
#authPage .auth-heading-block { text-align: center; margin-bottom: 30px; }
#authPage .auth-title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: .12em; color: var(--chaen-text-primary); }
#authPage .auth-title-rule { display: block; width: 42px; height: 1px; margin: 16px auto 14px; background: #CFC3B8; }
#authPage .auth-subtitle { margin: 0; color: var(--chaen-text-light); font-size: 13px; letter-spacing: .04em; }
#authPage .chaen-line-login { min-height: 100px; margin: 0; padding: 18px 24px; justify-content: center; gap: 16px; border-radius: 7px; background: var(--chaen-primary) !important; color: #fff !important; box-shadow: none; }
#authPage .chaen-line-login:hover { background: #A68F7C !important; }
#authPage .chaen-line-logo-wrap { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; overflow: hidden; background: #fff; }
#authPage .chaen-line-logo-wrap img { width: 100%; height: 100%; object-fit: cover; }
#authPage .chaen-line-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
#authPage .chaen-line-copy strong { font-size: 19px; font-weight: 500; letter-spacing: .06em; }
#authPage .chaen-line-copy small { margin-top: 5px; font-size: 12px; color: rgba(255,255,255,.72); font-weight: 400; letter-spacing: .04em; }
#authPage .auth-divider { margin: 28px 0 26px; color: var(--chaen-text-secondary); }
#authPage .auth-divider::before, #authPage .auth-divider::after { background: var(--chaen-divider); }
#authPage .auth-form .form-group { margin-bottom: 18px; }
#authPage .auth-form .form-group label { color: var(--chaen-text-primary); font-size: 13px; font-weight: 500; margin-bottom: 9px; }
#authPage .auth-input-wrap { position: relative; }
#authPage .auth-input-wrap > svg:not(.auth-lock-icon), #authPage .auth-input-wrap > .auth-lock-icon { position: absolute; z-index: 2; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--chaen-icon-secondary); stroke-width: 1.5; pointer-events: none; }
#authPage .auth-icon-field .auth-input-wrap input { padding-left: 50px; }
#authPage .auth-form .form-group input { height: 58px; padding-top: 0; padding-bottom: 0; border: 1px solid #DDD3CA; border-radius: 7px; background: #fff; color: var(--chaen-text-primary); font-size: 14px; }
#authPage .auth-form .form-group input:focus { border-color: var(--chaen-primary); box-shadow: 0 0 0 2px rgba(181,159,139,.10); }
#authPage .auth-form .form-group input::placeholder { color: var(--chaen-text-light); }
#authPage .login-password-field input { padding-left: 50px !important; padding-right: 48px !important; }
#authPage .login-password-toggle { right: 10px; color: var(--chaen-icon-secondary); }
#authPage .auth-login-meta { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 28px; font-size: 13px; }
#authPage .auth-remember { display: flex; align-items: center; gap: 9px; color: var(--chaen-text-primary); cursor: pointer; }
#authPage .auth-remember input { width: 18px; height: 18px; accent-color: var(--chaen-primary); }
#authPage .auth-login-meta a { color: #534840; text-decoration: none; }
#authPage .auth-login-meta a:hover { color: var(--chaen-primary); }
#authPage .chaen-login-submit, #authPage .auth-form .btn-primary { width: 100%; min-height: 56px; justify-content: center; border: 0; border-radius: 30px; background: var(--chaen-deep); color: #fff; font-size: 17px; letter-spacing: .12em; }
#authPage .chaen-login-submit:hover, #authPage .auth-form .btn-primary:hover { background: var(--chaen-deep-hover); }
#authPage .auth-member-join { margin: 30px -56px -38px; padding: 24px 56px; display: flex; justify-content: center; gap: 20px; border-top: 1px solid var(--chaen-border-light); background: rgba(255,255,255,.34); font-size: 13px; }
#authPage .auth-member-join span { color: var(--chaen-text-secondary); }
#authPage .auth-member-join a { color: var(--chaen-text-primary); font-weight: 500; text-decoration: none; }
#authPage .auth-member-join a:hover { color: var(--chaen-primary); }
#authPage .auth-footer-links a { color: var(--chaen-text-secondary); }
#authPage .auth-footer-links a:hover { color: var(--chaen-primary); }
#authPage .btn-line { background: var(--chaen-primary) !important; color: #fff !important; border: 0 !important; }
#authPage .btn-line:hover { background: var(--chaen-primary-hover) !important; }
#authPage .terms-check input { accent-color: var(--chaen-primary); }
#authPage .register-checklist { background: rgba(181,159,139,.08); border-color: rgba(181,159,139,.18); }
#authPage .verify-email-card, #authPage .reg-verify-section { background: var(--chaen-bg-soft); border-color: var(--chaen-border); }
#authPage .verify-email-icon { color: var(--chaen-primary); }
#authPage .chaen-auth-benefits { min-height: 98px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; background: var(--chaen-bg-page); border-top: 1px solid var(--chaen-divider); }
#authPage .chaen-benefit { min-height: 58px; padding: 0 34px; display: flex; align-items: center; justify-content: center; gap: 16px; border-right: 1px solid var(--chaen-primary-light); }
#authPage .chaen-benefit:last-child { border-right: 0; }
#authPage .chaen-benefit svg { width: 34px; height: 34px; fill: none; stroke: var(--chaen-icon-primary); stroke-width: 1.4; }
#authPage .chaen-benefit strong { display: block; color: var(--chaen-text-primary); font-size: 13px; font-weight: 500; margin-bottom: 4px; }
#authPage .chaen-benefit span { display: block; color: var(--chaen-text-light); font-size: 11px; }
#authPage .login-redirect-hint { background: #F7F0E8; border-color: #E7D7C7; color: #6D5A4E; }
#authPage .login-redirect-hint svg { color: var(--chaen-primary); }

@media (max-width: 900px) {
  #authPage .chaen-auth-shell { width: min(760px, calc(100vw - 40px)); }
  #authPage .chaen-auth-body { grid-template-columns: 38% 62%; }
  #authPage .chaen-brand-copy { left: 28px; top: 46px; }
  #authPage .chaen-brand-copy h3 { font-size: 23px; }
  #authPage .chaen-line-friend-card { left: 20px; right: 20px; padding: 14px; }
  #authPage .chaen-auth-pane { padding-left: 38px; padding-right: 38px; }
}

@media (max-width: 768px) {
  #authPage .chaen-auth-shell { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; overflow-y: auto; }
  #authPage .chaen-auth-body { display: block; min-height: 0; }
  #authPage .chaen-auth-brand { min-height: auto; height: 74px; background: #FBF9F6; }
  #authPage .chaen-brand-model, #authPage .chaen-line-friend-card, #authPage .chaen-brand-copy h3, #authPage .chaen-brand-copy p { display: none; }
  #authPage .chaen-brand-copy { position: static; display: flex; align-items: center; justify-content: center; height: 74px; }
  #authPage .chaen-brand-logo { margin: 0; font-size: 27px; letter-spacing: .24em; }
  #authPage .chaen-auth-pane { max-height: none; overflow: visible; padding: 22px 24px 26px; }
  #authPage .auth-heading-block { margin-bottom: 22px; }
  #authPage .auth-title { font-size: 24px; }
  #authPage .auth-subtitle { font-size: 12px; }
  #authPage .chaen-line-login { min-height: 72px; padding: 12px 16px; }
  #authPage .chaen-line-logo-wrap { width: 42px; height: 42px; flex-basis: 42px; }
  #authPage .chaen-line-copy strong { font-size: 15px; }
  #authPage .chaen-line-copy small { font-size: 10px; }
  #authPage .auth-form .form-group input { height: 52px; }
  #authPage .chaen-login-submit, #authPage .auth-form .btn-primary { min-height: 52px; }
  #authPage .auth-member-join { margin: 24px -24px -26px; padding: 20px 24px; }
  #authPage .chaen-auth-benefits { display: none; }
  #authPage .chaen-auth-close { top: 15px; right: 14px; }
}


/* ===== CHÆN Auth Modal — reference-image alignment v2 ===== */
#authPage .chaen-auth-body {
  grid-template-columns: 44% 56%;
  min-height: 690px;
}
#authPage .chaen-auth-brand {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  background: #F5F1EC;
}
#authPage .chaen-brand-model {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 51%;
  filter: none;
}
#authPage .chaen-auth-brand::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245,241,236,.20) 0%, rgba(245,241,236,.03) 42%, rgba(61,51,45,.03) 100%);
}
#authPage .chaen-brand-copy {
  z-index: 3;
  top: 56px;
  left: 48px;
  right: 38px;
  text-shadow: 0 1px 12px rgba(255,255,255,.42);
}
#authPage .chaen-brand-logo {
  margin-bottom: 49px;
}
#authPage .chaen-brand-copy h3 {
  margin-bottom: 14px;
}
#authPage .chaen-line-friend-card {
  z-index: 4;
  left: 38px;
  right: auto;
  bottom: 31px;
  width: min(380px, calc(100% - 76px));
  padding: 0;
  display: block;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 13px;
  box-shadow: 0 10px 32px rgba(45,35,25,.10);
}
#authPage .chaen-line-friend-card > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}
#authPage .chaen-auth-pane {
  padding-top: 52px;
}
#authPage .chaen-line-login {
  width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  border: 0 !important;
  border-radius: 7px;
  background: #B59F8B !important;
  box-shadow: none !important;
  line-height: 0;
}
#authPage .chaen-line-login:hover {
  background: #A68F7C !important;
  opacity: .96;
}
#authPage .chaen-line-login-art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
#authPage .chaen-line-logo-wrap,
#authPage .chaen-line-copy {
  display: none !important;
}

@media (max-width: 900px) and (min-width: 769px) {
  #authPage .chaen-brand-copy {
    left: 28px;
    top: 42px;
  }
  #authPage .chaen-line-friend-card {
    left: 20px;
    width: calc(100% - 40px);
  }
}

@media (max-width: 768px) {
  #authPage .chaen-brand-model,
  #authPage .chaen-line-friend-card {
    display: none !important;
  }
  #authPage .chaen-auth-brand::after {
    display: none;
  }
  #authPage .chaen-line-login {
    min-height: 0;
    height: auto;
    padding: 0 !important;
  }
  #authPage .chaen-line-login-art {
    width: 100%;
    height: auto;
  }
}

/* ===== CHÆN Auth Modal — pixel tune v3 (2026-07-25) =====
   Reference matching: replace raster LINE text artwork with crisp HTML/CSS,
   normalize warm-brown typography and browser autofill appearance. */
#authPage {
  --chaen-primary: #B59F8B;
  --chaen-primary-hover: #A68F7C;
  --chaen-text-primary: #534840;
  --chaen-text-heading: #3D332D;
  --chaen-text-secondary: #7C726A;
  --chaen-text-light: #A89F97;
  --chaen-line-card-text: #8B705E;
}

/* shell / proportions */
#authPage .chaen-auth-shell {
  width: min(1060px, calc(100vw - 48px));
  max-width: 1060px;
  border-radius: 20px;
}
#authPage .chaen-auth-body {
  grid-template-columns: 44% 56%;
  min-height: 690px;
}
#authPage .chaen-auth-pane {
  background: #FBF9F6;
  padding: 50px 56px 38px;
}

/* left visual: use the supplied portrait only; text remains live and sharp */
#authPage .chaen-auth-brand { background: #F5F1EC; }
#authPage .chaen-brand-model {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
}
#authPage .chaen-auth-brand::after {
  background: linear-gradient(180deg, rgba(245,241,236,.15) 0%, rgba(245,241,236,.02) 46%, rgba(61,51,45,.025) 100%);
}
#authPage .chaen-brand-copy {
  top: 57px;
  left: 49px;
  right: 36px;
  text-shadow: none;
}
#authPage .chaen-brand-logo {
  margin-bottom: 52px;
  color: #3D332D;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .24em;
}
#authPage .chaen-brand-copy h3 {
  margin: 0 0 15px;
  color: #4D423B;
  font-size: 27px;
  line-height: 1.72;
  font-weight: 400;
  letter-spacing: .16em;
}
#authPage .chaen-brand-copy p {
  color: #8D8178;
  font-size: 13px;
  letter-spacing: .04em;
}

/* reusable LINE speech bubble: vector-like CSS, no blurry raster text */
#authPage .chaen-line-bubble {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  border-radius: 50%;
}
#authPage .chaen-line-bubble::after {
  content: '';
  position: absolute;
  left: 9%;
  bottom: -4px;
  width: 12px;
  height: 12px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
  transform: rotate(8deg);
}

/* top LINE login button — live text, high resolution */
#authPage .chaen-line-login {
  width: 100%;
  height: 108px;
  min-height: 108px;
  padding: 0 28px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: visible;
  border-radius: 7px;
  background: #B59F8B !important;
  line-height: normal;
}
#authPage .chaen-line-login:hover { background: #A68F7C !important; opacity: 1; }
#authPage .chaen-line-bubble--login {
  width: 54px;
  height: 54px;
  background: #FFF;
  color: #B59F8B;
  font-size: 13px;
}
#authPage .chaen-line-copy {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  color: #FFF;
  text-align: left;
}
#authPage .chaen-line-copy strong {
  color: #FFF;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1.35;
}
#authPage .chaen-line-copy small {
  margin-top: 5px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.3;
}
#authPage .chaen-line-login-art { display: none !important; }

/* left LINE friend card — live text, warm beige icon */
#authPage .chaen-line-friend-card {
  left: 39px;
  right: auto;
  bottom: 31px;
  width: min(382px, calc(100% - 78px));
  min-height: 126px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: visible;
  background: rgba(255,255,255,.90);
  border: 1px solid #E4DAD0;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(45,35,25,.08);
}
#authPage .chaen-line-friend-card > img { display: none !important; }
#authPage .chaen-line-bubble--friend {
  width: 55px;
  height: 55px;
  background: #B59F8B;
  color: #FFF;
  font-size: 13px;
}
#authPage .chaen-line-friend-copy { min-width: 0; }
#authPage .chaen-line-friend-copy strong {
  display: block;
  margin: 0 0 7px;
  color: #8B705E;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.25;
}
#authPage .chaen-line-friend-copy span {
  display: block;
  color: #6F625A;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .025em;
}

/* right panel typography */
#authPage .auth-heading-block { margin-bottom: 31px; }
#authPage .auth-title {
  color: #3D332D;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .11em;
}
#authPage .auth-title-rule {
  width: 42px;
  margin: 16px auto 15px;
  background: #D1C5BA;
}
#authPage .auth-subtitle {
  color: #A89F97;
  font-size: 13px;
  letter-spacing: .035em;
}
#authPage .auth-divider { margin: 29px 0 27px; color: #8D8178; font-size: 12px; }
#authPage .auth-divider::before,
#authPage .auth-divider::after { background: #E9E2DB; }
#authPage .auth-form .form-group label {
  color: #534840;
  font-size: 13px;
  font-weight: 500;
}
#authPage .auth-form .form-group input {
  color: #534840;
  background: #FFF;
  border-color: #DDD3CA;
}
#authPage .auth-form .form-group input::placeholder { color: #A89F97; }
#authPage .auth-input-wrap > svg:not(.auth-lock-icon),
#authPage .auth-input-wrap > .auth-lock-icon,
#authPage .login-password-toggle { color: #8C8178; stroke: #8C8178; }
#authPage .auth-login-meta,
#authPage .auth-login-meta a,
#authPage .auth-remember { color: #7C726A; }
#authPage .auth-member-join span { color: #7C726A; }
#authPage .auth-member-join a { color: #534840; }

/* Chrome/Safari autofill must remain warm white, never browser blue */
#authPage input:-webkit-autofill,
#authPage input:-webkit-autofill:hover,
#authPage input:-webkit-autofill:focus,
#authPage input:-webkit-autofill:active {
  -webkit-text-fill-color: #534840 !important;
  -webkit-box-shadow: 0 0 0 1000px #FFF inset !important;
  box-shadow: 0 0 0 1000px #FFF inset !important;
  caret-color: #534840;
  transition: background-color 9999s ease-out 0s;
}

/* bottom benefit row */
#authPage .chaen-auth-benefits { background: #F5F1EC; }
#authPage .chaen-benefit svg { stroke: #B59F8B; }
#authPage .chaen-benefit strong { color: #534840; font-weight: 500; }
#authPage .chaen-benefit span { color: #A89F97; }

@media (max-width: 900px) and (min-width: 769px) {
  #authPage .chaen-line-friend-card {
    left: 20px;
    width: calc(100% - 40px);
    padding: 16px 17px;
    gap: 13px;
  }
  #authPage .chaen-line-friend-copy strong { font-size: 17px; }
  #authPage .chaen-line-friend-copy span { font-size: 10px; }
}

@media (max-width: 768px) {
  #authPage .chaen-line-login {
    height: 76px;
    min-height: 76px;
    padding: 0 18px !important;
    gap: 13px;
  }
  #authPage .chaen-line-bubble--login { width: 43px; height: 43px; font-size: 10px; }
  #authPage .chaen-line-copy strong { font-size: 16px; }
  #authPage .chaen-line-copy small { font-size: 10px; }
}

/* ==========================================================
   CHÆN AUTH MODAL — FINAL REFERENCE MATCH v4
   Reference: f706e0e6-dcc8-479f-92df-03d824ae3a49.png
   Visual-only override. Existing auth IDs / JS behavior untouched.
   ========================================================== */
#authPage {
  --primary: #B59F8B;
  --primary-hover: #A38E7C;
  --primary-light: #D8CBC0;
  --bg-page: #F5F1EC;
  --bg-card: #FFFFFF;
  --bg-soft: #FAF8F5;
  --bg-banner: #EDE3D9;
  --text-primary: #3D332D;
  --text-secondary: #7C726A;
  --text-light: #A89F97;
  --text-white: #FFFFFF;
  --border: #E7DED5;
  --border-light: #F2ECE6;
  --divider: #E9E2DB;
  --deep-brown: #3B302B;
  --deep-brown-hover: #2E2521;
  --icon-primary: #B59F8B;
  --icon-secondary: #8C8178;

  background: rgba(20, 17, 15, .72) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: auto !important;
}

/* Reference outer box: ~1062 × 1018 */
#authPage .chaen-auth-shell {
  position: relative;
  width: 1060px !important;
  max-width: calc(100vw - 64px) !important;
  height: 1018px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 21px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.08) !important;
  transform-origin: center center;
}

#authPage .chaen-auth-body {
  display: grid !important;
  grid-template-columns: 43.2% 56.8% !important;
  width: 100%;
  height: 918px !important;
  min-height: 918px !important;
}

/* ---------- LEFT BRAND PANEL ---------- */
#authPage .chaen-auth-brand {
  position: relative !important;
  width: 100%;
  height: 918px !important;
  min-height: 918px !important;
  overflow: hidden !important;
  background: #F5F1EC !important;
}
#authPage .chaen-auth-brand::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245,241,236,.11) 0%, rgba(245,241,236,.01) 50%, rgba(61,51,45,.025) 100%) !important;
}
#authPage .chaen-brand-model {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  filter: none !important;
}
#authPage .chaen-brand-copy {
  position: absolute !important;
  z-index: 3 !important;
  top: 61px !important;
  left: 49px !important;
  right: 32px !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
}
#authPage .chaen-brand-logo {
  margin: 0 0 61px !important;
  color: var(--text-primary) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .25em !important;
}
#authPage .chaen-brand-copy h3 {
  margin: 0 0 15px !important;
  color: var(--text-primary) !important;
  font-size: 27px !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
  letter-spacing: .165em !important;
}
#authPage .chaen-brand-copy p {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: .035em !important;
}

/* Left lower LINE friend card */
#authPage .chaen-line-friend-card {
  position: absolute !important;
  z-index: 4 !important;
  left: 39px !important;
  bottom: 32px !important;
  width: 380px !important;
  max-width: calc(100% - 78px) !important;
  min-height: 126px !important;
  padding: 19px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: rgba(255,255,255,.91) !important;
  border: 1px solid #E4DAD0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(45,35,25,.10) !important;
}
#authPage .chaen-line-bubble--friend {
  width: 56px !important;
  height: 50px !important;
  border-radius: 52% !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 13px !important;
}
#authPage .chaen-line-bubble--friend::after {
  left: 8px !important;
  bottom: -6px !important;
  width: 15px !important;
  height: 14px !important;
}
#authPage .chaen-line-friend-copy strong {
  display: block !important;
  margin: 0 0 7px !important;
  color: #8B705E !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
}
#authPage .chaen-line-friend-copy span {
  display: block !important;
  color: #6F625A !important;
  font-size: 12px !important;
  line-height: 1.68 !important;
  letter-spacing: .025em !important;
}

/* ---------- RIGHT AUTH PANEL ---------- */
#authPage .chaen-auth-pane {
  width: 100%;
  height: 918px !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 76px 56px 0 !important;
  background: #FBF9F6 !important;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(181,159,139,.30) transparent;
}
#authPage .auth-login-form {
  min-height: 842px;
  display: flex;
  flex-direction: column;
}
#authPage .chaen-auth-close {
  position: absolute !important;
  z-index: 30 !important;
  top: 19px !important;
  right: 21px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  font-size: 31px !important;
  line-height: 31px !important;
  font-weight: 300 !important;
}
#authPage .chaen-auth-close:hover { opacity: .60 !important; }

#authPage .auth-heading-block {
  margin: 0 0 39px !important;
  text-align: center !important;
}
#authPage .auth-title {
  margin: 0 !important;
  color: var(--text-primary) !important;
  font-size: 28px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
}
#authPage .auth-title-rule {
  display: block !important;
  width: 42px !important;
  height: 1px !important;
  margin: 18px auto 17px !important;
  background: #D0C5BB !important;
}
#authPage .auth-subtitle {
  margin: 0 !important;
  color: var(--text-light) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: .035em !important;
}

/* Crisp LINE login button — no raster text */
#authPage .chaen-line-login {
  width: 100% !important;
  height: 109px !important;
  min-height: 109px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#authPage .chaen-line-login:hover { background: #A68F7C !important; }
#authPage .chaen-line-bubble--login {
  width: 54px !important;
  height: 48px !important;
  border-radius: 52% !important;
  background: #fff !important;
  color: var(--primary) !important;
  font-size: 13px !important;
}
#authPage .chaen-line-bubble--login::after {
  left: 8px !important;
  bottom: -6px !important;
  width: 15px !important;
  height: 14px !important;
}
#authPage .chaen-line-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  color: #fff !important;
  text-align: left !important;
}
#authPage .chaen-line-copy strong {
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: .055em !important;
}
#authPage .chaen-line-copy small {
  margin-top: 5px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  letter-spacing: .03em !important;
}

#authPage .auth-divider {
  margin: 38px 0 37px !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}
#authPage .auth-divider::before,
#authPage .auth-divider::after { background: var(--divider) !important; }

#authPage .auth-form .form-group { margin-bottom: 23px !important; }
#authPage .auth-form .form-group label {
  display: block !important;
  margin: 0 0 10px !important;
  color: #534840 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}
#authPage .auth-input-wrap { position: relative !important; }
#authPage .auth-form .form-group input {
  width: 100% !important;
  height: 61px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #fff !important;
  border: 1px solid #DDD3CA !important;
  border-radius: 7px !important;
  color: #534840 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
#authPage .auth-form .form-group input:focus {
  outline: 0 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(181,159,139,.10) !important;
}
#authPage .auth-form .form-group input::placeholder { color: var(--text-light) !important; }
#authPage .auth-icon-field .auth-input-wrap input { padding-left: 50px !important; }
#authPage .login-password-field input { padding-left: 50px !important; padding-right: 48px !important; }
#authPage .auth-input-wrap > svg:not(.auth-lock-icon),
#authPage .auth-input-wrap > .auth-lock-icon {
  left: 16px !important;
  width: 20px !important;
  height: 20px !important;
  stroke: var(--icon-secondary) !important;
}
#authPage .login-password-toggle { color: var(--icon-secondary) !important; }

#authPage .auth-login-meta {
  margin: -2px 0 31px !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}
#authPage .auth-remember { gap: 9px !important; color: var(--text-secondary) !important; }
#authPage .auth-remember input {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--primary) !important;
}
#authPage .auth-login-meta a { color: #534840 !important; }
#authPage .auth-login-meta a:hover { color: var(--primary) !important; }

#authPage .chaen-login-submit,
#authPage .auth-form .btn-primary {
  width: 100% !important;
  height: 59px !important;
  min-height: 59px !important;
  border: 0 !important;
  border-radius: 31px !important;
  background: var(--deep-brown) !important;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 59px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  box-shadow: none !important;
}
#authPage .chaen-login-submit:hover,
#authPage .auth-form .btn-primary:hover { background: var(--deep-brown-hover) !important; }

/* Make the login footer sit at the exact bottom of right body like the reference */
#authPage .auth-login-form .auth-member-join {
  margin: auto -56px 0 !important;
  min-height: 102px !important;
  padding: 0 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  border-top: 1px solid var(--border-light) !important;
  background: rgba(255,255,255,.32) !important;
  font-size: 13px !important;
  flex: 0 0 102px;
}
#authPage .auth-member-join span { color: var(--text-secondary) !important; }
#authPage .auth-member-join a {
  color: #534840 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
#authPage .auth-member-join a:hover { color: var(--primary) !important; }

/* Prevent Turnstile/error placeholders from altering login spacing while empty */
#authPage #loginTurnstile:empty,
#authPage #loginError:empty { display: none !important; }

/* Browser autofill must stay warm white */
#authPage input:-webkit-autofill,
#authPage input:-webkit-autofill:hover,
#authPage input:-webkit-autofill:focus,
#authPage input:-webkit-autofill:active {
  -webkit-text-fill-color: #534840 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: #534840 !important;
  transition: background-color 9999s ease-out 0s;
}

/* ---------- BOTTOM BENEFITS ---------- */
#authPage .chaen-auth-benefits {
  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  background: #F5F1EC !important;
  border-top: 1px solid var(--divider) !important;
}
#authPage .chaen-benefit {
  height: 59px !important;
  min-height: 59px !important;
  padding: 0 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  border-right: 1px solid var(--primary-light) !important;
}
#authPage .chaen-benefit:last-child { border-right: 0 !important; }
#authPage .chaen-benefit svg {
  width: 34px !important;
  height: 34px !important;
  fill: none !important;
  stroke: var(--icon-primary) !important;
  stroke-width: 1.4 !important;
}
#authPage .chaen-benefit strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: #534840 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}
#authPage .chaen-benefit span {
  display: block !important;
  color: var(--text-light) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Registration / verification / forgot-password keep the same brand system */
#authPage #registerForm,
#authPage #verifyEmailForm,
#authPage #registerSuccessForm,
#authPage #forgotPasswordForm {
  color: var(--text-primary) !important;
}
#authPage .btn-line { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
#authPage .btn-line:hover { background: var(--primary-hover) !important; }
#authPage .terms-check input { accent-color: var(--primary) !important; }

/* Desktop / short-screen: preserve the reference proportions by scaling the whole card,
   instead of distorting the inner layout or adding a scrollbar to the login screen. */
@media (min-width: 769px) and (max-height: 1100px) {
  #authPage .chaen-auth-shell { zoom: .92; }
}
@media (min-width: 769px) and (max-height: 980px) {
  #authPage .chaen-auth-shell { zoom: .82; }
}
@media (min-width: 769px) and (max-height: 880px) {
  #authPage .chaen-auth-shell { zoom: .73; }
}
@media (min-width: 769px) and (max-height: 790px) {
  #authPage .chaen-auth-shell { zoom: .68; }
}

/* Tablet: retain two-column character but scale spacing cleanly. */
@media (max-width: 900px) and (min-width: 769px) {
  #authPage .chaen-auth-shell { width: 1060px !important; max-width: none !important; }
}

/* Mobile keeps the functional single-column version. */
@media (max-width: 768px) {
  #authPage { padding: 12px !important; }
  #authPage .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    zoom: 1 !important;
  }
  #authPage .chaen-auth-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #authPage .chaen-auth-brand {
    height: 74px !important;
    min-height: 74px !important;
    background: #FBF9F6 !important;
  }
  #authPage .chaen-brand-model,
  #authPage .chaen-auth-brand::after,
  #authPage .chaen-line-friend-card,
  #authPage .chaen-brand-copy h3,
  #authPage .chaen-brand-copy p { display: none !important; }
  #authPage .chaen-brand-copy {
    position: static !important;
    width: 100%;
    height: 74px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #authPage .chaen-brand-logo {
    margin: 0 !important;
    font-size: 27px !important;
  }
  #authPage .chaen-auth-pane {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 22px 24px 26px !important;
  }
  #authPage .auth-login-form { min-height: 0 !important; display: block !important; }
  #authPage .auth-heading-block { margin-bottom: 22px !important; }
  #authPage .auth-title { font-size: 24px !important; }
  #authPage .auth-title-rule { margin: 13px auto 12px !important; }
  #authPage .auth-subtitle { font-size: 12px !important; }
  #authPage .chaen-line-login {
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 18px !important;
    gap: 13px !important;
  }
  #authPage .chaen-line-bubble--login { width: 43px !important; height: 39px !important; font-size: 10px !important; }
  #authPage .chaen-line-copy strong { font-size: 16px !important; }
  #authPage .chaen-line-copy small { font-size: 10px !important; }
  #authPage .auth-divider { margin: 24px 0 !important; }
  #authPage .auth-form .form-group { margin-bottom: 17px !important; }
  #authPage .auth-form .form-group input { height: 52px !important; }
  #authPage .auth-login-meta { margin-bottom: 22px !important; }
  #authPage .chaen-login-submit,
  #authPage .auth-form .btn-primary { height: 52px !important; min-height: 52px !important; line-height: 52px !important; }
  #authPage .auth-login-form .auth-member-join {
    margin: 24px -24px -26px !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 24px !important;
    flex: none !important;
  }
  #authPage .chaen-auth-benefits { display: none !important; }
  #authPage .chaen-auth-close { top: 14px !important; right: 13px !important; }
}

/* ======================================================================
   CHÆN AUTH MODAL — FINAL 1200×760 / 42:58 REFERENCE CALIBRATION
   2026-07-25 — visual-only override; authentication logic untouched
   ====================================================================== */
#authPage {
  --bg: #F8F5F1;
  --card: #FCFBF8;
  --primary: #B7A18C;
  --primary-hover: #A18D79;
  --dark: #352D29;
  --dark-hover: #2C2521;
  --title: #3E3631;
  --text: #7B736D;
  --light-text: #A79D95;
  --border: #E8E1DA;
  --line: #ECE7E2;
  --line-green: #06C755;
  --overlay: rgba(0,0,0,.45);

  background: var(--overlay) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  padding: 24px !important;
  overflow: hidden !important;
}

/* Exact design frame: 1200 × 760. It scales as one unit on smaller desktop screens. */
#authPage .chaen-auth-shell {
  width: min(1200px, 90vw) !important;
  height: auto !important;
  aspect-ratio: 1200 / 760 !important;
  max-width: 1200px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: var(--card) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.08) !important;
  zoom: 1 !important;
}

#authPage .chaen-auth-body {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  overflow: hidden !important;
}

/* ---------------- LEFT IMAGE / BRAND ---------------- */
#authPage .chaen-auth-brand {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

#authPage .chaen-auth-brand::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: rgba(255,248,242,.18) !important;
}

#authPage .chaen-brand-model {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 48% !important;
  filter: none !important;
}

#authPage .chaen-brand-copy {
  position: absolute !important;
  z-index: 3 !important;
  top: 46px !important;
  left: 48px !important;
  right: 34px !important;
  color: var(--title) !important;
  text-shadow: none !important;
}

#authPage .chaen-brand-logo {
  margin: 0 0 42px !important;
  color: var(--title) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 31px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .24em !important;
}

#authPage .chaen-brand-copy h3 {
  margin: 0 0 10px !important;
  color: var(--title) !important;
  font-family: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif !important;
  font-size: 26px !important;
  line-height: 1.78 !important;
  font-weight: 500 !important;
  letter-spacing: 4px !important;
}

/* User requested this sentence to use the same dark tone as the copy above. */
#authPage .chaen-brand-copy p {
  margin: 0 !important;
  color: var(--title) !important;
  font-family: 'Noto Sans TC', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  opacity: 1 !important;
}

/* Keep the LINE card completely INSIDE the left panel. */
#authPage .chaen-line-friend-card {
  position: absolute !important;
  z-index: 5 !important;
  left: 40px !important;
  right: 40px !important;
  bottom: 28px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 96px !important;
  box-sizing: border-box !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: visible !important;
  background: rgba(252,251,248,.94) !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 40px rgba(45,35,25,.12) !important;
}

#authPage .chaen-line-bubble--friend {
  position: relative !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 47px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-radius: 52% !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
#authPage .chaen-line-bubble--friend::after {
  content: '' !important;
  position: absolute !important;
  left: 7px !important;
  bottom: -6px !important;
  width: 14px !important;
  height: 13px !important;
  background: var(--primary) !important;
  clip-path: polygon(0 0,100% 0,0 100%) !important;
}
#authPage .chaen-line-friend-copy { min-width: 0 !important; }
#authPage .chaen-line-friend-copy strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--primary-hover) !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}
#authPage .chaen-line-friend-copy span {
  display: block !important;
  color: var(--text) !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  letter-spacing: .015em !important;
}

/* ---------------- RIGHT FORM ---------------- */
#authPage .chaen-auth-pane {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 42px 64px 0 !important;
  background: var(--card) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(183,161,140,.24) transparent !important;
}

#authPage .auth-login-form {
  min-height: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#authPage .chaen-auth-close {
  top: 17px !important;
  right: 20px !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--title) !important;
  font-size: 30px !important;
  line-height: 30px !important;
}

#authPage .auth-heading-block {
  margin: 0 0 28px !important;
  text-align: center !important;
}
#authPage .auth-title {
  color: var(--title) !important;
  font-family: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif !important;
  font-size: 26px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: 4px !important;
}
#authPage .auth-title-rule {
  width: 36px !important;
  margin: 13px auto 11px !important;
  background: #D8CEC6 !important;
}
#authPage .auth-subtitle {
  color: var(--light-text) !important;
  font-family: 'Noto Sans TC', system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}

#authPage .chaen-line-login {
  width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#authPage .chaen-line-login:hover { background: var(--primary-hover) !important; }
#authPage .chaen-line-bubble--login {
  position: relative !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-radius: 52% !important;
  background: #fff !important;
  color: var(--primary-hover) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
#authPage .chaen-line-bubble--login::after {
  content: '' !important;
  position: absolute !important;
  left: 7px !important;
  bottom: -5px !important;
  width: 12px !important;
  height: 11px !important;
  background: #fff !important;
  clip-path: polygon(0 0,100% 0,0 100%) !important;
}
#authPage .chaen-line-copy strong {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}
#authPage .chaen-line-copy small {
  margin-top: 3px !important;
  color: rgba(255,255,255,.76) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

#authPage .auth-divider {
  margin: 23px 0 !important;
  color: var(--text) !important;
  font-size: 11px !important;
}
#authPage .auth-divider::before,
#authPage .auth-divider::after { background: var(--line) !important; }

#authPage .auth-form .form-group { margin-bottom: 15px !important; }
#authPage .auth-form .form-group label {
  margin-bottom: 8px !important;
  color: var(--title) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}
#authPage .auth-form .form-group input {
  height: 52px !important;
  background: #fff !important;
  border: 1px solid #DDD5CF !important;
  border-radius: 7px !important;
  color: var(--title) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
#authPage .auth-form .form-group input:focus {
  outline: 0 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(183,161,140,.15) !important;
}
#authPage .auth-form .form-group input::placeholder { color: var(--light-text) !important; }
#authPage .auth-input-wrap > svg:not(.auth-lock-icon),
#authPage .auth-input-wrap > .auth-lock-icon,
#authPage .login-password-toggle {
  width: 18px !important;
  height: 18px !important;
  color: var(--primary-hover) !important;
  stroke: var(--primary-hover) !important;
  stroke-width: 2 !important;
}

#authPage .auth-login-meta {
  margin: 0 0 22px !important;
  color: var(--text) !important;
  font-size: 11px !important;
}
#authPage .auth-remember { color: var(--text) !important; }
#authPage .auth-remember input {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--primary) !important;
}
#authPage .auth-login-meta a { color: var(--text) !important; }
#authPage .auth-login-meta a:hover { color: var(--primary-hover) !important; }

#authPage .chaen-login-submit,
#authPage .auth-form .btn-primary {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  line-height: 50px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--dark) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  box-shadow: none !important;
}
#authPage .chaen-login-submit:hover,
#authPage .auth-form .btn-primary:hover { background: var(--dark-hover) !important; }

#authPage .auth-login-form .auth-member-join {
  margin: auto -64px 0 !important;
  min-height: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  padding: 0 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  border-top: 1px solid var(--line) !important;
  background: rgba(255,255,255,.28) !important;
  font-size: 11px !important;
}
#authPage .auth-member-join span { color: var(--text) !important; }
#authPage .auth-member-join a { color: var(--title) !important; font-weight: 500 !important; }

/* ---------------- BOTTOM BENEFITS ---------------- */
#authPage .chaen-auth-benefits {
  width: 100% !important;
  height: 78px !important;
  min-height: 78px !important;
  flex: 0 0 78px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--line) !important;
}
#authPage .chaen-benefit {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 30px !important;
  gap: 13px !important;
  border-right: 1px solid var(--border) !important;
}
#authPage .chaen-benefit svg {
  width: 28px !important;
  height: 28px !important;
  stroke: var(--primary-hover) !important;
  stroke-width: 1.6 !important;
}
#authPage .chaen-benefit strong {
  margin-bottom: 3px !important;
  color: var(--title) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
#authPage .chaen-benefit span {
  color: var(--light-text) !important;
  font-size: 9px !important;
}

/* Preserve the warm white during Chrome autofill. */
#authPage input:-webkit-autofill,
#authPage input:-webkit-autofill:hover,
#authPage input:-webkit-autofill:focus,
#authPage input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--title) !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: var(--title) !important;
}

/* Disable earlier desktop zoom rules; size is now controlled by width + aspect ratio. */
@media (min-width: 769px) {
  #authPage .chaen-auth-shell { zoom: 1 !important; }
}

/* Fit vertically on short desktop screens while preserving the 1200:760 ratio. */
@media (min-width: 769px) and (max-aspect-ratio: 1200/844) {
  #authPage .chaen-auth-shell {
    width: auto !important;
    height: min(760px, calc(100vh - 48px)) !important;
    aspect-ratio: 1200 / 760 !important;
    max-width: 90vw !important;
  }
}

/* Keep the existing compact mobile interaction; only re-apply the final palette. */
@media (max-width: 768px) {
  #authPage { padding: 12px !important; overflow: auto !important; }
  #authPage .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
  }
  #authPage .chaen-auth-body { display: block !important; height: auto !important; }
  #authPage .chaen-auth-brand {
    height: 76px !important;
    min-height: 76px !important;
    background: var(--bg) !important;
  }
  #authPage .chaen-brand-model,
  #authPage .chaen-auth-brand::after,
  #authPage .chaen-line-friend-card,
  #authPage .chaen-brand-copy h3,
  #authPage .chaen-brand-copy p { display: none !important; }
  #authPage .chaen-brand-copy { top: 26px !important; left: 24px !important; }
  #authPage .chaen-brand-logo { margin: 0 !important; font-size: 25px !important; }
  #authPage .chaen-auth-pane { height: auto !important; padding: 28px 24px 0 !important; }
  #authPage .auth-login-form { height: auto !important; min-height: 0 !important; }
  #authPage .chaen-line-login { height: 62px !important; min-height: 62px !important; }
  #authPage .auth-login-form .auth-member-join {
    margin: 24px -24px 0 !important;
    padding: 0 24px !important;
    height: 58px !important;
    min-height: 58px !important;
    flex-basis: 58px !important;
  }
  #authPage .chaen-auth-benefits { display: none !important; }
}

/* ======================================================================
   CHÆN AUTH MODAL — OFFICIAL 1024×740 / 34:66 TUNE
   2026-07-25 — visual-only override; authentication behavior untouched
   ====================================================================== */
@media (min-width: 769px) {
  #authPage {
    padding: 20px !important;
  }

  #authPage .chaen-auth-shell {
    width: min(1024px, calc(100vw - 40px)) !important;
    height: auto !important;
    aspect-ratio: 1024 / 740 !important;
    max-width: 1024px !important;
    max-height: calc(100vh - 40px) !important;
    border-radius: 18px !important;
  }

  #authPage .chaen-auth-body {
    grid-template-columns: 34% 66% !important;
  }

  /* Left brand panel: tighter luxury crop, focused on upper body + copy. */
  #authPage .chaen-auth-brand {
    overflow: hidden !important;
  }

  #authPage .chaen-brand-model {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 52% 42% !important;
    transform: scale(1.08) !important;
    transform-origin: 52% 42% !important;
  }

  #authPage .chaen-brand-copy {
    top: 40px !important;
    left: 30px !important;
    right: 24px !important;
  }

  #authPage .chaen-brand-logo {
    margin-bottom: 38px !important;
    font-size: 27px !important;
    letter-spacing: .22em !important;
  }

  #authPage .chaen-brand-copy h3 {
    margin-bottom: 9px !important;
    color: var(--title) !important;
    font-size: 23px !important;
    line-height: 1.72 !important;
    letter-spacing: 3.5px !important;
  }

  #authPage .chaen-brand-copy p {
    color: var(--title) !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    opacity: 1 !important;
  }

  /* Keep LINE-friend card fully inside the narrower 34% brand panel. */
  #authPage .chaen-line-friend-card {
    left: 22px !important;
    right: 22px !important;
    bottom: 24px !important;
    width: auto !important;
    min-height: 90px !important;
    padding: 13px 15px !important;
    gap: 13px !important;
    border-radius: 10px !important;
  }

  #authPage .chaen-line-bubble--friend {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 42px !important;
    font-size: 11px !important;
  }

  #authPage .chaen-line-friend-copy strong {
    margin-bottom: 4px !important;
    font-size: 17px !important;
    letter-spacing: .06em !important;
  }

  #authPage .chaen-line-friend-copy span {
    font-size: 10px !important;
    line-height: 1.55 !important;
  }

  /* Right pane: reduce side whitespace from 60+px to 40px. */
  #authPage .chaen-auth-pane {
    padding: 38px 40px 0 !important;
  }

  #authPage .auth-heading-block {
    margin-bottom: 24px !important;
  }

  #authPage .auth-title {
    font-size: 25px !important;
  }

  #authPage .chaen-line-login {
    height: 60px !important;
    min-height: 60px !important;
  }

  #authPage .auth-divider {
    margin: 20px 0 !important;
  }

  #authPage .auth-form .form-group {
    margin-bottom: 13px !important;
  }

  #authPage .auth-form .form-group input {
    height: 52px !important;
  }

  #authPage .auth-login-meta {
    margin-bottom: 18px !important;
  }

  #authPage .chaen-login-submit,
  #authPage .auth-form .btn-primary {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 50px !important;
  }

  #authPage .auth-login-form .auth-member-join {
    margin-left: -40px !important;
    margin-right: -40px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  #authPage .chaen-auth-benefits {
    height: 76px !important;
    min-height: 76px !important;
    flex-basis: 76px !important;
  }

  #authPage .chaen-benefit {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Short desktop screens: preserve the 1024:740 design as one unit. */
@media (min-width: 769px) and (max-aspect-ratio: 1024/780) {
  #authPage .chaen-auth-shell {
    width: auto !important;
    height: min(740px, calc(100vh - 40px)) !important;
    aspect-ratio: 1024 / 740 !important;
    max-width: calc(100vw - 40px) !important;
  }
}

/* ======================================================================
   CHÆN AUTH MODAL — RIGHT PANE LUXURY ALIGNMENT
   Reference tune: ~1000px modal / 300px brand / centered 560px form
   Visual-only override. Authentication behaviour is untouched.
   ====================================================================== */
@media (min-width: 769px) {
  #authPage .chaen-auth-shell {
    width: min(1000px, calc(100vw - 40px)) !important;
    max-width: 1000px !important;
    aspect-ratio: auto !important;
    height: min(740px, calc(100vh - 40px)) !important;
  }

  #authPage .chaen-auth-body {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }

  #authPage .chaen-auth-pane {
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  #authPage .auth-login-form {
    width: 100% !important;
    max-width: 560px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 42px 0 0 !important;
    box-sizing: border-box !important;
  }

  /* Header intentionally narrower than the form controls. */
  #authPage .auth-heading-block {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
  }

  #authPage .auth-title {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #authPage .auth-subtitle {
    width: 100% !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* All primary login controls share the exact same visual width. */
  #authPage .chaen-line-login,
  #authPage .auth-divider,
  #authPage .auth-login-form > .form-group,
  #authPage .auth-login-meta,
  #authPage .chaen-login-submit,
  #authPage .auth-login-form > .btn-primary,
  #authPage #loginTurnstile,
  #authPage #loginError,
  #authPage #loginRedirectHint,
  #authPage #lineBindingNotice {
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #authPage .chaen-line-login {
    height: 60px !important;
    min-height: 60px !important;
    border-radius: 8px !important;
  }

  #authPage .auth-divider {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  #authPage .auth-form .form-group {
    margin-bottom: 14px !important;
  }

  #authPage .auth-form .form-group input {
    width: 100% !important;
    height: 54px !important;
    box-sizing: border-box !important;
  }

  #authPage .auth-login-meta {
    margin-top: 2px !important;
    margin-bottom: 20px !important;
  }

  #authPage .chaen-login-submit,
  #authPage .auth-form .btn-primary {
    width: 100% !important;
    max-width: 560px !important;
    height: 52px !important;
    min-height: 52px !important;
    line-height: 52px !important;
  }

  /* Member join strip remains visually attached to the right pane, while
     its text aligns with the centered form. */
  #authPage .auth-login-form .auth-member-join {
    width: calc(100% + 140px) !important;
    max-width: none !important;
    margin-left: -70px !important;
    margin-right: -70px !important;
    margin-top: auto !important;
    padding-left: 70px !important;
    padding-right: 70px !important;
    box-sizing: border-box !important;
  }

  /* Left side becomes a compact brand panel similar to the reference. */
  #authPage .chaen-brand-copy {
    left: 28px !important;
    right: 20px !important;
  }

  #authPage .chaen-line-friend-card {
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
  }
}

/* On shorter desktop screens, preserve the intended layout without making
   the right form wider than its 560px design width. */
@media (min-width: 769px) and (max-height: 780px) {
  #authPage .chaen-auth-shell {
    height: calc(100vh - 32px) !important;
    max-height: 740px !important;
  }

  #authPage .auth-login-form {
    padding-top: 30px !important;
  }

  #authPage .auth-heading-block {
    margin-bottom: 20px !important;
  }

  #authPage .auth-divider {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
}

/* ======================================================================
   CHÆN AUTH MODAL — REFERENCE IMAGE PROPORTION FINAL OVERRIDE
   Visual-only. Matches the tall luxury composition of the supplied mockup.
   ====================================================================== */
@media (min-width: 769px) {
  #authPage .chaen-auth-shell {
    width: min(1060px, calc(100vw - 56px)) !important;
    max-width: 1060px !important;
    height: min(1018px, calc(100vh - 56px)) !important;
    max-height: 1018px !important;
    aspect-ratio: 1060 / 1018 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  #authPage .chaen-auth-body {
    grid-template-columns: 43% 57% !important;
    min-height: 0 !important;
  }

  #authPage .chaen-brand-pane {
    min-width: 0 !important;
  }

  #authPage .chaen-auth-pane {
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  #authPage .auth-login-form {
    width: calc(100% - 80px) !important;
    max-width: 492px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 78px 0 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Narrow luxury header, while controls stay wider. */
  #authPage .auth-heading-block {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto 40px !important;
    text-align: center !important;
  }

  #authPage .auth-title {
    margin: 0 auto !important;
    color: #3E3631 !important;
  }

  #authPage .auth-subtitle {
    max-width: 380px !important;
    margin: 18px auto 0 !important;
    color: #A79D95 !important;
  }

  #authPage .chaen-line-login,
  #authPage .auth-divider,
  #authPage .auth-login-form > .form-group,
  #authPage .auth-login-meta,
  #authPage .chaen-login-submit,
  #authPage .auth-login-form > .btn-primary,
  #authPage #loginTurnstile,
  #authPage #loginError,
  #authPage #loginRedirectHint,
  #authPage #lineBindingNotice {
    width: 100% !important;
    max-width: 492px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #authPage .chaen-line-login {
    height: 108px !important;
    min-height: 108px !important;
    border-radius: 7px !important;
    background: #B7A18C !important;
  }

  #authPage .chaen-line-login:hover {
    background: #A18D79 !important;
  }

  #authPage .auth-divider {
    margin-top: 42px !important;
    margin-bottom: 42px !important;
  }

  #authPage .auth-form .form-group {
    margin-bottom: 28px !important;
  }

  #authPage .auth-form .form-group input {
    width: 100% !important;
    height: 60px !important;
    background: #FFFFFF !important;
    border-color: #DDD5CF !important;
  }

  #authPage .auth-form .form-group input:focus {
    border-color: #B7A18C !important;
    box-shadow: 0 0 0 3px rgba(183,161,140,.15) !important;
  }

  #authPage .auth-login-meta {
    margin-top: -2px !important;
    margin-bottom: 36px !important;
  }

  #authPage .chaen-login-submit,
  #authPage .auth-form .btn-primary {
    height: 58px !important;
    min-height: 58px !important;
    line-height: 58px !important;
    border-radius: 29px !important;
    background: #352D29 !important;
  }

  #authPage .chaen-login-submit:hover,
  #authPage .auth-form .btn-primary:hover {
    background: #2C2521 !important;
  }

  #authPage .auth-login-form .auth-member-join {
    width: calc(100% + 112px) !important;
    max-width: none !important;
    min-height: 104px !important;
    margin: auto -56px 0 !important;
    padding: 0 56px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Reference left-panel placement. */
  #authPage .chaen-brand-copy {
    left: 48px !important;
    right: 40px !important;
    top: 62px !important;
  }

  #authPage .chaen-brand-copy,
  #authPage .chaen-brand-copy * {
    color: #3E3631 !important;
  }

  #authPage .chaen-line-friend-card {
    left: 40px !important;
    right: 40px !important;
    bottom: 34px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #authPage .chaen-auth-benefits {
    min-height: 98px !important;
    height: 98px !important;
  }
}

/* Scale the reference composition as one unit on shorter desktop screens. */
@media (min-width: 769px) and (max-height: 1074px) {
  #authPage .chaen-auth-shell {
    width: auto !important;
    height: calc(100vh - 40px) !important;
    max-height: 1018px !important;
    aspect-ratio: 1060 / 1018 !important;
    max-width: calc(100vw - 40px) !important;
  }
}

/* ======================================================================
   CHÆN AUTH REGISTER VISIBILITY HOTFIX
   - Registration must stay inside the right auth pane.
   - Prevent legacy modal rules from hiding/pushing it off-canvas.
   ====================================================================== */
#authPage.register-mode .chaen-auth-pane {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#authPage.register-mode #loginForm {
  display: none !important;
}

#authPage.register-mode #registerForm {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
  width: min(492px, calc(100% - 72px)) !important;
  max-width: 492px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 42px 0 36px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#authPage.register-mode #registerForm * {
  box-sizing: border-box;
}

#authPage.register-mode #registerForm .form-group,
#authPage.register-mode #registerForm .password-field,
#authPage.register-mode #registerForm input,
#authPage.register-mode #registerForm .btn,
#authPage.register-mode #registerForm .register-checklist,
#authPage.register-mode #registerForm .terms-check {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  #authPage.register-mode #registerForm {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 22px 24px 28px !important;
  }
}

/* ======================================================================
   CHÆN AUTH — NEW LEFT MODEL IMAGE CROP
   2026-07-25 — image positioning only; auth behavior untouched
   ====================================================================== */
@media (min-width: 769px) {
  #authPage .chaen-brand-model {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 55% 48% !important;
    transform: none !important;
    transform-origin: center center !important;
  }
}


/* ======================================================================
   CHÆN AUTH — FINAL USABILITY PATCH
   - Deeper benefit subtitles
   - Terms checkbox/link stay on one row
   - Forgot-password form stays centered in the auth pane
   - Keep the removed left LINE friend card hidden
   ====================================================================== */

/* User requested the left LINE friend promo card removed. */
#authPage .chaen-line-friend-card {
  display: none !important;
}

/* Bottom benefit descriptions: improve contrast without competing with title. */
#authPage .chaen-benefit span,
#authPage .chaen-benefit .benefit-desc,
#authPage .chaen-benefit p {
  color: #8C8178 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Registration terms must sit next to the checkbox on one line. */
#authPage #registerForm .terms-check {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 14px 0 !important;
  white-space: nowrap !important;
  color: #7B736D !important;
  line-height: 1.4 !important;
}
#authPage #registerForm .terms-check input[type="checkbox"] {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}
#authPage #registerForm .terms-check label,
#authPage #registerForm .terms-check span {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
#authPage #registerForm .terms-check a {
  display: inline !important;
  width: auto !important;
  color: #534840 !important;
  white-space: nowrap !important;
}

/* Forgot password gets the same centered right-pane geometry as login. */
#authPage.forgot-password-mode .chaen-auth-pane {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#authPage.forgot-password-mode #loginForm,
#authPage.forgot-password-mode #registerForm,
#authPage.forgot-password-mode #verifyEmailForm,
#authPage.forgot-password-mode #registrationSuccessForm,
#authPage.forgot-password-mode #resetPasswordForm {
  display: none !important;
}
#authPage.forgot-password-mode #forgotPasswordForm {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
  width: min(492px, calc(100% - 72px)) !important;
  max-width: 492px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 78px 0 42px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#authPage.forgot-password-mode #forgotPasswordForm * {
  box-sizing: border-box !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .form-group,
#authPage.forgot-password-mode #forgotPasswordForm input,
#authPage.forgot-password-mode #forgotPasswordForm .btn,
#authPage.forgot-password-mode #forgotPasswordForm .btn-primary,
#authPage.forgot-password-mode #forgotTurnstile,
#authPage.forgot-password-mode #forgotError,
#authPage.forgot-password-mode #forgotSuccess {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  #authPage #registerForm .terms-check {
    white-space: normal !important;
    align-items: flex-start !important;
  }
  #authPage #registerForm .terms-check label,
  #authPage #registerForm .terms-check span {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
  #authPage.forgot-password-mode #forgotPasswordForm {
    width: 100% !important;
    max-width: none !important;
    padding: 28px 24px !important;
  }
}

/* CHÆN forgot-password helper text: keep directly below the Email input. */
#authPage #forgotPasswordForm .forgot-email-hint {
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #8C8178 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: left !important;
}


/* ======================================================================
   CHÆN MOBILE LOGIN — REFERENCE 54.png
   Mobile-only visual override. Desktop/tablet auth layout is untouched.
   ====================================================================== */
@media (max-width: 768px) {
  #authPage {
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,.45) !important;
  }

  #authPage .chaen-auth-shell {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    border-radius: 30px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #FCFBF8 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.08) !important;
  }

  #authPage .chaen-auth-body {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #authPage .chaen-brand-pane,
  #authPage .chaen-auth-benefits {
    display: none !important;
  }

  #authPage .chaen-auth-pane {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: #FCFBF8 !important;
    overflow: visible !important;
  }

  #authPage .auth-login-form {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 54px 28px 38px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background: #FCFBF8 !important;
  }

  #authPage .auth-heading-block {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 32px !important;
    text-align: center !important;
  }

  #authPage .auth-title-tabs {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 62px !important;
    font-family: "Noto Serif TC", "Noto Sans TC", serif !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  #authPage .auth-tab-login,
  #authPage .auth-tab-register {
    position: relative !important;
    display: inline-block !important;
    padding: 0 6px 20px !important;
    text-decoration: none !important;
  }

  #authPage .auth-tab-login {
    color: #3E3631 !important;
  }

  #authPage .auth-tab-login::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 74px !important;
    height: 2px !important;
    transform: translateX(-50%) !important;
    background: #352D29 !important;
  }

  #authPage .auth-tab-register {
    color: #9B938D !important;
  }

  #authPage .auth-title-slash,
  #authPage .auth-title-rule {
    display: none !important;
  }

  #authPage .auth-subtitle {
    width: 100% !important;
    max-width: none !important;
    margin: 24px auto 0 !important;
    color: #8F8780 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
  }

  #authPage .chaen-line-login,
  #authPage .auth-divider,
  #authPage .auth-login-form > .form-group,
  #authPage .auth-login-meta,
  #authPage .chaen-login-submit,
  #authPage .auth-login-form > .btn-primary,
  #authPage #loginTurnstile,
  #authPage #loginError,
  #authPage #loginRedirectHint,
  #authPage #lineBindingNotice {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #authPage .chaen-line-login {
    height: 94px !important;
    min-height: 94px !important;
    margin-top: 2px !important;
    padding: 0 26px !important;
    border-radius: 8px !important;
    background: #B7A18C !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
  }

  #authPage .chaen-line-login:hover,
  #authPage .chaen-line-login:active {
    background: #A18D79 !important;
  }

  #authPage .chaen-line-bubble--login {
    width: 58px !important;
    height: 52px !important;
    flex: 0 0 58px !important;
    font-size: 17px !important;
  }

  #authPage .chaen-line-copy {
    align-items: flex-start !important;
    text-align: left !important;
  }

  #authPage .chaen-line-copy strong {
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    color: #fff !important;
  }

  #authPage .chaen-line-copy small {
    margin-top: 7px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.88) !important;
    letter-spacing: .04em !important;
  }

  #authPage .auth-divider {
    margin-top: 32px !important;
    margin-bottom: 30px !important;
  }

  #authPage .auth-divider::before,
  #authPage .auth-divider::after {
    background: #DDD5CF !important;
  }

  #authPage .auth-divider span {
    color: #3E3631 !important;
    font-size: 17px !important;
  }

  #authPage .auth-form .form-group {
    margin-bottom: 22px !important;
  }

  #authPage .auth-form .form-group label {
    margin-bottom: 11px !important;
    color: #3E3631 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  #authPage .auth-form .auth-input-wrap,
  #authPage .auth-form .password-field {
    width: 100% !important;
  }

  #authPage .auth-form .form-group input {
    width: 100% !important;
    height: 62px !important;
    padding-left: 54px !important;
    padding-right: 50px !important;
    border: 1px solid #DDD5CF !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #3E3631 !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  #authPage .auth-form .form-group input:focus {
    border-color: #B7A18C !important;
    box-shadow: 0 0 0 3px rgba(183,161,140,.15) !important;
  }

  #authPage .auth-input-wrap > svg,
  #authPage .auth-lock-icon {
    width: 24px !important;
    height: 24px !important;
    left: 18px !important;
    color: #8F8780 !important;
    stroke: currentColor !important;
  }

  #authPage .login-password-toggle {
    right: 15px !important;
    color: #8F8780 !important;
  }

  #authPage .auth-login-meta {
    margin-top: -2px !important;
    margin-bottom: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    color: #3E3631 !important;
    font-size: 15px !important;
  }

  #authPage .auth-login-meta a,
  #authPage .auth-remember {
    color: #3E3631 !important;
  }

  #authPage .auth-remember input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
  }

  #authPage .chaen-login-submit,
  #authPage .auth-form .btn-primary {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    line-height: 58px !important;
    margin: 0 !important;
    border-radius: 30px !important;
    background: #352D29 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
  }

  #authPage .chaen-login-submit:hover,
  #authPage .auth-form .btn-primary:hover {
    background: #2C2521 !important;
  }

  #authPage .auth-login-form .auth-member-join {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 32px 0 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    color: #8F8780 !important;
    font-size: 16px !important;
  }

  #authPage .auth-member-join a {
    color: #8E715A !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  #authPage .auth-close,
  #authPage .modal-close,
  #authPage .close-btn {
    top: 18px !important;
    right: 20px !important;
    z-index: 20 !important;
  }

  /* Mobile register / forgot / verification screens use the same clean card. */
  #authPage.register-mode #registerForm,
  #authPage.forgot-password-mode #forgotPasswordForm,
  #authPage #verifyEmailForm,
  #authPage #registrationSuccessForm,
  #authPage #resetPasswordForm {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 44px 28px 34px !important;
    box-sizing: border-box !important;
  }
}


/* ======================================================================
   CHÆN MOBILE REGISTER — SCROLL + CENTERED BRAND FIX
   2026-07-25
   - Do not reuse the desktop left brand pane on mobile.
   - Keep the modal shell fixed while the auth pane scrolls.
   - Ensure iOS Safari can reach the complete registration form.
   ====================================================================== */
.mobile-auth-brand-logo {
  display: none;
}

@media (max-width: 768px) {
  /* The real desktop brand class is .chaen-auth-brand. Hide it on mobile. */
  #authPage .chaen-auth-brand,
  #authPage .chaen-brand-pane,
  #authPage .chaen-auth-benefits {
    display: none !important;
  }

  #authPage {
    overflow: hidden !important;
    padding: 12px !important;
  }

  #authPage .chaen-auth-shell {
    width: min(calc(100vw - 24px), 430px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    position: relative !important;
  }

  #authPage .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #authPage .chaen-auth-pane {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
    touch-action: pan-y !important;
  }

  #authPage.register-mode .chaen-auth-pane {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #authPage.register-mode #registerForm {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: max-content !important;
    height: auto !important;
    margin: 0 !important;
    padding: 90px 28px 110px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Dedicated mobile CHÆN mark; avoids the desktop brand pane offset. */
  #authPage.register-mode #registerForm .mobile-auth-brand-logo {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    text-align: center !important;
    color: #3E3631 !important;
    font-family: "Noto Serif TC", "Noto Sans TC", serif !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: .22em !important;
    text-indent: .22em !important;
  }

  #authPage.register-mode #registerForm > .auth-title {
    width: 100% !important;
    margin: 0 0 24px !important;
    text-align: center !important;
  }

  /* Keep the close control visually fixed while the form itself scrolls. */
  #authPage .chaen-auth-close,
  #authPage .modal-close,
  #authPage .close-btn {
    position: absolute !important;
    top: 18px !important;
    right: 20px !important;
    z-index: 100 !important;
  }

  /* Make the right-edge scrollbar visible enough to signal scrolling. */
  #authPage .chaen-auth-pane {
    scrollbar-width: thin;
    scrollbar-color: #D8CEC5 transparent;
  }
  #authPage .chaen-auth-pane::-webkit-scrollbar {
    width: 5px;
  }
  #authPage .chaen-auth-pane::-webkit-scrollbar-track {
    background: transparent;
  }
  #authPage .chaen-auth-pane::-webkit-scrollbar-thumb {
    background: #D8CEC5;
    border-radius: 999px;
  }

  /* Extra breathing room after the last action on long registration screens. */
  #authPage.register-mode #registerForm .auth-footer-links {
    margin-bottom: 24px !important;
  }
}

/* 2026-07-25 desktop auth tabs: remove browser link underline only on desktop. */
@media (min-width: 769px) {
  #authPage .auth-tab-register,
  #authPage .auth-tab-register:link,
  #authPage .auth-tab-register:visited,
  #authPage .auth-tab-register:hover,
  #authPage .auth-tab-register:focus,
  #authPage .auth-tab-register:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline-offset: 2px;
  }
}

/* 2026-07-25 desktop auth tabs: keep Login / Register typography visually identical. */
@media (min-width: 769px) {
  #authPage .auth-tab-login,
  #authPage .auth-tab-login:link,
  #authPage .auth-tab-login:visited,
  #authPage .auth-tab-login:hover,
  #authPage .auth-tab-login:focus,
  #authPage .auth-tab-login:active,
  #authPage .auth-tab-register,
  #authPage .auth-tab-register:link,
  #authPage .auth-tab-register:visited,
  #authPage .auth-tab-register:hover,
  #authPage .auth-tab-register:focus,
  #authPage .auth-tab-register:active {
    color: #3E3631 !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}


/* === CHÆN 選物誌文章圖片尺寸修正 ===
   只限制文章閱讀頁，不影響商品圖片、首頁 Banner 或後台編輯器。 */
.article-detail {
  width: min(100%, 880px);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.article-detail-cover {
  width: 100%;
  max-width: 880px;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.article-detail-cover img {
  display: block;
  width: 100% !important;
  max-width: 880px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

/* 編輯器內容中的圖片：禁止使用原始像素尺寸把版面撐滿。 */
.article-detail-content img {
  display: block;
  width: auto !important;
  max-width: min(100%, 760px) !important;
  height: auto !important;
  margin: 32px auto;
  object-fit: contain;
}

/* 若文章內容本身包了 figure / p，也不要讓圖片突破文章寬度。 */
.article-detail-content figure {
  max-width: 760px;
  margin: 32px auto;
}

.article-detail-content figure img {
  max-width: 100% !important;
  margin: 0 auto;
}

@media (max-width: 968px) {
  .article-detail {
    width: 100%;
    max-width: 760px;
  }

  .article-detail-cover img,
  .article-detail-content img,
  .article-detail-content figure {
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  .article-detail-section {
    padding-top: 24px;
  }

  .article-detail-content img {
    margin: 22px auto;
    border-radius: 4px;
  }
}

/* === Quick Product Add Modal === */
.product-card-image,
.cat-card-img-wrap,
.mcat-card-img,
.product-image {
  position: relative;
}

.product-cart-button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(183, 161, 140, 0.4);
  border-radius: 50%;
  background: transparent;
  color: #6b4b35;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.product-cart-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.product-cart-button--desktop {
  display: none;
}

.product-cart-button--mobile {
  display: flex;
  margin-left: auto;
}

.product-cart-button--mobile:hover,
.product-cart-button--mobile:focus-visible {
  background: rgba(183, 161, 140, 0.12);
  border-color: rgba(183, 161, 140, 0.72);
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .product-cart-button--desktop {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 8;
    width: 42px;
    height: 42px;
    display: flex;
    background: rgba(252, 251, 248, 0.9);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    pointer-events: none;
  }

  .product-cart-button--mobile {
    display: none;
  }

  .product-card:hover .product-cart-button--desktop,
  .product-card:focus-within .product-cart-button--desktop,
  .cat-card:hover .product-cart-button--desktop,
  .cat-card:focus-within .product-cart-button--desktop,
  .mcat-card:hover .product-cart-button--desktop,
  .mcat-card:focus-within .product-cart-button--desktop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .product-cart-button--desktop:hover,
  .product-cart-button--desktop:focus-visible {
    background: #B7A18C;
    border-color: #B7A18C;
    color: #fff;
  }
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .product-card-price,
  .cat-card-price,
  .mcat-card-price,
  .product-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
  }

  .product-card-price .price-current,
  .cat-card-price .current,
  .mcat-card-price .current,
  .product-price .current {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .product-cart-button--desktop {
    display: none;
  }

  .product-cart-button--mobile {
    display: flex;
  }
}

/* === Mobile product card column stability after Quick View button === */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .product-grid,
  .home-product-grid,
  .cat-product-grid,
  .mcat-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-card,
  .cat-card,
  .mcat-card,
  .product-card-info,
  .product-card-image,
  .product-card-name,
  .product-card-info .product-spec-summary {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .product-card-price {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .product-card-price .price-current {
    order: 1;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .product-card-price .price-original {
    order: 2;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .product-card-price .discount-label {
    order: 3;
    flex: 0 1 auto !important;
    max-width: calc(100% - 48px) !important;
    white-space: nowrap !important;
  }

  .product-card-price .product-cart-button--mobile {
    order: 4;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin-left: auto !important;
  }
}

/* === Mobile product card price / discount two-line layout === */
@media (max-width: 767px) {
  .product-card-price,
  .cat-card-price,
  .mcat-card-price {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-auto-rows: auto !important;
    align-items: baseline !important;
    justify-content: stretch !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
    min-width: 0 !important;
  }

  .product-card-price .price-current,
  .cat-card-price .current,
  .mcat-card-price .current {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .product-card-price .price-original,
  .cat-card-price .original,
  .mcat-card-price .original,
  .product-card-price .product-price-original,
  .cat-card-price .cat-card-price-original,
  .mcat-card-price .mcat-card-price-original {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .product-card-price .discount-label,
  .cat-card-price .discount-label,
  .cat-card-price .discount,
  .mcat-card-price .discount-label,
  .mcat-card-price .discount-pct {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .product-card-price .product-cart-button--mobile,
  .cat-card-price .product-cart-button--mobile,
  .mcat-card-price .product-cart-button--mobile {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 36px !important;
    height: 36px !important;
    margin-left: 0 !important;
  }
}

.quick-product-open {
  overflow: hidden;
}

.quick-product-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.quick-product-modal.show {
  display: flex;
}

.quick-product-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 28, 23, 0.42);
  backdrop-filter: blur(4px);
}

.quick-product-panel {
  position: relative;
  width: min(860px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  background: #fffaf6;
  border: 1px solid rgba(91, 63, 43, 0.16);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(35, 24, 18, 0.22);
}

.quick-product-loading,
.quick-product-error {
  min-height: 260px;
  padding: 48px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #5f432f;
  text-align: center;
}

.quick-product-error p {
  margin: 0 0 8px;
  color: #8a776b;
}

.quick-product-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(91, 63, 43, 0.16);
  border-radius: 50%;
  background: rgba(255, 250, 246, 0.92);
  color: #4f3728;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.quick-product-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 0;
}

.quick-product-media {
  min-height: 520px;
  background: #f3eee8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.quick-product-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.quick-product-gallery,
.quick-product-track,
.quick-product-slide {
  width: 100%;
  height: 100%;
  min-height: 520px;
}

.quick-product-gallery {
  position: relative;
}

.quick-product-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.quick-product-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.quick-product-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(91, 63, 43, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #5f432f;
  font-size: 28px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(45, 33, 25, 0.14);
}

.quick-product-arrow-prev {
  left: 14px;
}

.quick-product-arrow-next {
  right: 14px;
}

.quick-product-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.quick-product-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
}

.quick-product-dot.active {
  width: 18px;
  border-radius: 999px;
  background: #fff;
}

.quick-product-content {
  padding: 42px 38px 34px;
}

.quick-product-eyebrow {
  color: #9b775f;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.quick-product-title {
  margin: 0 40px 12px 0;
  color: #221915;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: 0;
}

.quick-product-summary {
  margin: 0 0 12px;
  color: #74665d;
  font-size: 13px;
  line-height: 1.7;
}

.quick-product-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
  color: #5f432f;
  font-size: 24px;
  font-weight: 700;
}

.quick-product-price del {
  color: #a99b8e;
  font-size: 14px;
  font-weight: 400;
}

.quick-product-group {
  margin-top: 18px;
}

.quick-product-label {
  margin-bottom: 9px;
  color: #6b5a4f;
  font-size: 13px;
  font-weight: 600;
}

.quick-product-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-product-option {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(91, 63, 43, 0.18);
  border-radius: 999px;
  background: #fff;
  color: #4a3528;
  font-size: 13px;
  cursor: pointer;
}

.quick-product-option.selected {
  border-color: #5f432f;
  background: #5f432f;
  color: #fff;
}

.quick-product-option.sold-out {
  color: #b8aca2;
  background: #f4efea;
  cursor: not-allowed;
  text-decoration: line-through;
}

.quick-product-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(91, 63, 43, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.quick-product-stock {
  color: #8a776b;
  font-size: 12px;
}

.quick-product-qty {
  display: inline-grid;
  grid-template-columns: 34px 54px 34px;
  overflow: hidden;
  border: 1px solid rgba(91, 63, 43, 0.18);
  border-radius: 999px;
  background: #fff;
}

.quick-product-qty button,
.quick-product-qty input {
  height: 36px;
  border: 0;
  background: transparent;
  text-align: center;
  color: #3c2a20;
}

.quick-product-qty button {
  cursor: pointer;
  font-size: 18px;
}

.quick-product-qty input {
  width: 54px;
  font-weight: 600;
}

.quick-product-actions {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 10px;
  margin-top: 22px;
}

.quick-product-primary,
.quick-product-secondary,
.quick-product-detail-link {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.quick-product-primary {
  border: 1px solid #5f432f;
  background: #5f432f;
  color: #fff;
}

.quick-product-primary:disabled {
  border-color: #d5cbc1;
  background: #d5cbc1;
  color: #81746b;
  cursor: not-allowed;
}

.quick-product-secondary,
.quick-product-detail-link {
  border: 1px solid rgba(91, 63, 43, 0.16);
  background: #fff;
  color: #5f432f;
}

.quick-product-detail-link {
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .quick-product-modal {
    align-items: flex-end;
    padding: 0;
  }

  .quick-product-panel {
    width: 100%;
    max-height: calc(100vh - 28px);
    border-radius: 22px 22px 0 0;
  }

  .quick-product-layout {
    grid-template-columns: 1fr;
  }

  .quick-product-media,
  .quick-product-media img,
  .quick-product-gallery,
  .quick-product-track,
  .quick-product-slide {
    min-height: 260px;
    max-height: 360px;
  }

  .quick-product-content {
    padding: 26px 18px 22px;
  }

  .quick-product-title {
    font-size: 21px;
  }

  /* Mobile quick-product controls: match the product-detail reference layout */
  .quick-product-qty-row {
    display: block;
    margin-top: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .quick-product-qty-row > div:first-child {
    display: none;
  }

  .quick-product-qty {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 56px;
    border: 1px solid rgba(91, 63, 43, 0.18);
    border-radius: 12px;
    background: #fff;
  }

  .quick-product-qty button,
  .quick-product-qty input {
    width: 100%;
    height: 54px;
    min-width: 0;
  }

  .quick-product-qty button {
    font-size: 24px;
    color: #5f432f;
  }

  .quick-product-qty input {
    font-size: 18px;
    font-weight: 500;
    color: #3c2a20;
  }

  .quick-product-qty button:first-child {
    border-right: 1px solid rgba(91, 63, 43, 0.10);
  }

  .quick-product-qty button:last-child {
    border-left: 1px solid rgba(91, 63, 43, 0.10);
  }

  .quick-product-actions {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
  }

  .quick-product-primary,
  .quick-product-secondary {
    width: 100%;
    min-height: 56px;
    height: 56px;
    border-radius: 9999px;
    font-size: 16px;
    letter-spacing: 0.5px;
  }

  .quick-product-primary {
    border-color: #5f432f;
    background: #5f432f;
    color: #fff;
  }

  .quick-product-secondary {
    border-color: rgba(91, 63, 43, 0.35);
    background: #fff;
    color: #5f432f;
  }

  .quick-add-card-btn {
    right: 10px;
    bottom: 10px;
    width: 42px;
    height: 42px;
  }

  .quick-add-card-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* === CHÆN Login Modal precise reference override === */
#authPage.active {
  background: rgba(35, 30, 27, 0.68) !important;
  backdrop-filter: blur(1px) !important;
  align-items: center !important;
  justify-content: center !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell {
  width: 720px !important;
  height: 560px !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 48px) !important;
  margin: auto !important;
  background: #FAF8F4 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  aspect-ratio: auto !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-body {
  display: flex !important;
  width: 720px !important;
  height: 560px !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-brand {
  position: relative !important;
  display: block !important;
  width: 310px !important;
  height: 560px !important;
  flex: 0 0 310px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #FAF8F4 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-brand-model {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-brand-copy {
  position: absolute !important;
  z-index: 2 !important;
  left: 24px !important;
  top: 170px !important;
  right: auto !important;
  color: #342B26 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-brand-logo {
  margin: 0 !important;
  font-family: "Cormorant Garamond", "Playfair Display", serif !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: 0.20em !important;
  color: #342B26 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-brand-copy h3 {
  margin: 24px 0 0 !important;
  font-family: "Noto Serif TC", "Source Han Serif TC", serif !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  color: #5F5148 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-brand-rule {
  display: block !important;
  width: 26px !important;
  height: 1px !important;
  margin-top: 20px !important;
  background: #6F6259 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-friend-card,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-benefits,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-login-line-hint,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-title-rule,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-title-tabs,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-tab-login,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-tab-register,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-title-slash {
  display: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane {
  width: 410px !important;
  height: 560px !important;
  flex: 0 0 410px !important;
  padding: 30px 32px 24px !important;
  box-sizing: border-box !important;
  background: #FAF8F4 !important;
  overflow: hidden !important;
  display: block !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-login-form {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  background: #FAF8F4 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-close,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .modal-close,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .close-btn {
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #4F453F !important;
  font-size: 16px !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-heading-block {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: center !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-title {
  margin: 0 !important;
  font-family: "Noto Serif TC", "Source Han Serif TC", serif !important;
  font-size: 21px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  color: #342B26 !important;
  text-align: center !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-subtitle {
  margin: 6px 0 0 !important;
  font-family: "Cormorant Garamond", "Playfair Display", serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: #A28F80 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-login {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: #B79F8A !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-bubble--login {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-bubble--login::after {
  display: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-logo-picture,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-logo-picture img {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-copy strong {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: #FFFFFF !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-divider {
  width: 100% !important;
  margin: 20px 0 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #9A8C80 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-divider::before,
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-divider::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #E4DCD4 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-divider span {
  font-size: 11px !important;
  line-height: 1 !important;
  color: #9A8C80 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-login-form > .form-group {
  width: 100% !important;
  margin: 0 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-login-form > .form-group + .form-group {
  margin-top: 14px !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-form .form-group label {
  display: block !important;
  margin: 0 0 7px !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #342B26 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-input-wrap {
  width: 100% !important;
  position: relative !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-form .form-group input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 38px 0 40px !important;
  border: 1px solid #DED5CC !important;
  border-radius: 5px !important;
  background: #FFFFFF !important;
  color: #342B26 !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 13px !important;
  line-height: 42px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-input-wrap > svg:not(.auth-lock-icon),
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-input-wrap > .auth-lock-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  width: 17px !important;
  height: 17px !important;
  transform: translateY(-50%) !important;
  color: #9A8C80 !important;
  stroke: currentColor !important;
  pointer-events: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .login-password-toggle {
  right: 10px !important;
  width: 28px !important;
  height: 28px !important;
  color: #9A8C80 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .login-password-toggle svg {
  width: 17px !important;
  height: 17px !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-login-meta {
  width: 100% !important;
  margin: 14px 0 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #75675D !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-remember {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #75675D !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-remember input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  accent-color: #B79F8A !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-login-meta a {
  color: #75675D !important;
  text-decoration: none !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-login-submit {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 22px !important;
  background: #342B26 !important;
  color: #FFFFFF !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 13px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-member-join {
  width: 100% !important;
  min-height: 0 !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-member-join span {
  color: #75675D !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-member-join a {
  color: #8F7564 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell {
    width: min(720px, calc(100vw - 32px)) !important;
    height: min(560px, calc(100vh - 32px)) !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-body {
    width: 100% !important;
    height: 100% !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-brand {
    width: calc(100% - 410px) !important;
    flex: 1 1 auto !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane {
    width: 410px !important;
    flex: 0 0 410px !important;
  }
}

@media (max-width: 767px) {
  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) {
    padding: 16px !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell {
    width: min(430px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-brand {
    display: none !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 30px 24px 24px !important;
    flex: none !important;
    overflow: visible !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-login-form {
    height: auto !important;
    padding-top: 16px !important;
  }
}

/* === CHÆN Desktop Login / Register Button Design System === */
@media (min-width: 1024px) {
  #authPage {
    --btn-height: 56px;
    --btn-radius: 9999px;
    --btn-padding-x: 24px;
    --btn-font-size: 16px;
    --btn-font-weight: 600;
    --btn-icon-size: 22px;
    --btn-gap: 12px;
  }

  #authPage .chaen-line-login,
  #authPage .chaen-line-register,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    width: 100% !important;
    height: var(--btn-height) !important;
    min-height: var(--btn-height) !important;
    max-height: var(--btn-height) !important;
    padding: 0 var(--btn-padding-x) !important;
    border-radius: var(--btn-radius) !important;
    border: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--btn-gap) !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    margin-top: 24px !important;
    background: #342B26 !important;
    color: #FFFFFF !important;
  }

  #authPage .chaen-login-submit:hover,
  #authPage #registerSubmitBtn:hover {
    background: #2F2723 !important;
    color: #FFFFFF !important;
  }

  #authPage .chaen-line-login,
  #authPage .chaen-line-register {
    background: #B79F8A !important;
    color: #FFFFFF !important;
  }

  #authPage .chaen-line-login:hover,
  #authPage .chaen-line-register:hover {
    background: #AE9580 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-login {
    margin: 22px 0 0 !important;
  }

  #authPage.register-mode .chaen-line-register {
    margin: 0 !important;
  }

  #authPage .chaen-line-bubble--login,
  #authPage .chaen-line-bubble--register {
    width: var(--btn-icon-size) !important;
    height: var(--btn-icon-size) !important;
    min-width: var(--btn-icon-size) !important;
    flex: 0 0 var(--btn-icon-size) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  #authPage .chaen-line-bubble--login::before,
  #authPage .chaen-line-bubble--login::after,
  #authPage .chaen-line-bubble--register::before,
  #authPage .chaen-line-bubble--register::after {
    display: none !important;
    content: none !important;
  }

  #authPage .chaen-line-logo-picture,
  #authPage .chaen-line-logo-picture img {
    width: var(--btn-icon-size) !important;
    height: var(--btn-icon-size) !important;
    min-width: var(--btn-icon-size) !important;
    display: block !important;
    object-fit: contain !important;
  }

  #authPage .chaen-line-copy,
  #authPage .chaen-line-copy strong,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
  }

  #authPage .chaen-button-hint {
    margin: 8px 0 0 !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #75675D !important;
    text-align: center !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-divider,
  #authPage.register-mode #registerForm > .auth-divider {
    margin: 20px 0 !important;
  }

  #authPage.register-mode #registerSubmitBtn + #registerError + .auth-divider,
  #authPage.register-mode #registerSubmitBtn ~ .auth-divider {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

/* === CHÆN Mobile Login / Register hint alignment === */
@media (max-width: 767px) {
  #authPage .chaen-login-line-hint,
  #authPage .chaen-register-line-hint {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #9A8C80 !important;
    text-align: center !important;
  }
}

/* === CHÆN Desktop Register spacing and right-pane scroll refinement === */
@media (min-width: 768px) {
  #authPage.register-mode .chaen-auth-pane {
    height: 100% !important;
    max-height: 100% !important;
    padding: 24px 28px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(154, 140, 128, 0.45) transparent !important;
  }

  #authPage.register-mode .chaen-auth-pane::-webkit-scrollbar {
    width: 6px;
  }

  #authPage.register-mode .chaen-auth-pane::-webkit-scrollbar-track {
    background: transparent;
  }

  #authPage.register-mode .chaen-auth-pane::-webkit-scrollbar-thumb {
    background: rgba(154, 140, 128, 0.45);
    border-radius: 999px;
  }

  #authPage.register-mode .chaen-auth-pane::-webkit-scrollbar-thumb:hover {
    background: rgba(154, 140, 128, 0.65);
  }

  #authPage.register-mode #registerForm {
    width: min(492px, 100%) !important;
    max-width: 492px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 24px !important;
    overflow: visible !important;
  }

  #authPage.register-mode #registerForm > .auth-title {
    margin: 0 0 24px !important;
  }

  #authPage.register-mode #registerForm .form-group {
    margin: 0 0 16px !important;
  }

  #authPage.register-mode #registerForm .form-group label {
    display: block !important;
    margin: 0 0 8px !important;
  }

  #authPage.register-mode #registerForm input[type="text"],
  #authPage.register-mode #registerForm input[type="email"],
  #authPage.register-mode #registerForm input[type="tel"],
  #authPage.register-mode #registerForm input[type="password"] {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
  }

  #authPage.register-mode #registerForm .password-field {
    position: relative !important;
    margin: 0 !important;
  }

  #authPage.register-mode #registerForm .password-toggle {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #authPage.register-mode #registerForm .field-hint,
  #authPage.register-mode #registerPasswordStrength {
    display: block !important;
    margin: 6px 0 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #9A8C80 !important;
  }

  #authPage.register-mode #registerForm .terms-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
  }

  #authPage.register-mode #registerForm .terms-check input[type="checkbox"] {
    flex: 0 0 16px !important;
  }

  #authPage.register-mode #registerForm .register-checklist {
    margin: 0 0 20px !important;
    padding: 12px 14px !important;
    display: grid !important;
    gap: 6px !important;
  }

  #authPage.register-mode #registerForm .register-checklist div {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  #authPage.register-mode #registerTurnstile {
    margin: 0 !important;
  }

  #authPage.register-mode #registerSubmitBtn {
    margin-top: 0 !important;
  }

  #authPage.register-mode #registerError {
    margin: 0 !important;
  }

  #authPage.register-mode #registerForm > .auth-divider {
    margin: 24px 0 20px !important;
  }

  #authPage.register-mode .chaen-line-register {
    margin: 0 !important;
  }

  #authPage.register-mode .chaen-register-line-hint {
    margin: 8px 0 0 !important;
  }

  #authPage.register-mode #registerForm .auth-footer-links {
    margin: 16px 0 0 !important;
  }
}

/* === CHÆN Desktop LINE official logo rendered size fix === */
@media (min-width: 1024px) {
  #authPage .chaen-line-login,
  #authPage .chaen-line-register {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #authPage .chaen-line-login .chaen-line-bubble,
  #authPage .chaen-line-register .chaen-line-bubble {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
  }

  #authPage .chaen-line-login .chaen-line-logo-picture,
  #authPage .chaen-line-register .chaen-line-logo-picture,
  #authPage .chaen-line-login .chaen-line-logo-picture img,
  #authPage .chaen-line-register .chaen-line-logo-picture img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    object-fit: contain !important;
    flex: 0 0 22px !important;
    flex-shrink: 0 !important;
  }
}

/* === CHÆN Desktop Auth Button Design Tokens - final override === */
@media (min-width: 1024px) {
  #authPage {
    --auth-btn-height: 56px;
    --auth-btn-radius: 9999px;
    --auth-btn-padding-x: 24px;
    --auth-btn-font-size: 16px;
    --auth-btn-font-weight: 600;
    --auth-btn-letter-spacing: 0.02em;
    --auth-btn-icon-size: 22px;
    --auth-btn-gap: 12px;
    --auth-btn-primary-bg: #342B26;
    --auth-btn-primary-text: #FFFFFF;
    --auth-btn-line-bg: #B79F8A;
    --auth-btn-line-text: #FFFFFF;
  }

  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn,
  #authPage .chaen-line-login,
  #authPage .chaen-line-register {
    width: 100% !important;
    height: var(--auth-btn-height) !important;
    min-height: var(--auth-btn-height) !important;
    max-height: var(--auth-btn-height) !important;
    padding: 0 var(--auth-btn-padding-x) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: var(--auth-btn-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--auth-btn-gap) !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: var(--auth-btn-font-size) !important;
    font-weight: var(--auth-btn-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--auth-btn-letter-spacing) !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    transition: filter 160ms ease, opacity 160ms ease, transform 120ms ease !important;
  }

  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    background: var(--auth-btn-primary-bg) !important;
    color: var(--auth-btn-primary-text) !important;
  }

  #authPage .chaen-login-submit:hover:not(:disabled),
  #authPage #registerSubmitBtn:hover:not(:disabled) {
    filter: brightness(0.94) !important;
  }

  #authPage .chaen-line-login,
  #authPage .chaen-line-register {
    background: var(--auth-btn-line-bg) !important;
    color: var(--auth-btn-line-text) !important;
  }

  #authPage .chaen-line-login:hover:not(:disabled),
  #authPage .chaen-line-register:hover:not(:disabled) {
    filter: brightness(0.95) !important;
  }

  #authPage .chaen-login-submit:active:not(:disabled),
  #authPage #registerSubmitBtn:active:not(:disabled),
  #authPage .chaen-line-login:active:not(:disabled),
  #authPage .chaen-line-register:active:not(:disabled) {
    transform: scale(0.995) !important;
  }

  #authPage .chaen-login-submit:disabled,
  #authPage #registerSubmitBtn:disabled,
  #authPage .chaen-line-login:disabled,
  #authPage .chaen-line-register:disabled,
  #authPage .chaen-login-submit[aria-disabled="true"],
  #authPage #registerSubmitBtn[aria-disabled="true"],
  #authPage .chaen-line-login[aria-disabled="true"],
  #authPage .chaen-line-register[aria-disabled="true"] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
  }

  #authPage .chaen-line-login .chaen-line-bubble,
  #authPage .chaen-line-register .chaen-line-bubble,
  #authPage .chaen-line-login .chaen-line-logo-picture,
  #authPage .chaen-line-register .chaen-line-logo-picture,
  #authPage .chaen-line-login .chaen-line-logo-picture img,
  #authPage .chaen-line-register .chaen-line-logo-picture img {
    width: var(--auth-btn-icon-size) !important;
    height: var(--auth-btn-icon-size) !important;
    min-width: var(--auth-btn-icon-size) !important;
    min-height: var(--auth-btn-icon-size) !important;
    max-width: var(--auth-btn-icon-size) !important;
    max-height: var(--auth-btn-icon-size) !important;
    flex: 0 0 var(--auth-btn-icon-size) !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  #authPage .chaen-line-login .chaen-line-bubble,
  #authPage .chaen-line-register .chaen-line-bubble {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
  }

  #authPage .chaen-line-copy,
  #authPage .chaen-line-copy strong,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    font-size: var(--auth-btn-font-size) !important;
    font-weight: var(--auth-btn-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--auth-btn-letter-spacing) !important;
    color: #FFFFFF !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-login {
    margin-top: 22px !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-login-line-hint {
    margin-top: 8px !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-divider {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-login-submit {
    margin-top: 24px !important;
  }

  #authPage.register-mode #registerSubmitBtn {
    margin-top: 24px !important;
  }

  #authPage.register-mode #registerForm > .auth-divider {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  #authPage.register-mode .chaen-line-register {
    margin: 0 !important;
  }

  #authPage.register-mode .chaen-register-line-hint {
    margin-top: 8px !important;
  }
}

/* === CHÆN Desktop Login Modal stable frame lock === */
@media (min-width: 1024px) {
  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell {
    width: 720px !important;
    height: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    aspect-ratio: auto !important;
    zoom: 1 !important;
    transform: none !important;
    overflow: hidden !important;
    margin: auto !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-body {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    grid-template-columns: none !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-brand {
    width: 310px !important;
    height: 560px !important;
    flex: 0 0 310px !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane {
    width: 410px !important;
    height: 560px !important;
    flex: 0 0 410px !important;
    max-height: 560px !important;
    overflow: hidden !important;
  }
}

/* === CHÆN Desktop Register / Forgot Modal stable frame lock === */
@media (min-width: 1024px) {
  #authPage.active.register-mode,
  #authPage.active.forgot-password-mode {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  #authPage.active.register-mode .chaen-auth-shell,
  #authPage.active.forgot-password-mode .chaen-auth-shell {
    width: 720px !important;
    height: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    aspect-ratio: auto !important;
    zoom: 1 !important;
    transform: none !important;
    overflow: hidden !important;
    margin: auto !important;
  }

  #authPage.active.register-mode .chaen-auth-body,
  #authPage.active.forgot-password-mode .chaen-auth-body {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    grid-template-columns: none !important;
  }

  #authPage.active.register-mode .chaen-auth-brand,
  #authPage.active.forgot-password-mode .chaen-auth-brand {
    width: 310px !important;
    height: 560px !important;
    flex: 0 0 310px !important;
    min-height: 0 !important;
  }

  #authPage.active.register-mode .chaen-auth-pane,
  #authPage.active.forgot-password-mode .chaen-auth-pane {
    width: 410px !important;
    height: 560px !important;
    flex: 0 0 410px !important;
    max-height: 560px !important;
    padding: 24px 28px 28px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  #authPage.active.register-mode .chaen-auth-benefits,
  #authPage.active.forgot-password-mode .chaen-auth-benefits {
    display: none !important;
  }

  #authPage.active.register-mode #registerForm,
  #authPage.active.forgot-password-mode #forgotPasswordForm {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 24px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #authPage.active.register-mode #registerForm > .auth-title,
  #authPage.active.forgot-password-mode #forgotPasswordForm > .auth-title {
    margin-top: 0 !important;
  }
}

/* === CHÆN Desktop Register / Forgot final visual cleanup === */
@media (min-width: 1024px) {
  #authPage.active.register-mode .chaen-auth-shell,
  #authPage.active.forgot-password-mode .chaen-auth-shell {
    width: 720px !important;
    height: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    margin: auto !important;
  }

  #authPage.active.register-mode .chaen-auth-body,
  #authPage.active.forgot-password-mode .chaen-auth-body {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    grid-template-columns: none !important;
  }

  #authPage.active.register-mode .chaen-auth-brand,
  #authPage.active.forgot-password-mode .chaen-auth-brand {
    position: relative !important;
    width: 310px !important;
    height: 560px !important;
    flex: 0 0 310px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #FAF8F4 !important;
  }

  #authPage.active.register-mode .chaen-brand-model,
  #authPage.active.forgot-password-mode .chaen-brand-model {
    content: url('/images/chaen-auth-left-v20260802.png') !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #authPage.active.register-mode .chaen-auth-pane,
  #authPage.active.forgot-password-mode .chaen-auth-pane {
    width: 410px !important;
    height: 560px !important;
    flex: 0 0 410px !important;
    max-height: 560px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #authPage.active.register-mode .chaen-brand-copy,
  #authPage.active.register-mode .chaen-line-friend-card,
  #authPage.active.register-mode .chaen-auth-benefits,
  #authPage.active.forgot-password-mode .chaen-brand-copy,
  #authPage.active.forgot-password-mode .chaen-line-friend-card,
  #authPage.active.forgot-password-mode .chaen-auth-benefits {
    display: none !important;
  }
}
/* === CHÆN Desktop Auth shared visual panel lock === */
@media (min-width: 1024px) {
  #authPage.active .chaen-auth-brand {
    position: relative !important;
    width: 310px !important;
    height: 560px !important;
    flex: 0 0 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;
    min-height: 560px !important;
    max-height: 560px !important;
    overflow: hidden !important;
    background: #FAF8F4 !important;
  }

  #authPage.active .chaen-brand-model {
    content: url('/images/chaen-auth-left-v20260802.png') !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 58% !important;
    transform: none !important;
  }
}

/* === Desktop checkout-login modal spacing guard === */
@media (min-width: 1024px) {
  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane {
    padding-bottom: 34px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-login-form {
    height: auto !important;
    min-height: 100% !important;
    padding-bottom: 0 !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .auth-member-join {
    margin-bottom: 0 !important;
    padding-bottom: 2px !important;
  }
}

/* === Desktop Quick View product selector layout final override === */
@media (min-width: 761px) {
  .quick-product-modal {
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .quick-product-backdrop {
    background: rgba(255, 255, 255, 0.76) !important;
    backdrop-filter: blur(2px) !important;
  }

  .quick-product-panel {
    width: min(1240px, calc(100vw - 40px)) !important;
    height: min(690px, calc(100vh - 40px)) !important;
    max-height: calc(100vh - 40px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 18px 60px rgba(45, 38, 32, 0.12) !important;
  }

  #quickProductModalBody,
  .quick-product-layout {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .quick-product-layout {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    gap: 0 !important;
    position: relative !important;
  }

  .quick-product-media {
    width: 100% !important;
    height: calc(100% - 112px) !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .quick-product-gallery,
  .quick-product-track,
  .quick-product-slide {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .quick-product-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff !important;
  }

  .quick-product-content {
    height: calc(100% - 112px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 46px 56px 34px 42px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 112, 105, 0.35) transparent;
  }

  .quick-product-content::-webkit-scrollbar {
    width: 6px;
  }

  .quick-product-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .quick-product-content::-webkit-scrollbar-thumb {
    background: rgba(120, 112, 105, 0.35);
    border-radius: 999px;
  }

  .quick-product-title {
    margin-right: 40px !important;
    font-size: 20px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: #4d4742 !important;
  }

  .quick-product-summary {
    color: #8d8580 !important;
    font-size: 13px !important;
  }

  .quick-product-price {
    margin: 30px 0 32px !important;
    color: #3f3b38 !important;
    font-size: 26px !important;
  }

  .quick-product-price del {
    margin-left: 26px !important;
    color: #c5c2c6 !important;
    font-size: 22px !important;
  }

  .quick-product-option {
    min-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #4e4a46 !important;
  }

  .quick-product-option.selected {
    background: #545454 !important;
    border-color: #545454 !important;
    color: #fff !important;
  }

  .quick-product-qty-row {
    display: block !important;
    margin-top: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .quick-product-stock {
    display: none !important;
  }

  .quick-product-qty {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 56px 1fr 56px !important;
    margin-top: 14px !important;
    border: 1px solid #9b9b9b !important;
    border-radius: 2px !important;
    background: #fff !important;
  }

  .quick-product-qty button,
  .quick-product-qty input {
    height: 44px !important;
    color: #8a8792 !important;
    font-size: 16px !important;
  }

  .quick-product-qty input {
    width: 100% !important;
    font-weight: 400 !important;
  }

  .quick-product-actions {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 4 !important;
    height: 112px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 38px 32px 28px calc(50% + 32px) !important;
    border-top: 1px solid #6f6f6f !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .quick-product-primary,
  .quick-product-secondary {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 3px !important;
    border: 1px solid #555 !important;
    background: #555 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
  }

  .quick-product-primary:disabled,
  .quick-product-secondary:disabled {
    border-color: #bdb8b4 !important;
    background: #bdb8b4 !important;
    color: #fff !important;
  }

  .quick-product-arrow {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(160, 166, 172, 0.22) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    font-size: 26px !important;
  }

  .quick-product-arrow:hover,
  .quick-product-arrow:focus-visible {
    background: rgba(160, 166, 172, 0.36) !important;
  }

  .quick-product-arrow-prev {
    left: 16px !important;
  }

  .quick-product-arrow-next {
    right: 16px !important;
  }

  .quick-product-close {
    top: 12px !important;
    right: 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: #9aa0aa !important;
    box-shadow: none !important;
  }
}

/* === Desktop Quick View warm rounded visual polish === */
@media (min-width: 761px) {
  .quick-product-backdrop {
    background: rgba(42, 35, 30, 0.42) !important;
    backdrop-filter: blur(3px) !important;
  }

  .quick-product-panel {
    border-radius: 20px !important;
    background: #fbf7f3 !important;
    box-shadow: 0 24px 80px rgba(39, 30, 24, 0.24) !important;
  }

  .quick-product-media,
  .quick-product-media img {
    background: #f4eee8 !important;
  }

  .quick-product-content,
  .quick-product-actions {
    background: #fbf7f3 !important;
  }

  .quick-product-content {
    background:
      linear-gradient(180deg, rgba(255, 252, 249, 0.92), rgba(251, 247, 243, 0.98)),
      #fbf7f3 !important;
  }

  .quick-product-actions {
    border-top: 1px solid rgba(111, 88, 70, 0.16) !important;
    grid-template-columns: 0.72fr 1.28fr !important;
    gap: 10px !important;
    background:
      linear-gradient(180deg, rgba(255, 252, 249, 0.92), rgba(251, 247, 243, 1)),
      #fbf7f3 !important;
  }

  .quick-product-secondary {
    border: 1px solid rgba(111, 76, 53, 0.24) !important;
    border-radius: 9999px !important;
    background: #fff !important;
    color: #6f4c35 !important;
  }

  .quick-product-primary {
    border: 1px solid #6f4c35 !important;
    border-radius: 9999px !important;
    background: #6f4c35 !important;
    color: #fff !important;
  }

  .quick-product-secondary:hover,
  .quick-product-secondary:focus-visible {
    background: #f5ede6 !important;
  }

  .quick-product-primary:hover,
  .quick-product-primary:focus-visible {
    background: #60412d !important;
    border-color: #60412d !important;
  }

  .quick-product-close {
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(111, 76, 53, 0.18) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: #6f4c35 !important;
  }
}

/* === Desktop Quick View reference-card texture === */
@media (min-width: 761px) {
  .quick-product-panel {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(90deg, #f5eee8 0%, #f5eee8 49.8%, #fbf7f3 49.8%, #fbf7f3 100%) !important;
    overflow: hidden !important;
  }

  .quick-product-media {
    background:
      linear-gradient(180deg, rgba(244, 238, 232, 0.92), rgba(236, 226, 217, 0.9)),
      #f4eee8 !important;
  }

  .quick-product-content {
    background:
      radial-gradient(circle at 96% 0%, rgba(232, 219, 208, 0.42), transparent 32%),
      linear-gradient(180deg, #fffbf8 0%, #fbf7f3 100%) !important;
  }

  .quick-product-qty-row {
    padding: 18px 18px 16px !important;
    border: 1px solid rgba(111, 76, 53, 0.13) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.52) !important;
  }

  .quick-product-qty {
    max-width: 138px !important;
    margin-left: auto !important;
    margin-top: -30px !important;
    background: rgba(255, 255, 255, 0.82) !important;
  }

  .quick-product-arrow {
    background: rgba(255, 255, 255, 0.78) !important;
    color: #6f4c35 !important;
    box-shadow: 0 8px 22px rgba(73, 55, 42, 0.13) !important;
  }

  .quick-product-arrow:hover,
  .quick-product-arrow:focus-visible {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}

/* === Desktop Quick View price typography match === */
@media (min-width: 761px) {
  .quick-product-price {
    color: #6f4c35 !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
  }

  .quick-product-price span {
    color: #6f4c35 !important;
    font: inherit !important;
  }

  .quick-product-price del {
    color: #c8beb7 !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration-color: rgba(168, 155, 146, 0.72) !important;
    text-decoration-thickness: 1px !important;
  }
}

/* === Desktop Quick View warm typography and pill options === */
@media (min-width: 761px) {
  .quick-product-eyebrow {
    color: #b59b86 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
  }

  .quick-product-title {
    color: #2f241e !important;
    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
  }

  .quick-product-summary,
  .quick-product-content .product-spec-summary {
    color: #9c8b7d !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
  }

  .quick-product-price {
    color: #6f4c35 !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
  }

  .quick-product-price del {
    color: #c9bfb7 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
  }

  .quick-product-label {
    color: #6c5647 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .quick-product-option {
    min-height: 38px !important;
    padding: 8px 17px !important;
    border: 1px solid rgba(111, 76, 53, 0.22) !important;
    border-radius: 9999px !important;
    background: #fff !important;
    color: #6f4c35 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .quick-product-option:hover,
  .quick-product-option:focus-visible {
    border-color: rgba(111, 76, 53, 0.42) !important;
    background: #f5ede6 !important;
  }

  .quick-product-option.selected {
    border-color: #6f4c35 !important;
    background: #6f4c35 !important;
    color: #fff !important;
  }

  .quick-product-option.sold-out {
    border-color: rgba(185, 174, 164, 0.5) !important;
    background: #f0e9e3 !important;
    color: #b1a397 !important;
  }

  .quick-product-qty-row {
    color: #6c5647 !important;
  }

  .quick-product-qty {
    border-color: rgba(111, 76, 53, 0.18) !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  .quick-product-qty button,
  .quick-product-qty input {
    color: #6f4c35 !important;
  }
}

/* === Desktop Auth button final size unification === */
@media (min-width: 1024px) {
  #authPage {
    --auth-btn-height: 56px;
    --auth-btn-radius: 9999px;
    --auth-btn-padding-x: 24px;
    --auth-btn-font-size: 16px;
    --auth-btn-font-weight: 600;
    --auth-btn-letter-spacing: 0.02em;
    --line-logo-size: 26px;
    --auth-btn-icon-size: var(--line-logo-size);
    --auth-btn-gap: 12px;
    --auth-btn-primary-bg: #342B26;
    --auth-btn-line-bg: #B79F8A;
  }

  #authPage .chaen-line-login,
  #authPage .chaen-line-register,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    width: 100% !important;
    height: var(--auth-btn-height) !important;
    min-height: var(--auth-btn-height) !important;
    max-height: var(--auth-btn-height) !important;
    padding: 0 var(--auth-btn-padding-x) !important;
    border: 0 !important;
    border-radius: var(--auth-btn-radius) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--auth-btn-gap) !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: var(--auth-btn-font-size) !important;
    font-weight: var(--auth-btn-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--auth-btn-letter-spacing) !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #authPage .chaen-line-login,
  #authPage .chaen-line-register {
    background: var(--auth-btn-line-bg) !important;
    color: #FFFFFF !important;
  }

  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    background: var(--auth-btn-primary-bg) !important;
    color: #FFFFFF !important;
  }

  #authPage .chaen-line-login .chaen-line-bubble,
  #authPage .chaen-line-register .chaen-line-bubble,
  #authPage .chaen-line-login .chaen-line-logo-picture,
  #authPage .chaen-line-register .chaen-line-logo-picture,
  #authPage .chaen-line-login .chaen-line-logo-picture img,
  #authPage .chaen-line-register .chaen-line-logo-picture img {
    width: var(--auth-btn-icon-size) !important;
    height: var(--auth-btn-icon-size) !important;
    min-width: var(--auth-btn-icon-size) !important;
    min-height: var(--auth-btn-icon-size) !important;
    max-width: var(--auth-btn-icon-size) !important;
    max-height: var(--auth-btn-icon-size) !important;
    flex: 0 0 var(--auth-btn-icon-size) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
  }

  #authPage .chaen-line-copy,
  #authPage .chaen-line-copy strong,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn {
    font-size: var(--auth-btn-font-size) !important;
    font-weight: var(--auth-btn-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--auth-btn-letter-spacing) !important;
    color: #FFFFFF !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-login {
    margin-top: 22px !important;
  }

  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-login-submit {
    margin-top: 24px !important;
  }
}

/* === Desktop Quick View action buttons equal width === */
@media (min-width: 761px) {
  .quick-product-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .quick-product-actions .quick-product-secondary,
  .quick-product-actions .quick-product-primary {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

/* === Desktop Auth action buttons locked to one shape === */
@media (min-width: 768px) {
  #authPage {
    --line-logo-size: 26px;
  }

  #authPage .auth-login-form > button.chaen-line-login,
  #authPage .auth-login-form > button.chaen-login-submit,
  #authPage #registerForm > button#registerSubmitBtn,
  #authPage #registerForm > button.chaen-line-register {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  #authPage .auth-login-form > button.chaen-line-login,
  #authPage #registerForm > button.chaen-line-register {
    background: #B79F8A !important;
    color: #FFFFFF !important;
  }

  #authPage .auth-login-form > button.chaen-login-submit,
  #authPage #registerForm > button#registerSubmitBtn {
    background: #342B26 !important;
    color: #FFFFFF !important;
  }

  #authPage .auth-login-form > button.chaen-line-login .chaen-line-copy,
  #authPage .auth-login-form > button.chaen-line-login .chaen-line-copy strong,
  #authPage #registerForm > button.chaen-line-register .chaen-line-copy,
  #authPage #registerForm > button.chaen-line-register .chaen-line-copy strong {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
  }

  #authPage .auth-login-form > button.chaen-line-login .chaen-line-bubble,
  #authPage .auth-login-form > button.chaen-line-login .chaen-line-logo-picture,
  #authPage .auth-login-form > button.chaen-line-login .chaen-line-logo-picture img,
  #authPage #registerForm > button.chaen-line-register .chaen-line-bubble,
  #authPage #registerForm > button.chaen-line-register .chaen-line-logo-picture,
  #authPage #registerForm > button.chaen-line-register .chaen-line-logo-picture img {
    width: var(--line-logo-size) !important;
    height: var(--line-logo-size) !important;
    min-width: var(--line-logo-size) !important;
    min-height: var(--line-logo-size) !important;
    max-width: var(--line-logo-size) !important;
    max-height: var(--line-logo-size) !important;
    flex: 0 0 var(--line-logo-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
  }
}

/* === Desktop LINE logo size final override === */
@media (min-width: 768px) {
  #authPage {
    --line-logo-size: 26px;
  }

  #authPage .auth-login-form > button.chaen-line-login .chaen-line-bubble,
  #authPage #registerForm > button.chaen-line-register .chaen-line-bubble {
    width: var(--line-logo-size) !important;
    height: var(--line-logo-size) !important;
    min-width: var(--line-logo-size) !important;
    min-height: var(--line-logo-size) !important;
    max-width: var(--line-logo-size) !important;
    max-height: var(--line-logo-size) !important;
    flex: 0 0 var(--line-logo-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
  }

  #authPage .auth-login-form > button.chaen-line-login .chaen-line-logo-picture,
  #authPage #registerForm > button.chaen-line-register .chaen-line-logo-picture {
    width: var(--line-logo-size) !important;
    height: var(--line-logo-size) !important;
    min-width: var(--line-logo-size) !important;
    min-height: var(--line-logo-size) !important;
    max-width: var(--line-logo-size) !important;
    max-height: var(--line-logo-size) !important;
    flex: 0 0 var(--line-logo-size) !important;
    display: block !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
  }

  #authPage .auth-login-form > button.chaen-line-login .chaen-line-logo-picture img,
  #authPage #registerForm > button.chaen-line-register .chaen-line-logo-picture img {
    width: var(--line-logo-size) !important;
    height: var(--line-logo-size) !important;
    min-width: var(--line-logo-size) !important;
    min-height: var(--line-logo-size) !important;
    max-width: var(--line-logo-size) !important;
    max-height: var(--line-logo-size) !important;
    flex: 0 0 var(--line-logo-size) !important;
    display: block !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* === Mobile Quick View image viewing correction === */
@media (max-width: 760px) {
  #quickProductModal .quick-product-panel {
    width: 100vw !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fbf7f3 !important;
  }

  #quickProductModal .quick-product-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #quickProductModal .quick-product-media {
    width: 100% !important;
    height: clamp(360px, 74vw, 520px) !important;
    min-height: clamp(360px, 74vw, 520px) !important;
    max-height: 52dvh !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 22px 22px 0 0 !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.78), transparent 28%),
      linear-gradient(180deg, #f5eee8 0%, #efe4da 100%) !important;
  }

  #quickProductModal .quick-product-gallery,
  #quickProductModal .quick-product-track,
  #quickProductModal .quick-product-slide {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #quickProductModal .quick-product-media img,
  #quickProductModal #quickProductImage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.78), transparent 28%),
      linear-gradient(180deg, #f5eee8 0%, #efe4da 100%) !important;
  }

  #quickProductModal .quick-product-content {
    padding: 28px 18px 24px !important;
    background: #fbf7f3 !important;
  }

  #quickProductModal .quick-product-close {
    top: 18px !important;
    right: 18px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(111, 76, 53, 0.14) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #342b26 !important;
    box-shadow: 0 10px 24px rgba(58, 42, 32, 0.12) !important;
    z-index: 8 !important;
  }

  #quickProductModal .quick-product-arrow {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #6f4c35 !important;
    box-shadow: 0 8px 20px rgba(58, 42, 32, 0.12) !important;
  }

  #quickProductModal .quick-product-arrow-prev {
    left: 14px !important;
  }

  #quickProductModal .quick-product-arrow-next {
    right: 14px !important;
  }
}

/* === CHÆN login modal left visual override (2026-08-01) === */
@media (min-width: 1024px) {
  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-brand {
    background: #F5F1EC !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-brand-model {
    content: url('/images/chaen-auth-left-v20260802.png') !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    filter: none !important;
    transform: none !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-brand::after {
    background: linear-gradient(180deg, rgba(245,241,236,.10) 0%, rgba(245,241,236,.02) 48%, rgba(61,51,45,.03) 100%) !important;
  }
}

/* === Quick View discount label color fix === */
#quickProductModal .quick-product-price .discount-label {
  color: #FFFFFF !important;
}

/* ============================================================
   Mobile homepage featured categories — four-column editorial layout
   ============================================================ */
@media (max-width: 767px) {
  .home-featured-categories {
    padding: 32px 20px 0 !important;
  }

  .home-featured-categories > .container {
    max-width: none !important;
    padding: 0 !important;
  }

  .home-featured-categories .home-section-header {
    gap: 14px;
    margin-bottom: 26px;
  }

  .home-featured-categories .home-section-title,
  #newProductsSection .home-section-title {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: 2px;
  }

  .home-featured-categories .home-section-title small,
  #newProductsSection .home-section-title small {
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1.35;
    letter-spacing: 3px !important;
  }

  .featured-categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 0 8px !important;
  }

  .featured-category-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }

  .featured-category-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
  }

  .featured-category-overlay {
    position: static;
    inset: auto;
    display: block;
    padding: 11px 0 0;
    background: transparent !important;
  }

  .featured-category-title {
    min-width: 0;
    color: var(--text-primary, #3d332d);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 1px;
    text-align: center;
    opacity: 1;
    transform: none;
  }

  .featured-category-title span {
    display: block !important;
    margin-top: 5px !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 1.3px !important;
    color: var(--text-muted, #9c8e85);
    opacity: 1 !important;
    overflow-wrap: anywhere;
  }

  #newProductsSection.home-section {
    padding: 62px 20px 16px !important;
  }

  #newProductsSection .home-section-header {
    gap: 14px;
    margin-bottom: 26px;
  }

  #newProductsSection .home-section-more-link {
    flex: 0 0 auto;
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
}

/* C2C return instruction content */
.return-instruction-content img,
.return-detail-card img { max-width:100%; height:auto; border-radius:10px; }
.return-instruction-content figure,
.return-detail-card figure { margin:16px 0; }
.return-instruction-content figcaption,
.return-detail-card figcaption { margin-top:6px; color:#8b817a; font-size:12px; text-align:center; }

/* C2C return tutorial responsive image sizing */
.return-instruction-content {
  overflow-x: hidden;
}
.return-instruction-content .c2c-instruction-image,
.return-detail-card .c2c-instruction-image {
  width: min(100%, 760px);
  max-width: 100%;
  margin: 22px auto;
  text-align: center;
}
.return-instruction-content .c2c-instruction-image img,
.return-detail-card .c2c-instruction-image img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  max-height: 1100px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
}
@media (max-width: 768px) {
  .return-instruction-content .c2c-instruction-image,
  .return-detail-card .c2c-instruction-image {
    width: 100%;
    margin: 16px auto;
  }
}

/* === CHÆN Desktop auth visual — shared original image positioning (2026-08-02) ===
   Login / Register / Forgot Password / Reset Password share one unchanged source image.
   Keep the existing 310 × 560 visual container; crop only through object-fit/object-position. */
@media (min-width: 768px) {
  #authPage.active .chaen-auth-brand {
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #authPage.active .chaen-brand-model {
    content: url('/images/chaen-auth-left-v20260802.png') !important;
    background: none !important;
    background-image: none !important;
    display: block !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 58% !important;
    transform: none !important;
    margin-top: 0 !important;
    scale: none !important;
    filter: none !important;
  }

  /* The source artwork already contains CHÆN and its copy. */
  #authPage.active .chaen-brand-copy {
    display: none !important;
  }
}

/* Email verification result modal */
.email-verification-landing {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(35, 31, 28, 0.50);
  backdrop-filter: blur(3px);
}
.email-verification-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  padding: 34px 38px 28px;
  border: 1px solid rgba(224, 214, 204, 0.95);
  border-radius: 13px;
  background: #fffdf9;
  box-shadow: 0 18px 52px rgba(53, 43, 36, 0.22);
  text-align: center;
  color: #3d352f;
}
.email-verification-landing.is-error .email-verification-card {
  width: min(360px, calc(100vw - 32px));
  padding: 28px 26px 24px;
}
.email-verification-eyebrow {
  margin: -2px 0 22px;
  color: #4c433d;
  font-size: 18px;
  font-weight: 600;
}
.email-verification-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f1df;
  color: #6e9f55;
}
.email-verification-landing.is-error .email-verification-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  background: #f7e3df;
  color: #a9564f;
}
.email-verification-icon svg { width: 42px; height: 42px; }
.email-verification-landing.is-error .email-verification-icon svg { width: 36px; height: 36px; }
.email-verification-confetti { position: absolute; top: 55px; left: 50%; width: 160px; height: 90px; transform: translateX(-50%); pointer-events: none; }
.email-verification-confetti i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e5b94d; }
.email-verification-confetti i:nth-child(1){left:8px;top:31px}.email-verification-confetti i:nth-child(2){left:27px;top:5px;background:#9ecf96}.email-verification-confetti i:nth-child(3){left:46px;top:48px;background:#ef8f76}.email-verification-confetti i:nth-child(4){right:8px;top:31px;background:#8fca9b}.email-verification-confetti i:nth-child(5){right:27px;top:5px;background:#e2bd54}.email-verification-confetti i:nth-child(6){right:46px;top:48px;background:#ef8f76}
.email-verification-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
}
.email-verification-landing.is-error .email-verification-card h2 { font-size: 22px; }
.email-verification-card p {
  margin: 0 auto 24px;
  color: #6f655e;
  font-size: 14px;
  line-height: 1.75;
}
.email-verification-status-card {
  margin: 0 0 22px;
  padding: 14px 17px;
  border: 1px solid #eadfd4;
  border-radius: 9px;
  background: #faf6f1;
  text-align: left;
}
.email-verification-status-card > div { display:flex; justify-content:space-between; gap:14px; padding:6px 0; color:#776b62; font-size:13px; }
.email-verification-status-card strong { color:#3d352f; font-weight:600; text-align:right; }
.email-verification-login-btn {
  width: min(290px, 100%);
  height: 52px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #d7b990, #c39b72);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(185, 145, 105, 0.20);
}
.email-verification-login-btn:hover { filter: brightness(.97); }
.email-verification-later-btn { display:block; margin:10px auto 0; padding:8px 14px; border:0; background:transparent; color:#6f655e; font-size:14px; cursor:pointer; }
.email-verification-close-btn { position:absolute; top:12px; right:14px; width:34px; height:34px; border:0; background:transparent; color:#625950; font-size:25px; line-height:1; cursor:pointer; }
.email-verification-security-note { margin-top:18px; padding:14px 16px; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:8px; background:#f5eee6; color:#6d625a; }
.email-verification-security-note span { font-size:22px; }
.email-verification-security-note small { font-size:12px; line-height:1.55; }
@media (max-width: 600px) {
  .email-verification-card { padding: 30px 22px 24px; }
  .email-verification-landing.is-error .email-verification-card { padding: 26px 20px 22px; }
  .email-verification-card h2 { font-size: 21px; }
  .email-verification-status-card > div { display:block; }
  .email-verification-status-card strong { display:block; margin-top:3px; text-align:left; }
}

/* Editorial sidebar category list restore */
@media (min-width: 769px) {
  .editorial-sidebar { width: 200px; }
  .editorial-categories { gap: 2px; }
  .editorial-category-item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #9a8d83;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    text-align: left;
    appearance: none;
  }
  .editorial-category-item:hover {
    background: #f1ebe5;
    color: #5b514b;
  }
  .editorial-category-item.active {
    background: #e6ddd4;
    color: #3d352f;
    font-weight: 400;
  }
  .editorial-category-count {
    margin-left: 16px;
    color: #b2a69d;
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
  }
}

/* Reset password uses the same desktop auth frame as forgot password. */
@media (min-width: 1024px) {
  #authPage.active.reset-password-mode {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  #authPage.active.reset-password-mode .chaen-auth-shell {
    width: 720px !important;
    height: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: hidden !important;
    margin: auto !important;
    padding: 0 !important;
    background: #fffdfa !important;
  }

  #authPage.active.reset-password-mode .chaen-auth-body {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    grid-template-columns: none !important;
  }

  #authPage.active.reset-password-mode .chaen-auth-brand {
    position: relative !important;
    display: block !important;
    width: 310px !important;
    height: 560px !important;
    flex: 0 0 310px !important;
    overflow: hidden !important;
    background: #FAF8F4 !important;
  }

  #authPage.active.reset-password-mode .chaen-brand-model {
    content: url('/images/chaen-auth-left-v20260802.png') !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 58% !important;
    transform: none !important;
  }

  #authPage.active.reset-password-mode .chaen-brand-copy,
  #authPage.active.reset-password-mode .chaen-line-friend-card,
  #authPage.active.reset-password-mode .chaen-auth-benefits {
    display: none !important;
  }

  #authPage.active.reset-password-mode .chaen-auth-pane {
    width: 410px !important;
    height: 560px !important;
    flex: 0 0 410px !important;
    max-height: 560px !important;
    padding: 96px 28px 28px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #authPage.active.reset-password-mode #resetPasswordForm {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #authPage.active.reset-password-mode #resetPasswordForm .auth-title {
    margin: 0 0 12px !important;
    text-align: center !important;
    font-size: 26px !important;
  }

  #authPage.active.reset-password-mode #resetPasswordForm .password-field,
  #authPage.active.reset-password-mode #resetPasswordForm .form-group,
  #authPage.active.reset-password-mode #resetPasswordForm input,
  #authPage.active.reset-password-mode #resetPasswordForm .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Email verification waiting page: keep the right pane scrollable so actions are reachable. */
@media (min-width: 1024px) {
  #authPage.active.verification-mode {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  #authPage.active.verification-mode .chaen-auth-shell {
    width: 720px !important;
    height: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: hidden !important;
    margin: auto !important;
    padding: 0 !important;
    background: #fffdfa !important;
  }

  #authPage.active.verification-mode .chaen-auth-body {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    grid-template-columns: none !important;
  }

  #authPage.active.verification-mode .chaen-auth-brand {
    position: relative !important;
    display: block !important;
    width: 310px !important;
    height: 560px !important;
    flex: 0 0 310px !important;
    overflow: hidden !important;
    background: #FAF8F4 !important;
  }

  #authPage.active.verification-mode .chaen-brand-model {
    content: url('/images/chaen-auth-left-v20260802.png') !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 58% !important;
    transform: none !important;
  }

  #authPage.active.verification-mode .chaen-brand-copy,
  #authPage.active.verification-mode .chaen-line-friend-card,
  #authPage.active.verification-mode .chaen-auth-benefits {
    display: none !important;
  }

  #authPage.active.verification-mode .chaen-auth-pane {
    position: relative !important;
    width: 410px !important;
    height: 560px !important;
    flex: 0 0 410px !important;
    max-height: 560px !important;
    padding: 26px 28px 34px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  #authPage.active.verification-mode #registrationSuccessForm,
  #authPage.active.verification-mode #verifyEmailForm {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    box-sizing: border-box !important;
  }

  #authPage.active.verification-mode .reg-success-container {
    padding-bottom: 18px !important;
  }

  #authPage.active.verification-mode .reg-success-actions {
    padding-bottom: 6px !important;
  }
}


/* === CHÆN stable auth view controller (2026-08-03) === */
#authPage .auth-form[hidden] {
  display: none !important;
}

#authPage[data-auth-view="login"] #loginForm,
#authPage[data-auth-view="register"] #registerForm,
#authPage[data-auth-view="forgot"] #forgotPasswordForm,
#authPage[data-auth-view="verify"] #verifyEmailForm,
#authPage[data-auth-view="verification"] #registrationSuccessForm,
#authPage[data-auth-view="reset"] #resetPasswordForm {
  display: block !important;
}

@media (min-width: 768px) {
  #authPage.active .chaen-auth-shell {
    width: 720px !important;
    height: 560px !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  #authPage.active .chaen-auth-body {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #authPage.active .chaen-auth-brand {
    position: relative !important;
    display: block !important;
    width: 310px !important;
    height: 560px !important;
    min-height: 0 !important;
    flex: 0 0 310px !important;
    overflow: hidden !important;
    background: #FAF8F4 !important;
  }

  #authPage.active .chaen-brand-model {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    margin: 0 !important;
    vertical-align: top !important;
  }

  #authPage.active .chaen-auth-pane {
    width: 410px !important;
    height: 560px !important;
    min-height: 0 !important;
    flex: 0 0 410px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    background: #FAF8F4 !important;
  }

  #authPage.active[data-auth-view="register"] .chaen-auth-pane {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  #authPage.active[data-auth-view="verification"] .chaen-auth-pane,
  #authPage.active[data-auth-view="verify"] .chaen-auth-pane,
  #authPage.active[data-auth-view="login"] .chaen-auth-pane,
  #authPage.active[data-auth-view="forgot"] .chaen-auth-pane,
  #authPage.active[data-auth-view="reset"] .chaen-auth-pane {
    overflow-y: hidden !important;
    scrollbar-gutter: auto !important;
  }
}

@media (max-width: 767px) {
  #authPage.active .chaen-auth-brand { display: none !important; }
  #authPage.active .chaen-auth-shell {
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
  }
  #authPage.active .chaen-auth-pane {
    max-height: calc(100dvh - 32px) !important;
    overflow-y: hidden !important;
  }
  #authPage.active[data-auth-view="register"] .chaen-auth-pane {
    overflow-y: auto !important;
  }
}


/* === CHÆN auth single-view hard guard v2 (2026-08-03) === */
#authPage .auth-form.is-inactive-auth-view,
#authPage .auth-form[hidden]:not(.is-active-auth-view),
#authPage .auth-form[aria-hidden="true"]:not(.is-active-auth-view) {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#authPage .auth-form.is-active-auth-view {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  pointer-events: auto !important;
}

#authPage[data-auth-view="verification"] #loginForm,
#authPage[data-auth-view="verification"] #registerForm,
#authPage[data-auth-view="verification"] #forgotPasswordForm,
#authPage[data-auth-view="verification"] #verifyEmailForm,
#authPage[data-auth-view="verification"] #resetPasswordForm {
  display: none !important;
}

#authPage[data-auth-view="verification"] #registrationSuccessForm {
  display: block !important;
}


/* CHÆN legal content unified default colors — final cascade layer */
:root {
  --chaen-legal-heading-color: #3D332D;
  --chaen-legal-body-color: #5B514B;
  --chaen-legal-muted-color: #9B8E82;
}

#termsPrivacyPage .terms-privacy-content-wrapper,
#servicePrivacyContentWrapper,
#memberTermsContentWrapper,
#purchaseNoticeContentWrapper,
.terms-content.chaen-legal-content-normalized,
.terms-content {
  color: var(--chaen-legal-body-color);
}

#termsPrivacyPage .terms-privacy-content-wrapper h1,
#termsPrivacyPage .terms-privacy-content-wrapper h2,
#termsPrivacyPage .terms-privacy-content-wrapper h3,
#termsPrivacyPage .terms-privacy-content-wrapper h4,
#termsPrivacyPage .terms-privacy-content-wrapper h5,
#termsPrivacyPage .terms-privacy-content-wrapper h6,
#servicePrivacyContentWrapper h1,
#servicePrivacyContentWrapper h2,
#servicePrivacyContentWrapper h3,
#servicePrivacyContentWrapper h4,
#servicePrivacyContentWrapper h5,
#servicePrivacyContentWrapper h6,
#memberTermsContentWrapper h1,
#memberTermsContentWrapper h2,
#memberTermsContentWrapper h3,
#memberTermsContentWrapper h4,
#memberTermsContentWrapper h5,
#memberTermsContentWrapper h6,
#purchaseNoticeContentWrapper h1,
#purchaseNoticeContentWrapper h2,
#purchaseNoticeContentWrapper h3,
#purchaseNoticeContentWrapper h4,
#purchaseNoticeContentWrapper h5,
#purchaseNoticeContentWrapper h6,
.terms-content h1,
.terms-content h2,
.terms-content h3,
.terms-content h4,
.terms-content h5,
.terms-content h6 {
  color: var(--chaen-legal-heading-color);
}

#termsPrivacyPage .terms-privacy-content-wrapper p,
#termsPrivacyPage .terms-privacy-content-wrapper li,
#termsPrivacyPage .terms-privacy-content-wrapper blockquote,
#servicePrivacyContentWrapper p,
#servicePrivacyContentWrapper li,
#servicePrivacyContentWrapper blockquote,
#memberTermsContentWrapper p,
#memberTermsContentWrapper li,
#memberTermsContentWrapper blockquote,
#purchaseNoticeContentWrapper p,
#purchaseNoticeContentWrapper li,
#purchaseNoticeContentWrapper blockquote,
.terms-content p,
.terms-content li,
.terms-content blockquote {
  color: var(--chaen-legal-body-color);
}

/* Inner editor spans/strong tags inherit the paragraph color after neutral legacy colors are removed. */
.chaen-legal-content-normalized p :is(span,strong,b,em,i,u,font),
.chaen-legal-content-normalized li :is(span,strong,b,em,i,u,font),
.terms-content p :is(span,strong,b,em,i,u,font),
.terms-content li :is(span,strong,b,em,i,u,font) {
  color: inherit;
}

/* Email verification failure modal: integrated clock-alert layout */
.email-verification-landing.is-error .email-verification-card {
  width: min(520px, calc(100vw - 32px));
  padding: 38px 42px 34px;
  border-radius: 22px;
}
.email-verification-landing.is-error .email-verification-eyebrow {
  margin: 0 42px 30px;
  color: #2f2a27;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: .025em;
}
.email-verification-landing.is-error .email-verification-icon {
  width: 126px;
  height: 126px;
  margin-bottom: 34px;
  background: #f7dfdb;
  color: #b94f45;
}
.email-verification-landing.is-error .email-verification-icon svg {
  width: 96px;
  height: 96px;
}
.email-verification-expired-icon { overflow: visible; }
.email-verification-landing.is-error .email-verification-card h2 {
  margin-bottom: 22px;
  font-size: 36px;
  line-height: 1.25;
}
.email-verification-landing.is-error .email-verification-card p {
  max-width: 410px;
  margin-bottom: 34px;
  color: #4f4945;
  font-size: 19px;
  line-height: 1.95;
}
.email-verification-landing.is-error .email-verification-login-btn {
  width: min(410px, 100%);
  height: 76px;
  border-radius: 15px;
  font-size: 24px;
  letter-spacing: .035em;
}
.email-verification-landing.is-error .email-verification-later-btn {
  margin-top: 20px;
  font-size: 22px;
  color: #3f3935;
}
.email-verification-landing.is-error .email-verification-close-btn {
  top: 24px;
  right: 28px;
  font-size: 34px;
}
@media (max-width: 600px) {
  .email-verification-landing.is-error .email-verification-card {
    width: min(360px, calc(100vw - 18px));
    padding: 28px 24px 26px;
    border-radius: 14px;
  }
  .email-verification-landing.is-error .email-verification-eyebrow {
    margin: 0 36px 22px;
    font-size: 20px;
  }
  .email-verification-landing.is-error .email-verification-icon {
    width: 92px;
    height: 92px;
    margin-bottom: 22px;
  }
  .email-verification-landing.is-error .email-verification-icon svg {
    width: 72px;
    height: 72px;
  }
  .email-verification-landing.is-error .email-verification-card h2 {
    margin-bottom: 15px;
    font-size: 24px;
  }
  .email-verification-landing.is-error .email-verification-card p {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.85;
  }
  .email-verification-landing.is-error .email-verification-login-btn {
    height: 56px;
    border-radius: 10px;
    font-size: 17px;
  }
  .email-verification-landing.is-error .email-verification-later-btn {
    margin-top: 10px;
    font-size: 15px;
  }
  .email-verification-landing.is-error .email-verification-close-btn {
    top: 12px;
    right: 14px;
    font-size: 25px;
  }
}


/* === Responsive LINE icon size correction ===
   2026-08-10
   Keep the existing desktop 26px LINE icon size and apply the same
   icon size to the mobile/tablet auth modal only. No auth behavior changes.
*/
@media (max-width: 1023px) {
  #authPage .chaen-line-login .chaen-line-bubble--login,
  #authPage .chaen-line-register .chaen-line-bubble--register,
  #authPage .chaen-line-login .chaen-line-logo-picture,
  #authPage .chaen-line-register .chaen-line-logo-picture,
  #authPage .chaen-line-login .chaen-line-logo-picture img,
  #authPage .chaen-line-register .chaen-line-logo-picture img,
  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-bubble--login,
  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-logo-picture,
  #authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-logo-picture img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: contain !important;
  }
}

/* === CHÆN Mobile/Tablet LINE logo size final override === */
@media (max-width: 1023px) {
  #authPage .chaen-line-login .chaen-line-bubble,
  #authPage .chaen-line-register .chaen-line-bubble,
  #authPage .chaen-line-login .chaen-line-logo-picture,
  #authPage .chaen-line-register .chaen-line-logo-picture,
  #authPage .chaen-line-login .chaen-line-logo-picture img,
  #authPage .chaen-line-register .chaen-line-logo-picture img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
}

/* === PDP RECOMMENDATIONS — auto recommendations between ad banner and tabs === */
.pdp-recommendations {
  width: 100%;
  flex: 0 0 100%;
  min-width: 0;
  margin-top: 36px;
  padding: 28px 20px 22px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
}

.pdp-recommendations[hidden] {
  display: none !important;
}

.pdp-recommendations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.pdp-recommendations-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.4px;
}

.pdp-recommendations-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.pdp-recommendations-more:hover,
.pdp-recommendations-more:focus-visible {
  color: var(--text-primary);
}

.pdp-recommendations-carousel {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.pdp-recommendations-viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.pdp-recommendations-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  transition: transform 0.32s ease;
  will-change: transform;
}

.pdp-recommendations-track .product-card {
  min-width: 0;
  box-sizing: border-box;
}

.pdp-recommendations-track .product-card-info {
  padding-top: 10px;
}

.pdp-recommendations-track .product-card-name {
  font-size: 13px;
}

.pdp-recommendations-track .product-card-price .price-current {
  font-size: 13px;
}

.pdp-recommendations-track .product-card-price .price-original {
  font-size: 12px;
}

.pdp-recommendations-arrow {
  position: absolute;
  top: 50%;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--white);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transform: translateY(-50%);
  transition: var(--transition);
}

.pdp-recommendations-arrow:hover,
.pdp-recommendations-arrow:focus-visible {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

.pdp-recommendations-arrow.prev {
  left: -2px;
}

.pdp-recommendations-arrow.next {
  right: -2px;
}

.pdp-recommendations-arrow[hidden] {
  display: none;
}

.pdp-recommendations-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 10px;
  margin-top: 16px;
}

.pdp-recommendations-dots[hidden] {
  display: none;
}

.pdp-recommendation-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: var(--transition);
}

.pdp-recommendation-dot.active {
  background: var(--text-primary);
  transform: scale(1.15);
}

.pdp-recommendation-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.pdp-recommendation-skeleton-card {
  flex: 0 0 calc((100% - 64px) / 5);
  min-width: 0;
}

.pdp-recommendation-skeleton-image,
.pdp-recommendation-skeleton-line {
  background: linear-gradient(90deg, var(--bg-secondary), var(--border-light), var(--bg-secondary));
  background-size: 200% 100%;
  animation: pdpRecommendationSkeleton 1.2s ease-in-out infinite;
}

.pdp-recommendation-skeleton-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
}

.pdp-recommendation-skeleton-line {
  height: 11px;
  margin-top: 10px;
  border-radius: var(--radius-pill);
}

.pdp-recommendation-skeleton-line.short {
  width: 58%;
  margin-top: 7px;
}

@keyframes pdpRecommendationSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tablet: keep the existing product-detail breakpoint and show four cards. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pdp-recommendations {
    margin-top: 28px;
    padding: 24px 16px 18px;
  }

  .pdp-recommendation-skeleton-card {
    flex-basis: calc((100% - 48px) / 4);
  }
}

/* Mobile: the recommendation area gets its own horizontal scroll only. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .pdp-recommendations {
    /* Important: this component lives inside the mobile column flex layout.
       The base rule's flex-basis:100% means 100% of the parent's HEIGHT in a
       column flex container, which stretches the recommendation box to the
       bottom of the product page. Mobile must size it by its content instead. */
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
    margin: 24px 8px 0;
    width: calc(100% - 16px);
    padding: 14px 8px 12px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
  }

  .pdp-recommendations-header {
    margin-bottom: 14px;
  }

  .pdp-recommendations-title {
    font-size: 15px;
  }

  .pdp-recommendations-more {
    font-size: 12px;
  }

  .pdp-recommendations-carousel {
    display: block;
    min-height: 0;
    height: auto !important;
  }

  .pdp-recommendations-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    min-height: 0;
  }

  .pdp-recommendations-viewport::-webkit-scrollbar {
    display: none;
  }

  .pdp-recommendations-track {
    gap: 8px;
    width: max-content;
    min-width: 100%;
    align-items: flex-start;
    transform: none !important;
    transition: none;
    height: auto !important;
    min-height: 0 !important;
  }

  .pdp-recommendations-track .product-card {
    /* JS supplies an exact pixel width on mobile. The viewport-based fallback
       prevents Safari from resolving percentage flex-basis against max-content. */
    flex: 0 0 var(--pdp-recommendation-card-width, calc((100vw - 48px) / 5)) !important;
    width: var(--pdp-recommendation-card-width, calc((100vw - 48px) / 5)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
    scroll-snap-align: start;
    box-sizing: border-box !important;
  }

  /* Mobile PDP recommendations: hide product badge stack for a cleaner 5-card layout.
     Scope is limited to the recommendation carousel; other product cards are unchanged. */
  .pdp-recommendations-track .product-badges-group {
    display: none !important;
  }

  .pdp-recommendations-track .product-card-image {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .pdp-recommendations-track .product-card-info {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 0 0 !important;
  }

  .pdp-recommendations-track .product-card-name {
    font-size: 9px;
    line-height: 1.35;
    margin-bottom: 3px;
  }

  .pdp-recommendations-track .product-card-info .product-spec-summary {
    display: none !important;
  }

  .pdp-recommendations-track .product-card-price {
    gap: 2px !important;
    margin-top: 0 !important;
    flex-wrap: wrap !important;
  }

  .pdp-recommendations-track .product-card-price .price-current {
    font-size: 9px;
    line-height: 1.3;
  }

  .pdp-recommendations-track .product-card-price .price-original,
  .pdp-recommendations-track .product-cart-button--mobile {
    display: none !important;
  }

  .pdp-recommendations-track .product-wishlist,
  .pdp-recommendations-track .product-cart-button--desktop {
    display: none !important;
  }

  .pdp-recommendations-arrow {
    display: none !important;
  }

  .pdp-recommendations-dots {
    margin-top: 13px;
  }

  .pdp-recommendation-skeleton-card {
    flex: 0 0 var(--pdp-recommendation-card-width, calc((100vw - 48px) / 5)) !important;
    width: var(--pdp-recommendation-card-width, calc((100vw - 48px) / 5)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
  }
}
\n\n/* ================================================================\n   CART FREE-SHIPPING UI FINAL FIX (20260812)\n   Matches the approved reference: wide glass drawer, stable footer,\n   compact truck icon and always-visible progress track.\n   No product/checkout UI is affected.\n   ================================================================ */\n.cart-drawer-body {\n  min-height: 0 !important;\n  flex: 1 1 auto !important;\n  overflow-y: auto !important;\n}\n\n.cart-drawer-footer {\n  flex: 0 0 auto !important;\n  min-width: 0 !important;\n}\n\n.cart-free-shipping-title {\n  display: flex !important;\n  align-items: center !important;\n}\n\n.cart-free-shipping-icon {\n  display: block !important;\n  flex: 0 0 26px !important;\n  width: 26px !important;\n  height: 26px !important;\n  max-width: 26px !important;\n  max-height: 26px !important;\n  min-width: 26px !important;\n  min-height: 26px !important;\n  overflow: visible !important;\n}\n\n.cart-free-shipping-track {\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  height: 12px !important;\n  overflow: hidden !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\n.cart-free-shipping-progress {\n  display: block !important;\n  position: absolute !important;\n  inset: 0 auto 0 0 !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: 100% !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\n/* Desktop reference: almost full-height/wide drawer. */\n@media (min-width: 1025px) {\n  .cart-drawer {\n    top: 14px !important;\n    right: 20px !important;\n    bottom: 14px !important;\n    width: min(790px, calc(100vw - 40px)) !important;\n    max-width: none !important;\n    border-radius: 34px !important;\n  }\n\n  .cart-drawer-header {\n    padding: 34px 42px 28px !important;\n  }\n\n  .cart-drawer-header h3 {\n    font-size: 40px !important;\n    line-height: 1.15 !important;\n  }\n\n  .cart-drawer-header p {\n    font-size: 18px !important;\n    margin-top: 10px !important;\n  }\n\n  .cart-drawer-body {\n    padding: 0 42px 8px !important;\n  }\n\n  .cart-item {\n    grid-template-columns: 174px minmax(0, 1fr) !important;\n    gap: 26px !important;\n    padding: 28px 0 !important;\n  }\n\n  .cart-item-image {\n    width: 174px !important;\n    height: 220px !important;\n    border-radius: 14px !important;\n  }\n\n  .cart-item-name { font-size: 24px !important; }\n  .cart-item-variant { font-size: 20px !important; margin-top: 10px !important; }\n  .cart-item-unit-price, .cart-item-subtotal { font-size: 20px !important; }\n\n  .cart-item-qty {\n    width: 272px !important;\n    height: 88px !important;\n    border-radius: 22px !important;\n  }\n  .cart-item-qty button { width: 76px !important; height: 86px !important; font-size: 28px !important; }\n  .cart-item-qty span { width: 120px !important; line-height: 86px !important; font-size: 24px !important; }\n\n  .cart-free-shipping {\n    margin: 0 0 26px !important;\n    padding: 24px 30px 22px !important;\n    border-radius: 24px !important;\n  }\n  .cart-free-shipping-title { gap: 16px !important; font-size: 25px !important; }\n  .cart-free-shipping-icon { flex-basis: 40px !important; width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; min-width: 40px !important; min-height: 40px !important; }\n  .cart-free-shipping-track { height: 22px !important; margin: 18px 0 16px !important; }\n  .cart-free-shipping-meta { font-size: 19px !important; }\n\n  .cart-drawer-footer { padding: 24px 42px 34px !important; }\n  .cart-footer-summary { margin-bottom: 22px !important; font-size: 19px !important; }\n  .cart-total { font-size: 19px !important; }\n  .cart-total #cartTotal { font-size: 30px !important; }\n  .cart-checkout-btn { height: 102px !important; font-size: 28px !important; }\n}\n\n/* Tablet: same structure, scaled down. */\n@media (min-width: 768px) and (max-width: 1024px) {\n  .cart-drawer {\n    top: 14px !important; right: 14px !important; bottom: 14px !important;\n    width: calc(100vw - 28px) !important; max-width: 720px !important;\n    border-radius: 30px !important;\n  }\n  .cart-drawer-header { padding: 28px 30px 22px !important; }\n  .cart-drawer-body { padding: 0 30px 8px !important; }\n  .cart-item { grid-template-columns: 130px minmax(0,1fr) !important; gap: 20px !important; }\n  .cart-item-image { width: 130px !important; height: 160px !important; }\n  .cart-drawer-footer { padding: 20px 30px 28px !important; }\n  .cart-free-shipping { padding: 20px 24px 18px !important; border-radius: 20px !important; }\n  .cart-free-shipping-title { font-size: 20px !important; }\n  .cart-free-shipping-track { height: 16px !important; }\n  .cart-free-shipping-meta { font-size: 15px !important; }\n}\n\n/* Mobile: reference fills almost the entire viewport instead of a 70vw side slice. */\n@media (max-width: 767px) {\n  .cart-drawer {\n    top: 10px !important;\n    right: 10px !important;\n    bottom: 10px !important;\n    width: calc(100vw - 20px) !important;\n    min-width: 0 !important;\n    max-width: none !important;\n    border-radius: 28px !important;\n  }\n\n  .cart-drawer-header { padding: 24px 22px 20px !important; }\n  .cart-drawer-header h3 { font-size: 32px !important; }\n  .cart-drawer-header p { font-size: 13px !important; margin-top: 7px !important; }\n  .cart-drawer-body { padding: 0 22px 6px !important; }\n\n  .cart-item {\n    grid-template-columns: 92px minmax(0, 1fr) !important;\n    gap: 14px !important;\n    padding: 18px 0 !important;\n  }\n  .cart-item-image { width: 92px !important; height: 118px !important; border-radius: 12px !important; }\n  .cart-item-name { font-size: 15px !important; }\n  .cart-item-variant { font-size: 13px !important; }\n  .cart-item-unit-price, .cart-item-subtotal { font-size: 13px !important; }\n  .cart-item-qty { width: 120px !important; height: 42px !important; border-radius: 12px !important; }\n  .cart-item-qty button { width: 34px !important; height: 40px !important; }\n  .cart-item-qty span { width: 48px !important; line-height: 40px !important; }\n\n  .cart-drawer-footer { padding: 14px 22px max(18px, env(safe-area-inset-bottom, 18px)) !important; }\n  .cart-free-shipping {\n    margin-bottom: 14px !important;\n    padding: 14px 16px 13px !important;\n    border-radius: 18px !important;\n  }\n  .cart-free-shipping-title { gap: 10px !important; font-size: 15px !important; }\n  .cart-free-shipping-icon { flex-basis: 26px !important; width: 26px !important; height: 26px !important; max-width: 26px !important; max-height: 26px !important; min-width: 26px !important; min-height: 26px !important; }\n  .cart-free-shipping-track { height: 11px !important; margin: 12px 0 10px !important; }\n  .cart-free-shipping-meta { font-size: 12px !important; }\n  .cart-footer-summary { margin-bottom: 12px !important; font-size: 12px !important; }\n  .cart-total { font-size: 12px !important; }\n  .cart-total #cartTotal { font-size: 22px !important; }\n  .cart-checkout-btn { height: 58px !important; font-size: 16px !important; }\n}\n
/* === MOBILE PDP RECOMMENDATION DISCOUNT BADGE — UNIFIED SIZE FIX === */
@media (max-width: 767px) {
  .pdp-recommendations-track .product-card-price .discount-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    box-sizing: border-box !important;
    padding: 6px 9px !important;
    border-radius: 6px !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
  }
}

/* ================================================================
   CHÆN PRODUCT DETAIL BANNER — artwork-only renderer
   The four supplied artworks are already composed, including all text.
   Preserve their native proportions and render edge-to-edge without overlays.
   ================================================================ */
.chaen-pdb-banner {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
  flex: 0 0 auto;
  line-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}
.chaen-pdb-banner-bg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  min-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
}
.pdp-product-banners {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.pdp-product-banners:empty { display: none; }

@media (max-width: 767px) {
  .pdp-product-banners { gap: 0; }
}

/* ================================================================
   PDP ADD-ON PRESENTATION / CART SYNC UI (20260815)
   Minimal override: keeps the existing promotion/cart data flow and only
   changes the customer-facing add-on presentation and desktop extra button.
   ================================================================ */

/* Desktop: the main PDP Add to Cart button is the only cart action.
   Add-on selection is made by checkbox/quantity inside the add-on card. */
.product-detail.pdp-desktop .pd-addon-add-btn {
  display: none !important;
}

@media (max-width: 767px) {
  /* Reference-style mobile add-on card: checkbox → image → product info. */
  .m-pdp-addon-card {
    display: grid !important;
    grid-template-columns: 28px 72px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    margin: 0 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f3f0ec !important;
  }

  .m-pdp-addon-checkbox {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 8px 0 0 !important;
    justify-self: center !important;
  }

  .m-pdp-addon-img {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 72px !important;
    height: 92px !important;
    border-radius: 0 !important;
    background: #ebe7e2 !important;
  }

  .m-pdp-addon-info {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .m-pdp-addon-name {
    font-size: 14px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-bottom: 4px !important;
  }

  .m-pdp-addon-price {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }

  .m-pdp-addon-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 8px !important;
  }

  .m-pdp-addon-select {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    box-sizing: border-box !important;
    padding: 0 32px 0 12px !important;
    border: 1px solid #d8cec3 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #2b2724 !important;
    font: inherit !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
  }

  .m-pdp-addon-qty {
    position: static !important;
    width: 100% !important;
    height: 42px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #d8cec3 !important;
    border-radius: 6px !important;
    background: #fff !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
  }

  .m-pdp-addon-qty button {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  .m-pdp-addon-qty span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
  }

  .m-pdp-addon-limit {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #9a8e84 !important;
  }

  /* Keep the reference-style expand row compact and aligned to the same
     32px content rail as options, quantity and purchase buttons. */
  .m-pdp-addon-header {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 0 !important;
  }

  .m-pdp-addon-list {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* CHÆN C2C 7-day return workflow: scoped additions only */
.return-page-container{max-width:880px;margin:0 auto;padding:48px 24px}
.return-page-wide{max-width:980px}
.return-page-heading{margin-bottom:24px}
.return-page-heading h2{margin:0 0 8px;font-size:26px;font-weight:600}
.return-page-heading p,.return-muted{margin:0;color:var(--text-muted);font-size:14px}
.return-back-link{border:0;background:none;padding:0 0 14px;color:var(--accent);cursor:pointer;font-size:13px}
.return-complete-icon{width:64px;height:64px;border-radius:50%;background:#fff5e6;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:30px;color:#c38d35}
.return-page-container{text-align:left}
#returnCompletePage .return-page-container{text-align:center;max-width:720px}
.return-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.return-info-card,.return-section-card,.return-action-card,.return-progress-card{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:14px;padding:20px;margin-bottom:16px}
.return-section-card,.return-action-card,.return-progress-card{background:var(--bg-primary,#fff)}
.return-section-title{font-size:16px;font-weight:600;margin-bottom:16px}
.return-order-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.return-member-application-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--bg-secondary);font-size:13px}.return-member-application-row strong{font-weight:600}
.return-order-summary-grid div{padding:12px;background:var(--bg-secondary);border-radius:10px;min-width:0}
.return-order-summary-grid span{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px}
.return-order-summary-grid strong{display:block;font-size:14px;overflow-wrap:anywhere}
.return-items-container{display:flex;flex-direction:column;gap:10px}
.return-item-card{display:grid;grid-template-columns:28px 64px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--border-light);border-radius:12px;padding:12px;transition:border-color .2s,background .2s}
.return-item-card.is-selected{border-color:var(--accent);background:rgba(180,160,130,.06)}
.return-item-card.is-disabled{opacity:.55}
.return-item-select{display:flex;align-items:center;justify-content:center;cursor:pointer}
.return-item-select input{width:18px;height:18px;margin:0}
.return-item-image{width:64px;height:64px;border-radius:9px;object-fit:cover;background:var(--bg-secondary)}
.return-item-name{font-weight:600;font-size:14px;line-height:1.5}
.return-item-meta{font-size:12px;color:var(--text-muted);margin-top:3px}
.return-item-price{font-size:13px;margin-top:6px}
.return-item-quantity{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px;color:var(--text-muted)}
.return-item-qty{width:76px;padding:7px 8px;border:1px solid var(--border-light);border-radius:8px;background:var(--bg-primary,#fff)}
.return-reason-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 48px;margin-top:4px}
.return-reason-option{display:flex;align-items:center;gap:12px;font-size:16px;cursor:pointer;min-height:34px}
.return-reason-option input{appearance:none;width:26px;height:26px;border:1.5px solid var(--border-light);border-radius:50%;background:#fff;margin:0;display:grid;place-items:center;flex:0 0 auto}
.return-reason-option input::after{content:'';width:12px;height:12px;border-radius:50%;background:#2b2927;transform:scale(0);transition:transform .15s ease}
.return-reason-option input:checked{border-color:#2b2927}
.return-reason-option input:checked::after{transform:scale(1)}
.return-form-group{margin-bottom:14px}
.return-form-group label{display:block;font-size:13px;margin-bottom:7px}
.return-form-group select,.return-form-group textarea,.return-input{width:100%;padding:11px 12px;border:1px solid var(--border-light);border-radius:9px;background:var(--bg-primary,#fff);font:inherit;box-sizing:border-box}
.return-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.return-method-card{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--border-light);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s;background:var(--bg-primary,#fff)}
.return-method-card.is-selected{border-color:var(--accent);background:rgba(180,160,130,.06)}
.return-method-card input{width:18px;height:18px;margin:0}
.return-method-card-main{display:flex;flex-direction:column;gap:3px}
.return-method-card-main strong{font-size:15px}
.return-method-card-main span{font-size:12px;color:var(--text-muted)}
.return-method-indicator{margin-left:auto;width:10px;height:10px;border-radius:50%;border:1px solid var(--border-light)}
.return-method-card.is-selected .return-method-indicator{background:var(--accent);border-color:var(--accent)}
.return-notice-list{margin:0;padding-left:20px;line-height:1.8;font-size:13px;color:var(--text-secondary,var(--text-muted))}
.return-description-counter{text-align:right;color:var(--text-muted);font-size:12px;margin-top:4px}.return-setting-notice{margin-top:12px;padding:12px;background:#fffaf2;border-radius:10px;font-size:13px;line-height:1.8;white-space:pre-wrap}
.return-button-row{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:18px}
.return-button-row-center{justify-content:center}
.return-button-row .btn{min-height:44px}
.return-loading{color:var(--text-muted);text-align:center}
.return-error{color:#a15346;background:#fff7f5}
.return-progress-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;margin-bottom:14px}
.return-progress-head>div{display:flex;flex-direction:column;gap:4px}
.return-progress-head strong{font-size:20px}
.return-status-pill{padding:7px 12px;border-radius:999px;background:#f6f1e7;color:#8a6c37;font-size:13px;white-space:nowrap}
.return-progress-timeline{display:flex;flex-direction:column;gap:0}
.return-progress-step{display:flex;align-items:center;gap:10px;min-height:38px;color:var(--text-muted);font-size:13px}
.return-progress-step .return-progress-dot{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-secondary);font-size:11px}
.return-progress-step.is-done,.return-progress-step.is-active{color:var(--text-primary,#222);font-weight:500}
.return-progress-step.is-done .return-progress-dot{background:#e9f6ee;color:#347650}
.return-progress-step.is-active .return-progress-dot{background:var(--accent);color:#fff}
.return-guide-center{max-width:760px;margin:0 auto}
.return-guide-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.return-guide-step{display:flex;align-items:center;gap:14px;border:1px solid var(--border-light);border-radius:12px;padding:14px;background:var(--bg-primary,#fff)}
.return-guide-step span{font-size:12px;color:var(--text-muted);min-width:54px}
.return-guide-step strong{font-size:14px}
.return-guide-richtext{line-height:1.9;font-size:13px;overflow-wrap:anywhere}
.return-guide-richtext img{max-width:100%;height:auto;border-radius:10px}
.return-refund-option{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border-light);border-radius:10px;padding:12px;margin:8px 0;cursor:pointer}
.return-refund-option input{margin-right:6px}
.return-refund-option span{font-size:12px;color:var(--text-muted);padding-left:24px}
.return-bank-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.return-bank-review{margin:10px 0;padding:12px;border:1px solid var(--border-color,#e5e7eb);border-radius:10px;line-height:1.8;font-size:13px;background:var(--surface-soft,#fafafa)}
.return-bank-review strong{font-weight:700}

.return-action-card h3{font-size:15px;margin:0 0 8px}
.return-action-card p{font-size:13px;line-height:1.8;margin:5px 0;color:var(--text-secondary,var(--text-muted))}
.return-confirm-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-muted);margin:10px 0 14px;line-height:1.6}
.return-confirm-check input{margin-top:3px}

@media (max-width:767px){
  .return-page-container{padding:32px 16px}
  .return-page-heading h2{font-size:22px}
  .return-order-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .return-method-grid{grid-template-columns:1fr}
  .return-item-card{grid-template-columns:28px 56px minmax(0,1fr);align-items:start}
  .return-item-image{width:56px;height:56px}
  .return-item-quantity{grid-column:3;align-items:flex-start;margin-top:4px}
  .return-item-qty{width:90px}
  .return-button-row{flex-direction:column-reverse;align-items:stretch}
  .return-button-row .btn{width:100%;justify-content:center}
  .return-progress-head{align-items:flex-start;flex-direction:column}
  .return-bank-grid{grid-template-columns:1fr}
}

/* C2C whole-order return: informational notice only; existing return UI remains unchanged. */
.return-whole-order-notice{margin-bottom:12px;padding:10px 12px;border-radius:8px;background:var(--surface-secondary,#f6f3ee);color:var(--text-secondary,#666);font-size:13px;line-height:1.7;}

@media (max-width: 767px){
  .return-reason-grid{grid-template-columns:1fr;gap:12px}
}

/* C2C return request form: match supplied reference layout/content without changing global UI */
.return-card-heading{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:600;margin-bottom:22px}
.return-card-heading-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:#171513;flex:0 0 auto}
.return-order-card{padding:28px}
.return-order-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.9fr);gap:34px;align-items:start}
.return-product-summary{min-width:0}
.return-product-summary .return-items-container{display:block}
.return-product-summary .return-whole-order-notice{display:none}
.return-product-summary .return-item-card{border:0;border-radius:0;padding:0;display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;align-items:start}
.return-product-summary .return-item-image{width:128px;height:140px;border-radius:10px}
.return-product-summary .return-item-main{padding-top:4px}
.return-product-summary .return-item-name{font-size:20px;font-weight:500;line-height:1.5}
.return-product-summary .return-item-meta{font-size:15px;margin-top:10px;color:var(--text-primary,#222)}
.return-product-summary .return-item-price{font-size:16px;margin-top:14px}
.return-product-summary .return-item-quantity{display:none}
.return-order-meta{display:flex;flex-direction:column;gap:18px;padding-top:4px}
.return-order-meta>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:baseline}
.return-order-meta span{font-size:14px;color:var(--text-primary,#222)}
.return-order-meta strong{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.return-member-application-row{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--border-light);margin-top:22px;padding-top:22px;font-size:18px}
.return-member-application-row>strong:last-child{padding:12px 20px;border-radius:999px;background:#f5eee5;color:#7b5c39;font-size:16px;font-weight:500}
.return-section-card>.return-card-heading{margin-bottom:22px}
.return-reason-grid{gap:18px 48px}
.return-reason-option{font-size:18px;min-height:36px}
.return-reason-option input{width:28px;height:28px}
.return-reason-option input::after{width:13px;height:13px}
.return-method-card{min-height:170px;padding:24px 28px;border-radius:12px;gap:20px}
.return-method-card-main{gap:8px}
.return-method-card-main strong{font-size:20px;font-weight:500}
.return-method-card-main span{font-size:15px;line-height:1.8;color:var(--text-primary,#222)}
.return-method-indicator{width:28px;height:28px;border-radius:50%;border:1.5px solid #cfc8bf;position:relative;flex:0 0 auto}
.return-method-card.is-selected .return-method-indicator{background:#fff;border-color:#2b2927}
.return-method-card.is-selected .return-method-indicator::after{content:'';position:absolute;inset:6px;border-radius:50%;background:#2b2927}
.return-notice-list{display:grid;grid-template-columns:1fr 1fr;column-gap:52px;row-gap:8px;padding-left:0;list-style:none;font-size:15px;line-height:1.8}
.return-notice-list li{position:relative;padding-left:28px}
.return-notice-list li::before{content:'✓';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#d8d3cc;color:#fff;font-size:12px;line-height:20px;text-align:center}
.return-button-row-image-match{justify-content:center;gap:26px;margin-top:22px}
.return-button-row-image-match .btn{min-height:76px;border-radius:999px;padding:0 44px;font-size:20px;min-width:350px;display:flex;align-items:center;justify-content:center;gap:8px}
.return-button-row-image-match .btn-outline span{display:block;font-size:13px;color:var(--text-muted);margin-left:4px}
.return-button-row-image-match .btn-primary{background:#272522;color:#fff}
@media (max-width:767px){
  .return-order-layout{grid-template-columns:1fr;gap:22px}
  .return-product-summary .return-item-card{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .return-product-summary .return-item-image{width:88px;height:100px}
  .return-product-summary .return-item-name{font-size:17px}
  .return-order-meta{gap:12px}
  .return-notice-list{grid-template-columns:1fr;gap:8px}
  .return-button-row-image-match .btn{min-width:0;width:100%;min-height:64px}
}

/* CHÆN C2C return request — reference visual match
   Scoped to the return request page only. */
#returnRequestPage{
  background:#f9f8f5;
  color:#2b2927;
}
#returnRequestPage .return-page-container{
  max-width:950px;
  padding:34px 0 48px;
}
#returnRequestPage .return-page-heading{
  margin:0 0 22px;
}
#returnRequestPage .return-page-heading h2{
  font-size:26px;
  line-height:1.35;
  font-weight:600;
  color:#2b2927;
}
#returnRequestPage .return-section-card{
  background:#fff;
  border:1px solid #ebe7e2;
  border-radius:16px;
  box-shadow:none;
  padding:28px;
  margin-bottom:16px;
}
#returnRequestPage .return-card-heading{
  color:#2b2927;
  font-size:20px;
  line-height:1.4;
  font-weight:600;
}
#returnRequestPage .return-card-heading-icon{
  color:#2b2927;
}
#returnRequestPage .return-method-heading{
  align-items:center;
}
#returnRequestPage .return-card-heading-note{
  margin-left:4px;
  font-size:14px;
  font-weight:400;
  color:#9b8e82;
}
#returnRequestPage .return-product-summary .return-item-card{
  background:transparent;
  border:0;
  box-shadow:none;
  grid-template-columns:128px minmax(0,1fr);
  gap:24px;
}
#returnRequestPage .return-product-summary .return-item-image{
  width:128px;
  height:140px;
  border-radius:10px;
  background:#f3f0ec;
  object-fit:cover;
}
#returnRequestPage .return-product-summary .return-item-name{
  color:#2b2927;
  font-size:20px;
  font-weight:500;
}
#returnRequestPage .return-product-summary .return-item-meta{
  color:#2b2927;
  font-size:15px;
}
#returnRequestPage .return-product-summary .return-item-price{
  color:#2b2927;
  font-size:16px;
}
#returnRequestPage .return-order-meta span{
  color:#9b8e82;
  font-size:14px;
}
#returnRequestPage .return-order-meta strong{
  color:#2b2927;
  font-size:16px;
}
#returnRequestPage .return-member-application-row{
  border-top:1px solid #ebe7e2;
  color:#2b2927;
  font-size:18px;
}
#returnRequestPage .return-member-application-row>strong:last-child{
  background:#f5eee5;
  color:#7b5c39;
}
#returnRequestPage .return-reason-option{
  color:#2b2927;
  font-size:17px;
}
#returnRequestPage .return-reason-option input{
  border-color:#d9d2cb;
}
#returnRequestPage .return-reason-option input:checked{
  border-color:#2b2927;
}
#returnRequestPage .return-reason-option input::after{
  background:#2b2927;
}
#returnRequestPage .return-method-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
#returnRequestPage .return-method-card{
  min-height:168px;
  padding:24px 28px;
  border:1px solid #e6dfd8;
  border-radius:14px;
  background:#fff;
  box-shadow:none;
}
#returnRequestPage .return-method-card.is-selected{
  border-color:#b59a84;
  background:#fff;
}
#returnRequestPage .return-method-card-main strong{
  color:#2b2927;
  font-size:18px;
  font-weight:500;
}
#returnRequestPage .return-method-card-main span{
  color:#2b2927;
  font-size:15px;
  line-height:1.8;
}
#returnRequestPage .return-method-indicator{
  width:28px;
  height:28px;
  border:1.5px solid #d1cbc4;
}
#returnRequestPage .return-method-card.is-selected .return-method-indicator{
  border-color:#b59a84;
  background:#fff;
}
#returnRequestPage .return-method-card.is-selected .return-method-indicator::after{
  background:#2b2927;
}
#returnRequestPage .return-notice-list{
  color:#55514d;
  font-size:15px;
  line-height:1.9;
  column-gap:52px;
  row-gap:8px;
}
#returnRequestPage .return-notice-list li::before{
  background:#d8d3cc;
}
#returnRequestPage .return-button-row-image-match{
  gap:26px;
  margin-top:22px;
}
#returnRequestPage .return-button-row-image-match .btn{
  min-width:350px;
  min-height:76px;
  border-radius:999px;
  font-size:20px;
}
#returnRequestPage .return-button-row-image-match .btn-outline{
  background:#fff;
  border:1px solid #8f8983;
  color:#2b2927;
}
#returnRequestPage .return-button-row-image-match .btn-outline span{
  color:#9b8e82;
}
#returnRequestPage .return-button-row-image-match .btn-primary{
  background:#272522;
  border-color:#272522;
  color:#fff;
}
@media (max-width:767px){
  #returnRequestPage .return-page-container{
    max-width:none;
    padding:24px 16px 36px;
  }
  #returnRequestPage .return-section-card{
    padding:20px;
    border-radius:14px;
  }
  #returnRequestPage .return-method-heading{
    flex-wrap:wrap;
  }
  #returnRequestPage .return-card-heading-note{
    width:100%;
    margin:0 0 0 38px;
  }
  #returnRequestPage .return-product-summary .return-item-card{
    grid-template-columns:88px minmax(0,1fr);
    gap:16px;
  }
  #returnRequestPage .return-product-summary .return-item-image{
    width:88px;
    height:100px;
  }
  #returnRequestPage .return-method-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  #returnRequestPage .return-method-card{
    min-height:140px;
    padding:20px;
  }
  #returnRequestPage .return-notice-list{
    grid-template-columns:1fr;
  }
  #returnRequestPage .return-button-row-image-match{
    flex-direction:column-reverse;
  }
  #returnRequestPage .return-button-row-image-match .btn{
    width:100%;
    min-width:0;
    min-height:64px;
  }
}


/* CHÆN C2C return request — modal presentation fix 2026-08-19 */







/* CHÆN C2C return request — final UI-only patch 2026-08-19 */
#returnRequestPage .return-page-heading-hidden{display:none}
#returnRequestPage .return-page-container{max-width:960px;padding:32px 0 40px}
#returnRequestPage .return-section-card{padding:28px 30px;border-radius:15px;margin-bottom:16px}
#returnRequestPage .return-card-heading{font-size:20px;line-height:1.4;margin-bottom:22px;gap:10px}
#returnRequestPage .return-card-heading-icon{width:28px;height:28px;object-fit:contain;font-size:0}
#returnRequestPage .return-order-layout{grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr);gap:42px}
#returnRequestPage .return-product-summary .return-item-card{grid-template-columns:136px minmax(0,1fr);gap:24px}
#returnRequestPage .return-product-summary .return-item-image{width:136px;height:140px;border-radius:10px}
#returnRequestPage .return-product-summary .return-item-name{font-size:20px;font-weight:500;line-height:1.5}
#returnRequestPage .return-product-summary .return-item-meta{font-size:15px;margin-top:12px}
#returnRequestPage .return-product-summary .return-item-price{font-size:16px;margin-top:14px}
#returnRequestPage .return-order-meta{gap:18px;padding-top:4px}
#returnRequestPage .return-order-meta>div{grid-template-columns:110px minmax(0,1fr);gap:12px}
#returnRequestPage .return-order-meta span{font-size:14px;color:#2b2927}
#returnRequestPage .return-order-meta strong{font-size:16px;font-weight:500}
#returnRequestPage .return-member-application-row{margin-top:22px;padding:22px 0 0;border-top:1px solid #ebe7e2;background:transparent;border-radius:0;font-size:18px}
#returnRequestPage .return-member-application-row>span{font-weight:500}
#returnRequestPage .return-reason-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 80px;margin-top:0}
#returnRequestPage .return-reason-option{font-size:17px;min-height:36px;gap:12px}
#returnRequestPage .return-reason-option input{width:28px;height:28px;border:0;background:url('/images/return-ui/radio-empty.svg') center/contain no-repeat}
#returnRequestPage .return-reason-option input::after{display:none}
#returnRequestPage .return-reason-option input:checked{border:0;background:url('/images/return-ui/radio-selected.svg') center/contain no-repeat}
#returnRequestPage .return-form-group{margin-top:22px;margin-bottom:0}
#returnRequestPage .return-form-group label{font-size:16px;margin-bottom:10px}
#returnRequestPage .return-form-group textarea{min-height:112px;padding:14px 16px;border:1px solid #cfc8c1;border-radius:10px;resize:vertical;line-height:1.6;font-size:15px;box-shadow:none}
#returnRequestPage .return-description-counter{font-size:14px;margin-top:-24px;margin-right:12px;position:relative;pointer-events:none}
#returnRequestPage .return-method-heading{align-items:center}
#returnRequestPage .return-card-heading-note{font-size:14px;color:#9b8e82;margin-left:4px}
#returnRequestPage .return-method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#returnRequestPage .return-method-card{min-height:202px;padding:24px 28px;border:1px solid #e4ddd6;border-radius:13px;background:#fff;box-shadow:none;display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative;overflow:hidden}
#returnRequestPage .return-method-card.is-selected{border-color:#b59a84;background:#fffaf5}
#returnRequestPage .return-method-card input{position:absolute;inset:auto auto 14px 14px;width:1px;height:1px;opacity:0;pointer-events:none}
#returnRequestPage .return-method-card-top{display:flex;align-items:center;gap:18px;min-height:54px;padding-right:34px}
#returnRequestPage .return-method-logo{display:block;object-fit:contain;flex:0 0 auto}
#returnRequestPage .return-method-logo-711{width:76px;height:76px}
#returnRequestPage .return-method-logo-family{width:92px;height:76px}
#returnRequestPage .return-method-card-top>strong{font-size:20px;font-weight:500;color:#2b2927}
#returnRequestPage .return-method-card-main{margin-top:18px}
#returnRequestPage .return-method-description{display:flex;align-items:flex-start;gap:12px;color:#2b2927;font-size:15px;line-height:1.85}
#returnRequestPage .return-method-description img{width:28px;height:28px;object-fit:contain;flex:0 0 auto;margin-top:1px}
#returnRequestPage .return-method-indicator{position:absolute;right:22px;top:28px;transform:none;width:28px;height:28px;border:0;background:url('/images/return-ui/radio-empty.svg') center/contain no-repeat;flex:0 0 auto}
#returnRequestPage .return-method-card.is-selected .return-method-indicator{border:0;background:url('/images/return-ui/radio-selected.svg') center/contain no-repeat}
#returnRequestPage .return-method-selected-check{display:none;position:absolute;right:-1px;top:-1px;width:31px;height:31px;background:url('/images/return-ui/selected-check.svg') center/contain no-repeat}
#returnRequestPage .return-method-card.is-selected .return-method-selected-check{display:block}
#returnRequestPage .return-notice-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:56px;row-gap:8px;padding:0;list-style:none;color:#55514d;font-size:15px;line-height:1.85}
#returnRequestPage .return-notice-list li{position:relative;padding-left:30px}
#returnRequestPage .return-notice-list li::before{content:'';position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:url('/images/return-ui/notice-check.svg') center/contain no-repeat}
#returnRequestPage .return-button-row-image-match{justify-content:center;gap:22px;margin-top:22px}
#returnRequestPage .return-button-row-image-match .btn{min-width:0;width:calc(50% - 11px);min-height:70px;border-radius:10px;padding:0 24px;font-size:20px;display:flex;align-items:center;justify-content:center;gap:0}
#returnRequestPage .return-button-row-image-match .btn-outline{background:#fff;border:1px solid #9b948e;color:#2b2927;flex-direction:column;line-height:1.2}
#returnRequestPage .return-button-row-image-match .btn-outline span{display:block;margin:6px 0 0;font-size:14px;color:#9b8e82}
#returnRequestPage .return-button-row-image-match .btn-primary{background:#272522;border-color:#272522;color:#fff}

@media (max-width:767px){
  #returnRequestPage .return-page-container{max-width:none;padding:22px 16px 32px}
  #returnRequestPage .return-section-card{padding:20px;border-radius:14px}
  #returnRequestPage .return-order-layout{grid-template-columns:1fr;gap:22px}
  #returnRequestPage .return-product-summary .return-item-card{grid-template-columns:88px minmax(0,1fr);gap:16px}
  #returnRequestPage .return-product-summary .return-item-image{width:88px;height:100px}
  #returnRequestPage .return-product-summary .return-item-name{font-size:17px}
  #returnRequestPage .return-order-meta{gap:12px;padding-top:0}
  #returnRequestPage .return-reason-grid{grid-template-columns:1fr;gap:12px}
  #returnRequestPage .return-method-heading{flex-wrap:wrap}
  #returnRequestPage .return-card-heading-note{width:100%;margin:0 0 0 38px}
  #returnRequestPage .return-method-grid{grid-template-columns:1fr;gap:12px}
  #returnRequestPage .return-method-card{min-height:178px;padding:20px}
  #returnRequestPage .return-method-logo-711{width:66px;height:66px}
  #returnRequestPage .return-method-logo-family{width:80px;height:66px}
  #returnRequestPage .return-notice-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:8px}
  #returnRequestPage .return-button-row-image-match{flex-direction:column-reverse;gap:12px}
  #returnRequestPage .return-button-row-image-match .btn{width:100%;min-height:64px}
}


/* Return request modal responsive behavior */
@media (max-width:767px){


}


/* CHÆN return request modal — centered compact dialog / close fix 2026-08-19 */



#returnRequestPage #returnEligibilityLoading{display:none !important}
#returnRequestPage .return-page-heading-hidden{display:none !important}
#returnRequestPage .return-section-card{
  padding:20px;
  margin-bottom:12px;
  border-radius:12px;
}
#returnRequestPage .return-card-heading{font-size:18px;margin-bottom:16px}
#returnRequestPage .return-card-heading-icon{width:24px;height:24px}
#returnRequestPage .return-product-summary .return-item-card{grid-template-columns:96px minmax(0,1fr);gap:16px}
#returnRequestPage .return-product-summary .return-item-image{width:96px;height:104px;border-radius:9px}
#returnRequestPage .return-product-summary .return-item-name{font-size:17px}
#returnRequestPage .return-product-summary .return-item-meta{font-size:14px;margin-top:8px}
#returnRequestPage .return-product-summary .return-item-price{font-size:14px;margin-top:8px}
#returnRequestPage .return-order-layout{grid-template-columns:minmax(0,1.2fr) minmax(220px,.9fr);gap:24px}
#returnRequestPage .return-order-meta{gap:12px;padding-top:2px}
#returnRequestPage .return-order-meta>div{grid-template-columns:76px minmax(0,1fr);gap:8px}
#returnRequestPage .return-order-meta span{font-size:12px}
#returnRequestPage .return-order-meta strong{font-size:13px}
#returnRequestPage .return-member-application-row{margin-top:16px;padding-top:14px;font-size:15px}
#returnRequestPage .return-reason-grid{gap:10px 42px}
#returnRequestPage .return-reason-option{font-size:14px;min-height:30px;gap:10px}
#returnRequestPage .return-reason-option input{width:22px;height:22px}
#returnRequestPage .return-method-grid{gap:12px}
#returnRequestPage .return-method-card{min-height:140px;padding:18px 20px;border-radius:11px}
#returnRequestPage .return-method-card-top{gap:12px;min-height:44px}
#returnRequestPage .return-method-logo-711{width:58px;height:58px}
#returnRequestPage .return-method-logo-family{width:70px;height:58px}
#returnRequestPage .return-method-card-top>strong{font-size:17px}
#returnRequestPage .return-method-card-main{margin-top:12px}
#returnRequestPage .return-method-description{gap:8px;font-size:12px;line-height:1.7}
#returnRequestPage .return-method-description img{width:20px;height:20px}
#returnRequestPage .return-method-indicator{right:14px;top:22px;width:22px;height:22px}
#returnRequestPage .return-method-selected-check{width:26px;height:26px}
#returnRequestPage .return-notice-list{font-size:12px;line-height:1.7;column-gap:28px;row-gap:5px}
#returnRequestPage .return-notice-list li{padding-left:23px}
#returnRequestPage .return-notice-list li::before{top:3px;width:16px;height:16px}
#returnRequestPage .return-button-row-image-match{gap:12px;margin-top:14px}
#returnRequestPage .return-button-row-image-match .btn{width:calc(50% - 6px);min-width:0;min-height:50px;border-radius:9px;padding:0 14px;font-size:15px}
#returnRequestPage .return-button-row-image-match .btn-outline span{margin-top:3px;font-size:11px}

@media (max-width:767px){


  #returnRequestPage .return-section-card{padding:16px;margin-bottom:10px}
  #returnRequestPage .return-order-layout{grid-template-columns:1fr;gap:16px}
  #returnRequestPage .return-product-summary .return-item-card{grid-template-columns:76px minmax(0,1fr);gap:12px}
  #returnRequestPage .return-product-summary .return-item-image{width:76px;height:84px}
  #returnRequestPage .return-reason-grid{grid-template-columns:1fr;gap:8px}
  #returnRequestPage .return-method-grid{grid-template-columns:1fr}
  #returnRequestPage .return-notice-list{grid-template-columns:1fr;grid-auto-flow:row}
  #returnRequestPage .return-button-row-image-match{flex-direction:column-reverse;gap:8px}
  #returnRequestPage .return-button-row-image-match .btn{width:100%;min-height:48px}
}


/* CHÆN return request — reference UI alignment (2026-08-20)
   Scoped only to #returnRequestPage; no global/header styles are changed. */



#returnRequestPage .return-modal-brand {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 10px;
  line-height: 1;
  color: #171513;
}
#returnRequestPage .return-section-card {
  margin-bottom: 16px;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid #e9e2db;
  border-radius: 14px;
  box-shadow: none;
}
#returnRequestPage .return-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
  color: #171513;
}
#returnRequestPage .return-card-heading-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}
#returnRequestPage .return-order-layout {
  grid-template-columns: minmax(0,1.25fr) minmax(280px,.9fr);
  gap: 38px;
}
#returnRequestPage .return-product-summary .return-item-card {
  grid-template-columns: 128px minmax(0,1fr);
  gap: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  align-items: start;
}
#returnRequestPage .return-product-summary .return-item-image {
  width: 128px;
  height: 140px;
  border-radius: 10px;
  object-fit: cover;
}
#returnRequestPage .return-product-summary .return-item-name {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #171513;
}
#returnRequestPage .return-product-summary .return-item-meta {
  margin-top: 10px;
  font-size: 15px;
  color: #2b2927;
}
#returnRequestPage .return-product-summary .return-item-price {
  margin-top: 14px;
  font-size: 16px;
  color: #2b2927;
}
#returnRequestPage .return-order-meta {
  gap: 18px;
  padding-top: 4px;
}
#returnRequestPage .return-order-meta > div {
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
}
#returnRequestPage .return-order-meta span {
  font-size: 14px;
  color: #2b2927;
}
#returnRequestPage .return-order-meta strong {
  font-size: 16px;
  font-weight: 500;
  color: #171513;
}
#returnRequestPage .return-member-application-row {
  margin-top: 22px;
  padding: 22px 0 0;
  border-top: 1px solid #ebe5df;
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  color: #171513;
}
#returnRequestPage .return-member-application-row > span { font-weight: 500; }

/* Reason options: explicit 3-row / 2-column order matching the reference. */
#returnRequestPage .return-reason-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 16px 80px;
  margin-top: 0;
}
#returnRequestPage .return-reason-option {
  display: flex;
  align-items: center;
  min-height: 36px;
  gap: 12px;
  padding: 2px 0;
  font-size: 17px;
  line-height: 1.4;
  color: #171513;
  cursor: pointer;
  user-select: none;
}
#returnRequestPage .return-reason-option input {
  appearance: none;
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  flex: 0 0 25px;
  border: 1.5px solid #cfc7bf;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-sizing: border-box;
}
#returnRequestPage .return-reason-option input::after {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #171513;
  transform: scale(0);
}
#returnRequestPage .return-reason-option input:checked {
  border-color: #171513;
}
#returnRequestPage .return-reason-option input:checked::after { transform: scale(1); }
#returnRequestPage .return-reason-option.is-selected { color: #171513; }
#returnRequestPage .return-form-group {
  margin-top: 22px;
}
#returnRequestPage .return-form-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  color: #171513;
}
#returnRequestPage .return-form-group textarea {
  min-height: 112px;
  padding: 14px 16px;
  border: 1px solid #cfc8c1;
  border-radius: 10px;
  background: #fff;
  resize: vertical;
  line-height: 1.6;
  font-size: 15px;
  color: #171513;
  box-shadow: none;
}
#returnRequestPage .return-description-counter {
  margin-top: -25px;
  margin-right: 12px;
  position: relative;
  text-align: right;
  font-size: 14px;
  color: #77716b;
  pointer-events: none;
}

#returnRequestPage .return-method-heading { align-items: center; }
#returnRequestPage .return-card-heading-note {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #9b8e82;
}
#returnRequestPage .return-method-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
#returnRequestPage .return-method-card {
  min-height: 202px;
  padding: 24px 28px;
  border: 1px solid #e4ddd6;
  border-radius: 13px;
  background: #fff;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
  overflow: hidden;
}
#returnRequestPage .return-method-card.is-selected {
  border-color: #b59a84;
  background: #fffaf5;
}
#returnRequestPage .return-method-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#returnRequestPage .return-method-card-top {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding-right: 38px;
}
#returnRequestPage .return-method-logo {
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
#returnRequestPage .return-method-logo-711 { width: 76px; height: 76px; }
#returnRequestPage .return-method-logo-family { width: 92px; height: 76px; }
#returnRequestPage .return-method-card-top > strong {
  font-size: 20px;
  font-weight: 500;
  color: #171513;
}
#returnRequestPage .return-method-card-main { margin-top: 18px; }
#returnRequestPage .return-method-description {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #2b2927;
  font-size: 15px;
  line-height: 1.85;
}
#returnRequestPage .return-method-description img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  margin-top: 1px;
}
#returnRequestPage .return-method-indicator {
  position: absolute;
  right: 22px;
  top: 28px;
  width: 25px;
  height: 25px;
  margin: 0;
  border: 1.5px solid #cfc7bf;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}
#returnRequestPage .return-method-card.is-selected .return-method-indicator {
  border-color: #171513;
  background: #fff;
}
#returnRequestPage .return-method-card.is-selected .return-method-indicator::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #171513;
  transform: translate(-50%,-50%);
}
#returnRequestPage .return-method-selected-check {
  display: none;
  position: absolute;
  right: -1px;
  top: -1px;
  width: 31px;
  height: 31px;
  background: url('/images/return-ui/selected-check.svg') center/contain no-repeat;
}
#returnRequestPage .return-method-card.is-selected .return-method-selected-check { display: block; }

#returnRequestPage .return-notice-list {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 56px;
  row-gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: #55514d;
  font-size: 15px;
  line-height: 1.85;
}
#returnRequestPage .return-notice-list li {
  position: relative;
  padding-left: 30px;
}
#returnRequestPage .return-notice-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url('/images/return-ui/notice-check.svg') center/contain no-repeat;
}
#returnRequestPage .return-button-row-image-match {
  justify-content: center;
  gap: 22px;
  margin-top: 22px;
}
#returnRequestPage .return-button-row-image-match .btn {
  width: calc(50% - 11px);
  min-width: 0;
  min-height: 62px;
  border-radius: 999px;
  padding: 0 24px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#returnRequestPage .return-button-row-image-match .btn-outline {
  background: #fff;
  border: 1px solid #9b948e;
  color: #6d5a4b;
}
#returnRequestPage .return-button-row-image-match .btn-outline span { display: none; }
#returnRequestPage .return-button-row-image-match .btn-primary {
  background: #5f5046;
  border-color: #5f5046;
  color: #fff;
}

@media (max-width: 767px) {


  #returnRequestPage .return-modal-brand {
    margin-bottom: 14px;
    font-size: 32px;
    letter-spacing: 7px;
  }
  #returnRequestPage .return-section-card {
    padding: 20px;
    margin-bottom: 12px;
    border-radius: 12px;
  }
  #returnRequestPage .return-card-heading { font-size: 18px; margin-bottom: 16px; }
  #returnRequestPage .return-card-heading-icon { width: 24px; height: 24px; }
  #returnRequestPage .return-order-layout { grid-template-columns: 1fr; gap: 18px; }
  #returnRequestPage .return-product-summary .return-item-card { grid-template-columns: 88px minmax(0,1fr); gap: 16px; }
  #returnRequestPage .return-product-summary .return-item-image { width: 88px; height: 100px; }
  #returnRequestPage .return-product-summary .return-item-name { font-size: 17px; }
  #returnRequestPage .return-order-meta { gap: 12px; padding-top: 0; }
  #returnRequestPage .return-order-meta > div { grid-template-columns: 78px minmax(0,1fr); }
  #returnRequestPage .return-reason-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 10px; }
  #returnRequestPage .return-reason-option { font-size: 15px; min-height: 32px; }
  #returnRequestPage .return-method-heading { flex-wrap: wrap; }
  #returnRequestPage .return-card-heading-note { width: 100%; margin: 0 0 0 34px; }
  #returnRequestPage .return-method-grid { grid-template-columns: 1fr; gap: 12px; }
  #returnRequestPage .return-method-card { min-height: 164px; padding: 20px; }
  #returnRequestPage .return-method-logo-711 { width: 66px; height: 66px; }
  #returnRequestPage .return-method-logo-family { width: 80px; height: 66px; }
  #returnRequestPage .return-method-card-top > strong { font-size: 17px; }
  #returnRequestPage .return-method-description { font-size: 13px; line-height: 1.75; }
  #returnRequestPage .return-method-description img { width: 22px; height: 22px; }
  #returnRequestPage .return-method-indicator { right: 16px; top: 22px; width: 23px; height: 23px; }
  #returnRequestPage .return-method-selected-check { width: 27px; height: 27px; }
  #returnRequestPage .return-notice-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 8px; font-size: 13px; line-height: 1.75; }
  #returnRequestPage .return-button-row-image-match { flex-direction: column; gap: 10px; }
  #returnRequestPage .return-button-row-image-match .btn { width: 100%; min-height: 52px; font-size: 16px; }
}


/* CHÆN return request — return method + notice UI alignment, minimal patch */


/* Return method: whole card is the selector; no visible radio/package icon. */
#returnRequestPage .return-method-card{
  cursor:pointer;
}
#returnRequestPage .return-method-card:focus-visible{
  outline:2px solid #8f7967;
  outline-offset:2px;
}
#returnRequestPage .return-method-card input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
#returnRequestPage .return-method-indicator{
  display:none !important;
}
#returnRequestPage .return-method-description img{
  display:none !important;
}
#returnRequestPage .return-method-description{
  gap:0;
}
#returnRequestPage .return-method-selected-check{
  display:none;
  position:absolute;
  right:-1px;
  top:-1px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#8d7662;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:28px;
  text-align:center;
  font-family:Arial,sans-serif;
  box-sizing:border-box;
  background-image:none;
}
#returnRequestPage .return-method-card.is-selected .return-method-selected-check{
  display:block;
}

/* Return notices: compact two-column information list. */
#returnRequestPage .return-notice-list{
  column-gap:40px;
  row-gap:4px;
  line-height:1.7;
}
#returnRequestPage .return-notice-list li{
  padding-left:24px;
}
#returnRequestPage .return-notice-list li::before{
  top:4px;
  width:16px;
  height:16px;
  background:#8d7662;
  content:'✓';
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  background-image:none;
}
#returnRequestPage .return-notice-emphasis{
  color:#9a6f4d;
}

@media (max-width:767px){

  #returnRequestPage .return-notice-list{
    column-gap:0;
    row-gap:6px;
  }
}


/* CHÆN return request — final UI-only alignment patch (2026-08-20)
   Scoped exclusively to #returnRequestPage. No return business logic/API is changed. */


#returnRequestPage .return-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #8f7967;
  border-radius: 50%;
  background: #fff;
  color: #8f7967;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-sizing: border-box;
}
#returnRequestPage .return-modal-close svg {
  width: 25px;
  height: 25px;
  display: block;
}
#returnRequestPage .return-modal-close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
#returnRequestPage .return-modal-close:hover {
  background: #faf7f4;
}
#returnRequestPage .return-modal-close:focus-visible {
  outline: 2px solid #8f7967;
  outline-offset: 2px;
}

/* Keep the heading and its helper text readable at the reference 1024×1536 layout. */
#returnRequestPage .return-method-heading {
  flex-wrap: nowrap;
}
#returnRequestPage .return-card-heading-note {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* Radio states use one fixed outer circle size; only the inner mark changes. */
#returnRequestPage .return-reason-option input {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  flex-basis: 26px;
  border-width: 1.5px;
}
#returnRequestPage .return-reason-option input::after {
  width: 12px;
  height: 12px;
}

/* Smaller store logos prevent the logo from competing with the store name/check mark. */
#returnRequestPage .return-method-logo-711 {
  width: 64px;
  height: 64px;
}
#returnRequestPage .return-method-logo-family {
  width: 72px;
  height: 60px;
}
#returnRequestPage .return-method-card-top {
  gap: 16px;
  padding-right: 48px;
}

/* The selected state is the supplied circle + check artwork, not a second radio dot. */
#returnRequestPage .return-method-selected-check {
  width: 40px;
  height: 40px;
  right: -1px;
  top: -1px;
  border-radius: 50%;
  background: url('/images/return-ui/selected-check.svg') center/contain no-repeat;
  background-color: transparent;
  font-size: 0;
}
#returnRequestPage .return-method-card.is-selected .return-method-selected-check {
  display: block;
}

#returnRequestPage .return-notice-emphasis {
  font-weight: 700;
}

@media (max-width: 900px) {
  #returnRequestPage .return-method-heading {
    flex-wrap: wrap;
  }
  #returnRequestPage .return-card-heading-note {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 38px;
    white-space: normal;
  }
}

@media (max-width: 767px) {

  #returnRequestPage .return-modal-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
  #returnRequestPage .return-modal-close svg {
    width: 21px;
    height: 21px;
  }
  #returnRequestPage .return-method-logo-711 {
    width: 56px;
    height: 56px;
  }
  #returnRequestPage .return-method-logo-family {
    width: 64px;
    height: 54px;
  }
  #returnRequestPage .return-method-selected-check {
    width: 36px;
    height: 36px;
  }
}


/* CHÆN return request — exact UI corrections requested (2026-08-20)
   Scoped only to #returnRequestPage. No order-info icon or return business logic changed. */


#returnRequestPage .return-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
}

#returnRequestPage .return-reason-option input {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  flex: 0 0 26px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1.5px solid #cfc7bf;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}

#returnRequestPage .return-reason-option input:checked {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  flex: 0 0 26px;
  border-color: #171513;
}

#returnRequestPage .return-reason-option input::after {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #171513;
  transform: scale(0);
}

#returnRequestPage .return-reason-option input:checked::after {
  transform: scale(1);
}

@media (max-width: 767px) {
  #returnRequestPage .return-modal-close {
    top: 10px;
    right: 10px;
  }

  #returnRequestPage .return-reason-option input,
  #returnRequestPage .return-reason-option input:checked {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-width: 26px;
    max-height: 26px;
    flex-basis: 26px;
  }
}

/* Return request UI: normalize reason radio rendering.
   Keep the outer circle at exactly 26x26px in every state.
   The selected center dot is rendered by one fixed radial gradient so
   it cannot inherit the different proportions of the legacy SVG artwork. */
#returnRequestPage .return-reason-option input,
#returnRequestPage .return-reason-option input:checked {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  flex: 0 0 26px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid #cfc7bf !important;
  background: #fff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  display: block !important;
  place-items: initial !important;
  transform: none !important;
}

#returnRequestPage .return-reason-option input::after {
  display: none !important;
  content: none !important;
}

#returnRequestPage .return-reason-option input:checked {
  border-color: #171513 !important;
  background-color: #fff !important;
  background-image: radial-gradient(circle at center, #171513 0 5px, transparent 5.1px) !important;
}



/* CHÆN return notice — independent columns so one column never changes the other column's vertical spacing. */
#returnRequestPage .return-notice-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
  padding: 0;
  margin: 0;
  list-style: none;
}
#returnRequestPage .return-notice-list .return-notice-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
#returnRequestPage .return-notice-list .return-notice-column li {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
}

@media (max-width: 767px) {
  #returnRequestPage .return-notice-list {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 8px;
  }
  #returnRequestPage .return-notice-list .return-notice-column {
    gap: 8px;
  }
}

/* CHÆN return notice — restore true two-column layout.
   Each UL is an independent vertical column; one column's item height
   must never push the other column downward. Scoped to the return page. */
#returnRequestPage .return-notice-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
#returnRequestPage .return-notice-list > .return-notice-column {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#returnRequestPage .return-notice-list > .return-notice-column > li {
  display: block !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 24px !important;
  list-style: none !important;
}
#returnRequestPage .return-notice-list > .return-notice-column > li::marker {
  content: none !important;
  display: none !important;
}
#returnRequestPage .return-notice-list > .return-notice-column > li::before {
  left: 0 !important;
}

@media (max-width: 767px) {
  #returnRequestPage .return-notice-list {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #returnRequestPage .return-notice-list > .return-notice-column {
    width: 100% !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
  }
}



/* CHÆN return request — desktop viewing size adjustment (2026-08-20)
   Scoped only to #returnRequestPage. Preserve existing UI content and structure. */
@media (min-width: 768px) {


  #returnRequestPage .return-button-row-image-match .btn {
    min-height: 56px;
    padding: 0 20px;
    font-size: 18px;
  }
}


/* CHÆN return request — final compact modal + quantity placement fix
   UI only. These rules are intentionally last so older return-page overrides
   cannot expand the modal again. */




#returnRequestPage .return-modal-brand {
  margin: 0 0 10px !important;
  font-size: 34px !important;
  letter-spacing: 8px !important;
  line-height: 1 !important;
}

#returnRequestPage .return-modal-close {
  width: 40px !important;
  height: 40px !important;
  top: 10px !important;
  right: 10px !important;
}
#returnRequestPage .return-modal-close svg {
  width: 18px !important;
  height: 18px !important;
}

#returnRequestPage .return-section-card {
  padding: 16px !important;
  margin-bottom: 10px !important;
  border-radius: 11px !important;
}

#returnRequestPage .return-card-heading {
  margin-bottom: 12px !important;
  font-size: 16px !important;
}
#returnRequestPage .return-card-heading-icon {
  width: 21px !important;
  height: 21px !important;
}

#returnRequestPage .return-product-summary .return-item-card {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 13px !important;
  padding: 0 !important;
}
#returnRequestPage .return-product-summary .return-item-image {
  width: 78px !important;
  height: 84px !important;
  border-radius: 8px !important;
}
#returnRequestPage .return-product-summary .return-item-name {
  font-size: 15px !important;
}
#returnRequestPage .return-product-summary .return-item-meta {
  font-size: 12px !important;
  margin-top: 5px !important;
}
#returnRequestPage .return-product-summary .return-item-price {
  font-size: 13px !important;
  margin-top: 5px !important;
}

/* The quantity now belongs to the product information block. */
#returnRequestPage .return-product-summary .return-item-quantity {
  display: block !important;
  margin-top: 5px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #171513 !important;
  font-weight: 500 !important;
}
#returnRequestPage .return-product-summary .return-item-quantity strong {
  font-weight: 600 !important;
}
#returnRequestPage .return-member-application-row {
  display: none !important;
}

#returnRequestPage .return-order-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, .9fr) !important;
  gap: 18px !important;
}
#returnRequestPage .return-order-meta {
  gap: 9px !important;
}
#returnRequestPage .return-order-meta > div {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 7px !important;
}
#returnRequestPage .return-order-meta span {
  font-size: 11px !important;
}
#returnRequestPage .return-order-meta strong {
  font-size: 12px !important;
}

#returnRequestPage .return-reason-grid {
  gap: 7px 34px !important;
}
#returnRequestPage .return-reason-option {
  min-height: 27px !important;
  gap: 8px !important;
  font-size: 13px !important;
}
#returnRequestPage .return-reason-option input,
#returnRequestPage .return-reason-option input:checked {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-basis: 20px !important;
}

#returnRequestPage .return-method-grid {
  gap: 10px !important;
}
#returnRequestPage .return-method-card {
  min-height: 120px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}
#returnRequestPage .return-method-card-top {
  gap: 9px !important;
  min-height: 36px !important;
}
#returnRequestPage .return-method-logo-711 {
  width: 50px !important;
  height: 50px !important;
}
#returnRequestPage .return-method-logo-family {
  width: 60px !important;
  height: 50px !important;
}
#returnRequestPage .return-method-card-top > strong {
  font-size: 15px !important;
}
#returnRequestPage .return-method-card-main {
  margin-top: 6px !important;
}
#returnRequestPage .return-method-description {
  gap: 6px !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
#returnRequestPage .return-method-description img {
  width: 18px !important;
  height: 18px !important;
}
#returnRequestPage .return-method-indicator {
  right: 12px !important;
  top: 15px !important;
  width: 19px !important;
  height: 19px !important;
}
#returnRequestPage .return-method-selected-check {
  width: 25px !important;
  height: 25px !important;
}

#returnRequestPage .return-notice-list {
  gap: 5px 18px !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

#returnRequestPage .return-button-row-image-match .btn {
  min-height: 48px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
}

@media (max-width: 767px) {


  #returnRequestPage .return-modal-brand {
    margin-bottom: 9px !important;
    font-size: 30px !important;
  }
  #returnRequestPage .return-modal-close {
    width: 36px !important;
    height: 36px !important;
    top: 8px !important;
    right: 8px !important;
  }
  #returnRequestPage .return-modal-close svg {
    width: 16px !important;
    height: 16px !important;
  }
  #returnRequestPage .return-product-summary .return-item-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 11px !important;
  }
  #returnRequestPage .return-product-summary .return-item-image {
    width: 68px !important;
    height: 76px !important;
  }
  #returnRequestPage .return-method-card {
    min-height: 116px !important;
  }
}


/* CHÆN return request — typography-only refinement.
   Keep existing modal/card dimensions unchanged. */
#returnRequestPage .return-method-description {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}
#returnRequestPage .return-method-description * {
  font-weight: 700 !important;
}

#returnRequestPage .return-notice-list {
  color: #171513 !important;
  font-weight: 700 !important;
}
#returnRequestPage .return-notice-list > li,
#returnRequestPage .return-notice-list > li * {
  font-weight: 700 !important;
}
/* Preserve existing special/emphasis colors inside notice text. */
#returnRequestPage .return-notice-list .return-notice-special,
#returnRequestPage .return-notice-list .return-notice-special *,
#returnRequestPage .return-notice-list [style*="color"] {
  font-weight: 700 !important;
}

#returnRequestPage .return-card-heading,
#returnRequestPage .return-card-heading *,
#returnRequestPage .return-order-meta,
#returnRequestPage .return-order-meta *,
#returnRequestPage .return-item-name,
#returnRequestPage .return-item-meta,
#returnRequestPage .return-item-price,
#returnRequestPage .return-item-quantity,
#returnRequestPage .return-item-quantity *,
#returnRequestPage .return-reason-option,
#returnRequestPage .return-reason-option *,
#returnRequestPage .return-method-card-top > strong {
  font-weight: 700 !important;
}


/* CHÆN return notice — make the entire 3rd and 4th right-column notice lines red.
   Typography/layout unchanged. */
#returnRequestPage .return-notice-column:nth-child(2) > li:nth-child(3),
#returnRequestPage .return-notice-column:nth-child(2) > li:nth-child(3) *,
#returnRequestPage .return-notice-column:nth-child(2) > li:nth-child(4),
#returnRequestPage .return-notice-column:nth-child(2) > li:nth-child(4) * {
  color: #c0392b !important;
}


/* CHÆN return request — compact modal close button only.
   Do not change modal/card dimensions or form content. */
#returnRequestPage .return-modal-close {
  width: 32px !important;
  height: 32px !important;
  top: 9px !important;
  right: 9px !important;
  border-width: 1px !important;
}
#returnRequestPage .return-modal-close svg {
  width: 14px !important;
  height: 14px !important;
}


/* CHÆN C2C return request — requested size lock (2026-08-20)
   Scope: return-method helper text + modal close button only.
   Do not change modal/container dimensions or form proportions. */
#returnRequestPage .return-method-description,
#returnRequestPage .return-method-description > span {
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
#returnRequestPage .return-method-description > span {
  display: inline-block;
  min-width: 0;
}

#returnRequestPage .return-modal-close {
  width: 28px !important;
  height: 28px !important;
  top: 10px !important;
  right: 10px !important;
  padding: 0 !important;
  border-width: 1px !important;
}
#returnRequestPage .return-modal-close svg {
  width: 12px !important;
  height: 12px !important;
}
#returnRequestPage .return-modal-close path {
  stroke-width: 1.8 !important;
}

@media (max-width: 767px) {
  #returnRequestPage .return-modal-close {
    width: 30px !important;
    height: 30px !important;
    top: 8px !important;
    right: 8px !important;
  }
  #returnRequestPage .return-modal-close svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* C2C return progress entry — scoped to member order UI only. */
#memberCenterPage .order-status-tab[data-status="return_progress"].active {
  background: #2D2723;
  border-color: #2D2723;
  color: #fff;
}

#memberCenterPage .mobile-order-secondary-btn.return-progress-btn {
  border-color: #B9A18E;
  color: #5B4B3E;
}


/* CHÆN return-progress reference UI — scoped only to the C2C return progress panel. */
#returnRequestPage.return-progress-mode {
  background: rgba(24, 22, 20, 0.18);
}
#returnRequestPage.return-progress-mode .return-modal-close,
#returnRequestPage.return-progress-mode .return-modal-brand,
#returnRequestPage.return-progress-mode .return-page-heading,
#returnRequestPage.return-progress-mode #returnEligibilityLoading,
#returnRequestPage.return-progress-mode #returnEligibilityError,
#returnRequestPage.return-progress-mode #returnApplicationFields {
  display: none !important;
}
#returnRequestPage.return-progress-mode .return-page-container {
  width: min(1248px, calc(100vw - 32px));
  max-width: 1248px;
  padding: 0;
  margin: 8px auto;
}
#returnRequestPage.return-progress-mode #returnProgressPanel {
  display: block;
}
.return-reference-shell {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 22px;
  padding: 34px 38px 30px;
  color: #262321;
  box-shadow: 0 14px 36px rgba(45, 36, 30, 0.10);
  font-family: inherit;
}
.return-reference-brand {
  text-align: center;
  font-family: var(--font-display, serif);
  font-size: 48px;
  line-height: 1;
  letter-spacing: 11px;
  font-weight: 300;
  margin: 0 0 64px;
  color: #111;
}
.return-reference-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 48px;
}
.return-reference-case {
  display: flex;
  align-items: center;
  gap: 22px;
}
.return-reference-case-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f5f3f1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.return-reference-case-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #302c29;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.return-reference-case span {
  display: block;
  font-size: 18px;
  color: #706963;
  margin-bottom: 8px;
}
.return-reference-case strong {
  display: block;
  font-size: 35px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: .5px;
}
.return-reference-status {
  border-radius: 999px;
  background: #fbf5ed;
  color: #b86d28;
  padding: 14px 26px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.return-reference-main-card {
  border: 1px solid #e9e2db;
  border-radius: 20px;
  padding: 34px 36px 36px;
}
.return-reference-main-card h2 {
  margin: 0 0 42px;
  font-size: 26px;
  font-weight: 700;
}
.return-reference-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0;
  padding: 0 8px 8px;
}
.return-reference-line {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 36px;
  height: 4px;
  border-radius: 99px;
  background: #dedbd8;
}
.return-reference-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}
/* Return progress step icons: one SVG source, CSS controls only state color. */
.return-reference-step-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid #D9D5D0;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  color: #333333;
}
.return-reference-step-glyph {
  width: 28px;
  height: 28px;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--return-step-icon);
  mask-image: var(--return-step-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 1;
}
/* Visual-size correction: these two SVGs have denser artwork, so a slightly smaller
   glyph box makes their perceived size match the other five icons. */
.return-reference-step.return-reference-step-approved .return-reference-step-glyph,
.return-reference-step.return-reference-step-refund_processing .return-reference-step-glyph {
  width: 24px;
  height: 24px;
}

.return-reference-step-label {
  font-size: 18px;
  line-height: 1.35;
  white-space: nowrap;
  color: #34302d;
}
.return-reference-step.is-active .return-reference-step-icon {
  border-color: var(--brand-return, var(--brand-gold, #C79A63));
  border-width: 2px;
  background: #FFFFFF;
  color: var(--brand-return, var(--brand-gold, #C79A63));
}
.return-reference-step.is-active .return-reference-step-glyph {
  color: var(--brand-return, var(--brand-gold, #C79A63));
  opacity: 1;
}
.return-reference-step.is-done .return-reference-step-icon {
  border-color: #D9D5D0;
  background: #FFFFFF;
  color: #333333;
}
.return-reference-step.is-done .return-reference-step-glyph {
  color: #333333;
  opacity: 1;
}
.return-reference-step:not(.is-active):not(.is-done) .return-reference-step-icon {
  border-color: #D9D5D0;
  background: #FFFFFF;
  color: #333333;
}
.return-reference-step:not(.is-active):not(.is-done) .return-reference-step-glyph {
  color: #333333;
  opacity: 1;
}
/* CHÆN return-progress inspection result — match the approved-result reference card. */
#returnRequestPage.return-progress-mode .return-member-result-card {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: transparent;
}
#returnRequestPage.return-progress-mode .return-member-result-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;
  color: #272523;
}
#returnRequestPage.return-progress-mode .return-member-result-badge {
  min-height: 88px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid #cbdcc5;
  border-radius: 12px;
  background: linear-gradient(90deg, #f8fbf6 0%, #ffffff 100%);
  color: #5f8f51;
}
#returnRequestPage.return-progress-mode .return-member-result-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #6a9a5c;
  color: #fff;
  font-size: 29px;
  line-height: 1;
  font-weight: 700;
}
#returnRequestPage.return-progress-mode .return-member-result-badge strong {
  display: block;
  margin: 0 0 5px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: #5f8f51;
}
#returnRequestPage.return-progress-mode .return-member-result-badge p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4b4642;
}
#returnRequestPage.return-progress-mode .return-member-result-badge.partial,
#returnRequestPage.return-progress-mode .return-member-result-badge.rejected {
  border-color: #ead9c8;
  background: #fdfaf7;
  color: #9a6431;
}
#returnRequestPage.return-progress-mode .return-member-result-badge.partial strong,
#returnRequestPage.return-progress-mode .return-member-result-badge.rejected strong {
  color: #9a6431;
}
@media (max-width: 640px) {
  #returnRequestPage.return-progress-mode .return-member-result-badge {
    gap: 14px;
    padding: 16px;
  }
  #returnRequestPage.return-progress-mode .return-member-result-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

.return-reference-current {
  margin: 38px 0 34px;
  border: 1px solid #eee6de;
  background: #fdfaf7;
  border-radius: 20px;
  padding: 28px 34px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.return-reference-current-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #c87843;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
}
.return-reference-current h3 {
  margin: 0 0 10px;
  font-size: 25px;
  font-weight: 700;
}
.return-reference-current p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: #4b4642;
}
.return-reference-help-card {
  border: 1px solid #eee7e1;
  border-radius: 20px;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr);
  gap: 34px;
}
.return-reference-reminders {
  padding-right: 34px;
  border-right: 1px solid #e8e1db;
}
.return-reference-reminders h3 {
  margin: 0 0 22px;
  font-size: 25px;
  font-weight: 700;
}
.return-reference-bell {
  display: inline-grid;
  vertical-align: -6px;
  margin-right: 12px;
}
.return-reference-bell svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #272523;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.return-reference-reminders ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.return-reference-reminders li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 17px;
  font-size: 17px;
  line-height: 1.55;
  color: #4d4844;
}
.return-reference-reminders li::before {
  content: '•';
  position: absolute;
  left: 4px;
  top: 0;
  font-size: 22px;
  color: #4d4844;
}

/* CHÆN return progress — structured reminder copy.
   Scoped only to the return-progress reminder area. */
.return-reference-reminder-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.return-reference-reminder-section {
  margin: 0;
}
.return-reference-reminder-section h4 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  color: #272523;
}
.return-reference-reminder-section ul {
  margin: 0;
}
.return-reference-reminder-section li {
  margin-bottom: 0;
  font-weight: 600;
  color: #3f3a36;
}
.return-reference-reminder-section li::before {
  color: #3f3a36;
}
.return-reference-reminder-section + .return-reference-reminder-section {
  padding-top: 1px;
}
.return-reference-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 28px;
}
.return-reference-back {
  min-width: 220px;
  height: 62px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: #262422;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 900px) {
  #returnRequestPage.return-progress-mode .return-page-container {
    width: min(100vw - 20px, 760px);
  }
  .return-reference-shell { padding: 26px 22px; }
  .return-reference-brand { margin-bottom: 38px; font-size: 40px; }
  .return-reference-header { margin-bottom: 30px; }
  .return-reference-case strong { font-size: 25px; }
  .return-reference-case span { font-size: 14px; }
  .return-reference-main-card { padding: 24px 20px; }
  .return-reference-step-icon { width: 54px; height: 54px; }
  .return-reference-step-glyph { width: 23px; height: 23px; }
  .return-reference-step-label { font-size: 13px; white-space: normal; }
  .return-reference-step.return-reference-step-approved .return-reference-step-glyph,
  .return-reference-step.return-reference-step-refund_processing .return-reference-step-glyph { width: 20px; height: 20px; }
  .return-reference-line { top: 28px; }
  .return-reference-help-card { grid-template-columns: 1fr; }
  .return-reference-reminders { padding-right: 0; border-right: 0; border-bottom: 1px solid #e8e1db; padding-bottom: 24px; }
}
@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode .return-page-container {
    width: 100%;
    margin: 0;
  }
  .return-reference-shell { border-radius: 0; padding: 22px 16px; }
  .return-reference-brand { margin-bottom: 30px; font-size: 34px; letter-spacing: 8px; }
  .return-reference-header { align-items: flex-start; flex-direction: column; }
  .return-reference-status { font-size: 14px; padding: 10px 18px; }
  .return-reference-case-icon { width: 56px; height: 56px; }
  .return-reference-case-icon svg { width: 30px; height: 30px; }
  .return-reference-case strong { font-size: 20px; }
  .return-reference-main-card { border-radius: 14px; padding: 20px 14px; }
  .return-reference-main-card h2 { font-size: 21px; margin-bottom: 28px; }
  .return-reference-timeline { overflow-x: auto; grid-template-columns: repeat(7, 90px); padding-bottom: 12px; }
  .return-reference-line { left: 45px; right: 45px; }
  .return-reference-current { padding: 20px; }
  .return-reference-current h3 { font-size: 20px; }
  .return-reference-current p { font-size: 15px; }
  .return-reference-help-card { padding: 22px 18px; }
  .return-reference-reminders h3 { font-size: 20px; }
  .return-reference-footer { justify-content: stretch; }
  .return-reference-back { width: 100%; }
}


/* CHÆN return progress — final display-ratio patch.
   IMPORTANT: scoped only to .return-progress-mode so the application-return
   modal keeps its existing 720px sizing and layout. */
#returnRequestPage.return-progress-mode {
  padding: 8px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: auto !important;
}
#returnRequestPage.return-progress-mode .return-page-container {
  box-sizing: border-box !important;
  width: min(1248px, calc(100vw - 32px)) !important;
  max-width: 1248px !important;
  max-height: calc(100vh - 16px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
#returnRequestPage.return-progress-mode .return-reference-shell {
  width: 100% !important;
}
#returnRequestPage.return-progress-mode .return-reference-help-card {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
}
#returnRequestPage.return-progress-mode .return-reference-reminders {
  min-width: 0 !important;
}

@media (max-width: 900px) {
  #returnRequestPage.return-progress-mode .return-page-container {
    width: min(760px, calc(100vw - 20px)) !important;
    max-width: 760px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-help-card {
    grid-template-columns: 1fr !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminders {
    padding-right: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e8e1db !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode .return-page-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* CHÆN return progress — compact desktop presentation + dedicated close button.
   Scoped exclusively to .return-progress-mode so the application-return modal
   keeps its existing 720px sizing and UI. */
#returnRequestPage.return-progress-mode {
  padding: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
}

#returnRequestPage.return-progress-mode .return-page-container {
  box-sizing: border-box !important;
  width: 860px !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 64px) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

#returnRequestPage.return-progress-mode .return-reference-shell {
  position: relative !important;
  padding: 24px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

#returnRequestPage.return-progress-mode .return-reference-brand {
  font-size: 36px !important;
  letter-spacing: 9px !important;
  margin: 0 0 24px !important;
}

#returnRequestPage.return-progress-mode .return-reference-header {
  gap: 16px !important;
  margin: 0 0 22px !important;
}

#returnRequestPage.return-progress-mode .return-reference-case {
  gap: 14px !important;
}

#returnRequestPage.return-progress-mode .return-reference-case-icon {
  width: 52px !important;
  height: 52px !important;
}

#returnRequestPage.return-progress-mode .return-reference-case-icon svg {
  width: 28px !important;
  height: 28px !important;
}

#returnRequestPage.return-progress-mode .return-reference-case span {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #4b4039 !important;
  margin-bottom: 4px !important;
}

#returnRequestPage.return-progress-mode .return-reference-case strong {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: #332c27 !important;
}

#returnRequestPage.return-progress-mode .return-reference-status {
  padding: 9px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

#returnRequestPage.return-progress-mode .return-reference-main-card {
  padding: 20px 22px 22px !important;
  border-radius: 16px !important;
}

#returnRequestPage.return-progress-mode .return-reference-main-card h2 {
  margin-bottom: 20px !important;
  font-size: 21px !important;
}

#returnRequestPage.return-progress-mode .return-reference-timeline {
  padding: 0 4px 2px !important;
}

#returnRequestPage.return-progress-mode .return-reference-line {
  top: 21px !important;
  height: 3px !important;
}

#returnRequestPage.return-progress-mode .return-reference-step-icon {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 10px !important;
}

/* v5 — normalize the visible SVG artwork size.
   The seven 128×128 SVGs have different internal whitespace/aspect ratios.
   Use one consistent glyph box and step classes rather than nth-child selectors
   (the timeline connector is the first child). */
#returnRequestPage.return-progress-mode .return-reference-step-glyph {
  width: 26px !important;
  height: 26px !important;
}

#returnRequestPage.return-progress-mode .return-reference-step-label {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #403731 !important;
}

#returnRequestPage.return-progress-mode .return-reference-current {
  margin: 18px 0 16px !important;
  padding: 16px 20px !important;
  gap: 14px !important;
  border-radius: 16px !important;
}

#returnRequestPage.return-progress-mode .return-reference-current-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 22px !important;
}

#returnRequestPage.return-progress-mode .return-reference-current h3 {
  margin-bottom: 4px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #332c27 !important;
}

#returnRequestPage.return-progress-mode .return-reference-current p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  color: #403731 !important;
}

#returnRequestPage.return-progress-mode .return-reference-help-card {
  padding: 16px 20px !important;
  display: block !important;
  border-radius: 16px !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminders {
  padding-right: 0 !important;
  border-right: 0 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminders h3 {
  margin-bottom: 10px !important;
  font-size: 18px !important;
}

#returnRequestPage.return-progress-mode .return-reference-bell svg {
  width: 22px !important;
  height: 22px !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminders li {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  color: #403731 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminders li {
  margin-bottom: 7px !important;
  padding-left: 20px !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminders li::before {
  font-size: 19px !important;
}




#returnRequestPage.return-progress-mode .return-reference-footer {
  padding-top: 14px !important;
}

#returnRequestPage.return-progress-mode .return-reference-back {
  min-width: 200px !important;
  height: 52px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
}

#returnRequestPage.return-progress-mode .return-reference-close {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #a28e7e !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #8d7868 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}

#returnRequestPage.return-progress-mode .return-reference-close svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
}

#returnRequestPage.return-progress-mode .return-reference-close:hover {
  background: #faf7f4 !important;
}

@media (max-width: 900px) {
  #returnRequestPage.return-progress-mode .return-page-container {
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: 760px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-shell {
    padding: 24px 22px 22px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-brand {
    margin-bottom: 30px !important;
    font-size: 34px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-case strong {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-main-card {
    padding: 22px 18px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-help-card {
    display: block !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminders {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
}

@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode {
    padding: 0 !important;
  }
  #returnRequestPage.return-progress-mode .return-page-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-shell {
    min-height: 100vh;
    border-radius: 0 !important;
    padding: 22px 16px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-close {
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
  }
}


/* v11 — exact visible order product variant/spec text
   「印花 / 自由尺寸」: strongest scoped override, no size change. */
#memberCenterPage .mobile-order-product-content .mobile-order-product-spec,
#memberCenterPage .mobile-order-product-content .mobile-order-product-more,
#memberCenterPage .mobile-order-product-row .mobile-order-product-spec,
#memberCenterPage .mobile-order-product-row .mobile-order-product-more,
#memberCenterPage .cart-item .cart-item-variant,
#memberCenterPage .cart-item-text .cart-item-variant{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
  opacity:1 !important;
  font-weight:600 !important;
  text-shadow:none !important;
}


/* v12 — visible order product specification/date refinement */
.order-card-products,
.order-card-products *{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
  opacity:1 !important;
  font-weight:600 !important;
  text-shadow:none !important;
}
#memberCenterPage .mobile-order-product-content .mobile-order-product-spec,
#memberCenterPage .mobile-order-product-content .mobile-order-product-more{
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
  opacity:1 !important;
  font-weight:600 !important;
  text-shadow:none !important;
}
.order-card-date{
  color:#4A4640 !important;
  -webkit-text-fill-color:#4A4640 !important;
  opacity:1 !important;
  font-weight:500 !important;
}
#memberCenterPage .mobile-order-date{
  color:#4A4640 !important;
  -webkit-text-fill-color:#4A4640 !important;
  opacity:1 !important;
  font-weight:500 !important;
}


/* v15 — order detail specified text contrast refinement
   Only affects the requested order-detail text. */
.order-detail .order-progress-label,
.order-detail .order-progress-step-label,
.order-detail .mobile-order-progress-label{
  color:#3A342F !important;
  opacity:1 !important;
  font-weight:500 !important;
}

.order-detail .order-detail-product-spec,
.order-detail .order-detail-item-meta,
.order-detail .mobile-order-product-spec,
.order-detail .mobile-order-product-more{
  color:#2B2521 !important;
  -webkit-text-fill-color:#2B2521 !important;
  opacity:1 !important;
  font-weight:600 !important;
}

.order-detail .order-detail-item-qty,
.order-detail .order-detail-quantity,
.order-detail .order-item-qty{
  color:#2B2521 !important;
  opacity:1 !important;
  font-weight:500 !important;
}

.order-detail .order-summary-label,
.order-detail .order-detail-summary-label,
.order-detail .order-total-label,
.order-detail .order-detail-total-label{
  color:#3A342F !important;
  opacity:1 !important;
  font-weight:500 !important;
}

.order-detail .order-summary-value,
.order-detail .order-detail-summary-value,
.order-detail .order-total-value,
.order-detail .order-detail-total-value{
  color:#2B2521 !important;
  opacity:1 !important;
  font-weight:500 !important;
}

/* === Quick Add Bag Icon size correction (20260824) ===
   The quick-add control now renders a PNG image instead of an inline SVG.
   Constrain only the icon itself so the existing circular control size,
   position, hover state, and interaction remain unchanged. */
.product-cart-button .chaen-shopping-bag-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex: 0 0 16px !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .quick-add-card-btn .chaen-shopping-bag-icon {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex-basis: 16px !important;
  }
}


/* Password visibility icon normalization patch */
.password-toggle svg{width:20px;height:20px;display:block;}

/* ==========================================================================
   CHÆN AUTH UI — single-column reference alignment patch (2026-08-25)
   Scope: #authPage only. UI/CSS only; existing auth logic/events/API untouched.
   ========================================================================== */
#authPage {
  background: rgba(245, 241, 236, 0.92) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  --chaen-auth-bg: #FAF8F4;
  --chaen-auth-surface: #FFFFFF;
  --chaen-auth-text: #342B26;
  --chaen-auth-muted: #9B9188;
  --chaen-auth-border: #DED7CF;
  --chaen-auth-taupe: #B8A08A;
}

#authPage .chaen-auth-shell {
  width: 720px !important;
  max-width: calc(100vw - 48px) !important;
  height: 560px !important;
  max-height: calc(100vh - 48px) !important;
  padding: 0 !important;
  background: var(--chaen-auth-bg) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 38px rgba(52, 43, 38, 0.08) !important;
  overflow: hidden !important;
}

#authPage .chaen-auth-body {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

#authPage .chaen-auth-brand {
  display: none !important;
}

#authPage .chaen-auth-pane {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 54px 72px 42px !important;
  box-sizing: border-box !important;
  background: var(--chaen-auth-bg) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(155, 145, 136, 0.35) transparent !important;
}

#authPage .chaen-auth-pane::-webkit-scrollbar { width: 5px; }
#authPage .chaen-auth-pane::-webkit-scrollbar-track { background: transparent; }
#authPage .chaen-auth-pane::-webkit-scrollbar-thumb {
  background: rgba(155, 145, 136, 0.35);
  border-radius: 999px;
}

#authPage .chaen-auth-close {
  position: absolute !important;
  z-index: 30 !important;
  top: 28px !important;
  right: 42px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6F665E !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 28px !important;
  opacity: 0.95 !important;
}
#authPage .chaen-auth-close:hover { opacity: 0.65 !important; }

/* Shared CHÆN wordmark. Pseudo-element avoids changing auth logic/DOM. */
#authPage .chaen-auth-reference-form::before {
  content: "CHÆN";
  display: block;
  margin: 0 0 22px;
  text-align: center;
  color: var(--chaen-auth-text);
  font-family: var(--font-display), "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
}

#authPage .mobile-auth-brand-logo { display: none !important; }

#authPage .auth-heading-block {
  margin: 0 0 34px !important;
  text-align: center !important;
}

#authPage .auth-heading-block .auth-title,
#authPage .chaen-auth-reference-form > .auth-title {
  margin: 0 !important;
  color: var(--chaen-auth-text) !important;
  font-family: var(--font-display), "Noto Serif TC", serif !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
}

#authPage .auth-heading-block .auth-subtitle {
  margin: 4px 0 0 !important;
  color: var(--chaen-auth-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

#authPage .chaen-auth-reference-form {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#authPage .chaen-auth-reference-form .form-group {
  margin: 0 0 20px !important;
}

#authPage .chaen-auth-reference-form .form-group label {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--chaen-auth-text) !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

#authPage .chaen-auth-reference-form .form-group input,
#authPage .auth-input-wrap input {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--chaen-auth-border) !important;
  border-radius: 9999px !important;
  background-color: var(--chaen-auth-surface) !important;
  color: var(--chaen-auth-text) !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 14px !important;
  line-height: 48px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

#authPage .chaen-auth-reference-form .form-group input:focus,
#authPage .auth-input-wrap input:focus {
  border-color: var(--chaen-auth-taupe) !important;
  box-shadow: none !important;
  outline: none !important;
}

#authPage .chaen-auth-reference-form .form-group input::placeholder,
#authPage .auth-input-wrap input::placeholder {
  color: #AAA29A !important;
  opacity: 1 !important;
}

#authPage .auth-input-wrap {
  position: relative !important;
  width: 100% !important;
}

#authPage .auth-input-wrap > svg:not(.auth-lock-icon),
#authPage .auth-input-wrap > .auth-lock-icon {
  left: 30px !important;
  width: 20px !important;
  height: 20px !important;
  color: #9A9188 !important;
  stroke: currentColor !important;
}

#authPage .auth-icon-field .auth-input-wrap input {
  padding-left: 62px !important;
  padding-right: 50px !important;
}

#authPage .login-password-field input {
  padding-left: 62px !important;
  padding-right: 54px !important;
}

#authPage .password-field .password-toggle,
#authPage .login-password-field .login-password-toggle {
  right: 20px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  color: #9A9188 !important;
  opacity: 1 !important;
}

#authPage .password-toggle svg,
#authPage .login-password-toggle svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* Register fields: preserve every field while matching the shared pill UI. */
#authPage.register-mode #registerForm input[type="text"],
#authPage.register-mode #registerForm input[type="email"],
#authPage.register-mode #registerForm input[type="tel"],
#authPage.register-mode #registerForm input[type="password"] {
  padding-left: 62px !important;
  padding-right: 54px !important;
  background-repeat: no-repeat !important;
  background-position: 28px center !important;
  background-size: 20px 20px !important;
}
#authPage.register-mode #registerName {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20c.7-3.4 3.1-5.3 7.5-5.3s6.8 1.9 7.5 5.3'/%3E%3C/svg%3E") !important;
}
#authPage.register-mode #registerEmail,
#authPage.forgot-password-mode #forgotEmail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}
#authPage.register-mode #registerPhone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5 9.2 3l2 4.8-2.2 1.8c1.1 2.2 2.9 4.2 5.1 5.3l1.8-2.2 4.8 2-.5 2.7c-.2 1.1-1.2 1.9-2.4 1.8-7.9-.7-12.9-5.7-13.6-13.6-.1-1.2.7-2.2 1.8-2.3Z'/%3E%3C/svg%3E") !important;
}
#authPage.register-mode #registerPassword,
#authPage.register-mode #registerConfirmPassword {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
}

#authPage .chaen-auth-reference-form .field-hint,
#authPage .chaen-auth-reference-form .password-strength,
#authPage .forgot-email-hint {
  display: block !important;
  margin: 6px 0 0 !important;
  color: var(--chaen-auth-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

#authPage .chaen-line-login,
#authPage .chaen-line-register,
#authPage .chaen-login-submit,
#authPage #registerSubmitBtn,
#authPage #forgotSubmitBtn {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 24px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

#authPage .chaen-line-login,
#authPage .chaen-line-register {
  background: #B8A08A !important;
  color: #FFFFFF !important;
  margin: 0 !important;
}

#authPage .chaen-login-submit,
#authPage #registerSubmitBtn,
#authPage #forgotSubmitBtn {
  background: #342B26 !important;
  color: #FFFFFF !important;
  border: 0 !important;
}

#authPage .chaen-line-login .chaen-line-copy,
#authPage .chaen-line-login .chaen-line-copy strong,
#authPage .chaen-line-register .chaen-line-copy,
#authPage .chaen-line-register .chaen-line-copy strong {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
}

#authPage .chaen-line-login .chaen-line-bubble,
#authPage .chaen-line-register .chaen-line-bubble,
#authPage .chaen-line-login .chaen-line-logo-picture,
#authPage .chaen-line-register .chaen-line-logo-picture,
#authPage .chaen-line-login .chaen-line-logo-picture img,
#authPage .chaen-line-register .chaen-line-logo-picture img {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  flex: 0 0 26px !important;
  object-fit: contain !important;
}

#authPage .chaen-login-line-hint,
#authPage .chaen-register-line-hint {
  margin: 8px 0 0 !important;
  color: var(--chaen-auth-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-line-login {
  margin-top: 0 !important;
}
#authPage:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-login-line-hint {
  display: none !important;
}

#authPage .auth-divider {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 30px 0 24px !important;
  color: var(--chaen-auth-muted) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
#authPage .auth-divider::before,
#authPage .auth-divider::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #DED7CF !important;
}

#authPage .auth-login-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  color: #756C64 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#authPage .auth-remember {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
#authPage .auth-remember input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #B8A08A !important;
}
#authPage .auth-login-meta a,
#authPage .auth-member-join a,
#authPage .auth-footer-links a {
  color: #8F7564 !important;
  text-decoration: none !important;
}

#authPage .chaen-login-submit { margin-top: 24px !important; }
#authPage .auth-member-join {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #756C64 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
#authPage .auth-member-join a { font-weight: 500 !important; }

/* Keep existing registration functionality visible, but put it into the same visual rhythm. */
#authPage.register-mode .chaen-auth-pane {
  padding-top: 44px !important;
}
#authPage.register-mode #registerForm::before {
  margin-bottom: 22px !important;
}
#authPage.register-mode #registerForm > .auth-title {
  margin-bottom: 4px !important;
}
#authPage.register-mode #registerForm > .auth-title::after {
  content: "開啟質感生活的選擇";
  display: block;
  margin-top: 4px;
  color: var(--chaen-auth-muted);
  font-family: "Noto Serif TC", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
#authPage.register-mode #registerForm .form-group {
  margin-bottom: 18px !important;
}
#authPage.register-mode #registerSubmitBtn {
  margin-top: 4px !important;
}
#authPage.register-mode #registerForm .terms-check {
  color: #756C64 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin: 8px 0 12px !important;
}
#authPage.register-mode #registerForm .newsletter-consent {
  margin-top: 0 !important;
}
#authPage.register-mode #registerForm .register-checklist {
  margin: 10px 0 18px !important;
  padding: 10px 14px !important;
  border: 1px solid #E7DED5 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.55) !important;
  color: #9B9188 !important;
}
#authPage.register-mode #registerForm .auth-divider {
  margin: 24px 0 20px !important;
}
#authPage.register-mode #registerForm .auth-footer-links {
  margin: 20px 0 0 !important;
}

/* Forgot password: match the reference page while preserving Turnstile and feedback nodes. */
#authPage.forgot-password-mode .chaen-auth-pane {
  padding-top: 56px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm::before {
  margin-bottom: 22px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm > .auth-title {
  margin-bottom: 4px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm > .auth-title::after {
  content: "我們將協助您重設密碼";
  display: block;
  margin-top: 4px;
  color: var(--chaen-auth-muted);
  font-family: "Noto Serif TC", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
#authPage.forgot-password-mode #forgotPasswordForm .form-group {
  margin-top: 42px !important;
  margin-bottom: 0 !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .form-group label {
  margin-bottom: 8px !important;
}
#authPage.forgot-password-mode #forgotEmail {
  padding-left: 62px !important;
}
#authPage.forgot-password-mode #forgotSubmitBtn {
  margin-top: 56px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
  margin: 26px 0 0 !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 52px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border: 1px solid var(--chaen-auth-border) !important;
  border-radius: 9999px !important;
  color: var(--chaen-auth-muted) !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* Existing alert/status blocks remain functional; keep them subtle within the reference palette. */
#authPage .login-redirect-hint,
#authPage .auth-error,
#authPage .auth-success {
  font-size: 12px !important;
}

/* Mobile: same design language, no horizontal overflow. */
@media (max-width: 767px) {
  #authPage {
    padding: 12px !important;
  }

  #authPage .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 14px !important;
  }

  #authPage .chaen-auth-pane {
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 36px 22px 28px !important;
    overflow-y: auto !important;
  }

  #authPage .chaen-auth-close {
    top: 16px !important;
    right: 18px !important;
    font-size: 26px !important;
  }

  #authPage .chaen-auth-reference-form::before {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }

  #authPage .auth-heading-block {
    margin-bottom: 28px !important;
  }

  #authPage .auth-heading-block .auth-title,
  #authPage .chaen-auth-reference-form > .auth-title {
    font-size: 26px !important;
  }

  #authPage .auth-heading-block .auth-subtitle,
  #authPage .chaen-auth-reference-form > .auth-title::after {
    font-size: 13px !important;
  }

  #authPage .chaen-auth-reference-form .form-group label {
    font-size: 13px !important;
  }

  #authPage .chaen-auth-reference-form .form-group input,
  #authPage .auth-input-wrap input {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 14px !important;
  }

  #authPage .chaen-line-login,
  #authPage .chaen-line-register,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn,
  #authPage #forgotSubmitBtn {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    font-size: 15px !important;
  }

  #authPage .auth-divider {
    margin: 26px 0 22px !important;
  }

  #authPage.register-mode .chaen-auth-pane,
  #authPage.forgot-password-mode .chaen-auth-pane {
    padding-top: 36px !important;
  }

  #authPage.forgot-password-mode #forgotPasswordForm .form-group {
    margin-top: 34px !important;
  }

  #authPage.forgot-password-mode #forgotSubmitBtn {
    margin-top: 40px !important;
  }

  #authPage .auth-login-meta {
    font-size: 12px !important;
  }
}


/* ============================================================================
   CHÆN AUTH UI — SINGLE COLUMN REFERENCE V3 (2026-08-25)
   Final UI-only override for Login / Register / Forgot Password.
   Existing auth events, IDs, validation, API calls and state are untouched.
   ============================================================================ */
#authPage {
  --chaen-auth-bg: #FAF8F4;
  --chaen-auth-surface: #FFFFFF;
  --chaen-auth-text: #342B26;
  --chaen-auth-muted: #9B9188;
  --chaen-auth-border: #DED7CF;
  --chaen-auth-taupe: #B8A08A;
  background: rgba(245,241,236,.92) !important;
  padding: 28px !important;
  box-sizing: border-box !important;
}

#authPage .chaen-auth-shell {
  width: min(1310px, calc(100vw - 56px)) !important;
  max-width: 1310px !important;
  height: min(1034px, calc(100vh - 56px)) !important;
  max-height: calc(100vh - 56px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: var(--chaen-auth-bg) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 38px rgba(52,43,38,.08) !important;
  overflow: hidden !important;
  display: block !important;
}

#authPage .chaen-auth-body {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#authPage .chaen-auth-pane {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 86px 56px 48px !important;
  box-sizing: border-box !important;
  background: var(--chaen-auth-bg) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#authPage .chaen-auth-close {
  position: absolute !important;
  z-index: 50 !important;
  top: 34px !important;
  right: 38px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6F665E !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  opacity: .95 !important;
}

#authPage .chaen-auth-reference-form {
  width: min(100%, 608px) !important;
  max-width: 608px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#authPage .chaen-auth-reference-form::before {
  content: "CHÆN" !important;
  display: block !important;
  margin: 0 0 26px !important;
  text-align: center !important;
  color: var(--chaen-auth-text) !important;
  font-family: var(--font-display), "Times New Roman", serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
}

#authPage .mobile-auth-brand-logo { display: none !important; }

/* Login header */
#authPage .auth-login-form {
  display: block !important;
}
#authPage .auth-login-form .auth-heading-block {
  width: 100% !important;
  margin: 0 0 38px !important;
  text-align: center !important;
}
#authPage .auth-login-form .auth-title,
#authPage .chaen-auth-reference-form > .auth-title {
  margin: 0 !important;
  color: var(--chaen-auth-text) !important;
  font-family: var(--font-display), "Noto Serif TC", serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: .05em !important;
  text-align: center !important;
}
#authPage .auth-login-form .auth-subtitle {
  margin: 8px 0 0 !important;
  color: var(--chaen-auth-muted) !important;
  font-family: "Noto Serif TC", serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Shared fields */
#authPage .chaen-auth-reference-form .form-group {
  margin: 0 0 20px !important;
}
#authPage .chaen-auth-reference-form .form-group label {
  display: block !important;
  margin: 0 0 9px !important;
  color: var(--chaen-auth-text) !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
#authPage .chaen-auth-reference-form .form-group input,
#authPage .auth-input-wrap input {
  width: 100% !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--chaen-auth-border) !important;
  border-radius: 9999px !important;
  background-color: var(--chaen-auth-surface) !important;
  background-repeat: no-repeat !important;
  background-position: 28px center !important;
  background-size: 22px 22px !important;
  color: var(--chaen-auth-text) !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 16px !important;
  line-height: 70px !important;
  outline: none !important;
  box-shadow: none !important;
}
#authPage .chaen-auth-reference-form .form-group input::placeholder,
#authPage .auth-input-wrap input::placeholder {
  color: #AAA29A !important;
  opacity: 1 !important;
}
#authPage .chaen-auth-reference-form .form-group input:focus,
#authPage .auth-input-wrap input:focus {
  border-color: var(--chaen-auth-taupe) !important;
  box-shadow: none !important;
  outline: none !important;
}

#authPage .auth-input-wrap {
  position: relative !important;
  width: 100% !important;
}
#authPage .auth-input-wrap > svg:not(.auth-lock-icon),
#authPage .auth-input-wrap > .auth-lock-icon {
  position: absolute !important;
  z-index: 3 !important;
  left: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  color: #9A9188 !important;
  stroke: currentColor !important;
  fill: none !important;
  pointer-events: none !important;
}
#authPage .auth-icon-field .auth-input-wrap input,
#authPage .login-password-field input {
  padding-left: 68px !important;
  padding-right: 62px !important;
}
#authPage .password-field .password-toggle,
#authPage .login-password-field .login-password-toggle {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  right: 18px !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9A9188 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#authPage .password-toggle svg,
#authPage .login-password-toggle svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}

/* Register icon backgrounds: one icon only, never repeated. */
#authPage.register-mode #registerForm input[type="text"],
#authPage.register-mode #registerForm input[type="email"],
#authPage.register-mode #registerForm input[type="tel"],
#authPage.register-mode #registerForm input[type="password"] {
  padding-left: 68px !important;
  padding-right: 62px !important;
  background-repeat: no-repeat !important;
  background-position: 28px center !important;
  background-size: 22px 22px !important;
}
#authPage.register-mode #registerName {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20c.7-3.4 3.1-5.3 7.5-5.3s6.8 1.9 7.5 5.3'/%3E%3C/svg%3E") !important;
}
#authPage.register-mode #registerEmail,
#authPage.forgot-password-mode #forgotEmail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}
#authPage.register-mode #registerPhone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5 9.2 3l2 4.8-2.2 1.8c1.1 2.2 2.9 4.2 5.1 5.3l1.8-2.2 4.8 2-.5 2.7c-.2 1.1-1.2 1.9-2.4 1.8-7.9-.7-12.9-5.7-13.6-13.6-.1-1.2.7-2.2 1.8-2.3Z'/%3E%3C/svg%3E") !important;
}
#authPage.register-mode #registerPassword,
#authPage.register-mode #registerConfirmPassword {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9188' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
}
#authPage.forgot-password-mode #forgotEmail {
  background-repeat: no-repeat !important;
  background-position: 28px center !important;
  background-size: 22px 22px !important;
  padding-left: 68px !important;
  padding-right: 24px !important;
}

#authPage .chaen-auth-reference-form .field-hint,
#authPage .chaen-auth-reference-form .password-strength,
#authPage .forgot-email-hint {
  display: block !important;
  margin: 7px 0 0 !important;
  color: var(--chaen-auth-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Buttons */
#authPage .chaen-line-login,
#authPage .chaen-login-submit,
#authPage #registerSubmitBtn,
#authPage #forgotSubmitBtn {
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding: 0 24px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
#authPage .chaen-line-login {
  background: #B8A08A !important;
  color: #fff !important;
  margin: 0 !important;
}
#authPage .chaen-login-submit,
#authPage #registerSubmitBtn,
#authPage #forgotSubmitBtn {
  background: #342B26 !important;
  color: #fff !important;
}
#authPage .chaen-line-login .chaen-line-copy,
#authPage .chaen-line-login .chaen-line-copy strong {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
#authPage .chaen-line-login .chaen-line-bubble,
#authPage .chaen-line-login .chaen-line-logo-picture,
#authPage .chaen-line-login .chaen-line-logo-picture img {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
}

/* Login spacing */
#authPage .auth-login-form .auth-divider {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 28px 0 30px !important;
  color: var(--chaen-auth-muted) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
#authPage .auth-login-form .auth-divider::before,
#authPage .auth-login-form .auth-divider::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: var(--chaen-auth-border) !important;
}
#authPage .auth-login-form .auth-login-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  color: #756C64 !important;
  font-size: 14px !important;
}
#authPage .auth-login-form .auth-remember {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
#authPage .auth-login-form .auth-remember input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #B8A08A !important;
}
#authPage .auth-login-meta a,
#authPage .auth-member-join a,
#authPage .auth-footer-links a {
  color: #8F7564 !important;
  text-decoration: none !important;
}
#authPage .auth-login-form .chaen-login-submit {
  margin-top: 28px !important;
}
#authPage .auth-member-join {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #756C64 !important;
  font-size: 14px !important;
}

/* Register: match reference composition and remove only duplicate visual extras.
   The underlying LINE register handler remains in the DOM/JS; the main login
   LINE button remains the single visible LINE entry point. */
#authPage.register-mode .chaen-auth-pane {
  padding-top: 72px !important;
}
#authPage.register-mode #registerForm {
  width: min(100%, 608px) !important;
  max-width: 608px !important;
}
#authPage.register-mode #registerForm > .auth-title {
  margin-bottom: 4px !important;
}
#authPage.register-mode #registerForm > .auth-title::after {
  content: "開啟質感生活的選擇" !important;
  display: block !important;
  margin-top: 6px !important;
  color: var(--chaen-auth-muted) !important;
  font-family: "Noto Serif TC", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
#authPage.register-mode #registerForm .form-group {
  margin-bottom: 18px !important;
}
#authPage.register-mode #registerForm .terms-check {
  color: #8B827A !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 8px 0 10px !important;
}
#authPage.register-mode #registerForm .newsletter-consent {
  margin-top: 0 !important;
}
#authPage.register-mode #registerForm .register-checklist,
#authPage.register-mode #registerForm > .auth-divider,
#authPage.register-mode #registerForm > .chaen-line-register,
#authPage.register-mode #registerForm > .chaen-register-line-hint {
  display: none !important;
}
#authPage.register-mode #registerSubmitBtn {
  margin-top: 12px !important;
}
#authPage.register-mode #registerForm .auth-footer-links {
  margin-top: 18px !important;
  text-align: center !important;
}
#authPage.register-mode #registerForm .auth-footer-links a {
  color: #8F7564 !important;
  font-size: 15px !important;
}

/* Forgot password */
#authPage.forgot-password-mode .chaen-auth-pane {
  padding-top: 92px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm > .auth-title {
  margin-bottom: 4px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm > .auth-title::after {
  content: "我們將協助您重設密碼" !important;
  display: block !important;
  margin-top: 8px !important;
  color: var(--chaen-auth-muted) !important;
  font-family: "Noto Serif TC", serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .form-group {
  margin-top: 54px !important;
  margin-bottom: 0 !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .form-group label {
  margin-bottom: 10px !important;
}
#authPage.forgot-password-mode #forgotSubmitBtn {
  margin-top: 58px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
  margin-top: 54px !important;
}
#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 360px !important;
  max-width: 100% !important;
  height: 52px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border: 1px solid var(--chaen-auth-border) !important;
  border-radius: 9999px !important;
  color: var(--chaen-auth-muted) !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* Remove accidental repeated background icons on all auth inputs. */
#authPage input {
  background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
  #authPage {
    padding: 12px !important;
  }
  #authPage .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 14px !important;
  }
  #authPage .chaen-auth-pane {
    height: 100% !important;
    max-height: none !important;
    padding: 34px 14px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #authPage .chaen-auth-close {
    top: 14px !important;
    right: 14px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
    line-height: 24px !important;
  }
  #authPage .chaen-auth-reference-form,
  #authPage.register-mode #registerForm,
  #authPage.forgot-password-mode #forgotPasswordForm {
    width: 100% !important;
    max-width: 100% !important;
  }
  #authPage .chaen-auth-reference-form::before {
    margin-bottom: 18px !important;
    font-size: 24px !important;
  }
  #authPage .auth-login-form .auth-heading-block {
    margin-bottom: 24px !important;
  }
  #authPage .auth-login-form .auth-title,
  #authPage .chaen-auth-reference-form > .auth-title {
    font-size: 26px !important;
  }
  #authPage .auth-login-form .auth-subtitle,
  #authPage.register-mode #registerForm > .auth-title::after,
  #authPage.forgot-password-mode #forgotPasswordForm > .auth-title::after {
    font-size: 13px !important;
  }
  #authPage .chaen-auth-reference-form .form-group {
    margin-bottom: 16px !important;
  }
  #authPage .chaen-auth-reference-form .form-group label {
    font-size: 13px !important;
    margin-bottom: 7px !important;
  }
  #authPage .chaen-auth-reference-form .form-group input,
  #authPage .auth-input-wrap input {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 14px !important;
    line-height: 48px !important;
    background-size: 20px 20px !important;
    background-position: 16px center !important;
  }
  #authPage .auth-input-wrap > svg:not(.auth-lock-icon),
  #authPage .auth-input-wrap > .auth-lock-icon {
    left: 16px !important;
    width: 20px !important;
    height: 20px !important;
  }
  #authPage .auth-icon-field .auth-input-wrap input,
  #authPage .login-password-field input,
  #authPage.register-mode #registerForm input[type="text"],
  #authPage.register-mode #registerForm input[type="email"],
  #authPage.register-mode #registerForm input[type="tel"],
  #authPage.register-mode #registerForm input[type="password"] {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  #authPage.forgot-password-mode #forgotEmail {
    padding-left: 48px !important;
    padding-right: 16px !important;
    background-position: 16px center !important;
  }
  #authPage .password-field .password-toggle,
  #authPage .login-password-field .login-password-toggle {
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
  }
  #authPage .chaen-line-login,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn,
  #authPage #forgotSubmitBtn {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    font-size: 15px !important;
  }
  #authPage .chaen-line-login .chaen-line-copy,
  #authPage .chaen-line-login .chaen-line-copy strong {
    font-size: 15px !important;
  }
  #authPage .chaen-line-login .chaen-line-bubble,
  #authPage .chaen-line-login .chaen-line-logo-picture,
  #authPage .chaen-line-login .chaen-line-logo-picture img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-basis: 24px !important;
  }
  #authPage .auth-login-form .auth-divider {
    margin: 22px 0 !important;
    font-size: 13px !important;
  }
  #authPage .auth-login-form .auth-login-meta {
    font-size: 12px !important;
  }
  #authPage .auth-login-form .chaen-login-submit {
    margin-top: 20px !important;
  }
  #authPage .auth-member-join {
    margin-top: 18px !important;
    font-size: 12px !important;
  }
  #authPage.register-mode .chaen-auth-pane,
  #authPage.forgot-password-mode .chaen-auth-pane {
    padding-top: 34px !important;
  }
  #authPage.register-mode #registerForm .terms-check {
    font-size: 11px !important;
    margin: 6px 0 8px !important;
  }
  #authPage.register-mode #registerSubmitBtn {
    margin-top: 10px !important;
  }
  #authPage.register-mode #registerForm .auth-footer-links {
    margin-top: 14px !important;
  }
  #authPage.forgot-password-mode #forgotPasswordForm .form-group {
    margin-top: 30px !important;
  }
  #authPage.forgot-password-mode #forgotSubmitBtn {
    margin-top: 24px !important;
  }
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
    margin-top: 22px !important;
  }
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
    width: 100% !important;
    height: 52px !important;
    font-size: 15px !important;
  }
}

/* ============================================================================
   CHÆN AUTH UI — SINGLE COLUMN PRECISION PATCH V4 (2026-08-25)
   Scope: Login / Register / Forgot Password visual layer only.
   No API / JS / validation / state / route / database changes.
   ============================================================================ */

/* ---------- Shared desktop/tablet single-column geometry ---------- */
#authPage .chaen-auth-shell {
  width: min(1310px, calc(100vw - 56px)) !important;
  max-width: 1310px !important;
  height: min(1034px, calc(100vh - 56px)) !important;
  max-height: calc(100vh - 56px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  box-sizing: border-box !important;
  background: #FAF8F4 !important;
}

#authPage .chaen-auth-body {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#authPage .chaen-auth-pane {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 58px 40px 36px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #FAF8F4 !important;
}

/* There is intentionally no left/empty brand column in this UI. */
#authPage .chaen-auth-brand,
#authPage .chaen-brand-pane,
#authPage .chaen-auth-benefits {
  display: none !important;
}

#authPage .chaen-auth-reference-form {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#authPage .chaen-auth-reference-form::before {
  content: "CHÆN" !important;
  display: block !important;
  margin: 0 0 20px !important;
  text-align: center !important;
  color: #342B26 !important;
  font-family: var(--font-display), "Times New Roman", serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
}

/* ---------- Close ---------- */
#authPage .chaen-auth-close {
  position: absolute !important;
  top: 26px !important;
  right: 30px !important;
  z-index: 100 !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6F665E !important;
  font-size: 26px !important;
  line-height: 28px !important;
}

/* ---------- Headings ---------- */
#authPage .auth-login-form .auth-heading-block {
  width: 100% !important;
  margin: 0 0 28px !important;
  text-align: center !important;
}

#authPage .auth-login-form .auth-title,
#authPage .chaen-auth-reference-form > .auth-title {
  margin: 0 !important;
  color: #342B26 !important;
  font-family: var(--font-display), "Noto Serif TC", serif !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: .05em !important;
  text-align: center !important;
}

#authPage .auth-login-form .auth-subtitle {
  margin: 6px 0 0 !important;
  color: #9B9188 !important;
  font-family: "Noto Serif TC", serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#authPage.register-mode #registerForm > .auth-title,
#authPage.forgot-password-mode #forgotPasswordForm > .auth-title {
  margin: 0 !important;
}

#authPage.register-mode #registerForm > .auth-title::after,
#authPage.forgot-password-mode #forgotPasswordForm > .auth-title::after {
  display: block !important;
  margin-top: 6px !important;
  color: #9B9188 !important;
  font-family: "Noto Serif TC", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* ---------- Shared fields ---------- */
#authPage .chaen-auth-reference-form .form-group {
  margin: 0 0 16px !important;
}

#authPage .chaen-auth-reference-form .form-group label {
  display: block !important;
  margin: 0 0 7px !important;
  color: #342B26 !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

#authPage .chaen-auth-reference-form .form-group input,
#authPage .auth-input-wrap input {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  box-sizing: border-box !important;
  border: 1px solid #DED7CF !important;
  border-radius: 9999px !important;
  background-color: #FFFFFF !important;
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 19px 19px !important;
  color: #342B26 !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 14px !important;
  line-height: 52px !important;
  outline: none !important;
  box-shadow: none !important;
}

#authPage .chaen-auth-reference-form .form-group input::placeholder,
#authPage .auth-input-wrap input::placeholder {
  color: #AAA29A !important;
  opacity: 1 !important;
}

#authPage .chaen-auth-reference-form .form-group input:focus,
#authPage .auth-input-wrap input:focus {
  border-color: #B8A08A !important;
  box-shadow: none !important;
  outline: none !important;
}

#authPage .auth-input-wrap {
  position: relative !important;
  width: 100% !important;
}

#authPage .auth-input-wrap > svg:not(.auth-lock-icon),
#authPage .auth-input-wrap > .auth-lock-icon {
  position: absolute !important;
  z-index: 3 !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 19px !important;
  height: 19px !important;
  color: #9A9188 !important;
  stroke: currentColor !important;
  fill: none !important;
  pointer-events: none !important;
}

#authPage .auth-icon-field .auth-input-wrap input,
#authPage .login-password-field input {
  padding-left: 52px !important;
  padding-right: 48px !important;
}

/* Register / forgot icons are one static background icon each. */
#authPage.register-mode #registerForm input[type="text"],
#authPage.register-mode #registerForm input[type="email"],
#authPage.register-mode #registerForm input[type="tel"],
#authPage.register-mode #registerForm input[type="password"] {
  padding-left: 52px !important;
  padding-right: 48px !important;
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 19px 19px !important;
}

#authPage.forgot-password-mode #forgotEmail {
  padding-left: 52px !important;
  padding-right: 18px !important;
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 19px 19px !important;
}

#authPage .chaen-auth-reference-form .field-hint,
#authPage .chaen-auth-reference-form .password-strength,
#authPage .forgot-email-hint {
  display: block !important;
  margin: 5px 0 0 !important;
  color: #9B9188 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ---------- Password eye ---------- */
#authPage .password-field .password-toggle,
#authPage .login-password-field .login-password-toggle {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9A9188 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#authPage .password-toggle svg,
#authPage .login-password-toggle svg {
  width: 19px !important;
  height: 19px !important;
}

/* ---------- Login ---------- */
#authPage .auth-login-form .chaen-line-login,
#authPage .chaen-login-submit,
#authPage #registerSubmitBtn,
#authPage #forgotSubmitBtn {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 20px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#authPage .auth-login-form .chaen-line-login {
  margin: 0 !important;
  background: #B8A08A !important;
  color: #fff !important;
}

#authPage .auth-login-form .chaen-line-login .chaen-line-copy,
#authPage .auth-login-form .chaen-line-login .chaen-line-copy strong {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

#authPage .auth-login-form .chaen-line-login .chaen-line-bubble,
#authPage .auth-login-form .chaen-line-login .chaen-line-logo-picture,
#authPage .auth-login-form .chaen-line-login .chaen-line-logo-picture img {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  flex: 0 0 26px !important;
}

#authPage .auth-login-form .auth-divider {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 20px 0 20px !important;
  color: #9B9188 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

#authPage .auth-login-form .auth-divider::before,
#authPage .auth-login-form .auth-divider::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #DED7CF !important;
}

#authPage .auth-login-form .auth-login-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  color: #756C64 !important;
  font-size: 12px !important;
}

#authPage .auth-login-form .auth-remember {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
}

#authPage .auth-login-form .auth-remember input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: #B8A08A !important;
}

#authPage .auth-login-meta a,
#authPage .auth-member-join a,
#authPage .auth-footer-links a {
  color: #8F7564 !important;
  text-decoration: none !important;
}

#authPage .auth-login-form .chaen-login-submit {
  margin-top: 20px !important;
  background: #342B26 !important;
  color: #fff !important;
}

#authPage .auth-member-join {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #756C64 !important;
  font-size: 12px !important;
}

/* ---------- Register ---------- */
#authPage.register-mode .chaen-auth-pane {
  padding-top: 52px !important;
}

#authPage.register-mode #registerForm {
  width: min(100%, 608px) !important;
  max-width: 608px !important;
}

#authPage.register-mode #registerForm .form-group {
  margin-bottom: 13px !important;
}

#authPage.register-mode #registerForm .terms-check {
  color: #8B827A !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  margin: 6px 0 8px !important;
}

#authPage.register-mode #registerForm .newsletter-consent {
  margin-top: 0 !important;
}

/* These are optional duplicate visual pathways, not the primary register UI.
   Keep their DOM/handlers intact; only remove their visual presentation. */
#authPage.register-mode #registerForm .register-checklist,
#authPage.register-mode #registerForm > .auth-divider,
#authPage.register-mode #registerForm > .chaen-line-register,
#authPage.register-mode #registerForm > .chaen-register-line-hint {
  display: none !important;
}

#authPage.register-mode #registerSubmitBtn {
  margin-top: 8px !important;
  background: #342B26 !important;
}

#authPage.register-mode #registerForm .auth-footer-links {
  margin-top: 14px !important;
  text-align: center !important;
}

#authPage.register-mode #registerForm .auth-footer-links a {
  color: #8F7564 !important;
  font-size: 13px !important;
}

/* ---------- Forgot password ---------- */
#authPage.forgot-password-mode .chaen-auth-pane {
  padding-top: 70px !important;
}

#authPage.forgot-password-mode #forgotPasswordForm {
  width: min(100%, 632px) !important;
  max-width: 632px !important;
  margin: 0 auto !important;
}

#authPage.forgot-password-mode #forgotPasswordForm .form-group {
  margin-top: 36px !important;
  margin-bottom: 0 !important;
}

#authPage.forgot-password-mode #forgotPasswordForm .form-group label {
  margin-bottom: 7px !important;
}

#authPage.forgot-password-mode #forgotSubmitBtn {
  margin-top: 28px !important;
  background: #342B26 !important;
}

#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
  margin-top: 28px !important;
}

#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 360px !important;
  max-width: 100% !important;
  height: 52px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border: 1px solid #DED7CF !important;
  border-radius: 9999px !important;
  color: #9B9188 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ---------- Compact-height desktop/tablet ----------
   Prevents the login / forgot views from being vertically cropped when the
   browser viewport is short, while retaining the same centered composition. */
@media (min-width: 768px) and (max-height: 720px) {
  #authPage .chaen-auth-shell {
    height: calc(100vh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  #authPage .chaen-auth-pane {
    padding: 30px 28px 24px !important;
  }

  #authPage .chaen-auth-reference-form::before {
    margin-bottom: 14px !important;
    font-size: 25px !important;
  }

  #authPage .auth-login-form .auth-heading-block {
    margin-bottom: 20px !important;
  }

  #authPage .auth-login-form .auth-title,
  #authPage .chaen-auth-reference-form > .auth-title {
    font-size: 27px !important;
  }

  #authPage .auth-login-form .auth-subtitle {
    font-size: 13px !important;
  }

  #authPage .chaen-auth-reference-form .form-group {
    margin-bottom: 11px !important;
  }

  #authPage .chaen-auth-reference-form .form-group input,
  #authPage .auth-input-wrap input {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
  }

  #authPage .auth-login-form .chaen-line-login,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn,
  #authPage #forgotSubmitBtn {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  #authPage .auth-login-form .auth-divider {
    margin: 14px 0 !important;
  }

  #authPage .auth-login-form .chaen-login-submit {
    margin-top: 14px !important;
  }

  #authPage .auth-member-join {
    margin-top: 12px !important;
  }

  #authPage.forgot-password-mode .chaen-auth-pane {
    padding-top: 34px !important;
  }

  #authPage.forgot-password-mode #forgotPasswordForm .form-group {
    margin-top: 24px !important;
  }

  #authPage.forgot-password-mode #forgotSubmitBtn {
    margin-top: 20px !important;
  }

  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
    margin-top: 18px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  #authPage {
    padding: 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #authPage .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
  }

  #authPage .chaen-auth-pane {
    width: 100% !important;
    height: 100% !important;
    padding: 34px 20px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #authPage .chaen-auth-reference-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  #authPage .chaen-auth-reference-form::before {
    font-size: 24px !important;
    margin-bottom: 16px !important;
  }

  #authPage .auth-login-form .auth-heading-block {
    margin-bottom: 22px !important;
  }

  #authPage .auth-login-form .auth-title,
  #authPage .chaen-auth-reference-form > .auth-title {
    font-size: 25px !important;
  }

  #authPage .auth-login-form .auth-subtitle,
  #authPage.register-mode #registerForm > .auth-title::after,
  #authPage.forgot-password-mode #forgotPasswordForm > .auth-title::after {
    font-size: 13px !important;
  }

  #authPage .chaen-auth-reference-form .form-group {
    margin-bottom: 13px !important;
  }

  #authPage .chaen-auth-reference-form .form-group label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  #authPage .chaen-auth-reference-form .form-group input,
  #authPage .auth-input-wrap input {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 13px !important;
    line-height: 46px !important;
    background-size: 18px 18px !important;
    background-position: 15px center !important;
  }

  #authPage .auth-input-wrap > svg:not(.auth-lock-icon),
  #authPage .auth-input-wrap > .auth-lock-icon {
    left: 15px !important;
    width: 18px !important;
    height: 18px !important;
  }

  #authPage .auth-icon-field .auth-input-wrap input,
  #authPage .login-password-field input,
  #authPage.register-mode #registerForm input[type="text"],
  #authPage.register-mode #registerForm input[type="email"],
  #authPage.register-mode #registerForm input[type="tel"],
  #authPage.register-mode #registerForm input[type="password"] {
    padding-left: 45px !important;
    padding-right: 44px !important;
  }

  #authPage.forgot-password-mode #forgotEmail {
    padding-left: 45px !important;
    padding-right: 16px !important;
    background-position: 15px center !important;
  }

  #authPage .password-field .password-toggle,
  #authPage .login-password-field .login-password-toggle {
    right: 7px !important;
    width: 30px !important;
    height: 30px !important;
  }

  #authPage .password-toggle svg,
  #authPage .login-password-toggle svg {
    width: 18px !important;
    height: 18px !important;
  }

  #authPage .auth-login-form .chaen-line-login,
  #authPage .chaen-login-submit,
  #authPage #registerSubmitBtn,
  #authPage #forgotSubmitBtn {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    font-size: 14px !important;
  }

  #authPage .auth-login-form .chaen-line-login .chaen-line-copy,
  #authPage .auth-login-form .chaen-line-login .chaen-line-copy strong {
    font-size: 14px !important;
  }

  #authPage .auth-login-form .chaen-line-login .chaen-line-bubble,
  #authPage .auth-login-form .chaen-line-login .chaen-line-logo-picture,
  #authPage .auth-login-form .chaen-line-login .chaen-line-logo-picture img {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    flex-basis: 23px !important;
  }

  #authPage .auth-login-form .auth-divider {
    margin: 18px 0 !important;
    font-size: 12px !important;
  }

  #authPage .auth-login-form .auth-login-meta {
    font-size: 11px !important;
  }

  #authPage .auth-login-form .chaen-login-submit {
    margin-top: 16px !important;
  }

  #authPage .auth-member-join {
    margin-top: 14px !important;
    font-size: 11px !important;
  }

  #authPage.register-mode .chaen-auth-pane,
  #authPage.forgot-password-mode .chaen-auth-pane {
    padding-top: 30px !important;
  }

  #authPage.register-mode #registerForm .terms-check {
    font-size: 10px !important;
    margin: 5px 0 7px !important;
  }

  #authPage.register-mode #registerSubmitBtn {
    margin-top: 8px !important;
  }

  #authPage.register-mode #registerForm .auth-footer-links {
    margin-top: 12px !important;
  }

  #authPage.forgot-password-mode #forgotPasswordForm .form-group {
    margin-top: 24px !important;
  }

  #authPage.forgot-password-mode #forgotSubmitBtn {
    margin-top: 20px !important;
  }

  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
    margin-top: 18px !important;
  }

  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
    width: 100% !important;
    height: 48px !important;
    font-size: 14px !important;
  }

  #authPage .chaen-auth-close {
    top: 12px !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 22px !important;
    line-height: 24px !important;
  }
}

/* Never repeat an auth background icon. */
#authPage input {
  background-repeat: no-repeat !important;
}


/* ============================================================================
   CHÆN Auth UI — FINAL SINGLE-COLUMN GEOMETRY FIX v5 (2026-08-25)
   Scope: Login / Register / Forgot Password visual geometry only.
   Purpose: override legacy 410px auth-pane/flex-basis rules that were still
   constraining the single-column UI to the left side of the modal.
   No JS/API/auth/business logic changes.
   ============================================================================ */

/* Desktop target frame: match the provided full-size reference screenshots. */
@media (min-width: 1024px) {
  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell,
  #authPage.active.register-mode .chaen-auth-shell,
  #authPage.active.forgot-password-mode .chaen-auth-shell {
    width: 1310px !important;
    height: 1034px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-body,
  #authPage.active.register-mode .chaen-auth-body,
  #authPage.active.forgot-password-mode .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane,
  #authPage.active.register-mode .chaen-auth-pane,
  #authPage.active.forgot-password-mode .chaen-auth-pane {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-reference-form,
  #authPage.active.register-mode .chaen-auth-reference-form,
  #authPage.active.forgot-password-mode .chaen-auth-reference-form {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) #loginForm {
    width: min(100%, 668px) !important;
    max-width: 668px !important;
  }

  #authPage.active.register-mode #registerForm {
    width: min(100%, 608px) !important;
    max-width: 608px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm {
    width: min(100%, 632px) !important;
    max-width: 632px !important;
  }
}

/* Tablet / narrow desktop: still full-width single column, never a 410px pane. */
@media (min-width: 768px) and (max-width: 1023px) {
  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell,
  #authPage.active.register-mode .chaen-auth-shell,
  #authPage.active.forgot-password-mode .chaen-auth-shell {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: calc(100vh - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-body,
  #authPage.active.register-mode .chaen-auth-body,
  #authPage.active.forgot-password-mode .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane,
  #authPage.active.register-mode .chaen-auth-pane,
  #authPage.active.forgot-password-mode .chaen-auth-pane {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) #loginForm,
  #authPage.active.register-mode #registerForm,
  #authPage.active.forgot-password-mode #forgotPasswordForm {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile: preserve responsive modal width, but force the pane to span it. */
@media (max-width: 767px) {
  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell,
  #authPage.active.register-mode .chaen-auth-shell,
  #authPage.active.forgot-password-mode .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-body,
  #authPage.active.register-mode .chaen-auth-body,
  #authPage.active.forgot-password-mode .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane,
  #authPage.active.register-mode .chaen-auth-pane,
  #authPage.active.forgot-password-mode .chaen-auth-pane {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) #loginForm,
  #authPage.active.register-mode #registerForm,
  #authPage.active.forgot-password-mode #forgotPasswordForm {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================================
   CHÆN AUTH UI — FINAL GEOMETRY PATCH v7 (2026-08-25)
   IMPORTANT: This block intentionally overrides older auth UI patches (v5/v6).
   Scope: Login / Register / Forgot Password visual layout only.
   No JS / API / backend / validation / auth-flow changes.
   ============================================================================ */

/* Shared desktop modal frame.  The previous v5 geometry used a 1310x1034
   shell, which is the source of the half-width / split-column appearance. */
@media (min-width: 768px) {
  #authPage.active .chaen-auth-shell {
    position: relative !important;
    width: 600px !important;
    height: 640px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #FAF8F4 !important;
    transform: none !important;
    zoom: 1 !important;
  }

  #authPage.active .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #authPage.active .chaen-auth-pane {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 42px 48px 36px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #FAF8F4 !important;
  }

  #authPage.active .chaen-auth-brand,
  #authPage.active .chaen-auth-benefits,
  #authPage.active .chaen-brand-model,
  #authPage.active .chaen-line-friend-card {
    display: none !important;
  }

  #authPage.active .chaen-auth-reference-form {
    width: 100% !important;
    max-width: 480px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #authPage.active .chaen-auth-reference-form::before {
    content: "CHÆN" !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    text-align: center !important;
    color: #342B26 !important;
    font-family: var(--font-display), "Times New Roman", serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
  }

  #authPage.active .auth-title,
  #authPage.active .auth-login-form .auth-title,
  #authPage.active .chaen-auth-reference-form > .auth-title {
    color: #342B26 !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: .05em !important;
    text-align: center !important;
  }

  #authPage.active .auth-subtitle,
  #authPage.active #registerForm > .auth-title::after,
  #authPage.active #forgotPasswordForm > .auth-title::after {
    display: block !important;
    margin-top: 6px !important;
    color: #9B9188 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  /* Shared input geometry. */
  #authPage.active .auth-form .form-group input,
  #authPage.active .auth-input-wrap input,
  #authPage.active #registerForm input[type="text"],
  #authPage.active #registerForm input[type="email"],
  #authPage.active #registerForm input[type="tel"],
  #authPage.active #registerForm input[type="password"] {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 9999px !important;
    border: 1px solid #DED7CF !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 48px !important;
  }

  #authPage.active .auth-form .form-group label {
    margin-bottom: 8px !important;
    font-size: 14px !important;
  }

  #authPage.active .auth-form .form-group {
    margin-bottom: 20px !important;
  }

  /* Shared primary buttons. */
  #authPage.active .chaen-line-login,
  #authPage.active .chaen-line-register,
  #authPage.active .chaen-login-submit,
  #authPage.active #registerSubmitBtn,
  #authPage.active #forgotSubmitBtn {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  #authPage.active .chaen-line-login,
  #authPage.active .chaen-line-register {
    background: #B8A08A !important;
    color: #FFFFFF !important;
  }

  #authPage.active .chaen-login-submit,
  #authPage.active #registerSubmitBtn,
  #authPage.active #forgotSubmitBtn {
    background: #342B26 !important;
    color: #FFFFFF !important;
  }

  /* Close button is shared across all three views. */
  #authPage.active .chaen-auth-close,
  #authPage.active .modal-close,
  #authPage.active .close-btn {
    top: 16px !important;
    right: 16px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 22px !important;
    line-height: 28px !important;
  }

  /* ---------- Login ---------- */
  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-shell {
    width: 600px !important;
    height: 640px !important;
  }

  #authPage.active:not(.register-mode):not(.forgot-password-mode):not(.reset-password-mode) .chaen-auth-pane {
    padding: 42px 48px 36px !important;
  }

  #authPage.active .auth-login-form {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #authPage.active .auth-login-form .auth-heading-block {
    margin: 0 0 34px !important;
    text-align: center !important;
  }

  #authPage.active .auth-login-form .auth-divider {
    margin: 28px 0 !important;
  }

  #authPage.active .auth-login-meta {
    margin: 0 0 28px !important;
    font-size: 13px !important;
  }

  #authPage.active .auth-member-join {
    margin: 24px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
  }

  /* ---------- Register: 760x700, Name|Phone / Email / Password|Confirm ---------- */
  #authPage.active.register-mode .chaen-auth-shell {
    width: 760px !important;
    height: 700px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
  }

  #authPage.active.register-mode .chaen-auth-pane {
    padding: 30px 52px 32px !important;
  }

  #authPage.active.register-mode #registerForm {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 640px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 0 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #authPage.active.register-mode #registerForm::before {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  #authPage.active.register-mode #registerForm > .auth-title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-bottom: 26px !important;
  }

  #authPage.active.register-mode #registerForm > .form-group {
    margin: 0 0 16px !important;
  }

  #authPage.active.register-mode #registerForm > .form-group:has(#registerName) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  #authPage.active.register-mode #registerForm > .form-group:has(#registerPhone) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
  #authPage.active.register-mode #registerForm > .form-group:has(#registerEmail) {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
  #authPage.active.register-mode #registerForm > .form-group:has(#registerPassword) {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }
  #authPage.active.register-mode #registerForm > .form-group:has(#registerConfirmPassword) {
    grid-column: 2 !important;
    grid-row: 5 !important;
  }

  #authPage.active.register-mode #registerForm .terms-check {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    color: #756B63 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  #authPage.active.register-mode #registerForm .terms-check input[type="checkbox"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  #authPage.active.register-mode #registerForm .register-checklist,
  #authPage.active.register-mode #registerForm > .auth-divider,
  #authPage.active.register-mode #registerForm > .chaen-line-register,
  #authPage.active.register-mode #registerForm > .chaen-register-line-hint {
    display: none !important;
  }

  #authPage.active.register-mode #registerTurnstile,
  #authPage.active.register-mode #registerError,
  #authPage.active.register-mode #registerSubmitBtn,
  #authPage.active.register-mode #registerForm .auth-footer-links {
    grid-column: 1 / -1 !important;
  }

  #authPage.active.register-mode #registerSubmitBtn {
    margin-top: 8px !important;
  }

  #authPage.active.register-mode #registerForm .auth-footer-links {
    margin: 16px 0 0 !important;
    text-align: center !important;
  }

  /* ---------- Forgot Password: 600x520 ---------- */
  #authPage.active.forgot-password-mode .chaen-auth-shell {
    width: 600px !important;
    height: 520px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
  }

  #authPage.active.forgot-password-mode .chaen-auth-pane {
    padding: 42px 48px 36px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .form-group {
    margin: 42px 0 0 !important;
  }

  #authPage.active.forgot-password-mode #forgotSubmitBtn {
    margin-top: 28px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links {
    width: 100% !important;
    margin: 36px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    text-align: center !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links::before {
    content: "或" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 20px !important;
    margin: 0 0 28px !important;
    color: #9B9188 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    background:
      linear-gradient(#DED7CF, #DED7CF) left center / calc(50% - 30px) 1px no-repeat,
      linear-gradient(#DED7CF, #DED7CF) right center / calc(50% - 30px) 1px no-repeat,
      linear-gradient(#FAF8F4, #FAF8F4) center / 44px 20px no-repeat !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 360px !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    border: 1px solid #DED7CF !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: #9B9188 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  #authPage.active {
    padding: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
  }

  #authPage.active .chaen-auth-shell,
  #authPage.active.register-mode .chaen-auth-shell,
  #authPage.active.forgot-password-mode .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    margin: auto !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #authPage.active .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #authPage.active .chaen-auth-pane,
  #authPage.active.register-mode .chaen-auth-pane,
  #authPage.active.forgot-password-mode .chaen-auth-pane {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 30px 20px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #authPage.active .chaen-auth-reference-form,
  #authPage.active .auth-login-form,
  #authPage.active.register-mode #registerForm,
  #authPage.active.forgot-password-mode #forgotPasswordForm {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #authPage.active .auth-title,
  #authPage.active .auth-login-form .auth-title,
  #authPage.active .chaen-auth-reference-form > .auth-title {
    font-size: 25px !important;
  }

  #authPage.active .auth-subtitle,
  #authPage.active #registerForm > .auth-title::after,
  #authPage.active #forgotPasswordForm > .auth-title::after {
    font-size: 13px !important;
  }

  #authPage.active .chaen-line-login,
  #authPage.active .chaen-line-register,
  #authPage.active .chaen-login-submit,
  #authPage.active #registerSubmitBtn,
  #authPage.active #forgotSubmitBtn {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    font-size: 15px !important;
  }

  #authPage.active .auth-form .form-group input,
  #authPage.active .auth-input-wrap input,
  #authPage.active #registerForm input[type="text"],
  #authPage.active #registerForm input[type="email"],
  #authPage.active #registerForm input[type="tel"],
  #authPage.active #registerForm input[type="password"] {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  /* Mobile registration: single column. */
  #authPage.active.register-mode #registerForm {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 20px !important;
  }

  #authPage.active.register-mode #registerForm > .form-group {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  #authPage.active.register-mode #registerForm .terms-check {
    width: 100% !important;
    margin: 6px 0 10px !important;
    font-size: 11px !important;
    white-space: normal !important;
    align-items: flex-start !important;
  }

  #authPage.active.register-mode #registerForm .terms-check span {
    white-space: normal !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .form-group {
    margin-top: 30px !important;
  }

  #authPage.active.forgot-password-mode #forgotSubmitBtn {
    margin-top: 20px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links {
    margin-top: 18px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  #authPage.active .chaen-auth-close,
  #authPage.active .modal-close,
  #authPage.active .close-btn {
    top: 10px !important;
    right: 10px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 20px !important;
    line-height: 26px !important;
  }
}

/* Forgot password modal effective final override (2026-08-25)
   Scope: forgot password form only. */
#authPage.active.forgot-password-mode #forgotPasswordForm,
#authPage.forgot-password-mode #forgotPasswordForm {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
}

#authPage.active.forgot-password-mode #forgotPasswordForm .form-group,
#authPage.forgot-password-mode #forgotPasswordForm .form-group,
#authPage.active.forgot-password-mode #forgotEmail,
#authPage.forgot-password-mode #forgotEmail {
  width: min(100%, clamp(360px, 51vw, 714px)) !important;
  max-width: 714px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#authPage.active.forgot-password-mode #forgotSubmitBtn,
#authPage.forgot-password-mode #forgotSubmitBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, clamp(360px, 51vw, 714px)) !important;
  max-width: 714px !important;
  height: 58px !important;
  min-height: 58px !important;
  margin-top: 40px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

#authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links,
#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
  width: min(100%, clamp(360px, 51vw, 714px)) !important;
  max-width: 714px !important;
  margin: 40px 0 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

#authPage.active.forgot-password-mode #forgotError:empty,
#authPage.active.forgot-password-mode #forgotSuccess:empty,
#authPage.forgot-password-mode #forgotError:empty,
#authPage.forgot-password-mode #forgotSuccess:empty {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links::before,
#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links::before {
  content: "或" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 20px !important;
  margin: 0 0 28px !important;
  color: #9B9188 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  background:
    linear-gradient(#DED7CF, #DED7CF) left center / calc(50% - 30px) 1px no-repeat,
    linear-gradient(#DED7CF, #DED7CF) right center / calc(50% - 30px) 1px no-repeat,
    linear-gradient(#FAF8F4, #FAF8F4) center / 44px 20px no-repeat !important;
}

#authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links a,
#authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, clamp(360px, 51vw, 714px)) !important;
  max-width: 714px !important;
  height: 58px !important;
  min-height: 58px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  #authPage.active.forgot-password-mode #forgotPasswordForm,
  #authPage.forgot-password-mode #forgotPasswordForm {
    width: 100% !important;
    max-width: none !important;
  }

  #authPage.active.forgot-password-mode #forgotSubmitBtn,
  #authPage.forgot-password-mode #forgotSubmitBtn,
  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links a,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
    height: 52px !important;
    min-height: 52px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
    margin-top: 28px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links::before,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links::before {
    content: "或" !important;
    display: flex !important;
    margin-bottom: 18px !important;
  }
}

/* ============================================================================
   CHÆN FORGOT PASSWORD — REFERENCE GEOMETRY FIX v8
   2026-08-25
   Scope: Forgot Password UI only.
   Reference target: the supplied 1402x1122 screenshot (≈ 701x561 CSS px @2x).
   No JS / API / backend / validation / auth-flow changes.
   ============================================================================ */

@media (min-width: 768px) {
  /* Match the same compact desktop auth card proportions as the reference. */
  #authPage.active.forgot-password-mode .chaen-auth-shell,
  #authPage.forgot-password-mode .chaen-auth-shell {
    width: 720px !important;
    height: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #authPage.active.forgot-password-mode .chaen-auth-body,
  #authPage.forgot-password-mode .chaen-auth-body {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #authPage.active.forgot-password-mode .chaen-auth-pane,
  #authPage.forgot-password-mode .chaen-auth-pane {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 100% !important;
    padding: 58px 0 34px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm,
  #authPage.forgot-password-mode #forgotPasswordForm {
    width: 360px !important;
    max-width: 360px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* CHÆN logo → title spacing follows the supplied reference. */
  #authPage.active.forgot-password-mode #forgotPasswordForm::before,
  #authPage.forgot-password-mode #forgotPasswordForm::before {
    margin: 0 0 24px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm > .auth-title,
  #authPage.forgot-password-mode #forgotPasswordForm > .auth-title {
    margin: 0 !important;
    font-size: 30px !important;
    line-height: 1.35 !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm > .auth-title::after,
  #authPage.forgot-password-mode #forgotPasswordForm > .auth-title::after {
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* The reference uses a narrower content column than the old 600px modal. */
  #authPage.active.forgot-password-mode #forgotPasswordForm .form-group,
  #authPage.forgot-password-mode #forgotPasswordForm .form-group {
    width: 360px !important;
    max-width: 360px !important;
    margin: 24px auto 0 !important;
  }

  #authPage.active.forgot-password-mode #forgotEmail,
  #authPage.forgot-password-mode #forgotEmail {
    width: 360px !important;
    max-width: 360px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .forgot-email-hint,
  #authPage.forgot-password-mode #forgotPasswordForm .forgot-email-hint {
    width: 360px !important;
    max-width: 360px !important;
    margin: 8px auto 0 !important;
  }

  #authPage.active.forgot-password-mode #forgotSubmitBtn,
  #authPage.forgot-password-mode #forgotSubmitBtn {
    width: 360px !important;
    max-width: 360px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 40px auto 0 !important;
    box-sizing: border-box !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links {
    width: 360px !important;
    max-width: 360px !important;
    margin: 40px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links::before,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links::before {
    margin-bottom: 24px !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links a,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
    width: 360px !important;
    max-width: 360px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  /* Mobile remains responsive; do not inherit the desktop 360px hard width. */
  #authPage.active.forgot-password-mode .chaen-auth-shell,
  #authPage.forgot-password-mode .chaen-auth-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #authPage.active.forgot-password-mode .chaen-auth-pane,
  #authPage.forgot-password-mode .chaen-auth-pane {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 30px 20px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #authPage.active.forgot-password-mode #forgotPasswordForm,
  #authPage.forgot-password-mode #forgotPasswordForm,
  #authPage.active.forgot-password-mode #forgotPasswordForm .form-group,
  #authPage.forgot-password-mode #forgotPasswordForm .form-group,
  #authPage.active.forgot-password-mode #forgotEmail,
  #authPage.forgot-password-mode #forgotEmail,
  #authPage.active.forgot-password-mode #forgotSubmitBtn,
  #authPage.forgot-password-mode #forgotSubmitBtn,
  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links,
  #authPage.active.forgot-password-mode #forgotPasswordForm .auth-footer-links a,
  #authPage.forgot-password-mode #forgotPasswordForm .auth-footer-links a {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ==========================================================
   CHÆN AUTH — INDEPENDENT MEMBER PAGES
   Login / Register / Forgot Password / Reset Password /
   Registration Email Verification are normal page content.
   Other site modals remain untouched.
   ========================================================== */
#authPage.auth-page {
  --auth-page-gutter: clamp(16px, 3vw, 40px);
  display: none;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: auto !important;
}
#authPage.auth-page.active { display: block !important; }
#authPage .auth-page-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px var(--auth-page-gutter) 72px;
  box-sizing: border-box;
}
#authPage .auth-page-shell {
  position: relative !important;
  width: min(1060px, 100%) !important;
  max-width: 1060px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 20px !important;
  background: var(--bg-card, #fff) !important;
  box-shadow: 0 14px 45px rgba(50,40,32,.08) !important;
}
#authPage .chaen-auth-body { min-height: 0 !important; }
#authPage .chaen-auth-pane {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#authPage .chaen-auth-close { display: none !important; }
#authPage .auth-form.is-inactive-auth-view { display: none !important; }
#authPage .auth-form.is-active-auth-view { display: block !important; }
@media (max-width: 767px) {
  #authPage .auth-page-container { padding: 24px 12px 48px; }
  #authPage .auth-page-shell { width: 100% !important; border-radius: 16px !important; }
  #authPage .chaen-auth-body { display: block !important; }
  #authPage .chaen-auth-pane { overflow: visible !important; padding: 28px 22px 32px !important; }
}


/* Email verification is a normal page, not an overlay/modal. */
#emailVerificationPage { display: none; }
#emailVerificationPage.active { display: block !important; }
#emailVerificationPage .email-verification-page-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  box-sizing: border-box;
}
#emailVerificationPage .email-verification-landing {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex;
  min-height: 520px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#emailVerificationPage .email-verification-card { max-width: 620px; }
@media (max-width: 767px) {
  #emailVerificationPage .email-verification-page-container { padding: 24px 12px 48px; }
  #emailVerificationPage .email-verification-landing { min-height: 420px; padding: 12px; }
}

/* ================================================================
   CHÆN — FINAL NORMAL DOCUMENT FLOW / FOOTER FIX (2026-08-25)
   The member page itself must occupy a normal full-width block. The
   existing auth card styling is retained; only the page-level overlay/flex
   behavior is neutralized so the shared footer remains directly below it.
   No footer hiding or fixed positioning is used.
   ================================================================ */
.page-view {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.page-view.active {
  display: block !important;
}

#authPage.auth-page,
#authPage.auth-page.active {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  z-index: auto !important;
  flex: none !important;
  align-items: initial !important;
  justify-content: initial !important;
}

#authPage.auth-page .auth-page-container {
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Keep the existing login/register/forgot/reset card layout untouched. */
#authPage.auth-page .chaen-auth-shell {
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

/* The page itself is the only scroll context. Never force the footer into
   the auth card or hide it to compensate for a layout problem. */
#authPage.auth-page .chaen-auth-pane {
  scrollbar-gutter: auto !important;
}

.site-footer,
body > .site-footer {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: both !important;
  transform: none !important;
  box-sizing: border-box !important;
  z-index: auto !important;
}

@media (max-width: 767px) {
  #authPage.auth-page .auth-page-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ================================================================
   CHÆN AUTH / FOOTER — FINAL DOM FLOW GUARD (2026-08-25)
   The auth page is a normal sibling page-view. It must never render on
   home/product pages, and the global footer remains a normal sibling below
   the active page. No footer hiding or positioning workaround is used.
   ================================================================ */
#authPage.auth-page {
  display: none !important;
  position: relative !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  flex: none !important;
  align-items: initial !important;
  justify-content: initial !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: auto !important;
}
#authPage.auth-page.active {
  display: block !important;
}

/* iOS/Safari stale-state guard:
   authPage may retain the legacy .active class after SPA navigation or bfcache
   restoration. Only an explicit auth route may make the page visible. */
#authPage.auth-page.active:not([data-auth-route="true"]) {
  display: none !important;
}
#authPage.auth-page.active[data-auth-route="true"] {
  display: block !important;
}

/* All page-views participate in one normal document flow. */
.page-view {
  position: relative;
  float: none !important;
  clear: both !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.page-view:not(.active) { display: none !important; }
.page-view.active { display: block !important; }

/* Footer is never a child of auth after the DOM fix; keep it in normal flow. */
.site-footer {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  z-index: auto !important;
}

/* ============================================================================
   CHÆN REGISTER PAGE — FINAL INDEPENDENT PAGE LAYOUT v2 (2026-08-25)
   The register screen is a normal document page, not a modal. Keep the
   established two-column form layout, but remove every internal height/scroll
   constraint so the entire registration form is rendered in one page flow.
   Existing IDs, validation and JS behavior are untouched.
   ============================================================================ */
#authPage.auth-page.register-mode,
#authPage.auth-page.register-mode.active {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

#authPage.register-mode .auth-page-container {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 18px 24px 34px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#authPage.register-mode .chaen-auth-shell,
#authPage.register-mode .auth-page-shell {
  position: relative !important;
  display: block !important;
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-y: visible !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

#authPage.register-mode .chaen-auth-body {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#authPage.register-mode .chaen-auth-pane {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 30px 52px 22px !important;
  box-sizing: border-box !important;
}

#authPage.register-mode #registerForm.is-active-auth-view {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#authPage.register-mode #registerForm.is-active-auth-view > .auth-title {
  display: block !important;
  margin: 0 0 18px !important;
  text-align: center !important;
  font-size: 30px !important;
  line-height: 1.35 !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view > .auth-title::after {
  content: "開啟質感生活的選擇" !important;
  display: block !important;
  margin-top: 5px !important;
  color: #A59B94 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-fields-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 38px !important;
  row-gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: start !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-fields-grid > .form-group {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 13px !important;
  box-sizing: border-box !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-name-group { grid-column: 1 !important; }
#authPage.register-mode #registerForm.is-active-auth-view .register-phone-group { grid-column: 2 !important; }
#authPage.register-mode #registerForm.is-active-auth-view .register-email-group { grid-column: 1 / -1 !important; }
#authPage.register-mode #registerForm.is-active-auth-view .register-password-group { grid-column: 1 !important; }
#authPage.register-mode #registerForm.is-active-auth-view .register-confirm-group { grid-column: 2 !important; }

#authPage.register-mode #registerForm.is-active-auth-view .register-fields-grid label {
  display: block !important;
  margin: 0 0 6px !important;
  color: #342B26 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-input-wrap,
#authPage.register-mode #registerForm.is-active-auth-view .register-password-wrap {
  position: relative !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-input-wrap,
#authPage.register-mode #registerForm.is-active-auth-view .register-password-wrap {
  border: 1px solid #DDD5CE !important;
  border-radius: 9999px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-input-wrap > svg,
#authPage.register-mode #registerForm.is-active-auth-view .register-lock-icon {
  position: absolute !important;
  left: 19px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%) !important;
  fill: none !important;
  stroke: #91867E !important;
  stroke-width: 1.6 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-input-wrap input,
#authPage.register-mode #registerForm.is-active-auth-view .register-password-wrap input {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: #342B26 !important;
  font-size: 14px !important;
  line-height: 50px !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-input-wrap input {
  padding: 0 18px 0 54px !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-password-wrap input {
  padding: 0 52px 0 54px !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .password-toggle {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  color: #91867E !important;
  box-shadow: none !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .field-hint,
#authPage.register-mode #registerForm.is-active-auth-view #registerPasswordStrength {
  display: block !important;
  margin: 5px 0 0 !important;
  color: #9A8F87 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-actions {
  display: block !important;
  width: 100% !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-actions .terms-check {
  display: flex !important;
  width: 100% !important;
  margin: 3px 0 6px !important;
  padding: 0 !important;
  align-items: flex-start !important;
  gap: 8px !important;
  color: #756B63 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .terms-check input[type="checkbox"] {
  flex: 0 0 17px !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .newsletter-consent small {
  font-size: 11px !important;
  color: #A39A93 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-checklist,
#authPage.register-mode #registerForm.is-active-auth-view .register-actions > .auth-divider,
#authPage.register-mode #registerForm.is-active-auth-view .chaen-line-register,
#authPage.register-mode #registerForm.is-active-auth-view .chaen-register-line-hint {
  display: none !important;
}

#authPage.register-mode #registerForm.is-active-auth-view #registerTurnstile {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

#authPage.register-mode #registerForm.is-active-auth-view #registerError {
  width: 100% !important;
  margin: 3px 0 0 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view #registerSubmitBtn {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  margin: 9px 0 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: #342B26 !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  box-sizing: border-box !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .auth-footer-links {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #756B63 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .auth-footer-links a {
  display: inline-flex !important;
  width: auto !important;
  min-width: 104px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 0 20px !important;
  border: 1px solid #B8AAA0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: #8A6652 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .auth-footer-links a:hover {
  background: rgba(184, 170, 160, .08) !important;
  border-color: #9E897B !important;
  color: #795C4C !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .auth-footer-links a:focus-visible {
  outline: 2px solid rgba(158, 137, 123, .45) !important;
  outline-offset: 2px !important;
}

/* Desktop: the document itself may scroll if the viewport is unusually short,
   but the registration card can NEVER create a nested scrollbar. */
@media (min-width: 768px) {
  #authPage.register-mode,
  #authPage.register-mode .auth-page-container,
  #authPage.register-mode .chaen-auth-shell,
  #authPage.register-mode .auth-page-shell,
  #authPage.register-mode .chaen-auth-body,
  #authPage.register-mode .chaen-auth-pane,
  #authPage.register-mode #registerForm.is-active-auth-view {
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
  }
}

/* Mobile keeps the same form logic but returns to one column for usability. */
@media (max-width: 767px) {
  #authPage.register-mode .auth-page-container {
    padding: 16px 12px 32px !important;
  }
  #authPage.register-mode .chaen-auth-shell,
  #authPage.register-mode .auth-page-shell {
    width: 100% !important;
    max-width: 100% !important;
  }
  #authPage.register-mode .chaen-auth-pane {
    padding: 26px 22px 24px !important;
  }
  #authPage.register-mode #registerForm.is-active-auth-view .register-fields-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  #authPage.register-mode #registerForm.is-active-auth-view .register-name-group,
  #authPage.register-mode #registerForm.is-active-auth-view .register-phone-group,
  #authPage.register-mode #registerForm.is-active-auth-view .register-email-group,
  #authPage.register-mode #registerForm.is-active-auth-view .register-password-group,
  #authPage.register-mode #registerForm.is-active-auth-view .register-confirm-group {
    grid-column: auto !important;
    width: 100% !important;
  }
}





/* ================================================================
   CHÆN LOGIN — INDEPENDENT PAGE FINAL UI FIX
   2026-08-25
   UI-only. Keep existing login / LINE / forgot-password / register
   behavior, IDs, handlers and routes unchanged.
   - No inner scrollbar on the login page.
   - Login card remains a light framed card.
   - "Welcome to CHÆN" is centered against the full login form.
   - Subtitle is slightly enlarged for the intended visual hierarchy.
   ================================================================ */

/* Login page is normal document flow, not a modal viewport. */
#authPage.auth-page.active[data-auth-view="login"] {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#authPage.auth-page.active[data-auth-view="login"] .auth-page-container {
  width: 100% !important;
  max-width: 1180px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 28px 24px 30px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="login"] .chaen-auth-shell,
#authPage.auth-page.active[data-auth-view="login"] .auth-page-shell {
  width: min(600px, calc(100vw - 48px)) !important;
  max-width: 600px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-y: visible !important;
  border: 1px solid rgba(120, 100, 85, 0.10) !important;
  border-radius: 18px !important;
  background: #FAF8F4 !important;
  box-shadow: 0 8px 28px rgba(50, 40, 32, 0.035) !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="login"] .chaen-auth-body {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="login"] .chaen-auth-pane {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 32px 48px 30px !important;
  box-sizing: border-box !important;
}

/* Keep the form compact enough to fit as one normal page at common desktop heights. */
#authPage.auth-page.active[data-auth-view="login"] #loginForm.auth-login-form,
#authPage.auth-page.active[data-auth-view="login"] #loginForm.auth-login-form.is-active-auth-view {
  display: block !important;
  width: 100% !important;
  max-width: 496px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* CHÆN wordmark above the login heading. */
#authPage.auth-page.active[data-auth-view="login"] #loginForm.auth-login-form::before {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  text-align: center !important;
  color: #342B26 !important;
  font-family: var(--font-display), "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
}

/*
 * IMPORTANT:
 * Use flex alignment instead of relying only on text-align.
 * This guarantees "Welcome to CHÆN" is centered to the full form width,
 * rather than to an older narrow heading width left by legacy modal CSS.
 */
#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-heading-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-heading-block .auth-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #342B26 !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: .05em !important;
  text-align: center !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-heading-block .auth-subtitle {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  align-self: center !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  color: #9B9188 !important;
  font-family: var(--font-display), "Cormorant Garamond", serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* LINE */
#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-line-login {
  display: inline-flex !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: #B79F8A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-line-login .chaen-line-copy,
#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-line-login .chaen-line-copy strong {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-line-login .chaen-line-bubble,
#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-line-login .chaen-line-logo-picture,
#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-line-login .chaen-line-logo-picture img {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;
}

/* Keep the existing hint compact. */
#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-login-line-hint {
  margin: 5px 0 0 !important;
  color: #A39A93 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Divider */
#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-divider {
  width: 100% !important;
  margin: 18px 0 20px !important;
  color: #9B9188 !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

/* Fields */
#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-icon-field,
#authPage.auth-page.active[data-auth-view="login"] #loginForm .login-password-field {
  width: 100% !important;
  margin: 0 0 15px !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-icon-field label {
  display: block !important;
  margin: 0 0 7px !important;
  color: #342B26 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-input-wrap {
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border: 1px solid #D8CEC6 !important;
  border-radius: 9999px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-input-wrap > svg,
#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-input-wrap > .auth-lock-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%) !important;
  color: #91867E !important;
  stroke: currentColor !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-input-wrap input {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 18px 0 52px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  outline: none !important;
  background: transparent !important;
  color: #342B26 !important;
  font-size: 14px !important;
  line-height: 46px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .login-password-field input {
  padding-right: 52px !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .login-password-toggle {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: #91867E !important;
  box-shadow: none !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-login-meta {
  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: #756B63 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-login-meta a {
  color: #8A6652 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .chaen-login-submit {
  display: inline-flex !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: #2F2723 !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-member-join {
  display: flex !important;
  width: 100% !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #756B63 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-member-join a {
  display: inline-flex !important;
  width: auto !important;
  min-width: 104px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  border: 1px solid #B8AAA0 !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: #8A6652 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-member-join a:hover {
  background: rgba(184, 170, 160, 0.08) !important;
  border-color: #9E897B !important;
  color: #795C4C !important;
}

#authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-member-join a:focus-visible {
  outline: 2px solid rgba(158, 137, 123, 0.45) !important;
  outline-offset: 2px !important;
}

/* Desktop: compact normal-flow layout, no nested scroll container. */
@media (min-width: 768px) {
  #authPage.auth-page.active[data-auth-view="login"] .chaen-auth-pane,
  #authPage.auth-page.active[data-auth-view="login"] .chaen-auth-shell,
  #authPage.auth-page.active[data-auth-view="login"] .auth-page-shell {
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

/* Mobile: keep the same visual language without horizontal scrolling. */
@media (max-width: 767px) {
  #authPage.auth-page.active[data-auth-view="login"] .auth-page-container {
    padding: 16px 12px 32px !important;
  }

  #authPage.auth-page.active[data-auth-view="login"] .chaen-auth-shell,
  #authPage.auth-page.active[data-auth-view="login"] .auth-page-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  #authPage.auth-page.active[data-auth-view="login"] .chaen-auth-pane {
    padding: 28px 22px 28px !important;
  }

  #authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-heading-block .auth-subtitle {
    font-size: 16px !important;
  }

  #authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-member-join {
    flex-wrap: nowrap !important;
  }

  #authPage.auth-page.active[data-auth-view="login"] #loginForm .auth-member-join a {
    min-width: 100px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 18px !important;
  }
}



/* ================================================================
   CART DRAWER — DESKTOP TYPOGRAPHY RESTORE (20260825)
   Corrects the oversized desktop typography introduced by the previous
   cart typography patch. Appearance-only; no cart logic is changed.
   ================================================================ */
@media (min-width: 1025px) {
  .cart-drawer-header {
    padding: 32px !important;
  }

  .cart-drawer-header h3 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
  }

  .cart-drawer-header p {
    margin-top: 7px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .cart-drawer-body {
    padding: 0 32px 10px !important;
  }

  .cart-item {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 20px 0 !important;
  }

  .cart-item-image {
    width: 96px !important;
    height: 96px !important;
    border-radius: 14px !important;
  }

  .cart-item-main {
    gap: 13px !important;
  }

  .cart-item-name {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .cart-item-variant {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-top: 0 !important;
  }

  .cart-item-unit-price,
  .cart-item-subtotal {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .cart-item-original-price,
  .cart-item-addon-original {
    font-size: 13px !important;
  }

  .cart-item-qty {
    width: 96px !important;
    height: 34px !important;
    border-radius: 999px !important;
  }

  .cart-item-qty button {
    width: 32px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .cart-item-qty span {
    width: 32px !important;
    line-height: 34px !important;
    font-size: 14px !important;
  }

  .cart-free-shipping {
    margin: 0 0 18px !important;
    padding: 16px 18px 15px !important;
    border-radius: 18px !important;
  }

  .cart-free-shipping-title {
    gap: 12px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .cart-free-shipping-icon {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .cart-free-shipping-track {
    height: 8px !important;
    margin: 14px 0 11px !important;
  }

  .cart-free-shipping-meta {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .cart-drawer-footer {
    padding: 18px 32px 26px !important;
  }

  .cart-footer-summary {
    margin-bottom: 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .cart-total {
    font-size: 14px !important;
    gap: 9px !important;
  }

  .cart-total #cartTotal {
    font-size: 24px !important;
    font-weight: 500 !important;
  }

  .cart-checkout-btn {
    height: 62px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }
}


/* ================================================================
   CART DRAWER — TEXT VISIBILITY + COMPACT HEADER PATCH (20260825)
   Appearance-only. Keeps existing cart structure and calculations.
   ================================================================ */
.cart-drawer-header h3 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

.cart-drawer-header p,
#cartDrawerCount {
  color: #6b6058 !important;
  font-weight: 600 !important;
}

.cart-item-variant {
  color: #5f564f !important;
  font-weight: 500 !important;
}

.cart-free-shipping-meta {
  color: #4a423c !important;
  font-weight: 600 !important;
}

.cart-footer-summary {
  color: #4a423c !important;
  font-weight: 600 !important;
}

.cart-total {
  color: #4a423c !important;
  font-weight: 600 !important;
}

.cart-total #cartTotal {
  font-weight: 600 !important;
}

/* Keep the thinner progress track already established by the cart UI. */
.cart-free-shipping-track {
  height: 8px !important;
}

@media (max-width: 767px) {
  .cart-free-shipping-track {
    height: 8px !important;
  }
}


/* ============================================================================
   CHÆN MOBILE REGISTER — OUTER DOCUMENT SCROLL ONLY (Safari)
   Scope: register page only. Do not lock html/body/document.
   The auth content must not become a nested scroll container.
   ============================================================================ */
@media (max-width: 767px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* The register screen is a normal document-flow page, not a viewport lock. */
  #authPage.auth-page,
  #authPage.auth-page.active,
  #authPage.active.register-mode {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    background: transparent !important;
    transform: none !important;
  }

  #authPage.active.register-mode .auth-page-container,
  #authPage.register-mode .auth-page-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 24px 12px 48px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #authPage.active.register-mode .chaen-auth-shell,
  #authPage.register-mode .chaen-auth-shell,
  #authPage.active.register-mode .auth-page-shell {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #authPage.active.register-mode .chaen-auth-body,
  #authPage.register-mode .chaen-auth-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Remove only the inner register scroll container. */
  #authPage.active.register-mode .chaen-auth-pane,
  #authPage.register-mode .chaen-auth-pane {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
    box-sizing: border-box !important;
  }

  #authPage.active.register-mode #registerForm,
  #authPage.register-mode #registerForm {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ============================================================================
   CHÆN Register Consent Text Visibility Patch (2026-08-26)
   Scope: Registration consent text only.
   - Increase contrast/weight for membership terms + newsletter consent.
   - No layout, validation, API, database, or business-logic changes.
   ============================================================================ */
#authPage.register-mode #registerForm.is-active-auth-view .register-actions .terms-check {
  color: #4F4741 !important;
  font-weight: 500 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .register-actions .terms-check a {
  color: #4A4039 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

#authPage.register-mode #registerForm.is-active-auth-view .newsletter-consent {
  color: #4F4741 !important;
  font-weight: 500 !important;
}

#authPage.register-mode #registerForm.is-active-auth-view .newsletter-consent small {
  color: #6B625B !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}


/* CHÆN C2C return shipment modal — scoped to the waiting-shipment action only. */
body.return-shipment-modal-open { overflow: hidden; }
.return-shipment-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(34, 31, 28, 0.42);
  box-sizing: border-box;
}
.return-shipment-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 860px);
  overflow: auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e6ded6;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(38, 31, 26, 0.20);
  color: #262321;
}
.return-shipment-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f5f1ed;
  color: #4b4540;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.return-shipment-modal-head { padding-right: 44px; margin-bottom: 18px; }
.return-shipment-modal-kicker { display: block; color: #8c7a6c; font-size: 12px; letter-spacing: .08em; margin-bottom: 5px; }
.return-shipment-modal-head h2 { margin: 0 0 7px; font-size: 24px; }
.return-shipment-modal-head p { margin: 0; color: #756b64; font-size: 13px; line-height: 1.7; }
.return-shipment-center-card,
.return-shipment-instructions,
.return-shipment-form {
  border: 1px solid #e8e0d9;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  margin-bottom: 14px;
}
.return-shipment-provider {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-radius: 9px;
  background: #f3eee9;
  color: #756b64;
  font-size: 13px;
}
.return-shipment-provider strong { color: #262321; }
.return-shipment-provider > span { font-weight: 700; }
.return-shipment-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.return-shipment-info-grid > div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #eee7e1; font-size: 13px; }
.return-shipment-info-grid > div:nth-last-child(-n+1) { border-bottom: 0; }
.return-shipment-info-grid span { color: #8b8179; }
.return-shipment-info-grid strong { color: #262321; text-align: right; }
.return-shipment-instructions h3 { margin: 0 0 10px; font-size: 16px; }
.return-shipment-instructions .return-guide-richtext { max-height: 240px; overflow: auto; color: #5e5650; }
.return-shipment-instructions .return-guide-richtext img { max-width: 100%; height: auto; border-radius: 10px; }
.return-shipment-form > label:first-child { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.return-shipment-form .return-input { width: 100%; box-sizing: border-box; }
.return-shipment-form small { display: block; margin-top: 7px; color: #9b8f86; font-size: 12px; }
.return-shipment-form .return-confirm-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 13px; color: #5b524b; font-size: 13px; line-height: 1.6; }
.return-shipment-submit { width: 100%; min-height: 48px; margin-top: 14px; border: 0; border-radius: 999px; background: #5f554f; color: #fff; font-weight: 600; cursor: pointer; }
.return-shipment-submit:disabled { opacity: .6; cursor: wait; }
.return-reference-footer { gap: 12px; align-items: center; }
.return-reference-footer .return-reference-shipment { min-width: 200px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: #5f554f; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.return-reference-footer .return-reference-shipment + .return-reference-back { margin-top: 0; }
@media (max-width: 640px) {
  .return-reference-footer { flex-direction: column; align-items: stretch; }
  .return-reference-footer .return-reference-shipment,
  .return-reference-footer .return-reference-back { width: 100%; }
}
@media (max-width: 640px) {
  .return-shipment-modal-overlay { padding: 10px; align-items: flex-end; }
  .return-shipment-modal { width: 100%; max-height: 92vh; border-radius: 16px 16px 10px 10px; padding: 20px 16px; }
  .return-shipment-info-grid { grid-template-columns: 1fr; }
  .return-shipment-provider { flex-direction: column; gap: 5px; }
}


/* CHÆN C2C return progress — 20260828 timeline spacing / duplicate logistics fix.
   Scope: member return progress view only. Eight visible stages:
   退貨申請中 → 退貨申請已核准 → 等待寄回商品 → 退貨運送中
   → 退貨商品已收件 → 商品查驗中 → 退款處理中 → 退款完成.
*/
#returnRequestPage.return-progress-mode .return-reference-timeline {
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 0 !important;
}

#returnRequestPage.return-progress-mode .return-reference-step {
  min-width: 0 !important;
  overflow: visible !important;
}

#returnRequestPage.return-progress-mode .return-reference-step-label {
  width: 100% !important;
  max-width: 100px !important;
  min-height: 38px !important;
  margin: 0 auto !important;
  padding: 0 3px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode .return-reference-timeline {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-label {
    max-width: 92px !important;
    font-size: 13px !important;
    min-height: 38px !important;
  }
}

/* CHÆN 退貨進度｜退貨提醒參考圖版面（僅限會員退貨進度）
   四欄橫向排列；保留既有文字、鈴鐺 icon 與其他流程 UI。 */
#returnRequestPage.return-progress-mode .return-reference-help-card {
  display: block !important;
  padding: 28px 34px 30px !important;
  border: 1px solid #eee7e1 !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminders {
  padding: 0 !important;
  border: 0 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminders h3 {
  margin: 0 0 26px !important;
  font-size: 25px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-sections {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-section {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 34px !important;
  border-left: 1px solid #e8e1db !important;
  box-sizing: border-box !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-section:first-child {
  padding-left: 0 !important;
  border-left: 0 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-section:last-child {
  padding-right: 0 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-section h4 {
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: #272523 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-section ul {
  margin: 0 !important;
  padding: 0 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-section li {
  margin: 0 !important;
  padding-left: 20px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  color: #3f3a36 !important;
}

#returnRequestPage.return-progress-mode .return-reference-reminder-section li::before {
  left: 2px !important;
  top: 0 !important;
  font-size: 18px !important;
  color: #3f3a36 !important;
}

@media (max-width: 900px) {
  #returnRequestPage.return-progress-mode .return-reference-reminder-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 24px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section {
    padding: 0 24px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section:nth-child(3) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

@media (max-width: 600px) {
  #returnRequestPage.return-progress-mode .return-reference-help-card {
    padding: 22px 18px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-sections {
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section,
  #returnRequestPage.return-progress-mode .return-reference-reminder-section:nth-child(3) {
    padding: 0 !important;
    border-left: 0 !important;
  }
}


/* CHÆN C2C return progress — 9 stages single-row final guard.
   Scope: member return progress only.
   Keep the existing SVG/icon sources unchanged. The timeline itself is forced
   to nine equal grid tracks so stage 9 cannot fall onto a second row. */
#returnRequestPage.return-progress-mode .return-reference-timeline {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, auto) !important;
  grid-auto-flow: column !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#returnRequestPage.return-progress-mode .return-reference-step {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  grid-row: 1 !important;
}

#returnRequestPage.return-progress-mode .return-reference-step-label {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode .return-reference-timeline {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, auto) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-step-label {
    max-width: 100% !important;
    font-size: 12px !important;
  }
}


/* CHÆN｜退款填寫會員中心獨立頁面 v2
   Scope: #refundDataPage only. Keeps the existing member-center shell/sidebar
   while separating refund entry from the return-progress view. */
#refundDataPage.member-tab{box-sizing:border-box;width:100%;}
#refundDataPage .member-refund-data-page{max-width:920px;margin:0 auto;padding:0 0 56px;}
#refundDataPage .member-refund-data-head{display:flex;align-items:flex-start;gap:18px;margin:0 0 22px;}
#refundDataPage .member-refund-data-head > div{order:1;}
#refundDataPage .member-refund-data-head .member-refund-data-back{order:2;margin-left:auto;color:#332d28;font-weight:700;}

#refundDataPage .member-refund-data-head h2{margin:0 0 7px;font-size:25px;line-height:1.35;font-weight:700;color:#262321;}
#refundDataPage .member-refund-data-head p{margin:0;color:#7d746d;font-size:13px;line-height:1.7;}
#refundDataPage .member-refund-data-back{border:1px solid #ded7d1;background:#fff;border-radius:999px;padding:9px 15px;display:inline-flex;gap:5px;align-items:center;cursor:pointer;color:#4a423c;font:inherit;font-size:13px;white-space:nowrap;}
#refundDataPage .member-refund-data-back:hover{background:#faf8f5;}
#refundDataPage .member-refund-data-card{background:#fff;border:1px solid #e9e2dc;border-radius:12px;padding:18px;margin-bottom:14px;box-sizing:border-box;}
#refundDataPage .member-refund-section-title{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
#refundDataPage .member-refund-section-title h3{margin:0;font-size:15px;line-height:1.4;color:#262321;}
#refundDataPage .member-refund-section-title h3 em,
#refundDataPage .member-refund-field label em{font-style:normal;color:#b34e3d;margin-left:2px;}
#refundDataPage .member-refund-step-number{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#171513;color:#fff;font-size:11px;font-weight:700;flex:0 0 22px;}
#refundDataPage .member-refund-method-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#refundDataPage .member-refund-method-option{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:46px;padding:10px 13px;border:1px solid #e5ddd6;border-radius:9px;box-sizing:border-box;font-size:13px;color:#39322d;cursor:pointer;}
#refundDataPage .member-refund-method-option.is-selected{border-color:#c49a67;background:#fcf8f1;}
#refundDataPage .member-refund-method-option input{margin:0;accent-color:#171513;}
#refundDataPage .member-refund-method-option span{font-size:11px;color:#857a72;}
#refundDataPage .member-refund-bank-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;}
#refundDataPage .member-refund-field{min-width:0;}
#refundDataPage .member-refund-field-full{grid-column:1 / -1;}
#refundDataPage .member-refund-field label{display:block;margin:0 0 7px;font-size:12px;font-weight:600;color:#4b423b;}
#refundDataPage .member-refund-field select,
#refundDataPage .member-refund-field input,
#refundDataPage .member-refund-field .return-input{width:100%;height:42px;box-sizing:border-box;border:1px solid #e1d9d2;border-radius:8px;background:#fff;color:#38312c;padding:0 12px;font:inherit;font-size:13px;outline:none;}
#refundDataPage .member-refund-field select:focus,
#refundDataPage .member-refund-field input:focus{border-color:#a58c76;box-shadow:0 0 0 2px rgba(165,140,118,.10);}
#refundDataPage .member-refund-other-bank{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:13px;border:1px solid #e9e0d8;border-radius:9px;background:#faf8f5;}
#refundDataPage .member-refund-confirm-card{padding-bottom:20px;}
#refundDataPage .member-refund-confirm-notice{padding:12px 14px;border:1px solid #ecdcc7;background:#fffaf1;border-radius:8px;color:#62574d;font-size:12px;line-height:1.65;margin-bottom:12px;}
#refundDataPage .member-refund-confirm-check{display:flex;align-items:center;gap:8px;font-size:12px;color:#4d443d;cursor:pointer;margin-bottom:16px;}
#refundDataPage .member-refund-confirm-check input{margin:0;accent-color:#171513;}
#refundDataPage .member-refund-submit{display:block;width:min(330px,100%);height:46px;margin:0 auto;border:0;border-radius:999px;background:#171513;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s ease;}
#refundDataPage .member-refund-submit:disabled{opacity:.45;cursor:not-allowed;}
#refundDataPage .member-refund-security-note{text-align:center;color:#aaa19a;font-size:11px;margin-top:10px;}
#refundDataPage .member-orders-error{margin:0;}
@media(max-width:767px){
  #refundDataPage .member-refund-data-page{padding:0 0 42px;}
  #refundDataPage .member-refund-data-head{display:block;}
  #refundDataPage .member-refund-data-back{margin-bottom:15px;}
  #refundDataPage .member-refund-method-options,
  #refundDataPage .member-refund-bank-form,
  #refundDataPage .member-refund-other-bank{grid-template-columns:1fr;}
  #refundDataPage .member-refund-field-full{grid-column:auto;}
}
#refundDataPage .member-refund-bank-notice{padding:11px 13px;border:1px solid #efd9b9;background:#fffaf1;border-radius:8px;color:#66584b;font-size:12px;line-height:1.65;}


/* CHÆN｜退款資料填寫頁面｜文字清晰度修正
   僅作用於 #refundDataPage，不影響其他頁面。 */
#refundDataPage .member-refund-data-head p{
  color:#4a4540;
  font-weight:600;
}

#refundDataPage .member-refund-method-option{
  color:#332d28;
  font-weight:600;
}

#refundDataPage .member-refund-method-option strong{
  color:#332d28;
  font-weight:700;
}

#refundDataPage .member-refund-method-option span{
  color:#4a4540;
  font-weight:600;
}

/* CHÆN｜退款方式資格提示｜僅作用於退款填寫頁面 */
#refundDataPage .member-refund-method-option.is-disabled{
  cursor:not-allowed;
  opacity:.92;
}
#refundDataPage .member-refund-method-option.is-disabled input{
  cursor:not-allowed;
}
#refundDataPage .member-refund-method-warning{
  display:block;
  flex-basis:100%;
  width:100%;
  box-sizing:border-box;
  margin-top:10px;
  padding:14px 16px;
  border:1px solid #E5C0BA;
  border-radius:8px;
  background:#FFF7F5;
  color:#B42318 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.8;
  overflow-wrap:anywhere;
}
#refundDataPage .member-refund-method-warning br{display:block;}
@media (max-width: 767px){
  #refundDataPage .member-refund-method-warning{max-width:100%;font-size:12px !important;}
}

#refundDataPage .member-refund-field label{
  color:#3f3934;
  font-weight:700;
}

#refundDataPage .member-refund-field select,
#refundDataPage .member-refund-field select option{
  color:#332d28;
  font-weight:600;
}

#refundDataPage .member-refund-bank-notice{
  color:#4a423b;
  font-weight:600;
}

#refundDataPage .member-refund-confirm-notice{
  color:#4a423b;
  font-weight:600;
}

#refundDataPage .member-refund-confirm-check{
  color:#403934;
  font-weight:600;
}

#refundDataPage .member-refund-security-note{
  color:#625a54;
  font-weight:600;
}

/* CHÆN｜退貨進度｜查驗通過結果說明文字加深加粗 */
#returnRequestPage.return-progress-mode .return-member-result-badge.passed p {
  color: #333333;
  font-weight: 700;
}

/* CHÆN｜申請退貨退款｜返回訂單列表位置與按鈕樣式最小修正 2026-08-29 */
#memberCenterPage #returnRequestPage .member-return-request-heading{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:24px !important;
  width:100%;
  box-sizing:border-box;
}
#memberCenterPage #returnRequestPage .member-return-request-heading > div:first-child{
  min-width:0;
}
#memberCenterPage #returnRequestPage .member-return-request-back{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:auto !important;
  min-height:40px !important;
  padding:0 18px !important;
  border:1px solid #ddd6cf !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#2d2926 !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
}
#memberCenterPage #returnRequestPage .member-return-request-back:hover{
  background:#faf7f3 !important;
  border-color:#cfc5bb !important;
}

@media (max-width:767px){
  #memberCenterPage #returnRequestPage .member-return-request-heading{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
  #memberCenterPage #returnRequestPage .member-return-request-heading > div:first-child{
    flex:1 1 260px;
  }
  #memberCenterPage #returnRequestPage .member-return-request-back{
    margin-left:auto !important;
    min-height:38px !important;
    padding:0 16px !important;
    font-size:12px !important;
  }
}


/* CHÆN 2026-08-29 — return request credit-card notice layout repair.
   Scoped only to the standalone member return-request page. */
#memberCenterPage #returnRequestPage.member-return-request-page {
  background: var(--bg-primary) !important;
}

/* The standalone application page uses the card presentation shown in the
   approved reference: icon on the left, content on the right. */
#memberCenterPage #returnRequestPage .return-credit-refund-divider {
  display: none !important;
}

#memberCenterPage #returnRequestPage .return-credit-refund-card {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 18px !important;
  padding: 18px 24px !important;
  background: #fff !important;
  border: 1px solid var(--border-light, #e8e1d9) !important;
  border-radius: 14px !important;
  color: var(--text-primary, #2d2926) !important;
}

#memberCenterPage #returnRequestPage .return-credit-refund-icon {
  width: 84px !important;
  height: 84px !important;
  flex: 0 0 84px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #f5f0ea !important;
  box-sizing: border-box !important;
}

#memberCenterPage #returnRequestPage .return-credit-refund-icon svg {
  width: 44px !important;
  height: 44px !important;
  display: block !important;
  fill: none !important;
  stroke: #9a806d !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#memberCenterPage #returnRequestPage .return-credit-refund-content {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#memberCenterPage #returnRequestPage .return-credit-refund-content h3 {
  margin: 0 0 6px !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: var(--text-primary, #2d2926) !important;
}

#memberCenterPage #returnRequestPage .return-credit-refund-content p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  color: var(--text-primary, #2d2926) !important;
  overflow-wrap: anywhere !important;
}

#memberCenterPage #returnRequestPage .return-credit-refund-content strong {
  font-weight: 600 !important;
  color: #a77f5e !important;
}

@media (max-width: 767px) {
  #memberCenterPage #returnRequestPage .return-credit-refund-card {
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    padding: 15px 16px !important;
  }

  #memberCenterPage #returnRequestPage .return-credit-refund-icon {
    width: 60px !important;
    height: 60px !important;
    flex-basis: 60px !important;
  }

  #memberCenterPage #returnRequestPage .return-credit-refund-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  #memberCenterPage #returnRequestPage .return-credit-refund-content h3 {
    margin-bottom: 4px !important;
    font-size: 18px !important;
  }

  #memberCenterPage #returnRequestPage .return-credit-refund-content p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}
/* CHÆN｜申請退貨退款｜標題說明與欄目 icon 尺寸微調 2026-08-29 */
#memberCenterPage #returnRequestPage.member-return-request-page .return-page-heading p {
  color: #4a423b !important;
  font-weight: 600 !important;
}

/* 非信用卡欄目 icon 稍微放大；信用卡 icon 保持上一版尺寸不變。 */
#memberCenterPage #returnRequestPage.member-return-request-page .return-card-heading-icon {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
}

#memberCenterPage #returnRequestPage.member-return-request-page .return-notice-list {
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* 信用卡退款說明：只縮小標題，icon 與圖示尺寸維持現狀。 */
#memberCenterPage #returnRequestPage.member-return-request-page .return-credit-refund-content h3 {
  font-size: 17px !important;
}
/* CHÆN｜申請退貨退款｜退貨原因 icon 比例微調 2026-08-29 */
#memberCenterPage #returnRequestPage.member-return-request-page .return-card-heading-icon[src="/images/return-ui/return-reason.svg"] {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}

/* CHÆN｜會員中心手機版登入頁殘留最終防護 2026-08-29
   When the member-center page is active, the standalone authentication page
   must not render as a second page below it. Scoped to the member-center
   sibling relationship; login/register routes remain unaffected. */
#memberCenterPage.active ~ #authPage.auth-page {
  display: none !important;
}

/* CHÆN｜會員退貨頁手機版比例修正 2026-08-29
   Prevent the application form from being squeezed into desktop columns.
   Keep the existing content, controls and APIs unchanged. */
@media (max-width: 767px) {
  #memberCenterPage #returnRequestPage.member-return-request-page .return-page-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page .return-order-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page .return-method-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page .return-button-row-image-match {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page .return-button-row-image-match .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page .return-card-heading {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page .return-card-heading-note {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Return progress: keep all 9 stages in one horizontal track and allow
     the track itself to scroll instead of shrinking every stage. */
  #returnRequestPage.return-progress-mode .return-reference-timeline {
    display: grid !important;
    grid-template-columns: repeat(9, 72px) !important;
    grid-template-rows: minmax(0, auto) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    grid-row: 1 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-label {
    max-width: 72px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card,
  #returnRequestPage.return-progress-mode .return-reference-help-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-help-card {
    overflow: hidden !important;
  }
}

/* CHÆN｜退貨進度｜桌機／手機最終版面校正 2026-08-30
   Scope: #returnRequestPage.return-progress-mode only.
   Desktop follows the horizontal reference layout; mobile switches to the
   vertical progress layout shown in the supplied mobile reference.
   No order, payment, logistics or other member-center UI is affected. */
#returnRequestPage.return-progress-mode .return-reference-current.is-completed {
  background: #fdfaf7 !important;
}
#returnRequestPage.return-progress-mode .return-reference-current.is-completed .return-reference-current-icon {
  background: #c87843 !important;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
#returnRequestPage.return-progress-mode .return-member-result-badge {
  min-height: 74px !important;
  padding: 14px 18px !important;
  border: 1px solid #d8e5d2 !important;
  border-radius: 12px !important;
  background: #fbfdf9 !important;
  color: #333 !important;
}
#returnRequestPage.return-progress-mode .return-member-result-badge.passed {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
#returnRequestPage.return-progress-mode .return-member-result-icon {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  border: 3px solid #b9ddc9 !important;
  border-radius: 50% !important;
  background: #f7fffa !important;
  color: #55a878 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}
#returnRequestPage.return-progress-mode .return-member-result-badge.passed strong {
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: #333 !important;
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode .return-reference-shell {
    min-height: 100vh !important;
    padding: 20px 16px 36px !important;
    background: #fff !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-brand {
    font-size: 36px !important;
    letter-spacing: 9px !important;
    margin: 0 0 38px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 16px 18px !important;
    border: 1px solid #e9e2db !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 14px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-case-icon {
    width: 52px !important;
    height: 52px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-case-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-case span {
    margin-bottom: 4px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-case strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-status {
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card {
    padding: 26px 18px 22px !important;
    border-radius: 16px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-main-card h2 {
    margin-bottom: 28px !important;
    font-size: 22px !important;
  }

  /* Mobile reference: nine stages become a single vertical timeline. */
  #returnRequestPage.return-progress-mode .return-reference-timeline {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 2px 0 !important;
    overflow: visible !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-line {
    left: 19px !important;
    right: auto !important;
    top: 19px !important;
    bottom: 19px !important;
    width: 3px !important;
    height: auto !important;
    border-radius: 999px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-step {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 64px !important;
    text-align: left !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-step-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 22px 0 0 !important;
    border-width: 2px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-step-glyph {
    width: 25px !important;
    height: 25px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-step-label {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    color: #34302d !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current {
    margin: 18px 0 18px !important;
    padding: 18px 20px !important;
    gap: 14px !important;
    border-radius: 16px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-current-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 23px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-current h3 {
    margin-bottom: 5px !important;
    font-size: 19px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-current p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-card {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #returnRequestPage.return-progress-mode .return-member-result-card h3 {
    margin: 0 0 12px !important;
    font-size: 20px !important;
  }
  #returnRequestPage.return-progress-mode .return-member-result-badge {
    min-height: 76px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-help-card {
    margin-top: 0 !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminders h3 {
    margin-bottom: 22px !important;
    font-size: 22px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-bell {
    margin-right: 9px !important;
    vertical-align: -4px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-bell svg {
    width: 23px !important;
    height: 23px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-sections {
    display: block !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section,
  #returnRequestPage.return-progress-mode .return-reference-reminder-section:first-child,
  #returnRequestPage.return-progress-mode .return-reference-reminder-section:last-child {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: start !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #e8e1db !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section + .return-reference-reminder-section {
    padding-top: 20px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section h4 {
    margin: 0 0 7px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section ul {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section li {
    padding-left: 16px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section li::before {
    left: 0 !important;
    font-size: 17px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-footer {
    display: none !important;
  }
}

/* CHÆN｜退貨進度｜手機提醒 icon 與內容結構 2026-08-30 */
#returnRequestPage.return-progress-mode .return-reference-reminder-icon {
  display: none;
}
#returnRequestPage.return-progress-mode .return-reference-reminder-icon svg {
  width: 30px !important;
  height: 30px !important;
  fill: none !important;
  stroke: #806e5e !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode .return-reference-reminder-section::before {
    display: none !important;
    content: none !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-icon {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border: 2px solid #806e5e !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-icon svg {
    width: 27px !important;
    height: 27px !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-content {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
  }
  #returnRequestPage.return-progress-mode .return-reference-reminder-section h4,
  #returnRequestPage.return-progress-mode .return-reference-reminder-section ul {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}


/* CHÆN｜退貨進度｜桌機黑色圖形清除＋參考圖比例最終修正 2026-08-30
   Scope: return-progress-mode only.
   Desktop: no reminder icons; four compact text columns; smaller overall panel.
   Mobile rules below remain unchanged and keep the vertical timeline/icons. */
@media (min-width: 768px) {
  #returnRequestPage.return-progress-mode .return-page-container {
    width: 820px !important;
    max-width: calc(100vw - 48px) !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-shell {
    padding: 22px !important;
    border-radius: 18px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-brand {
    font-size: 34px !important;
    letter-spacing: 8px !important;
    margin-bottom: 20px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-header {
    margin-bottom: 18px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card {
    padding: 18px 20px 20px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card h2 {
    margin-bottom: 18px !important;
    font-size: 20px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-timeline {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 9px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-label {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current {
    margin: 16px 0 14px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current h3 {
    font-size: 17px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-help-card {
    display: block !important;
    padding: 15px 18px 16px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminders {
    padding: 0 !important;
    border: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminders h3 {
    margin-bottom: 12px !important;
    font-size: 18px !important;
  }

  /* The desktop reference uses text-only reminder columns. */
  #returnRequestPage.return-progress-mode .return-reference-reminder-icon {
    display: none !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-sections {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-left: 1px solid #e8e1db !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section:last-child {
    padding-right: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section h4 {
    margin-bottom: 7px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section li {
    padding-left: 15px !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-footer {
    padding-top: 10px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-back {
    min-width: 180px !important;
    height: 44px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
  }
}


/* CHÆN｜退貨進度｜桌機／手機真正分離最終修正 2026-08-30
   This block is intentionally scoped to the return-progress view only.
   The served stylesheet is /css/style.css; do not copy these rules to the
   application return-form styles. Desktop and mobile use different layouts. */

/* Desktop: standalone wide reference presentation. */
@media (min-width: 768px) {
  #returnRequestPage.return-progress-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 18px 24px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    background: #fff !important;
  }

  #returnRequestPage.return-progress-mode .return-page-container {
    width: min(1280px, calc(100vw - 48px)) !important;
    max-width: 1280px !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode #returnProgressPanel {
    width: 100% !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-shell {
    width: 100% !important;
    max-width: 1280px !important;
    padding: 20px 24px 24px !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-brand {
    font-size: 34px !important;
    letter-spacing: 10px !important;
    margin: 0 0 26px !important;
    line-height: 1 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-header {
    gap: 20px !important;
    margin: 0 0 18px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case {
    gap: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case-icon {
    width: 52px !important;
    height: 52px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case-icon svg {
    width: 29px !important;
    height: 29px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case span {
    font-size: 14px !important;
    margin-bottom: 3px !important;
    line-height: 1.35 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case strong {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-status {
    padding: 10px 20px !important;
    font-size: 15px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card {
    padding: 24px 28px 26px !important;
    border-radius: 16px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card h2 {
    margin: 0 0 28px !important;
    font-size: 23px !important;
    line-height: 1.35 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-timeline {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: column !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 4px 4px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-line {
    left: 5.5% !important;
    right: 5.5% !important;
    top: 24px !important;
    height: 2px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-row: 1 !important;
    text-align: center !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 10px !important;
    border-width: 2px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-glyph {
    width: 27px !important;
    height: 27px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-label {
    width: 100% !important;
    max-width: 112px !important;
    min-height: 42px !important;
    margin: 0 auto !important;
    padding: 0 3px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current {
    margin: 20px 0 20px !important;
    padding: 16px 22px !important;
    gap: 14px !important;
    border-radius: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current h3 {
    margin-bottom: 3px !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-card {
    margin: 0 0 20px !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-card h3 {
    margin: 0 0 9px !important;
    font-size: 19px !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-badge {
    min-height: 58px !important;
    padding: 10px 16px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    font-size: 23px !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-badge.passed strong {
    font-size: 16px !important;
  }

  /* Desktop has NO reminder icon nodes; this is a defensive guard for old cached markup. */
  #returnRequestPage.return-progress-mode .return-reference-reminder-icon,
  #returnRequestPage.return-progress-mode .return-reference-reminder-icon svg,
  #returnRequestPage.return-progress-mode .return-reference-reminder-section::before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    content: none !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-help-card {
    display: block !important;
    padding: 20px 24px 22px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminders {
    padding: 0 !important;
    border: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminders h3 {
    margin: 0 0 18px !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-bell {
    margin-right: 9px !important;
    vertical-align: -4px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-bell svg {
    width: 22px !important;
    height: 22px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-sections {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border-left: 1px solid #e8e1db !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section:last-child {
    padding-right: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section h4 {
    margin: 0 0 8px !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section li {
    margin: 0 !important;
    padding-left: 16px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section li::before {
    left: 1px !important;
    top: 0 !important;
    font-size: 16px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-footer {
    padding-top: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-back {
    min-width: 170px !important;
    height: 42px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
  }
}

/* Mobile: dedicated vertical reference presentation. */
@media (max-width: 767px) {
  #returnRequestPage.return-progress-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    background: #fff !important;
  }

  #returnRequestPage.return-progress-mode .return-page-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-shell {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 18px 16px 34px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-brand {
    font-size: 35px !important;
    letter-spacing: 9px !important;
    margin: 0 0 34px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-header {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 16px 18px !important;
    border: 1px solid #e9e2db !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case-icon {
    width: 52px !important;
    height: 52px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case span {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-case strong {
    font-size: 18px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-status {
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card {
    padding: 26px 18px 22px !important;
    border-radius: 16px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-main-card h2 {
    margin: 0 0 28px !important;
    font-size: 22px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-timeline {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 2px !important;
    overflow: visible !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-line {
    left: 19px !important;
    right: auto !important;
    top: 19px !important;
    bottom: 19px !important;
    width: 3px !important;
    height: auto !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 64px !important;
    text-align: left !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 22px 0 0 !important;
    border-width: 2px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-glyph {
    width: 25px !important;
    height: 25px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-step-label {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current {
    margin: 18px 0 18px !important;
    padding: 18px 20px !important;
    gap: 14px !important;
    border-radius: 16px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 23px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current h3 {
    margin-bottom: 5px !important;
    font-size: 19px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-current p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-card {
    margin: 0 0 18px !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-card h3 {
    margin: 0 0 12px !important;
    font-size: 20px !important;
  }

  #returnRequestPage.return-progress-mode .return-member-result-badge {
    min-height: 76px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-help-card {
    display: block !important;
    margin-top: 0 !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminders {
    padding: 0 !important;
    border: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminders h3 {
    margin: 0 0 22px !important;
    font-size: 22px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-sections {
    display: block !important;
    width: 100% !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: start !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #e8e1db !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section + .return-reference-reminder-section {
    padding-top: 20px !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-icon {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border: 2px solid #806e5e !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-icon svg {
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    fill: none !important;
    stroke: #806e5e !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-content {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section h4 {
    margin: 0 0 7px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-reminder-section li {
    padding-left: 16px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }

  #returnRequestPage.return-progress-mode .return-reference-footer {
    display: none !important;
  }
}


/* CHÆN｜退貨進度｜會員中心實際載入 CSS 修正 v11
   IMPORTANT: /css/style.css is the stylesheet loaded by index.html.
   Keep this presentation scoped to the member-center return-progress subpage.
   It intentionally does not affect the standalone return page or other tabs. */
@media (min-width: 768px) {
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* The member-center desktop version must not show the standalone-page brand/close controls. */
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-brand,
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-close {
    display: none !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 82px !important;
    margin: 0 0 12px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    border: 1px solid #ebe7e2 !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-case {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-case-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-case-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-case span {
    display: block !important;
    margin: 0 0 3px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-case strong {
    display: block !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-status {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-main-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 22px 18px !important;
    border: 1px solid #ebe7e2 !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-main-card h2 {
    margin: 0 0 22px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  /* Nine equal columns. Labels are deliberately compact and may wrap within their own cell. */
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-timeline {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-line {
    left: 5.5% !important;
    right: 5.5% !important;
    top: 20px !important;
    height: 2px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-align: center !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 7px !important;
    border-width: 1.5px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-glyph {
    width: 21px !important;
    height: 21px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-label {
    display: block !important;
    width: 100% !important;
    max-width: 78px !important;
    min-height: 34px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current {
    margin: 14px 0 12px !important;
    padding: 12px 16px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 20px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current h3 {
    margin: 0 0 4px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-help-card {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 15px 18px 16px !important;
    border: 1px solid #ebe7e2 !important;
    border-radius: 14px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminders {
    padding: 0 !important;
    border: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminders h3 {
    margin: 0 0 12px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-sections {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section {
    min-width: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child {
    padding-left: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:last-child {
    padding-right: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section + .return-reference-reminder-section {
    border-left: 1px solid #ebe7e2 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-icon {
    display: none !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section h4 {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li {
    margin: 0 !important;
    padding-left: 15px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: #4a443f !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-footer {
    padding-top: 12px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-back {
    min-width: 150px !important;
    height: 40px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
  }
}

/* 768–1100px desktop: compact only the progress component, not the member shell. */
@media (min-width: 768px) and (max-width: 1100px) {
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-case strong { font-size: 17px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-main-card { padding-left: 16px !important; padding-right: 16px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-icon { width: 36px !important; height: 36px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-glyph { width: 19px !important; height: 19px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-label { max-width: 68px !important; font-size: 10px !important; line-height: 1.35 !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current h3 { font-size: 15px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current p { font-size: 10px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminders h3 { font-size: 16px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section h4 { font-size: 11px !important; }
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li { font-size: 9px !important; }
}

/* Mobile: the member-center return-progress tab uses the dedicated vertical reference. */
@media (max-width: 767px) {
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-brand {
    display: block !important;
    margin: 0 auto 24px !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: 8px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-close {
    display: flex !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-header {
    display: flex !important;
    margin: 0 0 14px !important;
    padding: 14px 16px !important;
    min-height: 78px !important;
    border: 1px solid #e9e2db !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-main-card {
    padding: 20px 16px 22px !important;
    border-radius: 14px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-main-card h2 {
    font-size: 21px !important;
    margin-bottom: 26px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-timeline {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-line {
    left: 19px !important;
    right: auto !important;
    top: 19px !important;
    bottom: 19px !important;
    width: 3px !important;
    height: auto !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 64px !important;
    text-align: left !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 22px 0 0 !important;
    border-width: 2px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-glyph {
    width: 25px !important;
    height: 25px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-label {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-help-card {
    padding: 15px 16px !important;
    border-radius: 14px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-sections {
    display: flex !important;
    flex-direction: column !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section,
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child,
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:last-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #ebe7e2 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-icon {
    display: block !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section h4 {
    font-size: 16px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

/* CHÆN｜會員中心退貨進度｜案件與進度卡片無縫銜接修正 2026-08-30
   僅處理會員中心桌機版退貨進度；手機版維持既有獨立排列。
   退貨案件標頭與退貨進度主卡改為上下無縫、單一連續卡片視覺。 */
@media (min-width: 768px) {
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-header {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-main-card {
    margin-top: 0 !important;
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}

/* CHÆN｜會員中心退貨進度｜退貨提醒排列與退款完成文字最終校正 2026-08-30
   Scope: member-center return-progress desktop only.
   Keep the mobile vertical reminder layout unchanged. */
@media (min-width: 768px) {
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-help-card {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 20px 24px 22px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminders {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminders h3 {
    margin: 0 0 16px !important;
    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-sections {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    border-left: 1px solid #ebe7e2 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:last-child {
    padding-right: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section h4 {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 0 14px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #4a443f !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #4a443f !important;
  }

  /* Refund-completed explanation: intentionally darker and bold as requested. */
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current.is-completed p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    color: #403731 !important;
  }
}

/* CHÆN｜會員中心退貨進度｜退貨提醒中文換行最終修正 2026-08-30
   Prevent Chinese reminder text from overlapping/clipping inside the four
   desktop columns. Keep the reference layout; only change text wrapping. */
@media (min-width: 768px) {
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section,
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-content {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: auto !important;
    max-width: 100% !important;
  }
}

/* 768–1100px: preserve the same four-column structure without allowing
   oversized text to squeeze the reminder columns. */
@media (min-width: 768px) and (max-width: 1100px) {
  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child {
    padding-left: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:last-child {
    padding-right: 0 !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section h4 {
    font-size: 13px !important;
  }

  #memberCenterPage #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li {
    font-size: 12px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: auto !important;
    max-width: 100% !important;
  }
}



/* CHÆN｜退貨進度｜手機版最終參考圖校正 2026-08-30
   僅限會員中心退貨進度頁。
   依手機參考圖：直式九階段進度、完成狀態卡、退貨提醒採「左標題／右內容」排列。
   上方會員中心／一般會員區域不做任何版型修改。提醒欄位圖示全部隱藏。 */
@media (max-width: 767px) {
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-main-card {
    margin: 0 !important;
    padding: 24px 18px 22px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* Mobile return-progress status bar: vertical nine-stage track. */
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-timeline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    overflow: visible !important;
    gap: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-line {
    left: 19px !important;
    right: auto !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 2px !important;
    height: auto !important;
    border-radius: 999px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 22px 0 0 !important;
    border-width: 2px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-glyph {
    width: 24px !important;
    height: 24px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step-label {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: #34302d !important;
  }

  /* The active stage keeps the orange emphasis from the reference. */
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-step.is-active .return-reference-step-label {
    color: #c96f2f !important;
    font-weight: 700 !important;
  }

  /* Completed message follows the vertical timeline with compact spacing. */
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current {
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 18px 20px !important;
    gap: 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 23px !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current h3 {
    margin: 0 0 5px !important;
    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-current p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #4a443f !important;
  }

  /* Mobile reference: reminder icons are intentionally removed.
     Keep only the bell in the section heading. */
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-icon,
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-icon svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-help-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 18px 18px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminders h3 {
    margin: 0 0 22px !important;
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
  }

  /* Reference layout: each reminder is one row, with the title on the left
     and the explanatory text on the right. */
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-sections {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section,
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child,
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:last-child {
    display: grid !important;
    grid-template-columns: minmax(112px, 34%) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border: 0 !important;
    border-top: 1px solid #ebe7e2 !important;
    box-sizing: border-box !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:last-child {
    padding-bottom: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-content {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section h4 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: #403731 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 0 16px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #4a443f !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #403731 !important;
  }
}

/* CHÆN｜會員中心退貨進度｜手機版最終修正 v15｜2026-08-30
   Fixes the actual rendered mobile reference markup.
   1) Remove the standalone CHÆN brand from the mobile return-progress view.
   2) Remove the stray native close-button block that otherwise appears at
      the top-left when the standalone selector is not active.
   3) Render each reminder as a true two-column row: title on the left,
      description on the right.  Desktop and the member dashboard are untouched. */
@media (max-width: 767px) {
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-shell {
    position: relative !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-brand,
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-close {
    display: none !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-header {
    margin-top: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-sections {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section {
    display: grid !important;
    grid-template-columns: minmax(112px, 34%) minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1px solid #ebe7e2 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section:last-child {
    padding-bottom: 0 !important;
  }

  /* The content wrapper is flattened so h4 and ul become direct grid items. */
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-content {
    display: contents !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section h4 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    color: #403731 !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section ul {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 16px !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #4a443f !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-section li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #403731 !important;
  }

  /* Defensive cleanup for cached/older mobile markup. */
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-icon,
  #memberCenterPage.member-return-progress-active #returnRequestPage.member-return-request-page.active .return-progress-reference .return-reference-reminder-icon svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
}


/* CHÆN｜退款銀行資料提醒｜僅作用於退款資料填寫頁面 */
#refundDataPage .member-refund-field-warning,
#refundDataPage .member-refund-field-hint{
  margin-top:8px;
  font-size:13px;
  line-height:1.6;
  font-weight:600;
}
#refundDataPage .member-refund-field-warning{
  color:#d84a36;
}
#refundDataPage .member-refund-field-hint{
  color:#d84a36;
}
#refundDataPage .member-refund-important-notice{
  padding:13px 16px;
  border:1px solid #ff7b72;
  border-radius:8px;
  background:#fff1ef;
  color:#3f3732;
  box-sizing:border-box;
}
#refundDataPage .member-refund-important-title{
  margin:0 0 7px;
  color:#b42318;
  font-size:14px;
  line-height:1.5;
  font-weight:700;
}
#refundDataPage .member-refund-important-notice ul{
  margin:0;
  padding-left:22px;
}
#refundDataPage .member-refund-important-notice li{
  margin:0;
  padding:0;
  font-size:13px;
  line-height:1.75;
  font-weight:500;
}
@media(max-width:767px){
  #refundDataPage .member-refund-field-warning,
  #refundDataPage .member-refund-field-hint{
    font-size:12px;
  }
  #refundDataPage .member-refund-important-notice{
    padding:12px 14px;
  }
  #refundDataPage .member-refund-important-title{
    font-size:13px;
  }
  #refundDataPage .member-refund-important-notice li{
    font-size:12px;
    line-height:1.7;
  }
}


/* === CHECKOUT CHÆN POINT REDEMPTION (20260902) ===
   Additive checkout-only UI. Existing checkout layout/styles remain unchanged. */
.ck-point-section { border-color: #e8e8e8; }
.ck-point-section .ck-summary-header { font-weight: 600; }
.ck-point-section .ck-point-preview > span,
.ck-point-section .ck-point-preview > strong,
.ck-point-section .ck-point-empty-title,
.ck-point-section .ck-point-empty-balance,
.ck-point-section .ck-point-empty-hint,
.ck-point-section .ck-point-history-btn,
.ck-point-section .ck-point-rate,
.ck-point-section .ck-point-control > span,
.ck-point-section .ck-point-used,
.ck-point-section .ck-point-discount-row > span { font-weight: 600; }

/* Checkout text legibility: preserve each existing text color; increase weight only. */
#paymentMethods .payment-method-label,
#shippingMethods .payment-method-label,
#cartSummaryCount,
#checkoutProductList .pd-product-variant { font-weight: 600; }
.ck-point-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px 2px;
}
.ck-point-empty-icon {
  width: 72px;
  height: 72px;
  margin: 2px 0 12px;
  color: var(--accent);
  opacity: .78;
}
.ck-point-empty-icon svg { display: block; width: 100%; height: 100%; }
.ck-point-empty-title { font-size: 17px; color: #333; line-height: 1.5; }
.ck-point-empty-balance { margin: 8px 0 0; font-size: 14px; color: #555; line-height: 1.5; }
.ck-point-empty-hint { margin: 3px 0 0; font-size: 13px; color: #666; line-height: 1.6; }
.ck-point-history-btn {
  min-width: 190px;
  margin-top: 18px;
  padding: 9px 16px;
  border: 1px solid #e1bda9;
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
}
.ck-point-history-btn:hover { background: #faf6f2; }
.ck-point-empty-state[hidden] { display: none; }
.ck-point-header { cursor: pointer; }
.ck-point-header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ck-point-body { padding-top: 14px; padding-bottom: 14px; }
.ck-point-preview { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 12px 16px; color: #555; font-size: 13px; }
.ck-point-preview strong { color: #333; font-size: 15px; font-weight: 600; }
.ck-point-preview small { grid-column: 1 / -1; color: #999; font-size: 12px; line-height: 1.45; }
.ck-point-available-line,
.ck-point-discount-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ck-point-available-line { color: #555; font-size: 13px; }
.ck-point-available-line strong { color: #333; font-size: 17px; font-weight: 600; }
.ck-point-rate { margin: 12px 0; padding: 8px 10px; background: #f8f3ee; border-radius: 7px; color: #6e625a; font-size: 12px; }
.ck-point-control { border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; padding: 12px 0; color: #555; font-size: 13px; }
.ck-point-stepper { display: grid; grid-template-columns: 32px minmax(100px, 1fr) 32px; gap: 8px; align-items: center; margin-top: 8px; }
.ck-point-stepper button { width: 32px; height: 32px; padding: 0; border: 1px solid #ddd; border-radius: 7px; background: #fff; color: #555; font-size: 17px; line-height: 1; cursor: pointer; }
.ck-point-stepper button:hover:not(:disabled) { border-color: #c9b0a2; color: #7b5d4e; background: #faf7f4; }
.ck-point-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.ck-point-used { min-width: 0; text-align: center; font-size: 13px; color: #333; }
.ck-point-hint { min-height: 18px; padding-top: 7px; color: #999; font-size: 12px; line-height: 1.5; }
.ck-point-discount-row { padding-top: 9px; color: #555; font-size: 13px; }
.ck-point-discount-row strong { color: var(--accent); font-size: 15px; }
.ck-point-summary-row .ck-total-discount-label,
.ck-point-summary-row .ck-total-discount-val { color: var(--accent); }
.ck-point-section.is-disabled .ck-point-header { cursor: pointer; }
@media (max-width: 767px) {
  .ck-point-stepper { grid-template-columns: 32px minmax(80px, 1fr) 32px; }
  .ck-point-available-line strong { font-size: 16px; }
}


/* === CHECKOUT CHÆN POINT EMPTY STATE — responsive === */
@media (max-width: 767px) {
  .ck-point-empty-state { padding-left: 0; padding-right: 0; }
  .ck-point-empty-icon { width: 64px; height: 64px; margin-bottom: 10px; }
  .ck-point-empty-title { font-size: 16px; }
  .ck-point-history-btn { width: 100%; max-width: 190px; box-sizing: border-box; }
}


/* === CHECKOUT CHÆN POINT EMPTY STATE — exact collapsed / expanded presentation (20260902) === */
.ck-point-preview-normal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
}
.ck-point-preview-normal[hidden],
.ck-point-preview-empty[hidden] { display: none; }
/* Expanded state: hide the collapsed preview so only the full POINT panel remains visible. */
.ck-point-section.is-expanded .ck-point-preview { display: none; }
.ck-point-preview-empty {
  position: relative;
  min-height: 50px;
  padding: 7px 58px 7px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ck-point-preview-empty strong {
  color: #333;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}
.ck-point-preview-empty small {
  margin-top: 2px;
  color: #666;
  font-size: 11px;
  line-height: 1.45;
}
.ck-point-preview-empty img {
  position: absolute;
  right: 14px;
  bottom: 5px;
  width: 45px;
  height: 45px;
  object-fit: contain;
}
.ck-point-empty-icon {
  width: 200px;
  height: 200px;
  margin: 2px 0 12px;
  opacity: 1;
}
.ck-point-empty-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ck-point-empty-title { font-weight: 600; }
.ck-point-empty-balance { font-weight: 500; }
.ck-point-empty-hint { font-weight: 500; }
@media (max-width: 767px) {
  .ck-point-preview-empty {
    min-height: 49px;
    padding: 6px 52px 6px 14px;
  }
  .ck-point-preview-empty strong { font-size: 12px; }
  .ck-point-preview-empty small { font-size: 10px; }
  .ck-point-preview-empty img {
    right: 11px;
    bottom: 5px;
    width: 45px;
    height: 45px;
  }
  .ck-point-empty-icon {
    width: 200px;
    height: 200px;
  }
}

/* === CHECKOUT TEXT LEGIBILITY + SHIPPING ICON (20260902) ===
   Preserve existing colors; increase weight only for the requested checkout text. */
#checkoutPointPreviewEmpty small { font-weight: 600; }
#cartSummaryItems .cart-summary-item-name,
#cartSummaryItems .cart-summary-item-qty { font-weight: 600; }
.ck-total-row-subtotal,
.ck-total-row-shipping { font-weight: 600; }
.ck-total-row-subtotal #summarySubtotal,
.ck-total-row-shipping #summaryShipping { font-weight: 600; }

/* Checkout section icons: use the supplied 24px image assets without changing the existing card layout. */
.ck-card-header .ck-checkout-section-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  opacity: 1;
}

/* Checkout thumbnails: keep the full product visible and allow direct detail navigation. */
.pd-product-image-link {
  cursor: pointer;
}
.pd-product-image-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pd-product-image img {
  object-fit: contain;
  object-position: center center;
}

/* ============================================================================
   CHÆN FORGOT PASSWORD — ROUTED PAGE / RETURN BUTTON ALIGNMENT PATCH
   2026-09-02
   Scope: forgot-password page visibility and the Return-to-login button only.
   The auth route guard is satisfied by app.js setting data-auth-route=true.
   The return button intentionally matches the reset-link button width exactly.
   ============================================================================ */
#authPage.auth-page.active.forgot-password-mode[data-auth-route="true"] {
  display: block !important;
}

@media (min-width: 768px) {
  #authPage.auth-page.active.forgot-password-mode[data-auth-route="true"] #forgotPasswordForm .auth-footer-links a {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  #authPage.auth-page.active.forgot-password-mode[data-auth-route="true"] #forgotPasswordForm .auth-footer-links a {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   CHÆN RESET PASSWORD — CENTERED INDEPENDENT PAGE (2026-09-02)
   Scope: /reset-password only.
   - Convert the reset-password card from the shared two-column auth layout to
     a single centered column so the form cannot remain visually left-aligned.
   - Preserve existing IDs, handlers, validation, token flow and all other auth
     page layouts.
   ============================================================================ */
#authPage.auth-page.active[data-auth-view="reset"] .auth-page-container {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 56px 24px 72px !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-shell,
#authPage.auth-page.active[data-auth-view="reset"] .auth-page-shell {
  display: block !important;
  width: min(720px, calc(100vw - 48px)) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-body {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-pane {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 52px 56px 48px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm {
  display: block !important;
  width: 100% !important;
  max-width: 496px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .auth-title,
#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm > p {
  text-align: center !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .auth-footer-links {
  text-align: center !important;
}

@media (max-width: 767px) {
  #authPage.auth-page.active[data-auth-view="reset"] .auth-page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 12px 48px !important;
  }

  #authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-shell,
  #authPage.auth-page.active[data-auth-view="reset"] .auth-page-shell {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
  }

  #authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-pane {
    padding: 28px 22px 32px !important;
  }

  #authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ============================================================================
   CHÆN RESET PASSWORD — FINAL FOOTER STRUCTURE FIX v3 (2026-09-02)
   Scope: reset-password page only.
   Use a real divider element, matching the Forgot Password page structure,
   instead of generated footer pseudo-content. This prevents duplicate "或".
   ============================================================================ */
#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .auth-footer-links::before,
#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .auth-footer-links::after {
  content: none !important;
  display: none !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-divider {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 496px !important;
  height: 20px !important;
  margin: 28px auto 18px !important;
  padding: 0 !important;
  gap: 14px !important;
  color: #9B9188 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-divider::before,
#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-divider::after {
  content: '' !important;
  display: block !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #DED7CF !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-divider span {
  display: block !important;
  flex: 0 0 auto !important;
  padding: 0 2px !important;
  background: #FAF8F4 !important;
  color: #9B9188 !important;
  line-height: 20px !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 496px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-footer a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 496px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 1px solid #DED7CF !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: #9B9188 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  #authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-shell,
  #authPage.auth-page.active[data-auth-view="reset"] .auth-page-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-pane {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 48px 56px 40px !important;
    overflow: visible !important;
  }

  #authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .auth-footer-links {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  #authPage.auth-page.active[data-auth-view="reset"] .reset-password-divider {
    max-width: 100% !important;
    margin: 22px auto 16px !important;
  }

  #authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-footer,
  #authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-footer a {
    max-width: none !important;
  }

  #authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-footer a {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }
}
/* ============================================================================
   CHÆN RESET PASSWORD — COMPACT FOOTER SPACING FIX (2026-09-02)
   Scope: reset-password page only.
   Match the Forgot Password reference: empty status blocks must not reserve
   vertical space between the submit button and the single divider.
   ============================================================================ */
#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm #resetPasswordError:empty,
#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm #resetPasswordSuccess:empty {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#authPage.auth-page.active[data-auth-view="reset"] #resetPasswordForm .reset-password-divider {
  margin: 28px auto 18px !important;
}


/* ============================================================================
   CHÆN RESET PASSWORD — CARD BACKGROUND CONSISTENCY FIX (2026-09-02)
   Scope: /reset-password only.
   The lower strip was exposing the shell background after the content pane
   ended. Keep the entire reset-password card on the same warm off-white tone.
   ============================================================================ */
#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-shell,
#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-body,
#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-pane {
  background: #FAF8F4 !important;
}

#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-body {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 767px) {
  #authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-shell,
  #authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-body,
  #authPage.auth-page.active[data-auth-view="reset"] .chaen-auth-pane {
    background: #FAF8F4 !important;
  }
}

/* === CHECKOUT CHÆN POINT TEXT CONTRAST — requested 20260903 ===
   Only increase weight/contrast for the requested collapsed and expanded POINT text. */
#checkoutPointPreviewNormal > span,
#checkoutPointPreviewNormal > strong {
  color: #333;
  font-weight: 700;
}
#checkoutPointPreviewHint,
#checkoutPointHint {
  color: #555;
  font-weight: 700;
}


/* ================================================================
   CHECKOUT ADD-ON PRESENTATION
   Presentation-only integration: reuses the existing AddonPromoEngine/API.
   The section is hidden whenever the cart already contains an add-on item.
   ================================================================ */
.ck-checkout-addon-section .ck-card-header {
  justify-content: flex-start;
}
.ck-checkout-addon-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 20px 20px;
}
.ck-checkout-addon-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 10px;
  padding: 14px;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}
.ck-checkout-addon-image {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 96px;
  height: 118px;
  overflow: hidden;
  border-radius: 6px;
  background: #f5f2ee;
}
.ck-checkout-addon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ck-checkout-addon-image-placeholder {
  width: 100%;
  height: 100%;
  background: #f5f2ee;
}
.ck-checkout-addon-info {
  min-width: 0;
}
.ck-checkout-addon-promo {
  font-size: 11px;
  color: #999;
  margin-bottom: 2px;
}
.ck-checkout-addon-name {
  font-size: 14px;
  line-height: 1.45;
  color: #333;
  font-weight: 500;
}
.ck-checkout-addon-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 5px;
  font-size: 14px;
  color: #555;
}
.ck-checkout-addon-price del {
  color: #aaa;
  font-size: 12px;
}
.ck-checkout-addon-options {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}
.ck-checkout-addon-option {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  color: #888;
}
.ck-checkout-addon-option select {
  min-width: 72px;
  max-width: 120px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-family: var(--font-body);
  font-size: 12px;
}
.ck-checkout-addon-meta {
  margin-top: 7px;
  font-size: 11px;
  color: #aaa;
}
.ck-checkout-addon-btn {
  grid-column: 2;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  background: #555;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.ck-checkout-addon-btn:hover:not(:disabled) {
  background: #444;
}
.ck-checkout-addon-btn:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 767px) {
  .ck-checkout-addon-list {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }
  .ck-checkout-addon-item {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 12px;
    column-gap: 12px;
  }
  .ck-checkout-addon-image {
    width: 72px;
    height: 92px;
  }
  .ck-checkout-addon-options {
    flex-wrap: wrap;
  }
}


/* ================================================================
   CHÆN CART DRAWER — MOBILE ADD-ON / PRODUCT IMAGE UI FIX (20260905)
   Scope: cart drawer mobile UI only.
   1) Remove the left accent line from add-on cart items; it can look
      like a scrollbar in the narrow drawer.
   2) Preserve the full product/model image instead of cropping it.
   No cart, pricing, add-on, checkout, payment, or order logic changed.
   ================================================================ */
@media (max-width: 767px) {
  .cart-drawer .cart-item.is-addon {
    border-left: none !important;
  }

  .cart-drawer .cart-item-image img {
    object-fit: contain !important;
    object-position: center center !important;
    background: #f5f1ec !important;
  }
}


/* ================================================================
   CHÆN CART DRAWER — MOBILE ADD-ON HIGHLIGHT NEUTRALIZATION (20260905)
   Scope: visual state only. Do not alter add-on eligibility/pricing.
   ================================================================ */
@media (max-width: 767px) {
  .cart-drawer .cart-item.is-addon,
  .cart-drawer .cart-item.is-addon:hover,
  .cart-drawer .cart-item.is-addon:active,
  .cart-drawer .cart-item.is-addon:focus,
  .cart-drawer .cart-item.is-addon:focus-within {
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* CHÆN CART DRAWER — ADD-ON HOVER FLASH FINAL FIX
   Scope: cart add-on row visual state only.
   Prevents the add-on row from inheriting the legacy .cart-item:hover
   background/transition while preserving all click and cart behaviour.
*/
.cart-drawer .cart-item.is-addon,
.cart-drawer .cart-item.is-addon:hover,
.cart-drawer .cart-item.is-addon:active,
.cart-drawer .cart-item.is-addon:focus,
.cart-drawer .cart-item.is-addon:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.cart-drawer .cart-item.is-addon .cart-item-image-link,
.cart-drawer .cart-item.is-addon .cart-item-image-link:hover,
.cart-drawer .cart-item.is-addon .cart-item-image-link:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.cart-drawer .cart-item.is-addon .cart-item-image-link[role="button"] {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}


/* ======================================================================
   CHÆN Email Verification — fixed, non-scrolling presentation
   Scope: registrationSuccessForm / data-auth-view="verification" only.
   The page keeps normal document flow, while the verification card itself
   has a fixed viewport and the inner auth pane never becomes a scroll area.
   ====================================================================== */
#authPage.auth-page.active[data-auth-view="verification"] .auth-page-container {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 24px 24px 40px !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .auth-page-shell {
  width: min(720px, calc(100vw - 48px)) !important;
  max-width: 720px !important;
  height: 640px !important;
  min-height: 640px !important;
  max-height: 640px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(120, 100, 85, 0.10) !important;
  border-radius: 18px !important;
  background: #FAF8F4 !important;
  box-shadow: 0 8px 28px rgba(50, 40, 32, 0.035) !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .chaen-auth-body {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 640px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .chaen-auth-pane {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 640px !important;
  padding: 30px 48px 28px !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .chaen-auth-pane::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] #registrationSuccessForm {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-header {
  flex: 0 0 auto !important;
  margin: 0 0 20px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 12px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-icon svg {
  width: 36px !important;
  height: 36px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-title {
  margin: 0 0 6px !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-subtitle {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-section {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
  padding: 20px 22px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-desc {
  margin: 0 0 10px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-email-box {
  min-height: 44px !important;
  margin: 0 0 12px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-email-box svg {
  width: 18px !important;
  height: 18px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-email-addr {
  font-size: 13px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-action {
  margin: 0 0 14px !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-status-row {
  min-height: 42px !important;
  margin: 0 0 14px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-status-label {
  font-size: 12px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verify-status-badge {
  padding: 4px 10px !important;
  font-size: 11px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-resend-section {
  padding-top: 12px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-resend-hint {
  margin: 0 0 10px !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-resend-btn {
  min-height: 40px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-resend-btn svg {
  width: 16px !important;
  height: 16px !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-resend-msg {
  min-height: 0 !important;
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-actions {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-success-actions #regGoMemberBtn {
  display: none !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verification-action-btn {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verification-login-btn {
  order: 1 !important;
  background: transparent !important;
  color: #534840 !important;
  border: 1px solid #342B26 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verification-login-btn:hover {
  background: #F3EEE9 !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verification-change-btn {
  order: 2 !important;
  background: #B8A08A !important;
  color: #FFFFFF !important;
  border: 1px solid #B8A08A !important;
}

#authPage.auth-page.active[data-auth-view="verification"] .reg-verification-change-btn:hover {
  background: #A68F7C !important;
  border-color: #A68F7C !important;
}

@media (max-width: 767px) {
  #authPage.auth-page.active[data-auth-view="verification"] .auth-page-container {
    padding: 12px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .auth-page-shell {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 24px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 14px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .chaen-auth-body,
  #authPage.auth-page.active[data-auth-view="verification"] .chaen-auth-pane {
    height: 100% !important;
    max-height: 100% !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .chaen-auth-pane {
    padding: 22px 20px 20px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-success-header {
    margin-bottom: 14px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-success-icon {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 8px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-success-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-success-title {
    font-size: 23px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-success-subtitle {
    font-size: 12px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-verify-section {
    margin-bottom: 12px !important;
    padding: 16px 16px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-verify-desc {
    font-size: 12px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-verify-email-box {
    min-height: 42px !important;
    margin-bottom: 10px !important;
    padding: 9px 12px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-verify-action {
    margin-bottom: 11px !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-verify-status-row {
    min-height: 40px !important;
    margin-bottom: 11px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-resend-section {
    padding-top: 10px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-resend-hint {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-resend-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 7px 16px !important;
    font-size: 11.5px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-success-actions {
    gap: 10px !important;
  }

  #authPage.auth-page.active[data-auth-view="verification"] .reg-verification-action-btn {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}


/* CHÆN forgot-password desktop: content fits the auth pane; do not show an
   unnecessary inner scrollbar when submit/loading/success state changes. */
@media (min-width: 769px) {
  #authPage.active.forgot-password-mode .chaen-auth-pane,
  #authPage.forgot-password-mode .chaen-auth-pane {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
}


/* ============================================================================
   CHÆN FORGOT PASSWORD — STATUS / LAYOUT STABILITY FIX (2026-09-09)
   Scope: forgot-password status message only.
   Keep async loading/success/error text out of document flow so clicking
   "寄送重設連結" cannot push the divider / return-login button below the
   fixed desktop auth card. The existing 40px gap below the submit button is
   used as the status lane, preserving the pre-click geometry.
   ============================================================================ */
#authPage.forgot-password-mode #forgotPasswordForm {
  position: relative !important;
}

#authPage.forgot-password-mode #forgotPasswordForm .forgot-status-layer {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#authPage.forgot-password-mode #forgotPasswordForm .forgot-status-layer #forgotError,
#authPage.forgot-password-mode #forgotPasswordForm .forgot-status-layer #forgotSuccess {
  position: absolute !important;
  top: 10px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 18px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#authPage.forgot-password-mode #forgotPasswordForm .forgot-status-layer #forgotError:empty,
#authPage.forgot-password-mode #forgotPasswordForm .forgot-status-layer #forgotSuccess:empty {
  display: none !important;
}

@media (max-width: 767px) {
  #authPage.forgot-password-mode #forgotPasswordForm .forgot-status-layer #forgotError,
  #authPage.forgot-password-mode #forgotPasswordForm .forgot-status-layer #forgotSuccess {
    top: 6px !important;
    font-size: 11px !important;
    line-height: 16px !important;
  }
}

/* ================================================================
   CHÆN LOGIN PAGE — DESKTOP SCROLLBAR STABILITY HOTFIX (2026-09-10)
   Login content fits the established desktop auth panel. Prevent the
   right-hand login pane from becoming its own scroll container, which
   caused a visible scrollbar to appear as soon as the login entry was
   opened. Registration/forgot/reset and mobile scrolling are untouched.
   ================================================================ */
@media (min-width: 769px) {
  #authPage[data-auth-view="login"] .chaen-auth-pane {
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
    scrollbar-width: none !important;
  }

  #authPage[data-auth-view="login"] .chaen-auth-pane::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}