:root{
  --bg:#020617;
  --fg:#111827;
  --muted:#6b7280;

  /* glass */
  --glass:rgba(255,255,255,.78);

  /* Card glass (NO gradient) */
  --glass-card: rgba(255,255,255,.44);
  --glass-card-hover: rgba(255,255,255,.54);

  /* borders */
  --hairline: rgba(255,255,255,.55);
  --hairline-pink: rgba(236,72,153,.18);

  /* shadows */
  --card-shadow:
    0 18px 55px rgba(236,72,153,.16),
    0 10px 26px rgba(17,24,39,.06);
  --card-shadow-hover:
    0 26px 80px rgba(236,72,153,.22),
    0 14px 34px rgba(17,24,39,.08);

  --badge-bg:#111827;
  --badge-fg:#ffffff;
}

/* reset */
*,
*::before,
*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans TC","Segoe UI",sans-serif;

  /* ✅ 高級淡粉霧面背景（光斑 + 柔霧 + 漸層） */
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(900px 500px at 80% 25%, rgba(255,210,230,.65), rgba(255,210,230,0) 60%),
    radial-gradient(900px 600px at 40% 85%, rgba(255,180,215,.35), rgba(255,180,215,0) 60%),
    linear-gradient(180deg, #fff6f9 0%, #ffe6ef 45%, #ffd7e7 100%);
  background-attachment:fixed;

  color:var(--fg);
  position:relative;
}

/* ✅ 細噪點（提升質感） */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity:.22;
}

/* ===== Header：半透白玻璃 ===== */
.hdr{
  position:sticky;
  top:0;
  z-index:20;

  background:rgba(255,255,255,.78);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border-bottom:1px solid var(--hairline);
  box-shadow:0 10px 30px rgba(236,72,153,.18);
}

.hdr-inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 16px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.shop-ico{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
}

.brand-wrap{
  flex:1;
  display:flex;
  justify-content:center;
}
.brand{
  letter-spacing:.35em;
  font-weight:800;
  font-size:20px;
  color:#111827;
  text-align:center;
}

/* 右上商城按鈕 */
.right-mall-btn{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 左上季節按鈕 */
.season-toggle{
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.72);
  color:#111827;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(236,72,153,.18);
  transition:background .2s,transform .2s, box-shadow .2s;
}
.season-toggle:hover{
  background:rgba(255,255,255,.92);
  transform:scale(1.05);
  box-shadow:0 10px 26px rgba(236,72,153,.24);
}

/* ===================================================================== */
/* ✅ Tabs：高級 iOS Segmented Glass（置中整合版）                         */
/* ===================================================================== */
.tabs-wrap{
  max-width:980px;
  margin:10px auto 0;
  padding:0 16px;
  display:flex;
  justify-content:center;
}

.tabs{
  display:flex;
  justify-content:center;   /* ✅ 桌機置中 */
  align-items:center;
  gap:8px;
  padding:10px;

  width:100%;
  max-width:820px;

  border-radius:18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);

  box-shadow: 0 14px 40px rgba(236,72,153,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.tabs::-webkit-scrollbar{display:none;}
.tabs{scrollbar-width:none;}

.tab{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  font-size:13px;
  color: rgba(17,24,39,.62);
  text-decoration:none;
  letter-spacing:.2px;
  white-space:nowrap;
  scroll-snap-align:center;

  background:transparent;
  border:none;
  cursor:pointer;

  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.tab:hover{ transform: translateY(-1px); }

/* 相容你原本用的 .tab.active */
.tab.active{
  color: rgba(17,24,39,.92);
  background: rgba(255,255,255,.85);
  box-shadow:
    0 10px 24px rgba(236,72,153,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* 舊 pill 停用 */
.pill{ display:none !important; }

/* ===== Layout ===== */
.container{
  max-width:1200px;
  margin:22px auto 100px;
  padding:0 16px 40px;
}
.page{display:none;}
.page.active{display:block;}

/* 分區標題 */
.pill-title{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:32px 0 16px;
}
.pill-title::before,
.pill-title::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(236,72,153,.28);
  margin:0 14px;
}
.pill-title span{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 18px;
  border-radius:999px;

  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 8px 24px rgba(236,72,153,.16);
  font-size:13px;
  color:#111827;
}

.empty{
  margin:10px 0 24px;
  text-align:center;
  color:#6b7280;
  font-size:13px;
}

/* 卡片容器 */
.cards{margin:0 auto 8px;}

/* slider 外殼 */
.slider-shell{position:relative;}
.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:none;

  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  color:#111827;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(236,72,153,.18);
  cursor:pointer;
  z-index:5;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.slider-arrow:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 34px rgba(236,72,153,.24);
}
.slider-arrow.left{left:-16px;}
.slider-arrow.right{right:-16px;}
@media (max-width:900px){
  .slider-arrow.left{left:-6px;}
  .slider-arrow.right{right:-6px;}
}

/* 跑馬燈 */
.cards.slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
  cursor:grab;
  user-select:none;
  -webkit-overflow-scrolling:touch;
}
.cards.slider.dragging{cursor:grabbing;}
.cards.slider::-webkit-scrollbar{display:none;}
.cards.slider{scrollbar-width:none;}

/* 一般列表 */
.cards.grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px 32px;
}

/* ===== 卡片（粉白玻璃、無漸層） ===== */
.card-wrap{
  position:relative;
  scroll-snap-align:center;
  color:#111827;
  border-radius:26px;
  padding:14px;

  background:var(--glass-card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  border:1px solid var(--hairline);
  box-shadow: var(--card-shadow);

  flex:0 0 auto;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.card-wrap:hover{
  transform:translateY(-4px);
  background:var(--glass-card-hover);
  border-color: rgba(255,255,255,.72);
  box-shadow: var(--card-shadow-hover);
}

/* grid 裡卡寬 */
.cards.grid .card-wrap{
  width:100%;
  max-width:260px;
  flex:0 1 260px;
}

/* slider 裡卡寬 */
.cards.slider .card-wrap,
.card-wrap.slider-item{
  min-width:320px;
  max-width:360px;
}

/* 圖片：✅ 不要陰影 */
.card-img-link{display:block;text-decoration:none;}
.card-img{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden !important;

  border:1px solid rgba(236,72,153,.18);
  box-shadow:none;
  background:#fff;
}
.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:20px;
  box-shadow:none;
}

.img-tag{
  display: flex;                 /* ✅ 變成 block-level flex */
  width: fit-content;            /* ✅ 寬度跟著文字 */
  margin: 0 auto 8px;            /* ✅ 一定置中卡片 */
  justify-content: center;       /* ✅ 文字水平置中 */
  align-items: center;           /* ✅ 文字垂直置中 */

  padding: 6px 14px;
  min-height: 26px;
  line-height: 1;

  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .25px;

  color: rgba(255,255,255,.96);
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.28);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 6px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}



@media (max-width:640px){
  .img-tag{
    margin: 0 auto 6px;
    padding: 5px 12px;
    font-size: 11.5px;
    min-height: 24px;
  }
}


/* 舊 card-title 關掉 */
.card-title{ display:none !important; }

/* ===== 卡面標題：純文字 + 置中 ===== */
.card-name{
  margin:12px 0 6px;
  width:100%;
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
  color:#111827;
  text-align:center; /* ✅ 置中 */

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 資訊列 */
.card-info-row{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:13px;
  color:#111827;
}

.card-season{
  opacity:.85;
  font-size:11px;
  letter-spacing:.18em;
  color:#6b7280;
}
.card-price{font-weight:800;color:#111827;}

.card-tags{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 10px;
  border-radius:999px;
  background:var(--badge-bg);
  color:var(--badge-fg);
  font-size:11px;
  font-weight:700;
}

/* Dock */
.dock{
  position:fixed;
  inset-inline:0;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  pointer-events:none;
}
.dock .round-ico{
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(236,72,153,.18);
  pointer-events:auto;
}
.dock .round-ico img{width:22px;height:22px;}
.copy{
  margin-left:12px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#111827;
  font-size:11px;
  pointer-events:auto;
  box-shadow:0 10px 30px rgba(236,72,153,.16);
}

/* ===== 詳情頁 ===== */
.item-main{
  max-width:900px;
  margin:30px auto 120px;
  padding:0 16px 40px;
}
.item-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr);
  gap:20px;
}
.item-video-box{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:24px;
  padding:12px;
  box-shadow:0 18px 48px rgba(236,72,153,.18);
}
.item-video{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.item-video video{width:100%;height:100%;display:block;}
.item-meta{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:20px;
  padding:16px 18px 14px;
  box-shadow:0 14px 40px rgba(236,72,153,.18);
}
.item-title{font-size:18px;font-weight:900;margin:0 0 8px;}
.item-sub{font-size:14px;color:var(--muted);margin-bottom:10px;}
.item-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.item-price{font-size:15px;font-weight:900;margin-bottom:12px;}
.item-desc{white-space:pre-wrap;line-height:1.6;font-size:14px;}

/* 左側季節抽屜 + 背景 */
.season-drawer{
  position:fixed;
  inset:0 auto 0 0;
  width:260px;
  padding:24px 16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transform:translateX(-100%);
  transition:transform 0.25s ease;
  z-index:1000;
  box-shadow:0 18px 60px rgba(236,72,153,.18);
}
.season-drawer h2{margin-bottom:16px;font-size:1rem;color:#111827;}
.season-drawer ul{list-style:none;padding:0;margin:0;}
.season-drawer li{
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:.9rem;
  margin-bottom:4px;
  color:#111827;
}
.season-drawer li:hover{background:rgba(236,72,153,.12);}
.season-drawer li.active{background:rgba(236,72,153,.2);}
.season-drawer.open{transform:translateX(0);}
.season-backdrop{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,0.25);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
  z-index:999;
}
.season-backdrop.show{opacity:1;pointer-events:auto;}

/* ===== RWD ===== */
@media (max-width:900px){
  .hdr-inner{padding:10px 14px 8px;}
  .brand{font-size:18px;letter-spacing:.25em;}
  .cards.grid .card-wrap{flex:0 1 260px;}
  .item-main{margin-top:16px;}
}

/* 📱 手機：Tabs 保留滑動體驗 */
@media (max-width:640px){
  .tabs-wrap{padding:0 8px;}
  .tabs{
    max-width:100%;
    justify-content:flex-start; /* ✅ 手機滑動 */
  }

  .hdr-inner{justify-content:center;position:relative;}
  .season-toggle{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
  }
  .right-mall-btn{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
  }
  .brand-wrap{flex:none;}

  .cards.slider .card-wrap{min-width:44vw;max-width:44vw;}
  .cards.grid .card-wrap{flex:0 0 calc(50% - 20px);max-width:calc(50% - 20px);}

  .card-info-row{margin-top:10px;}
  .dock{bottom:10px;}
}