/* ==========================================================================
   MIST-TW (閫犻湩鑰? 鈥?鏃ョ郴闇ф閬稿搧棰?Design System (Route B: TailPress / WP Theme)
   Preserves original Japanese blush-pink & deep azuki wine palette (#FFF5F8,
   #F7C6CE, #5C2A3B, #4B1E30) while eliminating Astra (#046bd2) & WPR (#605BE5)
   plugin color leakage.
   ========================================================================== */

:root {
  /* Core Japanese Sakura-Mist Palette (鍘熸湁鏃ョ郴绮夐湩锛嬫繁閰掔磪璀樺垾绯荤当鍖? */
  --mist-bg-page: #FFF5F8;          /* 鍘熺珯鑳屾櫙绮夐湩鐧?*/
  --mist-bg-card: #FFFFFF;          /* 绱旂櫧鍜岀礄鍗＄墖搴?*/
  --mist-bg-soft: #FDF0F4;          /* 鍦栦竴鍒嗛鍗℃殩绮夐湩搴曡壊 */
  --mist-bg-subtle: #F9E5EC;        /* 娆＄礆妯欑堡鑸囬伕鍙栧簳鑹?*/
  
  --mist-wine: #5C2A3B;             /* 鍘熺珯涓昏壊锛氭繁灏忚眴閰掔磪 (Azuki Wine) */
  --mist-wine-dark: #4B1E30;        /* 鍘熺珯娣辫壊锛氭績鍘氱传閰掔磪 */
  --mist-wine-light: #7D3F54;       /* 杓斿姪閰掔磪鎳稿仠鎱?*/
  
  --mist-sakura: #F7C6CE;           /* 鍘熺珯娅昏姳绮夐倞妗嗚垏閲嶉粸鑹?*/
  --mist-sakura-deep: #E598A6;      /* 鍦栦竴鍒嗛瀛楅珨鎻忛倞鐜懓绮?*/
  --mist-sakura-text: #F4A9B8;      /* 鍦栦竴鍒嗛瀛楅珨鍏у～绮?*/

  --mist-text-main: #2D1820;        /* 涓诲収鏂囷細娣辩剻鑼堕粦锛堝彇浠ｅ埡鐪肩磾榛戯級 */
  --mist-text-muted: #6E525C;       /* 娆¤瑾槑鏂囧瓧 */
  --mist-text-light: #9E828C;       /* 杓斿姪鎻愮ず鑸囧師鍍瑰埅闄ょ窔 */
  --mist-border: #F2D5DD;           /* 鏌斿拰娅荤矇鍒嗗壊绶?*/
  --mist-border-card: #8E8285;      /* 鍦栦竴鍒嗛妗嗗妗嗚唱鎰熺伆瑜?*/

  /* Functional & Channel Tokens */
  --mist-line: #06C755;             /* LINE 瀹樻柟甯宠櫉妯欐簴缍?*/
  --mist-line-dark: #05A847;
  --mist-line-soft: #ECFDF3;
  --mist-tg: #229ED9;               /* Telegram 钘?*/
  --mist-points: #00875A;           /* 鍘熺珯 +3 榛?缍犺壊妯欑堡 */
  --mist-points-bg: #F0FDF4;
  --mist-warn: #D97706;
  --mist-warn-bg: #FFFBEB;
  --mist-danger: #E11D48;

  /* Shadows & Radius */
  --mist-shadow-sm: 0 2px 10px rgba(92, 42, 59, 0.05);
  --mist-shadow-md: 0 8px 24px rgba(92, 42, 59, 0.09);
  --mist-shadow-lg: 0 16px 40px rgba(75, 30, 48, 0.14);
  --mist-radius-sm: 8px;
  --mist-radius-md: 12px;
  --mist-radius-lg: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: "Noto Sans TC", "PingFang TC", "Hiragino Kaku Gothic ProN", "Microsoft JhengHei", sans-serif;
  background-color: var(--mist-bg-page);
  color: var(--mist-text-main);
}

body {
  margin: 0;
  background-color: var(--mist-bg-page);
  color: var(--mist-text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   鍦栦竴銆屽叚澶у垎椤炲崱鐗囥€嶅師姹佸師鍛充繚鐣欒垏鏃ョ郴鐒￠殰绀欏挤鍖?(.mist-cat-card)
   Uses real mist-tw.cc .webp background + CSS smoky mist & outlined rose text
   fallback so it always matches Figure 1 while remaining crisp & accessible.
   ========================================================================== */

.mist-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.94;
  min-height: 170px;
  background-color: #FCF2F4;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid #5A5355;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.92),
    inset 0 0 0 3.5px rgba(130, 120, 123, 0.45),
    0 6px 16px rgba(92, 42, 59, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  text-decoration: none;
  user-select: none;
}

.mist-cat-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--mist-wine);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.95),
    inset 0 0 0 3.5px rgba(229, 152, 166, 0.65),
    0 14px 28px rgba(92, 42, 59, 0.15);
}

.mist-cat-card:focus-visible {
  outline: 3px solid var(--mist-wine);
  outline-offset: 2px;
}

/* Built-in CSS fallback replicating Figure 1's vertical smoke plume + outlined pink text
   in case external WebP image is slow or blocked; hidden automatically when real WebP loads */
.mist-cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 32% 85% at 50% 52%, rgba(168, 152, 154, 0.36) 0%, rgba(190, 175, 177, 0.18) 48%, transparent 78%),
    radial-gradient(circle at 46% 30%, rgba(155, 140, 142, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 55% 72%, rgba(150, 136, 138, 0.25) 0%, transparent 50%),
    linear-gradient(180deg, #FDF2F4 0%, #FCECEF 100%);
  z-index: 0;
}

.mist-cat-card.has-remote-bg::before {
  opacity: 0;
}

.mist-cat-fallback-title {
  position: relative;
  z-index: 1;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.06em;
  text-align: center;
  color: #FCE8EC;
  -webkit-text-stroke: 2.5px #E28798;
  paint-order: stroke fill;
  text-shadow: 0 2px 8px rgba(138, 75, 88, 0.18);
  pointer-events: none;
}

/* When the real mist-tw.cc WebP image loads, hide the duplicate fallback text
   because the WebP already has the exact Figure 1 outlined text baked in */
.mist-cat-card.has-remote-bg .mist-cat-fallback-title {
  opacity: 0;
}

/* Subtle hover pill at bottom of category card 鈥?hidden by default so the 6 cards stay 100% clean */
.mist-cat-meta-pill {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(92, 42, 59, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mist-cat-card:hover .mist-cat-meta-pill {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   SKU Flavor Pill & Back-in-Stock LINE Subscription States
   ========================================================================== */

.sku-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1.5px solid var(--mist-border);
  transition: all 0.16s ease;
  cursor: pointer;
  text-align: left;
}

.sku-pill:hover {
  border-color: var(--mist-sakura-deep);
  background: #FFFBFD;
  box-shadow: 0 4px 12px rgba(92, 42, 59, 0.06);
}

.sku-pill.is-selected {
  border-color: var(--mist-wine);
  background: var(--mist-bg-soft);
  box-shadow: 0 0 0 1px var(--mist-wine);
}

.sku-pill.is-oos {
  background: #FAF6F7;
  border-style: dashed;
  border-color: #D9C3C9;
}

.sku-pill.is-oos:hover {
  border-color: var(--mist-line);
  background: #F4FBF7;
}

.sku-pill.is-subscribed {
  background: #ECFDF3;
  border-style: solid;
  border-color: var(--mist-line);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #FFF5F8;
}
::-webkit-scrollbar-thumb {
  background: #E5B8C4;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5C2A3B;
}

/* Marquee animation */
@keyframes mistMarquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.mist-marquee-track {
  display: flex;
  width: max-content;
  animation: mistMarquee 28s linear infinite;
}

.mist-marquee-track:hover {
  animation-play-state: paused;
}

/* Pulse dot for LINE Online & Back-in-stock */
@keyframes linePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.line-pulse-dot {
  animation: linePulse 2s infinite ease-in-out;
}

/* Hide scrollbar for clean pill tab strips */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   馃摫 鎵嬫绔姗熼爯瑕芥ā鎿櫒 (.is-mobile-mode)
   璁撴キ涓诲湪闆昏叇澶ц灑骞曚笂涔熻兘涓€閸靛垏鎻?390px iPhone 鎵嬫绔瑙掕垏搴曢儴 App 灏庤鍒?   ========================================================================== */

#mist-viewport-wrapper.is-mobile-mode {
  background: radial-gradient(circle at 50% 20%, #4B1E30 0%, #240D16 100%);
  padding: 20px 10px 32px;
  align-items: center;
  justify-content: flex-start;
}

#mist-viewport-wrapper.is-mobile-mode #mist-viewport-shell {
  width: 390px;
  max-width: 100%;
  border-radius: 40px;
  border: 9px solid #1F1217;
  box-shadow:
    0 0 0 2px #7D3F54,
    0 28px 70px rgba(0, 0, 0, 0.55);
  overflow-x: hidden;
  position: relative;
  background-color: var(--mist-bg-page);
}

/* Force all sm:/md:/lg: flex-row & multi-column desktop breakpoints to stack cleanly inside 390px simulator */
#mist-viewport-wrapper.is-mobile-mode .sm\:flex-row,
#mist-viewport-wrapper.is-mobile-mode .md\:flex-row,
#mist-viewport-wrapper.is-mobile-mode .lg\:flex-row {
  flex-direction: column !important;
  align-items: stretch !important;
}

#mist-viewport-wrapper.is-mobile-mode .lg\:grid-cols-12,
#mist-viewport-wrapper.is-mobile-mode .md\:grid-cols-12,
#mist-viewport-wrapper.is-mobile-mode .sm\:grid-cols-12,
#mist-viewport-wrapper.is-mobile-mode .lg\:grid-cols-4,
#mist-viewport-wrapper.is-mobile-mode .md\:grid-cols-4,
#mist-viewport-wrapper.is-mobile-mode .md\:grid-cols-3,
#mist-viewport-wrapper.is-mobile-mode .sm\:grid-cols-3,
#mist-viewport-wrapper.is-mobile-mode .md\:grid-cols-2,
#mist-viewport-wrapper.is-mobile-mode .sm\:grid-cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

#mist-viewport-wrapper.is-mobile-mode .lg\:col-span-8,
#mist-viewport-wrapper.is-mobile-mode .lg\:col-span-7,
#mist-viewport-wrapper.is-mobile-mode .lg\:col-span-5,
#mist-viewport-wrapper.is-mobile-mode .lg\:col-span-4,
#mist-viewport-wrapper.is-mobile-mode .md\:col-span-7,
#mist-viewport-wrapper.is-mobile-mode .md\:col-span-5,
#mist-viewport-wrapper.is-mobile-mode .md\:col-span-2,
#mist-viewport-wrapper.is-mobile-mode .sm\:col-span-5,
#mist-viewport-wrapper.is-mobile-mode .sm\:col-span-2 {
  grid-column: span 1 / span 1 !important;
}

/* Explicit 3-column & 2-column mobile grids inside the 390px simulator */
#mist-viewport-wrapper.is-mobile-mode .mist-mobile-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#mist-viewport-wrapper.is-mobile-mode .mist-mobile-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#mist-viewport-wrapper.is-mobile-mode .mist-mobile-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#mist-viewport-wrapper.is-mobile-mode .mist-mobile-grid-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

#mist-viewport-wrapper.is-mobile-mode .lg\:flex,
#mist-viewport-wrapper.is-mobile-mode .md\:flex,
#mist-viewport-wrapper.is-mobile-mode .md\:block,
#mist-viewport-wrapper.is-mobile-mode .sm\:inline {
  display: none !important;
}

#mist-viewport-wrapper.is-mobile-mode .lg\:hidden,
#mist-viewport-wrapper.is-mobile-mode .sm\:hidden {
  display: inline-flex !important;
}

/* 6 Category Cards in 3x2 Mobile Grid: exact square proportions matching screenshot */
#mist-viewport-wrapper.is-mobile-mode .mist-cat-card {
  aspect-ratio: 1 / 1;
  min-height: 96px;
  border-radius: 14px;
  border-width: 1.5px;
}
@media (max-width: 768px) {
  .mist-cat-card {
    aspect-ratio: 1 / 1;
    min-height: 96px;
    border-radius: 14px;
    border-width: 1.5px;
  }
}

#mist-viewport-wrapper.is-mobile-mode .mist-cat-fallback-title {
  font-size: 1.15rem;
  line-height: 1.18;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1.2px #E28798;
}
@media (max-width: 768px) {
  .mist-cat-fallback-title {
    font-size: 1.15rem;
    line-height: 1.18;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 1.2px #E28798;
  }
}

#mist-viewport-wrapper.is-mobile-mode .mist-cat-meta-pill {
  display: none !important;
}
@media (max-width: 768px) {
  .mist-cat-meta-pill {
    display: none !important;
  }
}

#mist-viewport-wrapper.is-mobile-mode .mist-floating-hub {
  bottom: 20px !important;
  right: 12px !important;
}
@media (max-width: 768px) {
  .mist-floating-hub {
    bottom: 20px !important;
    right: 12px !important;
  }
}

/* =========================================================================
   8. 鍊熼憫 dtttt1234.cc 鎵嬫绔珮杞夋彌鐜囪瑕虹祫浠讹紙铻嶅悎鏃ョ郴闇ф閰嶈壊锛?   ========================================================================= */

/* 鍟嗗搧鍗″彸涓婅 45 搴︺€岀啽閵枫€嶆枩瑙掔窞甯?(.hot-badge) */
.mist-hot-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 52px 52px 0;
  border-color: transparent #E11D48 transparent transparent;
  z-index: 10;
  pointer-events: none;
}

.mist-hot-ribbon-text {
  position: absolute;
  top: 7px;
  right: -43px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  transform: rotate(45deg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* 鍟嗗搧鍚嶇ū涓婃柟灞呬腑淇冮姺妯欑堡 (.product-name3) */
.mist-name3-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #5C2A3B 0%, #3E1826 100%);
  color: #FFE4EC;
  border: 1px solid #F7C6CE;
  box-shadow: 0 2px 6px rgba(92, 42, 59, 0.14);
}

/* 鍟嗗搧瑭虫儏闋侊細闆欐瑒 鍞児 | 搴瓨 璩囪▕妗?(.price-stock-box 鍊熼憭 dtttt1234.cc) */
.price-stock-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #FFF5F8;
  border: 1px solid #F7C6CE;
  border-radius: 16px;
  padding: 12px 16px;
}

/* 鍟嗗搧瑭虫儏闋侊細娴佸厜淇冮姺鍗＄墖 (.promotion-card) */
.mist-promo-shimmer-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #5C2A3B 0%, #3E1826 100%);
  border: 1.5px solid #F7C6CE;
  border-radius: 16px;
  color: #FFF5F8;
  box-shadow: 0 4px 16px rgba(92, 42, 59, 0.16);
}

/* 鍟嗗搧瑭虫儏闋侊細瑕忔牸閬告搰鎸夐垥缍叉牸鑸囩己璨ㄦ嚫娴皬瑙掓 (.spec-btn.notify-subscribe) */
.mist-spec-btn {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid #E5B8C4;
  color: #2D1820;
  padding: 11px 8px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  line-height: 1.3;
  user-select: none;
}

.mist-spec-btn:hover {
  border-color: #5C2A3B;
  background: #FFF5F8;
}

.mist-spec-btn.active {
  background: #5C2A3B;
  color: #FFFFFF;
  border-color: #5C2A3B;
  box-shadow: 0 4px 12px rgba(92, 42, 59, 0.28);
}

.mist-spec-btn.notify-subscribe {
  background: #FFF0F3;
  color: #BE123C;
  border: 1.5px dashed #F43F5E;
  overflow: visible;
}

.mist-spec-btn.notify-subscribe::after {
  content: "瑷傞柋鍒拌波閫氱煡";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  color: #FFFFFF;
  font-size: 9px;
  padding: 1.5px 6px;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(225, 29, 72, 0.35);
  z-index: 5;
}

.mist-spec-btn.notify-subscribed {
  background: #ECFDF3;
  color: #057A34;
  border: 1.5px solid #06C755;
  overflow: visible;
}

.mist-spec-btn.notify-subscribed::after {
  content: "鉁撳凡瑷傞柋閫氱煡";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #06C755 0%, #059669 100%);
  color: #FFFFFF;
  font-size: 9px;
  padding: 1.5px 6px;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(6, 199, 85, 0.35);
  z-index: 5;
}

/* =========================================================================
   鍦栦笁瑷▓锛氱穵婀?4 娆勫彛鍛抽伕鎿囩恫鏍?+ SOLD OUT 鏂滅磱 + 鍥よ波鏁搁噺蹇嵎閸?   ========================================================================= */
.mist-flavor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}

@media (min-width: 640px) {
  .mist-flavor-grid {
    gap: 8px;
    max-height: 310px;
  }
}

.mist-flavor-card {
  position: relative;
  aspect-ratio: 1 / 0.88;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  background: #FFFFFF;
  border: 1.5px solid #F0D5DD;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  text-align: center;
}

.mist-flavor-card:hover {
  border-color: #5C2A3B;
  background: #FFF5F8;
}

.mist-flavor-card.is-selected {
  background: #5C2A3B;
  border-color: #5C2A3B;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(92, 42, 59, 0.3);
}

.mist-flavor-card.is-selected .flavor-name {
  color: #FFFFFF !important;
  font-weight: 900;
}

.mist-flavor-card .flavor-name {
  font-size: 11px;
  font-weight: 800;
  color: #2D1820;
  line-height: 1.2;
  word-break: break-all;
}

@media (min-width: 640px) {
  .mist-flavor-card .flavor-name {
    font-size: 12px;
  }
}

/* 缂鸿波 SOLD OUT锛氭枩绶氭绱嬫殫搴?(鍊熼憭鍦栦笁) */
.mist-flavor-card.sold-out {
  background: repeating-linear-gradient(
    -45deg,
    #F8F3F5,
    #F8F3F5 8px,
    #EFE7EA 8px,
    #EFE7EA 16px
  );
  border: 1.5px dashed #D6B8C2;
  opacity: 0.85;
}

.mist-flavor-card.sold-out .flavor-name {
  color: #8C7079;
}

.mist-flavor-card .sold-out-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: #BE123C;
  background: #FFE4E6;
  border: 1px solid #FDA4AF;
  padding: 1.5px 5px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  margin-top: 3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mist-flavor-card.is-subscribed .sold-out-badge {
  color: #057A34;
  background: #ECFDF3;
  border-color: #A6F4C5;
}

/* 鍙ｅ懗鍙充笂瑙掓暩閲忚妯?(鏂逛究澶氶伕) */
.mist-flavor-card .qty-badge.hidden {
  display: none !important;
}

.mist-flavor-card .qty-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #06C755;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 鍦栦笁鍥よ波鏁搁噺蹇嵎鎸夐垥 (璨蜂笁鐩?/ 璨蜂簲鐩?/ 璨?0鐩? */
.mist-qty-preset-btn {
  flex: 1;
  padding: 8px 3px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1.5px solid #F0D5DD;
  color: #4B1E30;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

@media (min-width: 640px) {
  .mist-qty-preset-btn {
    padding: 9px 4px;
    font-size: 12px;
  }
}

.mist-qty-preset-btn:hover {
  background: #FFF5F8;
  border-color: #5C2A3B;
}

.mist-qty-preset-btn.active {
  background: #06C755;
  border-color: #06C755;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(6, 199, 85, 0.35);
}

/* =========================================================================
   鎵嬫绔皥灞惛搴曟搷浣滃垪鑸囩穵婀婇€氱煡姊濇ǎ寮?   ========================================================================= */
.mist-mobile-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  border-top: 1.5px solid #F7C6CE;
  padding: 8px 12px;
  box-shadow: 0 -4px 16px rgba(92, 42, 59, 0.1);
}

/* 杓曢噺棣栭爜璺戦Μ鍕曟厠閫氱煡鑶犲泭 (鍙栦唬鍐楅暦澶у崱鐗? */
.mist-compact-ticker {
  background: #FFF5F8;
  border: 1px solid #F7C6CE;
  border-radius: 999px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}


/* =========================================================================
   Standard Horizontal Landscape Hero Banner (橫式輪播圖)
   ========================================================================= */
.mist-horizontal-hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 420;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(92, 42, 59, 0.08);
  border: 1px solid #F7C6CE;
  background: #FFF2F5;
}
@media (max-width: 640px) {
  .mist-horizontal-hero-banner {
    aspect-ratio: 16 / 10.5;
    min-height: 235px;
    border-radius: 1.25rem;
  }
}

#mist-viewport-wrapper.is-mobile-mode .mist-horizontal-hero-banner {
  aspect-ratio: 16 / 10.5;
  min-height: 235px;
  border-radius: 1.25rem;
}
.mist-horizontal-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.mist-horizontal-hero-banner:hover img {
  transform: scale(1.015);
}

/* =========================================================================
   Innovative Guarantee Trust Hub (全新創新四大承諾設計 - 告別死板4卡片)
   ========================================================================= */
.mist-trust-ribbon {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7F9 100%);
  border: 1.5px solid #F7C6CE;
  border-radius: 1.5rem;
  box-shadow: 0 4px 16px -2px rgba(92, 42, 59, 0.06);
  transition: all 0.3s ease;
}
.mist-trust-ribbon:hover {
  border-color: #F43F5E;
  box-shadow: 0 6px 24px -2px rgba(225, 29, 72, 0.12);
}
.mist-trust-capsule {
  transition: transform 0.2s ease, background 0.2s ease;
}
.mist-trust-capsule:hover {
  transform: translateY(-2px);
  background: #FFFFFF;
}

/* =========================================================================
   Seamless Smooth Marquee Tickers (跑馬燈)
   ========================================================================= */
@keyframes mistMarqueeAnim {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mist-marquee-container {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
}

.mist-marquee-content {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  animation: mistMarqueeAnim 22s linear infinite;
  will-change: transform;
}

.mist-marquee-container:hover .mist-marquee-content {
  animation-play-state: paused;
}


/* =========================================================================
   20261113 Fixes: Header Logo, Cart Drawer Scrolling, Button Colors, Coupons
   ========================================================================= */

/* 1. 頂部標誌嚴格尺寸限制 (防止手機端圖片破版與文字重疊) */
#mist-header-brand-logo {
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (min-width: 640px) {
  #mist-header-brand-logo {
    height: 46px !important;
    max-height: 46px !important;
    max-width: 220px !important;
  }
}

/* 2. 右側滑動抽屜完整容器樣式 (確保滾動與按鈕顏色 100% 正常) */
#mist-cart-drawer {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

#mist-drawer-items-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

#mist-drawer-footer {
  flex-shrink: 0 !important;
}

#mist-drawer-footer .mist-cart-checkout-btn,
#mist-drawer-footer a,
#mist-drawer-footer button {
  background-color: #5C2A3B !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-shadow: 0 4px 12px rgba(92, 42, 59, 0.25) !important;
  transition: all 0.2s ease !important;
}

#mist-drawer-footer .mist-cart-checkout-btn:hover,
#mist-drawer-footer a:hover,
#mist-drawer-footer button:hover {
  background-color: #4B1E30 !important;
  color: #FFFFFF !important;
}

/* 3. 隱藏頂部錯位的優惠券，統一在右側點數與優惠券專區呈現 */
.woocommerce-before-checkout-form-coupons,
.wt-single-coupon-wrapper,
.wt_sc_single_coupon_parent,
.wt_sc_single_coupon,
.wt-coupon-code,
#wt_sc_coupon_wrapper {
  display: none !important;
}

/* 結帳頁右側專屬優惠券卡片樣式 */
.mist-coupon-card {
  transition: all 0.15s ease;
}
.mist-coupon-card:hover {
  border-color: #5C2A3B;
  background-color: #FFF5F8;
}

/* 4. 徹底隱藏多餘外掛產生的浮動圖示堆疊 */
.ilia-contact-stack {
  display: none !important;
}