/* ===== 活動拉炮標籤 ===== */
.market_type_a.is-event{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* 🎉 拉炮 icon */
.market_type_a.is-event::before{
  content:"🎉";
  font-size:16px;
  margin-left:8px;
  display:inline-block;
  animation:popShake 1.8s ease-in-out infinite;
}

/* 🎟 活動品文字 */
.market_type_a.is-event::after{
  content:"活動品";
  margin-left:6px;
  padding:3px 10px;
  font-size:12px;
  font-weight:600;
  border-radius:999px;

  background:linear-gradient(135deg,#fff1f2,#ffe4e6);
  border:1px solid #fb7185;
  color:#e11d48;
  white-space:nowrap;
}

/* 🎉 拉炮晃動動畫 */
@keyframes popShake{
  0%   { transform:rotate(-10deg) scale(1); }
  30%  { transform:rotate(8deg) scale(1.2); }
  60%  { transform:rotate(-6deg) scale(.95); }
  100% { transform:rotate(-10deg) scale(1); }
}

/* =====================================================
   MMC – 優惠券模組（暖色主導｜水平滑動穩定版）
===================================================== */

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

.mmc__card.is-claimed{
  position:relative;
  opacity:.55;
  filter:grayscale(.2);
}
.mmc__card.is-claimed .mmc__cap{
  background:#9ca3af;
  color:#fff;
}
.mmc__cap--claimed{
  background:#9ca3af;
}
.mmc__card.is-claimed .mmc__cta{
  background:#e5e7eb;
  color:#9ca3af;
  cursor:not-allowed;
  pointer-events:none;
}
.mmc__card.is-claimed .mmc__get{
  background:#9ca3af;
  cursor:not-allowed;
  pointer-events:none;
}
.mmc__card.is-claimed::after{
  content:"已領完";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:900;
  color:#6b7280;
  background:rgba(255,255,255,.75);
  letter-spacing:.2em;
  pointer-events:none;
}

.mmc{
  --radius-card: 14px;
  --radius-rail: 16px;

  --cap-from: #ED7A00;
  --cap-to:   #ED9A00;

  --accent-main: #f97316;
  --cta-bg: #fde68a;
  --cta-text: #78350f;

  --get-from: #ec4899;
  --get-to:   #fb7185;

  --bg-soft: #f7f7f8;
  --card-bg: #ffffff;
  --border-soft: #e5e7eb;
  --text-main: #111827;
  --text-muted: #6b7280;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               "Microsoft JhengHei", Arial;

  background:var(--bg-soft);
  border-radius:18px;
  padding:22px;
  color:var(--text-main);

  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;

  box-shadow:
    0 18px 36px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.05);
}

/* =====================================================
   Rail（箭頭 + 軌道）⚠️ 關鍵修正
===================================================== */
.mmc__rail{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px; /* ⭐ 防撐爆 */
  gap:10px;
  align-items:center;
  max-width:100%;
}

/* =====================================================
   左右箭頭
===================================================== */
.mmc__nav{
  width:44px;
  height:60px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:#ffffff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  font-weight:900;
  color:#374151;

  cursor:pointer;
  user-select:none;

  box-shadow:
    0 6px 14px rgba(0,0,0,.08),
    0 2px 4px rgba(0,0,0,.05);

  transition:.2s;
}
.mmc__nav--left::before{ content:"‹"; }
.mmc__nav--right::before{ content:"›"; }

.mmc__nav:hover{
  background:#f9fafb;
  transform:translateY(-1px);
}

/* ⭐ 只在手機隱藏箭頭 */
@media (max-width:768px){
  .mmc__nav{ display:none; }
  .mmc__rail{ grid-template-columns:1fr; }
}

/* =====================================================
   卡片軌道（距離要給這裡，不是 card）
===================================================== */
.mmc__cards{
  display:flex;
  gap:14px;
  overflow-x:auto;

  margin-top:18px;                 /* ⭐ 正確的距離位置 */
  padding:8px 8px 12px;

  background:#ffffff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-rail);

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  max-width:100%;
  box-sizing:border-box;
}

/* scrollbar */
.mmc__cards::-webkit-scrollbar{ height:10px; }
.mmc__cards::-webkit-scrollbar-thumb{
  background:#e2e8f0;
  border-radius:999px;
}

/* =====================================================
   Coupon Card（170px 固定）
===================================================== */
.mmc__card{
  min-width:170px;
  max-width:170px;

  background:var(--card-bg);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-card);

  box-shadow:0 12px 30px rgba(15,23,42,.06);
  overflow:hidden;

  scroll-snap-align:start;
  display:flex;
  flex-direction:column;

  margin-top:0;            /* ⭐ 防止歷史遺毒 */
  box-sizing:border-box;

  transition:.25s;
}

.mmc__card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(15,23,42,.10);
}

/* =====================================================
   上標 / 內容 / CTA
===================================================== */
.mmc__cap{
  background:linear-gradient(135deg,var(--cap-from),var(--cap-to));
  color:#fff;
  font-size:12px;
  font-weight:900;
  padding:8px;
  text-align:center;
}

.mmc__body{
  padding:12px 10px;
  text-align:center;
}

.mmc__kind{ font-size:13px; font-weight:900; }

.mmc__rule{
  font-size:12px;
  color:var(--text-muted);
  margin:4px 0 6px;
}

.mmc__off{
  color:var(--accent-main);
  font-weight:900;
}
.mmc__off span{ font-size:22px; }

.mmc__cta{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--cta-bg);
  color:var(--cta-text);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

/* =====================================================
   Footer – 領取
===================================================== */
.mmc__get{
  margin-top:auto;
  border:0;
  padding:10px;
  background:linear-gradient(135deg,var(--get-from),var(--get-to));
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

/* =====================================================
   Shop 區塊
===================================================== */
.mmc__shop{
  padding-top:14px;
  margin-top:16px;
}

.mmc__shopName{
  font-size:15px;
  font-weight:900;
}

/* 逛店按鈕 */
.mmc__shopLink{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 12px;
  font-size:13px;
  font-weight:600;

  color:#2563eb;
  background:#ffffff;
  border:1px solid #bfdbfe;
  border-radius:999px;

  text-decoration:none;
  white-space:nowrap;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}
/* hover 效果 */
.mmc__shopLink:hover{
  background:#2563eb;
  color:#ffffff;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
  transform:translateY(-1px);
}

/* active 微回饋 */
.mmc__shopLink:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(37,99,235,.2);
}

/* ===== 時尚 Tabs（上方按鈕） ===== */
.mmc__tabs{
  margin-left:auto;
  display:flex;
  gap:10px;
  padding:6px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.mmc__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}
.mmc__tab{
  appearance:none;
  border:1px solid transparent;
  background: transparent;
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  color:#334155;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.mmc__tab:hover{
  background:#6b7280; /* 中性灰 */
  color:#ffffff;      /* 白字 */
  transform: translateY(-1px);
}
.mmc__tab{
  transition: background .15s ease, color .15s ease, transform .15s ease;
}


.mmc__tab.is-active{
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color:#fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 20px rgba(37,99,235,.22);
}

.mmc__tab:active{
  transform: translateY(0px);
}

.mmc__shop{
  padding-top:14px;
  margin-top:14px;
}

/* ===== 店鋪標頭區 ===== */
.mmc__shopHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  margin-left:11px;
  margin-right:11px;
}

.mmc__shopName{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.4;
  margin-right:11px;
  transform: translateY(1px);
}

.mmc__shopName{
  font-family:
    "Inter",
    "Segoe UI",
    "PingFang TC",
    "Noto Sans TC",
    sans-serif;

  font-size:14.5px;
  font-weight:500;
  letter-spacing:.8px;
}


/* icon */
.mmc__shopName::before{
  content:"";
  width:23px;
  height:23px;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
  mask:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M2 7l2-4h16l2 4v2a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1-6 0a3 3 0 0 1-3 3a3 3 0 0 1-3-3V7zm2 6v7a1 1 0 0 0 1 1h5v-6h4v6h5a1 1 0 0 0 1-1v-7z'/>\
</svg>") no-repeat center / contain;
}




.mmc__card.is-active{
  outline: 3px solid #f97316;
  outline-offset: -3px;
  box-shadow:
    0 0 0 3px rgba(249,115,22,.25),
    0 18px 36px rgba(15,23,42,.16);
  transform: translateY(-4px);
}

/* 滑鼠移入視覺回饋 */
.mmc__card:hover{
  outline: 3px solid #fb923c;
  outline-offset: -3px;
  transform: translateY(-4px);
}
/* 當容器進入 dim 狀態 */
.mmc__cards.is-dim .mmc__card{
  opacity: .45;
  transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}

/* 目前高亮卡片保持正常 */
.mmc__cards.is-dim .mmc__card.is-active,
.mmc__cards.is-dim .mmc__card:hover{
  opacity: 1;
  transform: translateY(-4px) scale(1);
}

/* ===== 手機微調 ===== */
@media (max-width:480px){
  .mmc__shopHead{
    padding:10px 12px;
    border-radius:10px;
  }

  .mmc__shopName{
    font-size:14px;
  }

  .mmc__shopLink{
    padding:5px 10px;
    font-size:12px;
  }
}