/* ============================================================
   AURORA 主题 — 极光玻璃风格（新系统复刻版）
   复刻自舊系統 Aurora 極光主題：流動色彩、毛玻璃質感、現代電商設計
   ============================================================ */

/* Google Fonts（裝修模組字體）已搬到 shop.partials.decorative-fonts 用非阻塞 <link> 載入：
   @import 要等這份 CSS 下載完才發現，等於多一個來回，直接拖慢首屏。 */

/* ===== 全局變量（Aurora 設計令牌，對齊新系統 --clay-* 體系） ===== */
:root {
  --clay-bg: #FAFAFA;
  --clay-card: rgba(255,255,255,0.6);
  --clay-card-solid: #FFFFFF;
  --clay-border: rgba(0,0,0,0.04);
  --clay-border-light: rgba(0,0,0,0.03);
  --clay-primary: #6366F1;
  --clay-primary-hover: #4F46E5;
  --clay-accent: #EC4899;
  --clay-cta: #6366F1;
  --clay-blue: #3B82F6;
  --clay-green: #10B981;
  --clay-text: #0A0A0A;
  --clay-text-secondary: rgba(10,10,10,0.62);
  --clay-text-muted: rgba(10,10,10,0.58);
  --clay-shadow: 0 16px 48px rgba(var(--clay-primary-rgb),0.12);
  --clay-shadow-hover: 0 24px 64px rgba(var(--clay-primary-rgb),0.18);
  --clay-radius: 20px;
  --clay-radius-sm: 12px;
  --clay-radius-xs: 8px;
  --clay-border-width: 1px;
  /* C 類語意狀態色：全主題共用的唯一出處（本檔即基底，其他主題沒帶自己的 custom.css 時沿繼承鏈取這份）。
     刻意不跟商家換色走——成功綠／危險紅被換成品牌色會失去語意。文字對 --clay-bg(#FAFAFA) 與白底皆 ≥4.5:1。 */
  --state-success: #15803D;
  --state-danger: #DC2626;
  --state-warning: #B45309;
  --state-info: #1D4ED8;
  --clay-font-heading: 'Space Grotesk', sans-serif;
  --clay-font-body: 'Inter', sans-serif;
  /* ===== 通用變量對齊 aurora ===== */
  --primary: #6366F1;
  --primary-hover: #4F46E5;
  --text: #0A0A0A;
  --text-secondary: rgba(10,10,10,0.45);
  --border: rgba(0,0,0,0.04);
  --bg: #FAFAFA;
  --white: #FFFFFF;
  --radius: 20px;
  --radius-sm: 12px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--clay-font-body) !important;
  background: var(--clay-bg) !important;
  color: var(--clay-text) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.clay-logo, .module-title, .product-price .price-new, .price-new {
  font-family: var(--clay-font-heading) !important;
}

a { color: var(--clay-text); transition: color 0.2s; }
a:hover { color: var(--clay-accent); }

/* ===== 黏土卡片 Mixin ===== */
.clay-card {
  background: var(--clay-card);
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow), inset -1px -1px 4px rgba(0,0,0,0.02);
  transition: all 0.25s;
}
.clay-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--clay-shadow-hover);
}

.clay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-sm);
  background: var(--clay-card);
  font-family: var(--clay-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--clay-text);
  box-shadow: var(--clay-shadow);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.clay-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--clay-shadow-hover);
  color: var(--clay-text);
}
.clay-btn-primary {
  background: linear-gradient(135deg, #FFF, var(--clay-accent-soft, #FFF5F8));
  border-color: var(--clay-primary);
  color: var(--clay-text);
  box-shadow: 4px 4px 0 var(--clay-primary);
}
.clay-btn-primary:hover {
  box-shadow: 7px 7px 0 var(--clay-primary);
  border-color: var(--clay-primary-hover);
}

/* ===== 顶部栏 ===== */
.clay-top-bar {
  background: var(--clay-card);
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--clay-text);
  border-bottom: 1px solid var(--clay-border-light);
}
.clay-top-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;
  white-space: nowrap;
  text-align: left;
}
.clay-top-bar-left {
  display: inline-block;
  white-space: nowrap;
}
.clay-top-bar .clay-select-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.clay-top-bar .clay-select-wrap:last-child {
  margin-right: 0;
}

/* 顶部栏内的选择器 */
.clay-top-bar .clay-select-btn {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-width: 2px;
  box-shadow: none;
  background: transparent;
  color: var(--clay-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--clay-radius-xs);
  border-style: solid;
  cursor: pointer;
  transition: all 0.2s;
}
.clay-top-bar .clay-select-btn:hover {
  box-shadow: none;
  background: var(--clay-border-light);
  color: var(--clay-text);
}
.clay-top-bar .clay-select-wrap.open .clay-select-btn {
  background: var(--clay-border-light);
  color: var(--clay-text);
  box-shadow: none;
}
.clay-top-bar .clay-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 120px;
  background: var(--clay-card);
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-sm);
  box-shadow: 4px 4px 0 var(--clay-border);
  padding: 6px;
  z-index: 1100;
  display: none;
  white-space: normal;
}
.clay-top-bar .clay-select-wrap.open .clay-select-menu {
  display: block;
}

/* ===== 移动端顶部栏适配 ===== */
@media (max-width: 991.98px) {
  .clay-top-bar {
    padding: 3px 0;
  }
  .clay-top-bar-inner {
    padding: 0 8px;
  }
  .clay-top-bar .clay-select-wrap {
    margin-right: 4px;
  }
  .clay-top-bar .clay-select-btn {
    /* 手指點選目標不宜過小：原本只有 28px 高，加大到 36px */
    padding: 5px 8px;
    min-height: 36px;
    font-size: 11px;
    border-width: 1.5px;
  }
  .clay-top-bar .clay-select-menu {
    min-width: 100px;
  }
}

/* ===== Header ===== */
.clay-header {
  background: var(--clay-card) !important;
  border-bottom: var(--clay-border-width) solid var(--clay-border) !important;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.clay-logo {
  font-family: var(--clay-font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--clay-text);
  text-decoration: none !important;
}
.clay-logo span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clay-logo:hover { color: var(--clay-text); }
.clay-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.clay-header-menu-btn {
  background: none;
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-xs);
  padding: 8px 10px;
  color: var(--clay-text);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
}
.clay-header-menu-btn:hover {
  box-shadow: 4px 4px 0 var(--clay-border);
  transform: translateY(-1px);
}

/* ===== 导航 ===== */
.clay-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.clay-nav a {
  color: var(--clay-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
}
.clay-nav a:hover {
  color: var(--clay-text);
  border-color: var(--clay-border-light);
  background: var(--clay-card);
  box-shadow: 3px 3px 0 var(--clay-border);
  transform: translateY(-1px);
}
.clay-nav a.active {
  color: var(--clay-text);
  border-color: var(--clay-primary);
  background: var(--clay-card);
  box-shadow: 3px 3px 0 var(--clay-primary);
}

/* ===== 导航下拉菜单 ===== */
.clay-nav .clay-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.clay-nav .clay-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clay-nav .clay-nav-item > a svg {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-nav .clay-nav-item.has-dropdown:hover > a svg,
.clay-nav .clay-nav-item.has-dropdown:focus-within > a svg {
  transform: rotate(180deg);
}
.clay-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  background: var(--clay-card);
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-sm);
  box-shadow: 5px 5px 0 var(--clay-border);
  min-width: 240px !important;
  max-width: 840px !important;
  width: 840px;
  padding: 20px 24px !important;
  z-index: 1100;
  /* 收起用 visibility 而不是 pointer-events：pointer-events 不能延遲，
     延遲期間會出現「選單看得見卻點不到」的情況 */
  transition:
    opacity 200ms cubic-bezier(0.23, 1, 0.32, 1) 3s,
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1) 3s,
    visibility 0s linear 3.2s;
}
.clay-nav-item.has-dropdown:hover > .clay-dropdown,
.clay-nav-item.has-dropdown:focus-within > .clay-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
/* 滑鼠還在選單列上（正在換下一個選單）時不延遲收起，否則前後兩個下拉會同時顯示 */
.clay-nav:hover .clay-dropdown {
  transition-delay: 0s;
}
/* 桥接导航项与下拉框之间的空隙，防止鼠标移出菜单项时下拉框消失 */
.clay-nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.clay-dropdown > .clay-dropdown-inner,
.clay-dropdown .clay-dropdown-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto;
  gap: 18px 24px !important;
}
.clay-dropdown-inner .clay-dropdown-group {
  min-width: 0;
  width: 100%;
}
.clay-dropdown-group-title {
  font-family: var(--clay-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clay-text-secondary);
  margin-bottom: 8px;
}
.clay-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clay-dropdown-list li a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--clay-radius-xs);
  color: var(--clay-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), padding-left 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-dropdown-list li a:hover {
  background: var(--clay-bg);
  color: var(--clay-accent);
  padding-left: 14px;
}
.clay-dropdown-img {
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid var(--clay-border-light);
  max-width: 180px;
}

/* ===== 移动端菜单折叠 ===== */
.clay-mobile-item {
  display: flex;
  flex-direction: column;
}
.clay-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clay-mobile-toggle .clay-mobile-chevron {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-mobile-item.open .clay-mobile-chevron {
  transform: rotate(180deg);
}
.clay-mobile-sub {
  display: none;
  flex-direction: column;
  padding: 4px 0 4px 16px;
  margin: 0;
  border-left: var(--clay-border-width) solid var(--clay-border-light);
}
.clay-mobile-item.open .clay-mobile-sub {
  display: flex;
}
.clay-mobile-group-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clay-text-secondary);
  padding: 8px 10px 2px;
}
.clay-mobile-sub-link {
  display: block;
  padding: 8px 10px;
  color: var(--clay-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--clay-radius-xs);
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-mobile-sub-link:hover {
  color: var(--clay-accent);
  background: var(--clay-bg);
}

@media (prefers-reduced-motion: reduce) {
  .clay-dropdown,
  .clay-nav .clay-nav-item > a svg,
  .clay-mobile-toggle .clay-mobile-chevron {
    transition: none;
  }
}

/* ===== Header 操作按钮 ===== */
.clay-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.clay-action-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay-text-secondary);
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
  text-decoration: none;
  position: relative;
}
.clay-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--clay-border);
  color: var(--clay-text);
}
.clay-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--clay-accent);
  color: #fff;
  text-align: center;
  font-family: var(--clay-font-heading);
}
/* 覆盖全局遗留规则 header .cart-badge-quantity{left:27px;zoom:0.9}，避免徽标被推出按钮外 */
.clay-header .clay-cart-badge {
  left: auto !important;
  zoom: 1 !important;
  right: -5px !important;
}

/* ===== 移动端菜单 ===== */
.offcanvas.clay-menu-mobile { background: var(--clay-bg) !important; }
.offcanvas.clay-menu-mobile .offcanvas-header {
  border-bottom: var(--clay-border-width) solid var(--clay-border);
  padding: 16px 20px;
}
.offcanvas.clay-menu-mobile .offcanvas-body { padding: 12px 20px; }
.clay-mobile-nav a {
  display: block;
  padding: 14px 16px;
  border-radius: var(--clay-radius-sm);
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--clay-text);
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
}
.clay-mobile-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--clay-border);
}

/* ===== 商品卡片 ===== */
.product-wrap {
  background: var(--clay-card) !important;
  border: var(--clay-border-width) solid var(--clay-border) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow), inset -1px -1px 4px rgba(0,0,0,0.02) !important;
  transition: all 0.25s !important;
  overflow: hidden;
}
.product-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--clay-shadow-hover) !important;
  border-color: var(--clay-border) !important;
}
.product-wrap .image { overflow: hidden !important; position: relative !important; }
.product-wrap img { transition: transform 0.3s !important; }
.product-wrap:hover img { transform: scale(1.03) !important; }
.product-price .price-new, .price-new {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--clay-text) !important;
  font-family: var(--clay-font-heading) !important;
}
.product-price .price-old, .price-old {
  color: var(--clay-text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ===== 加购按钮 ===== */
.clay-add-cart {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--clay-radius-sm) !important;
  border: var(--clay-border-width) solid var(--clay-primary) !important;
  background: var(--clay-accent-soft, #FFF5F8) !important;
  color: var(--clay-accent) !important;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--clay-primary) !important;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clay-add-cart:hover {
  transform: translateY(-2px) !important;
  box-shadow: 5px 5px 0 var(--clay-primary) !important;
}

/* ===== 促销标签 ===== */
.sale-badge, .discount-badge, .product-wrap .discount-badge {
  background: var(--clay-card) !important;
  border: 2.5px solid var(--clay-accent) !important;
  color: var(--clay-accent) !important;
  font-family: var(--clay-font-heading) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: var(--clay-radius-xs) !important;
  box-shadow: 2px 2px 0 #FFC8C8 !important;
}

/* ===== 模块标题 ===== */
.module-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-bottom: 28px !important;
  color: var(--clay-text) !important;
}
.module-title span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Swiper ===== */
.swiper.module-swiper-img-text,
.swiper[class*="module-swiper-img-text"],
.swiper[class*="module-img-text-slideshow"],
.swiper-container { width: 100% !important; }
.swiper.module-swiper-img-text .swiper-slide img,
.swiper[class*="module-swiper-img-text"] .swiper-slide img,
.swiper[class*="module-img-text-slideshow"] .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--clay-radius) !important;
  border: var(--clay-border-width) solid var(--clay-border) !important;
  box-shadow: var(--clay-shadow) !important;
}
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: var(--clay-primary) !important;
  opacity: 0.5 !important;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: var(--clay-accent) !important;
}
.swiper-button-prev, .swiper-button-next {
  color: var(--clay-text) !important;
  background: var(--clay-card) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: var(--clay-border-width) solid var(--clay-border) !important;
  box-shadow: var(--clay-shadow) !important;
}
.swiper-button-prev::after, .swiper-button-next::after {
  font-size: 16px !important;
}

/* ===== 购物车侧边栏 ===== */
#offcanvas-right-cart {
  width: 440px !important;
  background: var(--clay-bg) !important;
}

/* 手機：側邊購物車固定 440px 比手機寬（390px 會被切），改為佔滿視口 */
@media (max-width: 600px) {
  #offcanvas-right-cart { width: 100% !important; max-width: 100% !important; }
}
#offcanvas-right-cart .offcanvas-header {
  padding: 20px 24px;
  border-bottom: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
}
#offcanvas-right-cart .offcanvas-header h5 {
  font-family: var(--clay-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--clay-text);
}
#offcanvas-right-cart .offcanvas-body { padding: 16px 24px; }
#offcanvas-right-cart .offcanvas-right-products .product-list {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: var(--clay-border-width) solid var(--clay-border);
}
#offcanvas-right-cart .offcanvas-right-products .product-list:last-child { border-bottom: none; }
#offcanvas-right-cart .select-wrap { margin-right: 12px; }
#offcanvas-right-cart .select-wrap i { font-size: 18px; color: var(--clay-text-muted); cursor: pointer; }
#offcanvas-right-cart .select-wrap i.bi-check-circle-fill { color: var(--clay-accent); }
#offcanvas-right-cart .product-info { flex: 1; min-width: 0; }
#offcanvas-right-cart .product-info .left {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--clay-radius-sm);
  border: var(--clay-border-width) solid var(--clay-border);
  overflow: hidden;
  margin-right: 12px;
  background: var(--clay-card);
}
#offcanvas-right-cart .product-info .left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#offcanvas-right-cart .product-info .right .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--clay-text);
  text-decoration: none;
}
#offcanvas-right-cart .product-info .right .name:hover { color: var(--clay-accent); }
#offcanvas-right-cart .product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
#offcanvas-right-cart .product-bottom .price {
  font-size: 15px;
  font-weight: 800;
  color: var(--clay-accent);
  font-family: var(--clay-font-heading);
}
#offcanvas-right-cart .product-bottom .offcanvas-products-quantity {
  width: 44px;
  height: 28px;
  padding: 2px 6px;
  font-size: 13px;
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-xs);
  text-align: center;
  box-shadow: 1px 1px 0 var(--clay-border);
}
#offcanvas-right-cart .product-bottom .offcanvas-products-delete {
  font-size: 13px;
  color: var(--clay-text-muted);
  cursor: pointer;
  margin-left: 8px;
}
#offcanvas-right-cart .product-bottom .offcanvas-products-delete:hover { color: var(--clay-accent); }
#offcanvas-right-cart .offcanvas-footer {
  border-top: var(--clay-border-width) solid var(--clay-border);
  padding: 16px 24px;
  background: var(--clay-card);
}
#offcanvas-right-cart .offcanvas-footer .top-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
#offcanvas-right-cart .offcanvas-footer .top-footer span { font-size: 14px; font-weight: 600; }
#offcanvas-right-cart .offcanvas-footer .btn {
  border-radius: var(--clay-radius-sm) !important;
  font-family: var(--clay-font-heading) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
}
.btn-outline-dark {
  border: var(--clay-border-width) solid var(--clay-border) !important;
  background: var(--clay-card) !important;
  color: var(--clay-text) !important;
  box-shadow: 3px 3px 0 var(--clay-border) !important;
  transition: all 0.2s !important;
}
.btn-outline-dark:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 var(--clay-border) !important;
  background: var(--clay-card) !important;
  color: var(--clay-text) !important;
}
.btn-dark {
  border: var(--clay-border-width) solid var(--clay-primary) !important;
  background: linear-gradient(135deg, #FFF, var(--clay-accent-soft, #FFF5F8)) !important;
  color: var(--clay-text) !important;
  box-shadow: 3px 3px 0 var(--clay-primary) !important;
  transition: all 0.2s !important;
}
.btn-dark:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 var(--clay-primary) !important;
}

/* ===== 空购物车 ===== */
.empty-cart-wrap i { color: var(--clay-text-muted); }

/* ===== Footer ===== */
.clay-footer {
  border-top: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  padding: 32px 0;
  margin-top: 40px;
}
.clay-footer-inner { text-align: center; }
.clay-footer-logo {
  font-family: var(--clay-font-heading);
  font-size: 20px;
  font-weight: 900;
  color: var(--clay-text);
  margin-bottom: 16px;
}
.clay-footer-logo span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clay-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.clay-footer-links a {
  color: var(--clay-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s;
}
.clay-footer-links a:hover { color: var(--clay-accent); }
.clay-footer-copy {
  color: var(--clay-text-muted);
  font-size: 12px;
}

/* ===== 分类图标 ===== */
.module-info.module-icons .image-item {
  width: 110px !important;
  height: 110px !important;
  min-width: 110px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--clay-card) !important;
  border: 3px solid var(--clay-border-light) !important;
  box-shadow:
    5px 5px 0 rgba(232, 220, 228, 0.6),
    inset 0 -2px 4px rgba(0,0,0,0.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  flex: 0 0 auto !important;
}
.module-info.module-icons .image-item:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    7px 7px 0 var(--clay-border-light),
    inset 0 -2px 4px rgba(0,0,0,0.03) !important;
  border-color: var(--clay-border) !important;
}
.module-info.module-icons .image-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.module-info.module-icons .title {
  font-family: var(--clay-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--clay-text) !important;
  margin-top: 16px !important;
  text-align: center !important;
}
.module-icons .sub-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--clay-text-muted) !important;
}

/* ===== 产品Tab推荐 ===== */
.module-tab-product .module-title {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 28px;
  color: var(--clay-text);
}

/* ===== 分类胶囊 ===== */
.category-pills a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--clay-radius-sm);
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  font-size: 13px;
  font-weight: 700;
  color: var(--clay-text-secondary);
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
  text-decoration: none;
}
.category-pills a:hover, .category-pills a.active {
  border-color: var(--clay-primary);
  color: var(--clay-text);
  box-shadow: 3px 3px 0 var(--clay-primary);
}

/* ===== 面包屑 ===== */
.breadcrumb { padding: 20px 0; }
.breadcrumb-item a { color: var(--clay-text-secondary); font-weight: 600; font-size: 13px; }
.breadcrumb-item.active { color: var(--clay-text); font-weight: 700; }

/* ===== 分页 ===== */
.pagination .page-item .page-link {
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-xs);
  background: var(--clay-card);
  color: var(--clay-text);
  font-weight: 600;
  margin: 0 3px;
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
}
.pagination .page-item.active .page-link {
  background: var(--clay-accent-soft, #FFF5F8);
  border-color: var(--clay-primary);
  box-shadow: 2px 2px 0 var(--clay-primary);
}
.pagination .page-item .page-link:hover {
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--clay-border);
}

/* ===== 页面标题 ===== */
.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--clay-text);
  margin-bottom: 20px;
}

/* ===== 首页装修轮播模块标题 ===== */
.module-title.modules-title {
  text-align: left !important;
}

/* ===== 货币/语言选择器 ===== */
.clay-select-wrap {
  position: relative;
}
.clay-select-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  color: var(--clay-text);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--clay-font-body);
  box-shadow: 2px 2px 0 var(--clay-border);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.clay-select-btn:hover {
  transform: translateY(-1px);
  box-shadow: 4px 4px 0 var(--clay-border);
}
.clay-select-wrap.open .clay-select-btn {
  border-color: var(--clay-primary);
  box-shadow: 2px 2px 0 var(--clay-primary);
}
.clay-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--clay-card);
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-sm);
  box-shadow: 4px 4px 0 var(--clay-border);
  padding: 6px;
  z-index: 1100;
  display: none;
}
.clay-select-wrap.open .clay-select-menu {
  display: block;
}
.clay-select-item {
  display: block;
  padding: 8px 14px;
  border-radius: var(--clay-radius-xs);
  color: var(--clay-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.clay-select-item:hover {
  background: var(--clay-accent-soft, #FFF5F8);
  color: var(--clay-accent);
}

/* ===== 移动端导航压缩（置于文件末尾确保覆盖基础样式）===== */
@media (max-width: 991.98px) {
  .clay-header {
    padding: 8px 0;
  }
  .clay-header-left {
    gap: 8px;
  }
  .clay-header-menu-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .clay-header-menu-btn svg {
    width: 18px;
    height: 18px;
  }
  .clay-logo {
    font-size: 18px;
    white-space: nowrap;
  }
  .clay-header-actions {
    gap: 6px;
  }
  .clay-action-btn {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }
  .clay-action-btn svg {
    width: 16px;
    height: 16px;
  }
  /* 分类图标移动端缩小 */
  .module-info.module-icons .image-item {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
  }
  /* 移动端导航三列：汉堡+搜索 | Logo 居中 | 购物车+账户 */
  .clay-header .clay-mobile-logo-col {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .clay-header .clay-mobile-logo-col .clay-logo {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ===== 防止整页横向滚动（用 clip 不破坏 sticky 吸顶导航） ===== */
html {
  overflow-x: clip;
  max-width: 100vw;
}
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ===== 積分卡片不套用「我的訂單」卡片的 509px 最小高度，避免被拉長 ===== */
body.page-account .account-card.points-card .card-body,
body.page-account .account-card.points-account-card .card-body {
  min-height: auto;
}

/* ===== NG 導航對齊舊系統 clay（Header 段） ===== */
/* ===== Header ===== */
.clay-header {
  background: var(--clay-card) !important;
  border-bottom: var(--clay-border-width) solid var(--clay-border) !important;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.clay-logo {
  font-family: var(--clay-font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--clay-text);
  text-decoration: none !important;
}
.clay-logo span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clay-logo:hover { color: var(--clay-text); }
.clay-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.clay-header-menu-btn {
  background: none;
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-xs);
  padding: 8px 10px;
  color: var(--clay-text);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
}
.clay-header-menu-btn:hover {
  box-shadow: 4px 4px 0 var(--clay-border);
  transform: translateY(-1px);
}

/* ===== 导航 ===== */
.clay-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.clay-nav a {
  color: var(--clay-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
}
.clay-nav a:hover {
  color: var(--clay-text);
  border-color: var(--clay-border-light);
  background: var(--clay-card);
  box-shadow: 3px 3px 0 var(--clay-border);
  transform: translateY(-1px);
}
.clay-nav a.active {
  color: var(--clay-text);
  border-color: var(--clay-primary);
  background: var(--clay-card);
  box-shadow: 3px 3px 0 var(--clay-primary);
}

/* ===== 导航下拉菜单 ===== */
.clay-nav .clay-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.clay-nav .clay-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clay-nav .clay-nav-item > a svg {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-nav .clay-nav-item.has-dropdown:hover > a svg,
.clay-nav .clay-nav-item.has-dropdown:focus-within > a svg {
  transform: rotate(180deg);
}
.clay-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  background: var(--clay-card);
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-sm);
  box-shadow: 5px 5px 0 var(--clay-border);
  min-width: 240px !important;
  max-width: 840px !important;
  width: 840px;
  padding: 20px 24px !important;
  z-index: 1100;
  /* 收起用 visibility 而不是 pointer-events：pointer-events 不能延遲，
     延遲期間會出現「選單看得見卻點不到」的情況 */
  transition:
    opacity 200ms cubic-bezier(0.23, 1, 0.32, 1) 3s,
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1) 3s,
    visibility 0s linear 3.2s;
}
.clay-nav-item.has-dropdown:hover > .clay-dropdown,
.clay-nav-item.has-dropdown:focus-within > .clay-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
/* 滑鼠還在選單列上（正在換下一個選單）時不延遲收起，否則前後兩個下拉會同時顯示 */
.clay-nav:hover .clay-dropdown {
  transition-delay: 0s;
}
/* 桥接导航项与下拉框之间的空隙，防止鼠标移出菜单项时下拉框消失 */
.clay-nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.clay-dropdown > .clay-dropdown-inner,
.clay-dropdown .clay-dropdown-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: auto;
  gap: 18px 24px !important;
}
.clay-dropdown-inner .clay-dropdown-group {
  min-width: 0;
  width: 100%;
}
.clay-dropdown-group-title {
  font-family: var(--clay-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clay-text-secondary);
  margin-bottom: 8px;
}
.clay-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clay-dropdown-list li a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--clay-radius-xs);
  color: var(--clay-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), padding-left 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-dropdown-list li a:hover {
  background: var(--clay-bg);
  color: var(--clay-accent);
  padding-left: 14px;
}
.clay-dropdown-img {
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid var(--clay-border-light);
  max-width: 180px;
}

/* ===== 移动端菜单折叠 ===== */
.clay-mobile-item {
  display: flex;
  flex-direction: column;
}
.clay-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clay-mobile-toggle .clay-mobile-chevron {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-mobile-item.open .clay-mobile-chevron {
  transform: rotate(180deg);
}
.clay-mobile-sub {
  display: none;
  flex-direction: column;
  padding: 4px 0 4px 16px;
  margin: 0;
  border-left: var(--clay-border-width) solid var(--clay-border-light);
}
.clay-mobile-item.open .clay-mobile-sub {
  display: flex;
}
.clay-mobile-group-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clay-text-secondary);
  padding: 8px 10px 2px;
}
.clay-mobile-sub-link {
  display: block;
  padding: 8px 10px;
  color: var(--clay-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--clay-radius-xs);
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.clay-mobile-sub-link:hover {
  color: var(--clay-accent);
  background: var(--clay-bg);
}

@media (prefers-reduced-motion: reduce) {
  .clay-dropdown,
  .clay-nav .clay-nav-item > a svg,
  .clay-mobile-toggle .clay-mobile-chevron {
    transition: none;
  }
}

/* ===== Header 操作按钮 ===== */
.clay-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.clay-action-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay-text-secondary);
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
  text-decoration: none;
  position: relative;
}
.clay-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--clay-border);
  color: var(--clay-text);
}
.clay-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--clay-accent);
  color: #fff;
  text-align: center;
  font-family: var(--clay-font-heading);
}
/* 覆盖全局遗留规则 header .cart-badge-quantity{left:27px;zoom:0.9}，避免徽标被推出按钮外 */
.clay-header .clay-cart-badge {
  left: auto !important;
  zoom: 1 !important;
  right: -5px !important;
}

/* ===== 移动端菜单 ===== */
.offcanvas.clay-menu-mobile { background: var(--clay-bg) !important; }
.offcanvas.clay-menu-mobile .offcanvas-header {
  border-bottom: var(--clay-border-width) solid var(--clay-border);
  padding: 16px 20px;
}
.offcanvas.clay-menu-mobile .offcanvas-body { padding: 12px 20px; }
.clay-mobile-nav a {
  display: block;
  padding: 14px 16px;
  border-radius: var(--clay-radius-sm);
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--clay-text);
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--clay-border);
  transition: all 0.2s;
}
.clay-mobile-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--clay-border);
}

/* ===== 商品卡片 ===== */
.product-wrap {
  background: var(--clay-card) !important;
  border: var(--clay-border-width) solid var(--clay-border) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow), inset -1px -1px 4px rgba(0,0,0,0.02) !important;
  transition: all 0.25s !important;
  overflow: hidden;
}
.product-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--clay-shadow-hover) !important;
  border-color: var(--clay-border) !important;
}
.product-wrap .image { overflow: hidden !important; position: relative !important; }
.product-wrap img { transition: transform 0.3s !important; }
.product-wrap:hover img { transform: scale(1.03) !important; }
.product-price .price-new, .price-new {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--clay-text) !important;
  font-family: var(--clay-font-heading) !important;
}
.product-price .price-old, .price-old {
  color: var(--clay-text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ===== 加购按钮 ===== */
.clay-add-cart {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--clay-radius-sm) !important;
  border: var(--clay-border-width) solid var(--clay-primary) !important;
  background: var(--clay-accent-soft, #FFF5F8) !important;
  color: var(--clay-accent) !important;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--clay-primary) !important;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clay-add-cart:hover {
  transform: translateY(-2px) !important;
  box-shadow: 5px 5px 0 var(--clay-primary) !important;
}

/* ===== 促销标签 ===== */
.sale-badge, .discount-badge, .product-wrap .discount-badge {
  background: var(--clay-card) !important;
  border: 2.5px solid var(--clay-accent) !important;
  color: var(--clay-accent) !important;
  font-family: var(--clay-font-heading) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: var(--clay-radius-xs) !important;
  box-shadow: 2px 2px 0 #FFC8C8 !important;
}

/* ===== 模块标题 ===== */
.module-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-bottom: 28px !important;
  color: var(--clay-text) !important;
}
.module-title span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Swiper ===== */
.swiper.module-swiper-img-text,
.swiper[class*="module-swiper-img-text"],
.swiper[class*="module-img-text-slideshow"],
.swiper-container { width: 100% !important; }
.swiper.module-swiper-img-text .swiper-slide img,
.swiper[class*="module-swiper-img-text"] .swiper-slide img,
.swiper[class*="module-img-text-slideshow"] .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--clay-radius) !important;
  border: var(--clay-border-width) solid var(--clay-border) !important;
  box-shadow: var(--clay-shadow) !important;
}
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: var(--clay-primary) !important;
  opacity: 0.5 !important;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: var(--clay-accent) !important;
}
.swiper-button-prev, .swiper-button-next {
  color: var(--clay-text) !important;
  background: var(--clay-card) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: var(--clay-border-width) solid var(--clay-border) !important;
  box-shadow: var(--clay-shadow) !important;
}
.swiper-button-prev::after, .swiper-button-next::after {
  font-size: 16px !important;
}

/* ===== 购物车侧边栏 ===== */
#offcanvas-right-cart {
  width: 440px !important;
  background: var(--clay-bg) !important;
}
#offcanvas-right-cart .offcanvas-header {
  padding: 20px 24px;
  border-bottom: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
}
#offcanvas-right-cart .offcanvas-header h5 {
  font-family: var(--clay-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--clay-text);
}
#offcanvas-right-cart .offcanvas-body { padding: 16px 24px; }
#offcanvas-right-cart .offcanvas-right-products .product-list {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: var(--clay-border-width) solid var(--clay-border);
}
#offcanvas-right-cart .offcanvas-right-products .product-list:last-child { border-bottom: none; }
#offcanvas-right-cart .select-wrap { margin-right: 12px; }
#offcanvas-right-cart .select-wrap i { font-size: 18px; color: var(--clay-text-muted); cursor: pointer; }
#offcanvas-right-cart .select-wrap i.bi-check-circle-fill { color: var(--clay-accent); }
#offcanvas-right-cart .product-info { flex: 1; min-width: 0; }
#offcanvas-right-cart .product-info .left {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--clay-radius-sm);
  border: var(--clay-border-width) solid var(--clay-border);
  overflow: hidden;
  margin-right: 12px;
  background: var(--clay-card);
}
#offcanvas-right-cart .product-info .left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#offcanvas-right-cart .product-info .right .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--clay-text);
  text-decoration: none;
}
#offcanvas-right-cart .product-info .right .name:hover { color: var(--clay-accent); }
#offcanvas-right-cart .product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
#offcanvas-right-cart .product-bottom .price {
  font-size: 15px;
  font-weight: 800;
  color: var(--clay-accent);
  font-family: var(--clay-font-heading);
}
#offcanvas-right-cart .product-bottom .offcanvas-products-quantity {
  width: 44px;
  height: 28px;
  padding: 2px 6px;
  font-size: 13px;
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-xs);
  text-align: center;
  box-shadow: 1px 1px 0 var(--clay-border);
}
#offcanvas-right-cart .product-bottom .offcanvas-products-delete {
  font-size: 13px;
  color: var(--clay-text-muted);
  cursor: pointer;
  margin-left: 8px;
}
#offcanvas-right-cart .product-bottom .offcanvas-products-delete:hover { color: var(--clay-accent); }
#offcanvas-right-cart .offcanvas-footer {
  border-top: var(--clay-border-width) solid var(--clay-border);
  padding: 16px 24px;
  background: var(--clay-card);
}
#offcanvas-right-cart .offcanvas-footer .top-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
#offcanvas-right-cart .offcanvas-footer .top-footer span { font-size: 14px; font-weight: 600; }
#offcanvas-right-cart .offcanvas-footer .btn {
  border-radius: var(--clay-radius-sm) !important;
  font-family: var(--clay-font-heading) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
}
.btn-outline-dark {
  border: var(--clay-border-width) solid var(--clay-border) !important;
  background: var(--clay-card) !important;
  color: var(--clay-text) !important;
  box-shadow: 3px 3px 0 var(--clay-border) !important;
  transition: all 0.2s !important;
}
.btn-outline-dark:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 var(--clay-border) !important;
  background: var(--clay-card) !important;
  color: var(--clay-text) !important;
}
.btn-dark {
  border: var(--clay-border-width) solid var(--clay-primary) !important;
  background: linear-gradient(135deg, #FFF, var(--clay-accent-soft, #FFF5F8)) !important;
  color: var(--clay-text) !important;
  box-shadow: 3px 3px 0 var(--clay-primary) !important;
  transition: all 0.2s !important;
}
.btn-dark:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 var(--clay-primary) !important;
}

/* ===== 空购物车 ===== */
.empty-cart-wrap i { color: var(--clay-text-muted); }

/* ===== NG 自研：clay-header 三區佈局（替代 Bootstrap row/col） ===== */
.clay-header .clay-header-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.clay-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.clay-header-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  border-radius: var(--clay-radius-xs);
  box-shadow: 2px 2px 0 var(--clay-border);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.clay-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.clay-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.clay-header-actions .search-box {
  flex: 1;
  max-width: 300px;
}
.clay-header-actions .cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--clay-radius-xs);
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  box-shadow: 2px 2px 0 var(--clay-border);
  font-size: 17px;
}
.clay-header-actions .cart-link .cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  background: var(--clay-accent);
  color: #fff;
  font-size: 11px;
  border-radius: 10px;
  text-align: center;
  padding: 0 5px;
}

@media (max-width: 900px) {
  .clay-header-menu-btn {
    display: inline-flex;
  }
  .clay-nav {
    display: none;
  }
}
@media (max-width: 600px) {
  .clay-header .clay-header-row {
    flex-wrap: wrap;
  }
  .clay-header-actions {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
  .clay-header-actions .search-box {
    flex: 1;
    max-width: none;
  }
}

/* ============================================================
   AURORA 专属：极光玻璃覆蓋（追加段，优先级最高）
   ============================================================ */

/* ===== 极光背景：body 后方四顆流動光球 ===== */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 640px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle 260px at 8% 12%, rgba(var(--clay-primary-rgb),0.35), transparent 70%),
    radial-gradient(circle 220px at 88% 8%, rgba(var(--clay-secondary-rgb),0.30), transparent 70%),
    radial-gradient(circle 200px at 55% 28%, rgba(var(--clay-accent-rgb),0.22), transparent 70%),
    radial-gradient(circle 180px at 35% 40%, rgba(var(--clay-blue-rgb),0.18), transparent 70%);
  filter: blur(40px);
  animation: auroraFloat 16s ease-in-out infinite;
}
@keyframes auroraFloat {
  0%, 100% { opacity: 1; transform: translate(0,0) scale(1); }
  25% { opacity: 0.85; transform: translate(30px,-20px) scale(1.05); }
  50% { opacity: 1; transform: translate(-20px,15px) scale(0.97); }
  75% { opacity: 0.9; transform: translate(20px,15px) scale(1.03); }
}

/* ===== 毛玻璃通用 ===== */
.clay-card,
.product-wrap,
.product-card,
.clay-banner,
.clay-itext,
.module-info.module-icons .image-item,
.clay-icon-circle,
.clay-brand,
.clay-select-menu,
.clay-dropdown,
.clay-action-btn,
.clay-header-actions .cart-link,
.clay-mobile-nav a,
.clay-btn,
.card {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ===== Header：毛玻璃 + 底部流光 ===== */
.clay-header {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-bottom: 1px solid rgba(var(--clay-primary-rgb),0.06) !important;
  box-shadow: 0 1px 0 rgba(var(--clay-primary-rgb),0.06), 0 4px 20px rgba(var(--clay-primary-rgb),0.04) !important;
}
.clay-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--clay-primary-rgb),0.18), rgba(var(--clay-secondary-rgb),0.18), transparent);
  pointer-events: none;
}

/* ===== Logo：极光渐变文字 ===== */
.clay-logo {
  letter-spacing: -0.5px;
}
.clay-logo span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7), var(--clay-accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root {
  --clay-secondary: #A855F7;
  --clay-primary-rgb: 99,102,241;
  --clay-secondary-rgb: 168,85,247;
  --clay-accent-rgb: 236,72,153;
  --clay-blue-rgb: 59,130,246;
  --clay-topbar-rgb: 30,27,75;
  --clay-topbar-2-rgb: 15,10,40;
  --clay-accent-soft: #FFF5F8;
  --clay-topbar: #1E1B4B;
  --clay-topbar-2: #0F0A28;
}

/* ===== 顶部栏：深紫渐变 ===== */
.clay-top-bar {
  background: linear-gradient(135deg, rgba(var(--clay-topbar-rgb),0.95), rgba(var(--clay-topbar-2-rgb),0.95)) !important;
  color: rgba(255,255,255,0.55) !important;
  border-bottom: 1px solid rgba(var(--clay-primary-rgb),0.08) !important;
}
.clay-top-bar .clay-select-btn {
  color: rgba(255,255,255,0.6) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}
.clay-top-bar .clay-select-btn:hover,
.clay-top-bar .clay-select-wrap.open .clay-select-btn {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.clay-top-bar .clay-select-menu {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
}
.clay-top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 34px;
  overflow: hidden;
}
.clay-top-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.clay-top-item + .clay-top-item::before {
  content: '';
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.15);
}
@media (max-width: 600px) {
  .clay-top-bar-inner { height: 30px; gap: 12px; justify-content: flex-start; }
  .clay-top-item { font-size: 11px; }
  .clay-top-contact { display: none; }
}

/* ===== 按钮：渐变胶囊 ===== */
.clay-btn {
  border-radius: 100px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.clay-btn-primary,
.btn-dark,
.btn-solid,
.clay-add-cart,
.btn-primary {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: 0 8px 24px rgba(var(--clay-primary-rgb),0.3) !important;
}
.clay-btn-primary:hover,
.btn-dark:hover,
.btn-solid:hover,
.clay-add-cart:hover,
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(var(--clay-primary-rgb),0.4) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7)) !important;
}
.btn-outline-dark {
  background: transparent !important;
  color: var(--clay-text-secondary) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
}
.btn-outline-dark:hover {
  border-color: var(--clay-primary) !important;
  color: var(--clay-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.btn-secondary, .btn-light, .btn-outline-light {
  border-radius: 100px !important;
}

/* ===== 按压反馈（emil-design-eng） ===== */
.clay-btn:active,
.clay-btn-primary:active,
.btn-dark:active,
.btn-solid:active,
.btn-primary:active,
.clay-add-cart:active {
  transform: translateY(0) scale(0.97) !important;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out !important;
}

/* ===== 导航链接：柔和悬停 ===== */
.clay-nav a:hover,
.clay-nav a.active {
  border-color: rgba(var(--clay-primary-rgb),0.15) !important;
  background: rgba(255,255,255,0.8) !important;
  box-shadow: none !important;
  color: var(--clay-primary) !important;
}
.clay-dropdown {
  background: rgba(255,255,255,0.85) !important;
  box-shadow: 0 24px 64px rgba(var(--clay-primary-rgb),0.12) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}
.clay-dropdown-list li a:hover {
  background: rgba(var(--clay-primary-rgb),0.06) !important;
  color: var(--clay-primary) !important;
}

/* ===== 分类圆标：玻璃胶囊 ===== */
.module-info.module-icons .image-item {
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 8px 24px rgba(var(--clay-primary-rgb),0.10) !important;
}
.module-info.module-icons .image-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px rgba(var(--clay-primary-rgb),0.16) !important;
  border-color: rgba(var(--clay-primary-rgb),0.2) !important;
}

/* ===== 分类胶囊 ===== */
.category-pills a {
  border-radius: 100px !important;
  box-shadow: none !important;
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.category-pills a:hover,
.category-pills a.active {
  background: rgba(255,255,255,0.9) !important;
  border-color: var(--clay-primary) !important;
  color: var(--clay-primary) !important;
  box-shadow: 0 8px 24px rgba(var(--clay-primary-rgb),0.12) !important;
}

/* ===== 模块标题：极光渐变 ===== */
.module-title {
  letter-spacing: -0.5px;
}
.module-title span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7), var(--clay-accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ===== 商品卡片：玻璃化 ===== */
.product-wrap {
  background: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}
.product-wrap:hover {
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 24px 64px rgba(var(--clay-primary-rgb),0.18) !important;
  border-color: rgba(var(--clay-primary-rgb),0.12) !important;
}
.sale-badge, .discount-badge {
  background: linear-gradient(135deg, #EF4444, var(--clay-accent)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 100px !important;
}

/* ===== 图文横幅 / 双图 ===== */
.clay-banner {
  display: block;
  border-radius: var(--clay-radius);
  border: var(--clay-border-width) solid var(--clay-border);
  overflow: hidden;
  background: var(--clay-card);
  transition: all .25s;
}
.clay-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.clay-banner {
  box-shadow: none !important;
}
.clay-banner:hover {
  box-shadow: 0 24px 64px rgba(var(--clay-primary-rgb),0.16) !important;
  transform: translateY(-3px) !important;
}
.clay-itext {
  background: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}
.clay-itext-media {
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(var(--clay-primary-rgb),0.06)) !important;
}

/* ===== 品牌墙 ===== */
.clay-brand {
  box-shadow: none !important;
  border-radius: var(--clay-radius) !important;
}
.clay-brand:hover {
  box-shadow: 0 16px 40px rgba(var(--clay-primary-rgb),0.14) !important;
  border-color: var(--clay-primary) !important;
  color: var(--clay-primary) !important;
}

/* ===== 服务保障 ===== */
.design-section .services-list .service-item,
.clay-services .service-item {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: none !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.design-section .services-list .service-item:hover,
.clay-services .service-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(var(--clay-primary-rgb),0.12) !important;
}

/* ===== 输入框：毛玻璃 ===== */
input, textarea, select, .form-control {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: var(--clay-radius-sm) !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--clay-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--clay-primary-rgb),0.10) !important;
  outline: none !important;
}

/* ===== 分页 ===== */
.pagination .page-item .page-link {
  box-shadow: none !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(8px) !important;
}
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(var(--clay-primary-rgb),0.3) !important;
}

/* ===== 页尾：极光光晕 ===== */
.clay-footer {
  background: rgba(245,245,255,0.35) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: none !important;
  margin-top: 60px !important;
  position: relative !important;
}
.clay-footer::before {
  content: '';
  position: absolute;
  top: -120px; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 100%, rgba(var(--clay-primary-rgb),0.12) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 80% 100%, rgba(var(--clay-secondary-rgb),0.10) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 100%, rgba(var(--clay-accent-rgb),0.08) 0%, transparent 70%);
  animation: footerAurora 16s ease-in-out infinite;
}
@keyframes footerAurora {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.65; }
  50% { opacity: 1; }
  75% { opacity: 0.7; }
}
.clay-footer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--clay-primary-rgb),0.08), rgba(var(--clay-secondary-rgb),0.12), rgba(var(--clay-accent-rgb),0.08), rgba(var(--clay-primary-rgb),0.08), transparent 95%);
  pointer-events: none;
}
.clay-footer-links a:hover { color: var(--clay-primary) !important; }

/* ===== 其余黏土硬阴影清理 ===== */
.clay-header-menu-btn,
.clay-select-btn,
.clay-select-item,
.clay-header-actions .cart-link,
.clay-mobile-nav a,
.offcanvas-products-quantity {
  box-shadow: none !important;
}
.clay-header-menu-btn:hover,
.clay-select-btn:hover,
.clay-mobile-nav a:hover {
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}
.clay-select-item:hover {
  background: rgba(var(--clay-primary-rgb),0.06) !important;
  color: var(--clay-primary) !important;
}
.clay-cart-badge {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7)) !important;
}
.swiper-button-prev, .swiper-button-next {
  background: rgba(255,255,255,0.75) !important;
  box-shadow: 0 8px 24px rgba(var(--clay-primary-rgb),0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ===== 促销页 / 结算卡片玻璃化 ===== */
.promo-card, .promo-head, .summary-card, .account-card .card-body, .card {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: none !important;
}

/* ===== 結帳：支付方式選項 ===== */
.pay-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pay-option:hover {
  border-color: #c4b5fd;
}
.pay-option input[type="radio"] {
  margin-top: 3px;
}
.pay-option .pay-info {
  min-width: 0;
}
.pay-option .pay-desc {
  color: #777;
  font-size: 13px;
  margin-top: 2px;
}
.pay-option.selected {
  border-color: var(--clay-primary, #6d28d9);
  background: rgba(109, 40, 217, 0.05);
  box-shadow: 0 0 0 1px var(--clay-primary, #6d28d9);
}


/* ===== 公告 / FAQ 玻璃化 ===== */
.design-section .notice-list li,
.design-section .faq-item {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-radius: var(--clay-radius-sm) !important;
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--clay-primary-rgb),0.4), rgba(var(--clay-secondary-rgb),0.4));
  border-radius: 4px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   AURORA 增强段（Header 图标 / 移动搜索弹层 / 收藏按钮 / 移动单行）
   ============================================================ */

/* ===== Header 图标（搜索/收藏/登入）===== */
.clay-header-actions .clay-header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(var(--clay-primary-rgb),0.10);
  color: var(--clay-text);
  text-decoration: none;
  transition: all 0.2s;
}
.clay-header-actions .clay-header-icon:hover {
  color: var(--clay-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--clay-accent-rgb),0.18);
}
.clay-header-actions .clay-header-icon .clay-icon-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.clay-header-actions .clay-search-toggle { display: none; }

/* ===== 移動端搜尋彈層（按放大鏡圖標從上方彈出）===== */
.clay-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 88px 16px 0;
  background: rgba(250,250,252,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.clay-search-overlay.open { display: flex; animation: searchDrop 0.22s ease-out; }
@keyframes searchDrop {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}
.clay-search-panel { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; }
.clay-search-form {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(var(--clay-primary-rgb),0.18);
  border-radius: 100px;
  box-shadow: 0 14px 44px rgba(var(--clay-primary-rgb),0.14);
}
.clay-search-form input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent;
  padding: 14px 20px;
  font-size: 15px;
  font-family: var(--clay-font-body);
  outline: none;
  box-shadow: none !important;
}
.clay-search-form button {
  width: 54px;
  height: 48px;
  flex: none;
  border: none;
  border-radius: 0 100px 100px 0;
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.clay-search-form button:hover { opacity: 0.9; }
.clay-search-close {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.8);
  color: var(--clay-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(var(--clay-primary-rgb),0.10);
  transition: all 0.2s;
}
.clay-search-close:hover { color: var(--clay-accent); transform: rotate(90deg); }

/* ===== 商品卡收藏按鈕 ===== */
.product-card { position: relative; }
.product-card-main { display: block; }
.fav-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(var(--clay-primary-rgb),0.14);
  color: var(--clay-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.fav-btn:hover { transform: scale(1.12); color: var(--clay-accent); }
.fav-btn.active { color: var(--clay-accent); }
.fav-btn.active svg { fill: currentColor; }

/* 详情页收藏按钮 */
.fav-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 100px;
  border: var(--clay-border-width) solid var(--clay-border);
  background: var(--clay-card);
  box-shadow: 0 8px 24px rgba(var(--clay-primary-rgb),0.10);
  color: var(--clay-text);
  cursor: pointer;
  transition: all 0.2s;
}
.fav-btn-lg:hover { color: var(--clay-accent); box-shadow: 0 10px 28px rgba(var(--clay-accent-rgb),0.18); transform: translateY(-2px); }
.fav-btn-lg.active { border-color: var(--clay-accent); color: var(--clay-accent); }
.fav-btn-lg.active svg { fill: currentColor; }

/* ===== 移動端單行 Header（汉堡+Logo | 搜索/收藏/登入/购物车）===== */
@media (max-width: 600px) {
  .clay-header .clay-header-row { flex-wrap: nowrap; gap: 8px; }
  .clay-header-left { flex: 1; min-width: 0; gap: 6px; }
  .clay-header-left .clay-logo { font-size: 17px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .clay-header-actions { order: 0; flex-basis: auto; justify-content: flex-end; gap: 6px; }
  .clay-header-actions .search-box { display: none !important; }
  .clay-search-toggle { display: inline-flex !important; }
  .clay-header-actions .clay-header-icon,
  .clay-header-actions .cart-link { width: 34px; height: 34px; border-radius: 10px; }
  .clay-header-actions .clay-header-icon svg,
  .clay-header-actions .cart-link svg { width: 16px; height: 16px; }
}

/* ===== 移動抽屜毛玻璃 ===== */
.mobile-drawer {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.mobile-nav-link { gap: 12px; font-weight: 600; color: var(--clay-text); }
.mobile-nav-link:hover { background: rgba(var(--clay-primary-rgb),0.08); }
.mobile-nav-link svg { color: var(--clay-primary); flex: none; }
.clay-mobile-toggle a { gap: 12px; }
.clay-mobile-toggle a svg { color: var(--clay-primary); }
.clay-mobile-chevron { display: flex; align-items: center; justify-content: center; }

/* ===== 字體/顏色打磨 ===== */
.clay-logo span {
  background: linear-gradient(135deg, var(--clay-primary) 0%, var(--clay-secondary) 45%, var(--clay-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}
.module-title span {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7), var(--clay-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== 麵包屑導航 ===== */
.clay-breadcrumbs {
  padding: 16px 0 0;
}
.clay-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.clay-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--clay-text-secondary);
}
.clay-breadcrumbs li a {
  color: var(--clay-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.clay-breadcrumbs li a:hover {
  color: var(--clay-primary);
}
.clay-breadcrumbs li + li::before {
  content: '›';
  margin: 0 6px;
  color: rgba(10, 10, 10, 0.25);
  font-size: 15px;
  line-height: 1;
}
.clay-breadcrumbs li.current {
  color: var(--clay-text);
  font-weight: 700;
}

/* ===== 商品篩選欄 ===== */
.clay-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 13px 16px;
  margin: 6px 0 22px;
  background: var(--clay-card);
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-sm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--clay-shadow);
}
.clay-filters-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.clay-filters-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--clay-text-secondary);
  white-space: nowrap;
}
.clay-filters-select,
.clay-filters-input {
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-radius-xs);
  background: var(--clay-card-solid);
  font-family: var(--clay-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--clay-text);
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.clay-filters-select {
  min-width: 128px;
  cursor: pointer;
}
.clay-filters-input {
  width: 84px;
}
.clay-filters-select:focus,
.clay-filters-input:focus {
  border-color: var(--clay-primary);
  box-shadow: 0 0 0 3px rgba(var(--clay-primary-rgb), 0.15);
}
.clay-filters-sep {
  color: var(--clay-text-muted);
  font-size: 12px;
}
.clay-filters-apply {
  border: none;
  border-radius: 100px;
  padding: 8px 18px;
  font-family: var(--clay-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7));
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.clay-filters-apply:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.clay-filters-clear {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--clay-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
.clay-filters-clear:hover {
  opacity: 0.8;
}
@media (max-width: 600px) {
  .clay-filters { padding: 12px 14px; }
  .clay-filters-group { flex-wrap: wrap; }
  .clay-filters-select { min-width: 110px; flex: 1; }
  .clay-filters-price { width: 100%; }
  .clay-filters-input { flex: 1; width: auto; }
  .clay-filters-clear { margin-left: 0; }
}

/* ===== 迷你購物車下拉 ===== */
.cart-wrap { position: relative; }
.mini-cart {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  max-height: 72vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--clay-border-width) solid var(--clay-border);
  border-radius: var(--clay-radius-sm);
  box-shadow: var(--clay-shadow-hover);
  padding: 12px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* 滑鼠移開後多留 3 秒才收起，讓使用者有時間由購物袋圖示移到面板上點「查看購物車」／「結帳」 */
  transition: opacity .25s ease 3s, transform .25s ease 3s, visibility 0s linear 3.25s;
}
.cart-wrap:hover .mini-cart,
.cart-wrap:focus-within .mini-cart {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.mini-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--clay-radius-xs);
  text-decoration: none;
  color: var(--clay-text);
  transition: background 0.2s;
}
.mini-cart-item:hover { background: rgba(var(--clay-primary-rgb), 0.06); }
.mini-cart-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--clay-radius-xs);
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f0fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--clay-primary);
}
.mini-cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-cart-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-cart-meta { font-size: 12px; color: var(--clay-text-secondary); }
.mini-cart-sub { font-size: 13px; font-weight: 700; color: var(--clay-primary); white-space: nowrap; }
.mini-cart-empty { padding: 24px 12px; text-align: center; font-size: 13px; color: var(--clay-text-secondary); }
.mini-cart-foot { border-top: 1px solid var(--clay-border-light); padding-top: 10px; margin-top: 6px; }
.mini-cart-total { display: flex; justify-content: space-between; font-size: 13px; color: var(--clay-text-secondary); margin-bottom: 10px; }
.mini-cart-total b { font-size: 16px; color: var(--clay-text); font-family: var(--clay-font-heading); }
.mini-cart-actions { display: flex; gap: 8px; }
.mini-cart-view,
.mini-cart-checkout {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.mini-cart-view {
  border: 1px solid var(--clay-border);
  color: var(--clay-text);
  background: rgba(255, 255, 255, 0.5);
}
.mini-cart-view:hover { border-color: var(--clay-primary); color: var(--clay-primary); }
.mini-cart-checkout {
  background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7));
  color: #fff;
}
.mini-cart-checkout:hover { opacity: 0.9; transform: translateY(-1px); }
@media (max-width: 600px) { .mini-cart { display: none; } }

/* ===== 促销徽章 ===== */
.promo-badges {
    position: absolute;
    /* 標籤位置三個主題統一：商品圖左下角（左上讓給折扣貼紙、右上讓給收藏），
       與 lumiere 一致，避免同一張卡不同主題標籤跳位 */
    top: auto;
    left: 10px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}
/* 促銷落地頁／設計預覽標題旁的標籤組：行內橫排，跟隨 8 套風格（非商品卡場景） */
.inline-promo-badges { position: static; display: inline-flex; flex-direction: row; gap: 5px; z-index: auto; }
:root { --badge-text: #fff; }
.promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    /* 文字色可由後台設定；未指定時由 badge-theme-vars 依主色明暗自動給黑或白 */
    color: var(--badge-text, #fff);
    border-radius: 20px;
    letter-spacing: .5px;
    background: var(--badge-color, #e60012);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    position: relative;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms ease;
}
.promo-badge:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.07); }
.promo-badge-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    flex: none; margin-right: 1px;
}
.promo-badge-icon svg { width: 10px; height: 10px; }
.promo-badge-shine {
    position: absolute; top: -45%; left: -65%; width: 42%; height: 190%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
    transform: skewX(-20deg); pointer-events: none;
    animation: badgeShine 3.4s ease-in-out infinite;
}
@keyframes badgeShine { 0% { left: -65%; } 55% { left: 140%; } 100% { left: 140%; } }
/* 主標籤呼吸輝光（外層光暈弱→強） */
@keyframes badgeHot {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 2px rgba(20,24,50,.08), 0 8px 18px var(--glow, rgba(0,0,0,.15)); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 2px rgba(20,24,50,.08), 0 8px 26px var(--glow, rgba(0,0,0,.30)); }
}
@media (prefers-reduced-motion: reduce) {
    .promo-badge, .promo-badge-shine, .promo-badges .promo-badge:first-child { animation: none !important; transition: none !important; }
}

/* ===== 促銷標籤風格套件（後台「展示設置」切換 p1–p8，作用域限定商品卡/詳情頁） ===== */
/* P1 漸變膠囊：多段漸變 + 掃光 + 呼吸輝光 */
.badge-style-p1 .promo-badges .promo-badge {
    overflow: hidden;
    padding: 4px 13px 4px 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    border-radius: 999px; text-shadow: 0 1px 2px rgba(0,0,0,.18);
    background: var(--badge-color, #e60012);
    background-image: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,0) 46%), linear-gradient(135deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.20));
    --glow: rgba(0,0,0,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 2px rgba(20,24,50,.08), 0 8px 18px var(--glow);
}

/* P2 折角貼紙：右下折角加深 */
.badge-style-p2 .promo-badges .promo-badge {
    overflow: hidden;
    padding: 4px 14px 4px 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    border-radius: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.18);
    background: var(--badge-color, #e60012);
    background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 50%), linear-gradient(135deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.18));
    --glow: rgba(0,0,0,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(20,24,50,.08), 0 6px 14px var(--glow);
}
.badge-style-p2 .promo-badges .promo-badge::after {
    content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
    border-style: solid; border-width: 0 0 11px 11px; border-color: transparent transparent rgba(20,24,50,.28) transparent;
}

/* P3 斜切促銷：左切角 + 內容回正 */
.badge-style-p3 .promo-badges .promo-badge {
    overflow: hidden;
    padding: 5px 9px 5px 13px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    transform: skewX(-12deg); text-shadow: 0 1px 2px rgba(0,0,0,.18);
    background: var(--badge-color, #e60012);
    background-image: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%), linear-gradient(90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.20));
    --glow: rgba(0,0,0,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 3px rgba(20,24,50,.10), 0 7px 16px var(--glow);
}
.badge-style-p3 .promo-badges .promo-badge .promo-badge-icon,
.badge-style-p3 .promo-badges .promo-badge .promo-badge-text { transform: skewX(12deg); }
.badge-style-p3 .promo-badges .promo-badge:hover { transform: translateY(-1px) skewX(-12deg) scale(1.04); }

/* P4 吊牌：白底彩字 + 打孔環 */
.badge-style-p4 .promo-badges .promo-badge {
    padding: 4px 12px 4px 21px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    /* 白底＋主題色文字：主題色偏淺時要用壓暗版（--badge-ink）才達 4.5:1 */
    background: #fff; color: var(--badge-ink, var(--badge-color, #e60012));
    border: 1.5px solid var(--badge-color, #e60012);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20,24,50,.06), 0 6px 14px rgba(20,24,50,.10);
}
.badge-style-p4 .promo-badges .promo-badge::before {
    content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--badge-color, #e60012), 0 0 0 4px #fff;
}
.badge-style-p4 .promo-badges .promo-badge-icon,
.badge-style-p4 .promo-badge-shine { display: none; }

/* P5 3D 立體貼紙：頂部光帶 + 雙層硬陰影 + hover 按下 */
.badge-style-p5 .promo-badges .promo-badge {
    overflow: hidden;
    padding: 5px 13px 5px 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    border-radius: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.22);
    background: var(--badge-color, #e60012);
    background-image: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0) 50%);
    box-shadow: 3px 3px 0 rgba(20,24,50,.30), 6px 6px 12px rgba(20,24,50,.12), inset 0 1px 0 rgba(255,255,255,.4);
}
.badge-style-p5 .promo-badges .promo-badge:hover {
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 rgba(20,24,50,.30), 5px 5px 10px rgba(20,24,50,.12), inset 0 1px 0 rgba(255,255,255,.4);
}

/* P6 聊天氣泡：左側尾巴同色 */
.badge-style-p6 .promo-badges .promo-badge {
    margin-left: 9px;
    padding: 5px 13px 5px 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    border-radius: 9px; text-shadow: 0 1px 2px rgba(0,0,0,.18);
    background: var(--badge-color, #e60012);
    background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 50%), linear-gradient(135deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.18));
    --glow: rgba(0,0,0,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(20,24,50,.08), 0 7px 16px var(--glow);
}
.badge-style-p6 .promo-badges .promo-badge::before {
    content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-right-width: 8px; border-right-color: var(--badge-color, #e60012);
}
.badge-style-p6 .promo-badge-shine { display: none; }

/* P7 絲帶：右側分叉尾同深色 */
.badge-style-p7 .promo-badges .promo-badge {
    padding: 5px 16px 5px 9px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    border-radius: 5px 0 0 5px; text-shadow: 0 1px 2px rgba(0,0,0,.18);
    background: var(--badge-color, #e60012);
    background-image: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 48%), linear-gradient(135deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.20));
    --glow: rgba(0,0,0,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 3px rgba(20,24,50,.10), 0 7px 16px var(--glow);
}
.badge-style-p7 .promo-badges .promo-badge::before,
.badge-style-p7 .promo-badges .promo-badge::after {
    content: ""; position: absolute; right: -7px; width: 0; height: 0; border-style: solid;
}
.badge-style-p7 .promo-badges .promo-badge::before { top: 0; border-width: 0 7px 9px 0; border-color: transparent rgba(0,0,0,.32) transparent transparent; }
.badge-style-p7 .promo-badges .promo-badge::after { bottom: 0; border-width: 0 0 9px 7px; border-color: transparent transparent rgba(0,0,0,.32) transparent; }
.badge-style-p7 .promo-badge-shine { display: none; }

/* P8 玻璃擬態：毛玻璃透出商品圖 + 彩字彩邊 + 頂部反光 */
.badge-style-p8 .promo-badges .promo-badge {
    overflow: hidden;
    padding: 4px 13px 4px 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid color-mix(in srgb, var(--badge-color, #e60012) 55%, transparent);
    /* 淺透底＋主題色文字：主題色偏淺會看不清，改用壓暗版 --badge-ink */
    color: var(--badge-ink, var(--badge-color, #e60012));
    --glow: color-mix(in srgb, var(--badge-color, #e60012) 20%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(20,24,50,.06), 0 8px 18px var(--glow);
}
.badge-style-p8 .promo-badges .promo-badge::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 52%);
}
.badge-style-p8 .promo-badge-icon {
    background: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
/* P8 折扣% 角標同步玻璃化 */
.badge-style-p8 .product-card .sale-badge {
    background: rgba(20,24,40,.58) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(20,24,50,.10), 0 6px 14px rgba(20,24,50,.18) !important;
}

/* 折扣角標統一定位：商品圖右上角（2026-09-03，原右下角內聯定位已移除；flash 頁面共用） */
.product-thumb .sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
}
/* 熱賣榜卡：右上角讓位給 #N 排名章 */
.clay-rank-card .sale-badge {
    right: 52px;
}

/* 呼吸輝光僅作用於主標籤（第一個），P4/P5 陰影結構不同故排除 */
.badge-style-p1 .promo-badges .promo-badge:first-child,
.badge-style-p2 .promo-badges .promo-badge:first-child,
.badge-style-p3 .promo-badges .promo-badge:first-child,
.badge-style-p6 .promo-badges .promo-badge:first-child,
.badge-style-p7 .promo-badges .promo-badge:first-child,
.badge-style-p8 .promo-badges .promo-badge:first-child { animation: badgeHot 2.6s ease-in-out infinite; }

/* 統一覆蓋：app.blade.php 頁內樣式（0,1,0）會蓋掉 custom.css 基礎類，此處用更高優先級保證佈局/字色一致 */
.badge-style-p1 .promo-badges .promo-badge,
.badge-style-p2 .promo-badges .promo-badge,
.badge-style-p3 .promo-badges .promo-badge,
.badge-style-p4 .promo-badges .promo-badge,
.badge-style-p5 .promo-badges .promo-badge,
.badge-style-p6 .promo-badges .promo-badge,
.badge-style-p7 .promo-badges .promo-badge,
.badge-style-p8 .promo-badges .promo-badge { display: inline-flex; align-items: center; gap: 5px; }
.badge-style-p1 .promo-badges .promo-badge,
.badge-style-p2 .promo-badges .promo-badge,
.badge-style-p3 .promo-badges .promo-badge,
.badge-style-p5 .promo-badges .promo-badge,
.badge-style-p6 .promo-badges .promo-badge,
.badge-style-p7 .promo-badges .promo-badge { color: var(--badge-text, #fff); border: none; }

/* ===== 详情页促销 ===== */
.detail-promo-badges { position: static; flex-direction: row; margin-bottom: 14px; }

/* ===== 促銷標籤風格套件 P9–P30（透明/玻璃/港風等，2026-09-06 原型定稿） ===== */
.badge-style-p9 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent); color: var(--badge-ink, var(--badge-color,#e60012)); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.badge-style-p10 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: color-mix(in srgb, var(--badge-color,#e60012) 26%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: var(--badge-text, #fff); border: 1px solid rgba(255,255,255,.35); text-shadow: 0 1px 2px rgba(0,0,0,.25); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.badge-style-p11 .promo-badges .promo-badge { padding: 3px 12px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1.5px solid var(--badge-color,#e60012); color: var(--badge-ink, var(--badge-color,#e60012)); box-shadow: none; }
.badge-style-p12 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: color-mix(in srgb, var(--badge-color,#e60012) 14%, white); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 35%, white); }
.badge-style-p13 .promo-badges .promo-badge { padding: 4px 16px 4px 9px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 6px 2px 2px 6px; background: color-mix(in srgb, var(--badge-color,#e60012) 88%, transparent); color: var(--badge-text, #fff); box-shadow: 4px 4px 10px rgba(0,0,0,.12); }
.badge-style-p13 .promo-badges .promo-badge::after { content: ""; position: absolute; right: -7px; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 7px 9px 0; border-color: transparent rgba(0,0,0,.22) transparent transparent; }
.badge-style-p14 .promo-badges .promo-badge { padding: 3px 8px 3px 4px; font-size: 11px; font-weight: 800; letter-spacing: .4px; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 0; }
.badge-style-p14 .promo-badges .promo-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--badge-color,#e60012); box-shadow: 0 0 8px var(--badge-color,#e60012); }
.badge-style-p15 .promo-badges .promo-badge { padding: 3px 11px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-color,#e60012) 45%, transparent), 0 4px 18px color-mix(in srgb, var(--badge-color,#e60012) 30%, transparent); }
.badge-style-p16 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 38%, transparent), color-mix(in srgb, var(--badge-color,#e60012) 12%, transparent)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--badge-text, #fff); border-left: 3px solid var(--badge-color,#e60012); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.badge-style-p17 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: rgba(255,255,255,.55); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 8px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9); }
.badge-style-p18 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent), color-mix(in srgb, var(--badge-color,#e60012) 10%, transparent) 90%); color: var(--badge-text, #fff); border: 1px solid rgba(255,255,255,.3); text-shadow: 0 1px 3px rgba(0,0,0,.2); }
.badge-style-p19 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 700; letter-spacing: 1px; border-radius: 999px; background: rgba(12,12,22,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 65%, transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--badge-color,#e60012) 90%, transparent), 0 0 15px color-mix(in srgb, var(--badge-color,#e60012) 50%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--badge-color,#e60012) 28%, transparent); }
.badge-style-p20 .promo-badges .promo-badge { overflow: hidden; padding: 4px 12px; font-size: 11px; font-weight: 900; letter-spacing: 1px; border-radius: 3px; background: #2B1B12; color: #ffe08a; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 3px 0 rgba(0,0,0,.28); text-shadow: 1px 1px 0 rgba(0,0,0,.28); }
.badge-style-p21 .promo-badges .promo-badge { padding: 4px 12px; font-size: 11px; font-weight: 400; letter-spacing: 2px; border-radius: 3px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1.5px solid color-mix(in srgb, var(--badge-color,#e60012) 80%, transparent); text-shadow: 0 0 7px var(--badge-color,#e60012), 0 0 20px color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent); }
.badge-style-p22 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 900; letter-spacing: 1px; border-radius: 4px; background-color: #241A0E; background-image: linear-gradient(180deg, rgba(30,24,12,.35), rgba(30,24,12,.70)); color: #ffd866; text-shadow: 0 1px 2px rgba(0,0,0,.5); border: 1px solid rgba(255,215,120,.45); }
.badge-style-p23 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: color-mix(in srgb, var(--badge-color,#e60012) 32%, rgba(255,255,255,.30)); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: var(--badge-text, #fff); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 6px 14px rgba(0,0,0,.12); text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.badge-style-p24 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 900; letter-spacing: .5px; border-radius: 3px; background: rgba(255,255,255,.78); color: var(--badge-ink, var(--badge-color,#e60012)); box-shadow: 0 2px 5px rgba(0,0,0,.12); }
.badge-style-p25 .promo-badges .promo-badge { padding: 3px 11px; font-size: 11px; font-weight: 800; letter-spacing: 1px; border-radius: 6px; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 2px dashed var(--badge-color,#e60012); transform: rotate(-2deg); box-shadow: none; }
.badge-style-p26 .promo-badges .promo-badge { padding: 3px 12px; font-size: 11px; font-weight: 700; letter-spacing: .5px; border-radius: 4px; background: rgba(255,255,255,.82); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 45%, transparent); font-family: 'Courier New', monospace; }
.badge-style-p27 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 4px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--badge-color,#e60012) 62%, transparent) 0 6px, color-mix(in srgb, var(--badge-color,#e60012) 26%, transparent) 6px 12px); color: var(--badge-text, #fff); text-shadow: 0 1px 3px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); }
.badge-style-p28 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background-color: rgba(255,255,255,.20); background-image: radial-gradient(color-mix(in srgb, var(--badge-color,#e60012) 75%, transparent) 1.2px, transparent 1.4px); background-size: 8px 8px; color: var(--badge-text, #fff); text-shadow: 0 1px 3px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.35); }
.badge-style-p29 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent), rgba(56,189,248,.30), rgba(168,85,247,.36)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--badge-text, #fff); border: 1px solid rgba(255,255,255,.45); }
.badge-style-p30 .promo-badges .promo-badge { overflow: hidden; padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 88%, transparent), rgba(57,255,20,.42)); color: var(--badge-text, #fff); text-shadow: 0 0 8px rgba(0,255,200,.75), 0 1px 2px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.35); }
.badge-style-p13 .promo-badge-shine, .badge-style-p14 .promo-badge-shine, .badge-style-p17 .promo-badge-shine, .badge-style-p25 .promo-badge-shine, .badge-style-p26 .promo-badge-shine { display: none; }

/* 限時折扣 flash-tag 已併入 .promo-badge 體系（.promo-badges.inline-promo-badges 容器內，跟隨 8 套風格），
   舊有獨立樣式已移除，由 .badge-style-pX .promo-badges .promo-badge 統一接管 */

/* ===== 動效打磨（2026-08-30）===== */
/* 1. 商品卡 hover：上浮 + 陰影 + 圖片微縮放
   （用 body 前綴提升特異性，壓過 app.blade.php 內聯樣式的 .product-card:hover） */
body .product-card {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
    will-change: transform;
}
body .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(var(--clay-primary-rgb), .16), 0 4px 12px rgba(var(--clay-primary-rgb), .08);
}
body .product-card .product-thumb { overflow: hidden; }
body .product-card .product-thumb img {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
body .product-card:hover .product-thumb img { transform: scale(1.05); }

/* 2. 收藏心形點擊跳動反饋 */
@keyframes favPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.45); }
    70% { transform: scale(.88); }
    100% { transform: scale(1); }
}
.fav-btn.pop, .fav-btn-lg.pop { animation: favPop .45s cubic-bezier(.22, 1, .36, 1); }

/* 3. 購物車圖標 hover 微擺 + 徽標輕放大 */
.clay-cart-link svg { transition: transform .25s ease; }
.clay-cart-link:hover svg { transform: rotate(-8deg) scale(1.1); }
.cart-count { transition: transform .2s ease; }
.clay-cart-link:hover .cart-count { transform: scale(1.18); }

/* 4. 商品卡滾動漸顯（由 JS 加 .rv 才生效，prefers-reduced-motion 下禁用） */
.rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.rv.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rv, .rv.rv-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== 商品卡快捷加購按鈕（2026-08-30，對齊舊版 shared/product）===== */
/* 桌面：hover 卡片時右下角浮現；移動端：常駐 */
.quick-add {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--clay-primary-rgb), .45);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(var(--clay-primary-rgb), .16);
    color: var(--clay-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(5px) scale(.92);
    transition: all .22s cubic-bezier(.22, 1, .36, 1);
}
.product-card:hover .quick-add { opacity: 1; transform: none; }
.quick-add:hover {
    background: var(--clay-primary);
    border-color: var(--clay-primary);
    color: #fff;
    box-shadow: 0 8px 22px rgba(var(--clay-primary-rgb), .35);
}
.quick-add.has-variants { border-style: dashed; }
.quick-add.added { background: #10b981; border-color: #10b981; color: #fff; animation: favPop .45s cubic-bezier(.22, 1, .36, 1); }
.quick-add.added svg { animation: cartDing .4s ease; }
@keyframes cartDing {
    0% { transform: rotate(0) scale(1); }
    40% { transform: rotate(-14deg) scale(1.25); }
    70% { transform: rotate(8deg) scale(.95); }
    100% { transform: rotate(0) scale(1); }
}
@media (hover: none) {
    .quick-add { opacity: 1; transform: none; }
}

/* ===== 輕量 Toast（快捷加購反饋，2026-08-30）===== */
.clay-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(16px);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 100px;
    background: rgba(var(--clay-topbar-rgb), .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(var(--clay-topbar-rgb), .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.clay-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.clay-toast.error { background: rgba(190, 40, 40, .95); }
.clay-toast a { color: #fff; text-decoration: underline; margin-left: 4px; }

/* ===== 賬戶下拉菜單（2026-08-30，對齊舊版 layout/header 登入態下拉）===== */
.account-wrap { position: relative; display: inline-flex; }
.account-wrap .clay-header-icon { display: inline-flex; }
.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    z-index: 60;
    min-width: 178px;
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(var(--clay-topbar-rgb), .18), 0 4px 14px rgba(var(--clay-topbar-rgb), .08);
    border: 1px solid rgba(255, 255, 255, .6);
    opacity: 0;
    transform: translateY(8px) scale(.97);
    /* 收起用 visibility 而不是 pointer-events：pointer-events 不能延遲，
       延遲期間會出現「面板看得見卻點不到」的情況 */
    visibility: hidden;
    /* 滑鼠移開後面板多留 3 秒才收起，讓使用者有時間移到面板上按「登入」／「註冊」 */
    transition: opacity .2s ease 3s, transform .2s cubic-bezier(.22, 1, .36, 1) 3s, visibility 0s linear 3.2s;
}
.account-wrap:hover .account-dropdown,
.account-wrap:focus-within .account-dropdown {
    opacity: 1; transform: none; visibility: visible; transition-delay: 0s;
}
/* 圖示與面板之間 10px 的縫隙補一塊透明區：滑鼠由圖示移向面板時不會中途離開 .account-wrap 而收起 */
.account-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
.account-dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 20px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: rgba(255, 255, 255, .95);
}
.account-dropdown-head { padding: 6px 10px 10px; border-bottom: 1px solid var(--clay-border-light); margin-bottom: 6px; }
.account-dropdown-head b { display: block; font-size: 14px; color: var(--clay-text); }
.account-dropdown-head span { font-size: 11px; color: var(--clay-text-muted, #999); }
.account-dropdown > a, .account-dropdown form { display: block; }
.account-dropdown > a {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--clay-text);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.account-dropdown > a:hover { background: rgba(var(--clay-primary-rgb), .08); color: var(--clay-primary); }
.account-logout-btn {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 13px;
    color: #dc2626;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}
.account-logout-btn:hover { background: rgba(220, 38, 38, .08); }

/* ===== 頁面加載動畫（2026-08-30，對齊舊版 shared/bk-page-loading，極光風格）===== */
.clay-page-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: radial-gradient(circle at 30% 20%, rgba(var(--clay-primary-rgb), .28), transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(var(--clay-secondary-rgb), .26), transparent 55%),
                radial-gradient(circle at 60% 30%, rgba(var(--clay-accent-rgb), .16), transparent 50%),
                rgba(250, 250, 252, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 1;
    transition: opacity .45s ease, visibility .45s ease;
    pointer-events: auto;
}
.clay-page-loading.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.cpl-ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(var(--clay-primary-rgb), 0), rgba(var(--clay-primary-rgb), .9), rgba(var(--clay-secondary-rgb), .9), rgba(var(--clay-primary-rgb), 0));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    animation: cplSpin 1s linear infinite;
}
@keyframes cplSpin { to { transform: rotate(360deg); } }
.cpl-logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary) 50%, var(--clay-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cpl-text { font-size: 12px; color: var(--clay-text-muted, #999); letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) {
    .clay-page-loading { display: none !important; }
    .cpl-ring { animation: none; }
}

/* ===== 商品詳情社交分享（2026-09-03 更新：原生 SVG 圓形圖示 + LINE） ===== */
.detail-share { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.detail-share > span { font-size: 13px; color: var(--clay-text-secondary, #666); }
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--clay-border, rgba(0,0,0,.1));
    background: var(--clay-card, #fff);
    color: #6b7280;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.share-btn svg { width: 17px; height: 17px; display: block; }
.share-btn:hover { transform: translateY(-2px); }
.share-btn.is-wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.share-btn.is-fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-btn.is-line:hover { background: #06c755; border-color: #06c755; color: #fff; }
.share-btn.is-copy:hover { background: var(--clay-primary, #6366F1); border-color: var(--clay-primary, #6366F1); color: #fff; }
@media (max-width: 767px) {
    .share-btn { width: 32px; height: 32px; }
    .share-btn svg { width: 16px; height: 16px; }
}

/* ===== 頂欄語言／貨幣切換（2026-09-03，原生） ===== */
.clay-top-left { display: inline-flex; align-items: center; gap: 12px; }
.clay-top-bar-inner { overflow: visible; }
.clay-select-item.active { color: var(--clay-primary, #6366F1); background: rgba(var(--clay-primary-rgb),.08); }
.mobile-prefs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--clay-border-light, #eee);
}
.mobile-prefs .clay-select-wrap { position: relative; flex: 1; }
.mobile-prefs .clay-select-btn { width: 100%; justify-content: space-between; }
.mobile-prefs .clay-select-menu { top: calc(100% + 4px); left: 0; right: auto; min-width: 150px; }
.mobile-prefs .clay-select-wrap:last-child .clay-select-menu { left: auto; right: 0; }

/* ===== 促銷標籤樣式後台預覽（iframe：/promo-badge-preview/p1..p8，body.badge-style-pX 換套呈現） =====
   預覽頁只載 custom.css，把該套樣式的標籤放大豎排展示在柔彩底上（看清標籤本體）；
   作用域一律掛 .badge-preview，不影響商店頁面。 */
body.badge-preview {
    margin: 0; overflow: hidden;
    /* 柔彩霧面底：讓 P8 毛玻璃有「可透出」的色彩，白色標籤亦有對比，避免白茫茫一片 */
    background:
        radial-gradient(80% 70% at 18% 8%, rgba(255, 190, 200, .8), transparent 62%),
        radial-gradient(75% 80% at 90% 12%, rgba(180, 205, 255, .85), transparent 64%),
        radial-gradient(110% 95% at 50% 110%, rgba(175, 235, 205, .8), transparent 60%),
        linear-gradient(140deg, #fdf1f4, #eef2fd 55%, #e9f9f1);
}
.badge-preview-stage {
    box-sizing: border-box; min-height: 100vh; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px 8px;
}
/* 豎排三枚三主色、放大 1.4 倍：一眼看清該套標籤的漸變／折角／玻璃等本體效果（不同主色下的表現） */
.badge-preview-stage .promo-badges { position: static; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: scale(1.4); }

/* ==== design/notice.blade 收斂 ==== */
        .clay-notice {
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            padding: 6px 8px;
        }
        .clay-notice-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px;
            border-radius: var(--clay-radius-sm);
            color: var(--clay-text);
            transition: background .15s;
        }
        .clay-notice-item + .clay-notice-item { border-top: 1px dashed var(--clay-border-light); }
        .clay-notice-item:hover { background: var(--clay-accent-soft, #fff5f8); }
        .clay-notice-dot { flex-shrink: 0; font-size: 15px; }
        .clay-notice-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .clay-notice-arrow { color: var(--clay-text-secondary); font-size: 13px; }
        .clay-notice-item:hover .clay-notice-arrow { color: var(--clay-accent); }

/* ==== design/flash_sale.blade 收斂 ==== */
        .clay-flash-head { display: flex; align-items: flex-start; justify-content: center; gap: 14px; flex-wrap: wrap; }
        .clay-flash-more { align-self: center; font-size: 13px; color: #e60012; font-weight: 600; white-space: nowrap; margin-top: 4px; }
        .clay-flash-more:hover { text-decoration: underline; }
        .clay-flash { position: relative; }
        .clay-flash::before {
            content: '';
            position: absolute;
            inset: -8px;
            background: linear-gradient(135deg, rgba(255,140,148,.12), rgba(255,183,107,.12));
            border-radius: calc(var(--clay-radius) + 8px);
            z-index: -1;
        }

/* ==== design/img_text_banner.blade 收斂 ==== */
        .clay-itext {
            display: flex;
            align-items: center;
            gap: 28px;
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            overflow: hidden;
        }
        .clay-itext-media { flex: 1.2; min-width: 0; align-self: stretch; background: linear-gradient(135deg, #fff, var(--clay-accent-soft, #fff5f8)); }
        .clay-itext-media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; display: block; }
        .clay-itext-body { flex: 1; padding: 36px 32px; min-width: 0; }
        .clay-itext-title { font-family: var(--clay-font-heading); font-size: 26px; font-weight: 800; margin-bottom: 14px; }
        .clay-itext-sub { font-size: 15px; font-weight: 600; color: var(--clay-text-secondary); margin-bottom: 12px; }
        .clay-itext-text { color: var(--clay-text-secondary); line-height: 1.9; font-size: 14px; margin-bottom: 20px; white-space: pre-line; }
        .itext-bg-light { background: #f4f6f8; }
        .itext-bg-blue { background: #eef4ff; }
        .itext-bg-pink { background: #fff3f6; }
        .itext-bg-dark { background: #1e2b3b; }
        .itext-bg-dark .clay-itext-title, .itext-bg-dark .clay-itext-text, .itext-bg-dark .clay-itext-sub { color: #fff; }
        .itext-txt-white { color: #fff; }
        .itext-txt-muted { color: var(--clay-text-secondary); }
        .itext-txt-brand { color: #1d4ed8; }
        .itext-btn-orange { background: #f0a020 !important; border-color: #f0a020 !important; color: #fff !important; }
        .itext-btn-dark { background: #1e2b3b !important; border-color: #1e2b3b !important; color: #fff !important; }
        .itext-btn-outline { background: transparent !important; border: 1px solid currentColor !important; color: var(--clay-text) !important; }
        .itext-btn-txt-dark { color: #1e2b3b !important; }
        @media (max-width: 767px) {
            .clay-itext { flex-direction: column !important; }
            .clay-itext-media { width: 100%; }
            .clay-itext-media img { max-height: 240px; }
            .clay-itext-body { padding: 22px 20px; }
        }

/* ==== design/contact.blade 收斂 ==== */
        .clay-contact {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
        }
        .clay-contact-card {
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            padding: 18px 20px;
            display: flex; align-items: center; gap: 14px;
            color: var(--clay-text);
            transition: transform .2s, box-shadow .2s;
        }
        a.clay-contact-card:hover { transform: translateY(-4px); box-shadow: var(--clay-shadow-hover); }
        .clay-contact-icon { font-size: 28px; flex-shrink: 0; }
        .clay-contact-card > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .clay-contact-label { font-size: 12px; color: var(--clay-text-secondary); }
        .clay-contact-value { font-family: var(--clay-font-heading); font-size: 14px; font-weight: 800; word-break: break-all; }

/* ==== design/gift.blade 收斂 ==== */
        .clay-gift-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
        .clay-gift-thumbs { display: flex; gap: 10px; }
        .clay-gift-thumb {
            width: 56px; height: 56px;
            border-radius: var(--clay-radius-sm);
            border: var(--clay-border-width) solid var(--clay-border);
            box-shadow: 2px 2px 0 var(--clay-border);
            background: linear-gradient(135deg,#fff,var(--clay-accent-soft, #fff5f8));
            display: flex; align-items: center; justify-content: center;
            font-size: 24px;
            overflow: hidden;
        }
        .clay-gift-thumb img { width: 100%; height: 100%; object-fit: cover; }
        @media (max-width: 600px) {
            .clay-gift-row { grid-template-columns: 1fr; }
        }

/* ==== design/bestseller.blade 收斂 ==== */
        .clay-rank-card { position: relative; }
        .clay-rank {
            position: absolute;
            top: 8px; right: 8px;
            min-width: 34px; height: 26px; line-height: 22px;
            padding: 0 8px;
            background: linear-gradient(135deg, var(--clay-accent), #ff6f61);
            color: #fff;
            font-family: var(--clay-font-heading);
            font-size: 12px; font-weight: 800;
            border-radius: var(--clay-radius-xs);
            box-shadow: 2px 2px 0 rgba(255,111,97,.4);
            text-align: center;
        }
        .clay-rank-card:nth-child(-n+3) .clay-rank { background: linear-gradient(135deg, #ffb347, var(--clay-accent)); }

/* ==== design/slideshow.blade 收斂 ==== */
        .clay-slideshow {
            position: relative;
            overflow: hidden;
            border-radius: var(--clay-radius);
            border: var(--clay-border-width) solid var(--clay-border);
            box-shadow: var(--clay-shadow);
            background: var(--clay-card);
        }
        .clay-slideshow .clay-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity .6s ease;
        }
        .clay-slideshow .clay-slide.active { opacity: 1; visibility: visible; }
        .clay-slideshow .clay-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .clay-slide-img { display: block; width: 100%; height: 100%; }
        .clay-slide-caption {
            position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; z-index: 3;
            display: flex; flex-direction: column; align-items: flex-start; gap: 5px; color: #fff;
            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.58) 100%);
        }
        .clay-slide-badge { background: var(--clay-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; letter-spacing: .3px; }
        .clay-slide-title { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
        .clay-slide-sub { margin: 0; font-size: 15px; opacity: .95; }
        .clay-slide-text { margin: 0; font-size: 13px; opacity: .85; max-width: 60%; }
        .clay-slide-cta { display: inline-block; margin-top: 6px; background: #fff; color: #111; font-weight: 700; font-size: 14px; padding: 8px 20px; border-radius: 999px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s; }
        .clay-slide-cta:hover { transform: translateY(-1px); }
        .clay-slide-dots {
            position: absolute;
            bottom: 16px;
            left: 0; right: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
            z-index: 5;
        }
        .clay-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            background: rgba(255,255,255,.6);
            border: 2px solid var(--clay-border);
            cursor: pointer;
            transition: all .2s;
        }
        .clay-dot.active { background: var(--clay-accent); border-color: var(--clay-accent); transform: scale(1.2); }

        /* 動態粒子 */
        .clay-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
        .clay-fx i {
            position: absolute;
            bottom: -20px;
            border-radius: 50%;
            animation: clay-rise linear infinite;
        }
        .clay-fx[data-fx="bubbles"] i { background: rgba(255,255,255,.55); border: 2px solid rgba(255,140,148,.5); }
        .clay-fx[data-fx="firework"] i { background: radial-gradient(circle, #fff 0%, var(--clay-accent) 60%, transparent 70%); }
        .clay-fx[data-fx="sparkle"] i { background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.9); }
        .clay-fx[data-fx="petals"] i { border-radius: 60% 40% 60% 40%; background: rgba(255,140,148,.5); }
        .clay-fx[data-fx="snow"] i { background: #fff; }
        /* 粒子上升距離 = 輪播高度 + 40（--rise 由視圖按模組高度注入） */
        @keyframes clay-rise {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            100% { transform: translateY(calc(-1 * var(--rise, 460px))) rotate(360deg); opacity: 0; }
        }
        .clay-slide-dots { opacity: 0; transition: opacity .3s; }
        .clay-slideshow:hover .clay-slide-dots { opacity: 1; }
        @media (max-width: 767px) {
            /* 手機：用首張圖撐起高度，高度隨比例縮放（不再固定 420px） */
            .clay-slideshow { height: auto !important; }
            .clay-slideshow .clay-slide:first-child { position: relative; }
            .clay-slideshow .clay-slide:first-child img { height: auto; }
            .clay-slide-caption { padding: 14px 16px; }
            .clay-slide-title { font-size: 17px; }
            .clay-slide-sub { font-size: 13px; }
            .clay-slide-text { max-width: 100%; font-size: 12px; }
            .clay-slide-cta { padding: 6px 14px; font-size: 12px; margin-top: 4px; }
        }
        @media (max-width: 600px) {
            .clay-slide-dots { opacity: 1; }
        }

/* ==== design/coupon.blade 收斂 ==== */
        .clay-coupon-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
        .clay-coupon {
            display: flex;
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            overflow: hidden;
            transition: all .25s;
        }
        .clay-coupon:hover { transform: translateY(-3px); box-shadow: var(--clay-shadow-hover); }
        .clay-coupon-main {
            width: 110px;
            flex-shrink: 0;
            background: linear-gradient(135deg, var(--clay-accent-soft, #fff5f8), #ffe8ec);
            border-right: 2px dashed var(--clay-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 16px 8px;
        }
        .clay-coupon-value { font-family: var(--clay-font-heading); font-size: 24px; font-weight: 800; color: var(--clay-accent); }
        .clay-coupon-value small { font-size: 12px; font-weight: 700; }
        .clay-coupon-min { font-size: 12px; color: var(--clay-text-secondary); font-weight: 600; }
        .clay-coupon-side { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
        .clay-coupon-name { font-weight: 700; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .clay-coupon-btn {
            align-self: flex-start;
            padding: 6px 18px;
            border-radius: var(--clay-radius-xs);
            border: var(--clay-border-width) solid var(--clay-primary);
            background: var(--clay-accent-soft, #fff5f8);
            box-shadow: 2px 2px 0 var(--clay-primary);
            font-size: 12px; font-weight: 700;
            transition: all .2s;
        }
        .clay-coupon-btn:hover { box-shadow: 4px 4px 0 var(--clay-primary); }
        .clay-coupon-btn.is-out { border-color: var(--clay-border); color: var(--clay-text-muted); box-shadow: 2px 2px 0 var(--clay-border); }

/* ==== design/page.blade 收斂 ==== */
        .clay-page-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
        }
        .clay-page-card {
            display: block;
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            padding: 20px;
            transition: transform .25s, box-shadow .25s;
        }
        .clay-page-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--clay-shadow-hover);
        }
        .clay-page-title {
            font-family: var(--clay-font-heading);
            font-weight: 800;
            font-size: 16px;
            line-height: 1.4;
            min-height: 44px;
        }
        .clay-page-link {
            margin-top: 12px;
            font-size: 13px;
            font-weight: 700;
            color: var(--clay-accent);
        }
        @media (max-width: 767px) {
            .clay-page-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
        }

/* ==== design/rich_text.blade 收斂 ==== */
        .clay-rich {
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            padding: 28px 30px;
            line-height: 1.9;
            color: var(--clay-text);
            font-size: 14px;
        }
        .clay-rich h1, .clay-rich h2, .clay-rich h3 { font-family: var(--clay-font-heading); margin: 18px 0 10px; }
        .clay-rich h1:first-child, .clay-rich h2:first-child, .clay-rich h3:first-child { margin-top: 0; }
        .clay-rich p { margin: 10px 0; }
        .clay-rich img { border-radius: var(--clay-radius-sm); }
        .clay-rich a { color: var(--clay-accent); font-weight: 700; }
        .clay-rich ul, .clay-rich ol { padding-left: 22px; margin: 10px 0; }
        .clay-rich blockquote {
            border-left: 4px solid var(--clay-primary);
            background: var(--clay-accent-soft, #fff5f8);
            padding: 10px 16px;
            margin: 12px 0;
            border-radius: 0 var(--clay-radius-xs) var(--clay-radius-xs) 0;
        }
        .clay-rich table { width: 100%; border-collapse: collapse; margin: 12px 0; }
        .clay-rich th, .clay-rich td { border: 2px solid var(--clay-border-light); padding: 8px 12px; }
        .clay-rich th { background: var(--clay-accent-soft, #fff5f8); font-weight: 700; }

/* ==== design/brand.blade 收斂 ==== */
        .clay-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
        .clay-brand {
            height: 72px;
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius-sm);
            box-shadow: 2px 2px 0 var(--clay-border);
            display: flex; align-items: center; justify-content: center;
            font-family: var(--clay-font-heading);
            font-weight: 800;
            color: var(--clay-text-secondary);
            padding: 10px;
            transition: all .2s;
        }
        .clay-brand:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--clay-primary); border-color: var(--clay-primary); color: var(--clay-text); }
        .clay-brand img { max-height: 44px; max-width: 80%; object-fit: contain; }

/* ==== design/faq.blade 收斂 ==== */
        .clay-faq {
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            overflow: hidden;
        }
        .clay-faq-item + .clay-faq-item { border-top: 1px solid var(--clay-border-light); }
        .clay-faq-q {
            width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 15px 20px; background: transparent; border: none; cursor: pointer;
            font-family: var(--clay-font-heading); font-size: 14px; font-weight: 800;
            color: var(--clay-text); text-align: left;
            transition: background .15s;
        }
        .clay-faq-q:hover { background: var(--clay-accent-soft, #fff5f8); }
        .clay-faq-caret { font-style: normal; color: var(--clay-text-secondary); transition: transform .2s; }
        .clay-faq-item.open .clay-faq-caret { transform: rotate(180deg); color: var(--clay-accent); }
        .clay-faq-a {
            display: none; padding: 0 20px 16px; font-size: 13px; line-height: 1.9;
            color: var(--clay-text-secondary);
        }
        .clay-faq-item.open .clay-faq-a { display: block; }

/* ==== design/services.blade 收斂 ==== */
        .clay-services {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
        }
        .clay-service {
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            padding: 22px 16px;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            text-align: center;
            transition: transform .2s, box-shadow .2s;
        }
        .clay-service:hover { transform: translateY(-4px); box-shadow: var(--clay-shadow-hover); }
        .clay-service-icon { font-size: 34px; line-height: 1; }
        .clay-service-title { font-family: var(--clay-font-heading); font-size: 16px; font-weight: 800; color: var(--clay-text); }
        .clay-service-desc { font-size: 12px; color: var(--clay-text-secondary); line-height: 1.6; }
        @media (max-width: 900px) { .clay-services { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .clay-services { grid-template-columns: 1fr; } }

/* ==== design/img_text_slideshow.blade 收斂 ==== */
        .its-wrap {
            position: relative;
            overflow: hidden;
            border-radius: var(--clay-radius);
            border: var(--clay-border-width) solid var(--clay-border);
            box-shadow: var(--clay-shadow);
            background: var(--clay-card);
        }
        .its-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity .7s ease;
        }
        .its-slide.active { opacity: 1; visibility: visible; }
        .its-slide > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .its-content {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            padding: 40px 8%;
            max-width: 680px;
            box-sizing: border-box;
            z-index: 2;
        }
        .its-content.pos-center { margin: 0 auto; text-align: center; align-items: center; }
        .its-content.pos-right { margin-left: auto; text-align: left; align-items: flex-start; }
        .its-glass {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: inherit;
            text-align: inherit;
            padding: 28px 34px;
            border-radius: 20px;
            background: rgba(15, 14, 40, .42);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, .18);
            box-shadow: 0 10px 40px rgba(10, 8, 40, .25);
        }
        .its-sub {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff;
            background: rgba(var(--clay-primary-rgb), .9);
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            width: fit-content;
        }
        .its-title {
            font-family: var(--clay-font-heading);
            font-size: 34px;
            font-weight: 800;
            line-height: 1.25;
            color: #fff;
            text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
            margin: 0;
        }
        .its-desc {
            font-size: 15px;
            line-height: 1.7;
            color: rgba(255, 255, 255, .95);
            text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
            margin: 0;
        }
        .its-btn {
            width: fit-content;
            margin-top: 6px;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .its-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(var(--clay-primary-rgb), .4);
        }
        .its-dots {
            position: absolute;
            bottom: 16px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
            z-index: 5;
            opacity: 0;
            transition: opacity .3s;
        }
        .its-wrap:hover .its-dots { opacity: 1; }
        .its-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .6);
            border: 2px solid rgba(0, 0, 0, .15);
            cursor: pointer;
            transition: all .2s;
        }
        .its-dot.active { background: var(--clay-accent, #EC4899); border-color: var(--clay-accent, #EC4899); transform: scale(1.25); }
        @media (max-width: 767px) {
            /* 手機：圖片區按寬度自適應比例縮放（無固定高度），文字毛玻璃塊維持疊在圖片上 */
            .its-wrap { height: auto !important; aspect-ratio: 16 / 9; min-height: 190px; }
            .its-title { font-size: 22px; }
            .its-content { padding: 16px 5%; gap: 6px; }
            .its-glass { padding: 16px 20px; gap: 6px; border-radius: 14px; }
            .its-desc { font-size: 13px; }
            .its-dots { opacity: 1; }
        }

        /* 跑馬燈：雙組無縫循環 */
        .its-scroll { overflow: hidden; border-radius: 10px; margin-top: 14px; white-space: nowrap; }
        .its-scroll-track { display: flex; width: max-content; animation: its-marquee 22s linear infinite; }
        .its-scroll-group { display: inline-flex; align-items: center; padding-right: 0; }
        .its-scroll-sep { margin: 0 24px; opacity: .7; }
        .its-scroll:hover .its-scroll-track { animation-play-state: paused; }
        @keyframes its-marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

/* ==== design/pwp.blade 收斂 ==== */
        .clay-pwp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
        .clay-pwp { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
        .clay-pwp-thumb {
            width: 84px; height: 84px;
            flex-shrink: 0;
            border-radius: var(--clay-radius-sm);
            border: var(--clay-border-width) solid var(--clay-border);
            box-shadow: 2px 2px 0 var(--clay-border);
            background: linear-gradient(135deg,#fff,var(--clay-accent-soft, #fff5f8));
            display: flex; align-items: center; justify-content: center;
            font-size: 28px;
            overflow: hidden;
        }
        .clay-pwp-thumb img { width: 100%; height: 100%; object-fit: cover; }
        @media (max-width: 600px) {
            .clay-pwp-row { grid-template-columns: 1fr; }
        }

/* ==== design/category.blade 收斂 ==== */
                .clay-catlist { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 18px 28px; }
                .clay-catlist-item {
                    display: flex; flex-direction: column; align-items: center; gap: 8px;
                    background: transparent;
                    border: none;
                    box-shadow: none;
                    padding: 6px 4px;
                    width: 88px;
                    transition: all .2s;
                }
                .clay-catlist-item:hover { transform: translateY(-3px); }
                .clay-catlist-thumb { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--clay-border-light); display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; background: linear-gradient(135deg,#fff,var(--clay-accent-soft, #fff5f8)); flex-shrink: 0; transition: all .2s; }
                .clay-catlist-item:hover .clay-catlist-thumb { border-color: var(--clay-primary); box-shadow: 0 6px 16px rgba(0,0,0,.10); }
                .clay-catlist-thumb img { width: 100%; height: 100%; object-fit: cover; }
                .clay-catlist-name { font-size: 13px; font-weight: 700; text-align: center; }
                .clay-catlist-arrow { display: none; }

/* ==== design/modules.blade 收斂 ==== */
    /* 模組寬度：full 全屏 / wide 寬屏 / narrow 窄屏（narrow = container 限 1140 居中；wide = 填滿外層容器；full = 視口通欄） */
    .mod-width { width: 100%; }
    .mod-width.mod-width-wide { width: 100%; max-width: none; margin-left: auto; margin-right: auto; }
    .mod-width.mod-width-narrow { max-width: 1140px; margin-left: auto; margin-right: auto; }
    /* 模組級直角：只作用於該模組，半徑令牌歸零（圓形圖標等 50% 形狀不受影響） */
    .mod-layout.corner-square { --clay-radius: 0px; --clay-radius-sm: 0px; --clay-radius-xs: 0px; --radius: 0px; --radius-sm: 0px; }
    /* 全屏通欄：寬度扣除滾動條（--scrollbar-w 由 app.blade.php 注入），避免右緣探出可視區被裁 */
    .mod-width.mod-width-full {
        width: calc(100vw - var(--scrollbar-w, 0px));
        max-width: none;
        margin-left: calc(50% - (100vw - var(--scrollbar-w, 0px)) / 2);
    }

    /* 統一手機斷點：<=767px */
    @media (max-width: 767px) {
        .mod-layout.mod-hide-mobile { display: none !important; }
    }

    /* 模組內商品 / 卡片柵格：由模組配置 CSS 變數驅動（桌面 + 手機） */
    .mod-layout .clay-pgrid,
    .mod-layout .design-grid {
        grid-template-columns: repeat(var(--desktop-columns, 4), minmax(0, 1fr));
        gap: var(--desktop-gap, 20px);
    }
    /* 平板（768-900px）：商品牆列數封頂到 4，避免 5-6 列每卡過窄 */
    @media (max-width: 900px) and (min-width: 768px) {
        .mod-layout .clay-pgrid {
            grid-template-columns: repeat(min(var(--desktop-columns, 4), 4), minmax(0, 1fr));
            gap: 16px;
        }
    }
    @media (max-width: 767px) {
        .mod-layout .clay-pgrid,
        .mod-layout .design-grid {
            grid-template-columns: repeat(var(--mobile-columns, 2), minmax(0, 1fr));
            gap: var(--mobile-gap, 12px);
        }
    }

/* ==== design/modules.blade 收斂 ==== */
        .design-modules { padding-bottom: 120px; }
        .dmb { position: relative; margin: 0 0 18px; }
        .dmb.editing { z-index: 5; }
        .dmb-bar {
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
            padding: 6px 12px; margin-bottom: 10px;
            background: #fff; border: 1px solid #1677ff; border-radius: 6px;
            box-shadow: 0 2px 8px rgba(22,119,255,.10);
            font-size: 12.5px;
            opacity: 0; transform: translateY(-4px);
            transition: opacity .18s, transform .18s;
        }
        .dmb:hover .dmb-bar, .dmb.editing .dmb-bar { opacity: 1; transform: translateY(0); }
        .dmb-tag { font-weight: 600; color: #1f2329; }
        .dmb-actions { display: inline-flex; gap: 6px; }
        .dmb-btn {
            border: 1px solid #e5e6eb; background: #fff; color: #4e5969;
            border-radius: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer;
            line-height: 1.7; transition: all .15s;
        }
        .dmb-btn:hover { border-color: #1677ff; color: #1677ff; }
        .dmb-btn-edit { border-color: #1677ff; color: #1677ff; background: #f0f7ff; }
        .dmb-btn-remove { opacity: 0; padding: 2px 7px; }
        .dmb:hover .dmb-btn-remove { opacity: 1; }
        .dmb-btn-remove:hover { border-color: #e5484d; color: #e5484d; }
        .dmb.editing { outline: 2px solid rgba(22,119,255,.55); outline-offset: 6px; border-radius: 6px; }
        .dmb.editing .dmb-body { pointer-events: none; opacity: .95; }
        .dmb-empty {
            text-align: center; padding: 90px 20px; margin: 20px 0;
            border: 2px dashed #d9dde3; border-radius: 10px; background: #fafbfc;
            color: #8a919e; font-size: 14px;
        }
        .dmb-empty-icon { font-size: 40px; margin-bottom: 10px; }

/* ==== design/img_text_banner_multiple.blade 收斂 ==== */
        .clay-multi-banner {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
        }
        .clay-multi-item {
            display: block;
            background: var(--clay-card);
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius);
            box-shadow: var(--clay-shadow);
            overflow: hidden;
            transition: transform .25s, box-shadow .25s;
        }
        .clay-multi-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--clay-shadow-hover);
        }
        .clay-multi-item img {
            width: 100%;
            display: block;
            aspect-ratio: 4/3;
            object-fit: cover;
        }
        .clay-multi-text {
            padding: 14px 16px;
            font-family: var(--clay-font-heading);
            font-weight: 800;
            font-size: 15px;
            color: var(--clay-text);
            text-align: center;
        }
        @media (max-width: 767px) {
            .clay-multi-banner { grid-template-columns: repeat(2, 1fr); gap: 12px; }
        }

/* ==== design/tab_product.blade 收斂 ==== */
        .clay-tabs-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
        .clay-tab {
            padding: 9px 22px;
            border: var(--clay-border-width) solid var(--clay-border);
            border-radius: var(--clay-radius-sm);
            background: var(--clay-card);
            box-shadow: 2px 2px 0 var(--clay-border);
            font-family: var(--clay-font-heading);
            font-size: 13px; font-weight: 700;
            color: var(--clay-text-secondary);
            cursor: pointer;
            transition: all .2s;
        }
        .clay-tab:hover { transform: translateY(-1px); }
        .clay-tab.active { border-color: var(--clay-primary); color: var(--clay-text); box-shadow: 3px 3px 0 var(--clay-primary); background: var(--clay-accent-soft, #fff5f8); }
        .clay-tab-pane { display: none; }
        .clay-tab-pane.active { display: block; animation: clay-fade .3s ease; }
        @keyframes clay-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ==== design/icons.blade 收斂 ==== */
        .clay-icons, .clay-icons.cols-4, .clay-icons.cols-5, .clay-icons.cols-6, .clay-icons.cols-8, .clay-icons.cols-10 {
            display: grid;
            grid-template-columns: repeat(var(--desktop-columns, 8), minmax(0, 1fr));
            gap: 12px 6px;
        }
        .clay-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .clay-icon-circle {
            width: 68%; aspect-ratio: 1; height: auto; max-width: 132px; min-width: 48px;
            border-radius: 50%;
            border: var(--clay-border-width) solid var(--clay-border);
            background: var(--clay-card);
            box-shadow: var(--clay-shadow);
            display: flex; align-items: center; justify-content: center;
            font-family: var(--clay-font-heading);
            font-size: 22px; font-weight: 800;
            color: var(--clay-text-secondary);
            overflow: hidden;
            transition: all .25s;
        }
        /* 5 個一排放大大、6 個自動縮小、7/8 個保持緊湊 */
        .clay-icons.cols-5 .clay-icon-circle { width: 92%; max-width: 176px; font-size: 30px; }
        .clay-icons.cols-6 .clay-icon-circle { width: 78%; max-width: 132px; font-size: 24px; }
        .clay-icons.cols-7 .clay-icon-circle,
        .clay-icons.cols-8 .clay-icon-circle,
        .clay-icons.cols-10 .clay-icon-circle { width: 70%; max-width: 106px; font-size: 19px; }
        .clay-icons.cols-5 .clay-icon-name { max-width: 150px; }
        .clay-icons.cols-6 .clay-icon-name { max-width: 120px; }
        .clay-icon:hover .clay-icon-circle {
            transform: translateY(-4px) rotate(-3deg);
            border-color: var(--clay-primary);
            box-shadow: var(--clay-shadow-hover);
            color: var(--clay-text);
        }
        .clay-icon-circle img { width: 100%; height: 100%; object-fit: cover; }
        .clay-icon-name { font-size: 13px; font-weight: 700; color: var(--clay-text-secondary); max-width: 90px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .clay-icon-circle.shape-rounded { border-radius: 18px; }
        .clay-icon-circle.shape-squircle { border-radius: 34px; }
        .clay-icon-circle.shape-square { border-radius: 6px; }
        .clay-icon-circle.shape-hex { border-radius: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
        .clay-icon-sub { font-size: 11px; color: var(--clay-text-muted, #999); max-width: 90px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .clay-icon:hover .clay-icon-name { color: var(--clay-text); }
        @media (max-width: 767px) {
            .clay-icons, .clay-icons.cols-4, .clay-icons.cols-5, .clay-icons.cols-6, .clay-icons.cols-8, .clay-icons.cols-10 {
                display: grid;
                grid-template-columns: repeat(var(--mobile-columns, 5), minmax(0, 1fr));
                gap: 12px 8px;
            }
            .clay-icon-circle { width: 70%; max-width: 92px; font-size: 18px; }
        }

/* ==== design/images2.blade 收斂 ==== */
        .clay-img-grid { display: grid; gap: 18px; }
        .clay-img-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
        .clay-img-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
        .clay-img-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
        @media (max-width: 767px) {
            .clay-img-grid.cols-2, .clay-img-grid.cols-3, .clay-img-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
            .clay-img-grid.cols-3 .clay-banner:last-child:nth-child(3) { grid-column: 1 / -1; }
        }

/* ===== P9-P30 對齊演示 HTML（由 demo CSS 原樣轉換） ===== */
.badge-style-p9 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent); color: var(--badge-ink, var(--badge-color,#e60012)); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.badge-style-p10 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: color-mix(in srgb, var(--badge-color,#e60012) 26%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: var(--badge-text,#fff); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 4px 14px rgba(0,0,0,.10); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.badge-style-p11 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1.5px solid var(--badge-color,#e60012); color: var(--badge-ink, var(--badge-color,#e60012)); box-shadow: none; }
.badge-style-p12 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: color-mix(in srgb, var(--badge-color,#e60012) 14%, white); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 35%, white); }
.badge-style-p13 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: color-mix(in srgb, var(--badge-color,#e60012) 88%, transparent); color: var(--badge-text,#fff); border-radius: 6px 2px 2px 6px; box-shadow: 4px 4px 10px rgba(0,0,0,.12); }
.badge-style-p13 .promo-badges .promo-badge::after { content: ""; position: absolute; right: -7px; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 7px 9px 0; border-color: transparent rgba(0,0,0,.22) transparent transparent; }
.badge-style-p14 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 0; padding-left: 4px; }
.badge-style-p14 .promo-badges .promo-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--badge-color,#e60012); box-shadow: 0 0 8px var(--badge-color,#e60012); }
.badge-style-p15 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-color,#e60012) 45%, transparent), 0 4px 18px color-mix(in srgb, var(--badge-color,#e60012) 30%, transparent); }
.badge-style-p16 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 38%, transparent), color-mix(in srgb, var(--badge-color,#e60012) 12%, transparent)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--badge-text,#fff); border-left: 3px solid var(--badge-color,#e60012); border-radius: 6px; }
.badge-style-p17 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.55); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 8px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9); }
.badge-style-p18 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent), color-mix(in srgb, var(--badge-color,#e60012) 10%, transparent) 90%); color: var(--badge-text,#fff); border: 1px solid rgba(255,255,255,.3); text-shadow: 0 1px 3px rgba(0,0,0,.2); }
.badge-style-p19 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(12,12,22,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 65%, transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--badge-color,#e60012) 90%, transparent), 0 0 15px color-mix(in srgb, var(--badge-color,#e60012) 50%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--badge-color,#e60012) 28%, transparent); letter-spacing: 1px; }
.badge-style-p20 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: #2B1B12; color: #ffe08a; border: 2px solid rgba(255,255,255,.92); border-radius: 3px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 3px 0 rgba(0,0,0,.28); text-shadow: 1px 1px 0 rgba(0,0,0,.28); }
.badge-style-p21 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1.5px solid color-mix(in srgb, var(--badge-color,#e60012) 80%, transparent); border-radius: 3px; letter-spacing: 2px; font-weight: 400; text-shadow: 0 0 7px var(--badge-color,#e60012), 0 0 20px color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent); }
.badge-style-p22 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background-color: #241A0E; background-image: linear-gradient(180deg, rgba(30,24,12,.35), rgba(30,24,12,.70)); color: #ffd866; text-shadow: 0 1px 2px rgba(0,0,0,.5); border: 1px solid rgba(255,215,120,.45); letter-spacing: 1px; font-weight: 900; }
.badge-style-p23 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: color-mix(in srgb, var(--badge-color,#e60012) 32%, rgba(255,255,255,.30)); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: var(--badge-text,#fff); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 6px 14px rgba(0,0,0,.12); text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.badge-style-p24 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.78); color: var(--badge-ink, var(--badge-color,#e60012)); border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,.12); font-weight: 900; }
.badge-style-p25 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--badge-ink, var(--badge-color,#e60012)); border: 2px dashed var(--badge-color,#e60012); border-radius: 6px; transform: rotate(-2deg); letter-spacing: 1px; box-shadow: none; }
.badge-style-p26 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: rgba(255,255,255,.82); color: var(--badge-ink, var(--badge-color,#e60012)); border: 1px solid color-mix(in srgb, var(--badge-color,#e60012) 45%, transparent); border-radius: 4px; font-family: 'Courier New', monospace; }
.badge-style-p27 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--badge-color,#e60012) 62%, transparent) 0 6px, color-mix(in srgb, var(--badge-color,#e60012) 26%, transparent) 6px 12px); color: var(--badge-text,#fff); text-shadow: 0 1px 3px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); }
.badge-style-p28 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background-color: rgba(255,255,255,.20); background-image: radial-gradient(color-mix(in srgb, var(--badge-color,#e60012) 75%, transparent) 1.2px, transparent 1.4px); background-size: 8px 8px; color: var(--badge-text,#fff); text-shadow: 0 1px 3px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.35); }
.badge-style-p29 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 55%, transparent), rgba(56,189,248,.30), rgba(168,85,247,.36)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--badge-text,#fff); border: 1px solid rgba(255,255,255,.45); }
.badge-style-p30 .promo-badges .promo-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.5;border-radius:999px;white-space:nowrap;position:relative;overflow:hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 88%, transparent), rgba(57,255,20,.42)); color: var(--badge-text,#fff); text-shadow: 0 0 8px rgba(0,255,200,.75), 0 1px 2px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.35); }

/* P27/P29/P30 加強顯色（白色底也可見演示色彩，保留半透） */
.badge-style-p27 .promo-badges .promo-badge { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--badge-color,#e60012) 80%, transparent) 0 6px, color-mix(in srgb, var(--badge-color,#e60012) 38%, transparent) 6px 12px) !important; }
.badge-style-p29 .promo-badges .promo-badge { background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 78%, transparent), rgba(56,189,248,.48), rgba(168,85,247,.58)) !important; }
.badge-style-p30 .promo-badges .promo-badge { background: linear-gradient(90deg, color-mix(in srgb, var(--badge-color,#e60012) 96%, transparent), rgba(57,255,20,.58)) !important; }
/* ===== 圖案款穩妥版（不用 color-mix，斜紋/波點/極光/霓虹必定可見）+ 折扣角標同步 ===== */
.badge-style-p27 .promo-badges .promo-badge { background-color: var(--badge-color,#e60012) !important; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.34) 0 7px, rgba(0,0,0,.14) 7px 14px) !important; color: var(--badge-text,#fff) !important; }
.badge-style-p28 .promo-badges .promo-badge { background-color: var(--badge-color,#e60012) !important; background-image: radial-gradient(rgba(255,255,255,.95) 1.3px, transparent 1.6px) !important; background-size: 9px 9px !important; color: var(--badge-text,#fff) !important; }
.badge-style-p29 .promo-badges .promo-badge { background: linear-gradient(90deg, var(--badge-color,#e60012) 0%, #38bdf8 48%, #a855f7 78%, var(--badge-color,#e60012)) !important; color: var(--badge-text,#fff) !important; border: 1px solid rgba(255,255,255,.55) !important; box-shadow: 0 8px 20px rgba(0,0,0,.16) !important; }
.badge-style-p30 .promo-badges .promo-badge { background: linear-gradient(90deg, var(--badge-color,#e60012) 0%, rgba(57,255,20,.82) 100%) !important; color: var(--badge-text,#fff) !important; text-shadow: 0 0 9px rgba(0,255,200,.8), 0 1px 2px rgba(0,0,0,.25) !important; border: 1px solid rgba(255,255,255,.4) !important; }
.badge-style-p27 .product-card .sale-badge, .badge-style-p27 .product-wrap .sale-badge { background: repeating-linear-gradient(45deg, var(--badge-color,#e60012) 0 7px, rgba(0,0,0,.18) 7px 14px) !important; color: var(--badge-text,#fff) !important; border: 0 !important; }
.badge-style-p28 .product-card .sale-badge, .badge-style-p28 .product-wrap .sale-badge { background-color: var(--badge-color,#e60012) !important; background-image: radial-gradient(rgba(255,255,255,.9) 1.2px, transparent 1.5px) !important; background-size: 8px 8px !important; color: var(--badge-text,#fff) !important; border: 0 !important; }
.badge-style-p29 .product-card .sale-badge, .badge-style-p29 .product-wrap .sale-badge { background: linear-gradient(135deg, var(--badge-color,#e60012), #38bdf8 55%, #a855f7) !important; color: var(--badge-text,#fff) !important; border: 0 !important; }
.badge-style-p30 .product-card .sale-badge, .badge-style-p30 .product-wrap .sale-badge { background: linear-gradient(90deg, var(--badge-color,#e60012), rgba(57,255,20,.85)) !important; color: var(--badge-text,#fff) !important; border: 0 !important; }/* ===== 玻璃系換色強化（主色打底＋白高光疊層，換主色必定可見） ===== */
.badge-style-p10 .promo-badges .promo-badge { background-color: var(--badge-color,#e60012) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.06) 72%) !important; }
.badge-style-p16 .promo-badges .promo-badge { background-color: var(--badge-color,#e60012) !important; background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.5) 55%, rgba(255,255,255,.72)) !important; }
.badge-style-p18 .promo-badges .promo-badge { background-color: var(--badge-color,#e60012) !important; background-image: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.5) 85%) !important; }
.badge-style-p23 .promo-badges .promo-badge { background-color: var(--badge-color,#e60012) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.08) 58%) !important; border: 1px solid rgba(255,255,255,.6) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 6px 16px rgba(0,0,0,.14) !important; }/* ===== 在線客服浮動窗（plugins/online_service） ===== */
.os-wrap { position: fixed; right: 22px; bottom: 84px; z-index: 3000; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.os-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--clay-primary,#6366f1), var(--clay-accent,#ec4899)); box-shadow: 0 10px 26px rgba(99,102,241,.38); transition: transform .2s ease, box-shadow .2s ease; }
.os-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(99,102,241,.46); }
.os-panel { width: 300px; max-width: calc(100vw - 32px); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; box-shadow: 0 18px 48px rgba(20,24,50,.16); overflow: hidden; display: flex; flex-direction: column; max-height: min(80vh, 560px); }
.os-panel[hidden] { display: none; }
.os-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; color: #fff; background: linear-gradient(135deg, var(--clay-primary,#6366f1), var(--clay-accent,#ec4899)); }
.os-title { font-family: var(--clay-font-heading); font-size: 15px; font-weight: 800; }
.os-sub { font-size: 11px; opacity: .9; margin-top: 2px; }
.os-close { border: 0; background: rgba(255,255,255,.18); color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; }
.os-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.os-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; color: var(--clay-text,#0a0a0a); text-decoration: none; transition: background .15s; }
.os-item:hover { background: rgba(99,102,241,.08); }
.os-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 800; flex: none; }
.os-icon-wa { background: #25d366; }
.os-icon-line { background: #06c755; font-size: 9px; }
.os-icon-msg { background: #1877f2; }
.os-icon-mail { background: #8a919e; font-size: 14px; }
.os-name { flex: 1; font-size: 13px; font-weight: 700; }
.os-arrow { color: var(--clay-text-muted); font-size: 16px; }
@media (max-width: 767px) {
    .os-wrap { right: 14px; bottom: 90px; }
    .os-fab { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .os-fab, .os-panel { transition: none !important; }
}
.os-icon-phone { background: #3b82c4; font-size: 15px; }
.os-foot { padding: 8px; border-top: 1px solid rgba(0,0,0,.06); }
.os-form-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px dashed var(--clay-border, #e5e6eb); border-radius: 10px; background: transparent; color: var(--clay-text, #0a0a0a); font-size: 13px; font-weight: 700; cursor: pointer; }
.os-form-toggle:hover { background: rgba(99,102,241,.06); }
.os-toggle-caret { transition: transform .2s ease; }
.os-form-toggle.expanded .os-toggle-caret { transform: rotate(180deg); }
.os-form-wrap { overflow-y: auto; border-top: 1px solid rgba(0,0,0,.06); }
.os-form { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.os-form-title { font-size: 13px; font-weight: 800; color: var(--clay-text, #0a0a0a); }
.os-form input,
.os-form textarea { width: 100%; border: 1px solid var(--clay-border, #e5e6eb); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--clay-text, #0a0a0a); background: #fff; }
.os-form textarea { resize: vertical; min-height: 56px; }
.os-form button { border: 0; border-radius: 8px; padding: 9px 10px; background: var(--clay-primary, #6366f1); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }

/* 會員中心：等級進度卡 */
.acc-tier-card { margin-bottom: 18px; }
.acc-tier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.acc-tier-label { font-size: 12px; color: var(--clay-text-muted, #8a8f98); }
.acc-tier-name { margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--clay-text, #1f2329); }
.acc-tier-spend { font-size: 12px; color: var(--clay-text-muted, #8a8f98); }
.acc-tier-spend b { color: var(--clay-text, #1f2329); font-size: 15px; }
.acc-tier-benefits { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--clay-text, #1f2329); font-size: 13px; }
.acc-tier-progress { margin-top: 14px; }
.acc-tier-progress-text { margin-bottom: 6px; font-size: 12px; color: var(--clay-text-muted, #8a8f98); }
.acc-tier-bar { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(99,102,241,.12); }
.acc-tier-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--clay-primary, #6366f1), var(--clay-accent, #ec4899)); }

/* 表單選填提示（註冊／個人資料） */
.form-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }

/* 出生日期：日/月/年三個下拉（香港 DD/MM/YYYY 習慣） */
.dob-group { grid-column: 1 / -1; }
.dob-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dob-row select { width: 100%; min-width: 0; }

/* 商品詳情頁：多圖縮圖列 + 商品詳情區塊 */
.detail-gallery { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.detail-media { min-width: 0; }
.gallery-rail { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; order: -1; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 8px; max-height: 440px; overflow-y: auto; scrollbar-width: none; padding: 2px; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb { flex: none; width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; opacity: .72; transition: border-color .15s, opacity .15s; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--clay-primary, #6366f1); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-arrow { flex: none; width: 100%; height: 24px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: rgba(255,255,255,.7); color: var(--clay-text-muted, #888); cursor: pointer; font-size: 10px; line-height: 1; transition: color .15s, border-color .15s; }
.rail-arrow:hover { color: var(--clay-primary, #6366f1); border-color: var(--clay-primary, #6366f1); }
.detail-gallery .detail-thumb { flex: 1; min-width: 0; }
.detail-info-section { margin-top: 36px; }
.detail-info-content { background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.05); border-radius: var(--clay-radius, 14px); padding: 20px 22px; color: var(--clay-text, #0a0a0a); line-height: 1.9; white-space: pre-line; overflow-wrap: break-word; }
.detail-info-content img { max-width: 100%; height: auto; border-radius: 10px; }
.detail-info-content table { width: 100%; border-collapse: collapse; }
.detail-info-content p { margin-bottom: 10px; }
.detail-center { display: flex; align-items: center; min-height: calc(100vh - 420px); }
@media (max-width: 900px) {
    .detail-center { min-height: 0; }
}
@media (max-width: 900px) {
    .detail-gallery { flex-direction: column; }
    .gallery-rail { order: 2; width: 100%; }
    .gallery-thumbs { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
    .gallery-thumb { width: 60px; height: 60px; }
    .rail-arrow { display: none; }
    .detail-info-content { padding: 16px; }
}

/* 列表卡片：對齊 Shopline 分類頁（資訊置中＋hover 換第二張圖） */
body .product-card .product-thumb { position: relative; }
body .product-card .product-thumb .card-img-second { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
body .product-card:hover .product-thumb .card-img-second { opacity: 1; }
body .product-card .product-info { text-align: center; }

/* 商品列表排版對齊 Shopline 分類頁：桌面 3 欄、窄屏 2 欄（保留列表視圖切換） */
body .grid.plp-grid:not(.view-list) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px; }
@media (max-width: 991px) {
    body .grid.plp-grid:not(.view-list) { gap: 24px 12px; }
}
@media (max-width: 767px) {
    body .grid.plp-grid:not(.view-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
}

/* 分類頁兩欄格局（對齊 Shopline：左分類導覽＋右列表） */
.plp-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.plp-side { position: sticky; top: 90px; background: var(--clay-card, #fff); border: 1px solid var(--clay-border, #eee); border-radius: var(--clay-radius, 16px); padding: 14px; max-height: calc(100vh - 120px); overflow-y: auto; }
.plp-side-title { font-size: 14px; font-weight: 800; margin-bottom: 8px; padding: 0 10px 10px; border-bottom: 1px solid var(--clay-border-light, #f0f0f0); }
.plp-cat-row { display: flex; align-items: center; gap: 2px; }
.plp-cat-row a { flex: 1; min-width: 0; }
.plp-cat a { display: block; padding: 7px 10px; font-size: 14px; color: var(--clay-text-secondary, #666); border-radius: 8px; text-decoration: none; transition: all .15s; }
.plp-cat a:hover { color: var(--clay-primary, #6366f1); background: rgba(99, 102, 241, .06); }
.plp-cat a.active { color: var(--clay-primary, #6366f1); font-weight: 700; background: rgba(99, 102, 241, .10); }
.plp-cat-toggle { flex: none; border: 0; background: none; color: var(--clay-text-muted, #aaa); cursor: pointer; width: 24px; height: 24px; font-size: 9px; line-height: 1; border-radius: 6px; transition: transform .2s, color .2s; }
.plp-cat-toggle:hover { color: var(--clay-primary, #6366f1); }
.plp-cat.open > .plp-cat-row .plp-cat-toggle { transform: rotate(90deg); }
.plp-cat-sub { display: none; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--clay-border-light, #f0f0f0); }
.plp-cat.open > .plp-cat-sub { display: block; }
.plp-cat-sub .plp-cat a { font-size: 13px; padding: 5px 10px; }
.plp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.plp-head-count { font-size: 13px; color: var(--clay-text-muted, #999); white-space: nowrap; }
.plp-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--clay-text-muted, #999); margin-bottom: 6px; flex-wrap: wrap; }
.plp-crumb a { color: var(--clay-text-secondary, #666); text-decoration: none; transition: color .15s; }
.plp-crumb a:hover { color: var(--clay-primary, #6366f1); }
.plp-crumb span:last-child { color: var(--clay-text, #222); font-weight: 600; }
/* 頁尾支付圖示 */
body .clay-footer .clay-pay-icons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
body .clay-footer .clay-pay-icon { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; padding: 4px 7px; height: 30px; }
body .clay-footer .clay-pay-icon img { height: 20px; width: auto; display: block; }
/* 商品無圖佔位：白底＋商店名稱水印 */
.image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; }
.image-placeholder span { font-family: var(--clay-font-heading, inherit); font-size: clamp(13px, 6vw, 30px); color: rgba(0,0,0,.12); font-weight: 800; letter-spacing: .08em; text-align: center; padding: 0 8%; text-transform: uppercase; }
/* 會員頭像 */
.account-side-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; }
.account-side-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-side-avatar .image-placeholder span { font-size: 8px; color: rgba(0,0,0,.16); padding: 0 2px; }
.profile-avatar-row { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.profile-avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; border: 1px solid rgba(0,0,0,.08); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar .image-placeholder span { font-size: 12px; }
.profile-avatar-row form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.checkout-layout .form-span-all { grid-column: 1 / -1; }
.checkout-layout .checkout-addr-wide { max-width: 66.666%; }

/* 手機：結帳已是單欄佈局，地址欄不應再只佔 2/3 寬 */
@media (max-width: 900px) {
    .checkout-layout .checkout-addr-wide { max-width: 100%; }
}
@media (max-width: 991px) {
    .plp-layout { grid-template-columns: 1fr; gap: 0; }
    .plp-side { display: none; }
    .plp-head { align-items: flex-start; }
}

/* ===== Cookie 同意橫額（2026-09-07） ===== */
.cookie-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1500;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 860px; margin: 0 auto; padding: 14px 18px;
    background: rgba(20, 22, 34, .96); color: #fff; border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28); font-size: 13px; line-height: 1.6;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar-text { flex: 1; min-width: 0; }
.cookie-bar-actions { display: flex; gap: 8px; flex: none; }
.cookie-bar-actions .btn { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.cookie-bar-actions .btn-primary { border-color: transparent; }
@media (max-width: 600px) {
    .cookie-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-bar-actions { justify-content: center; }
}

/* ===== 到貨通知（2026-09-07） ===== */
.stock-notify-box { margin: 2px 0 14px; }
.stock-notify-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary, #666); margin-bottom: 6px; }
.stock-notify-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stock-notify-form input[type="email"] {
    flex: 1; min-width: 200px; max-width: 300px; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 8px; font-size: 13px; outline: none;
}
.stock-notify-msg { font-size: 13px; margin-top: 6px; }
.stock-notify-msg.ok { color: #059669; }
.stock-notify-msg.error { color: #dc2626; }

/* ===== 會員折扣價（2026-09-07） ===== */
.detail-member-price {
    margin: 2px 0 12px; font-size: 14px; color: var(--text-secondary, #666);
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.detail-member-price b { font-size: 20px; color: var(--primary, #e25c5c); }
.detail-member-off { font-size: 12px; color: #b45309; background: rgba(217,119,6,.1); padding: 2px 8px; border-radius: 10px; }

/* ===== 會員專屬固定價（2026-09-07） ===== */
.detail-member-tag {
    display: inline-block; margin-left: 8px; padding: 2px 10px; vertical-align: middle;
    border-radius: 999px; background: rgba(217,119,6,.12); color: #b45309;
    font-size: 12px; font-weight: 600;
}

/* ===== 自取點選擇（2026-09-07，對齊 medicube 取件型） ===== */
.ship-option-note { margin-top: 2px; color: var(--clay-text-secondary, #666); font-size: 13px; }
.pickup-block { display: none; margin-top: 12px; padding: 14px; border: 1px dashed var(--clay-border, #ddd); border-radius: var(--clay-radius-sm, 10px); background: rgba(255,255,255,.55); }
.pickup-controls { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 12px; align-items: end; }
.pickup-controls .form-group { margin-bottom: 10px; }
/* 快遞底下的「送貨方式」：整行顯示（.pickup-controls 是兩欄 grid，這裡只要一欄） */
.courier-service { display: block; margin: 2px 0 10px; }
.courier-service[hidden] { display: none; }
/* 取件地區／取件點跟在送貨方式下面，留一點間距 */
.courier-service #pointPicker { margin-top: 12px; }

/* 配送方式／取件地區／取件點的下拉：圓角、細邊、自繪箭頭與聚焦光環，跟結帳頁其他欄位一致 */
.pickup-block select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    max-width: 100%;
    padding: 10px 38px 10px 13px;
    border: 1px solid var(--clay-border, #e3e6ec);
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.75 6 6.5l5-4.75' fill='none' stroke='%238a8f98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--clay-text, #333);
    box-shadow: 0 1px 2px rgb(16 24 40 / .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pickup-block select:hover { border-color: #ccd2dc; }
.pickup-block select:focus {
    outline: none;
    border-color: var(--clay-primary, #e25c5c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay-primary, #e25c5c) 14%, transparent);
}
.pickup-block select:disabled { color: var(--clay-text-muted, #999); background-color: #fbfbfc; }
.pickup-search { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; }
.pickup-point-list { max-height: 250px; overflow-y: auto; border: 1px solid var(--clay-border, #eee); border-radius: var(--clay-radius-xs, 8px); background: var(--clay-card, #fff); }
.pickup-point { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--clay-border, #f0f0f0); background: transparent; cursor: pointer; font: inherit; }
.pickup-point:last-child { border-bottom: 0; }
.pickup-point:hover { background: #faf5f5; }
.pickup-point.selected { background: #fff5f8; box-shadow: inset 3px 0 0 var(--clay-primary, #e25c5c); }
.pickup-point-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--clay-text, #333); line-height: 1.5; }
.pickup-point-code { margin-left: 6px; color: var(--clay-primary, #e25c5c); font-size: 12px; }
.pickup-point-addr { display: block; margin-top: 2px; font-size: 12px; color: var(--clay-text-secondary, #666); line-height: 1.6; word-break: break-word; }
.pickup-empty { display: none; padding: 26px 10px; text-align: center; color: var(--clay-text-muted, #999); font-size: 13px; }
.pickup-notice { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: rgba(245,158,11,.08); color: #92400e; font-size: 12.5px; line-height: 1.7; }
.pickup-kinds { display: grid; gap: 7px; margin-top: 6px; }
/* 主題的 input 是 width:100%，radio 要還原成原生寬度，否則會把文字擠到最右邊 */
.pickup-block label.pickup-kind { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--clay-text, #333); text-align: left; cursor: pointer; }
.pickup-block label.pickup-kind input[type="radio"] { width: auto; flex: none; margin: 0; }
@media (max-width: 640px) {
    .pickup-controls { grid-template-columns: 1fr; align-items: stretch; }
}


/* 內聯樣式收斂（2026-09-08 由視圖抽出，勿手改；動視圖請用同款 class） */
.st-img { width:100%;height:100%;object-fit:cover; }

/* 促銷活動模組（滿減／免運／買X享Y／任選／A+B） */
.clay-promo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.clay-promo-head .module-title { margin-bottom: 0; }
.promo-module-title { text-align: center; }
.promo-module-title span { justify-content: center; }
.clay-pgrid.promo-grid { margin-top: 18px; }
.clay-activity-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 18px; }
.clay-activity-card { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); text-decoration: none; transition: all .18s; }
.clay-activity-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.clay-activity-card b { font-size: 14.5px; }
.clay-activity-card span { font-size: 12px; color: var(--text-2); }
.clay-activity-card i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--primary); margin-top: auto; }

/* 圖片模組自訂高度（0 或未設定＝原比例） */
.clay-banner { height: var(--img-h, auto); }
.clay-img-grid { --img-h: auto; }
.clay-itext-media { height: var(--itext-h, auto); }
.clay-multi-item { height: var(--multi-h, auto); }
.clay-multi-item img { height: 100%; object-fit: cover; }

/* 圖片模組：各自採用舊系統建議尺寸（同排等高、居中裁切） */
.design-section > .clay-banner { aspect-ratio: 1920 / 500 !important; }
.clay-img-grid { align-items: stretch; }
.clay-img-grid .clay-banner { height: auto !important; }
.clay-img-grid.cols-2 .clay-banner { aspect-ratio: 1200 / 410 !important; }
.clay-img-grid.cols-3 .clay-banner { aspect-ratio: 640 / 300 !important; }
.clay-img-grid.cols-4 .clay-banner { aspect-ratio: 460 / 300 !important; }
.clay-img-grid .clay-banner img { width: 100%; height: 100% !important; object-fit: cover; }
.clay-itext-media { aspect-ratio: 1000 / 600 !important; }
.clay-multi-item { aspect-ratio: 200 / 200 !important; }
/* 輪播類：沒填高度用舊系統比例；填了高度就尊重所填值（寬度固定 100%，高度才不會被比例反向算出） */
.its-wrap { width: 100%; height: var(--its-h, auto) !important; aspect-ratio: 2100 / 1200 !important; }
/* 手機：維持自適應縮放，設定的高度只在桌面生效 */
@media (max-width: 767px) {
    .its-wrap { height: auto !important; }
}

/* 首頁間距收斂（2026-09-09）：導航→廣告、內容→頁尾不留大空白 */
.design-modules { margin-top: -16px; padding-bottom: 24px !important; }
.design-modules { margin-top: -32px; margin-bottom: -28px; padding-bottom: 0 !important; }
.clay-footer { margin-top: 8px !important; }
.st1 { background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;padding:12px 16px;border-radius:8px;margin-bottom:16px }
.st2 { margin-bottom:20px }
.st3 { margin:0 0 18px;font-size:16px }
.st4 { height:1px;background:var(--border,#eee);margin:18px 0 }
.st5 { margin:0 0 14px;font-size:14px }
.st6 { margin:0 0 16px;font-size:16px }
.st7 { margin-bottom:14px;padding:12px 14px;border-radius:10px;background:rgba(185,28,28,.04);border:1px dashed rgba(185,28,28,.3) }
.st8 { display:flex;justify-content:space-between;align-items:center;gap:10px }
.st9 { font-weight:700;color:#b91c1c }
.st10 { font-size:12px;color:#888 }
.st11 { display:flex;gap:8px }
.st12 { flex:1;min-width:0;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px }
.st13 { white-space:nowrap }
.st14 { color:#B91C1C;font-size:12px;margin-top:8px }

/* 結帳頁禮品卡／優惠券（.st7–.st14）：手機上「套用」按鈕寬度固定，空間不夠時會把輸入框
   一路壓到看不清卡號，改成放不下就讓按鈕換到下一行；輸入框字級提到 16px——iOS Safari
   聚焦小於 16px 的輸入框會自動放大整頁，是結帳頁在真機上走形的主因。
   已套用狀態左側卡號過長時允許收縮換行，不撐破外框。 */
@media (max-width: 767px) {
    .st11 { flex-wrap: wrap }
    .st12 { flex: 1 1 160px; font-size: 16px }
    .st13 { margin-left: auto }
    .st8 > div { min-width: 0 }
}

.st15 { margin-bottom:14px;padding:12px 14px;border-radius:10px;background:rgba(217,119,6,.05);border:1px dashed rgba(217,119,6,.35) }
.st16 { font-weight:700;color:#d97706 }
.st17 { margin-top:14px }
.st18 { width:100%;background:linear-gradient(90deg,#34d399,#059669) }
.st19 { font-size:13px;color:#555 }
.st20 { display:inline-block;font-size:11px;font-weight:700;color:#7c3aed;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.35);border-radius:12px;padding:0 8px;margin-left:6px }
.st21 { font-size:12px;color:#999 }
.st22 { color:#16a34a }
.st23 { font-size:11px;color:#999;font-weight:400 }
.st24 { font-size:12.5px;color:#999 }
.st26 { width:100%;margin-top:16px }
.st27 { margin-top:16px }
.st28 { display:flex;align-items:center;gap:12px }
.st29 { width:52px;height:52px;border-radius:6px;overflow:hidden;background:#f2f2f2;display:flex;align-items:center;justify-content:center }
.st30 { font-size:12px;color:#888;margin-top:2px }
.st31 { border:none;background:none;color:#dc2626;font-size:12px;padding:0;margin-top:6px;cursor:pointer }
.st32 { color:var(--primary) }
.st33 { opacity:.75 }
.st34 { flex:1;min-width:0 }
.st35 { display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px }
.st36 { font-size:20px;font-weight:700 }
.st37 { padding:20px;margin-bottom:16px;display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgba(217,119,6,.08),rgba(245,158,11,.04)) }
.st38 { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#d97706);display:flex;align-items:center;justify-content:center;font-size:24px }
.st39 { font-size:13px;color:var(--text-secondary) }
.st40 { font-size:30px;font-weight:800;color:#d97706;line-height:1.1 }
.st41 { margin-left:auto;font-size:12px;color:#999;max-width:280px;text-align:right }
.st42 { margin:0 0 14px;font-size:16px }
.st43 { padding:36px 0 }
.st44 { margin-top:12px }
.st45 { text-align:right }
.st46 { text-align:right;color:var(--text-secondary) }
.st47 { display:flex;gap:16px;align-items:center;margin-bottom:16px;flex-wrap:wrap }
.st48 { width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0 }
.st49 { min-width:0 }
.st50 { font-weight:700;font-size:16px }
.st51 { background:#fde8e6;color:#b91c1c;padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px }
.st52 { padding:24px }
.st53 { margin-bottom:22px }
.st54 { font-size:14px;font-weight:700;margin-bottom:10px }
.st55 { color:#e25c5c }
.st56 { font-size:34px;line-height:1;cursor:pointer;user-select:none }
.st57 { font-size:12px;color:var(--text-secondary);margin-top:6px }
.st58 { color:#e25c5c;font-size:13px;margin-top:6px }
.st59 { font-size:14px;font-weight:700;display:block;margin-bottom:10px }
.st60 { width:100%;border:1px solid var(--border);border-radius:8px;padding:12px;font-size:14px;resize:vertical;font-family:inherit;box-sizing:border-box }
.st61 { margin-bottom:24px }
.st62 { font-size:14px;font-weight:700;display:block;margin-bottom:6px }
.st63 { font-size:12px;color:var(--text-secondary);margin-bottom:10px }
.st64 { width:100%;border:1px solid var(--border);border-radius:8px;padding:12px;font-size:13px;resize:vertical;font-family:inherit;box-sizing:border-box }
.st65 { padding:12px 40px }
.star-picker span { color: #e25c5c; transition: transform .12s; display: inline-block; }
.star-picker span.on { color: #f59e0b; text-shadow: 0 2px 8px rgba(245,158,11,.4); }
.star-picker span:hover { transform: scale(1.15); }

/* 登入／註冊／驗證碼／重設密碼共用排版 */
.auth-page { max-width: 440px; margin: 0 auto; }
.auth-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.auth-sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 24px; }
.auth-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.auth-flex { display: flex; align-items: center; gap: 8px; }
.auth-check { width: auto; }
.auth-label { margin: 0; font-weight: 400; }
.auth-link { font-size: 13px; color: var(--primary); }
.btn-block { display: block; width: 100%; }
.auth-center { margin-top: 12px; text-align: center; font-size: 13px; }
.auth-center-lg { margin-top: 20px; text-align: center; font-size: 13px; color: var(--text-secondary); }
.auth-gap-top { margin-top: 16px; }

/* 會員中心：地址簿與地址表單共用排版 */
.inline-form { display: inline; }
.acc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.acc-head-title { font-size: 20px; font-weight: 700; margin: 0; }
.acc-section-title { margin: 0 0 16px; font-size: 16px; }
.acc-btn-row { display: flex; gap: 10px; }
.acc-gap-bottom { margin-bottom: 18px; }
.acc-empty { padding: 60px 0; }
.acc-address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.acc-address-card { display: flex; flex-direction: column; gap: 10px; }
.acc-address-card.is-default { border-color: var(--clay-accent, #e25c5c); }
.acc-address-head { display: flex; justify-content: space-between; align-items: center; }
.acc-default-badge { background: #e25c5c; color: #fff; font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight: 600; }
.acc-address-body { font-size: 13px; line-height: 1.7; color: var(--text); }
.acc-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.acc-check-flex { display: flex; align-items: center; gap: 8px; }
.acc-title { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
.acc-title-sm { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.acc-note { color: var(--clay-text-secondary, #777); font-size: 13px; margin: -8px 0 16px; }
.acc-note-lg { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.8; }
.acc-card-gap { margin-bottom: 16px; }
.acc-section-title-sm { margin: 0 0 12px; font-size: 16px; }
.acc-code-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.acc-code-box { display: inline-block; padding: 12px 22px; border: 2px dashed var(--primary, #6366f1); border-radius: 10px; font-size: 20px; font-weight: 800; letter-spacing: 2px; color: var(--primary, #6366f1); }
.acc-code-input { width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; background: #f8f8fa; }
.acc-empty-sm { padding: 48px 0; }
.acc-empty-btn { margin-top: 12px; }
.acc-pgrid-gap { gap: 14px; }
.acc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.acc-sidebar { padding: 16px; }
.acc-side-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.acc-side-id { min-width: 0; }
.acc-side-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-side-mail { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.acc-nav { display: flex; flex-direction: column; gap: 2px; }
.acc-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text); }
.acc-nav a.active { background: #fde8e6; color: #e25c5c; font-weight: 600; }
.acc-nav form { margin-top: 8px; }
.acc-logout { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text-secondary); background: none; border: none; cursor: pointer; width: 100%; text-align: left; }
.acc-content { min-width: 0; }
@media (max-width: 800px) {
    /* 1fr 的軌道下限是 min-content，側欄那條導航會把整列反向撐到千餘 px（被 body 的 overflow-x:clip 裁掉、又無法橫向捲動）；minmax(0,1fr) 令其真正限寬 */
    .acc-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .acc-sidebar { padding: 12px; min-width: 0; }
    .acc-side-head { padding: 4px 6px 12px; }
    /* 手機：12 個選單項橫向滑動會把大半藏在屏幕外，改成 4 列圖標九宮格，一屏看全毋須滑動 */
    .acc-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .acc-nav a { flex-direction: column; gap: 6px; padding: 12px 2px; text-align: center; border-radius: 10px; font-size: 12px; line-height: 1.3; }
    .acc-nav a .acc-nav-ic { font-size: 20px; line-height: 1; }
    .acc-nav form { margin: 8px 0 0; display: block; grid-column: 1 / -1; }
    .acc-logout { flex-direction: row; justify-content: center; gap: 8px; width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
}
.acc-bar-gap { margin-bottom: 18px; }
.acc-order-list { display: flex; flex-direction: column; gap: 14px; }
.acc-order-card { padding: 0; overflow: hidden; }
.acc-order-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: var(--bg); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px; }
.acc-order-meta { display: flex; gap: 18px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.acc-order-no { color: var(--text); }
.acc-status-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.acc-order-body { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.acc-order-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-order-thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.acc-order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acc-order-more { width: 52px; height: 52px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-secondary); }
.acc-order-total-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-order-paid { text-align: right; }
.acc-order-paid-label { font-size: 12px; color: var(--text-secondary); }
.acc-order-paid-amount { font-size: 18px; font-weight: 700; color: var(--clay-accent, #e25c5c); }
.acc-order-actions { display: flex; gap: 8px; }
.acc-btn-amber { border-color: #f59e0b; color: #d97706; }
.acc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.acc-stat-card { text-align: center; padding: 18px; }
.acc-stat-icon { font-size: 26px; }
.acc-stat-num { font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.acc-stat-label { font-size: 13px; color: var(--text-secondary); }
.acc-empty-xs { padding: 36px 0; }
.acc-table-footer { text-align: right; margin-top: 12px; }
.acc-link-muted { font-size: 13px; color: var(--text-secondary); }
.acc-status-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.acc-banner-icon { font-size: 26px; }
.acc-banner-title { font-weight: 700; font-size: 16px; }
.acc-banner-time { font-size: 13px; color: var(--text-secondary); }
.acc-banner-action { margin-left: auto; }
.acc-section-title-md { margin: 0 0 14px; font-size: 16px; }
.acc-section-title-lg { margin: 20px 0 12px; font-size: 16px; }
.acc-item-row { display: flex; align-items: center; gap: 12px; }
.acc-item-name { font-weight: 600; }
.acc-item-sku { font-size: 12px; color: var(--text-secondary); }
.acc-td-strong { font-weight: 600; }
.acc-td-nowrap { white-space: nowrap; }
.acc-review-done { color: #f59e0b; font-weight: 600; }
.acc-btn-xs { padding: 5px 14px; font-size: 13px; }
.acc-text-muted { color: var(--text-secondary); }
.acc-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.acc-shipping-body { font-size: 14px; line-height: 1.9; }
.acc-history-list { display: flex; flex-direction: column; gap: 10px; }
.acc-history-row { display: flex; gap: 12px; font-size: 13px; }
.acc-history-time { color: var(--text-secondary); white-space: nowrap; }
.acc-summary-title { margin: 0 0 10px; font-size: 16px; }
.acc-green { color: #10b981; }
.acc-summary-note { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.acc-summary-note-line { margin-top: 6px; line-height: 1.7; }
.acc-refund-card { margin-top: 16px; }
.acc-footnote { font-size: 12px; color: var(--text-secondary); margin: 10px 0 0; }
.acc-review-list { display: flex; flex-direction: column; gap: 14px; }
.acc-review-card { padding: 18px; }
.acc-review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.acc-review-main { display: flex; gap: 14px; align-items: center; min-width: 0; }
.acc-review-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.acc-review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acc-review-info { min-width: 0; }
.acc-review-title { font-weight: 700; font-size: 15px; color: var(--text); }
.acc-review-stars { font-size: 13px; color: #f59e0b; letter-spacing: 2px; margin-top: 4px; }
.acc-review-date { color: var(--text-secondary); margin-left: 8px; letter-spacing: 0; }
.acc-delete-btn { border: 1px solid var(--border); background: none; color: var(--text-secondary); font-size: 13px; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.acc-review-content { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--text); }
.acc-review-images { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.acc-review-image { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.acc-notice { margin-bottom: 12px; }
.acc-section-title-xs { margin: 0 0 10px; font-size: 16px; }
.acc-para { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin: 0 0 12px; }
.acc-request-time { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.acc-empty-note { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.acc-list-col { display: flex; flex-direction: column; gap: 14px; }
.acc-rma-card { padding: 16px 18px; }
.acc-rma-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.acc-rma-main { display: flex; align-items: center; gap: 12px; }
.acc-rma-icon { width: 48px; height: 48px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.acc-rma-name { font-weight: 600; }
.acc-rma-sub { font-size: 12px; color: var(--text-secondary); }
.acc-rma-right { display: flex; align-items: center; gap: 12px; }
.acc-rma-meta { font-size: 13px; }
.acc-rma-comment { font-size: 13px; color: var(--text-secondary); margin-top: 10px; background: var(--bg); padding: 10px 14px; border-radius: 8px; }
.acc-rma-history { font-size: 12px; color: var(--text-secondary); margin-top: 10px; }
.acc-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.acc-option { margin: 0; cursor: pointer; }
.acc-option-start { align-items: flex-start; }
.acc-item-info { flex: 1; }
.acc-qty-row { display: flex; align-items: center; gap: 6px; }
.acc-qty-input { width: 64px; }
.acc-rma-product-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acc-rma-product-right { margin-left: auto; text-align: right; }
.acc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.acc-info-body { font-size: 14px; line-height: 2; }
.acc-form-note { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; }
.acc-form-col { display: flex; flex-direction: column; gap: 10px; }
.acc-pending-note { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.8; }
.acc-note-xs { font-size: 12px; }
.acc-history-comment { color: var(--text-secondary); margin-top: 2px; }
.acc-summary-box { margin-top: 16px; }
@media (max-width: 900px) {
    .acc-detail-grid { grid-template-columns: 1fr; }
    .acc-info-grid { grid-template-columns: 1fr; }
}
.track-wrap { max-width: 860px; margin: 0 auto; }
.track-form { background: var(--card, #fff); border: 1px solid var(--border, #eee); border-radius: 12px; padding: 24px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.track-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #555; }
.track-field input { width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; }
.track-field input:focus { border-color: var(--primary); }
.track-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-top: 12px; }
.track-result { margin-top: 20px; }
.track-sub { color: #777; font-size: 14px; margin-bottom: 16px; }
.track-btn { height: 42px; }
.acc-pay-link { margin-left: auto; white-space: nowrap; }
.acc-track-no { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 720px) { .track-form { grid-template-columns: 1fr; } }
.cs-center { text-align: center; padding: 40px 0; }
.cs-icon { font-size: 64px; }
.cs-h1 { font-size: 24px; margin: 16px 0 8px; }
.cs-muted { color: #777; }
.cs-order-no { font-size: 22px; font-weight: 800; color: var(--primary); margin: 12px 0; }
.cs-amount-line { margin-top: 8px; }
.cs-strong { color: #1a1a1a; }
.cs-pay-banner { max-width: 520px; margin: 18px auto 0; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; padding: 12px 16px; border-radius: 10px; font-size: 13px; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-nowrap { white-space: nowrap; }
.cs-card-wrap { max-width: 520px; margin: 28px auto 0; text-align: left; }
.cs-summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; gap: 12px; }
.cs-label { color: #777; flex-shrink: 0; } /* 值很長（如自取點地址）時標籤不被壓成一字一行 */
.cs-total-row { border-top: 1px solid #eee; margin-top: 8px; }
.cs-total-label { font-weight: 700; }
.cs-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pg-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.pg-alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.pg-alert-info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1D4ED8; }
.pg-wrap { max-width: 640px; margin: 0 auto; }
.pg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pg-icon { font-size: 34px; }
.pg-title { font-size: 20px; font-weight: 800; }
.pg-sub { font-size: 13px; color: #777; }
.pg-row { display: flex; justify-content: space-between; font-size: 14px; gap: 12px; }
.pg-row-top { border-top: 1px dashed #ddd; padding: 16px 0; }
.pg-row-bottom { padding-bottom: 16px; }
.pg-label { color: #777; }
.pg-strong { font-size: 18px; color: var(--primary, #b91c1c); }
.pg-note { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; }
.pg-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.pg-btn-flex { flex: 1; min-width: 180px; }
.pg-result { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-top: 14px; }
.pg-tip { color: #555; font-size: 14px; margin-bottom: 18px; }
.pg-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.promo-page-title { margin-top: 0; }
.promo-page-sub { color: var(--text-secondary); margin-bottom: 28px; }
.promo-group-list { display: flex; flex-direction: column; gap: 24px; }
.promo-group-card { padding: 20px; }
.promo-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.promo-group-icon { font-size: 24px; }
.promo-group-name { font-size: 17px; font-weight: 800; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.promo-item { padding: 16px; display: block; transition: all .2s; }
.promo-item:hover { transform: translateY(-3px); box-shadow: var(--clay-shadow-hover, 6px 6px 0 var(--clay-border)); }
.promo-item-head { display: flex; justify-content: space-between; align-items: flex-start; }
.promo-item-name { font-size: 15px; }
/* 促銷活動列表頁的標籤：原本硬寫粉紅，令 .badge-color-* 類別（各活動原色）失效 */
.promo-badge { background: var(--badge-color, #ff8c94); color: var(--badge-text, #fff); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 20px; white-space: nowrap; }
.promo-badge-empty { background: #eee; color: #999; }
.promo-item-desc { font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.6; }
.promo-go { font-size: 13px; color: var(--clay-accent, #e25c5c); font-weight: 700; margin-top: 10px; }
.badge-color-violet { --badge-color: #7c3aed; }
.badge-color-blue { --badge-color: #2563eb; }
.badge-color-red { --badge-color: #e60012; }
.badge-color-green { --badge-color: green; }
.badge-color-orange { --badge-color: orange; }
.fs-cd-dim { opacity: .85; }
.promo-sec-title { margin-top: 28px; }
.fs-fill-gradient { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
/* 優惠概覽（購物車）與結帳頁優惠行：標題行（名稱靠左、金額靠右）＋縮排說明行 */
.ps-row { padding: 8px 0; font-size: 13.5px; }
.ps-row + .ps-row { border-top: 1px dashed rgba(99, 102, 241, .12); }
.ps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.ps-ok .ps-name::before { content: '✔ '; }
.ps-name { font-weight: 700; color: #333; }
.ps-ok .ps-name { color: #16a34a; }
.ps-detail { margin: 3px 0 0 1.5em; color: #777; }
.ps-amount { color: #16a34a; font-weight: 700; white-space: nowrap; }
.ps-link { text-decoration: none; border-bottom: 1px dashed rgba(99, 102, 241, .45); }
.ps-link:hover { color: var(--primary); border-bottom-color: currentColor; }
.co-earn-points { margin-top: 4px; font-size: 12px; color: #888; }
.card-gap-b { margin-bottom: 14px; }
.pcard-title { font-size: 16px; font-weight: 700; color: var(--primary); }
.pcard-sub { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.8; }
.pcard-note { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.pcard-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pcard-price-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 12px; background: #fafafa; border-radius: 6px; }
.pcard-old-price { color: var(--text-secondary); text-decoration: line-through; font-size: 12px; margin-right: 8px; }
.pcard-price { color: var(--primary); }
.plp-h1 { font-size: 26px; font-weight: 800; margin: 0; }
.empty-grid { grid-column: 1 / -1; }
.cat-desc { color: var(--clay-text-secondary, #777); line-height: 1.7; margin: 6px 0 0; }
.fav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.fav-title { font-family: var(--clay-font-heading); font-size: 24px; font-weight: 800; margin: 0; }
.fav-title span { background: linear-gradient(135deg, var(--clay-primary), var(--clay-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.fav-footer { margin-top: 16px; }
.search-block { margin-bottom: 20px; }
.search-h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.search-sub { color: var(--clay-text-secondary, #777); }
.search-hot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.search-hot-label { font-size: 13px; color: var(--clay-text-secondary, #777); font-weight: 600; }
.search-pill { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--clay-border, #ddd); font-size: 13px; color: var(--clay-text-secondary, #666); transition: all .2s; background: var(--clay-card, #fff); }
.search-pager { margin-top: 14px; }
.pd-sku { color: #999; margin-left: 10px; }
.pd-add-form { display: flex; flex-direction: column; align-items: flex-start; }
.pd-buy-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rs-gold { color: #f59e0b; letter-spacing: 2px; }
.rs-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-review-name { font-weight: 700; font-size: 14px; }
.rs-review-stars { color: #f59e0b; letter-spacing: 2px; font-size: 13px; }
.rs-review-date { color: var(--text-secondary); font-size: 12px; }
.rs-review-body { margin-top: 8px; font-size: 14px; line-height: 1.7; }
.rs-review-images { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rs-review-image { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.acc-empty-md { padding: 40px 0; }
.brand-h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.brand-h1-sm { margin-bottom: 4px; }
.brand-sub { color: var(--clay-text-secondary, #777); margin-bottom: 24px; }
.brand-sub-sm { color: var(--clay-text-secondary, #777); font-size: 13px; }
.brand-letter-block { margin-bottom: 28px; }
.brand-letter-title { font-size: 18px; font-weight: 800; margin-bottom: 14px; color: var(--clay-primary); }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.brand-empty { padding: 60px 20px; text-align: center; background: var(--clay-card); border: var(--clay-border-width) solid var(--clay-border); border-radius: var(--clay-radius); }
.brand-empty-icon { font-size: 40px; margin-bottom: 12px; }
.brand-empty-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.brand-empty-sub { font-size: 13px; color: var(--clay-text-secondary); }
.brand-show-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.brand-show-logo { width: 64px; height: 64px; border-radius: var(--clay-radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--clay-font-heading); font-size: 26px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary, #A855F7), var(--clay-accent)); overflow: hidden; box-shadow: var(--clay-shadow); }
.brand-show-logo img { width: 100%; height: 100%; object-fit: cover; }

/* 前台圖片 LOGO：後台上傳後替換文字店名（無圖維持文字） */
.clay-logo { display: inline-flex; align-items: center; }
.clay-logo .clay-logo-img,
.clay-footer-logo .clay-footer-logo-img { width: auto; height: auto; object-fit: contain; }
.clay-logo .clay-logo-img { max-width: 380px; max-height: 100px; }
.clay-footer-logo .clay-footer-logo-img { max-width: 260px; max-height: 60px; }
@media (max-width: 767px) {
    .clay-logo .clay-logo-img { max-width: 60vw; max-height: 56px; }
    .clay-footer-logo .clay-footer-logo-img { max-width: 180px; max-height: 44px; }
}

/* ===== 模組：主視覺組合（1 大 + 2 小） ===== */
.pet-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: stretch;
}
.phs-main {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    min-height: var(--pet-hero-h, 460px);
    background: var(--clay-card, #efede7);
    color: #fff;
}
.phs-main > picture,
.phs-small > picture {
    position: absolute;
    inset: 0;
}
.phs-main img,
.phs-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.phs-main-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 64px 42px 34px;
    background: linear-gradient(180deg, transparent 30%, rgba(8, 22, 19, .74));
}
.phs-badge {
    background: var(--clay-cta, #c98a2d);
    color: #fff;
    font-size: 11px;
    letter-spacing: .14em;
    padding: 6px 14px;
    border-radius: 999px;
}
.phs-main-cap b {
    font-size: 30px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: .04em;
    margin-top: 4px;
    white-space: pre-line;
}
.phs-main-cap i {
    font-style: normal;
    font-size: 13.5px;
    opacity: .86;
    max-width: 420px;
}
.phs-main-cap em {
    font-style: normal;
    margin-top: 10px;
    background: var(--clay-cta, #c98a2d);
    color: #fff;
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 14px;
}
.phs-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
}
.phs-small {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    min-height: calc((var(--pet-hero-h, 460px) - 18px) / 2);
    background: var(--clay-card, #efede7);
    color: #fff;
}
.phs-small-cap {
    position: absolute;
    left: 18px;
    right: 14px;
    bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(180deg, transparent, rgba(8, 22, 19, .68));
    padding: 26px 16px 12px;
    border-radius: 0 0 18px 18px;
}
.phs-small-cap b {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .06em;
}
.phs-small-cap i {
    font-style: normal;
    font-size: 11px;
    opacity: .84;
}
@media (max-width: 980px) {
    .pet-hero-split {
        grid-template-columns: 1fr;
    }
    .phs-side {
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
    }
    .phs-small {
        min-height: 220px;
    }
}
@media (max-width: 620px) {
    .phs-side {
        grid-template-columns: 1fr;
    }
    .phs-main-cap {
        padding: 44px 24px 24px;
    }
    .phs-main-cap b {
        font-size: 24px;
    }
}

/* ===== 模組：會員橫條 ===== */
.pet-member-bar {
    --mb-bg: var(--clay-primary, #0e4b47);
    --mb-ink: #ffffff;
    --mb-sub: rgba(255, 255, 255, .78);
    --mb-hl: #f4c77d;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 30px 36px;
    background: var(--mb-bg);
    color: var(--mb-ink);
}
.pet-member-bar.bg-brand {
    --mb-bg: var(--clay-primary, #0e4b47);
}
.pet-member-bar.bg-light {
    --mb-bg: var(--clay-card, #f6f5f1);
    --mb-ink: var(--clay-text, #1d2622);
    --mb-sub: rgba(29, 38, 34, .66);
    --mb-hl: var(--clay-cta, #b07d35);
}
.pmb-copy {
    flex: 1;
    min-width: 230px;
}
.pmb-copy h3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.5;
}
.pmb-copy p {
    font-size: 13px;
    color: var(--mb-sub);
    margin-top: 4px;
    max-width: 440px;
}
.pmb-perks {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.pmb-perk {
    display: flex;
    flex-direction: column;
}
.pmb-perk b {
    font-size: 17px;
    font-weight: 800;
    color: var(--mb-hl);
}
.pmb-perk span {
    font-size: 11.5px;
    color: var(--mb-sub);
}
.pmb-cta {
    background: var(--clay-cta, #c98a2d);
    color: #fff;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 14px;
    white-space: nowrap;
}
.pmb-cta:hover {
    opacity: .9;
}
@media (max-width: 640px) {
    .pet-member-bar {
        padding: 26px 22px;
        gap: 18px;
    }
    .pmb-perks {
        gap: 20px;
    }
}


/* ===== 手機結帳底部固定提交欄 ===== */
.checkout-mobile-bar,
.checkout-mobile-spacer { display: none; }
@media (max-width: 900px) {
    #submitBtn { display: none; }
    .checkout-mobile-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        align-items: center;
        gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--clay-border);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
    }
    .checkout-mobile-total {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .checkout-mobile-total span { font-size: 12px; color: var(--clay-text-secondary, #666); }
    .checkout-mobile-total strong { font-size: 18px; }
    .checkout-mobile-bar .btn { flex: none; }
    .checkout-mobile-spacer { display: block; height: calc(76px + env(safe-area-inset-bottom)); }
}


/* 底部購買/結帳欄必須浮在 cookie 同意層與頁腳之上 */
.main:has(.cart-actions),
.main:has(.detail-mobile-bar),
.main:has(.checkout-mobile-bar) { z-index: auto; }

/* 多貨幣結帳：顯示貨幣是參考，實際收款固定 HKD */
.co-currency-note {
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    color: var(--clay-text-secondary, #8a8f98);
}
.co-currency-note b {
    color: var(--clay-text, #1f2329);
}
.checkout-mobile-hkd {
    font-size: 11px;
    color: var(--clay-text-secondary, #8a8f98);
}
.pg-ref-note {
    margin-top: 4px;
    text-align: right;
    font-size: 12px;
    color: #8a8f98;
}